Merge pull request #1 from pietervdvn/main

Add blocky editor
This commit is contained in:
redfast00 2021-09-15 21:22:57 +02:00 committed by GitHub
commit 40113c89ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 7325 additions and 1 deletions

6
.gitignore vendored
View file

@ -1 +1,5 @@
build/ .build/
editor/.idea/
editor/.cache
editor/dist
editor/node_modules

170
editor/LedBlocks.ts Normal file
View file

@ -0,0 +1,170 @@
import Blockly from "blockly";
import lua from "blockly/lua"
export default class LedBlocks {
static AddBlocks() {
this.add_delay_block()
this.add_waitframes_block()
this.add_wled_block()
this.add_led_amount();
}
private static add_wled_block() {
const delay_json = {
"type": "led",
"message0": "%1 %2 %3 %4 %5",
"previousStatement": null,
"nextStatement": null,
"args0": [
{
"type": "field_label_serializable",
"name": "NAME",
"text": "led"
},
{
"type": "input_value",
"name": "index",
"check": "Number"
},
{
"type": "input_value",
"name": "red",
"check": "Number"
},
{
"type": "input_value",
"name": "green",
"check": "Number"
},
{
"type": "input_value",
"name": "blue",
"check": "Number"
}
],
"colour": 345,
"tooltip": "Sets the led at index 'index' to the specified RGB-value ",
"helpUrl": ""
}
Blockly.Blocks['led'] = {
init: function () {
this.jsonInit(delay_json);
}
};
lua['led'] = function (block) {
const value = lua.valueToCode(block, 'index', lua["ORDER_ATOMIC"]);
const r = lua.valueToCode(block, 'red', lua["ORDER_ATOMIC"]);
const g = lua.valueToCode(block, 'green', lua["ORDER_ATOMIC"]);
const b = lua.valueToCode(block, 'blue', lua["ORDER_ATOMIC"]);
return `led(${value},${r},${g},${b})
`;
};
}
private static add_waitframes_block() {
const delay_json = {
"type": "waitframes",
"previousStatement": null,
"nextStatement": null,
"message0": "%1 %2",
"args0": [
{
"type": "field_label_serializable",
"name": "NAME",
"text": "waitframes"
},
{
"type": "input_value",
"name": "framewait",
"check": "Number"
}
],
"colour": 345,
"tooltip": "Waits the given amount of frames",
"helpUrl": ""
}
Blockly.Blocks['waitframes'] = {
init: function () {
this.jsonInit(delay_json);
}
};
lua['waitframes'] = function (block) {
// @ts-ignore
const value = lua.valueToCode(block, 'framewait', lua.ORDER_ATOMIC);
return 'waitframes(' + value + ')\n';
};
}
private static add_led_amount(){
const def = {
"type": "ledamount",
"message0": "%1",
"args0": [
{
"type": "field_label_serializable",
"name": "NAME",
"text": "ledamount in strip"
}],
"output": null,
"colour": 345,
"tooltip": "Gives the number of leds in the ledstrip",
"helpUrl": ""
}
Blockly.Blocks['ledamount'] = {
init: function () {
this.jsonInit(def);
}
};
lua['ledamount'] = function(block) {
// @ts-ignore
return ["ledamount()", lua.ORDER_NONE];
};
}
private static add_delay_block() {
const delay_json = {
"type": "delay",
"message0": "%1 %2",
"previousStatement": null,
"nextStatement": null,
"args0": [
{
"type": "field_label_serializable",
"name": "NAME",
"text": "delay (ms)"
},
{
"type": "input_value",
"name": "wait_time_millisecs",
"check": "Number"
}
],
"colour": 345,
"tooltip": "Waits the given amount of time in milliseconds",
"helpUrl": ""
}
Blockly.Blocks['delay'] = {
init: function () {
this.jsonInit(delay_json);
}
};
lua['delay'] = function (block) {
// @ts-ignore
const value = lua.valueToCode(block, 'wait_time_millisecs', lua.ORDER_ATOMIC);
return 'delay(' + value + ')\n';
};
}
}

14
editor/README.md Normal file
View file

@ -0,0 +1,14 @@
# Ledstrip_sandbox/editor
This is a small typescript application which has the blockly editor on board.
Install and deploy
run:
```
npm ci
npm build
```
A file 'dist/' will be generated. Serve that file to host the editor

17
editor/Utils.ts Normal file
View file

@ -0,0 +1,17 @@
export default class Utils{
public static offerContentsAsDownloadableFile(contents: string | Blob, fileName: string = "download.txt",
options?: { mimetype: string }) {
const element = document.createElement("a");
let file;
if (typeof (contents) === "string") {
file = new Blob([contents], {type: options?.mimetype ?? 'text/plain'});
} else {
file = contents;
}
element.href = URL.createObjectURL(file);
element.download = fileName;
document.body.appendChild(element); // Required for this to work in FireFox
element.click();
}
}

