Работа с Basic Table (Json)

Вопросы и инфо о ioBroker.vis
Antworten
evgeny_nd
starter
Beiträge: 51
Registriert: 03.11.2016, 17:53

Работа с Basic Table (Json)

Beitrag von evgeny_nd » 22.09.2017, 01:31

Добрый день.
Можете объяснить принцип заполнения в VIS объекта Basic Table (Json)?
У меня есть значения температуры, которые считываются с датчиков и хранятся в Megadd.0.ХХХ
Хотел использовать этот элемент, но что-то не получилось разобраться как туда вставить эти данные.
Вручную в описании этого элемента в редакторе указать в описание колонок значения данных в виде Megadd.0.ХХХ указать нельзя.
Нужно указать ID таблицы, а где эту таблицу хранить (видимо в объектах Admin) и как ее заполнять (видимо скриптом из значений Меги), не совсем понятно.
Примеров по форуму (пошаговых) найти не смог.

andrey99986
professional
Beiträge: 202
Registriert: 24.08.2016, 11:12

Re: Работа с Basic Table (Json)

Beitrag von andrey99986 » 22.09.2017, 10:42

evgeny_nd hat geschrieben:Добрый день.
Можете объяснить принцип заполнения в VIS объекта Basic Table (Json)?
У меня есть значения температуры, которые считываются с датчиков и хранятся в Megadd.0.ХХХ
Хотел использовать этот элемент, но что-то не получилось разобраться как туда вставить эти данные.
Вручную в описании этого элемента в редакторе указать в описание колонок значения данных в виде Megadd.0.ХХХ указать нельзя.
Нужно указать ID таблицы, а где эту таблицу хранить (видимо в объектах Admin) и как ее заполнять (видимо скриптом из значений Меги), не совсем понятно.
Примеров по форуму (пошаговых) найти не смог.
Поработав с Basic Table (Json) быстро наткнулся на ограничение форматирования таблицы.
Поэтому загоняю данные как html-таблицу из БД в обычный объект в скриптах, а затем вставляю этот объект в элементе Basic HTML.
По количеству кода - почти одно и то же.
Дать пример с html table или непременно через json table надо?

evgeny_nd
starter
Beiträge: 51
Registriert: 03.11.2016, 17:53

Re: Работа с Basic Table (Json)

Beitrag von evgeny_nd » 22.09.2017, 13:56

Spoiler: Show hidden text
andrey99986 hat geschrieben:
evgeny_nd hat geschrieben:Добрый день.
Можете объяснить принцип заполнения в VIS объекта Basic Table (Json)?
У меня есть значения температуры, которые считываются с датчиков и хранятся в Megadd.0.ХХХ
Хотел использовать этот элемент, но что-то не получилось разобраться как туда вставить эти данные.
Вручную в описании этого элемента в редакторе указать в описание колонок значения данных в виде Megadd.0.ХХХ указать нельзя.
Нужно указать ID таблицы, а где эту таблицу хранить (видимо в объектах Admin) и как ее заполнять (видимо скриптом из значений Меги), не совсем понятно.
Примеров по форуму (пошаговых) найти не смог.
Поработав с Basic Table (Json) быстро наткнулся на ограничение форматирования таблицы.
Поэтому загоняю данные как html-таблицу из БД в обычный объект в скриптах, а затем вставляю этот объект в элементе Basic HTML.
По количеству кода - почти одно и то же.
Дать пример с html table или непременно через json table надо?[/quote]

Json не обязательно, главное чтобы меньшими временными затратами, но тот же результат.
Хотите сказать, что можно в скрипте сформировать каким-то образом таблицу и затем передать ее в интерфейс VIS?
Конечно надо пример :).

andrey99986
professional
Beiträge: 202
Registriert: 24.08.2016, 11:12

Re: Работа с Basic Table (Json)

Beitrag von andrey99986 » 22.09.2017, 16:52

Пример формирования таблицы из БД, подразумевая что включена запись состояний объектов ("megad.1.p11_Отополение_1_этаж" и "megad.1.p10_Отополение_2_этаж") в настройках.
Скрипт :

Code: Alles auswählen


