INFO: Dieses Forum nutzt Cookies...

gk_1 · 19.02.2021, 16:07

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]

Tommy56 · 19.02.2021, 16:17

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

gk_1 · 19.02.2021, 17:55

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?

Tommy56 · 19.02.2021, 18:02

Da solltest Du schon die komplette Fehlermeldung liefern.

Gruß Tommy

gk_1 · 19.02.2021, 18:12

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).

Tommy56 · (Dieser Beitrag wurde zuletzt bearbeitet: 19.02.2021 18:24 von Tommy56.)

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.

gk_1 · 19.02.2021, 18:51

(19.02.2021 18:22)Tommy56 schrieb: Edit: Wobei Du das für Deine Hardware sowieso nicht verwenden kannt.

und wieso nicht? ESP8266?

Tommy56 · 19.02.2021, 18:55

Aber keine WS2812 oder ähnliche. Zumindest in Deinem ersten Sketch hattest Du Einzelleds.

Gruß Tommy

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


Baumstrukturmodus \| Linearer Modus esp8266 zu html