373
editor/index.html Normal file
View file

@ -0,0 +1,373 @@
<html lang="en">
<body>
<form>
<button id="export" type="button">Export lua code</button>
<button id="export-blocky" type="button">Export blocky</button>
Load blocky:
<input type="file" id="load"/>
</form>
<div style="width: 100%" id="blockly"></div>
<!-- This isn't rendered, but magically picked up by blockly -->
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<toolboxlabel name="Custom Toolbox" colour="darkslategrey"></toolboxlabel>
<category css-icon="customIcon fa fa-cog" name="Logic" categorystyle="logic_category">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_negate"></block>
<block type="logic_boolean"></block>
<block type="logic_null" disabled="true"></block>
<block type="logic_ternary"></block>
</category>
<category name="Leds" categorystyle="loop_category">
<block type="led">
</block>
<block type="delay">
</block>
<block type="waitframes">
</block>
<block type="ledamount">
</block>
</category>
<category name="Loops" categorystyle="loop_category">
<block type="controls_repeat_ext">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="controls_repeat" disabled="true"></block>
<block type="controls_whileUntil"></block>
<block type="controls_for">
<value name="FROM">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="TO">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
<value name="BY">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
<block type="controls_forEach"></block>
<block type="controls_flow_statements"></block>
</category>
<category name="Math" categorystyle="math_category">
<block type="math_number" gap="32">
<field name="NUM">123</field>
</block>
<block type="math_arithmetic">
<value name="A">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="B">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
<block type="math_single">
<value name="NUM">
<shadow type="math_number">
<field name="NUM">9</field>
</shadow>
</value>
</block>
<block type="math_trig">
<value name="NUM">
<shadow type="math_number">
<field name="NUM">45</field>
</shadow>
</value>
</block>
<block type="math_constant"></block>
<block type="math_number_property">
<value name="NUMBER_TO_CHECK">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
</block>
<block type="math_round">
<value name="NUM">
<shadow type="math_number">
<field name="NUM">3.1</field>
</shadow>
</value>
</block>
<block type="math_on_list"></block>
<block type="math_modulo">
<value name="DIVIDEND">
<shadow type="math_number">
<field name="NUM">64</field>
</shadow>
</value>
<value name="DIVISOR">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
<block type="math_constrain">
<value name="VALUE">
<shadow type="math_number">
<field name="NUM">50</field>
</shadow>
</value>
<value name="LOW">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="HIGH">
<shadow type="math_number">
<field name="NUM">100</field>
</shadow>
</value>
</block>
<block type="math_random_int">
<value name="FROM">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="TO">
<shadow type="math_number">
<field name="NUM">100</field>
</shadow>
</value>
</block>
<block type="math_random_float"></block>
<block type="math_atan2">
<value name="X">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="Y">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
</category>
<category name="Text" categorystyle="text_category">
<block type="text"></block>
<block type="text_multiline"></block>
<block type="text_join"></block>
<block type="text_append">
<value name="TEXT">
<shadow type="text"></shadow>
</value>
</block>
<block type="text_length">
<value name="VALUE">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_isEmpty">
<value name="VALUE">
<shadow type="text">
<field name="TEXT"></field>
</shadow>
</value>
</block>
<block type="text_indexOf">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">text</field>
</block>
</value>
<value name="FIND">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_charAt">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">text</field>
</block>
</value>
</block>
<block type="text_getSubstring">
<value name="STRING">
<block type="variables_get">
<field name="VAR">text</field>
</block>
</value>
</block>
<block type="text_changeCase">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_trim">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_count">
<value name="SUB">
<shadow type="text"></shadow>
</value>
<value name="TEXT">
<shadow type="text"></shadow>
</value>
</block>
<block type="text_replace">
<value name="FROM">
<shadow type="text"></shadow>
</value>
<value name="TO">
<shadow type="text"></shadow>
</value>
<value name="TEXT">
<shadow type="text"></shadow>
</value>
</block>
<block type="text_reverse">
<value name="TEXT">
<shadow type="text"></shadow>
</value>
</block>
<label text="Input/Output:" web-class="ioLabel"></label>
<block type="text_print">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
<block type="text_prompt_ext">
<value name="TEXT">
<shadow type="text">
<field name="TEXT">abc</field>
</shadow>
</value>
</block>
</category>
<category name="Lists" categorystyle="list_category">
<block type="lists_create_with">
<mutation items="0"></mutation>
</block>
<block type="lists_create_with"></block>
<block type="lists_repeat">
<value name="NUM">
<shadow type="math_number">
<field name="NUM">5</field>
</shadow>
</value>
</block>
<block type="lists_length"></block>
<block type="lists_isEmpty"></block>
<block type="lists_indexOf">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
<block type="lists_getIndex">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
<block type="lists_setIndex">
<value name="LIST">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
<block type="lists_getSublist">
<value name="LIST">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
<block type="lists_split">
<value name="DELIM">
<shadow type="text">
<field name="TEXT">,</field>
</shadow>
</value>
</block>
<block type="lists_sort"></block>
<block type="lists_reverse"></block>
</category>
<category name="Colour" categorystyle="colour_category">
<block type="colour_picker"></block>
<block type="colour_random"></block>
<block type="colour_rgb">
<value name="RED">
<shadow type="math_number">
<field name="NUM">100</field>
</shadow>
</value>
<value name="GREEN">
<shadow type="math_number">
<field name="NUM">50</field>
</shadow>
</value>
<value name="BLUE">
<shadow type="math_number">
<field name="NUM">0</field>
</shadow>
</value>
</block>
<block type="colour_blend">
<value name="COLOUR1">
<shadow type="colour_picker">
<field name="COLOUR">#ff0000</field>
</shadow>
</value>
<value name="COLOUR2">
<shadow type="colour_picker">
<field name="COLOUR">#3333ff</field>
</shadow>
</value>
<value name="RATIO">
<shadow type="math_number">
<field name="NUM">0.5</field>
</shadow>
</value>
</block>
</category>
<sep></sep>
<category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>
<category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>
</xml>
<script src="index.ts"></script>
</body>
</html>

