Spaces:

szili2011
/

Chrome-ExtensionMaker

Sleeping

Chrome-ExtensionMaker / blockly.html

Update blockly.html

9d3182d verified 7 days ago

1.44 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Blockly Interface</title>
	<script src="https://unpkg.com/blockly/blockly.min.js"></script>
	<style>
	#blocklyDiv {
	height: 480px;
	width: 600px;
	border: 1px solid black;
	}
	</style>
	</head>
	<body>
	<h1>Blockly Coding Interface</h1>
	<div id="blocklyDiv"></div>
	<button id="generate">Generate Code</button>
	<pre id="code"></pre>
	<script>
	var workspace = Blockly.inject('blocklyDiv', {
	toolbox: `
	<xml>
	<block type="controls_if"></block>
	<block type="logic_compare"></block>
	<block type="math_number"></block>
	<block type="math_arithmetic">
	<field name="OP">ADD</field>
	</block>
	<block type="text"></block>
	<block type="text_print"></block>
	</xml>
	`
	});

	document.getElementById('generate').onclick = function() {
	var code = Blockly.JavaScript.workspaceToCode(workspace);
	document.getElementById('code').innerText = code;
	// You could send the code back to the Gradio app here if needed
	};
	</script>
	</body>
	</html>