add tooltip viewer

2020-12-22 09:36:13 +01:00 · 2020-12-22 09:36:13 +01:00 · f6f6d6f1da
commit f6f6d6f1da
parent 5eb6a94a0b
13 changed files with 143 additions and 23 deletions
--- 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
--- 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() {
--- 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);
    },
--- 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)");
--- 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 () {
--- 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);
  }
 };

--- 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
--- 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";
--- a/src/components/Blockly/toolbox/Toolbox.js
+++ b/src/components/Blockly/toolbox/Toolbox.js
@ -250,7 +250,11 @@ class Toolbox extends React.Component {
                    <Block type="sensebox_telegram_send" />
                </Category>
                <Category name="openSenseMap" colour={getColour().sensebox}>
-                    <Block type="sensebox_osem_connection" />
+                    <Block type="sensebox_interval_timer">
+                        <Value name="DO">
+                            <Block type="sensebox_osem_connection" />
+                        </Value>
+                    </Block>
                    <Block type="sensebox_send_to_osem" />
                </Category>
                <Category id="catSenseBoxOutput_LoRa" name="  LoRa" colour={getColour().sensebox}>
--- 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 (
-      <Card style={{ height: '100%', maxHeight: '80vH' }} ref={this.myDiv}>
+      <Card style={{ height: '100%', maxHeight: '60vH' }} ref={this.myDiv}>
        <Accordion
          square={true}
          style={{ margin: 0 }}
@ -130,12 +131,14 @@ class CodeViewer extends Component {

 CodeViewer.propTypes = {
  arduino: PropTypes.string.isRequired,
-  xml: PropTypes.string.isRequired
+  xml: PropTypes.string.isRequired,
+  tooltip: PropTypes.string.isRequired
 };

 const mapStateToProps = state => ({
  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));
--- 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 ?
            <Grid item xs={12} md={4}>
              <CodeViewer />
+              <TooltipViewer />
            </Grid>
            : null}
        </Grid>
+
        <HintTutorialExists />
        <Snackbar
          open={this.state.snackbar}
--- a/src/components/TooltipViewer.js
+++ b/src/components/TooltipViewer.js
@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import withWidth from '@material-ui/core/withWidth';
+
+import { Card } from '@material-ui/core';
+import * as Blockly from 'blockly'
+import CardContent from '@material-ui/core/CardContent';
+
+import Typography from '@material-ui/core/Typography';
+import ReactMarkdown from 'react-markdown';
+import Link from '@material-ui/core/Link'
+import CardActions from '@material-ui/core/CardActions';
+import Button from '@material-ui/core/Button';
+
+class TooltipViewer extends Component {
+
+
+  render() {
+
+    return (
+      <Card style={{ height: '100%', margin: '1vH 0 0 0', maxHeight: '19vH' }} ref={this.myDiv}>
+        <CardContent>
+          <Typography variant="h5" component="h2">
+            Hilfe
+        </Typography>
+          <Typography variant="body1" component="p">
+            <ReactMarkdown>{this.props.tooltip}</ReactMarkdown>
+          </Typography>
+        </CardContent>
+      </Card>
+    );
+  };
+}
+
+TooltipViewer.propTypes = {
+  tooltip: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  tooltip: state.workspace.code.tooltip
+});
+
+export default connect(mapStateToProps, null)(withWidth()(TooltipViewer));
--- 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;