createState("html_table");
createState('spisok_journal_period',1440);

if ( !Date.prototype.toMyString ) {
  ( function() {

    function pad(number) {
      var r = String(number);
      if ( r.length === 1 ) {
        r = '0' + r;
      }
      return r;
    }

    Date.prototype.toMyString = function() {
      return this.getUTCFullYear()
        + '-' + pad( this.getUTCMonth() + 1 )
        + '-' + pad( this.getUTCDate() )
        + ' ' + pad( this.getUTCHours() )
        + ':' + pad( this.getUTCMinutes() )
        + ':' + pad( this.getUTCSeconds() );
       // + '.' + String( (this.getUTCMilliseconds()/1000).toFixed(3) ).slice( 2, 5 )
       // + 'Z';
    };

  }() );
}


function table_climate(period){
sendTo('sql.0', 'query', 'SELECT id FROM iobroker.datapoints WHERE name="megad.1.p11_Отополение_1_этаж" or name="megad.1.p10_Отополение_2_этаж"', function (result) {
    if (result.error) {
        console.error(result.error);
    } else {
        var now = new Date();
        now.setMinutes(-period);
        sendTo('sql.0', 'query', 'SELECT a.id,a.ts,a.val, b.name FROM iobroker.ts_bool as a INNER JOIN  iobroker.datapoints as b ON a.id = b.id WHERE ts >= ' + now.getTime() + ' AND a.id in (SELECT id FROM iobroker.datapoints WHERE name="megad.1.p11_Отопление_1_этаж" or name="megad.1.p10_Отополение_2_этаж") order by a.ts desc' , function (result) {
            if (result.error) {
                console.error(result.error);
            } else {
            var obj = JSON.stringify(result.result);
            obj = JSON.parse(obj );    
            var obj_html = "\"<table  border=\\\"1\\\"   style=\\\"font: 12pt arial, sans-serif;\\\"width:100%;\\\"> <col width=\\\"750\\\"><col width=\\\"1500\\\"> <col width=\\\"500\\\">";
            var table_head ="<tr><td>Дата</td><td>Устройство</td><td>Значение</td></tr>";
            obj_html=obj_html+table_head;
             if (obj.length>0)
            {
            for(var i=0;i<obj.length;i++)
            {
                 var tr="<tr>";
                var tr2="</tr>";
                var myDate = new Date(obj[i]["ts"]);
                var event_date = myDate.toMyString();
                var td1="<td>"+event_date+"</td>";
                var objn = getObject (obj[i]["name"],'name'); 
                var id_name=objn.common.name;
                var td2="<td>"+id_name+"</td>";
                var value = '';
                if (obj[i]["val"]==1)
                   { value='Вкл';}
                if (obj[i]["val"]===0)
                   { value='Откл';}
                var td3="<td>"+value+"</td>";
                obj_html = obj_html + tr+td1+td2+td3+tr2;
            }
            }
            obj_html = obj_html +"</font></table>\"";
            setState("html_table",obj_html);
            }
        });
    }
});    
    
}



var period = getState("javascript.0.spisok_journal_period").val;
table_climate(period);
on({id: 'spisok_journal_period', change: 'any'}, function (objsp) {


var period = getState("javascript.0.spisok_journal_period").val;  
 table_climate(period);   
       
   });



Список для выбора временного периода (импортируй элемент в VIS):

Code: Alles auswählen

[{"tpl":"tplJquiSelectList","data":{"oid":"javascript.0.spisok_journal_period","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"values":"60;1440;10080;43200;525600","texts":"час;сутки;неделя;месяц;год","height":"144","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"open":false,"visibility-groups-action":"hide"},"style":{"left":"100px","top":"23px","width":"93px","height":"39px"},"widgetSet":"jqui"}]
Сама таблица создаётся в элементе basic -HTML:

Code: Alles auswählen

<div id="div1">
Таблица    
</div>
<script>
var obj = {javascript.0.html_table};
console.log(typeof obj);
document.getElementById("div1").innerHTML = obj;
</script>

