Вывод значения в web-браузере

melandr

Добрый вечер! Вывожу значение температуры с Ардуино через ESP8266 с прошивкой esp-link. Значение температуры выводится на на 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());

Если кто-то подскажет как это возможно реализовать, буду рад. Спасибо за помощь.
Вот вид страницы в данный момент

Реклама

AndTer

Чтобы вывести значок градуса, надо не "о" поднимать, а использовать спецсимвол.
° или °
Ну и втыкать их в строчку:
t += " C";
по идее как то так:
t += "°C";
Вероятно заработает.

Реклама

melandr

Спасибо, оно самое, работает.

А так для общего развития, не подскажете,если необходимо в тоже строке, где я вывожу значение температуры со знаком градусов вывести еще поясняющий текст. Как его правильно добавить в html код
Вот в этот блок
<div class="content">
<p id="temp" align="center" style="font-size: 500%" />
</div>
Я только учу html, потому не понятно.

AndTer

Смотря что требуется добавить.
И опять же, учебников и уроков по HTML в сети море. Ничего сложного там нет.

Реклама

melandr

Да согласен с Вами, литературы много. Скачал много книг , да и в онлайне на сайтах много информации. Но интересует, допустим как перед значением температуры вывести поясняющую надпись.
пытался вклинить в блок со строкой

Код: Выделить всё

  <div class="content">
    <p id="temp" align="center" style="font-size: 500%" />
  </div>

Но видимо, что-то делал не так.
Если не сложно, подскажите как сделать так:

А дальше уже буду разбираться, что к чему.
ЗЫ: Также насколько правильно было добавить обозначение градуса и символ С в строку со значением температуры в Ардуино, а не просто передавать строку с температурой?

Реклама

AndTer

Тег <p> требует и закрывающий тег </p> у вас не увидел. Поэтому включил символ в строку вывода ардуино.
Приведите код шаблона, то что вы привели явно обрубок.

Без шаблона, только на вывод, вместо изначальных 3 строк:

String t = "В комнате: " + floatToString(tempC) + "°C";
webServer.setArgString(F("temp"), t.begin());

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

Реклама

melandr

Добрый вечер!
Дело в том, что конструкция

Код: Выделить всё

    <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 >> 4) & 0x0F;
byte nib2 = (array >> 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 добавить текст в той же строке где и выводимые переменные, перед значением и после

radteh

Верни html конструкцию в вид когда всё работало, она тебе не нужна.
В строке

Код: Выделить всё

webServer.setArgString(F("temp"), t.begin());

temp - это метка куда нужно вписать данные, а t - что нужно записать.
Что-бы перед температурой вывести надпись, то нужно её передать в переменную t до передачи в неё значения температуры.
Как тебе написал AndTer, замени свой код на следующий:

Код: Выделить всё

// То что было
String t = floatToString(tempC);
t += " °C";

// То что должно быть
String t = "В комнате: " + floatToString(tempC) + "°C";

Для прощего понимания можно записать по другому?

Код: Выделить всё

String t; // объявление переменной t
t = "В комнате: "; // присвоение начального текста
t += floatToString(tempC); // присвоение значения
t += "°C"; // присвоение окончания

melandr

Я понял, в html это сделать трудновато. А не подскажете, что это за конструкция
<p id="temp" align="center" style="font-size: 500%" />
искал по html справочникам, но нигде похожего синтаксиса не нашел.

khomych

p это тег абзаца http://htmlbook.ru/html/p

в Вашем случае применяется с закрывающим тегом по упрошенной записи <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>

решение, конечно через жопу

radteh

Что трудновато сделать в html? Html это всего лишь язык разметки страницы. Кстати, а зачем тебе арудино для работы с датчиком температуры, если ESP может напрямую работать с DS18b20?

khomych

Код: Выделить всё

<p align="center" style="font-size: 500%">Текст до <span  id="temp"></span>Текст после</p>

в конструкцию

Код: Выделить всё

<span  id="temp"></span>

будет подставляться температура

melandr

khomych, спасибо. Оно самое. Все работает как нужно было.