визуализация данных

[serghei]

Аналогично. Думаю, надо нарисовать всю сцену как её видим и css подгонять размеры и цвет.

[serghei]

Просто вывел кучу параметров на страничку. Информативно, но не красиво...

Продолжаю попытки приблизиться к картинке Alex, но пока не понимаю всего процесса.
Получил еще три цифры температуры, влажности и давления от датчика BME280. Отправить на страницу через Ажакс уже просто. Не получается вставить в прямоугольнички в панели всех значений. Что сделал: в сервере-ажакс отправил 5 новых цифр в браузер

СпойлерПоказать

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

    #ifdef DHT_FEATURE
     s += makeTag("humDHT", "", String(dht.readHumidity(), 1));

     s += makeTag("humDHTd", "", String(dht.readHumidity(), 1));

     s += makeTag("tempDHT", "", String(dht.readTemperature(), 1));

     s += makeTag("tempDHTd", "", String(dht.readTemperature(), 1));
    #endif

     #ifdef BME_FEATURE

     // s += makeBmes();
      
     s += makeTag("humBME", "", String(hum,1));

     s += makeTag("tempBME", "", String(temp,1));

     s += makeTag("presBME", "", String(pres,1));
    #endif             

В скрипте задал цвет

СпойлерПоказать

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

function humDHTdBackground          (state) {switch (state) { default: return "#04A9AE"; break;}}
function humDHTdColor              (state) {switch (state) {case "0": return "#aaaaaa"; break; case "1": return "#555555"; break; default: return "#aaaaaa"; break;}}

function tempDHTdBackground        (state) {switch (state) { default: return "#FAEBD7"; break;}}
function tempDHTdColor              (state) {switch (state) {case "0": return "#ffffff"; break; case "1": return "#555555"; break; default: return "#aaaaaa"; break;}}

function humBMEBackground         (state) {switch (state) { default: return "#FAEBD7"; break;}}
function humBMEColor              (state) {switch (state) {case "0": return "#555555    "; break; case "1": return "#555555    "; break; default: return "#aaaaaa"; break;}}

function tempBMEBackground         (state) {switch (state) { default: return "#FAEBD7"; break;}}
function tempBMEColor              (state) {switch (state) {case "0": return "#555555    "; break; case "1": return "#555555    "; break; default: return "#aaaaaa"; break;}}

function presBMEBackground         (state) {switch (state) { default: return "#FAEBD7"; break;}}
function presBMEColor              (state) {switch (state) {case "0": return "#555555    "; break; case "1": return "#555555    "; break; default: return "#aaaaaa"; break;}}

И самое главное в Dash.js

СпойлерПоказать

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

var humDHTdName = ["hDHTd"];
var humDHTdXml  = ["humDHTd"];
var humDHTdId   = ["dash-hDHTd"];

/*
var tempDHTdName = ["tDHTd"];                           // Тут не получается понять (
var tempDHTdXml  = ["tempDHTd"];
var tempDHTdId   = ["dash-tDHTd"];
*/
var BMEName     = ["BMEd"];
var BMEXml      = ["humBMEd"];
var BMEId       = ["dash-BMEd"]; 
============================
              
             //======================================================================================= 
          
              
                        try {
            var humDHTd = this.responseXML.getElementsByTagName('humDHTd')[0].childNodes[0].nodeValue;
          } catch (err) {
              humDHTd = '99';
            }
          try {
            document.getElementById("dash-hDHTd").innerHTML      = humDHTd;
            document.getElementById("dash-hDHTd-hide").innerHTML = humDHTd;
          } catch (err) {

            }
            
                      try {
           // document.getElementById('esp').innerHTML = 'ESP';
            document.getElementById("dash-hDHTd").style.background = humDHTdBackground(humDHTd) ;
            document.getElementById("dash-hDHTd").style.color      = humDHTdColor(humDHTd);     
          } catch (err) { }
          
         
         //==================================================================    

        /* 
                        try {
            var tempDHTd = this.responseXML.getElementsByTagName('tempDHTd')[0].childNodes[0].nodeValue;
          } catch (err) {
              tempDHTd = '99';
            }
          try {
            document.getElementById("dash-tDHTd").innerHTML      = tempDHTd;
            document.getElementById("dash-tDHTd-hide").innerHTML = tempDHTd;
          } catch (err) { }
            
                      try {
            document.getElementById("dash-tDHTd").style.background = tempDHTdBackground(tempDHTd) ;
            document.getElementById("dash-tDHTd").style.color      = tempDHTdColor(tempDHTd);     
          } catch (err) { }
          
          
           
            //==================================================================
        
            */
            
                          
                        try {
            var humBMEd = this.responseXML.getElementsByTagName('humBME')[0].childNodes[0].nodeValue;
          } catch (err) {
              humBMEd = '92';
            }
          try {
            document.getElementById("dash-hBMEd").innerHTML = humBMEd;
            document.getElementById("dash-hBMEd-hide").innerHTML = humBMEd;
          } catch (err) {

            }
            
            
                      try {
            document.getElementById("dash-hBMEd").style.background = humBMEBackground(humBMEd) ;
            document.getElementById("dash-hBMEd").style.color = humBMEColor(humBMEd);   


  
          } catch (err) { }

