Передача данных на веб страницу

Войдите на сайт для отправки комментариев

15 ответов [Последнее сообщение]

Чт, 10/03/2022 - 12:02

Adolf_Balalaykin

Offline

Зарегистрирован: 01.02.2021

Привожу код в сокращенном виде, для общего понимания проблемы. Передача показаний датчика температуры на веб страницу.

При выводе показаний одного датчика, всё норм.

 // Задаем интервал между показаниями датчиков 5 сек.
   unsigned long previousMillis = 0;
   const long interval = 5000;

  void loop() {

 // Считываем с датчика показания температуры каждые 5 секунд.
  unsigned long currentMillis = millis();
 
 if (currentMillis - previousMillis >= interval)
  {
  ws.textAll(String(temperture)); // отправляем показания датчика
  }
}

function onMessage(event) {
     document.getElementById("dateTime").innerHTML = event.data;
  }

HTML

<span id="dateTime"></span>

Но как быть, если мне нужны показания сразу двух датчиков? Если сделать так, то...

ws.textAll(String(temperture));    // отправляем показания датчика 1
ws.textAll(String(temperture2));   // отправляем показания датчика 2

В event.data приедут данные сразу с двух датчиков. Как их различать?

Чт, 10/03/2022 - 12:18

ЕвгенийП

Offline

Зарегистрирован: 25.05.2015

Adolf_Balalaykin пишет:

Привожу код в сокращенном виде для общего понимания проблемы.

Для общего понимания проблемы приводите ПОЛНЫЙ код, который можно скомпилировать и запустить. Короткий, без всего лишнего, но показывающий проблему и ПОЛНЫЙ.

По Вашим огрызкам ничего понять нельзя. Например, что за хрень такая "ws" - как описана о=и откуда взялась.

Только не надо отвечать на вопрос из последней фразы - просто приведите как можно более короткий, но полный код и ссылки на все используемые библиотеки.

Чт, 10/03/2022 - 13:01

BOOM

Offline

Зарегистрирован: 14.11.2018

Например, как-то так:

ws.textAll(String(temperture) + "&" + String(temperture2));   // отправляем показания датчика 1 и 2

А в JS:

function onMessage(event) {
     var arrayS = event.data.split("&");
     document.getElementById("data1").innerHTML = arrayS[0];
     document.getElementById("data2").innerHTML = arrayS[1];
}

Не уверен в правильности синтаксиса, сама суть понятна? Пробуй.

Чт, 10/03/2022 - 13:24

Adolf_Balalaykin

Offline

Зарегистрирован: 01.02.2021

BOOM пишет:

Например, как-то так:

ws.textAll(String(temperture) + "&" + String(temperture2));   // отправляем показания датчика 1 и 2

А в JS:

function onMessage(event) {
     var arrayS = event.data.split("&");
     document.getElementById("data1").innerHTML = arrayS[0];
     document.getElementById("data2").innerHTML = arrayS[1];
}

Не уверен в правильности синтаксиса, сама суть понятна? Пробуй.

Спасибо Бум! Суть понятна, дальше сам.

Чт, 10/03/2022 - 13:29

BOOM

Offline

Зарегистрирован: 14.11.2018

Еще в коде МК потерял такое:

if (currentMillis - previousMillis >= interval) {
  previousMillis = currentMillis;
//.....
}

Иначе будет "ой" ))

Чт, 10/03/2022 - 16:01

Adolf_Balalaykin

Offline

Зарегистрирован: 01.02.2021

Понятное дело. Это что бы без delay обойтись.

Сб, 16/04/2022 - 08:23

Adolf_Balalaykin

Offline

Зарегистрирован: 01.02.2021

BOOM пишет:

Например, как-то так:

ws.textAll(String(temperture) + "&" + String(temperture2));   // отправляем показания датчика 1 и 2

А в JS:

function onMessage(event) {
     var arrayS = event.data.split("&");
     document.getElementById("data1").innerHTML = arrayS[0];
     document.getElementById("data2").innerHTML = arrayS[1];
}

Не уверен в правильности синтаксиса, сама суть понятна? Пробуй.

Отравка одной строкой хороша если (temperture) и (temperture2) находятся в одной области видимости. А если они в разных блоках?

void temp() {
if (условие1)
  {
  ws.textAll(String(temperature);
  }

if (условие2)
  {
  ws.textAll(String(temperature2);
  }
}

Можно ли например для каждого значения добавить количество знаков этого самого значения?

void temp() {
if (условие1)
  {
  ws.textAll(String(temperature);
  }

if (условие2)
  {
  ws.textAll(String(temperature2 + 4);
  }
}

Если да, то как в js их распознать?

Сб, 16/04/2022 - 09:34

BOOM

Offline

Зарегистрирован: 14.11.2018

Можно. Все тоже самое. Меняется так: Сначала собирай результирующую строку в отдельную переменную и не забывай разделительные символы вставлять, как только строку собрал - отправляй ее на сервер.
Js все как и выше - разбиваешь сплитом на массив и используешь.

Второй вариант: Отправлять связку «ключ-значение». Сейчас набросаю код.

void temp() {
  if (условие1) {
    ws.textAll("temperature1=" + String(temperature);
  }

  if (условие2) {
    ws.textAll("temperature2=" + String(temperature2);
  }
}

function onMessage(event) {
  var arrayS = event.data.split("=");
  switch (trim(arrayS[0])) {
    case 'temperature1':
      document.getElementById("temperature1").innerHTML = arrayS[1];
      break;
    case 'temperature2':
      document.getElementById("temperature2").innerHTML = arrayS[1];
      break;
    .....
    default:
      alert( 'Ни одно значение не совпало, бро ))' );                 // Это для тестирования
  }
}

Можно совместить (строка будет тогда вида "tem1=23&tem2=24&tem3=0"тогда сначала разбиваешь строку на связку ключ-значение через сплит '&', а потом сплитом '=' окончательно). Тут уж на что фантазии хватит.

Цитата:

для каждого значения добавить количество знаков

Вот это не понял зачем, но делается по аналогии описанными выше способами.

Сб, 16/04/2022 - 10:30

Adolf_Balalaykin

Offline

Зарегистрирован: 01.02.2021

От души Бум! Пришлось чуток подправить.

function onMessage(event) {
  var arrayS = event.data.split("=");
  switch (trim = arrayS[0]) {
    case 'temperature1': document.getElementById("temperature1").innerHTML = arrayS[1]; break 
    case 'temperature2': document.getElementById("temperature2").innerHTML = arrayS[1]; break
  }
}

Сб, 16/04/2022 - 11:48

BOOM

Offline

Зарегистрирован: 14.11.2018

Функция trim() тут не обязательна, я даже не знаю есть ли она в яваскрипте (я ее в php только использовал). А то, что ты написал - лишнее присвоение, лучше оставь просто switch (arrayS[0]) {

Сб, 23/04/2022 - 09:18

#10

Adolf_Balalaykin

Offline

Зарегистрирован: 01.02.2021

Бум, я опять туплю. Необходимо срастить два куска. Вот кусок старого кода, отправляющий состояние кнопок.

code

ws.textAll(String(ledState1));     // отправляем в js статус для кнопки №1
ws.textAll(String(ledState2 + 2)); // отправляем в js статус для кнопки №2

JavaScript

function onMessage(event) {
switch (event.data) {
   case '0': document.getElementById("state1").innerHTML = "OFF"; break // отправим на страницу статус OFF
   case '1': document.getElementById("state1").innerHTML = "ON"; break  // отправим на страницу статус ON
   case '2': document.getElementById("state2").innerHTML = "OFF"; break
   case '3': document.getElementById("state2").innerHTML = "ON"; break
   }
 }

Сращиваем с новым куском кода, отправляющий показания температуры.

code

ws.textAll("temperature1=" + String(temperature1)); // отправляем в js показания температуры 1
ws.textAll("temperature2=" + String(temperature2)); // отправляем в js показания температуры 2

JavaScript

function onMessage(event) {
var arrayS = event.data.split("=");
   switch (arrayS[0]) {
       case 'temperature1': document.getElementById("temperature1").innerHTML = arrayS[1]; break
       case 'temperature2': document.getElementById("temperature2").innerHTML = arrayS[1]; break
      }
   }

В итоге не сработало. В чем накосячил?

code

ws.textAll("0=" + String(ledState1));       // отправляем в js статус для кнопки №1
ws.textAll("2=" + String(ledState2));       // отправляем в js статус для кнопки №2
ws.textAll("temperature1=" + String(temperature1)); // отправляем в js показания температуры 1
ws.textAll("temperature2=" + String(temperature2)); // отправляем в js показания температуры 2

JavaScript

function onMessage(event) {
var arrayS = event.data.split("=");
   switch (arrayS[0]) {
      case 'temperature1': document.getElementById("temperature1").innerHTML = arrayS[1]; break
      case 'temperature2': document.getElementById("temperature2").innerHTML = arrayS[1]; break
      case '0': (document.getElementById("state1").innerHTML = "OFF") = arrayS[1]; break
      case '1': (document.getElementById("state1").innerHTML = "ON") = arrayS[1]; break
      case '2': (document.getElementById("state2").innerHTML = "OFF") = arrayS[1]; break
      case '3': (document.getElementById("state2").innerHTML = "ON") = arrayS[1]; break
      }
   }

Сб, 23/04/2022 - 09:27

#11

sadman41

Offline

Зарегистрирован: 19.10.2016

https://developer.mozilla.org/en-US/docs/Web/API/console/log

Сб, 23/04/2022 - 09:40

#12

BOOM

Offline

Зарегистрирован: 14.11.2018

Adolf_Balalaykin пишет:

Бум, я опять туплю.

ws.textAll("0=" + String(ledState1));       // отправляем в js статус для кнопки №1
ws.textAll("2=" + String(ledState2));       // отправляем в js статус для кнопки №2
ws.textAll("temperature1=" + String(temperature1)); // отправляем в js показания температуры 1
ws.textAll("temperature2=" + String(temperature2)); // отправляем в js показания температуры 2

Я же выше в этой теме писал - сначала собирай строку, потом отправляй ее целиком.

String ResultStr;

ResultStr = "button1=" + String(ledState1) + "&";           // статус для кнопки №1
ResultStr += "button2=" + String(ledState2) + "&";          // статус для кнопки №2
ResultStr += "temperature1=" + String(temperature1) + "&";  // показания температуры 1
ResultStr += "temperature2=" + String(temperature2));       // показания температуры 2
ws.textAll(ResultStr);                                      // Отправляем все на сервер

Как в JS эту строку разобрать выше обсуждалось, сам сможешь?

BOOM пишет:

Сб, 23/04/2022 - 12:04

#13

Adolf_Balalaykin

Offline

Зарегистрирован: 01.02.2021

Adolf_Balalaykin пишет:

void temp() {
if (условие1)
  {
  ws.textAll(String(temperature);
  }

if (условие2)
  {
  ws.textAll(String(temperature2);
  }
}

Из за того что отправка идет из разных блоков, в результирующую строку собирать нет смысла. Правильная отправка полагаю так?

void temp() {
  if (условие1) {  // температура 1
    ws.textAll("temperature1=" + String(temperature1));
  }

  if (условие2) {  .. температура 2
    ws.textAll("temperature2=" + String(temperature2));
  }

  if (условие3) {  // кнопка 1 нажата
    ws.textAll("botton1=" + String(ledState1);
}
  if (условие4) {  // кнопка 2 нажата
    ws.textAll("botton2=" +  String(ledState2 + 2));
}

Далее разбираем в джаве

function onMessage(event) {
   var arrayS = event.data.split("=");
       switch (arrayS[0]) {
	   case 'temperature1': document.getElementById("time1").innerHTML = arrayS[1]; break
	   case 'temperature2': document.getElementById("time2").innerHTML = arrayS[1]; break
 // вот тут дальше не понятно как кнопки разобрать
 }
}

Сб, 23/04/2022 - 12:18

#14

ЕвгенийП

Offline

Зарегистрирован: 25.05.2015

Adolf_Balalaykin пишет:

Правильная отправка полагаю так?

void temp() {
  if (условие1) {  // температура 1
    ws.textAll("temperature1=" + String(temperature1));
  }

  if (условие2) {  .. температура 2
    ws.textAll("temperature2=" + String(temperature2));
  }

  if (условие3) {  // кнопка 1 нажата
    ws.textAll("botton1=" + String(ledState1);
}
  if (условие4) {  // кнопка 2 нажата
    ws.textAll("botton2=" +  String(ledState2 + 2));
}

Нет, конечно. А разделители где? Как Вы намерены потом значения от названия следующего параметра отделять?

Adolf_Balalaykin пишет:

Далее разбираем в джаве

А Java то здесь откуда взялась?

Adolf_Balalaykin пишет:

function onMessage(event) {
   var arrayS = event.data.split("=");
       switch (arrayS[0]) {
	   case 'temperature1': document.getElementById("time1").innerHTML = arrayS[1]; break
	   case 'temperature2': document.getElementById("time2").innerHTML = arrayS[1]; break
 // вот тут дальше не понятно как кнопки разобрать
 }
}

См. выше насчёт слипшихся значений и названий параметров.

Вс, 24/04/2022 - 12:20

#15

BOOM

Offline

Зарегистрирован: 14.11.2018

ЕвгенийП пишет:

Нет, конечно. А разделители где? Как Вы намерены потом значения от названия следующего параметра отделять?

Евгений Петрович, тут я с Вами не соглашусь. Работа Web отличается от работы МК. Поэтому все там будет "нормуль": в один момент времени идет отправка только одной связки "ключ=значение", которая в JavaScript легко "разворачивается". И в следующий момент времени будет отправка уже другой связки "ключ=значение", поэтому нечему там "слипаться" )))

Arduino.ru

Регистрация новых пользователей и создание новых тем теперь только на новом форуме https://forum.arduino.ru

Передача данных на веб страницу