0x00 Overview


  1. Domoticz - is a very light weight home automation system that lets you monitor and configure miscellaneous devices, including lights, switches, various sensors/meters like temperature, rainfall, wind, ultraviolet (UV) radiation, electricity usage/production, gas consumption, water consumption and many more. Notifications/alerts can be sent to any mobile device.

  2. Dashticz v2 - is an alternative dashboard for Domoticz.

0x01 Preview of my setup



Dashticz dashboard

0x02 CONFIG.js




var config = {}

// Configuration
config['domoticz_ip'] = 'http://domoticz';      // http(s) address of your Domoticz installation
config['app_title'] = 'LameHome';           // Dashboard name (Shown in Topbar)
config['loginEnabled'] = 0;             // Enable if you want to login from Dashticz
config['language'] = 'en_US';               // Language
config['domoticz_refresh'] = '5';           // How often to fetch data from Domoticz
config['dashticz_refresh'] = '180';         // How often to refresh Dashticz dashboard
// UI Settings
config['selector_instead_of_buttons'] = 0;      // Selector as buttons || DropDown Menu
config['auto_positioning'] = 0;             // Ability to define your own positioning for the buttons (in combo with use_favorites)
config['hide_mediaplayer'] = 0;             // Hide media player when not playing
config['standby_after'] = 0;                // Go in StandBy mode adter X minutes
config['use_favorites'] = 0;                // Show favorites (should be 1 if you want to use auto_positioning)
config['last_update'] = 0;              // Shows last updated information in blocks
config['no_rgb'] = 0;                   // RGB Buttons on switch
config['hide_off_button'] = 0;              // Hide RGB Selector (only show power slider)
config['hide_topbar'] = 0;              // Hide the topbar
config['hide_seconds'] = 0;             // Hide seconds in clock
// Screen swipe/slide settings
config['auto_swipe_back_to'] = 1;           // When no activity switch back to selected screen
config['auto_swipe_back_after'] = '30';         // Inactivity time before switching to default screen
config['auto_slide_pages'] = 0;             // Auto-swipe all screen every X seconds
config['slide_effect'] = 'slide';           // Slide effect (slide, fade, cube, coverflow, flip)
config['settings_icons'] = ["fullscreen"];      // Toolbar 'items' (available: settings, fullscreen)
// Graphs configuration
config['lineColors'] = ['#e00', '#0e0', '#00e'];    // Graph line colors
config['standard_graph'] = 'month';         // Default graphs view (hour, day, month)
// Time settings
config['boss_stationclock'] = 'RedBoss';        // Clock type (NoBoss, BlackBoss, RedBoss, ViennaBoss)
config['timeformat'] = 'DD-MM-YY HH:mm';
config['shortdate'] = 'D MMM';
config['longdate'] = 'D MMMM YYYY';
config['shorttime'] = 'HH:mm';
config['longtime'] = 'HH:mm:ss';
config['weekday'] = 'dddd';
// Calendar
config['calendarurl'] = 0;
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'en_US';
// News section
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';   // News feed URL
config['news_scroll_after'] = '7';          // Scroll news after X seconds
// Weather settings
config['use_fahrenheit'] = 0;               // Use Fahrenheit
config['translate_windspeed'] = 1;          // Use fullnames for wind direction
config['static_weathericons'] = 0;          // Static/dynamic weather icons
// Weather Underground
config['wu_api'] = '';
config['wu_city'] = 'Plovdiv';
config['wu_name'] = 0;
config['wu_country'] = 'BG';
// Google Maps
config['gm_api'] = '';
config['gm_zoomlevel'] = 13;
config['gm_latitude'] = '42.14';
config['gm_longitude'] = '24.75';



var blocks = {}
var columns = {}
var buttons = {}
var screens = {}


blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Времето';

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Power';

blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'System';

blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Хол';

blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Спалня';

blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Тераса';

blocks['blocktitle_7'] = {}
blocks['blocktitle_7']['type'] = 'blocktitle';
blocks['blocktitle_7']['title'] = 'Сензори';

blocks['blocktitle_8'] = {}
blocks['blocktitle_8']['type'] = 'blocktitle';
blocks['blocktitle_8']['title'] = 'Присъствие';

blocks['blocktitle_9'] = {}
blocks['blocktitle_9']['type'] = 'blocktitle';
blocks['blocktitle_9']['title'] = 'Трафик';

blocks['blocktitle_10'] = {}
blocks['blocktitle_10']['type'] = 'blocktitle';
blocks['blocktitle_10']['title'] = 'Server';

blocks['blocktitle_11'] = {}
blocks['blocktitle_11']['type'] = 'blocktitle';
blocks['blocktitle_11']['title'] = 'UPS';

blocks['blocktitle_12'] = {}
blocks['blocktitle_12']['type'] = 'blocktitle';
blocks['blocktitle_12']['title'] = 'Ping';

blocks['blocktitle_13'] = {}
blocks['blocktitle_13']['type'] = 'blocktitle';
blocks['blocktitle_13']['title'] = 'Disks';

blocks['blocktitle_14'] = {}
blocks['blocktitle_14']['type'] = 'blocktitle';
blocks['blocktitle_14']['title'] = 'RGB Lights';


buttons.log = { key: 'log', width:6, icon:'fa-microchip', title: 'Status log', log:true, level: 2}
buttons.log_detail = { key: 'log', width:6, icon:'fa-microchip', title: 'Full log', log:true, level: 1}

buttons.iss = { key: 'iss', width:12, isimage:true, refreshimage:60000, image: 'https://spacetrack.eu/iss/globe.php?114126457&' }
buttons.storms = { key: 'iss', width:12, isimage:true, refreshimage:60000, image: 'https://burze.dzis.net/burze_europa_anim.gif' }



// Vremeto Plovdiv
blocks[7] = {}
blocks[7]['width'] = 6;
blocks[7]['title'] = 'Пловдив';

blocks[9] = {}
blocks[9]['width'] = 6;
blocks[9]['title'] = 'Пловдив';


// Qubino Smart Meter 2
blocks[53] = {}
blocks[53]['width'] = 4;
blocks[53]['icon'] = 'fas fa-bolt';
blocks[53]['title'] = 'Кръг №2';

blocks[55] = {}
blocks[55]['width'] = 4;
blocks[55]['title'] = 'Напрежение';

blocks[57] = {}
blocks[57]['width'] = 4;
blocks[57]['title'] = 'Power Factor';


// NFS Server
blocks[1] = {}
blocks[1]['width'] = 6;
blocks[1]['title'] = 'CPU Usage';
blocks[1]['icon'] = 'fas fa-percent';

blocks[2] = {}
blocks[2]['width'] = 6;
blocks[2]['icon'] = 'fas fa-microchip';
blocks[2]['title'] = 'RAM Usage';

blocks[4] = {}
blocks[4]['width'] = 4;
blocks[4]['icon'] = 'fas fa-database';
blocks[4]['title'] = '/';

blocks[6] = {}
blocks[6]['width'] = 4;
blocks[6]['icon'] = 'fas fa-database';
blocks[6]['title'] = '/mnt/wd0';

blocks[5] = {}
blocks[5]['width'] = 4;
blocks[5]['icon'] = 'fas fa-database';
blocks[5]['title'] = '/mnt/wd1';

blocks[58] = {}
blocks[58]['width'] = 12;
blocks[58]['title'] = 'CPU Temp';

// UPS
blocks[36] = {}
blocks[36]['width'] = 12;
blocks[36]['icon'] = 'fas fa-battery-full';
blocks[36]['title'] = 'Battery Charge';

blocks[35] = {}
blocks[35]['width'] = 12;
blocks[35]['icon'] = 'fas fa-battery-full';
blocks[35]['title'] = 'UPS Load';