Есть нюанс - после создания таблицы в vis- редакторе она как бы не видна после задания параметров (у меня прячется в верхний левый угол). Это нормально. В просмотре будет отображаться нормально. Для поиска этого элемента и редактирования в vis-редакторе надо обращаться к этому элементу через список в меню "Выбранный элемент".

evgeny_nd
starter
Beiträge: 51
Registriert: 03.11.2016, 17:53

Re: Работа с Basic Table (Json)

Beitrag von evgeny_nd » 23.09.2017, 16:27

andrey99986 hat geschrieben:Пример формирования таблицы из БД, подразумевая что включена запись состояний объектов ("megad.1.p11_Отополение_1_этаж" и "megad.1.p10_Отополение_2_этаж") в настройках.
Скрипт :
Spoiler: Show hidden text

Code: Alles auswählen


createState("html_table");
createState('spisok_journal_period',1440);

if ( !Date.prototype.toMyString ) {
  ( function() {

    function pad(number) {
      var r = String(number);
      if ( r.length === 1 ) {
        r = '0' + r;
      }
      return r;
    }

    Date.prototype.toMyString = function() {
      return this.getUTCFullYear()
        + '-' + pad( this.getUTCMonth() + 1 )
        + '-' + pad( this.getUTCDate() )
        + ' ' + pad( this.getUTCHours() )
        + ':' + pad( this.getUTCMinutes() )
        + ':' + pad( this.getUTCSeconds() );
       // + '.' + String( (this.getUTCMilliseconds()/1000).toFixed(3) ).slice( 2, 5 )
       // + 'Z';
    };

  }() );
}


function table_climate(period){
sendTo('sql.0', 'query', 'SELECT id FROM iobroker.datapoints WHERE name="megad.1.p11_Отополение_1_этаж" or name="megad.1.p10_Отополение_2_этаж"', function (result) {
    if (result.error) {
        console.error(result.error);
    } else {
        var now = new Date();
        now.setMinutes(-period);
        sendTo('sql.0', 'query', 'SELECT a.id,a.ts,a.val, b.name FROM iobroker.ts_bool as a INNER JOIN  iobroker.datapoints as b ON a.id = b.id WHERE ts >= ' + now.getTime() + ' AND a.id in (SELECT id FROM iobroker.datapoints WHERE name="megad.1.p11_Отопление_1_этаж" or name="megad.1.p10_Отополение_2_этаж") order by a.ts desc' , function (result) {
            if (result.error) {
                console.error(result.error);
            } else {
            var obj = JSON.stringify(result.result);
            obj = JSON.parse(obj );    
            var obj_html = "\"<table  border=\\\"1\\\"   style=\\\"font: 12pt arial, sans-serif;\\\"width:100%;\\\"> <col width=\\\"750\\\"><col width=\\\"1500\\\"> <col width=\\\"500\\\">";
            var table_head ="<tr><td>Дата</td><td>Устройство</td><td>Значение</td></tr>";
            obj_html=obj_html+table_head;
             if (obj.length>0)
            {
            for(var i=0;i<obj.length;i++)
            {
                 var tr="<tr>";
                var tr2="</tr>";
                var myDate = new Date(obj[i]["ts"]);
                var event_date = myDate.toMyString();
                var td1="<td>"+event_date+"</td>";
                var objn = getObject (obj[i]["name"],'name'); 
                var id_name=objn.common.name;
                var td2="<td>"+id_name+"</td>";
                var value = '';
                if (obj[i]["val"]==1)
                   { value='Вкл';}
                if (obj[i]["val"]===0)
                   { value='Откл';}
                var td3="<td>"+value+"</td>";
                obj_html = obj_html + tr+td1+td2+td3+tr2;
            }
            }
            obj_html = obj_html +"</font></table>\"";
            setState("html_table",obj_html);
            }
        });
    }
});    
    
}



var period = getState("javascript.0.spisok_journal_period").val;
table_climate(period);
on({id: 'spisok_journal_period', change: 'any'}, function (objsp) {


var period = getState("javascript.0.spisok_journal_period").val;  
 table_climate(period);   
       
   });



Список для выбора временного периода (импортируй элемент в VIS):

Code: Alles auswählen

