• Guest, Lamer Tech will close soon and products will be moved to TeslaCloud. Further product support and new products will be there.

Question Как включить на втором ESP8266 реле?

Геннадий

New member
Доброго времени суток. Вопрос такой, как включить реле на второй ESP8266 не заходя на ее web страницу?

Если я так прописываю путь то я попадаю на web страницу второй esp, а в идеале надо запустить реле и остаться на первой esp.

Часть кода:
//WEB БЛОК РОЗЕТКА
            client.println("<div class=\"nudersamolamis\">");
            client.println("<div class=\"elesazantyqtabkug\">РОЗЕТКА</div>");
           
                 
            if (output16State=="on") {
              client.println("<p><a href=//192.168.1.222/16/off\"><button class=\"button button2\">O</button></a></p>");
             
            } else {
              client.println("<a href=//192.168.1.222/16/on\"><button class=\"button\">I</button></a></p>");
 

Attachments

  • m.ino
    23.7 KB · Views: 33
Last edited by a moderator:

NikitOS

♂ Dungeon Master ♂
Administrator
Moderator
Developer
Wiki Editor
Не вижу причин не работать, если все сделано верно.
В тэги <head></head> нужно добавить: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Для каждой ссылки (<а></a>) нужно добавить класс command-btn, по которому JS будет отслеживать кнопку.

Получается вот это:
client.println("<p><a href=//192.168.1.222/16/off\"><button class=\"button button2\">O</button></a></p>");
Будет таким:
client.println("<p><a class=\"command-btn\" href=//192.168.1.222/16/off\"><button class=\"button button2\">O</button></a></p>");

Перед </body> вставляем:
Code:
$('.command-btn').click(function() {
  var link = $(this).attr('href');
  
  $.get(link, function(r) {
    console.log(r);
  });
  
  return false;
});

Edit fiddle - JSFiddle - Code Playground
 

Геннадий

New member
Не работает, все равно
Не вижу причин не работать, если все сделано верно.
В тэги <head></head> нужно добавить: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Для каждой ссылки (<а></a>) нужно добавить класс command-btn, по которому JS будет отслеживать кнопку.

Получается вот это:

Будет таким:
client.println("<p><a class=\"command-btn\" href=//192.168.1.222/16/off\"><button class=\"button button2\">O</button></a></p>");

Перед </body> вставляем:
Code:
$('.command-btn').click(function() {
  var link = $(this).attr('href');
 
  $.get(link, function(r) {
    console.log(r);
  });
 
  return false;
});

Edit fiddle - JSFiddle - Code Playground

Не работает должным образом. Все равно переходит на следующую страницу
 

NikitOS

♂ Dungeon Master ♂
Administrator
Moderator
Developer
Wiki Editor
Установите href="#" и посмотрите в консоль браузера после нажатия на ссылку. Есть что-то?
 

Геннадий

New member
Установите href="#" и посмотрите в консоль браузера после нажатия на ссылку. Есть что-то?
Я все вернул обратно и там где я буду пользоваться esp будет только роутер без интернета.
 

NikitOS

♂ Dungeon Master ♂
Administrator
Moderator
Developer
Wiki Editor
Тогда JS заменяем этим:
JavaScript:
var btn = document.querySelector('.command-btn');

btn.addEventListener('click', function(evt) {
    evt.preventDefault();

    var link = btn.href;
    var request = new XMLHttpRequest();

    request.open('GET', link);
    request.send();
});
 

Геннадий

New member
Значит я подставляю это
Тогда JS заменяем этим:
JavaScript:
var btn = document.querySelector('.command-btn');

btn.addEventListener('click', function(evt) {
    evt.preventDefault();

    var link = btn.href;
    var request = new XMLHttpRequest();

    request.open('GET', link);
    request.send();
});

вместо этого
Code:
$('.command-btn').click(function() {
  var link = $(this).attr('href');
  
  $.get(link, function(r) {
    console.log(r);
  });
  
  return false;
});

И убераю строчку в HTML
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

А все остальное остается, правильно?
 

ZAZ-965

Десептикон
@Геннадий, у меня еще по первой вашей теме (кстати, куда она пропала?) осталось ощущение, что вы выбрали сложный (и тупиковый) путь. Какую архитектуру умного дома вы планируете?
 

Геннадий

New member
@Геннадий, у меня еще по первой вашей теме (кстати, куда она пропала?) осталось ощущение, что вы выбрали сложный (и тупиковый) путь. Какую архитектуру умного дома вы планируете?
Предыдущую тему я удалил т.к. мне электрик порекомендовал реле заменить на симистор. А кто сказал что если что-то делать без особых навыков то что интересует это просто, я увлекаюсь микроконтроллерами только пол года и мне приходиться информацию собирать по крупинкам. Архитектура с виду простая, главная чтоб была надежная (освещение, управление розетками и водонагревателем). Хотелось бы сделать главную web-страницу на ESP с которой можно управлять всеми ESP и по отдельности через другие web-страницы esp (например комната к которой могу отдельно подключиться и управлять ей). Примерно будет 8 ESP и все они сходятся на роутер(без интернета), на даче.
 

ZAZ-965

Десептикон
Управление всем этим планируете с мобильного? Система сильно упростится, если к роутеру добавить Raspberry (Orange и т.д.) с готовым программным обеспечением (Domoticz, openHAB, Home Assistant). В простейшем случае часть программного обеспечения можно перенесни на роутер, если он поддерживает OpenWrt. Модель роутера не помните?
 

Геннадий

New member
Управление всем этим планируете с мобильного? Система сильно упростится, если к роутеру добавить Raspberry (Orange и т.д.) с готовым программным обеспечением (Domoticz, openHAB, Home Assistant). В простейшем случае часть программного обеспечения можно перенесни на роутер, если он поддерживает OpenWrt. Модель роутера не помните?
Управление будет осуществляться с планшета, по мне так удобно. А роутер на чем щас все тестирую ZyXEL P-330EE
 

ZAZ-965

Десептикон
Характеристики роутера ZyXEL P-330W v1 - DeviWiki (ex WikiDevi) не позволяют ничего в него добавить. Была мысль поставить на роутер MQTT брокер, для ESP8266 есть готовые констукторы с поддержкой MQTT, а управлять с планшета через приложение (на выбор MQTT - Android Apps on Google Play)
MQTT практически стандарт для самостоятельно разрабатываемой домашней автоматизации.
 

Геннадий

New member
Добрый день, помогите пожалуйста в этом вопросе. Например есть файл (STYLE.css). Я этот файл сохранил в память ESP. Теперь как его вывести на веб морду? Что и куда подставить, примеры в нете не помогли.



Code:
// Load Wi-Fi library
#include <ESP8266WiFi.h>
 

 // Библиотека DS18B20
#include <OneWire.h>
#include <DallasTemperature.h>
//***************************************************************************************************************************************************************************************

// Пин  ESP8266 для датчика ds18B20
#define ONE_WIRE_BUS 13
//***************************************************************************************************************************************************************************************

// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(ONE_WIRE_BUS);

// Pass our oneWire reference to Dallas Temperature.
DallasTemperature sensors(&oneWire);
DeviceAddress Thermometer;

int deviceCount = 0;
//***************************************************************************************************************************************************************************************

// Мак адрес DS18B20
int tempSensor1;

uint8_t sensor1[8] = {0x28, 0x2A, 0xC9, 0x79, 0x97, 0x08, 0x03, 0x4B};
//***************************************************************************************************************************************************************************************
 

// Replace with your network credentials
const char* ssid     = "NBN";
const char* password = "zse4vh23";

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output5State = "on";
String output4State = "on";

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  Serial.begin(115200);
  //***************************************************************************************************************************************************************************************
//Присвоение IP
//WiFi.config(IPAddress(192,168,1,222),IPAddress(192,168,1,1),IPAddress(255,255,255,0),IPAddress(192,168,1,1));
//***************************************************************************************************************************************************************************************

  // Initialize the output variables as outputs
  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);
  // Set outputs to HIGH
  digitalWrite(output5, HIGH);
  digitalWrite(output4,   HIGH);

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}









