INFO: Dieses Forum nutzt Cookies...
Cookies sind für den Betrieb des Forums unverzichtbar. Mit der Nutzung des Forums erklärst Du dich damit einverstanden, dass wir Cookies verwenden.

Es wird in jedem Fall ein Cookie gesetzt um diesen Hinweis nicht mehr zu erhalten. Desweiteren setzen wir Google Adsense und Google Analytics ein.

Antwort schreiben 
 
Themabewertung:
  • 0 Bewertungen - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
esp8266 zu html
19.02.2021, 16:07
Beitrag #1
esp8266 zu html
hallo allerseits,
bei fipsok.de habe ich tolle codeschnipsel gefunden, die tab's lassen sich recht gut nutzen und auch kombinieren...
z.b, der dimmer. Den code im arduino part von einem auf zwei slider zu erweitern ist schon recht einfach, die darstellung von zwei slidern geht auch noch. Allerdings die funktionelle zuordnung des roten und grünen sliders jeweils zu html code - da scheitere ich auf der ganzen linie. Könnte mir bitte jemand helfend unter die arme greifen?
das wäre der arduino code
Code:
const uint8_t LED_rot = {D4};      //D5      // Pin für LED  einstellen
const uint8_t LED_gruen = {D1};

void pwmLed_rot()
{
  pinMode(LED_rot, OUTPUT);
  server.on("/do", []()
  {
    static uint16_t brightness_rot;
    if (server.hasArg("set"))
    {
      brightness_rot = server.arg(0).toInt();
      //Serial.println(brightness_rot);  // Zeitkritische Anwendung
      analogWrite(LED_rot, brightness_rot);
      server.send(204);
    }
    else
    {
      server.send(200, "text/plain", static_cast<String>(brightness_rot));
    }
  });
}

void pwmLed_gruen()
{
  pinMode(LED_gruen, OUTPUT);
  server.on("/do", []()
  {
    static uint16_t brightness_gruen;
    if (server.hasArg("set"))
    {
      brightness_gruen = server.arg(0).toInt();
      //Serial.println(brightness_gruen);  // Zeitkritische Anwendung
      analogWrite(LED_gruen, brightness_gruen);
      server.send(204);
    }
    else
    {
      server.send(200, "text/plain", static_cast<String>(brightness_gruen));
    }
  });
}

und das der html code mit bereits zwei slidern