[{"tpl":"tplJquiSelectList","data":{"oid":"javascript.0.spisok_journal_period","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"values":"60;1440;10080;43200;525600","texts":"час;сутки;неделя;месяц;год","height":"144","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"open":false,"visibility-groups-action":"hide"},"style":{"left":"100px","top":"23px","width":"93px","height":"39px"},"widgetSet":"jqui"}]
Сама таблица создаётся в элементе basic -HTML:

Code: Alles auswählen

<div id="div1">
Таблица    
</div>
<script>
var obj = {javascript.0.html_table};
console.log(typeof obj);
document.getElementById("div1").innerHTML = obj;
</script>

Есть нюанс - после создания таблицы в vis- редакторе она как бы не видна после задания параметров (у меня прячется в верхний левый угол). Это нормально. В просмотре будет отображаться нормально. Для поиска этого элемента и редактирования в vis-редакторе надо обращаться к этому элементу через список в меню "Выбранный элемент".
Спасибо. Скрипт пока разобрал голову сломал :).
После того как разобрался с вашим скриптом, нашел решение для элемента Json Table:

Code: Alles auswählen

createState("Баня_vis_table_of_temp");

schedule("*/1 * * * *", function () { // запускаем каждую минуту
    
var table_of_temp = [{"Помещение": "Прихожая", "Температура пола": getState("megadd.1.p30_B_Temp_Sens1").val + ' °C', "Температура воздуха": "n/a" + ' °C'}, 
                {"Помещение": "Туалет", "Температура пола": getState("megadd.1.p30_B_Temp_Sens1").val + ' °C', "Температура воздуха": getState("megadd.1.p34_Out_Pressure_Sens1").val + ' °C'},
                {"Помещение": "Комната отдыха", "Температура пола": getState("megadd.1.p31_B_Temp_Sens2").val + ' °C', "Температура воздуха": "n/a" + ' °C'},
                {"Помещение": "Мойка", "Температура пола": getState("megadd.1.p32_B_Temp_Sens3").val + ' °C', "Температура воздуха": "n/a" + ' °C'},
                {"Помещение": "Парилка", "Температура пола": getState("megadd.1.p33_B_Temp_Sens4").val + ' °C', "Температура воздуха": getState("megadd.2.p30_B_Temp_Sens5").val + ' °C'}]
    setState("Баня_vis_table_of_temp", JSON.stringify(table_of_temp));
});
Значения выходят, все получилось. Теперь не могу понять почему так "криво" выходит форматирование. Значения ширины столбцов указанные в настройках не изменяют внешнего вида таблицы. И получается что первые два столбца узкие, третий широкий...
Dateianhänge
Внешний вид таблицы.png
Внешний вид таблицы.png (8 KiB) 1174 mal betrachtet

andrey99986
professional
Beiträge: 202
Registriert: 24.08.2016, 11:12

Re: Работа с Basic Table (Json)

Beitrag von andrey99986 » 24.09.2017, 17:47

evgeny_nd hat geschrieben:
Значения выходят, все получилось. Теперь не могу понять почему так "криво" выходит форматирование. Значения ширины столбцов указанные в настройках не изменяют внешнего вида таблицы. И получается что первые два столбца узкие, третий широкий...
Так я ж написал - из-за ограничений возможности форматирования (или я просто не нашёл как это делается) перешёл на html-таблицу.

evgeny_nd
starter
Beiträge: 51
Registriert: 03.11.2016, 17:53

Re: Работа с Basic Table (Json)

Beitrag von evgeny_nd » 25.09.2017, 04:09

andrey99986 hat geschrieben:
evgeny_nd hat geschrieben:
Значения выходят, все получилось. Теперь не могу понять почему так "криво" выходит форматирование. Значения ширины столбцов указанные в настройках не изменяют внешнего вида таблицы. И получается что первые два столбца узкие, третий широкий...
Так я ж написал - из-за ограничений возможности форматирования (или я просто не нашёл как это делается) перешёл на html-таблицу.
Вот что я "раскопал": помогает установка знака процента после значения ширины колонки в настройках виджета, тогда таблица меняет внешний вид.
Dateianhänge
Безымянный.png
Безымянный.png (6.21 KiB) 1150 mal betrachtet

Antworten