void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
      currentTime = millis();         
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, LOW);
            } else if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
              digitalWrite(output5, HIGH);


            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, LOW);
            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, HIGH);
            }

//***************************************************************************************************************************************************************************************

            // Отображение температуры DS18B20
            {
              sensors.requestTemperatures();
              tempSensor1 = sensors.getTempC(sensor1);
            }
//***************************************************************************************************************************************************************************************
            
String SendHTML(int tempSensor1);           
            client.println("<!DOCTYPE html><html>");
            client.println("<meta charset=utf-8>");
            client.println("<head>");
            client.println("<title>КОМНАТА</title>");
            client.println("<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">");
      

           // Стиль ЦВЕТА СТРАНИЦИ
           client.println("<style>");
           client.println("body {");
           client.println("background-color: #222222;");
           client.println("background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;}");
           client.println("#container {width: 500px;margin: auto;}");
           client.println("</style>");
           //Стиль кнопки
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style>");
          
            
            
            // Стиль ТЕМПЕРАТУРЫ
            client.println("<style>");
            client.println(".side-by-side{display: table-cell;vertical-align: middle;position: relative;}");
            client.println(".temperature{font-weight: 300;font-size: 70px;padding-right: 25px;}");
            client.println(".living-room .temperature{color: #00FFFF;}");
            client.println(".superscript{font-size: 30px;font-weight: 600;position: absolute;right: -5px;top: 4px;}");
            client.println("</style>");
                      
           // Стиль ПОДВАЛА СТРАНИЦИ
           client.println("<style>");
           client.println("#content {");
           client.println("width: 500px;");
           client.println("margin: 0 auto 50px;"); 
           client.println("}");
           client.println("#footer {");
           client.println("position: fixed;");
           client.println("left: 0; bottom: 0;");
           client.println("padding: 10px;");
           client.println("background: #39b54a;");
           client.println("color: #fff;");
           client.println("width: 100%;"); 
           client.println("}");
           client.println("</style>");








//Стиль стикера
client.println("<style>");
client.println("*{margin:0; padding:0;}");
client.println("h2,p{font-size:100%;font-weight:normal;}");
client.println("ul,li{list-style:none;}");
client.println("ul{overflow:hidden;padding:3em;}");
client.println("ul li div4{text-decoration:none;color:#000;background:#ffc;display:block;height:15em;width:15em;padding:1em;-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);box-shadow: 5px 5px 7px rgba(33,33,33,.7);-moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear;-webkit-transition:-webkit-transform .15s linear;}");
client.println("ul li{margin:1em;float:left;}");
client.println("ul li h2{ font-size:140%; font-weight:bold; padding-bottom:10px;}");
client.println("ul li p{ font-family:\"Reenie Beanie\",arial,sans-serif; font-size:180%;}");
client.println("ul li div4{-webkit-transform: rotate(-6deg);-o-transform: rotate(-6deg);-moz-transform:rotate(-6deg);}");
client.println("ul li:nth-child(even) div4{-o-transform:rotate(4deg);-webkit-transform:rotate(4deg);-moz-transform:rotate(4deg);position:relative;top:5px;background:#cfc;}");
client.println("ul li:nth-child(3n) div4{ -o-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); position:relative; top:-5px; background:#ccf;}");
client.println("ul li:nth-child(5n) div4{ -o-transform:rotate(5deg); -webkit-transform:rotate(5deg);-moz-transform:rotate(5deg); position:relative; top:-10px;}");
//client.println("ul li a:hover,ul li a:focus{ box-shadow:10px 10px 7px rgba(0,0,0,.7); -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7); -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7); -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); position:relative; z-index:5;}");
client.println("ol{text-align:center;}");
client.println("ol li{display:inline;padding-right:1em;}");
client.println("ol li div{color:#fff;}");
client.println("</style>");
 
//***************************************************************************************************************************************************************************************
                                 client.println("</head>");
                                 client.println("<body>");
//***************************************************************************************************************************************************************************************
 client.println("<center>");
client.println("<ul>");
    client.println("<li>");
       client.println("<div4>");
        client.println("<h2>Розетка #</h2>");
        
      client.println("</div4>");
    client.println("</li>");
    client.println("<li>");
      client.println("<div4>");
        client.println("<h2>Свет #2</h2>");
        if (output5State=="on") {
              client.println("<a href=\"/5/off\"><button class=\"button button2\">0</button></a>");
            } else {
              client.println("<a href=\"/5/on\"><button class=\"button\">|</button></a>");
            }
              
      
            if (output4State=="on") {
              client.println("<a href=\"/4/off\"><button class=\"button button2\">0</button></a>");
            } else {
              client.println("<a href=\"/4/on\"><button class=\"button\">|</button></a>");
            }
      client.println("</div4>");
   client.println("</li>");
    client.println("<li>");
      client.println("<div4>");
        client.println("<h2>Температура #3</h2>");
                    //WEB ДАТЧИК ТЕМПЕРАТУРЫ DS18B20
                    client.println("<center>");
            client.println("<div class='data living-room'>");
            client.println("<div class='side-by-side temperature'>");
            client.println(tempSensor1);
            client.println("<span class='superscript'>&deg;C</span></div>");
            client.println("</div> ");
            client.println("</center>");         
            client.println("</ul>");
      client.println("</div4>");
    client.println("</li>");
client.println("</center>");





// Переход страницы на главную
           // client.println("<meta http-equiv=\"Refresh\" content=\"10; URL=http://192.168.1.220\">");
            // WEB ПОДВАЛА СТРАНИЦИ
            client.println("<div id=\"footer\"> &copy; Zmey_Gorynych</div>");
//***************************************************************************************************************************************************************************************
              
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}
 

NikitOS

♂ Dungeon Master ♂
Administrator
Moderator
Developer
Wiki Editor
Читать файл можно по этому примеру: Example of ESP8266 Flash File System (SPIFFS) | Circuits4you.com

Создаем обработку запроса по пути /css, по запросу отдаем содержимое файла и заголовок Content-type: text/css.
В html в head добавляем: <link rel="stylesheet" href="/css">
 
Top Bottom