Mein Christbaum hat ein Web-Interface

This is an old revision of the document!

Einrichten

Nur Windows: Installation eines ssh-clients (z.B. putty)
Passwort ändern:
- Sich per ssh verbinden, das Kommand passwd eingeben und bestätigen (es wird bei der Eingabe der Passwörter gar nichts angezeigt).
- (Mac, Linux, direkt auf der Konsole: ssh -p 40199 user.name@tech-lab.ch, Windows putty oder anderer SSH-client installieren (sollte jetzt auch native gehen, habe ich gehört)).
FileZilla installieren (auf Linux und Mac nicht nötig, aber möglich).
Datei index.html umbenennen, z.B. in start.html (enthält ihren Namen)
- z.B. mit Filezilla oder auf der Konsole mit mv index.html start.html
Datei .htaccess umbennen oder löschen, damit Ihre Webseite von ausserhalb der KSBG erreichbar wird. Das kann via Konsole (ssh) oder mit Filezilla erfolgen.
- z.B. mit Filezilla oder auf der Konsole mit mv .htaccess .htaccess.bak

Erste Webseite

Text-Editor, entweder lokal, oder direkt auf dem Server mit nano oder mit vim. Erste html-Datei mit Namen index.html erstellen (und auf den Server laden)

<!DOCTYPE html>
<html>
<body>
<h1>Titel</h1>
Text.
</body>
</html>

Ihre Seite sollte dann online unter https://ofi.tech-lab.ch/2021/FF361/ in Ihrem Ordner sichtbar sein.

ESP32 mit WS2812b LED-Streifen
Webserver auf dem ESP (Dateien unten)
OTA-Update-Möglichkeit (Over the air, d.h. direkt via Wireless)

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Xmas Tree Web Server</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
        <script>
 
function setProgram() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                   // Typical action to be performed when the document is ready:
                   document.getElementById("status").innerHTML = xhttp.responseText;
                }
        };
        var url = '/prg';
        var sep = "?";
        for (const [key, value] of Object.entries(state)) {
                url+=sep+key+"="+value
                sep="&";
        }
        console.log(url);
        xhttp.open("GET", url, true);
        xhttp.send();
}
 
state = {
        'nr':%NR%,
        'brightness':%BRIGHTNESS%,
        'speed':%SPEED%,
        'color1':'%COLOR1%',
        'color2':'%COLOR2%'
};
 
function mod(a,b) {
        return a - Math.floor(a/b)*b;
}
 
function makeColor(img, event, name) {
        var h = (event.clientX-img.offsetLeft)/400;
        console.log(h);
        var x = (1-Math.abs(mod(h*6,2) - 1));
        rgb = [0,0,0];
        if (h<1/6) rgb = [1,x,0];
        else if (h<2/6) rgb = [x,1,0];
        else if (h<3/6) rgb = [0,1,x];
        else if (h<4/6) rgb = [0,x,1];
        else if (h<5/6) rgb = [x,0,1];
        else rgb = [1,0,x];
        v = Math.floor(rgb[2]*255)+256*(Math.floor(rgb[1]*255)+256*Math.floor(rgb[0]*255));
        s = v.toString(16);
        while (s.length<6) {
                s = "0"+s
        }
        console.log(s);
        state[name] = s;
        document.getElementById(name).value = "#"+s;
        setProgram();
}
 
        </script>
  <h1>Xmas Tree Web Server</h1>
  <!--  <p>Active Programm: <strong> %STATE%</strong></p> -->
  <p><button class="button" onclick="state['nr']=0;setProgram();">Rainbow</button></p>
  <p><button class="button" onclick="state['nr']=1;setProgram();">Running</button></p>
  <p><button class="button" onclick="state['nr']=2;setProgram();">Sparkling</button></p>
  <p><button class="button" onclick="state['nr']=3;setProgram();">Fading</button></p>
  <div><input type="range" id="brightness" name="brightness"
         min="0" max="255" value="%BRIGHTNESS%" onchange="state['brightness']=this.value;setProgram();">
          <label for="brightness">Brightness</label>
  </div>
  <div><input type="range" id="speed" name="speed"
         min="0" max="255" value="%SPEED%" onchange="state['speed']=this.value;setProgram();">
          <label for="brightness">Speed</label>
  </div>
        <div>
                <img src="hsv400.png" width="400px" height="50px" onclick="makeColor(this, event, 'color1');">
        </div>
        <div>
                <img src="hsv400.png" width="400px" height="50px" onclick="makeColor(this, event, 'color2');">
        </div>
  <div>
  <input type="color" id="color1" name="color1"
           value="#%COLOR1%" onchange="state['color1']=this.value.substr(1);setProgram();">
    <label for="color1">Color 1</label>
  <input type="color" id="color2" name="color2"
           value="#%COLOR2%" onchange="state['color2']=this.value.substr(1);setProgram();">
    <label for="color2">Color 2</label>
  </div>
  <div class="status" id="status"></div>
</body>
</html>