И в Dash.htm тоже не понимаю как задать одну область для вывода цифр

СпойлерПоказать

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

            <p><span class="button-value" id="dash-hDHTd" title="Влажность DHT">...</span> <span class="button-value" id="dash-tDHTd" title="Температура DHT">...</span></p> 
            <p><span class="button-value" id="dash-hBMEd" title="Влажность BME">...</span> <span class="button-value" id="dash-tBMEd" title="Температура BME">...</span> <span class="button-value" id="dash-pBMEd" title="Давление BME">...</span></p> 

То есть две влажности с датчиков вывести получилось, а все 5 параметров нет.
Ну и картинка

СпойлерПоказать

Dash_Due.jpg (59.5 КБ) 4663 просмотра

Где я ошибся ?

*** Сообщение запрещено. Сообщение похоже на спам. ***

[ser009]

поужинаю посмотрю.
тоже хотел вывести данные в dash-панель

[serghei]

Вот так и живем - я сейчас то же стенку до штукатурю , повешу батарею на место , прицеплю даллас к радиатору а в перерыве запрограммируем даш-панель..... ( Простите за офф-топ)
За основу кода взял вывод разными цветами состояние партнера ( ESP) в дистрибутиве для платы RobotDyn (Я её купил . Там к ESP все таки прикрутили 4 метра памяти - шикарно получилось).
Так вот одно значение вставить легко. А DHT передает 2 значения , а BME вообще три.И я не пойму как их воткнуть в скрипт , да еще разными цветами в зависимости от значения.

[ser009]

Небольшое видео
Изменения
_dash.htm

СпойлерПоказать

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

<p><span class="button-value" id="dash-cont1">...</span> <span class="button-value" id="dash-cont2">...</span> <span class="button-value" id="dash-tempBMP" title="Температура BMP">...</span></p> 

_dash.js

СпойлерПоказать

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

          // Temperature BMP180
          try {
            var tempBMP = this.responseXML.getElementsByTagName('tempBMP')[0].childNodes[0].nodeValue;
          } catch (err) {
              tempBMP = "-";
            }
          try {
            document.getElementById("dash-tempBMP").innerHTML = tempBMP;
          } catch (err) { }
 

server_ajax.ino

СпойлерПоказать

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

void responseDash(EthernetClient cl)
...
    s += makeTag("tempBMP", "", String(bmp180temp));
...

[serghei]

За видео отдельное спасибо , но это только начало. Цвет я добавил для двух датчиков ( двух влажностей). Проблема вывести остальные значения.
PS А видео уроки собери в одну кучу как с МД - очень полезная штука!
Проверить смогу только через 4 часа ....

[ser009]

аналогично

[serghei]

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

СпойлерПоказать

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

function humDHTdBackground          (state) {switch (state) { default: return "#04A9AE"; break;}}
function humDHTdColor              (state) {switch (state) {case "0": return "#aaaaaa"; break; case "1": return "#555555"; break; default: return "#aaaaaa"; break;}}

function tempDHTdBackground        (state) {switch (state) { default: return "#04A9AE"; break;}}
function tempDHTdColor              (state) {switch (state) {case "0": return "#ffffff"; break; case "1": return "#555555"; break; default: return "#aaaaaa"; break;}}

и в _dash.js добавить

СпойлерПоказать

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

          
              
                        try {
            var humDHTd = this.responseXML.getElementsByTagName('humDHTd')[0].childNodes[0].nodeValue;
          } catch (err) {
              humDHTd = '99';
            }
          try {
            document.getElementById("dash-hDHTd").innerHTML      = humDHTd;
            document.getElementById("dash-hDHTd-hide").innerHTML = humDHTd;
          } catch (err) {

            }
            
                      try {
           
            document.getElementById("dash-hDHTd").style.background = humDHTdBackground(humDHTd) ;
            document.getElementById("dash-hDHTd").style.color      = humDHTdColor(humDHTd);     
          } catch (err) { }
          

Теперь надо разобраться, как подкрашивать в зависимости от значения.

[ser009]

Изменение цвета
scripts.js

СпойлерПоказать

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

// Data colors

var modulDisable = "#555555";
var modulPassive = "#887711";
var modulActive  = "#1188dd";

function modulBackground       (state) {switch (state) {case "0": return modulPassive; break; case "1": return modulActive; break; default: return modulDisable; break;}}
function modulColor            (state) {switch (state) {case "0": return "#eeeeee"; break; case "1": return "#ffffff"; break; default: return "#aaaaaa"; break;}}

[serghei]

Это цвет модулей ( похоже синий ). Я вытащил в отдельный контейнер и могу задать любой цвет.Там есть "Case" - это что то типа переключателя ? - если до 20 С , то одним цветом , выше 20 до 30 другим и т. д. Надо как то добавить в скрипте...