Domoticz

Meek wrote: ↑Saturday 22 June 2019 22:01 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.

Meek wrote: ↑Saturday 22 June 2019 22:01 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.

Meek wrote: ↑Saturday 22 June 2019 22:01 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.

Derik wrote: ↑Wednesday 26 June 2019 22:16

Meek wrote: ↑Saturday 22 June 2019 22:01 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???

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]

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

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 wrote: ↑Saturday 29 June 2019 10:29 in config.js, better remove your API keys (owm)

Meek wrote: ↑Saturday 29 June 2019 9:31

Derik wrote: ↑Wednesday 26 June 2019 22:16

Meek wrote: ↑Saturday 22 June 2019 22:01 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;
}

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

Meek wrote: ↑Saturday 29 June 2019 9:31

Derik wrote: ↑Wednesday 26 June 2019 22:16

Meek wrote: ↑Saturday 22 June 2019 22:01 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;
}

Mayki wrote: ↑Sunday 14 July 2019 0:19 Please help.
I would like to add buttons.buienradar to the desktop but I don't want to display it. What am I doing wrong?



CONFIG.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';

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

Meek wrote: ↑Saturday 29 June 2019 9:31
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;
}

Mayki wrote: ↑Tuesday 23 July 2019 19:55

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

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

EdwinK wrote: ↑Tuesday 23 July 2019 20:41

Meek wrote: ↑Saturday 29 June 2019 9:31
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 wrote: ↑Tuesday 23 July 2019 22:12

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.

Lokonli wrote: ↑Tuesday 23 July 2019 22:12

EdwinK wrote: ↑Tuesday 23 July 2019 20:41

Meek wrote: ↑Saturday 29 June 2019 9:31
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.

Derik wrote: ↑Wednesday 24 July 2019 13:40

Lokonli wrote: ↑Tuesday 23 July 2019 22:12

EdwinK wrote: ↑Tuesday 23 July 2019 20:41 [/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