blocks[34] = {}
blocks[34]['width'] = 12;
blocks[34]['icon'] = 'fas fa-battery-full';
blocks[34]['title'] = 'Battery Voltage';

blocks[33] = {}
blocks[33]['width'] = 12;
blocks[33]['icon'] = 'fas fa-bolt';
blocks[33]['title'] = 'Input Voltage';

// Ping
blocks[37] = {}
blocks[37]['title'] = 'Ping Google';
blocks[37]['width'] = 12;
blocks[37]['icon'] = 'fas fa-exchange-alt';

blocks[38] = {}
blocks[38]['title'] = 'Ping Level3';
blocks[38]['width'] = 12;
blocks[38]['icon'] = 'fas fa-exchange-alt';

blocks[39] = {}
blocks[39]['title'] = 'Ping Coolbox';
blocks[39]['width'] = 12;
blocks[39]['icon'] = 'fas fa-exchange-alt';


// Hol
blocks[31] = {}
blocks[31]['width'] = 6;
blocks[31]['title'] = 'Хол';

blocks[51] = {}
blocks[51]['width'] = 12;
blocks[51]['title'] = 'Прахови частици - 2.5';
blocks[51]['icon'] = 'fas fa-asterisk';
//blocks[51]['icon'] = 'fab fa-ravelry';

// Spalnq
blocks[45] = {}
blocks[45]['width'] = 6;
blocks[45]['title'] = 'Спалня';


// Terasa
blocks[27] = {}
blocks[27]['width'] = 6;
blocks[27]['title'] = 'Тераса';

blocks[24] = {}
blocks[24]['width'] = 6;
blocks[24]['title'] = 'Тераса';
blocks[24]['icon'] = 'fas fa-sun';

blocks[22] = {}
blocks[22]['width'] = 12;
blocks[22]['hide_data'] = 1;
blocks[22]['title'] = 'Прозорец - Тераса';
blocks[22]['icon'] = 'fas fa-door-open';
blocks[22]['speakOn'] = 'Window open';
blocks[22]['speakOff'] = 'Window open';

// Anavi RGB
blocks[50] = {}

// Prisystvie
blocks[29] = {}
blocks[29]['width'] = 6;
blocks[29]['icon'] = 'fas fa-male';
blocks[29]['hide_data'] = 1;
blocks[29]['title'] = 'Георги';
blocks[29]['speakOn'] = 'Georgi is present';
blocks[29]['speakOff'] = 'Georgi is gone';

blocks[30] = {}
blocks[30]['width'] = 6;
blocks[30]['icon'] = 'fas fa-female';
blocks[30]['hide_data'] = 1;
blocks[30]['title'] = 'Петя';
blocks[30]['speakOn'] = 'Petya is present';
blocks[30]['speakOff'] = 'Petya is gone';


// Power
blocks[40] = {}
blocks[40]['width'] = 4;
blocks[40]['hide_data'] = 0;
blocks[40]['icon'] = 'fas fa-power-off';
blocks[40]['title'] = 'Кухня - 1';
blocks[40]['speakOff'] = 'Kitchen 1 is off';
//blocks[40]['speakOn'] = 'Kitchen 1 is on';

blocks[44] = {}
blocks[44]['width'] = 4;
blocks[44]['hide_data'] = 0;
blocks[44]['icon'] = 'fas fa-power-off';
blocks[44]['title'] = 'Кухня - 2';
blocks[44]['speakOff'] = 'Kitchen 2 is off';
//blocks[44]['speakOn'] = 'Kitchen 2 is on';

blocks[46] = {}
blocks[46]['width'] = 4;
blocks[46]['hide_data'] = 0;
blocks[46]['icon'] = 'fas fa-power-off';
blocks[46]['title'] = 'Бойлер';

blocks[43] = {}
blocks[43]['width'] = 6;
blocks[43]['hide_data'] = 0;
blocks[43]['icon'] = 'fas fa-bolt';
blocks[43]['title'] = 'Кухня - 1';

