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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/actions/types.js
View File

@ -1,5 +1,8 @@
export const NEW_CODE = 'NEW_CODE';
export const CHANGE_WORKSPACE = 'CHANGE_WORKSPACE';
export const NEW_WORKSPACE = 'NEW_WORKSPACE';
export const CREATE_BLOCK = 'CREATE_BLOCK';
export const MOVE_BLOCK = 'MOVE_BLOCK';
export const CHANGE_BLOCK = 'CHANGE_BLOCK';
export const DELETE_BLOCK = 'DELETE_BLOCK';
export const CLEAR_STATS = 'CLEAR_STATS';

51
src/actions/workspaceActions.js
View File

@ -1,28 +1,61 @@
import { NEW_WORKSPACE, CREATE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from './types';
import { NEW_CODE, CHANGE_WORKSPACE, NEW_WORKSPACE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from './types';
import * as Blockly from 'blockly/core';
export const workspaceChange = () => (dispatch) => {
dispatch({
type: CHANGE_WORKSPACE
})
}
export const initWorkspace = (workspace) => (dispatch) => {
dispatch({
type: NEW_WORKSPACE,
payload: workspace
});
}
export const onChangeWorkspace = (event) => (dispatch, getState) => {
var oldWorkspace = getState().workspace.new; // stored 'new workspace' is from now on old
var newWorkspace = window.Ardublockly.workspace;
const workspace = Blockly.getMainWorkspace();
dispatch({
type: NEW_WORKSPACE,
payload: {new: newWorkspace, old: oldWorkspace}
payload: workspace
});
dispatch({
type: CHANGE_WORKSPACE,
})
var code = getState().workspace.code;
code.arduino = Blockly.Arduino.workspaceToCode(workspace);
var xmlDom = Blockly.Xml.workspaceToDom(workspace);
code.xml = Blockly.Xml.domToPrettyText(xmlDom);
dispatch({
type: NEW_CODE,
payload: code
});
console.log(event.type);
var stats = getState().workspace.stats;
if (event.type === window.Blockly.Events.CREATE){
if (event.type === Blockly.Events.BLOCK_CREATE){
stats.create += event.ids.length;
dispatch({
type: CREATE_BLOCK,
payload: stats
});
}
else if (event.type === window.Blockly.Events.CHANGE){
else if (event.type === Blockly.Events.BLOCK_MOVE){
stats.move += 1;
dispatch({
type: MOVE_BLOCK,
payload: stats
});
}
else if (event.type === Blockly.Events.BLOCK_CHANGE){
stats.change += 1;
dispatch({
type: CHANGE_BLOCK,
payload: stats
});
}
else if (event.type === window.Blockly.Events.DELETE){
else if (event.type === Blockly.Events.BLOCK_DELETE){
if(stats.create > 0){
stats.delete += event.ids.length;
dispatch({
@ -37,7 +70,8 @@ export const clearStats = () => (dispatch) => {
var stats = {
create: 0,
change: 0,
delete: 0
delete: 0,
move: 0
};
dispatch({
type: CLEAR_STATS,
@ -45,6 +79,7 @@ export const clearStats = () => (dispatch) => {
});
};
export const setWorkspace = (workspace) => (dispatch, getState) => {
dispatch({
type: NEW_WORKSPACE,

4
src/components/Blockly/BlocklyComponent.css
View File

@ -1,6 +1,4 @@
#blocklyDiv {
height: 90vH;
height: 60vH;
width: 50%;
position: absolute;
bottom: 0;
}

68
src/components/BlocklyView.js Normal file
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;

22
src/components/ClearWorkspace.js
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);

28
src/components/CodeViewer.js Normal file
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);

48
src/components/Home.js
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);

27
src/components/MaxBlocks.js
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);

18
src/components/WorkspaceFunc.js
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);

31
src/components/WorkspaceStats.js
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));

27
src/reducers/workspaceReducer.js
View File

@ -1,27 +1,40 @@
import { NEW_WORKSPACE, CREATE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from '../actions/types';
import { CHANGE_WORKSPACE, NEW_CODE, NEW_WORKSPACE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from '../actions/types';
const initialState = {
old: {},
new: {},
code: {
arduino: '',
xml: ''
},
workspace: null,
stats: {
create: 0,
change: 0,
delete: 0,
move: 0
},
test: 0
change: 0
};
export default function(state = initialState, action){
switch(action.type){
case NEW_CODE:
return {
...state,
code: action.payload
};
case CHANGE_WORKSPACE:
return {
...state,
change: state.change += 1
};
case NEW_WORKSPACE:
return {
...state,
old: action.payload.old,
new: action.payload.new,
test: state.test += 1
workspace: action.payload
};
case CREATE_BLOCK:
case MOVE_BLOCK:
case CHANGE_BLOCK:
case DELETE_BLOCK:
case CLEAR_STATS: