Вывод значения в web-браузере
Ср янв 02, 2019 22:13:07
Добрый вечер! Вывожу значение температуры с Ардуино через ESP8266 с прошивкой esp-link. Значение температуры выводится на на html страницу. Хотел с помощью разметки сделать знак градусов цельсия, в котором буква о в верхнем индексе и С.
Код страницы ниже:
Разобрался как сделать вывод градусов цельсия в разметке html:
Но не могу понять, как эту конструкцию добавить в строку вывода значения температуры.
В примере, с которым разбираюсь, знак Цельсия добавлен в код Ардуино в строку, которая передается на страницу html
Если кто-то подскажет как это возможно реализовать, буду рад. Спасибо за помощь.
Вот вид страницы в данный момент
Код страницы ниже:
- Код:
<!DOCTYPE html>
<html>
<meta name="refresh-rate" content="500" />
<div class="header">
<h1>Temperature measurement</h1>
</div>
<div class="content">
<p id="temp" align="center" style="font-size: 500%" />
</div>
</body></html>
Разобрался как сделать вывод градусов цельсия в разметке html:
- Код:
<sup> o </sup> C
Но не могу понять, как эту конструкцию добавить в строку вывода значения температуры.
В примере, с которым разбираюсь, знак Цельсия добавлен в код Ардуино в строку, которая передается на страницу html
- Код:
// вычисляем значение температуры
String t = floatToString(tempC);
t += " C";
webServer.setArgString(F("temp"), t.begin());
Если кто-то подскажет как это возможно реализовать, буду рад. Спасибо за помощь.
Вот вид страницы в данный момент
Re: Вывод значения в web-браузере
Ср янв 02, 2019 23:12:13
Чтобы вывести значок градуса, надо не "о" поднимать, а использовать спецсимвол.
° или °
Ну и втыкать их в строчку:
t += " C";
по идее как то так:
t += "°C";
Вероятно заработает.
° или °
Ну и втыкать их в строчку:
t += " C";
по идее как то так:
t += "°C";
Вероятно заработает.
Re: Вывод значения в web-браузере
Чт янв 03, 2019 06:48:00
Спасибо, оно самое, работает.
А так для общего развития, не подскажете,если необходимо в тоже строке, где я вывожу значение температуры со знаком градусов вывести еще поясняющий текст. Как его правильно добавить в html код
Вот в этот блок
<div class="content">
<p id="temp" align="center" style="font-size: 500%" />
</div>
Я только учу html, потому не понятно.
А так для общего развития, не подскажете,если необходимо в тоже строке, где я вывожу значение температуры со знаком градусов вывести еще поясняющий текст. Как его правильно добавить в html код
Вот в этот блок
<div class="content">
<p id="temp" align="center" style="font-size: 500%" />
</div>
Я только учу html, потому не понятно.
Re: Вывод значения в web-браузере
Чт янв 03, 2019 09:12:10
Смотря что требуется добавить.
И опять же, учебников и уроков по HTML в сети море. Ничего сложного там нет.
И опять же, учебников и уроков по HTML в сети море. Ничего сложного там нет.
Re: Вывод значения в web-браузере
Чт янв 03, 2019 14:33:35
Да согласен с Вами, литературы много. Скачал много книг , да и в онлайне на сайтах много информации. Но интересует, допустим как перед значением температуры вывести поясняющую надпись.
пытался вклинить в блок со строкой
Но видимо, что-то делал не так.
Если не сложно, подскажите как сделать так:
А дальше уже буду разбираться, что к чему.
ЗЫ: Также насколько правильно было добавить обозначение градуса и символ С в строку со значением температуры в Ардуино, а не просто передавать строку с температурой?
пытался вклинить в блок со строкой
- Код:
<div class="content">
<p id="temp" align="center" style="font-size: 500%" />
</div>
Но видимо, что-то делал не так.
Если не сложно, подскажите как сделать так:
А дальше уже буду разбираться, что к чему.
ЗЫ: Также насколько правильно было добавить обозначение градуса и символ С в строку со значением температуры в Ардуино, а не просто передавать строку с температурой?
Re: Вывод значения в web-браузере
Чт янв 03, 2019 20:38:16
Тег <p> требует и закрывающий тег </p> у вас не увидел. Поэтому включил символ в строку вывода ардуино.
Приведите код шаблона, то что вы привели явно обрубок.
Без шаблона, только на вывод, вместо изначальных 3 строк:
String t = "В комнате: " + floatToString(tempC) + "°C";
webServer.setArgString(F("temp"), t.begin());
Но не уверен что он отобразит кириллицу. Нужно явно указывать кодировку страницы, и вставлять кириллицу в правильном редакторе, в соответствующей кодировке.
Приведите код шаблона, то что вы привели явно обрубок.
Без шаблона, только на вывод, вместо изначальных 3 строк:
String t = "В комнате: " + floatToString(tempC) + "°C";
webServer.setArgString(F("temp"), t.begin());
Но не уверен что он отобразит кириллицу. Нужно явно указывать кодировку страницы, и вставлять кириллицу в правильном редакторе, в соответствующей кодировке.
Re: Вывод значения в web-браузере
Чт янв 03, 2019 23:14:46
Добрый вечер!
Дело в том, что конструкция
выводит значение температуры, которую измеряет Ардуино. Когда я изменил эту строку в вид
Пропало значение отображаемой температуры с web-страницы
Я искал по интернету, но не нашел в каком случае используется закрывающая скобка в верхней строке, а в каком случае в нижней строке.
Вот код страницы, выводящей температуру
#include <ELClientWebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
float tempC = 0; // измеренная температура
// сигнальный провод подключен к 10 пину на Arduino
#define ONE_WIRE_BUS 10
// выберем разрешение от 9 до 12
#define TEMPERATURE_PRECISION 12
// настроим библиотеку 1-Wire для связи с датчиком
OneWire oneWire(ONE_WIRE_BUS);
// создадим объект для работы с библиотекой DallasTemperature
DallasTemperature sensors(&oneWire);
// создаем массив для хранения адреса датчика
DeviceAddress Thermometer;
// цикл измерения температуры
void tempLoop()
{
// отправляем запрос на измерение температуры
sensors.requestTemperatures();
// присваиваем переменной tempC текущее значение температуры в градусах Цельсия
tempC = sensors.getTempC(Thermometer);
}
// sprintf %f не поддерживается в Arduino...
String floatToString(float f)
{
int16_t intg = (int16_t)(f * 100.f);
int16_t int_part = intg / 100;
int16_t fract_part = intg % 100;
char buf[20];
sprintf(buf, "%d.%02d", int_part, fract_part);
return String(buf);
}
String arrayToString(byte array[])
{
unsigned int len = 8;
char buf[20];
for (unsigned int i = 0; i < len; i++)
{
byte nib1 = (array[i] >> 4) & 0x0F;
byte nib2 = (array[i] >> 0) & 0x0F;
buf[i*2+0] = nib1 < 0xA ? '0' + nib1 : 'A' + nib1 - 0xA;
buf[i*2+1] = nib2 < 0xA ? '0' + nib2 : 'A' + nib2 - 0xA;
}
buf[len*2] = '\0';
return String(buf);
}
void tempRefreshCb(char * url)
{
// вычисляем значение температуры
String t = floatToString(tempC);
t += " °C";
webServer.setArgString(F("temp"), t.begin());
String a = arrayToString(Thermometer);
webServer.setArgString(F("address"), a.begin());
}
// настройка страницы
void tempInit()
{
// инициализируем работу с датчиком
sensors.begin();
// сделаем запрос на получение адреса датчика
sensors.getAddress(Thermometer, 0);
// установим выбранное разрешение датчика
sensors.setResolution(Thermometer, TEMPERATURE_PRECISION);
URLHandler *tempHandler = webServer.createURLHandler(F("/Temp.html.json"));
tempHandler->loadCb.attach(tempRefreshCb);
tempHandler->refreshCb.attach(tempRefreshCb);
}
ЗЫ: вот код страницы, интересует как средствами HTML добавить текст в той же строке где и выводимые переменные, перед значением и после
Дело в том, что конструкция
- Код:
<p id="temp" align="center" style="font-size: 500%" />
выводит значение температуры, которую измеряет Ардуино. Когда я изменил эту строку в вид
- Код:
<p> id="temp" align="center" style="font-size: 500%" </p>
Пропало значение отображаемой температуры с web-страницы
Я искал по интернету, но не нашел в каком случае используется закрывающая скобка в верхней строке, а в каком случае в нижней строке.
Вот код страницы, выводящей температуру
Спойлер
// подключим необходимые библиотеки#include <ELClientWebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
float tempC = 0; // измеренная температура
// сигнальный провод подключен к 10 пину на Arduino
#define ONE_WIRE_BUS 10
// выберем разрешение от 9 до 12
#define TEMPERATURE_PRECISION 12
// настроим библиотеку 1-Wire для связи с датчиком
OneWire oneWire(ONE_WIRE_BUS);
// создадим объект для работы с библиотекой DallasTemperature
DallasTemperature sensors(&oneWire);
// создаем массив для хранения адреса датчика
DeviceAddress Thermometer;
// цикл измерения температуры
void tempLoop()
{
// отправляем запрос на измерение температуры
sensors.requestTemperatures();
// присваиваем переменной tempC текущее значение температуры в градусах Цельсия
tempC = sensors.getTempC(Thermometer);
}
// sprintf %f не поддерживается в Arduino...
String floatToString(float f)
{
int16_t intg = (int16_t)(f * 100.f);
int16_t int_part = intg / 100;
int16_t fract_part = intg % 100;
char buf[20];
sprintf(buf, "%d.%02d", int_part, fract_part);
return String(buf);
}
String arrayToString(byte array[])
{
unsigned int len = 8;
char buf[20];
for (unsigned int i = 0; i < len; i++)
{
byte nib1 = (array[i] >> 4) & 0x0F;
byte nib2 = (array[i] >> 0) & 0x0F;
buf[i*2+0] = nib1 < 0xA ? '0' + nib1 : 'A' + nib1 - 0xA;
buf[i*2+1] = nib2 < 0xA ? '0' + nib2 : 'A' + nib2 - 0xA;
}
buf[len*2] = '\0';
return String(buf);
}
void tempRefreshCb(char * url)
{
// вычисляем значение температуры
String t = floatToString(tempC);
t += " °C";
webServer.setArgString(F("temp"), t.begin());
String a = arrayToString(Thermometer);
webServer.setArgString(F("address"), a.begin());
}
// настройка страницы
void tempInit()
{
// инициализируем работу с датчиком
sensors.begin();
// сделаем запрос на получение адреса датчика
sensors.getAddress(Thermometer, 0);
// установим выбранное разрешение датчика
sensors.setResolution(Thermometer, TEMPERATURE_PRECISION);
URLHandler *tempHandler = webServer.createURLHandler(F("/Temp.html.json"));
tempHandler->loadCb.attach(tempRefreshCb);
tempHandler->refreshCb.attach(tempRefreshCb);
}
ЗЫ: вот код страницы, интересует как средствами HTML добавить текст в той же строке где и выводимые переменные, перед значением и после
Re: Вывод значения в web-браузере
Пн янв 07, 2019 17:37:31
Верни html конструкцию в вид когда всё работало, она тебе не нужна.
В строке
Что-бы перед температурой вывести надпись, то нужно её передать в переменную t до передачи в неё значения температуры.
Как тебе написал AndTer, замени свой код на следующий:
Для прощего понимания можно записать по другому?
В строке
- Код:
webServer.setArgString(F("temp"), t.begin());
Что-бы перед температурой вывести надпись, то нужно её передать в переменную t до передачи в неё значения температуры.
Как тебе написал AndTer, замени свой код на следующий:
- Код:
// То что было
String t = floatToString(tempC);
t += " °C";
// То что должно быть
String t = "В комнате: " + floatToString(tempC) + "°C";
Для прощего понимания можно записать по другому?
- Код:
String t; // объявление переменной t
t = "В комнате: "; // присвоение начального текста
t += floatToString(tempC); // присвоение значения
t += "°C"; // присвоение окончания
Re: Вывод значения в web-браузере
Чт янв 10, 2019 06:53:42
Я понял, в html это сделать трудновато. А не подскажете, что это за конструкция
<p id="temp" align="center" style="font-size: 500%" />
искал по html справочникам, но нигде похожего синтаксиса не нашел.
<p id="temp" align="center" style="font-size: 500%" />
искал по html справочникам, но нигде похожего синтаксиса не нашел.
Re: Вывод значения в web-браузере
Чт янв 10, 2019 10:18:42
p это тег абзаца http://htmlbook.ru/html/p
в Вашем случае применяется с закрывающим тегом по упрошенной записи <p /> вместо <p> </p>
style="font-size: 500%" это Встроенные стили. задает размер шрифта
align="center" это атрибут тега, задает выравнивание
id="temp" также атрибут. ID. может применяться для присвоения стилей или для идентификации объекта Java Script`ом для определенных с ним действий. например для динамического заполнения содержимым
как то так
добавить текст можно в HTML шаблоне через CSS
решение, конечно через жопу
в Вашем случае применяется с закрывающим тегом по упрошенной записи <p /> вместо <p> </p>
style="font-size: 500%" это Встроенные стили. задает размер шрифта
align="center" это атрибут тега, задает выравнивание
id="temp" также атрибут. ID. может применяться для присвоения стилей или для идентификации объекта Java Script`ом для определенных с ним действий. например для динамического заполнения содержимым
как то так
добавить текст можно в HTML шаблоне через CSS
- Код:
<style>
#temp::before{
content: "Пример текста до";
color: red;
}
#temp::after{
content: " Пример текста после";
color: green;
}
</style>
решение, конечно через жопу
Последний раз редактировалось khomych Чт янв 10, 2019 10:41:46, всего редактировалось 1 раз.
Re: Вывод значения в web-браузере
Чт янв 10, 2019 10:40:13
Что трудновато сделать в html? Html это всего лишь язык разметки страницы. Кстати, а зачем тебе арудино для работы с датчиком температуры, если ESP может напрямую работать с DS18b20?
Re: Вывод значения в web-браузере
Чт янв 10, 2019 10:51:39
- Код:
<p align="center" style="font-size: 500%">Текст до <span id="temp"></span>Текст после</p>
в конструкцию
- Код:
<span id="temp"></span>
Re: Вывод значения в web-браузере
Вт янв 22, 2019 16:10:03
khomych, спасибо. Оно самое. Все работает как нужно было.