schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adaptation of the functionalities to Blockly package

Browse Source
This commit is contained in:
Delucse
2020-07-23 15:42:01 +02:00
parent d1d7a447bc
commit c2405de04a
11 changed files with 254 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Blockly/BlocklyComponent.css
+1 -3
View File
@@ -1,6 +1,4 @@
#blocklyDiv {
height: 90vH;
height: 60vH;
width: 50%;
position: absolute;
bottom: 0;
}
src/components/BlocklyView.js
+68
View File
@@ -0,0 +1,68 @@
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;
src/components/ClearWorkspace.js
+15 -7
View File
@@ -1,7 +1,7 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { clearStats } from '../actions/workspaceActions';
import { clearStats, workspaceChange } from '../actions/workspaceActions';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -13,8 +13,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
class ClearWorkspace extends Component {
clearWorkspace = () => {
this.props.newWorkspace.clear();
this.props.clearStats();
if(this.props.workspace){
this.props.workspace.clear();
this.props.workspace.options.maxBlocks = Infinity;
this.props.workspaceChange();
this.props.clearStats();
}
else {
alert()
}
}
render() {
@@ -28,12 +35,13 @@ class ClearWorkspace extends Component {
}
ClearWorkspace.propTypes = {
newWorkspace: PropTypes.object.isRequired,
clearStats: PropTypes.func.isRequired
workspace: PropTypes.object.isRequired,
clearStats: PropTypes.func.isRequired,
workspaceChange: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
newWorkspace: state.workspace.new
workspace: state.workspace.workspace
});
export default connect(mapStateToProps, { clearStats })(ClearWorkspace);
export default connect(mapStateToProps, { clearStats, workspaceChange })(ClearWorkspace);
src/components/CodeViewer.js
+28
View File
@@ -0,0 +1,28 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
class CodeViewer extends Component {
render() {
return (
<div>
{this.props.arduino}
<p>{this.props.xml}</p>
</div>
);
};
}
CodeViewer.propTypes = {
arduino: PropTypes.string.isRequired,
xml: PropTypes.string.isRequired
};
const mapStateToProps = state => ({
arduino: state.workspace.code.arduino,
xml: state.workspace.code.xml
});
export default connect(mapStateToProps, null)(CodeViewer);
src/components/Home.js
+34 -14
View File
@@ -1,7 +1,12 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { onChangeWorkspace, initWorkspace } from '../actions/workspaceActions';
import WorkspaceStats from './WorkspaceStats';
import WorkspaceFunc from './WorkspaceFunc';
import CodeViewer from './CodeViewer';
import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './Blockly';
import * as Blockly from 'blockly/core';
@@ -11,25 +16,19 @@ import './Blockly/blocks/index';
import './Blockly/generator/index';
class Home extends React.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 })
this.props.initWorkspace(workspace);
workspace.addChangeListener((event) => {
this.props.onChangeWorkspace(event);
});
}
render() {
@@ -37,13 +36,16 @@ class Home extends React.Component {
<div>
<WorkspaceStats />
<BlocklyComponent ref={this.simpleWorkspace}
readOnly={false} trashcan={true} media={'media/'}
readOnly={false}
trashcan={true}
media={'media/'}
move={{
scrollbars: true,
drag: true,
wheel: true
}}
initialXml={''}>
initialXml={''}
>
<Category name="loops" >
<Block type="controls_for" />
<Block type="controls_repeat_ext" />
@@ -64,10 +66,28 @@ class Home extends React.Component {
<Block type="logic_boolean"></Block>
</Category>
</BlocklyComponent>
<WorkspaceFunc generateCode={this.generateCode} />
<WorkspaceFunc />
</div>
);
};
}
export default Home;
WorkspaceStats.propTypes = {
workspace: PropTypes.object.isRequired,
create: PropTypes.number.isRequired,
change: PropTypes.number.isRequired,
delete: PropTypes.number.isRequired,
move: PropTypes.number.isRequired,
worskpaceChange: PropTypes.number.isRequired
};
const mapStateToProps = state => ({
workspace: state.workspace.workspace,
create: state.workspace.stats.create,
change: state.workspace.stats.change,
delete: state.workspace.stats.delete,
move: state.workspace.stats.move,
worskpaceChange: state.workspace.change
});
export default connect(null, { onChangeWorkspace, initWorkspace })(Home);
src/components/MaxBlocks.js
+12 -15
View File
@@ -1,7 +1,9 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { setWorkspace } from '../actions/workspaceActions';
import { workspaceChange } from '../actions/workspaceActions';
import * as Blockly from 'blockly/core';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
@@ -16,9 +18,13 @@ class MaxBlocks extends Component {
this.setState({ [e.target.name]: e.target.value});
}
setMaxBlocks = () => {
const workspace = Blockly.getMainWorkspace();
workspace.options.maxBlocks = this.state.max;
this.props.workspaceChange();
}
render() {
// var blockLeft = Object.keys(this.props.newWorkspace).length > 0 ? <p>{this.props.newWorkspace.remainingCapacity()} verbleibende Blöcke möglich</p> : null
// var error = this.state.error ? <div>{this.state.error}</div> : null;
return (
<div style={{display: 'inline', marginLeft: '10px'}}>
<TextField
@@ -27,9 +33,9 @@ class MaxBlocks extends Component {
type="number"
onChange={this.onChange}
value={this.state.max}
variant='filled'
variant='outlined'
/>
<Button style={{marginRight: '10px'}} variant="contained" color="primary" onClick={() => {this.props.newWorkspace.options.maxBlocks = this.state.max; this.props.setWorkspace(this.props.newWorkspace)}}>
<Button style={{marginRight: '10px'}} variant="contained" color="primary" onClick={this.setMaxBlocks}>
Maximale Blöcke
</Button>
</div>
@@ -37,13 +43,4 @@ class MaxBlocks extends Component {
};
}
MaxBlocks.propTypes = {
newWorkspace: PropTypes.object.isRequired,
setWorkspace: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
newWorkspace: state.workspace.new
});
export default connect(mapStateToProps, { setWorkspace })(MaxBlocks);
export default connect(null, { workspaceChange })(MaxBlocks);
src/components/WorkspaceFunc.js
+9 -9
View File
@@ -18,11 +18,12 @@ class WorkspaceFunc extends Component {
open: false
}
getArduinoCode = () => {
this.setState({ title: 'Adurino Code', content: this.props.arduino, open: true });
}
getXMLCode = () => {
var code = window.Ardublockly.generateXml();
this.setState({ title: 'XML Code', content: code, open: true });
this.setState({ title: 'XML Code', content: this.props.xml, open: true });
}
toggleDialog = () => {
@@ -43,15 +44,12 @@ class WorkspaceFunc extends Component {
</Button>
</DialogActions>
</Dialog>
<Button style={{ marginRight: '10px' }} variant="contained" color="primary" onClick={() => this.props.generateCode()}>
<Button style={{ marginRight: '10px' }} variant="contained" color="primary" onClick={() => this.getArduinoCode()}>
Get Adurino Code
</Button>
<Button style={{ marginRight: '10px' }} variant="contained" color="primary" onClick={() => this.getXMLCode()}>
Get XML Code
</Button>
<Button variant="contained" color="primary" onClick={() => { var blocks = this.props.newWorkspace; console.log(blocks); }}>
Get workspace
</Button>
<MaxBlocks />
</div>
);
@@ -59,11 +57,13 @@ class WorkspaceFunc extends Component {
}
WorkspaceFunc.propTypes = {
newWorkspace: PropTypes.object.isRequired
arduino: PropTypes.string.isRequired,
xml: PropTypes.string.isRequired
};
const mapStateToProps = state => ({
newWorkspace: state.workspace.new
arduino: state.workspace.code.arduino,
xml: state.workspace.code.xml
});
export default connect(mapStateToProps, null)(WorkspaceFunc);
src/components/WorkspaceStats.js
+21 -10
View File
@@ -2,11 +2,13 @@ import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import * as Blockly from 'blockly/core';
import { withStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';
import { faPuzzlePiece, faTrash, faPlus, faPen } from "@fortawesome/free-solid-svg-icons";
import { faPuzzlePiece, faTrash, faPlus, faPen, faArrowsAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({
@@ -22,13 +24,13 @@ const styles = (theme) => ({
class WorkspaceStats extends Component {
render() {
// var check = Object.keys(this.props.newWorkspace).length > 0 && this.props.create - this.props.delete !== this.props.newWorkspace.getAllBlocks().length ? <h1>FEHLER!</h1> : null;
const remainingBlocksInfinity = this.props.workspace ? this.props.workspace.remainingCapacity() !== Infinity : null;
return (
<div style={{marginBottom: '20px'}}>
<Tooltip title="Anzahl aktueller Blöcke" style={{marginLeft: 0}} className={this.props.classes.stats}>
<div>
<FontAwesomeIcon icon={faPuzzlePiece} />
<Typography style={{display: 'inline'}}> {Object.keys(this.props.newWorkspace).length > 0 ? this.props.newWorkspace.getAllBlocks().length : 0}</Typography>
<Typography style={{display: 'inline'}}> {this.props.workspace ? this.props.workspace.getAllBlocks().length : 0}</Typography>
</div>
</Tooltip>
<Tooltip title="Anzahl neuer Blöcke" className={this.props.classes.stats}>
@@ -45,6 +47,13 @@ class WorkspaceStats extends Component {
<Typography style={{display: 'inline'}}> {this.props.change}</Typography>
</div>
</Tooltip>
<Tooltip title="Anzahl bewegter Blöcke" className={this.props.classes.stats}>
<div>
<FontAwesomeIcon icon={faArrowsAlt} style={{marginRight: '5px'}}/>
<FontAwesomeIcon icon={faPuzzlePiece} />
<Typography style={{display: 'inline'}}> {this.props.move}</Typography>
</div>
</Tooltip>
<Tooltip title="Anzahl gelöschter Blöcke" className={this.props.classes.stats}>
<div>
<FontAwesomeIcon icon={faTrash} style={{marginRight: '5px'}}/>
@@ -52,29 +61,31 @@ class WorkspaceStats extends Component {
<Typography style={{display: 'inline'}}> {this.props.delete}</Typography>
</div>
</Tooltip>
{Object.keys(this.props.newWorkspace).length > 0 ? this.props.newWorkspace.remainingCapacity() !== Infinity ?
{remainingBlocksInfinity ?
<Tooltip title="verbleibende Blöcke" className={this.props.classes.stats}>
<Typography style={{display: 'inline'}}>{this.props.delete} verbleibende Blöcke</Typography>
</Tooltip> : null : null}
<Typography style={{display: 'inline'}}>{this.props.workspace.remainingCapacity()} verbleibende Blöcke</Typography>
</Tooltip> : null}
</div>
);
};
}
WorkspaceStats.propTypes = {
newWorkspace: PropTypes.object.isRequired,
workspace: PropTypes.object.isRequired,
create: PropTypes.number.isRequired,
change: PropTypes.number.isRequired,
delete: PropTypes.number.isRequired,
test: PropTypes.number.isRequired
move: PropTypes.number.isRequired,
worskpaceChange: PropTypes.number.isRequired
};
const mapStateToProps = state => ({
newWorkspace: state.workspace.new,
workspace: state.workspace.workspace,
create: state.workspace.stats.create,
change: state.workspace.stats.change,
delete: state.workspace.stats.delete,
test: state.workspace.test
move: state.workspace.stats.move,
worskpaceChange: state.workspace.change
});
export default connect(mapStateToProps, null)(withStyles(styles, {withTheme: true})(WorkspaceStats));