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

evgeny_nd

Добрый день.

Можете объяснить принцип заполнения в VIS объекта Basic Table (Json)?

У меня есть значения температуры, которые считываются с датчиков и хранятся в Megadd.0.ХХХ

Хотел использовать этот элемент, но что-то не получилось разобраться как туда вставить эти данные.

Вручную в описании этого элемента в редакторе указать в описание колонок значения данных в виде Megadd.0.ХХХ указать нельзя.

Нужно указать ID таблицы, а где эту таблицу хранить (видимо в объектах Admin) и как ее заполнять (видимо скриптом из значений Меги), не совсем понятно.

Примеров по форуму (пошаговых) найти не смог.

andrey99986

~~@evgeny_nd:~~

Добрый день.

Можете объяснить принцип заполнения в VIS объекта Basic Table (Json)?

У меня есть значения температуры, которые считываются с датчиков и хранятся в Megadd.0.ХХХ

Хотел использовать этот элемент, но что-то не получилось разобраться как туда вставить эти данные.

Вручную в описании этого элемента в редакторе указать в описание колонок значения данных в виде Megadd.0.ХХХ указать нельзя.

Нужно указать ID таблицы, а где эту таблицу хранить (видимо в объектах Admin) и как ее заполнять (видимо скриптом из значений Меги), не совсем понятно.

Примеров по форуму (пошаговых) найти не смог. `

Поработав с Basic Table (Json) быстро наткнулся на ограничение форматирования таблицы.

Поэтому загоняю данные как html-таблицу из БД в обычный объект в скриптах, а затем вставляю этот объект в элементе Basic HTML.

По количеству кода - почти одно и то же.

Дать пример с html table или непременно через json table надо?

evgeny_nd

! ~~@andrey99986:~~
! > ~~@evgeny_nd:~~

Добрый день.

Можете объяснить принцип заполнения в VIS объекта Basic Table (Json)?

У меня есть значения температуры, которые считываются с датчиков и хранятся в Megadd.0.ХХХ

Хотел использовать этот элемент, но что-то не получилось разобраться как туда вставить эти данные.

Вручную в описании этого элемента в редакторе указать в описание колонок значения данных в виде Megadd.0.ХХХ указать нельзя.

Нужно указать ID таблицы, а где эту таблицу хранить (видимо в объектах Admin) и как ее заполнять (видимо скриптом из значений Меги), не совсем понятно.

Примеров по форуму (пошаговых) найти не смог. `

Поработав с Basic Table (Json) быстро наткнулся на ограничение форматирования таблицы.

Поэтому загоняю данные как html-таблицу из БД в обычный объект в скриптах, а затем вставляю этот объект в элементе Basic HTML.

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

andrey99986

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

Скрипт :

 `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 = "\"";
            var table_head ="";
            obj_html=obj_html+table_head;
             if (obj.length>0)
            {
            for(var i=0;i<obj.length;i++) {/var/tr="<tr>" ;/tr2="</tr>" mydate="new" date(obj[i]["ts"]);/event_date="myDate.toMyString();" td1="<td>" +event_date+"</td="">";
                var objn = getObject (obj[i]["name"],'name'); 
                var id_name=objn.common.name;
                var td2="</obj.length;i++)>";
                var value = '';
                if (obj[i]["val"]==1)
                   { value='Вкл';}
                if (obj[i]["val"]===0)
                   { value='Откл';}
                var td3="";
                obj_html = obj_html + tr+td1+td2+td3+tr2;
            }
            }
            obj_html = obj_html +"

 <colgroup><col width="\\\&quot;750\\\&quot;"><col width="\\\&quot;1500\\\&quot;"> <col width="\\\&quot;500\\\&quot;"></colgroup>
| Дата | Устройство | Значение |
| "+id_name+" | "+value+" |

\"";
            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]~~[{"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"}]
[/code]`

Сама таблица создаётся в элементе basic -HTML:
`~~[code]~~
Таблица    

[/code]`

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

evgeny_nd

~~@andrey99986:~~

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

Скрипт :

! ```
`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 = """;
var table_head ="";
obj_html=obj_html+table_head;
if (obj.length>0)
{
for(var i=0;i<obj.length;i++) {/var/tr="<tr>" ;/tr2="</tr>" mydate="new" date(obj[i]["ts"]);/event_date="myDate.toMyString();" td1="<td>" +event_date+"</td="">";
var objn = getObject (obj[i]["name"],'name');
var id_name=objn.common.name;
var td2="</obj.length;i++)>";
var value = '';
if (obj[i]["val"]==1)
{ value='Вкл';}
if (obj[i]["val"]===0)
{ value='Откл';}
var td3="";
obj_html = obj_html + tr+td1+td2+td3+tr2;
}
}
obj_html = obj_html +"
! <colgroup><col width="\"750\""><col width="\"1500\""> <col width="\"500\""></colgroup>
| Дата | Устройство | Значение |
| "+id_name+" | "+value+" |
! "";
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]~~[{"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"}] [/code]
! Сама таблица создаётся в элементе basic -HTML:
~~[code]~~ Таблица ! ! [/code]
! Есть нюанс - после создания таблицы в vis- редакторе она как бы не видна после задания параметров (у меня прячется в верхний левый угол). Это нормально. В просмотре будет отображаться нормально. Для поиска этого элемента и редактирования в vis-редакторе надо обращаться к этому элементу через список в меню "Выбранный элемент".
! Спасибо. Скрипт пока разобрал голову сломал :).
! После того как разобрался с вашим скриптом, нашел решение для элемента Json Table:
! `~~[code]~~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));
});[/code]`

! Значения выходят, все получилось. Теперь не могу понять почему так "криво" выходит форматирование. Значения ширины столбцов указанные в настройках не изменяют внешнего вида таблицы. И получается что первые два столбца узкие, третий широкий...
1611____________________.png [/i][/i][/i][/i]
``` `

andrey99986

~~@evgeny_nd:~~

Значения выходят, все получилось. Теперь не могу понять почему так "криво" выходит форматирование. Значения ширины столбцов указанные в настройках не изменяют внешнего вида таблицы. И получается что первые два столбца узкие, третий широкий… `

Так я ж написал - из-за ограничений возможности форматирования (или я просто не нашёл как это делается) перешёл на html-таблицу.

evgeny_nd

~~@andrey99986:~~

~~@evgeny_nd:~~

Значения выходят, все получилось. Теперь не могу понять почему так "криво" выходит форматирование. Значения ширины столбцов указанные в настройках не изменяют внешнего вида таблицы. И получается что первые два столбца узкие, третий широкий… `

Так я ж написал - из-за ограничений возможности форматирования (или я просто не нашёл как это делается) перешёл на html-таблицу. `

Вот что я "раскопал": помогает установка знака процента после значения ширины колонки в настройках виджета, тогда таблица меняет внешний вид.
1611___________.png

Community Forum

NEWS

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

Support us

509

32.7k

82.6k

1.3m