From f6f6d6f1da2c84b42699e9f37e966398edfe8bc9 Mon Sep 17 00:00:00 2001 From: Mario Date: Tue, 22 Dec 2020 09:36:13 +0100 Subject: [PATCH] add tooltip viewer --- src/actions/workspaceActions.js | 9 ++++ src/components/Blockly/BlocklyWindow.js | 3 +- .../Blockly/blocks/sensebox-display.js | 12 ++--- .../Blockly/blocks/sensebox-lora.js | 3 +- .../Blockly/blocks/sensebox-osem.js | 24 ++++++++++ .../Blockly/blocks/sensebox-sensors.js | 2 +- src/components/Blockly/msg/de.js | 44 ++++++++++++++---- src/components/Blockly/msg/en.js | 2 +- src/components/Blockly/toolbox/Toolbox.js | 6 ++- src/components/CodeViewer.js | 9 ++-- src/components/Home.js | 6 ++- src/components/TooltipViewer.js | 45 +++++++++++++++++++ src/components/Workspace/WorkspaceStats.js | 1 + 13 files changed, 143 insertions(+), 23 deletions(-) create mode 100644 src/components/TooltipViewer.js diff --git a/src/actions/workspaceActions.js b/src/actions/workspaceActions.js index ab2d4e3..61bdcb7 100644 --- a/src/actions/workspaceActions.js +++ b/src/actions/workspaceActions.js @@ -16,6 +16,15 @@ export const onChangeCode = () => (dispatch, getState) => { code.arduino = Blockly.Arduino.workspaceToCode(workspace); var xmlDom = Blockly.Xml.workspaceToDom(workspace); code.xml = Blockly.Xml.domToPrettyText(xmlDom); + var selectedBlock = Blockly.selected + console.log(selectedBlock) + if (selectedBlock !== null) { + code.tooltip = selectedBlock.tooltip + } else if (selectedBlock === null) { + code.tooltip = "Wähle einen Block aus um dir die Hilfe anzeigen zu lassen" + } + + dispatch({ type: NEW_CODE, payload: code diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js index d77d620..0b0cf02 100644 --- a/src/components/Blockly/BlocklyWindow.js +++ b/src/components/Blockly/BlocklyWindow.js @@ -45,7 +45,7 @@ class BlocklyWindow extends Component { if (!xml) xml = initialXml; Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace); } - if(props.language !== this.props.language){ + if (props.language !== this.props.language) { // change language if (!xml) xml = initialXml; var xmlDom = Blockly.Xml.textToDom(xml); @@ -55,6 +55,7 @@ class BlocklyWindow extends Component { // workspace.updateToolbox(toolbox.toolboxDef_); } Blockly.svgResize(workspace); + } render() { diff --git a/src/components/Blockly/blocks/sensebox-display.js b/src/components/Blockly/blocks/sensebox-display.js index 1e687b9..538dfad 100644 --- a/src/components/Blockly/blocks/sensebox-display.js +++ b/src/components/Blockly/blocks/sensebox-display.js @@ -11,7 +11,7 @@ Blockly.Blocks['sensebox_display_beginDisplay'] = { this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(getColour().sensebox); - this.setTooltip(Blockly.Msg.senseBox_display_beginDisplay_tip); + this.setTooltip(Blockly.Msg.senseBox_display_beginDisplay_tooltip); this.setHelpUrl('https://sensebox.de/books'); } }; @@ -23,7 +23,7 @@ Blockly.Blocks['sensebox_display_clearDisplay'] = { this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(getColour().sensebox); - this.setTooltip(Blockly.Msg.senseBox_display_clearDisplay_tip); + this.setTooltip(Blockly.Msg.senseBox_display_clearDisplay_tooltip); this.setHelpUrl('https://sensebox.de/books'); } }; @@ -50,7 +50,7 @@ Blockly.Blocks['sensebox_display_printDisplay'] = { .setCheck(null); this.setPreviousStatement(true, null); this.setNextStatement(true, null); - this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tip); + this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tooltip); this.setHelpUrl('https://sensebox.de/books'); }, /** @@ -98,7 +98,7 @@ Blockly.Blocks['sensebox_display_fastPrint'] = { .appendField(Blockly.Msg.senseBox_display_fastPrint_dimension); this.setPreviousStatement(true, null); this.setNextStatement(true, null); - this.setTooltip(Blockly.Msg.sensebox_display_fastPrint_tip); + this.setTooltip(Blockly.Msg.sensebox_display_fastPrint_tooltip); this.setHelpUrl('https://sensebox.de/books'); }, /** @@ -159,7 +159,7 @@ Blockly.Blocks['sensebox_display_plotDisplay'] = { .setCheck(null); this.setPreviousStatement(true, null); this.setNextStatement(true, null); - this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tip); + this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tooltip); this.setHelpUrl('https://sensebox.de/books'); }, /** @@ -220,6 +220,7 @@ Blockly.Blocks['sensebox_display_fillCircle'] = { .appendField(Blockly.Msg.senseBox_display_filled) .appendField(new Blockly.FieldCheckbox("TRUE"), "FILL"); this.setInputsInline(false); + this.setTooltip(Blockly.Msg.senseBox_display_fillCircle_tooltip) this.setPreviousStatement(true, null); this.setNextStatement(true, null); }, @@ -270,6 +271,7 @@ Blockly.Blocks['sensebox_display_drawRectangle'] = { .appendField(Blockly.Msg.senseBox_display_filled) .appendField(new Blockly.FieldCheckbox("TRUE"), "FILL"); this.setInputsInline(false); + this.setTooltip(Blockly.Msg.senseBox_display_drawRectangle_tooltip) this.setPreviousStatement(true, null); this.setNextStatement(true, null); }, diff --git a/src/components/Blockly/blocks/sensebox-lora.js b/src/components/Blockly/blocks/sensebox-lora.js index f4c59c7..0fcdabe 100644 --- a/src/components/Blockly/blocks/sensebox-lora.js +++ b/src/components/Blockly/blocks/sensebox-lora.js @@ -13,7 +13,6 @@ Blockly.Blocks['sensebox_lora_initialize_otaa'] = { this.setColour(getColour().sensebox); this.appendDummyInput() .appendField("Initialize LoRa (OTAA)"); - this.appendDummyInput() .setAlign(Blockly.ALIGN_LEFT) .appendField(Blockly.Msg.senseBox_LoRa_device_id) @@ -38,7 +37,7 @@ Blockly.Blocks['sensebox_lora_initialize_otaa'] = { Blockly.Blocks['sensebox_lora_initialize_abp'] = { init: function () { this.setTooltip(Blockly.Msg.senseBox_LoRa_init_abp_tip); - this.setHelpUrl(''); + this.setHelpUrl('test'); this.setColour(getColour().sensebox); this.appendDummyInput() .appendField("Initialize LoRa (ABP)"); diff --git a/src/components/Blockly/blocks/sensebox-osem.js b/src/components/Blockly/blocks/sensebox-osem.js index b744835..d3e54a5 100644 --- a/src/components/Blockly/blocks/sensebox-osem.js +++ b/src/components/Blockly/blocks/sensebox-osem.js @@ -50,6 +50,28 @@ Blockly.Blocks['sensebox_osem_connection'] = { this.setNextStatement(true, null); }, onchange: function (e) { + + var legal = false; + // Is the block nested in a loop? + var block = this; + do { + if (this.LOOP_TYPES.indexOf(block.type) !== -1) { + legal = true; + break; + } + block = block.getSurroundParent(); + } while (block); + if (legal) { + this.setWarningText(null); + } else { + this.setWarningText(Blockly.Msg.CONTROLS_FLOW_STATEMENTS_WARNING); + } + + /** + * List of block types that are loops and thus do not need warnings. + * To add a new loop type add this to your code: + * Blockly.Blocks['controls_flow_statements'].LOOP_TYPES.push('custom_loop'); + */ selectedBox = this.getFieldValue('BoxID'); console.log(selectedBox) if (selectedBox !== '' && boxes) { @@ -62,6 +84,7 @@ Blockly.Blocks['sensebox_osem_connection'] = { } }, + mutationToDom: function () { var container = document.createElement('mutation'); var input = this.getFieldValue('type'); @@ -101,6 +124,7 @@ Blockly.Blocks['sensebox_osem_connection'] = { this.removeInput('timeStamp'); } }, + LOOP_TYPES: ['sensebox_interval_timer'] }; Blockly.Blocks['sensebox_send_to_osem'] = { init: function () { diff --git a/src/components/Blockly/blocks/sensebox-sensors.js b/src/components/Blockly/blocks/sensebox-sensors.js index 11a5719..8021f21 100644 --- a/src/components/Blockly/blocks/sensebox-sensors.js +++ b/src/components/Blockly/blocks/sensebox-sensors.js @@ -348,7 +348,7 @@ Blockly.Blocks['sensebox_gps'] = { .appendField(new Blockly.FieldDropdown(dropdownOptions), "dropdown") this.setOutput(true, Types.NUMBER.typeName); this.setColour(getColour().sensebox); - this.setTooltip(Blockly.Msg.senseBox_bme_tip); + this.setTooltip(Blockly.Msg.senseBox_gps_tooltip); } }; diff --git a/src/components/Blockly/msg/de.js b/src/components/Blockly/msg/de.js index ea143ea..1da3c6e 100644 --- a/src/components/Blockly/msg/de.js +++ b/src/components/Blockly/msg/de.js @@ -541,7 +541,7 @@ Blockly.Msg.senseBox_output_serialprint = "Auf Kommandozeile ausgeben"; Blockly.Msg.senseBox_serial_tip = "Gibt Messwerte oder Daten auf dem Seriellen Monitor der Arduino IDE aus. Praktisch um ohne Display zu arbeiten"; Blockly.Msg.senseBox_output_timestamp = "Zeitstempel"; Blockly.Msg.senseBox_button = "Button"; -Blockly.Msg.senseBox_button_tip = "Liest den Zustand des Buttons"; +Blockly.Msg.senseBox_button_tooltip = "Liest den Zustand des Buttons"; Blockly.Msg.senseBox_led = "LED an digitalen"; Blockly.Msg.senseBox_led_tip = "Einfache LED. Beim Anschluss sollte immer ein Vorwiderstand verwendet werden"; Blockly.Msg.senseBox_piezo = "Piezo an digital"; @@ -564,11 +564,19 @@ Blockly.Msg.senseBox_pressure_referencePressure = "Luftdruck auf NN"; Blockly.Msg.senseBox_pressure_referencePressure_dim = "hPa"; Blockly.Msg.senseBox_sound = "Mikrofon"; Blockly.Msg.senseBox_sound_tip = "Gibt den Messwert des Mikrofons in Volt zurück"; + +/** + * RGB-LED + */ Blockly.Msg.senseBox_rgb_led = "RGB-LED" Blockly.Msg.senseBox_rgb_led_tip = "RGB-LED benötigt einen digitalen Pin und eine Stromkreis "; + + Blockly.Msg.senseBox_temp = "Temperatur in °C"; Blockly.Msg.senseBox_temp_hum = "Temperatur-/Luftfeuchtigkeitssensor (HDC1080)"; -Blockly.Msg.senseBox_temp_hum_tip = "Sensor misst Temperatur und Luftfeuchtigkeit"; +Blockly.Msg.senseBox_temp_hum_tip = "Dieser Block gibt dir die Messwerte des Temperatur- und Luftfeuchtigkeitssensor zurück. Schließe den Sensor an einen der 5 I2C Anschlüsse an. Messwert wird mit 2 Nachkommastellen ausgegeben."; + + Blockly.Msg.senseBox_ultrasonic = "Ultraschall-Abstandssensor an Port"; Blockly.Msg.senseBox_ultrasonic_port_A = "A"; Blockly.Msg.senseBox_ultrasonic_port_B = "B"; @@ -619,13 +627,22 @@ Blockly.Msg.senseBox_sds011_pm10 = "PM10"; Blockly.Msg.senseBox_sds011_tip = "Misst die Feinstaubbelastung"; Blockly.Msg.senseBox_sds011_serial1 = "Serial1"; Blockly.Msg.senseBox_sds011_serial2 = "Serial2"; -/*Display*/ + + + +/** + * Display + */ + Blockly.Msg.senseBox_display_beginDisplay = "Display initialisieren"; -Blockly.Msg.senseBox_display_clearDisplay_tip = "Starten die Ausgabe auf dem Display"; +Blockly.Msg.senseBox_display_beginDisplay_tooltip = `Initialisiert das Display. Dieser Block muss im Setup() verwendet werden. + +**Anschluss:** I2C +` +Blockly.Msg.senseBox_display_clearDisplay_tooltip = "Löscht die Anzeige auf dem Display. Sollte immer zu Begin oder am Ende der Endlosschleife aufgerufen werden."; Blockly.Msg.senseBox_display_clearDisplay = "Display löschen"; -Blockly.Msg.senseBox_display_clearDisplay_tip = "Löscht den Inhalt des Displays"; Blockly.Msg.senseBox_display_printDisplay = "Schreibe Text/Zahl"; -Blockly.Msg.senseBox_display_printDisplay_tip = "zeigt Wert auf dem Display an."; +Blockly.Msg.senseBox_display_printDisplay_tooltip = "Zeigt eine Zahl/Text auf dem Display an. Über die X- und Y-Koordinaten kann die Position auf dem Display bestimmt werden. Die Schriftgröße lässt sich in ganzzahligen Werten zwischen 1 und 4 einstellen. Das Display hat eine Auflösung von 128x64 Pixeln (X- und Y-Achse)"; Blockly.Msg.senseBox_display_printDisplay_x = "x-Koordinate"; Blockly.Msg.senseBox_display_printDisplay_y = "y-Koordinate"; Blockly.Msg.senseBox_display_printDisplay_value = "Wert"; @@ -646,20 +663,26 @@ Blockly.Msg.senseBox_display_plotYRange1 = "Y-Wertebereich Anfang"; Blockly.Msg.senseBox_display_plotYRange2 = "Y-Wertebereich Ende"; Blockly.Msg.senseBox_display_plotXTick = "X-Linienabstand"; Blockly.Msg.senseBox_display_plotYTick = "Y-Linienabstand"; +Blockly.Msg.senseBox_display_printDisplay_tooltip = "Mit diesem Block können automatisch Diagramme auf dem Display erstellt werden." Blockly.Msg.senseBox_display_plotTimeFrame = "Zeitabschnitt"; Blockly.Msg.sensebox_display_fillCircle = "Zeichne Punkt"; Blockly.Msg.sensebox_display_fillCircle_radius = "Radius"; +Blockly.Msg.senseBox_display_fillCircle_tooltip = "Mit diesem Block kann ein Punkt auf dem Display angezeigt werden. Über die Koordinaten kannst du den Punkt auf dem Display platzieren und mithilfe des Radius die Größe bestimmen." Blockly.Msg.sensebox_display_drawRectangle = "Zeichne Rechteck"; Blockly.Msg.sensebox_display_drawRectangle_width = "Breite"; Blockly.Msg.sensebox_display_drawRectangle_height = "Höhe"; +Blockly.Msg.senseBox_display_drawRectangle_tooltip = "Dieser Block zeichnet ein Rechteck auf das Display. Mit den X- und Y-Koordinaten wird die Position der oberen linken Ecke des Rechtecks auf dem Display bestimmt. Die Höhe und Breite wird in Pixeln angegeben und mit der Checkbox 'Ausgefüllt' kann ausgewählt werden ob das Rechteck ausgefüllt oder nur als Rahmen angezeigt wird." Blockly.Msg.senseBox_display_filled = "Ausgefüllt"; Blockly.Msg.senseBox_display_fastPrint_show = "Zeige Messwerte"; Blockly.Msg.senseBox_display_fastPrint_title = "Titel"; Blockly.Msg.senseBox_display_fastPrint_value = "Messwert"; Blockly.Msg.senseBox_display_fastPrint_dimension = "Einheit"; +Blockly.Msg.sensebox_display_fastPrint_tooltip = "Zeigt zwei Messwerte auf dem Display an. Wähle eine Überschrift für jeden Messwert und gib die Einheit an." +//Tooltips + + // GPS Blockly.Msg.senseBox_gps_getValues = "GPS Modul"; -Blockly.Msg.senseBox_gps_getValues_tip = "ruft das GPS Signal ab"; Blockly.Msg.senseBox_gps_lat = "Breitengrad"; Blockly.Msg.senseBox_gps_lng = "Längengrad"; Blockly.Msg.senseBox_gps_alt = "Höhe über NN in m"; @@ -667,6 +690,10 @@ Blockly.Msg.senseBox_gps_speed = "Geschwindigkeit in km/h"; Blockly.Msg.senseBox_gps_date = "Datum"; Blockly.Msg.senseBox_gps_time = "Uhrzeit"; Blockly.Msg.senseBox_gps_timeStamp = "Zeitstempel (RFC 3339)"; +Blockly.Msg.senseBox_gps_tooltip = `Liest das GPS Modul aus und gibt dir die Standortinformationen. Längen- und Breitengrad werden als Kommazahl mit 6 Nachkommastellen ausgegeben. +**Anschluss: I2C** +` + // openSenseMap Blockly.Msg.senseBox_send_mobile_to_osem = "Sende Messwert und Standort an die openSenseMap"; Blockly.Msg.senseBox_send_mobile_to_osem_tip = "Sende Messwert und Standort an die openSenseMap"; @@ -757,7 +784,8 @@ Blockly.Msg.senseBox_LoRa_cayenne_analog_tip = "Sendet einen Dezimalwert mit ein Blockly.Msg.senseBox_LoRa_message_tip = "Sende eine Nachricht über LoRa"; Blockly.Msg.senseBox_LoRa_sensor_tip = "Sende eine Sensorwert mit einer bestimmten Anzahl an Bytes"; -Blockly.Msg.senseBox_LoRa_init_abp_tip = "Initialisiere die LoRa übertragung. Kopiere die ID's im lsb Format"; +Blockly.Msg.senseBox_LoRa_init_abp_tip = 'Initialisiere die LoRa übertragung. Kopiere die IDs im lsb Format [test](https://test.html)'; + Blockly.Msg.senseBox_LoRa_init_otaa_tip = "Initialisiere die LoRa übertragung. Kopiere die ID's im lsb Format"; //Windspeed diff --git a/src/components/Blockly/msg/en.js b/src/components/Blockly/msg/en.js index 0073ac5..b5d2f59 100644 --- a/src/components/Blockly/msg/en.js +++ b/src/components/Blockly/msg/en.js @@ -585,7 +585,7 @@ Blockly.Msg.senseBox_bmx055_y = "Y-Direction"; Blockly.Msg.senseBox_button = "Button"; Blockly.Msg.senseBox_button_isPressed = "is Pressed"; Blockly.Msg.senseBox_button_switch = "as Switch"; -Blockly.Msg.senseBox_button_tip = "Button"; +Blockly.Msg.senseBox_button_tooltip = "Button"; Blockly.Msg.senseBox_button_wasPressed = "was Pressed"; Blockly.Msg.senseBox_display_beginDisplay = "Initialize Display"; Blockly.Msg.senseBox_display_beginDisplay_tip = "Starts the display"; diff --git a/src/components/Blockly/toolbox/Toolbox.js b/src/components/Blockly/toolbox/Toolbox.js index 9f95a85..c178826 100644 --- a/src/components/Blockly/toolbox/Toolbox.js +++ b/src/components/Blockly/toolbox/Toolbox.js @@ -250,7 +250,11 @@ class Toolbox extends React.Component { - + + + + + diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js index dd41fc4..856272c 100644 --- a/src/components/CodeViewer.js +++ b/src/components/CodeViewer.js @@ -80,13 +80,14 @@ class CodeViewer extends Component { onChange = () => { this.setState({ expanded: !this.state.expanded }); + } render() { var curlyBrackets = '{ }'; var unequal = '<>'; return ( - + ({ arduino: state.workspace.code.arduino, - xml: state.workspace.code.xml + xml: state.workspace.code.xml, + tooltip: state.workspace.code.tooltip }); export default connect(mapStateToProps, null)(withWidth()(CodeViewer)); diff --git a/src/components/Home.js b/src/components/Home.js index 0bdb611..889d019 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -21,6 +21,8 @@ import { withStyles } from '@material-ui/core/styles'; import { faCode } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import TooltipViewer from './TooltipViewer'; + const styles = (theme) => ({ codeOn: { @@ -47,7 +49,7 @@ const styles = (theme) => ({ class Home extends Component { state = { - codeOn: false, + codeOn: true, snackbar: false, type: '', key: '', @@ -119,9 +121,11 @@ class Home extends Component { {this.state.codeOn ? + : null} + + + + Hilfe + + + {this.props.tooltip} + + + + ); + }; +} + +TooltipViewer.propTypes = { + tooltip: PropTypes.string.isRequired +}; + +const mapStateToProps = state => ({ + tooltip: state.workspace.code.tooltip +}); + +export default connect(mapStateToProps, null)(withWidth()(TooltipViewer)); diff --git a/src/components/Workspace/WorkspaceStats.js b/src/components/Workspace/WorkspaceStats.js index f2f592f..7442ddc 100644 --- a/src/components/Workspace/WorkspaceStats.js +++ b/src/components/Workspace/WorkspaceStats.js @@ -50,6 +50,7 @@ class WorkspaceStats extends Component { }; render() { + const bigDisplay = !isWidthDown('sm', this.props.width); const workspace = Blockly.getMainWorkspace(); const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;