blocks[49] = {}
blocks[49]['width'] = 6;
blocks[49]['hide_data'] = 0;
blocks[49]['icon'] = 'fas fa-bolt';
blocks[49]['title'] = 'Бойлер';




columns[1] = {};
columns[1]['blocks'] = ['blocktitle_1', '7_1', '7_2', buttons.storms];
columns[1]['width'] = 3;

columns[2] = {};
columns[2]['blocks'] = ['blocktitle_2', 55, 53, 57, 40, 44, 46, 43, 49, 'blocktitle_3', 1, 2, 4, 6, 5];
columns[2]['width'] = 4;

columns[3] = {};
columns[3]['blocks'] = ['blocktitle_4', '31_1', '31_2', 51, 'blocktitle_5', '45_1', '45_2', 'blocktitle_6', 27, 24];
columns[3]['width'] = 3;

columns[4] = {};
columns[4]['blocks'] = ['blocktitle_7', 22, 'blocktitle_8', 29, 30, 'blocktitle_14', 50];
columns[4]['width'] = 2;

columns[5] = {};
columns[5]['width'] = 4;
columns[5]['blocks'] = ['blocktitle_3', 1, 2, 4, 6, 5, 'graph_58', buttons.log, buttons.log_detail];

columns[6] = {};
columns[6]['width'] = 2;
columns[6]['blocks'] = ['blocktitle_11', 36, 35, 34, 'blocktitle_12', 37, 38, 39];

columns[7] = {};
columns[7]['width'] = 6;
columns[7]['blocks'] = ['blocktitle_13', 'graph_6', 'graph_5'];

columns[8] = {};
columns[8]['width'] = 3;
columns[8]['blocks'] = ['clock', buttons.storms];

columns[9] = {};
columns[9]['width'] = 3;
columns[9]['blocks'] = ['blocktitle_1', 'currentweather_big', 'weather', 'sunrise', '7_2', '7_3'];

columns[10] = {};
columns[10]['width'] = 3;
columns[10]['blocks'] = ['blocktitle_4', '31_1', '31_2', 51, 'blocktitle_5', '45_1', '45_2', 'blocktitle_6', 27, 24];

columns[11] = {};
columns[11]['width'] = 3;
columns[11]['blocks'] = ['blocktitle_9', 'trafficmap'];

columns[12] = {};
columns[12]['width'] = 6;
columns[12]['blocks'] = ['blocktitle_2', 'graph_55', 'graph_57'];

columns[13] = {};
columns[13]['width'] = 6;
columns[13]['blocks'] = ['blocktitle_2', 'graph_53', 'graph_43'];

// Screens
screens[1] = {};
screens[1]['columns'] = [1, 2, 3, 4];
screens[2] = {};
screens[2]['columns'] = [5, 6, 7];
screens[3] = {};
screens[3]['columns'] = [8, 9, 10, 11];
screens[4] = {};
screens[4]['columns'] = [12, 13];



0x03 custom.css



/*
CUSTOM CSS FILE
*/

.fa,.wi { font-size:20px !important; }

div.mh.titlegroups {
    height: 46px !important;
    padding-top: 3px !important;
    padding-bottom:45px;
    border: 3px solid rgba(0,0,0,0);
    background: rgba(0,0,0,0.15);
    text-align: center;
    background-clip: padding-box;
    border-radius: 9px;
}

/* Topbar */
.transbg.dark.col-xs-1,
.transbg.dark.col-xs-2,
.transbg.dark.col-xs-3,
.transbg.dark.col-xs-4,
.transbg.dark.col-xs-5,
.transbg.dark.col-xs-6,
.transbg.dark.col-xs-7,
.transbg.dark.col-xs-8,
.transbg.dark.col-xs-9,
.transbg.dark.col-xs-10,
.transbg.dark.col-xs-11,
.transbg.dark.col-xs-12 {
    border: 3px solid rgba(255,255,255,0);
    background: rgba(0,0,0,0.25);
    background-clip: padding-box;
    border-radius: 9px;
}

