diff --git a/src/App.css b/src/App.css index 49ba95a..11adb26 100644 --- a/src/App.css +++ b/src/App.css @@ -41,3 +41,9 @@ blockquote p { display: inline; } + +.overlay { + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/src/components/Blockly/msg/de.js b/src/components/Blockly/msg/de.js index 2f55a0e..11dc028 100644 --- a/src/components/Blockly/msg/de.js +++ b/src/components/Blockly/msg/de.js @@ -1047,4 +1047,39 @@ Blockly.Msg.assessmenttour_assessmentDiv = "Los gehts! Löse die folgende Aufgab Blockly.Msg.assessmenttour_injectionDiv = "Erstelle hier deine Lösung. Du kannst alle Blöcke aus der Toolbox verwenden." +/** + * Overlay + */ + +Blockly.Msg.compile_overlay_head = "Dein Programm wird nun kompiliert und heruntergeladen" +Blockly.Msg.compile_overlay_text = "Kopiere es anschließend auf deine senseBox MCU" +Blockly.Msg.compile_overlay_help = "Benötigst du mehr Hilfe? Dann schaue hier: " + +/** + * FAQ + */ + +Blockly.Msg.faq_q1_question = `Wie kann ich mein Programm auf die senseBox kopieren?` +Blockly.Msg.faq_q1_answer = `Um Programme auf die senseBox zu kopieren wird diese mit dem Micro USB Kabel an den Computer angeschlossen. Mache anschließend auf der senseBox MCU einen Doppelklick auf den roten Reset Button. Die senseBox wird nun als Wechseldatenträger an deinem Computer erkannt und die zuvor erstellen Programm können per Drag & Drop kopiert werden. Nach jeder Änderung des Programmcodes muss das Programm neu kompiliert und übertragen werden +#### Lernmodus der MCU aktivieren + + +#### Kopieren von Programmen unter MacOS +Das Kopieren der Programme unter MacOS funktioniert nicht über den Finder, es gibt es aber dennoch zwei verschiedene Möglichkeiten die Programme zu kopieren: +- [senseBox Kopiertool](https://sensebox.de/docs/senseBox_Sketch_Uploader_DE.zip) +- [muCommander](https://www.mucommander.com/) +` + +Blockly.Msg.faq_q2_question = `Mit welcher senseBox ist die Programmierumgebung kompatibel?` +Blockly.Msg.faq_q2_answer = ` +Grundsätzlich kann die Programmierumgebung mit jeder senseBox mit senseBox MCU verwendet werden. +` + + +Blockly.Msg.faq_q3_question = `Ich habe einen Fehler gefunden oder etwas funktioniert nicht. Wo kann ich diesen melden?` +Blockly.Msg.faq_q3_answer = ` +Am besten legst du dazu ein Issue auf [Github](https://github.com/sensebox/React-Ardublockly/issues) an. Alternativ kannst du uns auch eine Email an info(at)sensebox.de senden +` + + export const De = Blockly.Msg; diff --git a/src/components/Blockly/msg/en.js b/src/components/Blockly/msg/en.js index bc2a01c..3c08232 100644 --- a/src/components/Blockly/msg/en.js +++ b/src/components/Blockly/msg/en.js @@ -1010,4 +1010,40 @@ Blockly.Msg.assessmenttour_solutionCheck = "When your solution is ready click he Blockly.Msg.assessmenttour_assessmentDiv = "Let's go! Solve the following task to complete the tutorial. " Blockly.Msg.assessmenttour_injectionDiv = "Create your solution here. You can use any blocks from the toolbox." +/** + * Overlay + */ + +Blockly.Msg.compile_overlay_head = "Your program is now compiled and downloaded"; +Blockly.Msg.compile_overlay_text = "Then copy it to your senseBox MCU"; +Blockly.Msg.compile_overlay_help = "You need help? Have a look here: " +/** + * FAQ + */ + + +Blockly.Msg.faq_q1_question = `How can I copy my program to the senseBox?` +Blockly.Msg.faq_q1_answer = `To copy programs to the senseBox, connect it to the computer with the Micro USB cable. Then double click on the red reset button on the senseBox MCU. The senseBox will now be recognized as a removable disk on your computer and the previously created programs can be copied via drag & drop. After each change of the program code the program must be recompiled and transferred again. +#### Activate learning mode of the MCU + + +#### Copying programs under macOS +Copying programs under MacOS does not work via the Finder, but there are still two different ways to copy the programs: +- [senseBox Copy Tool](https://sensebox.de/docs/senseBox_Sketch_Uploader_DE.zip) +- [muCommander](https://www.mucommander.com/) +` + +Blockly.Msg.faq_q2_question = `With which senseBox is the programming environment compatible?` +Blockly.Msg.faq_q2_answer = ` +Basically the programming environment can be used with any senseBox with senseBox MCU. +` + + +Blockly.Msg.faq_q3_question = `I found an error or something is not working. Where can I report it?` +Blockly.Msg.faq_q3_answer = ` +The best way to do this is to create an issue on [Github](https://github.com/sensebox/React-Ardublockly/issues). Alternatively you can send us an email to info(at)sensebox.de +` + + + export const En = Blockly.Msg; diff --git a/src/components/Faq.js b/src/components/Faq.js new file mode 100644 index 0000000..4269c1e --- /dev/null +++ b/src/components/Faq.js @@ -0,0 +1,179 @@ +import React, { Component } from 'react'; + +import Breadcrumbs from './Breadcrumbs'; + +import { withRouter } from 'react-router-dom'; + +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; +import * as Blockly from 'blockly' +import ReactMarkdown from 'react-markdown'; +import Container from '@material-ui/core/Container'; +import ExpansionPanel from '@material-ui/core/ExpansionPanel'; +import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; +import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; +import { FaqQuestions } from '../data/faq' + + +class Faq extends Component { + + state = { + panel: '', + expanded: false + } + + + handleChange = (panel) => { + this.setState({ panel: this.state.panel === panel ? '' : panel }); + }; + + componentDidMount() { + // Ensure that Blockly.setLocale is adopted in the component. + // Otherwise, the text will not be displayed until the next update of the component. + + window.scrollTo(0, 0) + this.forceUpdate(); + } + + render() { + const { panel } = this.state; + return ( +
+ + +
+

FAQ

+ {FaqQuestions().map((object, i) => { + return ( + this.handleChange(`panel${i}`)}> + + } + > + {object.question} + + + + + + + + + ) + })} + { + this.props.button ? + + : + + } +
+ +
+ ); + }; +} + +export default withRouter(Faq); + /* + this.handleChange('panel1')}> + +} +> +{Blockly.Msg.faq_q1_question} + + + + + + + + + this.handleChange('panel2')}> + +} +> +Frage 2 + + + +Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar +diam eros in elit. Pellentesque convallis laoreet laoreet. + + + + this.handleChange('panel3')}> + +} +> +Frage 3 + + + +Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, +vitae egestas augue. Duis vel est augue. + + + + this.handleChange('panel4')}> + +} +> +Frage 4 + + + +Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, +vitae egestas augue. Duis vel est augue. + + + +*/ + + // {{ + // this.props.button ? + // + // : + // + // }} + + diff --git a/src/components/Navbar.js b/src/components/Navbar.js index e47e2f6..5676d01 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -71,8 +71,8 @@ class Navbar extends Component { var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname); var isTutorial = /^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname); var isAssessment = /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) && - !this.props.tutorialIsLoading && this.props.tutorial && - this.props.tutorial.steps[this.props.activeStep].type === 'task'; + !this.props.tutorialIsLoading && this.props.tutorial && + this.props.tutorial.steps[this.props.activeStep].type === 'task'; return (
- : null} + : null} {isAssessment ? - : null} + : null} { if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) { return ( diff --git a/src/components/Route/Routes.js b/src/components/Route/Routes.js index b0bec0c..212df95 100644 --- a/src/components/Route/Routes.js +++ b/src/components/Route/Routes.js @@ -24,6 +24,7 @@ import Login from '../User/Login'; import Account from '../User/Account'; import MyBadges from '../User/MyBadges'; import News from '../News' +import Faq from '../Faq' class Routes extends Component { @@ -90,6 +91,9 @@ class Routes extends Component { + + + {/* Not Found */} diff --git a/src/components/Workspace/Compile.js b/src/components/Workspace/Compile.js index da35029..d0a57a6 100644 --- a/src/components/Workspace/Compile.js +++ b/src/components/Workspace/Compile.js @@ -18,6 +18,7 @@ import TextField from '@material-ui/core/TextField'; import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as Blockly from 'blockly/core'; +import Copy from '../copy.svg'; const styles = (theme) => ({ backdrop: { @@ -134,7 +135,13 @@ class Compile extends Component { } - +
+ +

{Blockly.Msg.compile_overlay_head}

+

{Blockly.Msg.compile_overlay_text}

+

{Blockly.Msg.compile_overlay_help}FAQ

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/data/faq.js b/src/data/faq.js new file mode 100644 index 0000000..7427da2 --- /dev/null +++ b/src/data/faq.js @@ -0,0 +1,21 @@ +import * as Blockly from 'blockly/core'; + + +export const FaqQuestions = () => { + return ( + [ + { + question: `${Blockly.Msg.faq_q1_question}`, + answer: `${Blockly.Msg.faq_q1_answer}`, + }, + { + question: `${Blockly.Msg.faq_q2_question}`, + answer: `${Blockly.Msg.faq_q2_answer}`, + }, + { + question: `${Blockly.Msg.faq_q3_question}`, + answer: `${Blockly.Msg.faq_q3_answer}`, + }, + + ]) +} \ No newline at end of file