ARDUINO Страница на сервере esp8266 помогите с внешним видом - CSS или HTML

D

Dubolom

✩✩✩✩✩✩✩
2 Фев 2021
77
0
Здрасте)
Подымаю html страничку на espшке.
Здесь взял пример - почти всё понятно
  1. #include <ESP8266WiFi.h>
  2. #include <ESP8266WebServer.h>

  4. / * Установить свой SSID и пароль * /
  5. const char* ssid = "NodeMCU";
  6. const char* password = "12345678";

  8. / * Настройка IP-адрес * /
  9. IPAddress local_ip(192,168,1,1);
  10. IPAddress gateway(192,168,1,1);
  11. IPAddress subnet(255,255,255,0);

  13. ESP8266WebServer server(80);

  15. uint8_t LED1pin = D7;
  16. bool LED1status = LOW;

  18. uint8_t LED2pin = D6;
  19. bool LED2status = LOW;

  21. void setup() {
  22. Serial.begin(115200);
  23. pinMode(LED1pin, OUTPUT);
  24. pinMode(LED2pin, OUTPUT);

  26. WiFi.softAP(ssid, password);
  27. WiFi.softAPConfig(local_ip, gateway, subnet);
  28. delay(100);
  30. server.on("/", handle_OnConnect);
  31. server.on("/led1on", handle_led1on);
  32. server.on("/led1off", handle_led1off);
  33. server.on("/led2on", handle_led2on);
  34. server.on("/led2off", handle_led2off);
  35. server.onNotFound(handle_NotFound);
  37. server.begin();
  38. Serial.println("HTTP server started");
  39. }
  40. void loop() {
  41. server.handleClient();
  42. if(LED1status)
  43. {digitalWrite(LED1pin, HIGH);}
  44. else
  45. {digitalWrite(LED1pin, LOW);}
  47. if(LED2status)
  48. {digitalWrite(LED2pin, HIGH);}
  49. else
  50. {digitalWrite(LED2pin, LOW);}
  51. }

  53. void handle_OnConnect() {
  54. LED1status = LOW;
  55. LED2status = LOW;
  56. Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  57. server.send(200, "text/html", SendHTML(LED1status,LED2status));
  58. }

  60. void handle_led1on() {
  61. LED1status = HIGH;
  62. Serial.println("GPIO7 Status: ON");
  63. server.send(200, "text/html", SendHTML(true,LED2status));
  64. }

  66. void handle_led1off() {
  67. LED1status = LOW;
  68. Serial.println("GPIO7 Status: OFF");
  69. server.send(200, "text/html", SendHTML(false,LED2status));
  70. }

  72. void handle_led2on() {
  73. LED2status = HIGH;
  74. Serial.println("GPIO6 Status: ON");
  75. server.send(200, "text/html", SendHTML(LED1status,true));
  76. }

  78. void handle_led2off() {
  79. LED2status = LOW;
  80. Serial.println("GPIO6 Status: OFF");
  81. server.send(200, "text/html", SendHTML(LED1status,false));
  82. }

  84. void handle_NotFound(){
  85. server.send(404, "text/plain", "Not found");
  86. }

  88. String SendHTML(uint8_t led1stat,uint8_t led2stat){
  89. String ptr = "<!DOCTYPE html> <html>\n";
  90. ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  91. ptr +="<title>LED Control</title>\n";
  92. ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  93. ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  94. ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  95. ptr +=".button-on {background-color: #1abc9c;}\n";
  96. ptr +=".button-on:active {background-color: #16a085;}\n";
  97. ptr +=".button-off {background-color: #34495e;}\n";
  98. ptr +=".button-off:active {background-color: #2c3e50;}\n";
  99. ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  100. ptr +="</style>\n";
  101. ptr +="</head>\n";
  102. ptr +="<body>\n";
  103. ptr +="<h1>ESP8266 Web Server</h1>\n";
  104. ptr +="<h3>Using Access Point(AP) Mode</h3>\n";
  106. if(led1stat)
  107. {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  108. else
  109. {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  111. if(led2stat)
  112. {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  113. else
  114. {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  116. ptr +="</body>\n";
  117. ptr +="</html>\n";
  118. return ptr;
  119. }
Вопрос конкретно по самой страничке:
Сейчас на ней два заголовка, две подписи, две кнопки.
sozdanie-prostogo-veb-servera-nodemcu-esp8266-v-arduino-ide-7a.png
  1. String SendHTML(uint8_t led1stat,uint8_t led2stat){
  2. String ptr = "<!DOCTYPE html> <html>\n";
  3. ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  4. ptr +="<title>LED Control</title>\n";
  5. ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  6. ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  7. ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  8. ptr +=".button-on {background-color: #1abc9c;}\n";
  9. ptr +=".button-on:active {background-color: #16a085;}\n";
  10. ptr +=".button-off {background-color: #34495e;}\n";
  11. ptr +=".button-off:active {background-color: #2c3e50;}\n";
  12. ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  13. ptr +="</style>\n";
  14. ptr +="</head>\n";
  15. ptr +="<body>\n";
  16. ptr +="<h1>ESP8266 Web Server</h1>\n";
  17. ptr +="<h3>Using Access Point(AP) Mode</h3>\n";
  19. if(led1stat)
  20. {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  21. else
  22. {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  24. if(led2stat)
  25. {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  26. else
  27. {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  29. ptr +="</body>\n";
  30. ptr +="</html>\n";
  31. return ptr;
Я в HTML (или что это)) не понимаю.
Мне нужно изменить страничку -
добавить 2 поля для ввода инфы и ...
ЗАГОЛОВОК H1

заголовок h3

T=31 > t1=20 <
H=50 < t2=30 >

Цель T: | окно ввода | Установить // это окно ввода цели, и кнопка отправки
Цель H: | окно ввода | Установить // это окно ввода цели, и кнопка отправки
И чтобы когда в окошко ввел данные, и нажал установить - в ЕСПэшке int менялся...
Если это не сложно - накидайте пару строк.
Если сложно - ткните что читануть, чтоб хватило знаний на такую задачу.
 
D

Dubolom

✩✩✩✩✩✩✩
2 Фев 2021
77
0
Спасибо.
Почитал GyverPortal
Напомнили о Телеге
Почитал Gyver FastBot - все хорошо, устраивает.
1 проблема:
Не вижу в сериал принте текст сообщения, который пишу в телеге. Инфу о сообщении вижу, а само сообщение нет.
Коды пробую из примеров - должно так то работать.
Подскажите может в чем может быть дело?
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу