ESP8266 - Ovladaní přes web.

[Le_Ze]

Zdravím.
Mužete nasměrovat na nějake fajne www ohledně komunikace ESP8266 s web rozhraním.
Bych vše chtěl řešit timto zpusobem.
https://circuits4you.com/2019/03/20/esp ... m-website/

A par dotazu k tomuto.

Je tam Void handleForm() This routine is executed when you press submit
Když přidam do web stranky dalši tlačitko, jak zjistím na ktere bylo kliknuto?

void handleRoot() This routine is executed when you open its IP in browser
<input type="text" name="firstname" value="Mickey">
Jak na to, kdybych chtěl zadat value až při spuštění stranky v tom handleRoot?
String firstname = "Mickey";

Dik moc.

[FHonza]

Je tam Void handleForm() This routine is executed when you press submit
Když přidam do web stranky dalši tlačitko, jak zjistím na ktere bylo kliknuto?

Např. takto (mají-li obě tlačítka zároveň odeslat formulář):

Kód: Vybrat vše

<input type="submit" name="akce" value="Btn1" />
<input type="submit" name="akce" value="Btn2" />

Kód: Vybrat vše

String akce = server.arg("akce");

Handler musí být napsaný podle toho, zda formulářová data budeš odesílat pomocí POST nebo GET

Jak na to, kdybych chtěl zadat value až při spuštění stranky v tom handleRoot?
String firstname = "Mickey";

Buď úpravou html před odesláním do prohlížeče, nebo po načtení stránky prohlížečem pomocí AJAXu

[Le_Ze]

Dik.
Pomalu, postupně, AJAX přijde na řadu až se pokoušu zaklady.

Už umím zapsat text do inputu při spuštění HTML stranky.
Načist data z imputu po kliknutí na button a i zjistil, na který button jsem klik.

Na řadě je Checkbox
https://arduino.stackexchange.com/quest ... or-esp8266
https://arduino.stackexchange.com/quest ... g-properly

Kód: Vybrat vše

<input type="checkbox" name="alarm1" id="alarm1">1</button>

Podle prvního odkazu a přikladu dole kod patři do void handleSubmit

Kód: Vybrat vše

void handleSubmit(){
    if (server.arg("alarm1") == "on") {
       Serial.println("Alarm 1 is set");
    }
    server.send(200, "text/plain", MAIN_page);      
}  

A do void setup

Kód: Vybrat vše

server.on ( "/submit", handleSubmit );

A nefunguje

[pocitujlasku]

pozor, nie kazdy prehliadac posiela checkbox ako on, je lepsie tam pridat value="on" resp. to, co sa ma poslat pri zaskrtnuti.
co presne znamena nefunguje?

[Le_Ze]

checkbox v HTML funguje ale nic se neposila

[FHonza]

Kód: Vybrat vše

<input type="checkbox" name="check">

Kód: Vybrat vše

