MajorDoMo

Обсуждение проекта
https://mjdm.ru/forum/

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

https://mjdm.ru/forum/viewtopic.php?t=3168

Страница 18 из 39

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

Добавлено: Пт сен 15, 2017 8:15 am
serghei
Аналогично. Думаю, надо нарисовать всю сцену как её видим и css подгонять размеры и цвет.

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

Добавлено: Сб сен 30, 2017 10:06 pm
serghei
ser009 писал(а):Просто вывел кучу параметров на страничку. Информативно, но не красиво...
Продолжаю попытки приблизиться к картинке Alex, но пока не понимаю всего процесса.
Получил еще три цифры температуры, влажности и давления от датчика BME280. Отправить на страницу через Ажакс уже просто. Не получается вставить в прямоугольнички в панели всех значений. Что сделал: в сервере-ажакс отправил 5 новых цифр в браузер
SPOILERSPOILER_SHOW

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

    #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             
В скрипте задал цвет
SPOILERSPOILER_SHOW

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

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
SPOILERSPOILER_SHOW

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

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 тоже не понимаю как задать одну область для вывода цифр
SPOILERSPOILER_SHOW

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

            <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 параметров нет.
Ну и картинка
SPOILERSPOILER_SHOW
Dash_Due.jpg
Dash_Due.jpg (59.5 КБ) 5163 просмотра
Где я ошибся ?

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

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

Добавлено: Сб окт 07, 2017 5:12 pm
ser009
поужинаю посмотрю.
тоже хотел вывести данные в dash-панель

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

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

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

Добавлено: Сб окт 07, 2017 7:16 pm
ser009
Небольшое видео
Изменения
_dash.htm
SPOILERSPOILER_SHOW

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

<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
SPOILERSPOILER_SHOW

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

          // 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
SPOILERSPOILER_SHOW

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

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

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

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

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

Добавлено: Сб окт 07, 2017 7:47 pm
ser009
аналогично

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

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

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

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 добавить
SPOILERSPOILER_SHOW

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

          
              
                        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) { }
          
Теперь надо разобраться, как подкрашивать в зависимости от значения.

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

Добавлено: Вс окт 08, 2017 6:12 am
ser009
Изменение цвета
scripts.js
SPOILERSPOILER_SHOW

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

// 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;}}

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

Добавлено: Вс окт 08, 2017 12:02 pm
serghei
Это цвет модулей ( похоже синий ). Я вытащил в отдельный контейнер и могу задать любой цвет.Там есть "Case" - это что то типа переключателя ? - если до 20 С , то одним цветом , выше 20 до 30 другим и т. д. Надо как то добавить в скрипте...
Часовой пояс: UTC+03:00
Страница 18 из 39

Создано на основе phpBB® Forum Software © phpBB Limited

Русская поддержка phpBB