Dashticz - Show your dashboard and how-to's!

[Lokonli]

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.

[Meek]

Herewith a small impression of our Meek CC (Central Control) unit to control various WiFi enabled devices.

Meek-CC.jpg (252.58 KiB) Viewed 5183 times

Once we have “cleaned” our code, we will post here the files.

[Derik]

Herewith a small impression of our Meek CC (Central Control) unit to control various WiFi enabled devices.
Meek-CC.jpg
Once we have “cleaned” our code, we will post here the files.

Nice job...

Will please share the code for the graph with the buttons abaove
P1, water and gas

And the ipcam code.

[gielie]

Herewith a small impression of our Meek CC (Central Control) unit to control various WiFi enabled devices.
Meek-CC.jpg
Once we have “cleaned” our code, we will post here the files.

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.

[HansieNL]

@gielie : You can add the FlipClock by just adding 'flipclock' to one of your columns. I think you have to resize via css.

[rens77]

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)?

[Derik]

Herewith a small impression of our Meek CC (Central Control) unit to control various WiFi enabled devices.
Meek-CC.jpg
Once we have “cleaned” our code, we will post here the files.

Or do whe need to buy something in your store???

[Meek]

Herewith a small impression of our Meek CC (Central Control) unit to control various WiFi enabled devices.
Meek-CC.jpg
Once we have “cleaned” our code, we will post here the files.

Or do whe need to buy something in your store???

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]

custom.js

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

graphs.js

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">&times;</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;
}

[EdwinK]

in config.js, better remove your API keys (owm)

[Meek]

in config.js, better remove your API keys (owm)

Thank you for pointing out, just amended my previous post.

[Lokonli]

Herewith a small impression of our Meek CC (Central Control) unit to control various WiFi enabled devices.
Meek-CC.jpg
Once we have “cleaned” our code, we will post here the files.

Or do whe need to buy something in your store???

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]

custom.js

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

graphs.js

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">&times;</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;
}

I see you used a bar graph with some additional settings:

Code: Select all

        gridTextColor: '#c3f6fe',
        lineWidth: 1,
        stacked: true,
        lineColors: settings['lineColors'],
        barColors: settings['lineColors'],
        pointFillColors: ['none'],
        pointSize: 1,
 

The most recent Dashticz version (3.0.0) already contains the option to choose for a line graph or bar graph.
I will add these additional parameters in a future beta. (and probably make these default)

[Derik]

Herewith a small impression of our Meek CC (Central Control) unit to control various WiFi enabled devices.
Meek-CC.jpg
Once we have “cleaned” our code, we will post here the files.

Or do whe need to buy something in your store???

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]

custom.js

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

graphs.js

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">&times;</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?

[Thuis]

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]

[Lokonli]

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.js

Code: 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';

You have to remove the quotes around buttons.buienradar in your column definition, like:

Code: Select all

columns[1]['blocks'] = ['blocktitle_1', 14, 19, 21, 139,buttons.buienradar]; 

[EdwinK]

graphs.js

Spoiler: show

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">&times;</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;
}

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?

[Lokonli]

How do I enlarge the weather icon and center the text? Will you help me? This is the currentweather_big_owm.

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

[Lokonli]

graphs.js

Spoiler: show

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">&times;</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;
}

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?

I will merge this in a new beta release in the weekend.

[EdwinK]

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?

I will merge this in a new beta release in the weekend.

Great. Thanks

[Derik]

graphs.js

Spoiler: show

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">&times;</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;
}

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?

I will merge this in a new beta release in the weekend.

Will you let here know when you do this?
And how to use and set this graphs...

THANKS

[Lokonli]

[/spoiler]

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?

I will merge this in a new beta release in the weekend.

Will you let here know when you do this?
And how to use and set this graphs...

THANKS

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