58
editor/index.ts Normal file
View file

@ -0,0 +1,58 @@
import Blockly from 'blockly';
import lua from 'blockly/lua';
import Utils from "./Utils";
import LedBlocks from "./LedBlocks";
const toolbox = document.getElementById('toolbox')
console.log(toolbox)
const workspace = Blockly.inject('blockly',
{toolbox: toolbox});
LedBlocks.AddBlocks()
const fromLocalStorage = localStorage.getItem("code")
if (fromLocalStorage !== null) {
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(fromLocalStorage), workspace);
}
function myUpdateFunction(event) {
const xml_text = Blockly.Xml.domToText(Blockly.Xml.workspaceToDom(workspace));
localStorage.setItem("code", xml_text)
}
workspace.addChangeListener(myUpdateFunction);
document.getElementById("export")
.onclick = (e => {
var code = lua.workspaceToCode(workspace);
Utils.offerContentsAsDownloadableFile(code, "ledstrip_code.lua", {
mimetype: "application/x-lua"
})
})
document.getElementById("export-blocky")
.onclick = (e => {
var xml = Blockly.Xml.workspaceToDom(workspace);
var xml_text = Blockly.Xml.domToText(xml);
Utils.offerContentsAsDownloadableFile(xml_text, "ledstrip_code.xml", {
mimetype: "application/xml"
})
})
const fileInput = document.getElementById('load');
fileInput.onchange = () => {
const selectedFiles = [...fileInput.files];
var reader = new FileReader();
reader.onload = function (event) {
try {
// @ts-ignore
const xml : string = event.target.result;
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
} catch (e) {
alert("Invalid blocky file: ", e)
}
}
reader.readAsText(selectedFiles[0])
}

6642
editor/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

26
editor/package.json Normal file
View file

@ -0,0 +1,26 @@
{
"name": "ledstrip_sandbox_editor",
"version": "0.0.1",
"repository": "https://github.com/ZeusWPI/ledstrip_sandbox",
"description": "A blockly editor",
"bugs": "https://github.com/ZeusWPI/ledstrip_sandbox/issues",
"scripts": {
"start": "parcel *.html *.js *.ts",
"build": "rm -rf dist/ && npm run generate && parcel build --public-url ./ *.html *.ts *.js"
},
"keywords": [
"Editor"
],
"author": "pietervdvn",
"license": "MIT",
"dependencies": {
"@babel/preset-env": "7.13.8",
"blockly": "^6.20210701.0",
"parcel": "^1.2.4"
},
"devDependencies": {
"ts-node": "^9.0.0",
"ts-node-dev": "^1.0.0-pre.63",
"typescript": "^4.4.3"
}
}

18
editor/tsconfig.json Normal file
View file

@ -0,0 +1,18 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": [
"DOM",
"es5",
"scripthost",
"es2015.collection"
]
},
"exclude": [
"node_modules"
]
}

View file

@ -1,3 +1,5 @@
print("hello world") print("hello world")
led(1, 255, 255, 3) led(1, 255, 255, 3)
print("There are " .. tostring(ledamount()) .. " leds") print("There are " .. tostring(ledamount()) .. " leds")
delay(500) -- Waits X millissecs
waitframes(5) -- waits X frames, where a 'frame' is defined in full refreshes