Code:
<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <title>Esp8266 Slider</title>
    <style>
      .container {
        width: 300px;
        display: flex;
        flex-flow: column;
        align-items: center;
        padding-top: 60px;
      }
      .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 25px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        transition: opacity .2s;
      }
      .slider:hover {
        opacity: 1;
      }
      .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 50px;
        background: #888;
        cursor: pointer;
      }
      .slider::-moz-range-thumb {
        width: 25px;
        height: 50px;
        background: #888;
        cursor: pointer;
      }
      svg {
        height: 7em;
      }
    </style>
    <script>
      // Werte für optisch lineares Faden einer LED https://www.mikrocontroller.net/articles/LED-Fading
      const pwmtable = [0, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 4, 4, 5, 5, 6, 6, 7, 8, 9,
        10, 11, 12, 13, 15, 17, 19, 21, 23, 26, 29, 32, 36, 40, 44, 49, 55,
        61, 68, 76, 85, 94, 105, 117, 131, 146, 162, 181, 202, 225, 250,
        279, 311, 346, 386, 430, 479, 534, 595, 663, 739, 824, 918, 1023
      ];
      window.addEventListener('DOMContentLoaded', async () => {
        const response = await fetch('/do');
        const txt = await response.text();      
        const slider = document.querySelector('input');
        const r = document.getElementById('radial');
        const l = document.getElementById('light');
        pwmtable.forEach((v, i) => {
          if (txt == v) {
            slider.value = i;
            r.setAttribute("r", i * 3.2 + 1);
            l.setAttribute("opacity", 0.3 + i / 85);
          }
        });
        slider.max = pwmtable.length - 1;
        slider.addEventListener('input', () => {
          pwmtable.forEach((v, i) => {
            if (slider.value == i) {
              fetch('/do?set=' + v);
              r.setAttribute("r", i * 3.2 + 1);
              l.setAttribute("opacity", 0.3 + i / 85);
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <h2>LED Dimmer gruen</h2>
    <svg viewBox="0 0 53 53">
      <defs>
        <linearGradient id="linear" x1="179" x2="213" y1="244" y2="259" gradientUnits="userSpaceOnUse">
          <stop stop-color="#fff" offset="0" />
          <stop stop-color="#fff" stop-opacity="0" offset="1" />
        </linearGradient>
        <radialGradient id="radial" cx="32.4" cy="273" r="0" gradientTransform="matrix(-.00585 -.39 .532 -.00799 -119 285)" gradientUnits="userSpaceOnUse">
          <stop stop-color="#ff0" offset="0" />                      <!-- gelb #ff0 grün #0f0-->
          <stop stop-color="#ff0" stop-opacity="0" offset="1" />     <!-- gelb #ff0 grün #0f0-->
        </radialGradient>
      </defs>
      <g transform="translate(0 -244)">
        <circle cx="26.6" cy="271" r="25" fill="#b0b0b0" stroke-width=".265" />
        <ellipse id="elip" transform="matrix(.933 .36 -.69 .724 0 0)" cx="206" cy="255" rx="5.84" ry="11.3" fill="url(#linear)" stroke-width=".478" />
        <circle id="light" cx="26.7" cy="271" r="24" fill="url(#radial)" opacity="0" stroke-width=".249" />
      </g>
    </svg>
    <div class="container">
      <input type="range" class="slider">
    </div>

    <h2>LED Dimmer rot</h2>
    <svg viewBox="0 0 53 53">
      <defs>
        <linearGradient id="linear" x1="179" x2="213" y1="244" y2="259" gradientUnits="userSpaceOnUse">
          <stop stop-color="#fff" offset="0" />
          <stop stop-color="#fff" stop-opacity="0" offset="1" />
        </linearGradient>
        <radialGradient id="radial" cx="32.4" cy="273" r="0" gradientTransform="matrix(-.00585 -.39 .532 -.00799 -119 285)" gradientUnits="userSpaceOnUse">
          <stop stop-color="#ff0" offset="0" />                      <!-- gelb #ff0 grün #0f0-->
          <stop stop-color="#ff0" stop-opacity="0" offset="1" />     <!-- gelb #ff0 grün #0f0-->
        </radialGradient>
      </defs>
      <g transform="translate(0 -244)">
        <circle cx="26.6" cy="271" r="25" fill="#b0b0b0" stroke-width=".265" />
        <ellipse id="elip" transform="matrix(.933 .36 -.69 .724 0 0)" cx="206" cy="255" rx="5.84" ry="11.3" fill="url(#linear)" stroke-width=".478" />
        <circle id="light" cx="26.7" cy="271" r="24" fill="url(#radial)" opacity="0" stroke-width=".249" />
      </g>
    </svg>
    <div class="container">
      <input type="range" class="slider">
    </div>

  </body>
</html>

auf was muss ich da bei dem html code achten?

gruss und dank
georg[/quote]

gruss georg
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
19.02.2021, 16:17
Beitrag #2
RE: esp8266 zu html
Ich verstehe zwar Dein Problem nicht ganz, aber evtl. fehlen den Slidern einfach die Parameter name und id, damit Du die entsprechend auslesen kannst.
Hier habe ich ein Beispiel mit 4 Slidern, auch auf der Basis der Seiten von Fips (bis zum Ende lesen, da kommt noch eine Korrektur).

Gruß Tommy

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
19.02.2021, 17:55
Beitrag #3
RE: esp8266 zu html
danke für den link...
klar geht es um die parameter, namen und id's. Ich kenne mich eben mit html so gut wie nicht aus :-(
Bei dem beispiel kommt beim kompilieren die meldung "Invalid pin specified" - müsste ich da noch etwas ändern?

gruss georg
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
19.02.2021, 18:02
Beitrag #4
RE: esp8266 zu html
Da solltest Du schon die komplette Fehlermeldung liefern.

Gruß Tommy

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
19.02.2021, 18:12
Beitrag #5
RE: esp8266 zu html
hier ist sie
Code:
In file included from /home/georg/Arduino/ESP_8266/fips_tabs_test/Ws_Leds/Leds.ino:1:0:
/home/georg/Arduino/libraries/FastLED-3.4.0/src/FastLED.h:14:21: note: #pragma message: FastLED version 3.004.000
#    pragma message "FastLED version 3.004.000"
                     ^
In file included from /home/georg/Arduino/libraries/FastLED-3.4.0/src/FastLED.h:65:0,
                 from /home/georg/Arduino/ESP_8266/fips_tabs_test/Ws_Leds/Leds.ino:1:
/home/georg/Arduino/libraries/FastLED-3.4.0/src/fastspi.h:135:23: note: #pragma message: No hardware SPI pins defined.  All SPI access will default to bitbanged output
#      pragma message "No hardware SPI pins defined.  All SPI access will default to bitbanged output"
                       ^
In file included from /home/georg/Arduino/libraries/FastLED-3.4.0/src/FastLED.h:48:0,
                 from /home/georg/Arduino/ESP_8266/fips_tabs_test/Ws_Leds/Leds.ino:1:
/home/georg/Arduino/libraries/FastLED-3.4.0/src/fastpin.h: In instantiation of 'class FastPin<12u>':
/home/georg/Arduino/libraries/FastLED-3.4.0/src/platforms/esp/8266/clockless_esp8266.h:21:49:   required from 'class ClocklessController<12, 20, 50, 30, (EOrder)66u, 0, false, 50>'
/home/georg/Arduino/libraries/FastLED-3.4.0/src/chipsets.h:578:7:   required from 'class WS2812Controller800Khz<12u, (EOrder)66u>'
/home/georg/Arduino/libraries/FastLED-3.4.0/src/FastLED.h:105:52:   required from 'class WS2812B<12u, (EOrder)66u>'
/home/georg/Arduino/libraries/FastLED-3.4.0/src/FastLED.h:302:39:   required from 'static CLEDController& CFastLED::addLeds(CRGB*, int, int) [with CHIPSET = WS2812B; unsigned char DATA_PIN = 12u; EOrder RGB_ORDER = (EOrder)66u]'
/home/georg/Arduino/ESP_8266/fips_tabs_test/Ws_Leds/Leds.ino:10:57:   required from here
/home/georg/Arduino/libraries/FastLED-3.4.0/src/fastpin.h:210:2: error: static assertion failed: Invalid pin specified
  static_assert(validpin(), "Invalid pin specified");
  ^
exit status 1
Fehler beim Kompilieren für das Board NodeMCU 1.0 (ESP-12E Module).

gruss georg
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
19.02.2021, 18:22 (Dieser Beitrag wurde zuletzt bearbeitet: 19.02.2021 18:24 von Tommy56.)
Beitrag #6
RE: esp8266 zu html
Ja, da musst Du wohl für den NodeMCU den DATA_PIN in Leds.ino anpassen.
Beim WEMOS D1 mini arbeite ich mit 12, bei Dir könnte evtl. 5 gehen, kann ich aber nicht testen.

Gruß Tommy

Edit: Wobei Du das für Deine Hardware sowieso nicht verwenden kannt.

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
19.02.2021, 18:51
Beitrag #7
RE: esp8266 zu html
(19.02.2021 18:22)Tommy56 schrieb:  Edit: Wobei Du das für Deine Hardware sowieso nicht verwenden kannt.
und wieso nicht? ESP8266?

gruss georg
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
19.02.2021, 18:55
Beitrag #8
RE: esp8266 zu html
Aber keine WS2812 oder ähnliche. Zumindest in Deinem ersten Sketch hattest Du Einzelleds.

Gruß Tommy

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
Antwort schreiben 


Möglicherweise verwandte Themen...
Thema: Verfasser Antworten: Ansichten: Letzter Beitrag
  ESP32 Daten aus HTML Roger100499 11 201 Gestern 15:00
Letzter Beitrag: Tommy56
  ESP8266 SPIFF Daten schreiben und zeilenweise lesen? foto2004 10 138 Gestern 14:26
Letzter Beitrag: hotsystems
  Problem Upload einer html Datei per littleFS mat-sche 5 191 09.04.2021 13:17
Letzter Beitrag: Tommy56
  ESP8266 OTA - ich bin am Ende meiner Ideen miq19 11 642 02.04.2021 10:13
Letzter Beitrag: Tommy56
  Libraries für ESP8266 wonk 9 776 24.03.2021 20:18
Letzter Beitrag: wonk
  vom MEGA zum ESP8266 uk1408 24 1.873 19.03.2021 13:56
Letzter Beitrag: hotsystems
  ESP8266 Zeit vom NTP Server verändert sich Kupferwurm 18 1.808 11.03.2021 11:03
Letzter Beitrag: Tommy56
  ESP8266 NTP fadeValue bob 2 478 10.03.2021 18:29
Letzter Beitrag: Tommy56
  HTML-Ausgabe von ESP8266 D1 Mini + DHT 11 Temperatursensor auf Webseite Bobo83600 3 676 10.03.2021 09:42
Letzter Beitrag: Bobo83600
  [Gelöst] ESP8266 OTA bleibt ohne Wirkung miq19 5 759 07.03.2021 18:35
Letzter Beitrag: Tommy56

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste