INFO: Dieses Forum nutzt Cookies...

Lukasifta_07 · 01.11.2020, 21:17

Hallo liebes Forum,

ich habe mir vor kurzen ein ESP 8266 angeschafft, um mich weiter mit dem Programmieren zu beschäftigen.
Als mein erstes Projekt möchte ich zwei LEDs über Button durch eine Internetseite zum Blinken bringen. Das Projekt soll in meiner Vision mal für das Steuern eines Autos dienen. Der ESP 8266 arbeitet hier als Accespoint.

Meine Frage und ich lade den Code hoch: Ich möchte die Form und Gestaltungsweise der Buttons anpassen, bspw. die Form von Pfeilen wie auf einem Steuerkreuz. Könnte mir hier jemand einen Tipp geben, wie ich das in meinen derzeit vorhandenen Code implementieren könnte.

Mit freundlichen Grüßen
Lukas

Tommy56 · 01.11.2020, 21:25

Stelle Deinen Sketch bitte in Codetags.
Wie das geht, steht hier.
Das kannst Du auch noch nachträglich ändern.

Die Buttons gestaltest Du mit HTML und CSS. Literatur sind Selfhtml und w3schools

Gruß Tommy

hotsystems · 01.11.2020, 22:56

Und damit du Buttons und andere Steuerelemente sichtbar machen kannst, benötigst du einen Webserver. Ein Accesspoint alleine wird dir da nicht helfen.
Gute Tipps dazu findest du auf der Seite von fips Sieh dir da gern mal die Beispiele an.

Und setze deinen Sketch bitte in Code-Tags, wie Tommy schon geschrieben hat.

Lukasifta_07 · 02.11.2020, 18:19

Lieber hotsystems,

nein ich konnte auch Buttons erstellen indem ich den ESP-8266 als Accespoint konfiguriert habe.
Folgenden Code habe ich verwendet:

Code:

#include <ESP8266WiFi.h>

const char* ssid = "ESP_8266";

const char* passwort = "Test1234"; 

unsigned long ulReqcount;

WiFiServer server (80);

void setup() 

{

  ulReqcount = 0;

  Serial.begin(9600);

  delay (1);

  WiFi.mode (WIFI_AP);

  WiFi.softAP (ssid, passwort);

  server.begin ();

  pinMode (13, OUTPUT); //LED

  pinMode (15, OUTPUT); // LED

  pinMode (5, OUTPUT); // Motor

  pinMode (16, OUTPUT); // Motor

  digitalWrite (13, LOW);

  digitalWrite (15, LOW);

  digitalWrite (5, HIGH);

  digitalWrite (16, HIGH);

}

void loop() 

{

  WiFiClient client = server.available ();

    if (!client)

    {

      return;

    }

  Serial.println ("New client");

  unsigned long ultimeout = millis() +250;

    while (!client.available () && (millis()<ultimeout) )

    {

      delay (1);

    }

    if (millis()>ultimeout)

    {

      Serial.println("client connection time-out!");

      return;

    }

    String sRequest = client.readStringUntil ('\r');

    client.flush();

    if (sRequest == "")

    {

      Serial.println ("empty request ! - stopping client");

      client.stop ();

      return;

    }

    String sPath="",sParam="", sCmd="";

    String sGetstart="GET ";

    int iStart,iEndSpace,iEndQuest;

    iStart = sRequest.indexOf(sGetstart);

if (iStart>=0)

  {

    iStart+=+sGetstart.length();

    iEndSpace = sRequest.indexOf(" ",iStart);

    iEndQuest = sRequest.indexOf("?",iStart);

    // are there parameters?

    if(iEndSpace>0)

      {

        if(iEndQuest>0)

          {

            // there are parameters

            sPath  = sRequest.substring(iStart,iEndQuest);

            sParam = sRequest.substring(iEndQuest,iEndSpace);

          }

        else

          {

            // NO parameters

            sPath  = sRequest.substring(iStart,iEndSpace);

          }

      }

  }

if(sParam.length()>0)

  {

    int iEqu=sParam.indexOf("=");

    if(iEqu>=0)

      {

        sCmd = sParam.substring(iEqu+1,sParam.length());

        Serial.println(sCmd);

      }

  }

  String sResponse,sHeader;

  if(sPath!="/")

    {

      sResponse="<html><head><title>404 Not Found</title></head><body><h1>Not Found</h1><p>The requested URL was not found on this server.</p></body></html>";

      sHeader  = "HTTP/1.1 404 Not found\r\n";

      sHeader += "Content-Length: ";

      sHeader += sResponse.length();

      sHeader += "\r\n";

      sHeader += "Content-Type: text/html\r\n";

      sHeader += "Connection: close\r\n";

      sHeader += "\r\n";

    }

  else

    {

      ulReqcount++;

      sResponse  = "<html><head><title>Autoroboter Duale Hochschule Gera Eisenach</title></head><body>";

      sResponse += "<font color=\"#000000\"><body bgcolor=\"#d0d0f0\">";

      sResponse += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">";

      sResponse += "<h1>Autoroboter Duale Hochschule Gera Eisenach</h1><BR>";

      sResponse += "Die Buttons steuern das Fahrzeug und die Blinker.<BR>";

      sResponse += "<FONT SIZE=+1>";

      sResponse += "<p>Fahrzeug f&aumlhrt nach: <a href=\"?pin=FUNCTION1\"><button>links</button></a>&nbsp;<a href=\"?pin=FUNCTION3\"><button>gerade</button></a>&nbsp;<a href=\"?pin=FUNCTION2\"><button>rechts</button></a></p><BR>";

      sResponse += "<p>Hupen: <a href=\"?pin=FUNCTION4\"><button>Hupe</button></a></p><BR>";

      sResponse += "Joshua ist cool.<BR>";

      //////////////////////

      // react on parameters

      //////////////////////

      if (sCmd.length()>0)

        {

          if (sCmd.indexOf("FUNCTION1")>=0)

            {

              digitalWrite(15, HIGH);

              delay (300);

              digitalWrite(15, LOW);

              delay (300);

              digitalWrite(15, HIGH);

              delay (300);

              digitalWrite(15, LOW);

              delay (300);

              digitalWrite(15, HIGH);

              delay (300);

              digitalWrite(15, LOW);

            }

          else if (sCmd.indexOf("FUNCTION2")>=0)

            {

              digitalWrite(13, HIGH);

              delay (300);

              digitalWrite(13, LOW);

              delay (300);

              digitalWrite(13, HIGH);

              delay (300);

              digitalWrite(13, LOW);

              delay (300);

              digitalWrite(13, HIGH);

              delay (300);

              digitalWrite(13, LOW);

            }

          else if (sCmd.indexOf("FUNCTION3")>=0)

           {

              digitalWrite(13, HIGH);

              digitalWrite(15, HIGH);

           }

          else if (sCmd.indexOf("FUNCTION4")>=0)

          {

              tone (12, 450);

              delay (500);

              noTone(12);

          }

        }

      sResponse += "<FONT SIZE=-2>";

      sResponse += "</body></html>";

      sHeader  = "HTTP/1.1 200 OK\r\n";

      sHeader += "Content-Length: ";

      sHeader += sResponse.length();

      sHeader += "\r\n";

      sHeader += "Content-Type: text/html\r\n";

      sHeader += "Connection: close\r\n";

      sHeader += "\r\n";

    }

  // Send the response to the client

  client.print(sHeader);

  client.print(sResponse);

  // and stop the client

  client.stop();

  Serial.println("Client disonnected");

}