/* BLOCKS */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
    padding-top:15px;
    padding-bottom:15px;
    border: 3px solid rgba(0,0,0,0);
    background: rgba(0,0,0,0.3);
    background-clip: padding-box;
    border-radius: 9px;
    height:100%
}


/* Fix graph background color */
.graphpopup > .transbg.col-xs-12 {
   background-color: #333333 !important;
}

/* On mouse-over */
.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover {
    padding-top:15px;
    padding-bottom:15px;
    border: 3px solid rgba(0,0,0,0);
    background: rgba(100,100,100,0.8);
    background-clip: padding-box;
    border-radius: 9px;
    cursor:pointer;
    height:100%
}

.trafficmap { height: 100%;}
.col-xs-1.block_trafficmap,
.col-xs-2.block_trafficmap
, .col-xs-3.block_trafficmap, .col-xs-4.block_trafficmap, .col-xs-5.block_trafficmap, .col-xs-6.block_trafficmap, .col-xs-7.block_trafficmap, .col-xs-8.block_trafficmap, .col-xs-9.bloc
k_trafficmap, .col-xs-10.block_trafficmap, .col-xs-11.block_trafficmap, .col-xs-12.block_trafficmap {
    padding-left: 13px !important;
    padding-right: 13px !important;
    height:240px !important;
}

.fas.fa-user.on { color:#F1C300; }
.fas.fa-user.off { color:#fff; }

.fas.fa-male.on { color:#00FF00; }
.fas.fa-male.off { color:#fff; }

.fas.fa-female.on {  color:#00FF00; }
.fas.fa-female.off {  color:#fff; }

.fas.fa-power-off.on { color:#00FF00; }
.fas.fa-power-off.off { color:#fff; }

.fas.fa-door-open.on { color:#FF0000; }
.fas.fa-door-open.off { color:#fff; }

.far.fa-lightbulb.on { color:#F1C300; }
.far.fa-lightbulb.off { color:#fff; }


#graphoutput4 {height: 120px;}
#graphoutput5 {height: 120px;}
#graphoutput6 {height: 120px;}
#graphoutput37 {height: 120px;}
#graphoutput38 {height: 120px;}
#graphoutput39 {height: 120px;}
#graphoutput58 {height: 130px;}
#graphoutput53 {height: 120px;}
#graphoutput55 {height: 120px;}
#graphoutput57 {height: 120px;}
#graphoutput43 {height: 120px;}
#graphoutput49 {height: 120px;}


/* .sunrise { font-size: 25px; color: #FFFF00 ;!important; font-weight: 1; font-variant: small-caps;}  */
/* .sunset  { font-size: 25px; color: #0000FF ;!important; font-weight: 1; font-variant: small-caps;} */
.wi-sunrise { color: yellow; !important; }
.wi-sunset  { color: yellow; !important; }

/* Make traffic map bigger */
.trafficmap { height: 100%; }
.col-xs-1.block_trafficmap,
.col-xs-2.block_trafficmap,
.col-xs-3.block_trafficmap,
.col-xs-4.block_trafficmap,
.col-xs-5.block_trafficmap,
.col-xs-6.block_trafficmap,
.col-xs-7.block_trafficmap,
.col-xs-8.block_trafficmap,
.col-xs-9.block_trafficmap,
.col-xs-10.block_trafficmap,
.col-xs-11.block_trafficmap,
.col-xs-12.block_trafficmap {
    padding-left: 13px !important;
    padding-right: 13px !important;
    height: 380px !important;
}

div.buttons.storms { height:400px !important; }

/*.btn-default { visibility:hidden; } */



0x04 custom.js



function afterGetDevices(){ }

function getExtendedBlockTypes(blocktypes){
    //blocktypes.Type['Lighting 2'] = { icon: 'fa fa-lightbulb-o', title: '<Name>', value: 'ds' }
    return blocktypes;
}