Dashticz - Show your dashboard and how-to's!
Moderators: leecollings, htilburgs, robgeerts
-
- Posts: 2262
- Joined: Monday 29 August 2016 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Good. That was the goal of the documentation
I assume you've added the config['spot_clientid'] setting to your CONFIG.js, and that you've added 'spotify' to one of the column block definitions, according the documentation.
Remember: The spotify module in Dashticz is a remote control, not a player! So you must have a spotify player in your local network.
To debug:
Open Dashticz in Chrome, press F12 to open the developer window, click on the console tab, and look for user messages and/or error messages: They might give an hint.
Still issues: please post your CONFIG.js here, and we will have a look.
I assume you've added the config['spot_clientid'] setting to your CONFIG.js, and that you've added 'spotify' to one of the column block definitions, according the documentation.
Remember: The spotify module in Dashticz is a remote control, not a player! So you must have a spotify player in your local network.
To debug:
Open Dashticz in Chrome, press F12 to open the developer window, click on the console tab, and look for user messages and/or error messages: They might give an hint.
Still issues: please post your CONFIG.js here, and we will have a look.
-
- Posts: 41
- Joined: Monday 16 October 2017 23:52
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Herewith a small impression of our Meek CC (Central Control) unit to control various WiFi enabled devices.
Once we have “cleaned” our code, we will post here the files.
-
- Posts: 1601
- Joined: Friday 18 October 2013 23:33
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Arnhem/Nijmegen Nederland
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Nice job...
Will please share the code for the graph with the buttons abaove
P1, water and gas
And the ipcam code.
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups
- gielie
- Posts: 290
- Joined: Tuesday 12 January 2016 11:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version: latest β
- Location: The Netherlands (Alkmaar)
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Really nice one, mind to share your P1 graph settings, id like to have these combined graphs as well and also the clock looks very nice.
- Aeon Labs USB Stick met Z-wave plus
- Aeotec MultiSensor 6
- FIBARO FGS223
- FIBARO FGWPE Wall Plug
- Neo CoolCam Power plug
- Popp Smoke Detector
- Toon
- Kodi Media Server
- Aeotec MultiSensor 6
- FIBARO FGS223
- FIBARO FGWPE Wall Plug
- Neo CoolCam Power plug
- Popp Smoke Detector
- Toon
- Kodi Media Server
- HansieNL
- Posts: 957
- Joined: Monday 28 September 2015 15:13
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
@gielie : You can add the FlipClock by just adding 'flipclock' to one of your columns. I think you have to resize via css.
Blah blah blah
-
- Posts: 4
- Joined: Wednesday 26 June 2019 21:28
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Hi
I have some problems in Dashticz. In my Domoticz i have a playstation timer (incremental counter). I can see in Domoticz the minutes of that day but i have made a button in Dashticz where you see the minutes but he doesn't show my count to day? I can see in the json file, but i do not now where i have to change something?
Can somebody help me, where i have to edith to see the minutes (of the json file)?
I have some problems in Dashticz. In my Domoticz i have a playstation timer (incremental counter). I can see in Domoticz the minutes of that day but i have made a button in Dashticz where you see the minutes but he doesn't show my count to day? I can see in the json file, but i do not now where i have to change something?
Can somebody help me, where i have to edith to see the minutes (of the json file)?
-
- Posts: 1601
- Joined: Friday 18 October 2013 23:33
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Arnhem/Nijmegen Nederland
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Or do whe need to buy something in your store???
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups
-
- Posts: 41
- Joined: Monday 16 October 2017 23:52
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Good one
I was unable to find proper time to add explanations and remarks, nevertheless I’ve attached the altered configuration files.
CONFIG.js
Code: Select all
var config = {}
config['language'] = 'en_US';
config['domoticz_ip'] = 'http://192.168.3.100:8080';
config['app_title'] = 'MEEK-IO.COM';
config['domoticz_refresh'] = '1';
config['dashticz_php_path'] ='./vendor/dashticz/'
config['auto_swipe_back_to'] = 0;
config['auto_swipe_back_after'] = '30';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'month';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['selector_instead_of_buttons']=0;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['last_update'] = 0;
config['hide_topbar'] = 1;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 1;
config['translate_windspeed'] = 0;
config['static_weathericons'] = 0;
config['calendar_parse_localy'] = true;
config['hide_mediaplayer'] = 0;
config['logo'] = '';
config['lineColors'] = ['#f1c40f', '#40e0d0', '#eee'];
config['disable_googleanalytics'] = true;
config['owm_api'] = 'xxxxx';
config['owm_city'] = 'Middelburg';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['owm_cnt'] = 5; // Number of columns to show. If showing days, max is 5
config['owm_days'] = 1; // Enter 1 for showing forecast in days, 0 for the OWM default 3 hour forecast
config['owm_min'] = 1; // Enter 1 to show min temperature on 2nd row
config['owm_lang'] = 'en'; // Set language for de description of the forecast (rain, cloudy, etc.). For available languages, see https://openweathermap.org/forecast5/#multi
config['static_weathericons'] = 0; // Enter 1 for animated weather icons, 0 for static icons
//---------------------------------------------------------//
var buttons = {}
buttons.webcam1 = { width:3, isimage:true, image: 'http://192.168.3.100:8081', slide:2}
buttons.webcam2 = { width:3, isimage:true, image: 'http://192.168.3.100:8082', slide:2}
buttons.webcam3 = { width:3, isimage:true, image: 'http://192.168.3.100:8083', slide:2}
buttons.webcam4 = { width:3, isimage:true, image: 'http://192.168.3.100:8084', slide:2}
buttons.webcam5 = { width:12, isimage:true, image: 'http://192.168.3.100:8081', slide:1}
buttons.webcam6 = { width:12, isimage:true, image: 'http://192.168.3.100:8082', slide:1}
//---------------------------------------------------------//
var blocks = {}
blocks[20] = {}
blocks[20]['width'] = 8;
blocks[20]['hide_stop'] = true;
blocks[30] = {}
blocks[30]['width'] = 4;
blocks[31] = {}
blocks[31]['width'] = 4;
blocks[44] = {}
blocks[44]['icon'] = 'fas fa-tint';
blocks[44]['width'] = 4;
blocks['56_1'] = {}
blocks['56_1']['title'] = 'Current production';
blocks['56_1']['icon'] = 'fas fa-sun';
blocks['56_1']['width'] = 4;
blocks['56_2'] = {}
blocks['56_2']['title'] = 'Production today';
blocks['56_2']['icon'] = 'fas fa-sun';
blocks['56_2']['width'] = 4;
blocks['56_3'] = {}
blocks['56_3']['title'] = 'Total production';
blocks['56_3']['icon'] = 'fas fa-sun';
blocks['56_3']['width'] = 4;
blocks[62] = {}
blocks[62]['title'] = 'Bedroom Eleanor';
blocks[62]['width'] = 4;
blocks[64] = {}
blocks[64]['title'] = 'Living room';
blocks[64]['width'] = 4;
blocks[70] = {}
blocks[70]['switch'] = true;
blocks[70]['title'] = 'Temperatuur';
blocks[70]['width'] = 4;
blocks[71] = {}
blocks[71]['title'] = 'Bedroom Kaytlyn';
blocks[71]['width'] = 4;
blocks[81] = {}
blocks[81]['switch'] = true;
blocks[83] = {}
blocks[83]['switch'] = true;
blocks[83]['speak'] = 'Switched on now';
blocks[90] = {}
blocks[90]['title'] = 'Heater';
blocks[90]['icon'] = 'fab fa-free-code-camp';
blocks[90]['width'] = 6;
blocks['91_1'] = {}
blocks['91_1']['title'] = 'Current Usage';
blocks['91_1']['icon'] = 'fas fa-bolt';
blocks['91_1']['width'] = 3;
blocks['91_2'] = {}
blocks['91_2']['title'] = 'Consumed today';
blocks['91_2']['icon'] = 'fas fa-bolt';
blocks['91_2']['width'] = 3;
blocks['91_3'] = {}
blocks['91_3']['title'] = 'YTD used';
blocks['91_3']['icon'] = 'fas fa-bolt';
blocks['91_3']['width'] = 3;
blocks['91_4'] = {}
blocks['91_4']['title'] = 'YTD delivered';
blocks['91_4']['icon'] = 'fas fa-bolt';
blocks['91_4']['width'] = 2;
blocks['91_5'] = {}
blocks['91_5']['icon'] = 'fas fa-bolt';
blocks['91_6'] = {}
blocks['91_6']['icon'] = 'fas fa-bolt';
blocks['91_7'] = {}
blocks['91_7']['title'] = 'YTD usage';
blocks['91_7']['icon'] = 'fas fa-bolt';
blocks['91_7']['width'] = 2;
blocks['91_8'] = {}
blocks['91_8']['title'] = 'YTD return';
blocks['91_8']['icon'] = 'fas fa-bolt';
blocks['91_8']['width'] = 2;
blocks[44] = {}
blocks[44]['title'] = 'Water Meek DD';
blocks[44]['icon'] = 'fas fa-bolt';
blocks[44]['width'] = 2;
blocks[123] = {}
blocks[123]['width'] = 6;
blocks[131] = {}
blocks[131]['switch'] = true;
blocks[131]['icon'] = 'far fa-bell';
//blocks[131]['icon'] = 'fa fa-bell faa-ring animated fa-4x';
blocks[131]['hide_data'] = false;
blocks[131]['last_update'] = true;
blocks[131]['gotoslideOn'] = 2;
blocks[131]['playsoundOn'] = 'sounds/1.mp3';
blocks[133] = {}
blocks[133]['title'] = 'Meek MD1:';
blocks[137] = {}
blocks[137]['width'] = 12;
blocks[138] = {}
blocks[138]['width'] = 12;
blocks[189] = {}
blocks[189]['switch'] = true;
blocks[189]['title'] = 'WIND';
blocks[189]['width'] = 4;
blocks[200] = {}
blocks[200]['switch'] = true;
blocks[200]['title'] = 'Push to talk';
blocks[200]['icon'] = 'fas fa-microphone';
blocks[200]['width'] = 4;
blocks[124] = {}
blocks[124]['width'] = 12;
blocks[124]['title'] = 'Push to talk';
blocks[124]['switch'] = false;
blocks[124]['icon'] = '';
blocks[124]['hide_data'] = true;
//EMPTY DEVICE - for layout optimalizations
blocks[10250] = {}
blocks[10250]['switch'] = false;
blocks[10250]['title'] = 'EMPTY SPACE';
blocks[10250]['width'] = 12;
blocks[10100] = {}
blocks[10100]['switch'] = true;
blocks[10100]['title'] = 'EMPTY SPACE';
blocks[10100]['width'] = 12;
blocks[10050] = {}
blocks[10050]['switch'] = true;
blocks[10050]['title'] = 'EMPTY SPACE';
blocks[10050]['width'] = 12;
blocks[10010] = {}
blocks[10010]['switch'] = true;
blocks[10010]['title'] = 'EMPTY SPACE';
blocks[10010]['width'] = 12;
//FLIPCLOCK
blocks['flipclock'] = {}
blocks['flipclock']['type'] = 'flipclock';
blocks['flipclock']['title'] = 'flipclock';
blocks['flipclock']['width'] = 12;
//MEEK LOGO BLOCK
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'MEEK';
blocks['blocktitle_1a'] = {}
blocks['blocktitle_1a']['type'] = 'blocktitle';
blocks['blocktitle_1a']['title'] = 'Solar panels';
blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Gas Consumption';
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Electricity consumption';
blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Water consumption';
blocks['blocktitle_100'] = {}
blocks['blocktitle_100']['type'] = 'blocktitle';
blocks['blocktitle_100']['title'] = 'EMPTY SPACE';
//---------------------------------------------------------//
var columns = {}
columns[1] = {}
columns[1]['blocks'] = ['blocktitle_1',125,126,127,128,129,130,131,133,10250,10010,10100,10050,10010,10010,'graph_44']
columns[1]['width'] = 4;
columns[2] = {}
columns[2]['blocks'] = ['weather_owm',123,90,64,71,10250,62,10100,10050,10010,10010,10010,'graph_92']
columns[2]['width'] = 4;
columns[3] = {}
columns[3]['blocks'] = ['flipclock',buttons.webcam1,buttons.webcam2,buttons.webcam3,buttons.webcam4,10250,10010,10010,'91_1','91_2','91_3','91_4',56,'graph_91']
columns[3]['width'] = 4;
columns[4] = {}
columns[4]['blocks'] = ['clock',buttons.webcam4]
columns[4]['width'] = 2;
columns[5] = {}
columns[5]['blocks'] = [buttons.webcam5,buttons.webcam6]
columns[5]['width'] = 4;
columns[6] = {}
columns[6]['blocks'] = [buttons.webcam6,'clock']
columns[6]['width'] = 2;
//---------------------------------------------------------//
var screens = {}
screens[1] = {}
screens[1]['background'] = '6.jpg';
screens[1]['columns'] = [1,2,3]
screens[2] = {}
screens[2]['background'] = '6.jpg';
screens[2]['columns'] = [5]
Code: Select all
//add custom javascript in here
function afterGetDevices(){
}
function getExtendedBlockTypes(blocktypes){
return blocktypes;
}
function getStatus_56(idx,value,device){
if(parseFloat(device['Usage'])>0){
blocks['56_1']['icon'] = 'fas fa-sun slow-spin'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css
blocks['56_2']['icon'] = 'fas fa-sun slow-spin'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css
blocks['56_3']['icon'] = 'fas fa-sun slow-spin'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css
}
else {
blocks['56_1']['icon'] = 'fas fa-sun';
blocks['56_2']['icon'] = 'fas fa-sun';
blocks['56_3']['icon'] = 'fas fa-sun';
}
}
//function getStatus_131(idx,device){
// if(device['Switch']=='On'){
// blocks[131]['icon'] = 'fa fa-bell faa-ring animated fa-4x'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css
// }
// else {
// blocks[131]['icon'] = 'fas fa-sun';
// }
//}
Code: Select all
function getGraphs(device, popup) {
var sensor = 'counter';
var txtUnit = '?';
var currentValue = device['Data'];
var decimals = 2;
switch (device['Type']) {
case 'Rain':
sensor = 'rain';
txtUnit = 'mm';
decimals = 1;
break;
case 'Lux':
sensor = 'counter';
txtUnit = 'Lux';
decimals = 0;
break;
case 'Wind':
sensor = 'wind';
if (config['use_beaufort']) {
currentValue = Beaufort(device['Speed']);
decimals = 0;
txtUnit = 'Bft';
} else {
currentValue = device['Speed'];
decimals = 1;
txtUnit = 'm/s';
}
break;
case 'Temp':
case 'Temp + Humidity':
case 'Temp + Humidity + Baro':
sensor = 'temp';
txtUnit = '°C';
currentValue = device['Temp'];
decimals = 1;
break;
case 'Humidity':
sensor = 'temp';
txtUnit = '%';
decimals = 1;
break;
}
switch (device['SubType']) {
case 'Percentage':
sensor = 'Percentage';
txtUnit = '%';
decimals = 1;
break;
case 'Custom Sensor':
sensor = 'Percentage';
txtUnit = device['SensorUnit'];
decimals = 1;
break;
case 'Gas':
txtUnit = 'm3';
break;
case 'Energy':
case 'kWh':
case 'YouLess counter':
txtUnit = 'kWh';
currentValue = device['CounterToday'];
break;
case 'Visibility':
txtUnit = 'km';
break;
case 'Radiation':
case 'Solar Radiation':
txtUnit = 'Watt/m2';
decimals = 0;
break;
case 'Pressure':
txtUnit = 'Bar';
break;
case 'Soil Moisture':
txtUnit = 'cb';
break;
case 'Leaf Wetness':
txtUnit = 'Range';
break;
case 'Voltage':
case 'A/D':
txtUnit = 'mV';
break;
case 'VoltageGeneral':
txtUnit = 'V';
break;
case 'DistanceGeneral':
case 'Distance':
txtUnit = 'cm';
break;
case 'Sound Level':
txtUnit = 'dB';
break;
case 'CurrentGeneral':
case 'Current':
txtUnit = 'A';
break;
case 'Weight':
txtUnit = 'kg';
break;
case 'Waterflow':
sensor = 'Percentage';
txtUnit = 'l/min';
break;
case 'Counter Incremental':
txtUnit = device['CounterToday'].split(' ')[1];
currentValue = device['CounterToday'].split(' ')[0];
break;
}
currentValue = number_format(currentValue, decimals);
showGraph(device['idx'], device['Name'], txtUnit, 'initial', currentValue, false, sensor, popup);
}
function getGraphByIDX(idx) {
getGraphs(alldevices[idx], true);
}
function getButtonGraphs(device) {
if ($('#opengraph' + device['idx']).length === 0) {
var html = '<div class="modal fade opengraph' + device['idx'] + '" data-idx="' + device['idx'] + '" id="opengraph' + device['idx'] + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content">';
html += '<div class="modal-header">';
html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
html += '</div>';
html += '<div class="modal-body block_graphpopup_' + device['idx'] + '">' + language.misc.loading;
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
$('body').append(html);
$('#opengraph' + device['idx']).on('shown.bs.modal', function () {
getGraphByIDX($(this).data('idx'));
});
}
}
function showGraph(idx, title, label, range, current, forced, sensor, popup) {
if (typeof(popup) === 'undefined') forced = false;
if (typeof(forced) === 'undefined') forced = false;
if (typeof(_GRAPHS_LOADED[idx]) === 'undefined' || _GRAPHS_LOADED[idx] < (time() - (parseFloat(_GRAPHREFRESH) * 60))) {
forced = true;
}
if ($('.graphcurrent' + idx).length > 0) {
$('.graphcurrent' + idx).html(current + ' ' + label);
}
if (forced || popup) {
_GRAPHS_LOADED[idx] = time();
//Check settings for standard graph
if (range === 'initial') {
switch (settings['standard_graph']) {
case 'hours':
range = 'last';
break;
case 'day':
range = 'day';
break;
case 'month':
range = 'month';
break;
}
}
realrange = range;
if (range === 'last') realrange = 'day';
$.ajax({
url: settings['domoticz_ip'] + '/json.htm?username=' + usrEnc + '&password=' + pwdEnc + '&type=graph&sensor=' + sensor + '&idx=' + idx + '&range=' + realrange + '&time=' + new Date().getTime() + '&jsoncallback=?',
type: 'GET', async: true, contentType: "application/json", dataType: 'jsonp',
success: function (data) {
if (data.status === 'ERR') {
alert('Could not load graph!');
return;
}
var buttons = createButtons(idx, title, label, range, current, sensor, popup);
title = '<h4>' + title;
if (typeof(current) !== 'undefined' && current !== 'undefined') title += ': <B class="graphcurrent' + idx + '">' + current + ' ' + label + '</B>';
title += '</h4>';
var html = '<div class="graph' + (popup ? 'popup' : '') + '" id="graph' + idx + '">';
html += '<div class="transbg col-xs-12">';
html += title + '<br /><div style="margin-left:15px;">' + buttons + '</div><br /><div id="graphoutput' + idx + '"></div>';
html += '</div>';
html += '</div>';
if ($('#graph' + idx + '.graph').length > 0) {
$('#graph' + idx + '.graph').replaceWith(html);
}
$('.block_graph' + (popup ? 'popup' : '') + '_' + idx).html(html);
var graphProperties = getGraphProperties(data.result[0], label);
graphProperties.dateFormat = settings['shorttime'];
if (range === 'month' || range === 'year') {
graphProperties.dateFormat = settings['shortdate'];
}
if (range === 'last') {
var fourHoursAgo = moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm');
data.result = data.result.filter(function (element) {
return element.d > fourHoursAgo;
});
}
graphProperties.data = data.result.filter(function (element) {
return element.hasOwnProperty(graphProperties.keys[0]);
});
if ($('#graphoutput' + idx).length > 0) {
makeMorrisGraph(idx, graphProperties);
}
}
});
}
}
function makeMorrisGraph(idx, graphProperties) {
Morris.Bar({
parseTime: false,
element: 'graphoutput' + idx,
data: graphProperties.data,
fillOpacity: 0.2,
gridTextColor: '#c3f6fe',
lineWidth: 1,
stacked: true,
xkey: ['d'],
ykeys: graphProperties.keys,
labels: graphProperties.labels,
xLabelFormat: function (x) { return moment(x.src.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat); },
lineColors: settings['lineColors'],
barColors: settings['lineColors'],
pointFillColors: ['none'],
pointSize: 1,
hideHover: 'auto',
resize: true,
hoverCallback: function (index, options, content, row) {
var datePoint = moment(row.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat);
var text = datePoint + ": ";
graphProperties.keys.forEach(function (element, index) {
text += (index > 0 ? ' / ' : '') + number_format(row[element], 2) + ' ' + graphProperties.labels[index];
});
return text;
}
});
}
function createButtons(idx, title, label, range, current, sensor, popup) {
var buttons = '<div class="btn-group" role="group" aria-label="Basic example">';
buttons += '<button type="button" class="btn btn-default ';
if (range === 'last') buttons += 'active';
buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'last\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_hours + '</button> ';
buttons += '<button type="button" class="btn btn-default ';
if (range === 'day') buttons += 'active';
buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'day\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.today + '</button> ';
buttons += '<button type="button" class="btn btn-default ';
if (range === 'month') buttons += 'active';
buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'month\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_month + '</button>';
buttons += '</div>';
return buttons;
}
function getGraphProperties(result, label) {
var graphProperties = {};
if (result.hasOwnProperty('uvi')) {
graphProperties = {
keys: ['uvi'],
labels: [label],
};
} else if (result.hasOwnProperty('lux')) {
graphProperties = {
keys: ['lux'],
labels: ['Lux'],
};
} else if (result.hasOwnProperty('lux_avg')) {
graphProperties = {
keys: ['lux_avg', 'lux_min', 'lux_max'],
labels: ['Lux average', 'Minimum', 'Maximum'],
};
} else if (result.hasOwnProperty('gu') && result.hasOwnProperty('sp')) {
graphProperties = {
keys: ['gu', 'sp'],
labels: ['m/s', 'm/s'],
};
} else if (result.hasOwnProperty('ba') && result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
graphProperties = {
keys: ['ba', 'hu', 'te'],
labels: ['hPa', '%', _TEMP_SYMBOL],
};
} else if (result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
graphProperties = {
keys: ['hu', 'te'],
labels: ['%', _TEMP_SYMBOL],
};
} else if (result.hasOwnProperty('te')) {
graphProperties = {
keys: ['te'],
labels: [_TEMP_SYMBOL],
};
} else if (result.hasOwnProperty('hu')) {
graphProperties = {
keys: ['hu'],
labels: ['%'],
};
} else if (result.hasOwnProperty('mm')) {
graphProperties = {
keys: ['mm'],
labels: ['mm'],
};
} else if (result.hasOwnProperty('v_max')) {
graphProperties = {
keys: ['v_max'],
labels: [label],
};
} else if (result.hasOwnProperty('v2')) {
graphProperties = {
keys: ['v2', 'v'],
labels: [label, label],
};
if (label === 'kWh' && realrange === 'day') {
graphProperties.labels = ['Watt', 'Watt'];
}
} else if (result.hasOwnProperty('v')) {
if (label === 'kWh' && realrange === 'day') {
label = 'Wh';
}
if (data.method === 1) {
graphProperties = {
keys: ['eu'],
labels: [label],
};
} else {
graphProperties = {
keys: ['v'],
labels: [label],
};
}
} else if (result.hasOwnProperty('eu')) {
graphProperties = {
keys: ['eu'],
labels: [label],
};
} else if (result.hasOwnProperty('u')) {
graphProperties = {
keys: ['u'],
labels: [label],
};
} else if (result.hasOwnProperty('u_max')) {
graphProperties = {
keys: ['u_max', 'u_min'],
labels: ['?', '?'],
};
}
return graphProperties;
}
Last edited by Meek on Saturday 29 June 2019 12:42, edited 1 time in total.
- EdwinK
- Posts: 1820
- Joined: Sunday 22 January 2017 21:46
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Rhoon
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
in config.js, better remove your API keys (owm)
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
-
- Posts: 41
- Joined: Monday 16 October 2017 23:52
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Thank you for pointing out, just amended my previous post.
-
- Posts: 2262
- Joined: Monday 29 August 2016 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
I see you used a bar graph with some additional settings:Meek wrote: ↑Saturday 29 June 2019 9:31Good one
I was unable to find proper time to add explanations and remarks, nevertheless I’ve attached the altered configuration files.
CONFIG.jscustom.jsCode: Select all
var config = {} config['language'] = 'en_US'; config['domoticz_ip'] = 'http://192.168.3.100:8080'; config['app_title'] = 'MEEK-IO.COM'; config['domoticz_refresh'] = '1'; config['dashticz_php_path'] ='./vendor/dashticz/' config['auto_swipe_back_to'] = 0; config['auto_swipe_back_after'] = '30'; config['auto_slide_pages'] = 0; config['slide_effect'] = 'slide'; config['standard_graph'] = 'month'; config['timeformat'] = 'DD-MM-YY HH:mm'; config['selector_instead_of_buttons']=0; config['auto_positioning'] = 0; config['use_favorites'] = 0; config['last_update'] = 0; config['hide_topbar'] = 1; config['hide_seconds'] = 0; config['hide_seconds_stationclock'] = 0; config['use_fahrenheit'] = 0; config['use_beaufort'] = 1; config['translate_windspeed'] = 0; config['static_weathericons'] = 0; config['calendar_parse_localy'] = true; config['hide_mediaplayer'] = 0; config['logo'] = ''; config['lineColors'] = ['#f1c40f', '#40e0d0', '#eee']; config['disable_googleanalytics'] = true; config['owm_api'] = 'xxxxx'; config['owm_city'] = 'Middelburg'; config['owm_name'] = ''; config['owm_country'] = 'nl'; config['owm_cnt'] = 5; // Number of columns to show. If showing days, max is 5 config['owm_days'] = 1; // Enter 1 for showing forecast in days, 0 for the OWM default 3 hour forecast config['owm_min'] = 1; // Enter 1 to show min temperature on 2nd row config['owm_lang'] = 'en'; // Set language for de description of the forecast (rain, cloudy, etc.). For available languages, see https://openweathermap.org/forecast5/#multi config['static_weathericons'] = 0; // Enter 1 for animated weather icons, 0 for static icons //---------------------------------------------------------// var buttons = {} buttons.webcam1 = { width:3, isimage:true, image: 'http://192.168.3.100:8081', slide:2} buttons.webcam2 = { width:3, isimage:true, image: 'http://192.168.3.100:8082', slide:2} buttons.webcam3 = { width:3, isimage:true, image: 'http://192.168.3.100:8083', slide:2} buttons.webcam4 = { width:3, isimage:true, image: 'http://192.168.3.100:8084', slide:2} buttons.webcam5 = { width:12, isimage:true, image: 'http://192.168.3.100:8081', slide:1} buttons.webcam6 = { width:12, isimage:true, image: 'http://192.168.3.100:8082', slide:1} //---------------------------------------------------------// var blocks = {} blocks[20] = {} blocks[20]['width'] = 8; blocks[20]['hide_stop'] = true; blocks[30] = {} blocks[30]['width'] = 4; blocks[31] = {} blocks[31]['width'] = 4; blocks[44] = {} blocks[44]['icon'] = 'fas fa-tint'; blocks[44]['width'] = 4; blocks['56_1'] = {} blocks['56_1']['title'] = 'Current production'; blocks['56_1']['icon'] = 'fas fa-sun'; blocks['56_1']['width'] = 4; blocks['56_2'] = {} blocks['56_2']['title'] = 'Production today'; blocks['56_2']['icon'] = 'fas fa-sun'; blocks['56_2']['width'] = 4; blocks['56_3'] = {} blocks['56_3']['title'] = 'Total production'; blocks['56_3']['icon'] = 'fas fa-sun'; blocks['56_3']['width'] = 4; blocks[62] = {} blocks[62]['title'] = 'Bedroom Eleanor'; blocks[62]['width'] = 4; blocks[64] = {} blocks[64]['title'] = 'Living room'; blocks[64]['width'] = 4; blocks[70] = {} blocks[70]['switch'] = true; blocks[70]['title'] = 'Temperatuur'; blocks[70]['width'] = 4; blocks[71] = {} blocks[71]['title'] = 'Bedroom Kaytlyn'; blocks[71]['width'] = 4; blocks[81] = {} blocks[81]['switch'] = true; blocks[83] = {} blocks[83]['switch'] = true; blocks[83]['speak'] = 'Switched on now'; blocks[90] = {} blocks[90]['title'] = 'Heater'; blocks[90]['icon'] = 'fab fa-free-code-camp'; blocks[90]['width'] = 6; blocks['91_1'] = {} blocks['91_1']['title'] = 'Current Usage'; blocks['91_1']['icon'] = 'fas fa-bolt'; blocks['91_1']['width'] = 3; blocks['91_2'] = {} blocks['91_2']['title'] = 'Consumed today'; blocks['91_2']['icon'] = 'fas fa-bolt'; blocks['91_2']['width'] = 3; blocks['91_3'] = {} blocks['91_3']['title'] = 'YTD used'; blocks['91_3']['icon'] = 'fas fa-bolt'; blocks['91_3']['width'] = 3; blocks['91_4'] = {} blocks['91_4']['title'] = 'YTD delivered'; blocks['91_4']['icon'] = 'fas fa-bolt'; blocks['91_4']['width'] = 2; blocks['91_5'] = {} blocks['91_5']['icon'] = 'fas fa-bolt'; blocks['91_6'] = {} blocks['91_6']['icon'] = 'fas fa-bolt'; blocks['91_7'] = {} blocks['91_7']['title'] = 'YTD usage'; blocks['91_7']['icon'] = 'fas fa-bolt'; blocks['91_7']['width'] = 2; blocks['91_8'] = {} blocks['91_8']['title'] = 'YTD return'; blocks['91_8']['icon'] = 'fas fa-bolt'; blocks['91_8']['width'] = 2; blocks[44] = {} blocks[44]['title'] = 'Water Meek DD'; blocks[44]['icon'] = 'fas fa-bolt'; blocks[44]['width'] = 2; blocks[123] = {} blocks[123]['width'] = 6; blocks[131] = {} blocks[131]['switch'] = true; blocks[131]['icon'] = 'far fa-bell'; //blocks[131]['icon'] = 'fa fa-bell faa-ring animated fa-4x'; blocks[131]['hide_data'] = false; blocks[131]['last_update'] = true; blocks[131]['gotoslideOn'] = 2; blocks[131]['playsoundOn'] = 'sounds/1.mp3'; blocks[133] = {} blocks[133]['title'] = 'Meek MD1:'; blocks[137] = {} blocks[137]['width'] = 12; blocks[138] = {} blocks[138]['width'] = 12; blocks[189] = {} blocks[189]['switch'] = true; blocks[189]['title'] = 'WIND'; blocks[189]['width'] = 4; blocks[200] = {} blocks[200]['switch'] = true; blocks[200]['title'] = 'Push to talk'; blocks[200]['icon'] = 'fas fa-microphone'; blocks[200]['width'] = 4; blocks[124] = {} blocks[124]['width'] = 12; blocks[124]['title'] = 'Push to talk'; blocks[124]['switch'] = false; blocks[124]['icon'] = ''; blocks[124]['hide_data'] = true; //EMPTY DEVICE - for layout optimalizations blocks[10250] = {} blocks[10250]['switch'] = false; blocks[10250]['title'] = 'EMPTY SPACE'; blocks[10250]['width'] = 12; blocks[10100] = {} blocks[10100]['switch'] = true; blocks[10100]['title'] = 'EMPTY SPACE'; blocks[10100]['width'] = 12; blocks[10050] = {} blocks[10050]['switch'] = true; blocks[10050]['title'] = 'EMPTY SPACE'; blocks[10050]['width'] = 12; blocks[10010] = {} blocks[10010]['switch'] = true; blocks[10010]['title'] = 'EMPTY SPACE'; blocks[10010]['width'] = 12; //FLIPCLOCK blocks['flipclock'] = {} blocks['flipclock']['type'] = 'flipclock'; blocks['flipclock']['title'] = 'flipclock'; blocks['flipclock']['width'] = 12; //MEEK LOGO BLOCK blocks['blocktitle_1'] = {} blocks['blocktitle_1']['type'] = 'blocktitle'; blocks['blocktitle_1']['title'] = 'MEEK'; blocks['blocktitle_1a'] = {} blocks['blocktitle_1a']['type'] = 'blocktitle'; blocks['blocktitle_1a']['title'] = 'Solar panels'; blocks['blocktitle_3'] = {} blocks['blocktitle_3']['type'] = 'blocktitle'; blocks['blocktitle_3']['title'] = 'Gas Consumption'; blocks['blocktitle_4'] = {} blocks['blocktitle_4']['type'] = 'blocktitle'; blocks['blocktitle_4']['title'] = 'Electricity consumption'; blocks['blocktitle_6'] = {} blocks['blocktitle_6']['type'] = 'blocktitle'; blocks['blocktitle_6']['title'] = 'Water consumption'; blocks['blocktitle_100'] = {} blocks['blocktitle_100']['type'] = 'blocktitle'; blocks['blocktitle_100']['title'] = 'EMPTY SPACE'; //---------------------------------------------------------// var columns = {} columns[1] = {} columns[1]['blocks'] = ['blocktitle_1',125,126,127,128,129,130,131,133,10250,10010,10100,10050,10010,10010,'graph_44'] columns[1]['width'] = 4; columns[2] = {} columns[2]['blocks'] = ['weather_owm',123,90,64,71,10250,62,10100,10050,10010,10010,10010,'graph_92'] columns[2]['width'] = 4; columns[3] = {} columns[3]['blocks'] = ['flipclock',buttons.webcam1,buttons.webcam2,buttons.webcam3,buttons.webcam4,10250,10010,10010,'91_1','91_2','91_3','91_4',56,'graph_91'] columns[3]['width'] = 4; columns[4] = {} columns[4]['blocks'] = ['clock',buttons.webcam4] columns[4]['width'] = 2; columns[5] = {} columns[5]['blocks'] = [buttons.webcam5,buttons.webcam6] columns[5]['width'] = 4; columns[6] = {} columns[6]['blocks'] = [buttons.webcam6,'clock'] columns[6]['width'] = 2; //---------------------------------------------------------// var screens = {} screens[1] = {} screens[1]['background'] = '6.jpg'; screens[1]['columns'] = [1,2,3] screens[2] = {} screens[2]['background'] = '6.jpg'; screens[2]['columns'] = [5]
graphs.jsCode: Select all
//add custom javascript in here function afterGetDevices(){ } function getExtendedBlockTypes(blocktypes){ return blocktypes; } function getStatus_56(idx,value,device){ if(parseFloat(device['Usage'])>0){ blocks['56_1']['icon'] = 'fas fa-sun slow-spin'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css blocks['56_2']['icon'] = 'fas fa-sun slow-spin'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css blocks['56_3']['icon'] = 'fas fa-sun slow-spin'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css } else { blocks['56_1']['icon'] = 'fas fa-sun'; blocks['56_2']['icon'] = 'fas fa-sun'; blocks['56_3']['icon'] = 'fas fa-sun'; } } //function getStatus_131(idx,device){ // if(device['Switch']=='On'){ // blocks[131]['icon'] = 'fa fa-bell faa-ring animated fa-4x'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css // } // else { // blocks[131]['icon'] = 'fas fa-sun'; // } //}
Code: Select all
function getGraphs(device, popup) { var sensor = 'counter'; var txtUnit = '?'; var currentValue = device['Data']; var decimals = 2; switch (device['Type']) { case 'Rain': sensor = 'rain'; txtUnit = 'mm'; decimals = 1; break; case 'Lux': sensor = 'counter'; txtUnit = 'Lux'; decimals = 0; break; case 'Wind': sensor = 'wind'; if (config['use_beaufort']) { currentValue = Beaufort(device['Speed']); decimals = 0; txtUnit = 'Bft'; } else { currentValue = device['Speed']; decimals = 1; txtUnit = 'm/s'; } break; case 'Temp': case 'Temp + Humidity': case 'Temp + Humidity + Baro': sensor = 'temp'; txtUnit = '°C'; currentValue = device['Temp']; decimals = 1; break; case 'Humidity': sensor = 'temp'; txtUnit = '%'; decimals = 1; break; } switch (device['SubType']) { case 'Percentage': sensor = 'Percentage'; txtUnit = '%'; decimals = 1; break; case 'Custom Sensor': sensor = 'Percentage'; txtUnit = device['SensorUnit']; decimals = 1; break; case 'Gas': txtUnit = 'm3'; break; case 'Energy': case 'kWh': case 'YouLess counter': txtUnit = 'kWh'; currentValue = device['CounterToday']; break; case 'Visibility': txtUnit = 'km'; break; case 'Radiation': case 'Solar Radiation': txtUnit = 'Watt/m2'; decimals = 0; break; case 'Pressure': txtUnit = 'Bar'; break; case 'Soil Moisture': txtUnit = 'cb'; break; case 'Leaf Wetness': txtUnit = 'Range'; break; case 'Voltage': case 'A/D': txtUnit = 'mV'; break; case 'VoltageGeneral': txtUnit = 'V'; break; case 'DistanceGeneral': case 'Distance': txtUnit = 'cm'; break; case 'Sound Level': txtUnit = 'dB'; break; case 'CurrentGeneral': case 'Current': txtUnit = 'A'; break; case 'Weight': txtUnit = 'kg'; break; case 'Waterflow': sensor = 'Percentage'; txtUnit = 'l/min'; break; case 'Counter Incremental': txtUnit = device['CounterToday'].split(' ')[1]; currentValue = device['CounterToday'].split(' ')[0]; break; } currentValue = number_format(currentValue, decimals); showGraph(device['idx'], device['Name'], txtUnit, 'initial', currentValue, false, sensor, popup); } function getGraphByIDX(idx) { getGraphs(alldevices[idx], true); } function getButtonGraphs(device) { if ($('#opengraph' + device['idx']).length === 0) { var html = '<div class="modal fade opengraph' + device['idx'] + '" data-idx="' + device['idx'] + '" id="opengraph' + device['idx'] + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">'; html += '<div class="modal-dialog">'; html += '<div class="modal-content">'; html += '<div class="modal-header">'; html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'; html += '</div>'; html += '<div class="modal-body block_graphpopup_' + device['idx'] + '">' + language.misc.loading; html += '</div>'; html += '</div>'; html += '</div>'; html += '</div>'; $('body').append(html); $('#opengraph' + device['idx']).on('shown.bs.modal', function () { getGraphByIDX($(this).data('idx')); }); } } function showGraph(idx, title, label, range, current, forced, sensor, popup) { if (typeof(popup) === 'undefined') forced = false; if (typeof(forced) === 'undefined') forced = false; if (typeof(_GRAPHS_LOADED[idx]) === 'undefined' || _GRAPHS_LOADED[idx] < (time() - (parseFloat(_GRAPHREFRESH) * 60))) { forced = true; } if ($('.graphcurrent' + idx).length > 0) { $('.graphcurrent' + idx).html(current + ' ' + label); } if (forced || popup) { _GRAPHS_LOADED[idx] = time(); //Check settings for standard graph if (range === 'initial') { switch (settings['standard_graph']) { case 'hours': range = 'last'; break; case 'day': range = 'day'; break; case 'month': range = 'month'; break; } } realrange = range; if (range === 'last') realrange = 'day'; $.ajax({ url: settings['domoticz_ip'] + '/json.htm?username=' + usrEnc + '&password=' + pwdEnc + '&type=graph&sensor=' + sensor + '&idx=' + idx + '&range=' + realrange + '&time=' + new Date().getTime() + '&jsoncallback=?', type: 'GET', async: true, contentType: "application/json", dataType: 'jsonp', success: function (data) { if (data.status === 'ERR') { alert('Could not load graph!'); return; } var buttons = createButtons(idx, title, label, range, current, sensor, popup); title = '<h4>' + title; if (typeof(current) !== 'undefined' && current !== 'undefined') title += ': <B class="graphcurrent' + idx + '">' + current + ' ' + label + '</B>'; title += '</h4>'; var html = '<div class="graph' + (popup ? 'popup' : '') + '" id="graph' + idx + '">'; html += '<div class="transbg col-xs-12">'; html += title + '<br /><div style="margin-left:15px;">' + buttons + '</div><br /><div id="graphoutput' + idx + '"></div>'; html += '</div>'; html += '</div>'; if ($('#graph' + idx + '.graph').length > 0) { $('#graph' + idx + '.graph').replaceWith(html); } $('.block_graph' + (popup ? 'popup' : '') + '_' + idx).html(html); var graphProperties = getGraphProperties(data.result[0], label); graphProperties.dateFormat = settings['shorttime']; if (range === 'month' || range === 'year') { graphProperties.dateFormat = settings['shortdate']; } if (range === 'last') { var fourHoursAgo = moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm'); data.result = data.result.filter(function (element) { return element.d > fourHoursAgo; }); } graphProperties.data = data.result.filter(function (element) { return element.hasOwnProperty(graphProperties.keys[0]); }); if ($('#graphoutput' + idx).length > 0) { makeMorrisGraph(idx, graphProperties); } } }); } } function makeMorrisGraph(idx, graphProperties) { Morris.Bar({ parseTime: false, element: 'graphoutput' + idx, data: graphProperties.data, fillOpacity: 0.2, gridTextColor: '#c3f6fe', lineWidth: 1, stacked: true, xkey: ['d'], ykeys: graphProperties.keys, labels: graphProperties.labels, xLabelFormat: function (x) { return moment(x.src.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat); }, lineColors: settings['lineColors'], barColors: settings['lineColors'], pointFillColors: ['none'], pointSize: 1, hideHover: 'auto', resize: true, hoverCallback: function (index, options, content, row) { var datePoint = moment(row.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat); var text = datePoint + ": "; graphProperties.keys.forEach(function (element, index) { text += (index > 0 ? ' / ' : '') + number_format(row[element], 2) + ' ' + graphProperties.labels[index]; }); return text; } }); } function createButtons(idx, title, label, range, current, sensor, popup) { var buttons = '<div class="btn-group" role="group" aria-label="Basic example">'; buttons += '<button type="button" class="btn btn-default '; if (range === 'last') buttons += 'active'; buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'last\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_hours + '</button> '; buttons += '<button type="button" class="btn btn-default '; if (range === 'day') buttons += 'active'; buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'day\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.today + '</button> '; buttons += '<button type="button" class="btn btn-default '; if (range === 'month') buttons += 'active'; buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'month\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_month + '</button>'; buttons += '</div>'; return buttons; } function getGraphProperties(result, label) { var graphProperties = {}; if (result.hasOwnProperty('uvi')) { graphProperties = { keys: ['uvi'], labels: [label], }; } else if (result.hasOwnProperty('lux')) { graphProperties = { keys: ['lux'], labels: ['Lux'], }; } else if (result.hasOwnProperty('lux_avg')) { graphProperties = { keys: ['lux_avg', 'lux_min', 'lux_max'], labels: ['Lux average', 'Minimum', 'Maximum'], }; } else if (result.hasOwnProperty('gu') && result.hasOwnProperty('sp')) { graphProperties = { keys: ['gu', 'sp'], labels: ['m/s', 'm/s'], }; } else if (result.hasOwnProperty('ba') && result.hasOwnProperty('hu') && result.hasOwnProperty('te')) { graphProperties = { keys: ['ba', 'hu', 'te'], labels: ['hPa', '%', _TEMP_SYMBOL], }; } else if (result.hasOwnProperty('hu') && result.hasOwnProperty('te')) { graphProperties = { keys: ['hu', 'te'], labels: ['%', _TEMP_SYMBOL], }; } else if (result.hasOwnProperty('te')) { graphProperties = { keys: ['te'], labels: [_TEMP_SYMBOL], }; } else if (result.hasOwnProperty('hu')) { graphProperties = { keys: ['hu'], labels: ['%'], }; } else if (result.hasOwnProperty('mm')) { graphProperties = { keys: ['mm'], labels: ['mm'], }; } else if (result.hasOwnProperty('v_max')) { graphProperties = { keys: ['v_max'], labels: [label], }; } else if (result.hasOwnProperty('v2')) { graphProperties = { keys: ['v2', 'v'], labels: [label, label], }; if (label === 'kWh' && realrange === 'day') { graphProperties.labels = ['Watt', 'Watt']; } } else if (result.hasOwnProperty('v')) { if (label === 'kWh' && realrange === 'day') { label = 'Wh'; } if (data.method === 1) { graphProperties = { keys: ['eu'], labels: [label], }; } else { graphProperties = { keys: ['v'], labels: [label], }; } } else if (result.hasOwnProperty('eu')) { graphProperties = { keys: ['eu'], labels: [label], }; } else if (result.hasOwnProperty('u')) { graphProperties = { keys: ['u'], labels: [label], }; } else if (result.hasOwnProperty('u_max')) { graphProperties = { keys: ['u_max', 'u_min'], labels: ['?', '?'], }; } return graphProperties; }
Code: Select all
gridTextColor: '#c3f6fe',
lineWidth: 1,
stacked: true,
lineColors: settings['lineColors'],
barColors: settings['lineColors'],
pointFillColors: ['none'],
pointSize: 1,
I will add these additional parameters in a future beta. (and probably make these default)
-
- Posts: 1601
- Joined: Friday 18 October 2013 23:33
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Arnhem/Nijmegen Nederland
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Meek wrote: ↑Saturday 29 June 2019 9:31Good one
I was unable to find proper time to add explanations and remarks, nevertheless I’ve attached the altered configuration files.
CONFIG.jscustom.jsCode: Select all
var config = {} config['language'] = 'en_US'; config['domoticz_ip'] = 'http://192.168.3.100:8080'; config['app_title'] = 'MEEK-IO.COM'; config['domoticz_refresh'] = '1'; config['dashticz_php_path'] ='./vendor/dashticz/' config['auto_swipe_back_to'] = 0; config['auto_swipe_back_after'] = '30'; config['auto_slide_pages'] = 0; config['slide_effect'] = 'slide'; config['standard_graph'] = 'month'; config['timeformat'] = 'DD-MM-YY HH:mm'; config['selector_instead_of_buttons']=0; config['auto_positioning'] = 0; config['use_favorites'] = 0; config['last_update'] = 0; config['hide_topbar'] = 1; config['hide_seconds'] = 0; config['hide_seconds_stationclock'] = 0; config['use_fahrenheit'] = 0; config['use_beaufort'] = 1; config['translate_windspeed'] = 0; config['static_weathericons'] = 0; config['calendar_parse_localy'] = true; config['hide_mediaplayer'] = 0; config['logo'] = ''; config['lineColors'] = ['#f1c40f', '#40e0d0', '#eee']; config['disable_googleanalytics'] = true; config['owm_api'] = 'xxxxx'; config['owm_city'] = 'Middelburg'; config['owm_name'] = ''; config['owm_country'] = 'nl'; config['owm_cnt'] = 5; // Number of columns to show. If showing days, max is 5 config['owm_days'] = 1; // Enter 1 for showing forecast in days, 0 for the OWM default 3 hour forecast config['owm_min'] = 1; // Enter 1 to show min temperature on 2nd row config['owm_lang'] = 'en'; // Set language for de description of the forecast (rain, cloudy, etc.). For available languages, see https://openweathermap.org/forecast5/#multi config['static_weathericons'] = 0; // Enter 1 for animated weather icons, 0 for static icons //---------------------------------------------------------// var buttons = {} buttons.webcam1 = { width:3, isimage:true, image: 'http://192.168.3.100:8081', slide:2} buttons.webcam2 = { width:3, isimage:true, image: 'http://192.168.3.100:8082', slide:2} buttons.webcam3 = { width:3, isimage:true, image: 'http://192.168.3.100:8083', slide:2} buttons.webcam4 = { width:3, isimage:true, image: 'http://192.168.3.100:8084', slide:2} buttons.webcam5 = { width:12, isimage:true, image: 'http://192.168.3.100:8081', slide:1} buttons.webcam6 = { width:12, isimage:true, image: 'http://192.168.3.100:8082', slide:1} //---------------------------------------------------------// var blocks = {} blocks[20] = {} blocks[20]['width'] = 8; blocks[20]['hide_stop'] = true; blocks[30] = {} blocks[30]['width'] = 4; blocks[31] = {} blocks[31]['width'] = 4; blocks[44] = {} blocks[44]['icon'] = 'fas fa-tint'; blocks[44]['width'] = 4; blocks['56_1'] = {} blocks['56_1']['title'] = 'Current production'; blocks['56_1']['icon'] = 'fas fa-sun'; blocks['56_1']['width'] = 4; blocks['56_2'] = {} blocks['56_2']['title'] = 'Production today'; blocks['56_2']['icon'] = 'fas fa-sun'; blocks['56_2']['width'] = 4; blocks['56_3'] = {} blocks['56_3']['title'] = 'Total production'; blocks['56_3']['icon'] = 'fas fa-sun'; blocks['56_3']['width'] = 4; blocks[62] = {} blocks[62]['title'] = 'Bedroom Eleanor'; blocks[62]['width'] = 4; blocks[64] = {} blocks[64]['title'] = 'Living room'; blocks[64]['width'] = 4; blocks[70] = {} blocks[70]['switch'] = true; blocks[70]['title'] = 'Temperatuur'; blocks[70]['width'] = 4; blocks[71] = {} blocks[71]['title'] = 'Bedroom Kaytlyn'; blocks[71]['width'] = 4; blocks[81] = {} blocks[81]['switch'] = true; blocks[83] = {} blocks[83]['switch'] = true; blocks[83]['speak'] = 'Switched on now'; blocks[90] = {} blocks[90]['title'] = 'Heater'; blocks[90]['icon'] = 'fab fa-free-code-camp'; blocks[90]['width'] = 6; blocks['91_1'] = {} blocks['91_1']['title'] = 'Current Usage'; blocks['91_1']['icon'] = 'fas fa-bolt'; blocks['91_1']['width'] = 3; blocks['91_2'] = {} blocks['91_2']['title'] = 'Consumed today'; blocks['91_2']['icon'] = 'fas fa-bolt'; blocks['91_2']['width'] = 3; blocks['91_3'] = {} blocks['91_3']['title'] = 'YTD used'; blocks['91_3']['icon'] = 'fas fa-bolt'; blocks['91_3']['width'] = 3; blocks['91_4'] = {} blocks['91_4']['title'] = 'YTD delivered'; blocks['91_4']['icon'] = 'fas fa-bolt'; blocks['91_4']['width'] = 2; blocks['91_5'] = {} blocks['91_5']['icon'] = 'fas fa-bolt'; blocks['91_6'] = {} blocks['91_6']['icon'] = 'fas fa-bolt'; blocks['91_7'] = {} blocks['91_7']['title'] = 'YTD usage'; blocks['91_7']['icon'] = 'fas fa-bolt'; blocks['91_7']['width'] = 2; blocks['91_8'] = {} blocks['91_8']['title'] = 'YTD return'; blocks['91_8']['icon'] = 'fas fa-bolt'; blocks['91_8']['width'] = 2; blocks[44] = {} blocks[44]['title'] = 'Water Meek DD'; blocks[44]['icon'] = 'fas fa-bolt'; blocks[44]['width'] = 2; blocks[123] = {} blocks[123]['width'] = 6; blocks[131] = {} blocks[131]['switch'] = true; blocks[131]['icon'] = 'far fa-bell'; //blocks[131]['icon'] = 'fa fa-bell faa-ring animated fa-4x'; blocks[131]['hide_data'] = false; blocks[131]['last_update'] = true; blocks[131]['gotoslideOn'] = 2; blocks[131]['playsoundOn'] = 'sounds/1.mp3'; blocks[133] = {} blocks[133]['title'] = 'Meek MD1:'; blocks[137] = {} blocks[137]['width'] = 12; blocks[138] = {} blocks[138]['width'] = 12; blocks[189] = {} blocks[189]['switch'] = true; blocks[189]['title'] = 'WIND'; blocks[189]['width'] = 4; blocks[200] = {} blocks[200]['switch'] = true; blocks[200]['title'] = 'Push to talk'; blocks[200]['icon'] = 'fas fa-microphone'; blocks[200]['width'] = 4; blocks[124] = {} blocks[124]['width'] = 12; blocks[124]['title'] = 'Push to talk'; blocks[124]['switch'] = false; blocks[124]['icon'] = ''; blocks[124]['hide_data'] = true; //EMPTY DEVICE - for layout optimalizations blocks[10250] = {} blocks[10250]['switch'] = false; blocks[10250]['title'] = 'EMPTY SPACE'; blocks[10250]['width'] = 12; blocks[10100] = {} blocks[10100]['switch'] = true; blocks[10100]['title'] = 'EMPTY SPACE'; blocks[10100]['width'] = 12; blocks[10050] = {} blocks[10050]['switch'] = true; blocks[10050]['title'] = 'EMPTY SPACE'; blocks[10050]['width'] = 12; blocks[10010] = {} blocks[10010]['switch'] = true; blocks[10010]['title'] = 'EMPTY SPACE'; blocks[10010]['width'] = 12; //FLIPCLOCK blocks['flipclock'] = {} blocks['flipclock']['type'] = 'flipclock'; blocks['flipclock']['title'] = 'flipclock'; blocks['flipclock']['width'] = 12; //MEEK LOGO BLOCK blocks['blocktitle_1'] = {} blocks['blocktitle_1']['type'] = 'blocktitle'; blocks['blocktitle_1']['title'] = 'MEEK'; blocks['blocktitle_1a'] = {} blocks['blocktitle_1a']['type'] = 'blocktitle'; blocks['blocktitle_1a']['title'] = 'Solar panels'; blocks['blocktitle_3'] = {} blocks['blocktitle_3']['type'] = 'blocktitle'; blocks['blocktitle_3']['title'] = 'Gas Consumption'; blocks['blocktitle_4'] = {} blocks['blocktitle_4']['type'] = 'blocktitle'; blocks['blocktitle_4']['title'] = 'Electricity consumption'; blocks['blocktitle_6'] = {} blocks['blocktitle_6']['type'] = 'blocktitle'; blocks['blocktitle_6']['title'] = 'Water consumption'; blocks['blocktitle_100'] = {} blocks['blocktitle_100']['type'] = 'blocktitle'; blocks['blocktitle_100']['title'] = 'EMPTY SPACE'; //---------------------------------------------------------// var columns = {} columns[1] = {} columns[1]['blocks'] = ['blocktitle_1',125,126,127,128,129,130,131,133,10250,10010,10100,10050,10010,10010,'graph_44'] columns[1]['width'] = 4; columns[2] = {} columns[2]['blocks'] = ['weather_owm',123,90,64,71,10250,62,10100,10050,10010,10010,10010,'graph_92'] columns[2]['width'] = 4; columns[3] = {} columns[3]['blocks'] = ['flipclock',buttons.webcam1,buttons.webcam2,buttons.webcam3,buttons.webcam4,10250,10010,10010,'91_1','91_2','91_3','91_4',56,'graph_91'] columns[3]['width'] = 4; columns[4] = {} columns[4]['blocks'] = ['clock',buttons.webcam4] columns[4]['width'] = 2; columns[5] = {} columns[5]['blocks'] = [buttons.webcam5,buttons.webcam6] columns[5]['width'] = 4; columns[6] = {} columns[6]['blocks'] = [buttons.webcam6,'clock'] columns[6]['width'] = 2; //---------------------------------------------------------// var screens = {} screens[1] = {} screens[1]['background'] = '6.jpg'; screens[1]['columns'] = [1,2,3] screens[2] = {} screens[2]['background'] = '6.jpg'; screens[2]['columns'] = [5]
graphs.jsCode: Select all
//add custom javascript in here function afterGetDevices(){ } function getExtendedBlockTypes(blocktypes){ return blocktypes; } function getStatus_56(idx,value,device){ if(parseFloat(device['Usage'])>0){ blocks['56_1']['icon'] = 'fas fa-sun slow-spin'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css blocks['56_2']['icon'] = 'fas fa-sun slow-spin'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css blocks['56_3']['icon'] = 'fas fa-sun slow-spin'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css } else { blocks['56_1']['icon'] = 'fas fa-sun'; blocks['56_2']['icon'] = 'fas fa-sun'; blocks['56_3']['icon'] = 'fas fa-sun'; } } //function getStatus_131(idx,device){ // if(device['Switch']=='On'){ // blocks[131]['icon'] = 'fa fa-bell faa-ring animated fa-4x'; //if you use "fa-spin" instead of "slow-spin" then it is not necessary to add code to custom.css // } // else { // blocks[131]['icon'] = 'fas fa-sun'; // } //}
Code: Select all
function getGraphs(device, popup) { var sensor = 'counter'; var txtUnit = '?'; var currentValue = device['Data']; var decimals = 2; switch (device['Type']) { case 'Rain': sensor = 'rain'; txtUnit = 'mm'; decimals = 1; break; case 'Lux': sensor = 'counter'; txtUnit = 'Lux'; decimals = 0; break; case 'Wind': sensor = 'wind'; if (config['use_beaufort']) { currentValue = Beaufort(device['Speed']); decimals = 0; txtUnit = 'Bft'; } else { currentValue = device['Speed']; decimals = 1; txtUnit = 'm/s'; } break; case 'Temp': case 'Temp + Humidity': case 'Temp + Humidity + Baro': sensor = 'temp'; txtUnit = '°C'; currentValue = device['Temp']; decimals = 1; break; case 'Humidity': sensor = 'temp'; txtUnit = '%'; decimals = 1; break; } switch (device['SubType']) { case 'Percentage': sensor = 'Percentage'; txtUnit = '%'; decimals = 1; break; case 'Custom Sensor': sensor = 'Percentage'; txtUnit = device['SensorUnit']; decimals = 1; break; case 'Gas': txtUnit = 'm3'; break; case 'Energy': case 'kWh': case 'YouLess counter': txtUnit = 'kWh'; currentValue = device['CounterToday']; break; case 'Visibility': txtUnit = 'km'; break; case 'Radiation': case 'Solar Radiation': txtUnit = 'Watt/m2'; decimals = 0; break; case 'Pressure': txtUnit = 'Bar'; break; case 'Soil Moisture': txtUnit = 'cb'; break; case 'Leaf Wetness': txtUnit = 'Range'; break; case 'Voltage': case 'A/D': txtUnit = 'mV'; break; case 'VoltageGeneral': txtUnit = 'V'; break; case 'DistanceGeneral': case 'Distance': txtUnit = 'cm'; break; case 'Sound Level': txtUnit = 'dB'; break; case 'CurrentGeneral': case 'Current': txtUnit = 'A'; break; case 'Weight': txtUnit = 'kg'; break; case 'Waterflow': sensor = 'Percentage'; txtUnit = 'l/min'; break; case 'Counter Incremental': txtUnit = device['CounterToday'].split(' ')[1]; currentValue = device['CounterToday'].split(' ')[0]; break; } currentValue = number_format(currentValue, decimals); showGraph(device['idx'], device['Name'], txtUnit, 'initial', currentValue, false, sensor, popup); } function getGraphByIDX(idx) { getGraphs(alldevices[idx], true); } function getButtonGraphs(device) { if ($('#opengraph' + device['idx']).length === 0) { var html = '<div class="modal fade opengraph' + device['idx'] + '" data-idx="' + device['idx'] + '" id="opengraph' + device['idx'] + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">'; html += '<div class="modal-dialog">'; html += '<div class="modal-content">'; html += '<div class="modal-header">'; html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'; html += '</div>'; html += '<div class="modal-body block_graphpopup_' + device['idx'] + '">' + language.misc.loading; html += '</div>'; html += '</div>'; html += '</div>'; html += '</div>'; $('body').append(html); $('#opengraph' + device['idx']).on('shown.bs.modal', function () { getGraphByIDX($(this).data('idx')); }); } } function showGraph(idx, title, label, range, current, forced, sensor, popup) { if (typeof(popup) === 'undefined') forced = false; if (typeof(forced) === 'undefined') forced = false; if (typeof(_GRAPHS_LOADED[idx]) === 'undefined' || _GRAPHS_LOADED[idx] < (time() - (parseFloat(_GRAPHREFRESH) * 60))) { forced = true; } if ($('.graphcurrent' + idx).length > 0) { $('.graphcurrent' + idx).html(current + ' ' + label); } if (forced || popup) { _GRAPHS_LOADED[idx] = time(); //Check settings for standard graph if (range === 'initial') { switch (settings['standard_graph']) { case 'hours': range = 'last'; break; case 'day': range = 'day'; break; case 'month': range = 'month'; break; } } realrange = range; if (range === 'last') realrange = 'day'; $.ajax({ url: settings['domoticz_ip'] + '/json.htm?username=' + usrEnc + '&password=' + pwdEnc + '&type=graph&sensor=' + sensor + '&idx=' + idx + '&range=' + realrange + '&time=' + new Date().getTime() + '&jsoncallback=?', type: 'GET', async: true, contentType: "application/json", dataType: 'jsonp', success: function (data) { if (data.status === 'ERR') { alert('Could not load graph!'); return; } var buttons = createButtons(idx, title, label, range, current, sensor, popup); title = '<h4>' + title; if (typeof(current) !== 'undefined' && current !== 'undefined') title += ': <B class="graphcurrent' + idx + '">' + current + ' ' + label + '</B>'; title += '</h4>'; var html = '<div class="graph' + (popup ? 'popup' : '') + '" id="graph' + idx + '">'; html += '<div class="transbg col-xs-12">'; html += title + '<br /><div style="margin-left:15px;">' + buttons + '</div><br /><div id="graphoutput' + idx + '"></div>'; html += '</div>'; html += '</div>'; if ($('#graph' + idx + '.graph').length > 0) { $('#graph' + idx + '.graph').replaceWith(html); } $('.block_graph' + (popup ? 'popup' : '') + '_' + idx).html(html); var graphProperties = getGraphProperties(data.result[0], label); graphProperties.dateFormat = settings['shorttime']; if (range === 'month' || range === 'year') { graphProperties.dateFormat = settings['shortdate']; } if (range === 'last') { var fourHoursAgo = moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm'); data.result = data.result.filter(function (element) { return element.d > fourHoursAgo; }); } graphProperties.data = data.result.filter(function (element) { return element.hasOwnProperty(graphProperties.keys[0]); }); if ($('#graphoutput' + idx).length > 0) { makeMorrisGraph(idx, graphProperties); } } }); } } function makeMorrisGraph(idx, graphProperties) { Morris.Bar({ parseTime: false, element: 'graphoutput' + idx, data: graphProperties.data, fillOpacity: 0.2, gridTextColor: '#c3f6fe', lineWidth: 1, stacked: true, xkey: ['d'], ykeys: graphProperties.keys, labels: graphProperties.labels, xLabelFormat: function (x) { return moment(x.src.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat); }, lineColors: settings['lineColors'], barColors: settings['lineColors'], pointFillColors: ['none'], pointSize: 1, hideHover: 'auto', resize: true, hoverCallback: function (index, options, content, row) { var datePoint = moment(row.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat); var text = datePoint + ": "; graphProperties.keys.forEach(function (element, index) { text += (index > 0 ? ' / ' : '') + number_format(row[element], 2) + ' ' + graphProperties.labels[index]; }); return text; } }); } function createButtons(idx, title, label, range, current, sensor, popup) { var buttons = '<div class="btn-group" role="group" aria-label="Basic example">'; buttons += '<button type="button" class="btn btn-default '; if (range === 'last') buttons += 'active'; buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'last\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_hours + '</button> '; buttons += '<button type="button" class="btn btn-default '; if (range === 'day') buttons += 'active'; buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'day\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.today + '</button> '; buttons += '<button type="button" class="btn btn-default '; if (range === 'month') buttons += 'active'; buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'month\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_month + '</button>'; buttons += '</div>'; return buttons; } function getGraphProperties(result, label) { var graphProperties = {}; if (result.hasOwnProperty('uvi')) { graphProperties = { keys: ['uvi'], labels: [label], }; } else if (result.hasOwnProperty('lux')) { graphProperties = { keys: ['lux'], labels: ['Lux'], }; } else if (result.hasOwnProperty('lux_avg')) { graphProperties = { keys: ['lux_avg', 'lux_min', 'lux_max'], labels: ['Lux average', 'Minimum', 'Maximum'], }; } else if (result.hasOwnProperty('gu') && result.hasOwnProperty('sp')) { graphProperties = { keys: ['gu', 'sp'], labels: ['m/s', 'm/s'], }; } else if (result.hasOwnProperty('ba') && result.hasOwnProperty('hu') && result.hasOwnProperty('te')) { graphProperties = { keys: ['ba', 'hu', 'te'], labels: ['hPa', '%', _TEMP_SYMBOL], }; } else if (result.hasOwnProperty('hu') && result.hasOwnProperty('te')) { graphProperties = { keys: ['hu', 'te'], labels: ['%', _TEMP_SYMBOL], }; } else if (result.hasOwnProperty('te')) { graphProperties = { keys: ['te'], labels: [_TEMP_SYMBOL], }; } else if (result.hasOwnProperty('hu')) { graphProperties = { keys: ['hu'], labels: ['%'], }; } else if (result.hasOwnProperty('mm')) { graphProperties = { keys: ['mm'], labels: ['mm'], }; } else if (result.hasOwnProperty('v_max')) { graphProperties = { keys: ['v_max'], labels: [label], }; } else if (result.hasOwnProperty('v2')) { graphProperties = { keys: ['v2', 'v'], labels: [label, label], }; if (label === 'kWh' && realrange === 'day') { graphProperties.labels = ['Watt', 'Watt']; } } else if (result.hasOwnProperty('v')) { if (label === 'kWh' && realrange === 'day') { label = 'Wh'; } if (data.method === 1) { graphProperties = { keys: ['eu'], labels: [label], }; } else { graphProperties = { keys: ['v'], labels: [label], }; } } else if (result.hasOwnProperty('eu')) { graphProperties = { keys: ['eu'], labels: [label], }; } else if (result.hasOwnProperty('u')) { graphProperties = { keys: ['u'], labels: [label], }; } else if (result.hasOwnProperty('u_max')) { graphProperties = { keys: ['u_max', 'u_min'], labels: ['?', '?'], }; } return graphProperties; }
Thanks..
a short how to??
Do you replace graphs? Or where to place...
Is this not better to adjust in the css? when ther eis a update the grpahs are gone?
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups
- Thuis
- Posts: 251
- Joined: Tuesday 11 September 2018 11:36
- Target OS: Linux
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Code: Select all
var config = {}
config['language'] = 'nl_NL';
config['domoticz_ip'] = 'http://xxx.xxx.xxx.xxx:xxxxxx';
config['user_name'] = 'xxxxxxxxxxxx';
config['pass_word'] = 'xxxxxxxxxxx';
config['app_title'] = 'Huis bediening';
config['dashticz_php_path']='./vendor/php/';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '180';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '15';
config['standby_after'] = '10';
config['auto_swipe_back_to'] = '1';
config['auto_swipe_back_after'] = '600';
config['auto_slide_pages'] = '0';
config['slide_effect'] = 'slide'; /*slide' or 'fade' or 'cube' or 'coverflow' or 'flip' */
config['standard_graph'] = 'month';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = 'https://calendar.google.com/calendar/ical/xxxxxx%40gmail.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/basic.ics';
config['idx_moonpicture'] = '';
config['switch_horizon'] = '';
config['selector_instead_of_buttons'] = 1;
config['auto_positioning'] = 0;
config['use_favorites'] = 1;
config['last_update'] = 1;
config['hide_topbar'] = 1;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['logo'] = '';
config['last_update'] = 0;
config['gm_api'] = '';
config['boss_stationclock'] = 'BlackBoss'; /*NoBoss / BlackBoss / RedBoss / ViennaBoss */
config['hide_seconds_stationclock'] = 0;
/* Luchtkwaliteit*/
config['longfonds_zipcode'] = 'xxxxxx';
config['longfonds_housenumber'] = 'xxxxx';
/*OpenWeather */
config['owm_api'] = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
config['owm_city'] = 'xxxxxxxxx';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['static_weathericons'] = 1;
config['owm_api'] = '';
config['owm_city'] = 'xxxxxxxx';
config['owm_lang'] = '';
config['owm_cnt'] = '4';
/*Vuilnis Module */
config['dashticz_php_path']='./vendor/dashticz/';
config['garbage_company'] = 'cure';
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = 'xxxxxxx';
config['garbage_street'] = 'xxxxx';
config['garbage_housenumber'] = 'xxx';
config['garbage_maxitems'] = '12';
config['garbage_width'] = '12';
config['garbage_hideicon'] = 0;
config['garbage_use_names'] = true;
config['garbage_use_colors'] = true;
config['garbage_icon_use_colors'] = true;
config['garbage_use_cors_prefix'] = true;
config['garbage'] = {
gft: {kliko: 'green', code: '#FF8C00', name: 'GFT', icon: 'img/garbage/kliko_brown.png'},
pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
rest: {kliko: 'grey', code: '#7CFC00', name: 'Restafval', icon: 'img/garbage/kliko_green.png'},
papier: {kliko: 'blue', code: '#00BFFF', name: 'Papier', icon: 'img/garbage/kliko_blue.png'},
kca: {kliko: 'red', code: '#b21807', name: 'Chemisch afval', icon: 'img/garbage/kliko_red.png'},
brown: {kliko: 'brown', code: '#7c3607', name: 'Bruin', icon: 'img/garbage/kliko_brown.png'},
black: {kliko: 'black', code: '#000000', name: 'Zwart', icon: 'img/garbage/kliko_black.png'},
milieu: {kliko: 'yellow', code: '#f9e231', name: 'Geel', icon: 'img/garbage/kliko_yellow.png'},
kerstboom: {kliko: 'green', code: '#375b23', name: 'Kerstboom', icon: 'img/garbage/tree.png'},}
/*Graph*/
config['lineColors'] = ['#f1c40f', '#40e0d0', '#eee'];
config['pointFillColors'] = ['#e00', '#0e0', '#00e'];
/*iFrames*/
var frames = {}
frames.weather = {refreshiframe:10000,height:230,frameurl:"https://forecast.io/embed/#lat=xx.xxxxxx&lon=x.xxxxxx&name=xxxxx&country=NL&lang=nl&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si",width:12}
frames.secpanel = {refreshiframe:10000000,height:375,frameurl:"http://xxxxx.xxx.xxx.xxx:xx/secpanel/", width:12}
frames.windfinder = {refreshiframe:10000000,height:200, frameurl:"https://nl.windfinder.com/#11/xx.xxxx/x.xxxx/sfc", width:6}
/* frames.photo = {refreshiframe:10000,height:900,frameurl:"http://xxx.xxx.xxx.xxx:xxx/xxxx/xxxx/xxxxxx/xxxxx",width:12}*/
/*MAPS*/
/*
var maps = {}
maps.location = { height: 256, width:12, latitude: xx.xxxxxxx, longitude: x.xxxxxxx, zoom:10 }
*/
/*Kalender*/
var calendars = {}
calendars.private = { fontsize:28, image:'/icons/calendar.png', maxitems: 10, icalurl: 'https://calendar.google.com/calendar/ical/[email protected]/xxxxxxxxxxxxxxxx/basic.ics' }
/*Internet Radio*/
/*var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"NPO Radio 2","file":"http://icecast.omroep.nl/radio2-bb-mp3"},
{"track":2,"name":"Radio Rijnmond","file":"http://d2e9xgjjdd9cr5.cloudfront.net/icecast/rijnmond/radio-mp3"},
{"track":3,"name":"Sublime FM","file":"http://Stream.sublimefm.nl/SublimeFM_mp3 "},
{"track":4,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
{"track":5,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
{"track":6,"name":"Omroep Brabant","file":"http://streaming.omroepbrabant.nl/mp3"},];
*/
/*TVgids*/
var tvguide = {}
tvguide.dutch = { key:'dutch', icon: "fa fa-television", width:12, channels: [1,2,3,4,5,37,6,7,92,460,34,413,29,18], maxitems: 10 }
/*Knoppen*/
var buttons = {}
buttons.buienradar = {key: 'buienradar' , width:12, isimage:true, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=300&h=256'}
buttons.windfinder = {key: 'windfinder' , width:12, isimage:true, image: 'https://nl.windfinder.com/#11/xx.xxxxxx/x.xxxxx/sfc'}
buttons.ipcam1 = {key: 'cam1' , width:12, isimage:true, refreshimage: 1000, image: 'http://xxxxx:xxxxx/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=xxxx&pwd=xxxxx'}
buttons.ipcam2 = {key: 'cam2' , width:12, isimage:true, image: ' https://spacetrack.eu/iss/globe.php?114126457&'}
buttons.ipcam3 = {key: 'cam3' , width:12, isimage:true, image: 'rtsp://admin:xxxxx@xxxxxx:554/onvif1'}
buttons.storms = {key: 'iss', width:12, isimage:true, refreshimage:60000, image: 'https://burze.dzis.net/burze_europa_anim.gif' }
buttons.domoticz = {key: 'log' , width:4, icon:'fa fa-microchip', title: 'Domoticz Log', log:true, level: 2}
buttons.school = {key: 'school' , width:12, image:'img/icons/school.png', title: 'School site, met handige informatie', url:'https://www.xxxxxx.nl/',framewidth:580, frameheight: 520}
buttons.vakantie = {key: 'vakantie' , width:12, image:'img/icons/vakantie3.png', title: 'School Vakanties voor alle regios', url: 'https://opendata.rijksoverheid.nl/v1/sources/rijksoverheid/infotypes/schoolholidays/schoolyear/2018-2019?output=html',framewidth:580, frameheight: 520}
buttons.energie = {key: 'EnergiePag', width:12, image: 'img/icons/huisenergie.png', title: 'Ga naar Energie' ,slide:2 }
buttons.home = {key: 'Homepag' , width:12, image: 'img/icons/thuispag.png', title: 'Ga naar Thuis Scherm' ,slide:1 }
buttons.bedien = {key: 'Bedinepag' , width:12, image: 'img/icons/bediening1.png', title: 'Ga naar Huis Besturing' ,slide:3 }
buttons.energieS = {key: 'EnergiePagS',width:4, image: 'img/icons/huisenergie.png', title: 'Ga naar Energie' ,slide:2 }
buttons.homeS = {key: 'HomepagS' , width:4, image: 'img/icons/thuispag.png', title: 'Ga naar Thuis Scherm' ,slide:1 }
buttons.bedienS = {key: 'BedinepagS', width:4, image: 'img/icons/bediening1.png', title: 'Ga naar Huis Besturing' ,slide:3 }
/*buttons.verkeer = { width:12, isimage:true, image:'https://www.anwb.nl/verkeer/verkeerstool.js', url: 'https://www.anwb.nl/verkeer/'}*/
/*buttons.moon = {key: 'moon'width:12, isimage:true, refreshimage:60000, image: 'moon'}*/
/*buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}*/
buttons.honeywell = {key: 'honeywell', width:12, isimage:true, image:'img/icons/HoneywellThermostaat.png', title: 'Honeywell Thermostaat' }
buttons.secpanel = {key: 'secpanel', width:12, image:'http://xxx.xxx.xxx.xxx:xxxx/secpanel/', title:'Alarm Panel'}
/*Blokken*/
var blocks = {}
blocks['news_1'] = {}
blocks['news_1']['feed'] = 'http://www.nu.nl/rss/Algemeen';
blocks['news_1']['icon'] = "fa fa-rss-square";
blocks['news_1']['maxheight'] = 250;
blocks['news_2'] = {}
blocks['news_2']['feed'] = 'http://www.nu.nl/rss/tech';
blocks['news_2']['icon'] = 'fa fa-rss-square'
blocks['news_2']['maxheight'] = 250;
blocks['longfonds'] = {}
blocks['longfonds']['width'] = 4;
blocks['sunrise'] = {}
blocks['sunrise']['width'] = 6;
blocks['s1'] = {}
blocks['s1']['title'] = 'Alle Lampen UIT'
blocks['s1']['width'] = 6;
blocks['s2'] = {}
blocks['s2']['title'] = 'Alle Lampen AAN'
blocks['s2']['width'] = 6;
/* Sommige images uitgeschakeld, want deze knipperen de hele tijd, terug naar icoontjes .... */
/* HET WEER - BUIENRADAR */
blocks[290] = {}
blocks[290]['title'] = 'Buiten Temperatuur';
/* blocks[290]['image'] = '';*/
blocks[290]['width'] = 4;
blocks[291] = {}
blocks[291]['title'] = 'Luchtvochtigheid Buiten';
/* blocks[291]['image'] = '';*/
blocks[291]['width'] = 4;
blocks[292] = {}
blocks[292]['title'] = 'Luchtdruk Buiten';
/* blocks[292]['image'] = '';*/
blocks[292]['width'] = 4;
blocks[293] = {}
blocks[293]['title'] = 'Windkracht';
/* blocks[293]['image'] = '';*/
blocks[293]['width'] = 4;
blocks[294] = {}
blocks[294]['title'] = 'Zicht';
blocks[294]['icon'] = 'fa fa-eye';
/* blocks[294]['image'] = '';*/
blocks[294]['width'] = 4;
blocks[295] = {}
blocks[295]['title'] = 'UV Straling';
blocks[295]['icon'] = 'fa fa-sun-o';
/* blocks[295]['image'] = '';*/
blocks[295]['width'] = 4;
blocks[296] = {}
blocks[296]['title'] = 'Regenval Actueel';
/* blocks[296]['image'] = '';*/
blocks[296]['width'] = 4;
blocks[297] = {}
blocks[297]['title'] = 'Regen Voorspelling';
/* blocks[297]['image'] = '';*/
blocks[297]['icon'] = 'fa fa-umbrella';
blocks[297]['width'] = 4;
blocks[298] = {}
blocks[298]['title'] = 'Weer Voorspelling';
/* blocks[298]['image'] = '';*/
blocks[298]['icon'] = 'fa fa-sun-cloud';
blocks[298]['width'] = 6;
blocks[298]['switch'] = true;
/* Bliksemteller*/
blocks[149] = {}
blocks[149]['title'] = 'Bliksem straal 50 km';
blocks[149]['width'] = 6;
/*blocks[149]['image'] = '/icons/lightningcloud.png';*/
/* blocks[149]['hide_data'] = true;*/
blocks[149]['icon'] = 'fa fa-bolt';
/* Gevoels temperatuur, Windchill */
blocks[121] = {}
blocks[121]['title'] = '';
blocks[121]['icon'] = 'fa fa-thermometer-half';
/*blocks[121]['image'] = '/icons/windchill.png';*/
blocks[121]['width'] = 6;
/* Kamer Thermostaat */
/*Huiskamer Temperatuur */
blocks[128] = {}
blocks[128]['title'] = 'Temp. Woonk. Therm.';
/* blocks[128]['image'] = '/icons/thermostemp.png'*/
blocks[128]['width'] = 6;
/*Buiten Tempratuur Via Thermostaat */
blocks[129] = {}
blocks[129]['title'] = 'Temp. Buiten Thermostaat';
/*blocks[129]['image'] = '/icons/thermobuiten.png';*/
blocks[129]['width'] = 6;
/*Ingestelde Huiskamer Temperatuur*/
blocks[131] = {}
blocks[131]['title'] = 'Ingestelde Temperatuur';
/*blocks[131]['image'] = '/icons/HoneywellThermostaat.png';*/
blocks[131]['width'] = 6;
/*CV aan of uit */
blocks[130] = {}
blocks[130]['width'] = 6;
blocks[130]['title'] = 'Programma Kachel';
/* Temperaturen Luchtdruk Luchtvochtigheid*/
/* Xiaomi Humidity Sensor Temp Pressure Woonkamer*/
blocks[146]={}
blocks[146]['title'] = 'Luchtv. Woonkamer';
/* blocks[146]['image'] = '/icons/guage48.png'*/ ;
blocks[146]['width'] = 6;
blocks[147]={}
blocks[147]['title'] = 'Luchtdr. Woonkamer';
blocks[147]['width'] = 6;
blocks[145]={}
blocks[145]['title'] = 'Temp. Woonkamer';
blocks[145]['width'] = 6;
/* Xiaomi Humidity Sensor Temp Pressure Zoe*/
blocks[160]={}
blocks[160]['title'] = 'Luchtv. Kamer Zoë';
/*blocks[160]['image'] = '/icons/guage48.png';*/
blocks[160]['width'] = 6;
blocks[161]={}
blocks[161]['title'] = 'Luchtdr. Kamer Zoë';
blocks[161]['width'] = 6;
blocks[159]={}
blocks[159]['title'] = 'Temp. Kamer Zoë';
blocks[159]['width'] = 6;
/* Xiaomi Humidity Sensor Temp Pressure Lara*/
blocks[156]={}
blocks[156]['title'] = 'Luchtv. Kamer Lara';
/*blocks[156]['image'] = '/icons/guage48.png';*/
blocks[156]['width'] = 6;
blocks[157]={}
blocks[157]['title'] = 'Luchtdr. Kamer Lara';
blocks[157]['width'] = 6;
blocks[155]={}
blocks[155]['title'] = 'Temp. Kamer Lara';
blocks[155]['width'] = 6;
/* Xiaomi Humidity Sensor Temp Pressure Badkamer*/
blocks[286]={}
blocks[286]['title'] = 'Luchtv. Badkamer';
/*blocks[286]['image'] = '/icons/guage48.png';*/
blocks[286]['width'] = 6;
blocks[287]={}
blocks[287]['title'] = 'Luchtdr. Badkamer';
blocks[287]['width'] = 6;
blocks[285]={}
blocks[285]['title'] = 'Temp. Badkamer';
blocks[285]['width'] = 6;
/* Xiaomi Humidity Sensor Temp Pressure CV ruimte*/
blocks[221]={}
blocks[221]['title'] = 'Luchtv. CV Ruimte';
/*blocks[221]['image'] = '/icons/guage48.png';*/
blocks[221]['width'] = 6;
blocks['222_3']={}
blocks['222_3']['title'] = 'Luchtdr. CV Ruimte';
blocks['222_3']['width'] = 6;
blocks[223]={}
blocks[223]['title'] = 'Temp. CV Ruimte';
blocks[223]['width'] = 6;
/*P1 Smartmeter Elektr */
/* KWh verbruik actueel */
blocks['94_1'] ={}
blocks['94_1']['title'] = 'Energie Actueel';
blocks['94_1']['width'] = 4;
blocks['94_1']['switch'] = true;
/* Verbruik KWh Vandaag */
blocks['94_2'] ={}
blocks['94_2']['title'] = 'Energie vandaag';
blocks['94_2']['width'] = 4;
blocks['94_2']['switch'] = true;
/* Totale KWh verbruik */
blocks['94_3'] ={}
blocks['94_3']['title'] = 'Energie Totaal';
blocks['94_3']['width'] = 4;
blocks['94_3']['switch'] = true;
/*blocks['94_3']['image'] = 'current48.png';*/
/* Binnenkomend Voltage */
blocks[95] ={}
blocks[95]['width'] = 4;
blocks[95]['title'] = 'Inkomend Voltage';
blocks[95]['switch'] = true;
/* blocks[95]['image'] = 'current48.png'; */
/* Gas meter verbruik vandaag */
blocks['96_1'] ={}
blocks['96_1']['width'] = 4;
blocks['96_1']['title'] = 'Gas Vandaag';
blocks['96_1']['switch'] = true;
/*blocks['96_1']['image'] = '/icons/Gas48.png';*/
/* Gasmeter verbruik totaal */
blocks['96_2'] ={}
blocks['96_2']['width'] = 4;
blocks['96_2']['title'] = 'Gas Totaal';
blocks['96_2']['switch'] = true;
/*Kosten Energie*/
/*Elektra vandaag*/
blocks['134'] ={}
blocks['134']['width'] = 6;
blocks['134']['title'] = 'Elektra Kosten Vandaag';
blocks['134']['switch'] = false;
/*Gas vandaag */
blocks['135'] ={}
blocks['135']['width'] = 6;
blocks['135']['title'] = 'Gas Kosten Vandaag';
blocks['135']['switch'] = false;
/*Elektra totaal*/
blocks['136'] ={}
blocks['136']['width'] = 6;
blocks['136']['title'] = 'Elektra Kosten Totaal';
blocks['136']['switch'] = false;
/*Gas totaal */
blocks['137'] ={}
blocks['137']['width'] = 6;
blocks['137']['title'] = 'Gas Kosten Totaal';
blocks['137']['switch'] = false;
/* Verlichtingen, Dimmers en Verlichting schakelaars*/
/* Xiaomi Gateway Kleuren */
blocks[1] = {}
blocks[1]['width'] = 6;
/* Xiaomi Ringtone Selector */
blocks[3] = {}
blocks[3]['width'] = 6;
/* Alle Lampen AAN*/
blocks[233] = {}
blocks[233]['title'] = 'Alle Lampen AAN';
/*blocks[233]['image'] = '/icons/YeeLight48_On.png';*/
blocks[233]['width'] = 4;
/* Alle Lampen UIT*/
blocks[234] = {}
blocks[234]['title'] = 'Alle Lampen UIT';
/*blocks[234]['image'] = '/icons/YeeLight48_Off.png';*/
blocks[234]['width'] = 4;
/* Keukenraam lampen*/
blocks[177] = {}
blocks[177]['title'] = 'Keuken Raam Lampen';
/*blocks[177]['image'] = '/icons/PhilipsLED48_On.png'; */
blocks[177]['width'] = 4;
/* Aanrecht lampen*/
blocks[172] = {}
blocks[172]['title'] = 'Aanrecht Lampen';
/*blocks[172]['image'] = '/icons/PhilipsLED48_On.png' ;*/
blocks[172]['width'] = 4;
/* Kidstafel LED*/
blocks[208] = {}
blocks[208]['title'] = 'Kidstafel LED';
/*blocks[208]['image'] = '/icons/RGB-LED48_On.png';*/
blocks[208]['width'] = 4;
/* TV lampen LED Strip midden op kast*/
blocks[178] = {}
blocks[178]['title'] = 'LED Strip TV Kast';
/*blocks[178]['image'] = '/icons/RGB-LED48_On.png';*/
blocks[178]['width'] = 4;
/* TV lampen LED Links */
blocks[239] = {}
blocks[239]['title'] = 'LED TV Links';
/*blocks[239]['image'] = '/icons/YeeLight48_On.png';*/
blocks[239]['width'] = 4;
/* TV lampen LED Links */
blocks[240] = {}
blocks[240]['title'] = 'LED TV Rechts';
/*blocks[240]['image'] = '/icons/YeeLight48_On.png';*/
blocks[240]['width'] = 4;
/* Kamerraam lampen*/
blocks[174] = {}
blocks[174]['title'] = 'Kamerraam Lampen';
/*blocks[174]['image'] = '/icons/PhilipsLED48_On.png';*/
blocks[174]['width'] = 4;
/* Bank lampen*/
blocks[236] = {}
blocks[236]['title'] = 'Bank Lamp';
/*blocks[236]['image'] = '/icons/YeeLight48_On.png';*/
blocks[236]['width'] = 4;
/* Eettafel lampen*/
blocks[175] = {}
blocks[175]['title'] = 'Eettafel Lampen';
/*blocks[175]['image'] = '/icons/PhilipsLED48_On.png';*/
blocks[175]['width'] = 4;
/* Wand lampen*/
blocks[182] = {}
blocks[182]['title'] = 'Wandlampen';
/*blocks[182]['image'] = '/icons/TL-848_On.png';*/
blocks[182]['width'] = 4;
/* Kastlamp*/
blocks[235] = {}
blocks[235]['title'] = 'Kastlamp';
/*blocks[235]['image'] = 'img/icons/YeeLight48_On.png';*/
blocks[235]['width'] = 4;
/* Kleurenbuis*/
blocks[185] = {}
blocks[185]['title'] = 'Kleurenbuis';
/* blocks[185]['image'] = '/icons/RGB-LED48_On.png';*/
blocks[185]['width'] = 4;
/* Tuin lampen*/
blocks[190] = {}
blocks[190]['title'] = 'Tuin Lampen';
blocks[190]['width'] = 4;
/* Deur en raam Sensoren */
/* Xiaomi Raam Sensor */
blocks[218] = {}
blocks[218]['title'] = 'Kleine Kamertje';
blocks[218]['width'] = 6;
blocks[218]['image'] = '/icons/Windowanje.png';
/* Xiaomi Raam Sensor */
blocks[224] = {}
blocks[224]['title'] = 'Slaapkamer';
blocks[224]['width'] = 6;
blocks[224]['image'] = '/icons/WindowPaars.png';
/* Xiaomi Deursensor */
blocks[99] = {}
blocks[99]['title'] = 'Voordeur';
blocks[99]['width'] = 6;
/* Xiaomi Raam Sensor */
blocks[100] = {}
blocks[100]['title'] = 'Keukenraam'
blocks[100]['width'] = 6;
blocks[100]['image'] = '/icons/WindowLBlauw.png';
/* Xiaomi Deur Sensor */
blocks[154] = {}
blocks[154]['title'] = 'Bijkeukendeur'
blocks[154]['width'] = 6;
/* Xiaomi Zoe kamer Sensor */
blocks[283] = {}
blocks[283]['title'] = "Zoë's Kamer"
blocks[283]['width'] = 6;
blocks[283]['image'] = '/icons/WindowRose.png';
/* Xiaomi Garage deur Sensor */
blocks[282] = {}
blocks[282]['title'] = 'Garage Deur'
blocks[282]['width'] = 6;
/* Overige Schakelaars/*
/* Xiaomi Boiler Schakelaar */
blocks[152] = {}
blocks[152]['title'] = 'Boiler Aan/Uit'
blocks[152]['image'] = '/icons/Boiler48_On.png'
blocks[152]['width'] = 12;
/* Xiaomi Mech. Afzuiging Fan */
blocks[150] = {}
blocks[150]['title'] = 'Mechanische Afzuiging Huis Ventilator'
blocks[150]['image'] = '/icons/Venting48_On.png'
blocks[150]['width'] = 12;
/*SYSTEEM INFORMATIE*/
/* Gebr. Ruimte HDD */
blocks[276] = {}
blocks[276]['title'] = 'Temp. CPU'
blocks[276]['width'] = 6;
/* CPU temp */
blocks[277] = {}
blocks[277]['title'] = 'Temp. HDD'
blocks[277]['width'] = 6;
/* Temp meterkast */
blocks[279] = {}
blocks[279]['title'] = 'Temp. Domotica-PC Ruimte'
blocks[279]['width'] = 6;
/* Hum Meterkast */
blocks[280] = {}
blocks[280]['title'] = 'Luchtv. Domotica-PC Ruimte'
blocks[280]['width'] = 6;
/*Home Fencing*/
blocks[143] = {}
blocks[143]['title'] = 'xxxxx'
blocks[143]['width'] = 6;
blocks[143]['image'] = '/icons/papa.png'
blocks[143]['hide_data'] = true;
blocks[144] = {}
blocks[144]['title'] = 'xxxxx'
blocks[144]['width'] = 6;
blocks[144]['image'] = '/icons/mama.png'
blocks[144]['hide_data'] = true;
blocks[257] = {}
blocks[257]['title'] = 'Huis Alarm Actief';
/* blocks[257]['image'] = '';*/
blocks[257]['icon'] = 'fa fa-home';
blocks[257]['width'] = 6;
/* Alarm Paneel */
blocks[151] = {}
blocks[151]['title'] = 'Alarm Paneel'
/* blocks[151]['image'] = '/icons/Venting48_On.png'*/
blocks[151]['width'] = 12;
/*Block-Header*/
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Gas en Elektra Verbruik'
blocks['blocktitle_1']['width'] = 12;
blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Kamer Thermostaat'
blocks['blocktitle_2']['width'] = 12;
blocks['blocktitle_2']['image'] = 'icons/calendar.png';
blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Verlichting'
blocks['blocktitle_3']['width'] = 12;
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Agenda / Kalender'
blocks['blocktitle_4']['icon'] = 'fas.fa-calendar' /*Laatste wijziging, waarom werkt dit niet ?*/
blocks['blocktitle_4']['width'] = 12;
blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['icon'] = 'fa-calendar' /*Laatste wijziging, waarom werkt dit niet ?*/
blocks['blocktitle_5']['title'] = 'Nieuws / Files / Weer'
blocks['blocktitle_5']['width'] = 12;
blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Huis Klimaat'
blocks['blocktitle_6']['width'] = 12;
blocks['blocktitle_7'] = {}
blocks['blocktitle_7']['type'] = 'blocktitle';
blocks['blocktitle_7']['title'] = 'Systeem Informatie'
blocks['blocktitle_7']['width'] = 12;
blocks['camtitle_1'] = {}
blocks['camtitle_1']['type'] = 'blocktitle';
blocks['camtitle_1']['title'] = 'Camera'
blocks['camtitle_1']['width'] = 12;
/*Columns*/
var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','settings']
columns[1] = {}
columns[1]['blocks'] = ['currentweather_big_owm',buttons.ipcam1,farmes.secpanel,257,99,100,154,224,218,283,282] //remark: idx 144 produces 2 blocks, so you can use: '144_1' and '144_2' (or just 144 if you want one)
columns[1]['width'] = 3;
columns[2] = {}
columns[2]['blocks'] = [ buttons.school, buttons.vakantie,'garbage',calendars.private, 'news_1',tvguide.dutch]
columns[2]['width'] = 3;
columns[3] = {}
columns[3]['blocks'] = ['traffic',121,149,'longfonds',290,291,292,293,294,295,296,297,298,'sunrise','s1','s2']
columns[3]['width'] = 4;
columns[4] = {}
columns[4]['blocks'] = ['stationclock','clock',143,144,buttons.storms,buttons.buienradar,buttons.energie]
columns[4]['width'] = 2;
columns[5] = {}
columns[5]['blocks'] = ['blocktitle_6',128,145,159,155,146,160,156,147,131,130]
columns[5]['width'] = 4;
columns[6] = {}
columns[6]['blocks']=['96_1','96_2',95,'graph_96',135,137,150,152,buttons.home]
columns[6]['width'] = 4;
columns[7] = {}
columns[7]['blocks'] = ['94_1','94_2','94_3','graph_94',134,136,buttons.bedien]
columns[7]['width'] = 4;
columns[8] = {}
columns[8]['blocks'] = ['clock']
columns[8]['width'] = 1;
columns[9] = {}
columns[9]['blocks'] = ['blocktitle_3',233,234,177,172,208,178,174,215,175,182,213,185,190]
columns[9]['width'] = 6;
columns[10] = {}
columns[10]['blocks'] = []
columns[10]['width'] = 1;
columns[11] = {}
columns[11]['blocks'] = ['blocktitle_7',276,277,279,280,buttons.homeS,buttons.domoticz,buttons.energieS]
columns[11]['width'] = 4;
/*
columns[12] = {}
columns[12]['blocks'] = [buttons.home,buttons.energie]
columns[12]['width'] = 3;
*/
columns[31] = {}
columns[31]['blocks'] = columns[9]['blocks']
columns[31]['width'] = 12;
/*Standby*/
var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['weather_owm','clock','94_1','96_1',128,145,159,155,146,160,156,147,157,161]
columns_standby[1]['width'] = 12;
/*screens*/
var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 1920;
screens['default']['maxheight'] = 1080;
screens['default'][1] = {}
screens['default'][1]['background'] = 'bg27a.jpg';
screens['default'][1]['columns'] = [3,1,2,4]
screens['default'][2] = {}
screens['default'][2]['background'] = 'bg27a.jpg';
screens['default'][2]['columns'] = [6,5,7]
screens['default'][3] = {}
screens['default'][3]['background'] = 'bg27a.jpg';
screens['default'][3]['columns'] = [10,9,11]
screens['default'][4] = {}
screens['default'][4]['background'] = 'bg27a.jpg';
screens['default'][4]['columns'] = [10,9,11]
/*Default 2 screen test*/
screens['default2'] = {}
screens['default2']['maxwidth'] = 1600;
screens['default2']['maxheight'] = 1200;
screens['default2'][1] = {}
screens['default2'][1]['background'] = 'bg27a.jpg';
screens['default2'][1]['columns'] = [3,1,2,4]
screens['default2'][2] = {}
screens['default2'][2]['background'] = 'bg27a.jpg';
screens['default2'][2]['columns'] = [6,5,7]
screens['default2'][3] = {}
screens['default2'][3]['background'] = 'bg27a.jpg';
screens['default2'][3]['columns'] = [10,9,11]
screens['default2'][4] = {}
screens['default2'][4]['background'] = 'bg27a.jpg';
screens['default2'][4]['columns'] = [10,9,11]
/* Screen Tablet/Phone*/
screens['phone'] = {}
screens['phone']['maxwidth'] = 360;
screens['phone']['maxheight'] = 672;
screens['phone'][1] = {}
screens['phone'][1]['background'] = 'bg10.jpg';
screens['phone'][1]['columns'] = [1,2,3,4]
screens['phone'][2] = {}
screens['phone'][2]['background'] = 'bg10.jpg';
screens['phone'][2]['columns'] = [6,5,7]
screens['phone'][3] = {}
screens['phone'][3]['background'] = 'bg10.jpg';
screens['phone'][3]['columns'] = [10,31,11]
screens['phone'][4] = {}
screens['phone'][4]['background'] = 'bg10.jpg';
screens['phone'][4]['columns'] = [10,31,11]
I Love Domoticz ! And the community around it :-)
-
- Posts: 2262
- Joined: Monday 29 August 2016 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
You have to remove the quotes around buttons.buienradar in your column definition, like:Mayki wrote: ↑Sunday 14 July 2019 0:19 Please help.
I would like to add buttons.buienradar to the desktop but I don't want to display it. What am I doing wrong?
CONFIG.jsCode: Select all
var config = {} config['domoticz_ip'] = 'http://192.168.0.118:8080'; config['user_name'] = ''; config['pass_word'] = ''; config['app_title'] = 'Dashticz'; config['room_plan'] = '0'; config['domoticz_refresh'] = '5'; config['dashticz_refresh'] = '60'; config['default_news_url'] = 'https://www.zing.cz/feed/'; config['news_scroll_after'] = '7'; config['default_cors_url'] = ''; config['dashticz_php_path'] = './vendor/dashticz/'; config['standby_call_url'] = ''; config['standby_call_url_on_end'] = ''; config['theme'] = 'default'; config['background_image'] = 'img/bg7.jpg'; config['standby_after'] = '0'; config['auto_swipe_back_to'] = '1'; config['auto_swipe_back_after'] = '10'; config['auto_slide_pages'] = ''; config['slide_effect'] = 'slide'; config['standard_graph'] = 'hours'; config['blink_color'] = '255, 255, 255, 1'; config['language'] = 'cs_CZ'; config['timeformat'] = 'DD-MM-YY HH:mm'; config['calendarformat'] = 'dd DD.MM HH:mm'; config['calendarlanguage'] = 'en_US'; config['calendarurl'] = ''; config['boss_stationclock'] = 'RedBoss'; config['gm_api'] = 'AIzaSyBN7k7AXzBlyaheY2I-omfrpbzgRCp8wCg'; config['gm_zoomlevel'] = '14'; config['gm_latitude'] = '49.782237'; config['gm_longitude'] = '18.433633'; config['speak_lang'] = 'en-US'; config['wu_api'] = ''; config['wu_city'] = 'Amsterdam'; config['wu_name'] = ''; config['wu_country'] = 'NL'; config['owm_api'] = ''; config['owm_city'] = 'Mainaschaff'; config['owm_name'] = ''; config['owm_country'] = 'de'; config['owm_lang'] = ''; config['owm_cnt'] = '4'; config['idx_moonpicture'] = ''; config['longfonds_zipcode'] = ''; config['longfonds_housenumber'] = ''; config['switch_horizon'] = ''; config['host_nzbget'] = ''; config['spot_clientid'] = ''; config['sonarr_url'] = ''; config['sonarr_apikey'] = ''; config['sonarr_maxitems'] = ''; config['garbage_company'] = ''; config['garbage_icalurl'] = ''; config['google_api_key'] = ''; config['garbage_calendar_id'] = ''; config['garbage_zipcode'] = ''; config['garbage_street'] = ''; config['garbage_housenumber'] = ''; config['garbage_housenumberadd'] = ''; config['garbage_maxitems'] = ''; config['garbage_width'] = ''; config['setpoint_min'] = '5'; config['setpoint_max'] = '40'; config['loginEnabled'] = 0; config['disable_update_check'] = 0; config['no_rgb'] = 0; config['auto_positioning'] = 0; config['use_favorites'] = 0; config['disable_googleanalytics'] = 0; config['last_update'] = 1; config['hide_topbar'] = 0; config['security_button_icons'] = 0; config['edit_mode'] = 0; config['hide_seconds'] = 0; config['hide_seconds_stationclock'] = 0; config['owm_days'] = 0; config['owm_min'] = 0; config['use_fahrenheit'] = 0; config['use_beaufort'] = 0; config['translate_windspeed'] = 1; config['static_weathericons'] = 0; config['hide_mediaplayer'] = 0; config['garbage_hideicon'] = 0; config['garbage_icon_use_colors'] = 1; config['garbage_use_colors'] = 0; config['garbage_use_names'] = 0; config['garbage_use_cors_prefix'] = 1; var buttons = {} buttons.buienradar = {width:12, isimage:true, refreshimage:60000, image: 'http://meteox.com/images.aspx?jaar=-3&soort=loop1uur'} var blocks = {} blocks[14] = {} blocks[14]['width'] = 4; blocks[14]['switch'] = true; blocks[14]['hide_data'] = false; blocks[14]['show_lastupdate'] = false; blocks[19] = {} blocks[19]['width'] = 4; blocks[19]['switch'] = true; blocks[19]['hide_data'] = false; blocks[19]['show_lastupdate'] = false; blocks[21] = {} blocks[21]['width'] = 4; blocks[21]['switch'] = true; blocks[21]['hide_data'] = false; blocks[21]['show_lastupdate'] = false; blocks[139] = {} blocks[139]['width'] = 12; blocks[139]['switch'] = true; blocks[139]['hide_data'] = false; blocks[139]['show_lastupdate'] = false; blocks[26] = {} blocks[26]['width'] = 4; blocks[26]['title'] = 'LUX chodba' blocks[26]['icon'] = 'fas fa-sun'; blocks[26]['switch'] = true; blocks[26]['hide_data'] = false; blocks[26]['show_lastupdate'] = false; blocks[119] = {} blocks[119]['width'] = 4; blocks[119]['title'] = 'LUX hala' blocks[119]['icon'] = 'fas fa-sun'; blocks[119]['switch'] = true; blocks[119]['hide_data'] = false; blocks[119]['show_lastupdate'] = false; blocks[143] = {} blocks[143]['width'] = 4; blocks[143]['title'] = 'LUX pokojíček' blocks[143]['icon'] = 'fas fa-sun'; blocks[143]['switch'] = true; blocks[143]['hide_data'] = false; blocks[143]['show_lastupdate'] = false; blocks[12] = {} blocks[12]['width'] = 6; blocks[12]['switch'] = true; blocks[12]['hide_data'] = false; blocks[12]['show_lastupdate'] = false; blocks[27] = {} blocks[27]['width'] = 4; blocks[27]['switch'] = true; blocks[27]['hide_data'] = false; blocks[27]['show_lastupdate'] = false; blocks[52] = {} blocks[52]['width'] = 4; blocks[52]['switch'] = true; blocks[52]['hide_data'] = false; blocks[52]['show_lastupdate'] = false; blocks[144] = {} blocks[144]['width'] = 4; blocks[144]['switch'] = true; blocks[144]['hide_data'] = false; blocks[144]['show_lastupdate'] = false; columns[1] = {} columns[1]['blocks'] = ['blocktitle_1', 14, 19, 21, 139,'buttons.buienradar' ]; columns[1]['width'] = 3; columns[2] = {} columns[2]['blocks'] = ['blocktitle_2', 26, 119, 143, 12]; columns[2]['width'] = 3; columns[3] = {} columns[3]['blocks'] = ['blocktitle_3', 27, 52, 144,]; columns[3]['width'] = 3; columns[4] = {} columns[4]['blocks'] = ['blocktitle_4','sunrise','clock',]; columns[4]['width'] = 3; blocks['blocktitle_1'] = {} blocks['blocktitle_1']['type'] = 'blocktitle'; blocks['blocktitle_1']['title'] = 'Light switches'; blocks['blocktitle_2'] = {} blocks['blocktitle_2']['type'] = 'blocktitle'; blocks['blocktitle_2']['title'] = 'LUX senzory'; blocks['blocktitle_3'] = {} blocks['blocktitle_3']['type'] = 'blocktitle'; blocks['blocktitle_3']['title'] = 'PIR senzory'; blocks['blocktitle_4'] = {} blocks['blocktitle_4']['type'] = 'blocktitle'; blocks['blocktitle_4']['title'] = 'Time a Date';
Code: Select all
columns[1]['blocks'] = ['blocktitle_1', 14, 19, 21, 139,buttons.buienradar];
- EdwinK
- Posts: 1820
- Joined: Sunday 22 January 2017 21:46
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Rhoon
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
I'm a little hesistant to change anything in the .js files (except CONFIG.js). Is this the whole graphs.js so it can jst be c/p'd or do we have to add this in places?
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
-
- Posts: 2262
- Joined: Monday 29 August 2016 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Add the following to custom.css. You can play with the numbers.
Code: Select all
/* to set the height of the block */
.containsweather {
height: 200px !important;
}
/* to set the size of the weather icon */
.containsweather .col-xs-1 .skycon {
max-width: 300px;
width: 300px;
}
/* to center the temperature and title */
.containsweather .col-xs-11 {
width: calc(100% - 100px);
float: right;
text-align: center !important;
}
/* to set the size of the temperature and location. Shift everything down a bit*/
.weatherdegrees, .weatherloc {
font-size: 50px !important;
margin-top: 40px !important;
}
-
- Posts: 2262
- Joined: Monday 29 August 2016 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
I will merge this in a new beta release in the weekend.
- EdwinK
- Posts: 1820
- Joined: Sunday 22 January 2017 21:46
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Rhoon
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Great. Thanks
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
-
- Posts: 1601
- Joined: Friday 18 October 2013 23:33
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Arnhem/Nijmegen Nederland
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Will you let here know when you do this?
And how to use and set this graphs...
THANKS
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups
-
- Posts: 2262
- Joined: Monday 29 August 2016 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Can you try the latest v3 beta:
https://github.com/dashticzv3/dashticz_v3/tree/beta
For documentation see:
https://dashticz-v3.readthedocs.io/en/b ... tml#graphs
Who is online
Users browsing this forum: No registered users and 1 guest