User Interface

HTML-Buttons with the help of Skeleton framework

The HTML-page (or Jinja-Template) of the WebApp uses the button class of the Skeleton-Template. This class gives simple div-elements button behaviour (like hover effects).

I created two more CSS-classes for buttons. One is for aligning the vector-graphics inside the

element (.buttonIconAligner) and the second class defines the height of the button (x2Button in this case gives it a fixed height of 100px). The width and stacking of buttons is defined by Skeleton's grid, resulting in responsive behaviour.

<div class="four columns">
   <div class="button button-primary buttonIconAligner x2Button" onclick="enable('espressoX1')">
      <img src="{{url_for('static', filename='images/icons/espresso/4x2.svg')}}">
      <span class="buttonText">espresso</span>
   </div>
</div>

My JavaScript function enable() sends an HTTP-request via xhttp.open() and xhttp.send() to the Flask endpoint. Because of my way of reading the arguments inside Flask, I had to set the header of the xhttp-Object to application/x-www-form-urlencoded. The important part in that function looks like that:

xhttp.open("POST", "http://espresso:80/", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("action="+action);

espresso is the hostname I set for the RPi. But right now I included a fixed IP. This hostname style does not work if the HTTP-client does not use the wifi-router as DNS.