69 lines
1.9 KiB
JavaScript
69 lines
1.9 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './Blockly';
|
|
import * as Blockly from 'blockly/core';
|
|
import * as De from './Blockly/msg/de'; // de locale files
|
|
//import * as En from './Blockly/msg/en'; // de locale files
|
|
import './Blockly/blocks/index';
|
|
import './Blockly/generator/index';
|
|
|
|
|
|
class BlocklyView extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.simpleWorkspace = React.createRef();
|
|
this.state = {
|
|
generatedCode: 'Click text'
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
let workspace = Blockly.getMainWorkspace();
|
|
workspace.addChangeListener(this.generateCode);
|
|
}
|
|
|
|
generateCode = () => {
|
|
var code = Blockly.Arduino.workspaceToCode(this.workspace);
|
|
console.log(code);
|
|
this.setState({ generatedCode: code })
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<BlocklyComponent ref={this.simpleWorkspace}
|
|
readOnly={false}
|
|
trashcan={true}
|
|
media={'media/'}
|
|
move={{
|
|
scrollbars: true,
|
|
drag: true,
|
|
wheel: true
|
|
}}
|
|
initialXml={''}
|
|
>
|
|
<Category name="loops" >
|
|
<Block type="controls_for" />
|
|
<Block type="controls_repeat_ext" />
|
|
<Block type="controls_whileUntil" />
|
|
</Category>
|
|
<Category name="senseBox" colour="120" >
|
|
<Category name="Sensoren" colour="120" >
|
|
<Block type="sensebox_sensor_temp_hum"></Block>
|
|
</Category>
|
|
<Block type="sensebox_telegram" />
|
|
</Category>
|
|
<Category name="Logic" colour="#b063c5">
|
|
<Block type="control_if"></Block>
|
|
<Block type="controls_ifelse"></Block>
|
|
<Block type="logic_compare"></Block>
|
|
<Block type="logic_operation"></Block>
|
|
<Block type="logic_negate"></Block>
|
|
<Block type="logic_boolean"></Block>
|
|
</Category>
|
|
</BlocklyComponent>
|
|
);
|
|
};
|
|
}
|
|
|
|
export default BlocklyView;
|