if (server.hasArg("check")
{
}

[Le_Ze]

Jsem už vyzkoušel vše co mně napadlo a nefunguje.
Kopanec budu mit jinde nebo to tak jak chci nejde.
https://arduino.stackexchange.com/quest ... or-esp8266
Uplně dole.
Ma to v void handleSubmit()

Když strčim na web třeba 10 tlačitek.

Kód: Vybrat vše

void handleForm() {
Serial.println("hups");
}

Procedura se zavola pokažde, když kliknu na jakekoliv tlačitko.
A pak až v ní testují, na ktere jsem klik.

To same by měl dělat ten checkbox, ne?
Měla by se zavolat rutina handleSubmit a pak až v ní testovat na který checkbox jsem klik.

[FHonza]

"Odlaď" si tu stránku úplně mimo ESP, pak snadno zjistíš co prohlížeč doopravdy posílá. Používám k tomu WampServer + VSCode + XDebug. Jde to i jednodušeji, akorát to není tak pohodlné: Otevři si stránku v prohlížeči a zapni si "nástroje pro vývojáře". A tam si zobraz, co poslal prohlížeč na server. Ve všech prohlížečích to bude velmi podobné.

Případně jsem dej zdrojový kód stránky z prohlížeče, podívám se na to.

[Le_Ze]

Případně jsem dej zdrojový kód stránky z prohlížeče, podívám se na to.

https://www.w3schools.com/tags/att_inpu ... eckbox.asp

Na jednom foru mi jeden čípek napsal, že mi to nefunguje, protože checkbox je jen blbe zaškrtávátko, které nic neposila.
Odesílaní infa o stavu checkboxu je prý třeba dodělat přes JavaScrip.

[FHonza]

Myslel jsem zdrojový kód tvé stránky.

[Le_Ze]

Ja zas myslel, že koukneš, jestli ten checkbox neco posila
Zda měl ten čipek pravdu.

[FHonza]

To co jsem napsal květen 12, 2020 11:43 funguje. Když není checkbox zaškrtnutý, tak se nic nepošle. V případě že je, tak se pošle parametr s názvem dle atributu "name", hodnota bude dle atributu "value". Proto jsem tam psal

Kód: Vybrat vše

if (server.hasArg("vehicle1")
{
}

Opravdu bych nehledal chybu v prohlížeči.

Nejjednodušší test dle tvého odkazu:

Kód: Vybrat vše

<!DOCTYPE html>
<html>
<body>

<h1>Show Checkboxes</h1>

<form action="/index.php">
  <input type="checkbox" id="vehicle11" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle22" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle33" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>

<p>
<h1>Params</h1>
<?php

  echo "count: ".count($_GET)."<br/>";
  if (count($_GET))
  {
    foreach ($_GET as $key => $value)
    {
      echo $key." => ".$value."<br/>";
    }
  }
?>
</p>
</body>
</html>

[Le_Ze]

Hm, tak koukam že si celou dobu nerozumime.
Ja tam nechci ten button.
Chci aby při kliknutí na ten checkbox, byl odeslan jeho stav.

Takže ten čipek měl pravdu.
Neumiš to pořešit přes ten JavaScrip?

[FHonza]

To si fakt nerozumíme. Copak jakýkoli jiný HTML prvek něco někam odesílá při změně stavu ?

Například takto:

Kód: Vybrat vše

<!DOCTYPE html>
<html>

{script}
function changeCheckbox(box)
  {
    var url = "/zpracovani?" + box.name + "=";
    url += (box.checked) ? "1" : "0";

    var xh = new XMLHttpRequest();
    xh.onreadystatechange = function()
    {
      if (xh.readyState == 4)
      {
        if (xh.status == 200)
        {
          // tady je mozne zpracovat pripadnou odpoved
          console.log(xh.responseText);
        }
      }
    }
    xh.open("GET", url, true);
    xh.send(null);
  }
{/script}
<body>
  <h1>Show Checkboxes</h1>

  <form action="/index.php">
    <input type="checkbox" id="vehicle11" name="vehicle1" value="Bike" onchange="changeCheckbox(this)">
    <label for="vehicle1"> I have a bike</label><br>
    <input type="checkbox" id="vehicle22" name="vehicle2" value="Car" onchange="changeCheckbox(this)">
    <label for="vehicle2"> I have a car</label><br>
    <input type="checkbox" id="vehicle33" name="vehicle3" value="Boat" onchange="changeCheckbox(this)">
    <label for="vehicle3"> I have a boat</label><br><br>
  </form>
</body>

</html>

Jako jméno argumentu je opět atribut name, hodnota pak "0" nebo "1".

Nevím co tím chceš ovládat, ale pro kontinuální ovládání (něco jako řízení nějaké hračky a pod) je vhodnější navázat spojení přes WebSocket (ESP i všechny moderní prohlížeče to podporují) a posílat příkazy přes to. Má-li to být na něco jako "občas něco zapnout/vypnout", tak je to takto mnohem jednodušší.

Tag script je nutné opravit (nešel by tady odeslat příspěvek).

[Le_Ze]

Je to pro souseda.
8 relay modul přes PCF8574
Mam to udělame tak jak jsi napsal.
Zaškrtne ty co chce zapnout / vypnout a klik na button.
Ten button se mu ale nelibi a chce, aby to reagovalo hned při změně stavu toho checkboxu.
Až budu v praci vyzkoušim.
Děkuji.