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

add selected Board to settings and solve component rerender

Browse Source
This commit is contained in:
Mario Pesch 2022-09-23 11:31:44 +02:00
parent b212316b0b
commit 4565b4e482
27 changed files with 123 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/media/hardware/senseboxmcumini.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 343 KiB

14
src/components/Blockly/BlocklyWindow.js
View File

@ -43,8 +43,16 @@ class BlocklyWindow extends Component {
componentDidUpdate(props) {
const workspace = Blockly.getMainWorkspace();
var xml = this.props.initialXml;
if (props.selectedBoard !== this.props.selectedBoard) {
// change board
if(!xml) xml = initialXml;
var xmlDom = Blockly.Xml.textToDom(xml);
Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
// var toolbox = workspace.getToolbox();
// workspace.updateToolbox(toolbox.toolboxDef_);
}
// if svg is true, then the update process is done in the BlocklySvg component
if (props.initialXml !== xml && !this.props.svg) {
// guarantees that the current xml-code (this.props.initialXml) is rendered
@ -55,7 +63,7 @@ class BlocklyWindow extends Component {
if (props.language !== this.props.language) {
// change language
if (!xml) xml = initialXml;
var xmlDom = Blockly.Xml.textToDom(xml);
xmlDom = Blockly.Xml.textToDom(xml);
Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
// var toolbox = workspace.getToolbox();
// workspace.updateToolbox(toolbox.toolboxDef_);
@ -130,12 +138,14 @@ BlocklyWindow.propTypes = {
renderer: PropTypes.string.isRequired,
sounds: PropTypes.bool.isRequired,
language: PropTypes.string.isRequired,
selectedBoard: PropTypes.string.isRequired,
};
const mapStateToProps = (state) => ({
renderer: state.general.renderer,
sounds: state.general.sounds,
language: state.general.language,
selectedBoard: state.board.board,
});
export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(

12
src/components/Blockly/blocks/sensebox-led.js
View File

@ -45,15 +45,11 @@ Blockly.Blocks['sensebox_rgb_led'] = {
Blockly.Blocks['sensebox_ws2818_led_init'] = {
init: function () {
var dropdownOptions = [[Blockly.Msg.senseBox_ultrasonic_port_A, '1'],
[Blockly.Msg.senseBox_ultrasonic_port_B, '3'], [Blockly.Msg.senseBox_ultrasonic_port_C, '5']];
this.setColour(getColour().sensebox);
this.appendDummyInput()
.appendField(Blockly.Msg.senseBox_ws2818_rgb_led_init)
.appendField("Port:")
.appendField(new Blockly.FieldDropdown(dropdownOptions), "Port")
.appendField(new Blockly.FieldDropdown(selectedBoard().digitalPinsRGB), "Port")
this.appendValueInput("BRIGHTNESS", "brightness")
.appendField((Blockly.Msg.senseBox_ws2818_rgb_led_brightness));
this.appendValueInput("NUMBER", "number")
@ -66,15 +62,11 @@ Blockly.Blocks['sensebox_ws2818_led_init'] = {
Blockly.Blocks['sensebox_ws2818_led'] = {
init: function () {
var dropdownOptions = [[Blockly.Msg.senseBox_ultrasonic_port_A, '1'],
[Blockly.Msg.senseBox_ultrasonic_port_B, '3'], [Blockly.Msg.senseBox_ultrasonic_port_C, '5']];
this.setColour(getColour().sensebox);
this.appendDummyInput()
.appendField(Blockly.Msg.senseBox_ws2818_rgb_led)
.appendField("Port:")
.appendField(new Blockly.FieldDropdown(dropdownOptions), "Port")
.appendField(new Blockly.FieldDropdown(selectedBoard().digitalPinsRGB), "Port")
this.appendValueInput("POSITION", "position")
.appendField((Blockly.Msg.senseBox_ws2818_rgb_led_position));
this.appendValueInput("COLOR", 'Number')

2
src/components/Blockly/generator/sensebox-ble.js
View File

@ -101,7 +101,6 @@ Blockly.Arduino.sensebox_phyphox_graph = function () {
Blockly.Arduino.sensebox_phyphox_experiment_send = function () {
var branch = Blockly.Arduino.statementToCode(this, "sendValues");
var blocks = this.getDescendants();
console.log(blocks);
var count = 0;
if (blocks !== undefined) {
for (var i = 0; i < blocks.length; i++) {
@ -115,7 +114,6 @@ Blockly.Arduino.sensebox_phyphox_experiment_send = function () {
var string = "";
for (var j = 1; j <= count; j++) {
console.log("append");
if (string === "") {
string += `channel${j}`;
} else if (string !== "") {

1
src/components/Blockly/generator/sensebox-sd.js
View File

@ -203,6 +203,5 @@ Blockly.Arduino.sensebox_sd_save_for_osem = function (block) {
Blockly.Arduino.definitions_["SENSOR_ID" + id + ""] =
"const char SENSOR_ID" + id + '[] PROGMEM = "' + sensor_id + '";';
code += "addMeasurement(SENSOR_ID" + id + "," + sensor_value + ");\n";
console.log(code);
return code;
};

10
src/components/Blockly/generator/sensebox-web.js
View File

@ -1,4 +1,12 @@
import Blockly from "blockly";
//import store from "../../../store";
// preperations for the esp board
// var selectedBoard = store.getState().board.board;
// store.subscribe(() => {
// selectedBoard = store.getState().board.board;
// });
/* Wifi connection and openSenseMap Blocks*/
Blockly.Arduino.sensebox_wifi = function (block) {
@ -110,3 +118,5 @@ Blockly.Arduino.sensebox_ethernetIp = function () {
var code = "Ethernet.localIP()";
return [code, Blockly.Arduino.ORDER_ATOMIC];
};

1
src/components/Blockly/generator/variables.js
View File

@ -23,7 +23,6 @@ const setVariableFunction = function (defaultValue) {
.getVariableMap()
.getAllVariables();
const myVar = allVars.filter((v) => v.name === variableName)[0];
console.log(myVar);
var code = "";
if (myVar !== undefined) {
Blockly.Arduino.variables_[variableName + myVar.type] =

14
src/components/Blockly/helpers/board.js
View File

@ -23,6 +23,11 @@ const sensebox_mcu = {
["C5", "5"],
["C6", "6"],
],
digitalPinsRGB: [
["A", "1"],
["B", "3"],
["C", "5"],
],
digitalPinsButton: [
["on Board", "0"],
["A1", "1"],
@ -131,7 +136,7 @@ const sensebox_mini = {
description: "senseBox Mini",
compilerFlag: "arduino:samd",
digitalPins: [
["A1", "1"],
["Test", "1"],
["A2", "2"],
["B3", "3"],
["B4", "4"],
@ -148,6 +153,11 @@ const sensebox_mini = {
["C5", "5"],
["C6", "6"],
],
digitalPinsRGB: [
["on Board", "7"],
["B", "8"],
["C", "1"],
],
digitalPinsButton: [
["on Board", "0"],
["A1", "1"],
@ -247,7 +257,6 @@ const sensebox_mini = {
var board = sensebox_mcu
export const setBoard = (selectedBoard) => {
console.log(board)
if (selectedBoard === "mini"){
board = sensebox_mini
}
@ -258,6 +267,5 @@ export const setBoard = (selectedBoard) => {
export const selectedBoard = () => {
console.log(board)
return board;
};

3
src/components/Blockly/msg/de/ui.js
View File

@ -182,7 +182,8 @@ export const UI = {
settings_sounds: "Töne",
settings_sounds_text:
"Aktiviere oder Deaktiviere Töne beim hinzufügen und löschen von Blöcken. Standardmäßig deaktiviert",
settings_board: "Board",
settings_board_text: "Wähle dein verwendetes Board aus",
/**
* 404
*/

9
src/components/Blockly/msg/en/ui.js
View File

@ -176,6 +176,8 @@ export const UI = {
settings_sounds: "Sound",
settings_sounds_text:
"Enable or disable sounds when adding and deleting blocks. Disabled by default",
settings_board: "Board",
settings_board_text: "Choose your board",
/**
* 404
@ -296,4 +298,11 @@ export const UI = {
codeeditor_blockly_code: "Load blockly code",
codeeditor_compile_progress:
"Your code will now be compiled and then downloaded to your computer",
/**
* Device Selction
* */
deviceselection_head: "Which board are you using?",
deviceselection_keep_selection: "Save my choice",
};

1
src/components/CodeEditor/CodeEditor.js
View File

@ -38,7 +38,6 @@ const CodeEditor = (props) => {
})
.then((response) => response.json())
.then((data) => {
console.log(data);
if (data.code === "Internal Server Error") {
setProgress(false);
setOpen(true);

1
src/components/CodeEditor/Compile.js
View File

@ -89,7 +89,6 @@ class Compile extends Component {
})
.then((response) => response.json())
.then((data) => {
console.log(data);
if (data.code === "Internal Server Error") {
this.setState({
progress: false,

1
src/components/CodeEditor/SerialMonitor.js
View File

@ -27,7 +27,6 @@ const SerialMonitor = () => {
if (value) {
// byte array to string: https://stackoverflow.com/a/37542820
const text = String.fromCharCode.apply(null, value);
console.log(text);
setSerialPortContent((prevContent) => [
...prevContent,
[new Date(), text],

27
src/components/DeviceSelction.js → src/components/DeviceSelection.js
View File

@ -7,8 +7,7 @@ import { withStyles } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import * as Blockly from "blockly";
import ReactMarkdown from "react-markdown";
import { IconButton, Grid, Avatar } from "@material-ui/core";
import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
import { setBoard } from "../actions/boardAction";
const styles = (theme) => ({
@ -65,7 +64,6 @@ class DeviceSeclection extends Component {
this.setState({selectedBoard: value})
};
render() {
return (
<Dialog
@ -76,27 +74,27 @@ class DeviceSeclection extends Component {
title={Blockly.Msg.deviceselection_head}
content={""}
onClick={this.toggleDialog}
button={Blockly.Msg.button_save}
button={Blockly.Msg.button_accept}
disabled={this.state.selectedBoard===""}
>
<div>
<Grid container spacing={2} style={{ textAlign : "center" }}>
<Grid item xs={4}>
<Grid item xs={6}>
<IconButton onClick={(e) => this.onclick(e, "mcu")}>
<Avatar
alt="Sensebox MCU"
src="/media/hardware/senseboxmcu.png"
style={{
border: this.state.selectedBoard == "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
width:"20vw",
height: "20vw"
}}
/>
</IconButton>
<p>Sensebox MCU</p>
<p>senseBox MCU</p>
</Grid>
<Grid item xs={4}>
{/* <Grid item xs={4}>
<IconButton onClick={(e) => this.onclick(e, "esp")}>
<Avatar
alt="Sensebox ESP"
@ -109,20 +107,20 @@ class DeviceSeclection extends Component {
/>
</IconButton>
<p>Sensebox ESP</p>
</Grid>
<Grid item xs={4}>
</Grid> */}
<Grid item xs={6}>
<IconButton onClick={(e) => this.onclick(e, "mini")}>
<Avatar
alt="Sensebox Mini"
src="/media/hardware/senseboxmcu.png"
src="/media/hardware/senseboxmcumini.png"
style={{
border: this.state.selectedBoard == "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
width:"20vw",
height: "20vw"
}}
/>
</IconButton>
<p>Sensebox Mini</p>
<p>senseBox MCU:mini</p>
</Grid>
</Grid>
</div>
@ -141,6 +139,9 @@ class DeviceSeclection extends Component {
}
label={Blockly.Msg.deviceselection_keep_selection}
/>
<Typography variant="body1" >
Hier kommst du zur alten Blockly Version für den <a href="https://sensebox.github.io/blockly/">Arduino UNO</a> oder die <a href="/">senseBox MCU</a>
</Typography>
</Dialog>
);
}

4
src/components/Home.js
View File

@ -12,7 +12,7 @@ import BlocklyWindow from "./Blockly/BlocklyWindow";
import CodeViewer from "./CodeViewer";
import TrashcanButtons from "./Workspace/TrashcanButtons";
import HintTutorialExists from "./Tutorial/HintTutorialExists";
import DeviceSelction from "./DeviceSelction";
import DeviceSelection from "./DeviceSelection";
import Grid from "@material-ui/core/Grid";
import IconButton from "@material-ui/core/IconButton";
@ -187,7 +187,7 @@ class Home extends Component {
</Grid>
) : null}
</Grid>
<DeviceSelction />
<DeviceSelection />
<HintTutorialExists />
{this.props.platform ? (
<Dialog

55
src/components/Settings/DeviceSelector.js Normal file
View File

@ -0,0 +1,55 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { setBoard } from '../../actions/boardAction';
import * as Blockly from 'blockly/core';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Typography from '@material-ui/core/Typography';
import FormHelperText from '@material-ui/core/FormHelperText';
class DeviceSelector extends Component {
componentDidMount(){
// Ensure that Blockly.setLocale is adopted in the component.
// Otherwise, the text will not be displayed until the next update of the component.
this.forceUpdate();
}
render(){
return(
<div>
<Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_board}</Typography>
<FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_board_text}</FormHelperText>
<FormControl>
<InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_board}</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={this.props.selectedBoard}
onChange={(e) => this.props.setBoard(e.target.value)}
>
<MenuItem value="mcu">senseBox MCU</MenuItem>
<MenuItem value="mini">senseBox MCU mini</MenuItem>
</Select>
</FormControl>
</div>
);
}
}
DeviceSelector.propTypes = {
setBoard: PropTypes.func.isRequired,
selectedBoard: PropTypes.string.isRequired
};
const mapStateToProps = state => ({
selectedBoard: state.board.board
});
export default connect(mapStateToProps, { setBoard })(DeviceSelector);

4
src/components/Settings/Settings.js
View File

@ -12,6 +12,7 @@ import RenderSelector from "./RenderSelector";
import StatsSelector from "./StatsSelector";
import OtaSelector from "./OtaSelector";
import SoundsSelector from "./SoundsSelector";
import DeviceSelector from "./DeviceSelector";
import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
@ -52,6 +53,9 @@ class Settings extends Component {
<Paper style={{ margin: "10px 0px", padding: "10px" }}>
<SoundsSelector />
</Paper>
<Paper style={{ margin: "10px 0px", padding: "10px" }}>
<DeviceSelector />
</Paper>
<Button
style={{ marginTop: "10px" }}

1
src/components/Tutorial/Builder/Builder.js
View File

@ -304,7 +304,6 @@ class Builder extends Component {
newTutorial.append(`steps[${i}][xml]`, step.xml);
}
});
console.log(newTutorial);
return newTutorial;
}
};

2
src/components/Tutorial/Builder/Difficulty.js
View File

@ -34,13 +34,11 @@ const styles = (theme) => ({
class Difficulty extends Component {
ratingChanged = (newRating) => {
console.log(newRating);
this.handleChange(newRating);
};
handleChange = (e) => {
var value = e;
console.log(value);
if (this.props.property === "difficulty") {
this.props.tutorialDifficulty(value);
} else if (this.props.property === "json") {

1
src/components/Tutorial/Builder/MarkdownEditor.js
View File

@ -44,7 +44,6 @@ const MarkdownEditor = (props) => {
headers: { "Content-Type": "multipart/form-data" },
})
.then((res) => {
console.log(res);
resolve(
`${process.env.REACT_APP_BLOCKLY_API}/upload/` + res.data.filename
);

1
src/components/Tutorial/Builder/Public.js
View File

@ -36,7 +36,6 @@ const styles = (theme) => ({
class Public extends Component {
handleChange = (e) => {
var value = e.target.checked;
console.log(value);
if (this.props.property === "public") {
this.props.tutorialPublic(value);
} else if (this.props.property === "json") {

1
src/components/Tutorial/TutorialHome.js
View File

@ -147,7 +147,6 @@ class TutorialHome extends Component {
if (this.props.message.id === "GET_TUTORIALS_FAIL") {
alert(this.props.message.msg);
}
console.log(this.props.user);
}
componentWillUnmount() {

1
src/components/User/Login.js
View File

@ -50,7 +50,6 @@ export class Login extends Component {
}
// Check for login error
else if (message.id === "LOGIN_FAIL") {
console.log("login fail");
this.setState({
email: "",
password: "",

1
src/components/Workspace/AutoSave.js
View File

@ -37,7 +37,6 @@ class AutoSave extends Component {
};
componentDidMount() {
console.log(this.props.xml);
}
componentDidUpdate(prevProps) {

1
src/components/Workspace/Compile.js
View File

@ -89,7 +89,6 @@ class Compile extends Component {
})
.then((response) => response.json())
.then((data) => {
console.log(data);
if (data.code === "Internal Server Error") {
this.setState({
progress: false,

3
src/components/Workspace/WorkspaceFunc.js
View File

@ -15,9 +15,6 @@ import DeleteProject from "./DeleteProject";
import CopyCode from "./CopyCode";
import AutoSave from "./AutoSave";
class WorkspaceFunc extends Component {
componentDidUpdate() {
console.log(this.props.autosave);
}
render() {
return (

4
src/reducers/boardReducer.js
View File

@ -2,9 +2,9 @@ import { BOARD } from '../actions/types';
const initialValue = () => {
if (window.localStorage.getItem("board")) {
return window.localStorage.getItem("locale");
return window.localStorage.getItem("board");
}
return "";
return "bla";
};
const initialState = {