Arduino IO-Webserver

  • Ich habe einen Arduino Webserver am laufen, wird Teil meines Home-Automation Projektes werden.
    Über eine Webseite kann man LEDs bzw. Ausgänge des 32SHIFT-OUT Shield mit 4x74HC595 schalten.
    Das schalten funktioniert bereits, siehe und probiere hier:
    http://mega-hz.dnshome.de:85/.


    Wie kann man antelle der checkboxen "LED-ICONS" wie diese [Blockierte Grafik: http://www.mega-hz.de/icons/SquareCons_icons/PNG/Green1.png] in rot (für aus) und grün (für an) darstellen lassen? Ein Klick auf die Icons sollte dennoch den Status wechseln.


    Hier der Arduino Code:





    und hier der html code:





    in Sachen html usw. bin ich kein Profi, würde mich über Hilfe sehr freuen.


    Wolfram.

  • ich habe es hinbekommen! :-)


    schaut mal:


    http://mega-hz.dnshome.de:85/




    sicher kann man den html code kürzer hinbekommen, mit ner for-schleife?
    wie macht man das, kann mir da jemand helfen?

  • Genau, das ist sehr zu empfehlen. Das Formular zunächst leer lassen, die Bezeichnungen in einem Array ablegen und das HTML des Formulars in einer Schleife generieren:

    Code
    1. <form id="myform" class="check_LEDs" name="LED_form1"> </form>
    2. <script>
    3. var leds = ["LED0", "LED1", "LED2"]; // usw.
    4. html = "";
    5. for (var i = 0; i < leds.length; i++) {
    6. html += '<input type="checkbox" name="' + leds[i] + ' " id="' + leds[i] + '" value="0" onclick="GetCheck(\'' + leds[i] + '\', this)">';
    7. html += '<label for="' + leds[i] + '"><span></span>' + leds[i].replace("LED", "LED&nbsp;&nbsp;&nbsp;") + '</label>';
    8. } document.getElementById("myform").innerHTML = html; </script>
  • Wow, vielen Dank, oh mann, DAS hätte ich nie so hinbekommen, da fehlt einfach noch die Erfahrung...


    Ich habe das script nun so angepasst, daß die Buttons wieder 2 spalting angezeigt werden.
    Allerdings sind die "LEDs" <10 nun etwas daneben.
    Habe Versucht in dem
    var leds = ["LED0", "LED1" die Namen mit LED00, LED01 usw. zu ersetzen, dann werden aber nur LED 10-31 erkannt und gesetzt.
    Da müsste noch eine If<10 irgendwo rein, oder gibt es passende formatierungsbefehle dafür?


    Gruß,
    Wolfram

  • Ich hatte vorher bei LED0-9 jeweils ein space mit eingefügt.
    Mit dem CSS klappt das so nicht, da ja die Checkboxes als unsichtbar geschaltet sind, damit nur die Hintergrund Bilder (rot/grün) dargestellt werden.
    da müsste entweder eine 0 vor die 1,2,3..9 oder ein space.
    Oder den Text "LED" linksbündig und die nummer rechtsbündig... oder so...


    Oder ne andere Idee, würde es großen Aufwand machen alles umzustellen als Buttons mit gleicher Größe in denen dann ein Background Image dargestellt wird und der Text dann zentriert?

  • Zitat

    Mit dem CSS klappt das so nicht

    Hast Du das ausprobiert? Ich schon. In meinem Beispiel-CSS weise ich die Breite dem Label zu und das ist sichtbar.

    Zitat

    würde es großen Aufwand machen alles umzustellen als Buttons mit gleicher Größe

    Das läuft genau auf meinen Vorschlag mit der festen Breite hinaus. Den Text kannst Du mit text-align;center; leicht zentrieren.

  • oh ja, tatsächlich, das klappt!


    Ich hatte es weiter oben ausprobiert, nicht direkt kopiert!
    Danke vielmals!


    Dann werde ich mich nun mal um die 32 Eingänge kümmern, die sind teilweise schon mit eingebaut aber irgendwie verstehen sich webseite und arduino noch nicht so recht.
    Ist aber nun eine gute Basis für die Homeautomatisierung die ich in Arbeit habe.


    Ist die verarbeitungs Zeit zwischen "LED drücken" bis Status vom Arduino zurückgesendet wird zu langsam oder ist das normal so für nen Arduino mit 16Mhz?