diff --git a/src/main/java/com/ardublock/ui/listener/HelpButtonListener.java b/src/main/java/com/ardublock/ui/listener/HelpButtonListener.java
index 8ceecd09110c0a7307d6e7dd3f3a0217218c5ce8..71843acb52b4d042cc98158aca803b35a2721d4b 100644
--- a/src/main/java/com/ardublock/ui/listener/HelpButtonListener.java
+++ b/src/main/java/com/ardublock/ui/listener/HelpButtonListener.java
@@ -42,7 +42,7 @@ public class HelpButtonListener implements ActionListener
String cssResource ="/com/ardublock/reference/_seitenformatierung.css";
String helpResource ="/com/ardublock/reference/help.html";
String logoResource ="/com/ardublock/reference/_Logo_LGI_page.png";
- String imageResource ="/com/ardublock/reference/arduBlockHelp2.png";
+ String imageResource ="/com/ardublock/reference/arduBlockHelp.png";
String tempPath = "";
//get current .jar path for temp files
diff --git a/src/main/webapp/com/ardublock/reference/_seitenformatierung.css b/src/main/webapp/com/ardublock/reference/_seitenformatierung.css
index 0872d0f2d102ea8d885146aa6b209c74630831ff..30c2c687b13d22128684790e9a16f304fa4a8aed 100644
--- a/src/main/webapp/com/ardublock/reference/_seitenformatierung.css
+++ b/src/main/webapp/com/ardublock/reference/_seitenformatierung.css
@@ -110,3 +110,8 @@
display: block;
}
+ .helpImage {
+ max-width: 100%;
+ height: auto;
+ }
+
diff --git a/src/main/webapp/com/ardublock/reference/addition.html b/src/main/webapp/com/ardublock/reference/addition.html
index 61c17cf499389068b1305a6ceeb9c9966646f477..ca1e11f343cb8fa544ae584e756db342d3f2fc30 100644
--- a/src/main/webapp/com/ardublock/reference/addition.html
+++ b/src/main/webapp/com/ardublock/reference/addition.html
@@ -36,7 +36,7 @@
Der <code>+</code> Block ist ein mathematischer Operator, der zwei analoge Größen miteinander addiert und selbst einen analogen Wert annimmt.
Es können fest programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden.
Jedoch können pro <code>+</code> Block immer nur zwei Größen auf einmal addiert werden.
- Der <code>+</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden.
+ Der <code>+</code> Block selbst kann dann als analoger Wert in anderen Blöcken verwendet werden.
<br><br>
Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten.
Klickt man diesen mit der linken Maustaste, dann öffnet sich ein dropdown Menü und der <code>+</code> Block kann folgende Blöcke umgewandelt werden:
@@ -80,4 +80,4 @@
</article>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/webapp/com/ardublock/reference/arduBlockHelp.png b/src/main/webapp/com/ardublock/reference/arduBlockHelp.png
index 9fbb37ea6b746601ed2ce9954744bdfbe64865f7..3bd1fb491de929ee03f304d5b8f037c95482f262 100644
Binary files a/src/main/webapp/com/ardublock/reference/arduBlockHelp.png and b/src/main/webapp/com/ardublock/reference/arduBlockHelp.png differ
diff --git a/src/main/webapp/com/ardublock/reference/division.html b/src/main/webapp/com/ardublock/reference/division.html
index 2ed4ab6b30ed863a95f4cd7585f271f91516d1f9..a7dc06a70235a6f603ff7a5d885fecb6aa3eff37 100644
--- a/src/main/webapp/com/ardublock/reference/division.html
+++ b/src/main/webapp/com/ardublock/reference/division.html
@@ -35,9 +35,9 @@
<h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
<p>
Der <code>/</code> Block ist ein mathematischer Operator, der eine analoge Größe durch die andere dividiert und selbst einen analogen Wert annimmt.
- Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden.
+ Es können fest programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden.
Jedoch können pro <code>/</code> Block immer nur eine Größe durch eine andere geteilt werden.
- Der <code>/</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden.
+ Der <code>/</code> Block selbst kann dann als analoger Wert in anderen Blöcken verwendet werden.
<br><br>
Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten.
Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>/</code> Block kann folgende Blöcke umgewandelt werden:
@@ -81,4 +81,4 @@
</article>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/webapp/com/ardublock/reference/help.html b/src/main/webapp/com/ardublock/reference/help.html
new file mode 100644
index 0000000000000000000000000000000000000000..e0f1f629f333bde6ebe9a17b961a040bbfbf105a
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/help.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+ <nav>
+ <li id="beschreibung">Hilfe</li>
+ <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+ </nav>
+</div>
+
+<div>
+ <section>
+ <div id="ueberschrift">
+ <p>Hilfe zu ArduBlock</p>
+ <h1 style="font-size: 220%;">ArduBlock</h1>
+ </div>
+ <div>
+ </div>
+ </section>
+</div>
+
+<article>
+ <div>
+ <h2 class="unterueberschrift" id="Allgemeines">Allgemeines</h2>
+ <p>
+ ArduBlock ist ein PlugIn welches in die Arduino IDE integriert ist.
+ Aus ArduBlock wird textbasierter Code in die IDE übertragen und von dort aus auf das angeschlossene Arduino-Board hochgeladen.
+ Alle Einstellungen zur Hardware müssen daher in der Arduino IDE vorgenommen werden.
+ Auch Fehlermeldungen und Informationen zum Hochladen können dort überptüft werden.
+ ArdBlock wird über das Menü "Werkzeuge" ("oder Tools") gestartet.</br>
+ ArduBlock hat drei verschiedene Blocksätze:
+ <ul>
+ <li class="list">Basic - Die wichtigsten Blöcke für den Einstieg</li>
+ <li class="list">Pro - Alle Blöcke für fortgeschrittene und umfangreichere Projekte </li>
+ <li class="list">Sim - Alle Blöcke für den Simulator (Fast gleicher Umfang wie Basic) </li>
+ </ul>
+ Wird ArduBlock mit dem Simulator ("Sim-Blockset") benutzt, fällt der Schitt des hochladens weg und man benötigt kein Arduino-Board.
+ </p>
+
+ <h2 class="unterueberschrift" id="Übersicht">Oberfläche</h2>
+ <p>
+ <img src="arduBlockHelp.png" alt="hilfe" class="helpImage">
+ </p>
+
+ <h2 class="unterueberschrift" id="Funktionen">Tastenkombinationen</h2>
+ <p>
+ <table cellspacing="20">
+ <tr>
+ <th>Tastenkombination</td>
+ <th>Funktion</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>O</b></td>
+ <td>Programm öffnen</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>N</b></td>
+ <td>Neues Programm</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>S</b></td>
+ <td>Programm Speichern</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>SHIFT</b> + <b>S</b></td>
+ <td>Programm Speichern unter</td>
+ </tr>
+ <tr></tr>
+ <tr>
+ <td><b>STRG</b> + <b>+</b></td>
+ <td>Blöcke vergrößern</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>−</b></td>
+ <td>Blöcke verkleinern</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>Mausrad</b></td>
+ <td>Blöcke vergrößern/verkleinern</td>
+ </tr>
+ <tr></tr>
+ <tr>
+ <td><b>STRG</b> + <b>Rechtsklick</b></td>
+ <td>Ausgewählten Block klonen</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>SHIFT</b> + <b>Rechtsklick</b></td>
+ <td>Alle folgenden Blöcke klonen</td>
+ </tr>
+ <tr></tr>
+ <tr>
+ <td><b>STRG</b> + <b>U</b></td>
+ <td>Programm hochladen</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>SHIFT</b> + <b>M</b></td>
+ <td>Öffnet Serial Monitor</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>SHIFT</b> + <b>L</b></td>
+ <td>Öffnet Serial Plotter</td>
+ </tr>
+ <tr></tr>
+ <tr>
+ <td><b>STRG</b> + <b>SHIFT</b> + <b>C</b></td>
+ <td>Gesamtes Programm in Zwischenspeicher kopieren</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>SHIFT</b> + <b>V</b></td>
+ <td>Gesamtes Programm aus Zwischenspeicher einfügen</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>P</b></td>
+ <td>Programm als Bild speichern</td>
+ </tr>
+ <tr>
+ <td><b>STRG</b> + <b>ALT</b> + <b>S</b></td>
+ <td>Programm als Vorlage für neues Programm speichern</td>
+ </tr>
+ </table>
+ </p>
+
+ </div>
+
+</article>
+
+</body>
+</html>
diff --git a/src/main/webapp/com/ardublock/reference/modulo.html b/src/main/webapp/com/ardublock/reference/modulo.html
index 369b0e565e6e16c8a8b711d02a9d45bb9f9c73e3..90ba7864e988daf65ef9d38b45050980f4908261 100644
--- a/src/main/webapp/com/ardublock/reference/modulo.html
+++ b/src/main/webapp/com/ardublock/reference/modulo.html
@@ -34,7 +34,7 @@
<p>
Der <code>%</code> Block ist ein mathematischer Operator, der den Rest der Division von zwei Zahlen ausgibt.
Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden.
- Der <code>%</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden.
+ Der <code>%</code> Block selbst kann dann als analoger Wert in anderen Blöcken verwendet werden.
<br><br>
Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten.
Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>%</code> Block kann folgende Blöcke umgewandelt werden:
@@ -110,4 +110,4 @@
</article>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/webapp/com/ardublock/reference/multiplication.html b/src/main/webapp/com/ardublock/reference/multiplication.html
index d544c4bf6886fc2e432e1d95ff692b3d647bb6b4..a482372947c8862b35951019e4db01237e330960 100644
--- a/src/main/webapp/com/ardublock/reference/multiplication.html
+++ b/src/main/webapp/com/ardublock/reference/multiplication.html
@@ -35,7 +35,7 @@
Der <code>x</code> Block ist ein mathematischer Operator, der zwei analoge Größen miteinander mulipliziert und selbst einen analogen Wert annehmen kann.
Es können fest programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden.
Jedoch können pro <code>x</code> Block immer nur zwei Größen auf einmal mulipliziert werden.
- Der <code>x</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden.
+ Der <code>x</code> Block selbst kann dann als analoger Wert in anderen Blöcken verwendet werden.
<br><br>
Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten.
Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>x</code> Block kann folgende Blöcke umgewandelt werden:
@@ -80,4 +80,4 @@
</article>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/webapp/com/ardublock/reference/simHelp.html b/src/main/webapp/com/ardublock/reference/simHelp.html
index 1829c867536aa979429ec36abcf3525be976e7a9..6ce1e934478cee171a165f9a13a3086f9f374936 100644
--- a/src/main/webapp/com/ardublock/reference/simHelp.html
+++ b/src/main/webapp/com/ardublock/reference/simHelp.html
@@ -42,7 +42,7 @@
<h2 class="unterueberschrift" id="Ãœbersicht">Ãœbersicht</h2>
<p>
- <img src="simHelp.png" alt="hilfe">
+ <img src="simHelp.png" alt="hilfe" class="helpImage">
</p>
<h2 class="unterueberschrift" id="Funktionen">Funktionen</h2>
diff --git a/src/main/webapp/com/ardublock/reference/subtraction.html b/src/main/webapp/com/ardublock/reference/subtraction.html
index c7e53b68a4a33675b69c41384caa6ee5d3b857e4..9ab1ce78ffec623f95dd930484f14ee73a1eea49 100644
--- a/src/main/webapp/com/ardublock/reference/subtraction.html
+++ b/src/main/webapp/com/ardublock/reference/subtraction.html
@@ -34,7 +34,7 @@
<p>
Der <code>-</code> Block ist ein mathematischer Operator, der eine analoge Größe von einer anderen subtrahiert und selbst einen analogen Wert annimmt.
Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden.
- Der <code>-</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden.
+ Der <code>-</code> Block selbst kann dann als analoger Wert in anderen Blöcken verwendet werden.
Der rechte Wert wird von dem linken Wert abgezogen.
<br><br>
Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten.
@@ -80,4 +80,4 @@
</article>
</body>
-</html>
\ No newline at end of file
+</html>