Wenn du nun diesen Sketch auch den ESP-8266 übeträgst und dich mit einem WiFI-fähigen Gerät mit dem W-Lan verbindest und im Browser die IP-Adresse 192.168.4.1 öffnest siehst du meine erstellten Buttons mit dem ESP als Accespoint und diese möchte ich jetzt verändern (Größe, Farbe, Form).

Mit freundlichen Grüßen
und vielen Dank

lukasifta_07

Tommy56 · (Dieser Beitrag wurde zuletzt bearbeitet: 02.11.2020 18:29 von Tommy56.)

(02.11.2020 18:19)Lukasifta_07 schrieb: nein ich konnte auch Buttons erstellen indem ich den ESP-8266 als Accespoint konfiguriert habe.
----
WiFiServer server (80);
----

Damit hast Du einen Webserver auf Port 80 eingerichtet, wobei es mittlerweile eine bessere Realisierung gibt. Schau Dir mal das Beispiel Webserver in den aktuellen Sourcen des ESP8266 an.

Um die Buttons zu ändern, musst Du den HTML-Quelltext anpassen. Das hatte ich Dir bereits in #2 geschrieben.

Gruß Tommy

Lukasifta_07 · 02.11.2020, 18:36

Hallo Tommy,

also muss ich in folgender Zeile

Code:

sResponse += "<p>Fahrzeug f&aumlhrt nach: <a href=\"?pin=FUNCTION1\"><button>links</button></a>

Änderungen vornehmen nachdem ich mich in CSS eingearbeitet habe.

Und noch eine Frage, wo finde ich das Beispiel zur Nutzung des Webservers mit dem ESP-8266 ?
Und ich dachte ich kann eine Webserver nu nutzen, wenn ich den EP mit meinem W-Lan zuhause verbinde und das möchte ich für dieses Projekt nicht.

Grüße Lukas

Tommy56 · 02.11.2020, 18:53

IDE - Beispiele (wenn ESP8266 als MC gewählt) - ESP8266Webserver oder hier.

Ob AP oder vorhandenes WLAN ist doch nur die Art der Verbindung. Das berührt erst mal die Funktionalität nicht. Dass Du im AP-Modus nicht das Internet übers WLAn nutzen kannst, sollte aber klar sein Wink

Dem Webserver selbst ist es egal, welches Netz er nutzt.

Gruß Tommy

hotsystems · 02.11.2020, 19:37

(02.11.2020 18:36)Lukasifta_07 schrieb: Und noch eine Frage, wo finde ich das Beispiel zur Nutzung des Webservers mit dem ESP-8266 ?
Und ich dachte ich kann eine Webserver nu nutzen, wenn ich den EP mit meinem W-Lan zuhause verbinde und das möchte ich für dieses Projekt nicht.

Und wenn du unsere Beiträge auch aufmerksam lesen würdest, dann hättest du auch meinen Link zur Seite von Fips gefunden.
Deinen Fehler mit dem Web-Server hat dir Tommy ja schon beschrieben.

Möglicherweise verwandte Themen...
Thema:		Verfasser	Antworten:	Ansichten:	Letzter Beitrag
	HTML Code into Esp 32 AccessPoint	TechnikerHannes	19	3.949	27.02.2020 10:50 Letzter Beitrag: biologist
	Wemos D1 mini DS18S20 Accesspoint	gimbel	6	2.857	09.09.2018 21:12 Letzter Beitrag: Tommy56


Baumstrukturmodus \| Linearer Modus ESP_8266 als Accesspoint