diff --git a/src/main/java/com/ardublock/ui/listener/HelpButtonListener.java b/src/main/java/com/ardublock/ui/listener/HelpButtonListener.java
new file mode 100644
index 0000000000000000000000000000000000000000..0ffdbc05b1fe61a23e363aa6f0a261551e6a6394
--- /dev/null
+++ b/src/main/java/com/ardublock/ui/listener/HelpButtonListener.java
@@ -0,0 +1,162 @@
+package com.ardublock.ui.listener;
+
+import java.awt.Desktop;
+import java.awt.event.ActionEvent;
+import java.awt.event.ActionListener;
+import java.io.File;
+import java.io.FileOutputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.OutputStream;
+import java.io.UnsupportedEncodingException;
+import java.net.URLDecoder;
+import java.util.ResourceBundle;
+
+import javax.swing.ImageIcon;
+import javax.swing.JOptionPane;
+
+import com.ardublock.ui.OpenblocksFrame;
+
+import tec.letsgoing.ardublock.simulator.view.GUI;
+
+public class HelpButtonListener implements ActionListener
+{
+ private OpenblocksFrame openBlocksFrame;
+ private ResourceBundle uiMessageBundle;
+
+ public HelpButtonListener(OpenblocksFrame obFrame)
+ {
+ this.openBlocksFrame=obFrame;
+ uiMessageBundle = ResourceBundle.getBundle("com/ardublock/block/ardublock");
+
+ }
+
+ @SuppressWarnings("unused")
+ public void actionPerformed(ActionEvent e) {
+ File cssFile = null;
+ File helpFile = null;
+ File imageFile = null;
+ File logoFile = null;
+
+ //TODO: add css
+ 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/abs.png";
+ String tempPath = "";
+
+ //get current .jar path for temp files
+ try {
+ tempPath = new File(URLDecoder.decode(getClass().getProtectionDomain().getCodeSource().getLocation().getFile(), "UTF-8")).getParentFile().getPath();
+ } catch (UnsupportedEncodingException e1) {
+ // TODO Auto-generated catch block
+ e1.printStackTrace();
+ }
+ //copy css File to tmp files
+ try {
+ InputStream input = getClass().getResourceAsStream(cssResource);
+ if(input != null) {
+ cssFile = new File(tempPath +"/"+ "_seitenformatierung.css");
+ OutputStream out = new FileOutputStream(cssFile);
+ int read;
+ byte[] bytes = new byte[1024];
+ while ((read = input.read(bytes)) != -1) {
+ out.write(bytes, 0, read);
+ }
+ out.close();
+ cssFile.deleteOnExit();
+ } else {
+ //TODO: use resources
+ System.out.println("Sorry, css stylesheet was not found in reference.");
+ //TODO: open 404-page
+ //!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ }
+ } catch (IOException ex) {
+ ex.printStackTrace();
+ }
+
+ //copy help File to tmp files
+ try {
+ InputStream input = getClass().getResourceAsStream(helpResource);
+ if(input != null) {
+ helpFile = new File(tempPath +"/"+ "help.html");
+ OutputStream out = new FileOutputStream(helpFile);
+ int read;
+ byte[] bytes = new byte[1024];
+ while ((read = input.read(bytes)) != -1) {
+ out.write(bytes, 0, read);
+ }
+ out.close();
+ helpFile.deleteOnExit();
+ } else {
+ //TODO: use resources
+ System.out.println("Sorry, help file was not found in reference.");
+ //TODO: open 404-page
+ //!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ }
+ } catch (IOException ex) {
+ ex.printStackTrace();
+ }
+
+ //copy logo to tmp files
+ try {
+ InputStream input = getClass().getResourceAsStream(logoResource);
+ if(input != null) {
+ logoFile = new File(tempPath +"/_Logo_LGI_page.png");
+ OutputStream out = new FileOutputStream(logoFile);
+ int read;
+ byte[] bytes = new byte[10000];
+ while ((read = input.read(bytes)) != -1) {
+ out.write(bytes, 0, read);
+ }
+ out.close();
+ logoFile.deleteOnExit();
+ } else {
+ //TODO: use resources
+ System.out.println("Sorry, logo image was not found.");
+ }
+ } catch (IOException ex) {
+ ex.printStackTrace();
+ }
+
+ //copy block-image to tmp files
+ try {
+ InputStream input = getClass().getResourceAsStream(imageResource);
+ if(input != null) {
+ imageFile = new File(tempPath +"/help.png");
+ OutputStream out = new FileOutputStream(imageFile);
+ int read;
+ byte[] bytes = new byte[10000];
+ while ((read = input.read(bytes)) != -1) {
+ out.write(bytes, 0, read);
+ }
+ out.close();
+ imageFile.deleteOnExit();
+ } else {
+ //TODO: use resources
+ System.out.println("Sorry, image for help was not found in reference.");
+ }
+ } catch (IOException ex) {
+ ex.printStackTrace();
+ }
+
+ //open file in standard browser
+ if (helpFile != null && !helpFile.exists() && cssFile != null && !cssFile.exists() && imageFile != null && !imageFile.exists() && !logoFile.exists() ) {
+ throw new RuntimeException("Error: Resource not found!");
+ }else {
+ try {
+ Desktop.getDesktop().browse(helpFile.toURI());
+ } catch (IOException e1) {
+ // TODO Auto-generated catch block
+ //e.printStackTrace();
+ } catch (NullPointerException e2) {
+ // TODO Auto-generated catch block
+ //e.printStackTrace();
+ }
+ }
+
+ }
+
+
+
+}
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..a0ab07b6e40ecd68ed64a89fbce9712ff03910f3
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/help.html
@@ -0,0 +1,66 @@
+<!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</p>
+ <h1 style="font-size: 220%;">abs</h1>
+ </div>
+ <div>
+ <div>
+ <figure>
+ <img id="block_bild" src = "help.png" alt="help"></img>
+ <figcaption id="caption"></figcaption>
+ </figure>
+ </div>
+ </div>
+ </section>
+</div>
+
+<article>
+ <div>
+ <h2 class="unterueberschrift" id="Allgemeines">Allgemeines</h2>
+ <p>
+ ArduBlock BlaBla
+ </p>
+ <h2 class="unterueberschrift" id="Funktionen">Funktionen</h2>
+ <p>
+ Der Betrag einer Zahl ist der "Wert" der Zahl ohne die Berücksichtigung des Vorzeichens.
+ </p>
+ <h2 class="unterueberschrift" id="Block-Arten">Block-Arten</h2>
+ <p>
+ Im Code kann der <code>abs</code> Block mit dem Befehl (<code>abs()</code>) realisiert werden.
+ Wobei zwischen die Klammern hier die entsprechende Größe eingefügt wird, auf die der Befehl angewendet werden soll.
+ <br>
+ <b>Beispiel:</b> Es soll der Betrag der Variable <code>var</code> im seriellen Monitor ausgegeben werden.
+ <br><br>
+ In ArduBlock:
+ <br><br>
+ <img src="help.png" alt="hilfe">
+ <br><br>
+ Im Code:
+ <br><br>
+ <code>
+ var_betrag = abs( var ); <br>
+ Serial.print("Der Betrag der Variable var ist: "); <br>
+ Serial.print(var_betrag ); <br>
+ </code>
+ <p>
+ </div>
+
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/simHelp.html b/src/main/webapp/com/ardublock/reference/simHelp.html
new file mode 100644
index 0000000000000000000000000000000000000000..66e6f11fa246452f83ddaa19f5106fd2df8326d8
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/simHelp.html
@@ -0,0 +1,98 @@
+<!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 zum Simulator</p>
+ <h1 style="font-size: 220%;">Simulator</h1>
+ </div>
+ <div>
+ </div>
+ </section>
+</div>
+
+<article>
+ <div>
+ <h2 class="unterueberschrift" id="Allgemeines">Allgemeines</h2>
+ <p>
+ Der Simulator wird über die <b>Blockset "Sim" aktiviert</b>.
+ Wird jetzt ein Programm hochgeladen, startet der Simulator in einem neuen Fenster.
+ Gleichzeitig wird der Text-basierte Code erzeugt und in der Arduino IDE angezeigt (nicht hochgeladen).</br></br>
+ Der Simulator bietet folgende Komponenten:
+ <ul>
+ <li class="list">Arduino Uno</li>
+ <li class="list">RGB-LED </li>
+ <li class="list">3 Taster </li>
+ <li class="list">Potentiometer </li>
+ </ul>
+ Die Module sind derzeit noch fest mit dem Arduino Uno "verdrahtet".
+ </p>
+
+ <h2 class="unterueberschrift" id="Ãœbersicht">Ãœbersicht</h2>
+ <p>
+ <img src="simHelp.png" alt="hilfe">
+ </p>
+
+ <h2 class="unterueberschrift" id="Funktionen">Funktionen</h2>
+ <p>
+ <h3>Arduino Uno</h3>
+ Die Simulation des Arduino-Boards bietet folgende Interaktionen:
+ <ul>
+ <li>Onboard-LED - ansteuerbar über Pin 13</li>
+ <li>Reset-Taster - drücken startet das zuletzt hochgeladene Programm neu</li>
+ </ul>
+
+ <h3>RGB-LED</h3>
+ Die Simulation letsgoING-Moduls mit der RGB-LED kann über folgende Pins angesteuert werden:
+ <ul>
+ <li>Rot - Pin11</li>
+ <li>Grün - Pin9</li>
+ <li>Blau - Pin10</li>
+ </ul>
+
+ <h3>Taster</h3>
+ Die Simulation letsgoING-Moduls mit drei Tastern kann über folgende Pins eingelesen werden:
+ <ul>
+ <li>Taster S1 - Pin4</li>
+ <li>Taster S2 - Pin3</li>
+ <li>Taster S3 - Pin2</li>
+ </ul>
+ Mit der <b>linken Maustaste</b> wird der Taster <b>normal</b> betätigt.</br>
+ Mit der <b>rechten Maustaste</b> (oder "Zwei-Finger-Klick bei Mac) werden die Taster <b>eingerastet</b>.
+ So kann man auch mehrere Taster gleichzeitig bedienen.
+
+ <h3>Potentiometer</h3>
+ Die Simulation letsgoING-Moduls mit dem Potentiometer kann über folgenden Pin eingelesen werden:
+ <ul>
+ <li>Potentiometer - Pin A0</li>
+ </ul>
+ Der Wert des Potentiometers kann über den Schieberegler oder mit dem Mausrad (Zeiger über dem Schieberegler) verstellt werden.
+
+ <h3>SerialMonitor</h3>
+ Die Simulation des SerialMonitor bietet folgende Funktionen:
+ <ul>
+ <li>Serial Output Fenster - Ausgabe der Informationen (Serial.print)</li>
+ <li>Clear Serial Output - Löschen der bisherigen Ausgabe</li>
+ <li>Autoscroll - Automatisches mitscrollen de-/aktivieren</li>
+ </ul>
+ Der Wert des Potentiometers kann über den Schieberegler oder mit dem Mausrad (Zeiger über dem Schieberegler) verstellt werden.
+ </p>
+
+ </div>
+
+</article>
+
+</body>
+</html>
diff --git a/src/main/webapp/com/ardublock/reference/simHelp.png b/src/main/webapp/com/ardublock/reference/simHelp.png
new file mode 100644
index 0000000000000000000000000000000000000000..54ec5a57a0f4acdd700367bf56d3b9e2f465b43f
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/simHelp.png differ