Re: Dashticz - Show your dashboard and how-to's!
Posted: Saturday 14 October 2017 19:07
Got it working now. Could you please attach the images you use?
Open source Home Automation System
https://forum.domoticz.com/
Code: Select all
.col-data .title {
font-size:15px;
}
.col-data span {
font-size:15px;
}
.fa.fa-male.on {color: green}
.fa.fa-male.off {color: red}
.fa-male:before{font-size: 36px;}
.fa,.wi {
font-size:24px !important;
}
.fa.fa-lightbulb-o.on {
color: rgba(255, 220, 10, 0.9);
)
}
/* Background 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: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 25px; /* Round corners */
}
.swiper-pagination-bullet {
width: 0px !important;
height: 0px !important;
}
.trash .state div.trashrow {
font-size: 12px;
}
.trash .state div.trashtoday {
font-size: 16px;
}
.trash .state div.trashtomorrow {
font-size: 14px;
}
/* Calendar font modifications with icon active */
.col-xs-10.items {
font-size: 16px;
}
.col-xs-12.items {
font-size: 16px;
}
.warning {
background: rgba(199,44,44,0.3) !important;
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0);
-webkit-animation: BLINK-ANIMATION 1s infinite;
-moz-animation: BLINK-ANIMATION 1s infinite;
-o-animation: BLINK-ANIMATION 1s infinite;
animation: BLINK-ANIMATION 1s infinite;
}
@-webkit-keyframes BLINK-ANIMATION {
0%, 49% {
background-color: rgba(199,44,44,0.3);
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0);
}
50%, 100% {
background-color: rgba(199,44,44,0.7);
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0);
}
}
.warningblue {
background: rgba(45,119,204,0.3) !important;
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0);
-webkit-animation: BLINK-ANIMATION-BLUE 1s infinite;
-moz-animation: BLINK-ANIMATION-BLUE 1s infinite;
-o-animation: BLINK-ANIMATION-BLUE 1s infinite;
animation: BLINK-ANIMATION-BLUE 1s infinite;
}
@-webkit-keyframes BLINK-ANIMATION-BLUE {
0%, 49% {
background-color: rgba(45,119,204,0.3);
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0);
}
50%, 100% {
background-color: rgba(45,119,204,0.7);
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0);
}
}
.warningorange {
background: rgba(204,129,44,0.30) !important;
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0);
-webkit-animation: BLINK-ANIMATION 1s infinite;
-moz-animation: BLINK-ANIMATION 1s infinite;
-o-animation: BLINK-ANIMATION 1s infinite;
animation: BLINK-ANIMATION 1s infinite;
}
@-webkit-keyframes BLINK-ANIMATION {
0%, 49% {
background-color: rgba(204,129,44,0.3);
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0);
}
50%, 100% {
background-color: rgba(204,129,44,0.7);
background-clip: padding-box;
border: 7px solid rgba(255,255,255,0);
}
}
.buttons-npo .title {
font-size: 16px;
}
/* logitech media buttons */
.fa.fa-arrow-circle-left.fa-small {
font-size: 35px !important;
}
.fa.fa-stop-circle.fa-small {
font-size: 35px !important;
}
.fa.fa-play-circle.fa-small {
font-size: 35px !important;
}
.fa.fa-arrow-circle-right.fa-small {
font-size: 35px !important;
}
.fa.fa-pause-circle.fa-small {
font-size: 35px !important;
}
.fa-lightbulb-o:before {
font-size: 24px;
}
div.mh.titlegroups {
height: 60px !important; /* default height=75px */
padding-top: 3px; /* center text for new height */
}
.fa,.wi {
font-size:24px !important;
}
/* Calendar font modifications with icon active */
.col-xs-10.items {
font-size: 16px;
}
.col-xs-12.items {
font-size: 16px;
}
.Menu{
padding: 10px 10px !important;
color: Black;
font-size: 40px !important;
font-style: Italic;
text-align: center;
line-height: 0.7em;
background: rgba(0, 0, 0, 0) linear-gradient(#4d4d4d, #999999) repeat scroll 0 0 !important;
box-shadow: inset 1px 0px 0px 0px rgba(255,255,255,0.5) !important;
/* add background and box-shadow for other browsers*/
}
.Menu .title
{
color: rgba(48,48,48,1);
font-size: 20px !important;
font-weight: 700;
font-style: Italic;
//letter-spacing: 1px;
padding-left: 20px;
line-height: 0em;
line-spacing: 0em;
text-shadow: 1px 1px 0 rgba(140,140,140,0.6) , -1px -1px 1px rgba(0,0,0,0.67);
}
.Menu .buttonimg
{
max-height:75px;
}
.Menu .col-xs-1,
.Menu .col-xs-2,
.Menu .col-xs-3,
.Menu .col-xs-4,
.Menu .col-xs-5,
.Menu .col-xs-6,
.Menu .col-xs-7,
.Menu .col-xs-8,
.Menu .col-xs-9,
.Menu .col-xs-10,
.Menu .col-xs-11,
.Menu .col-xs-12 {
padding-top: 10px !important;
padding-right: 2px !important;
padding-left: 2px !important;
}
Code: Select all
var html='<div class="col-xs-'+width+' hover transbg Menu buttons-'+key+'" data-id="buttons.'+key+'" onclick="toSlide('+(parseFloat(button.slide)-1)+')">';
Code: Select all
var config = {}
config['domoticz_ip'] = 'http://192.168.1.xx:xxxx';
config['app_title'] = 'Dashboard Beta';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.repubblica.it/rss/homepage/rss2.0.xml';
config['news_scroll_after'] = '7';
config['standby_after'] = 0;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '30';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'month';
config['language'] = 'it_IT';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'it_IT';
config['calendarurl'] = 0;
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = 'xxxxxx';
config['gm_zoomlevel'] = 14;
config['gm_latitude'] = xx.xxxxx;
config['gm_longitude'] = xx.xxxxx;
config['wu_api'] = 'xxxxxx';
config['wu_city'] = 'xxxxx';
config['wu_name'] = '';
config['wu_country'] = 'IT';
config['idx_moonpicture'] = 0;
config['switch_horizon'] = 0;
config['host_nzbget'] = 'http://192.168.1.3:6789';
config['spot_clientid'] = 'xxxxxxxx';
config['selector_instead_of_buttons'] = 1;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['last_update'] = 0;
config['hide_topbar'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 1;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
//predefined colors, when you have RGB-lamps
var _SAVED_COLORS = ['black', 'white', 'blanchedalmond','rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow'];
var calendars = {}
calendars.vittorio = { maxitems: 5, icalurl: 'xxxxxxx' }
calendars.giulia = { maxitems: 5, icalurl: 'xxxxxxx' }
calendars.combined = {}
calendars.combined.maxitems = 4;
calendars.combined.calendars = [
{ color:'white',calendar:calendars.vittorio },
{ color:'#ccc',calendar:calendars.giulia }
]
var _ICALENDAR_DATEFORMAT = 'DD.MM.YYYY HH:mm'; //'friendly', 'MM.DD.YYYY HH:mm', 'DD.MM.YYYY HH:mm', 'YYYY.MM.DD HH:mm'
var _ICALENDAR_LOCALE = 'it'; //en,hu, etc.
// Online Radio Stream Plugin, Note: you must enable plugin in column section 'streamplayer', see columns[3]['blocks'] example below.
var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"Music FM","file":"http://stream.musicfm.hu:8000/musicfm.mp3"},
{"track":2,"name":"Radio 1","file":"http://213.181.210.106:8000/high.mp3"},
{"track":3,"name":"Test FM","file":"http://213.181.210.106:8000/high.mp3"},
];
////////////////////// FRAMES ///////////////////////////
var frames = {}
frames.weather = {refreshiframe:10000,height:230,frameurl:"//forecast.io/embed/#lat=xx.xxxxx&lon=xx.xxxx&name=Acilia&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si&text-color=#fff",width:12}
var maps = {}
maps.rome = { height:250, refreshimage:60000, width:12, latitude: xx.xxxx, longitude: xx.xxxx, zoom:13 }
//Buttons or images to open webpages in an iframe, like a news website or weather forecast
var buttons = {}
buttons.webc = {height:300, width:12, isimage:true, refreshimage:60000, image: 'http://xx.xx.xx.xx/tmpfs/auto.jpg', title: 'Webcam', url: 'http://xx.xx.xx.xx/zm/index.php?view=montage&group=0'}
buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://www.italia.fm'}
buttons.repu = {width:12, icon: 'fa-newspaper-o', title: 'Repubblica.it', url: 'http://repubblica.it'}
buttons.fatto = {width:12, icon: 'fa-newspaper-o', title: 'FattoQuotidiano', url: 'http://www.ilfattoquotidiano.it/'}
buttons.romat = {width:12, icon: 'fa-newspaper-o', title: 'RomaToday', url: 'http://www.romatoday.it/'}
// ---------------------- Blocks -------------------------
var blocks = {}
// Lights
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Illuminazione';
blocks['blocktitle_1']['height'] = 210;
blocks[96] = {}
blocks[96]['title'] = 'Luce comodino' //if you want change the name of switch different then domoticz
blocks[96]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[96]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[95] = {}
blocks[95]['title'] = 'Piantana Pranzo' //if you want change the name of switch different then domoticz
blocks[95]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[95]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[256] = {}
blocks[256]['title'] = 'Piantana Salone' //if you want change the name of switch different then domoticz
blocks[256]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[256]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[245] = {}
blocks[245]['width'] = 6;
blocks[245]['title'] = 'Abatjour Salone RGB' //if you want change the name of switch different then domoticz
blocks[245]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[272] = {} //no dimmer
blocks[272]['width'] = 3;
blocks[272]['title'] = 'Abatjour Sala' //if you want change the name of switch different then domoticz
blocks[272]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Luci Giardino';
blocks['s3'] = {}
blocks['s3']['title'] = 'Luci Est Auto' //if you want change the name of switch different then domoticz
blocks['s3']['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks['s3']['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks['s1'] = {}
blocks['s1']['title'] = 'Luci Est Bianche' //if you want change the name of switch different then domoticz
blocks['s1']['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks['s1']['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[250] = {}
blocks[250]['width'] = 6;
blocks[250]['title'] = 'Giardino Bianca sx' //if you want change the name of switch different then domoticz
blocks[250]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[249] = {}
blocks[249]['width'] = 6;
blocks[249]['title'] = 'Giardino Bianca dx' //if you want change the name of switch different then domoticz
blocks[249]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[247] = {}
blocks[247]['width'] = 6;
blocks[247]['title'] = 'Giardino Muro dx' //if you want change the name of switch different then domoticz
blocks[247]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[241] = {}
blocks[241]['width'] = 6;
blocks[241]['title'] = 'Giardino Muro sx' //if you want change the name of switch different then domoticz
blocks[241]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[246] = {}
blocks[246]['width'] = 6;
blocks[246]['title'] = 'Giardino Patio' //if you want change the name of switch different then domoticz
blocks[246]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[248] = {}
blocks[248]['width'] = 6;
blocks[248]['title'] = 'Giardino BBQ' //if you want change the name of switch different then domoticz
blocks[248]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
//Irrigation System
blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Irrigazione';
blocks['blocktitle_2']['height'] = 210;
blocks[90] = {}
blocks[90]['title'] = 'Zona 1' //if you want change the name of switch different then domoticz
blocks[90]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[90]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[91] = {}
blocks[91]['title'] = 'Zona 2' //if you want change the name of switch different then domoticz
blocks[91]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[91]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[92] = {}
blocks[92]['title'] = 'Zona 3' //if you want change the name of switch different then domoticz
blocks[92]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[92]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[93] = {}
blocks[93]['title'] = 'Zona 4' //if you want change the name of switch different then domoticz
blocks[93]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[93]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[94] = {}
blocks[94]['title'] = 'Tutte le Zone' //if you want change the name of switch different then domoticz
blocks[94]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[94]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// Thermostat and Air Conditioning
blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Termostato e Aria Condizionata';
blocks[289] = {}
blocks[289]['title'] = 'Caldaia' //if you want change the name of switch different then domoticz
blocks[289]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[18] = {}
blocks[18]['title'] = 'Termostato' //if you want change the name of switch different then domoticz
blocks[18]['width'] = 4; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[18]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[19] = {}
blocks[19]['title'] = 'Netatmo Away' //if you want change the name of switch different then domoticz
blocks[19]['width'] = 4; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[19]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[223] = {}
blocks[223]['title'] = 'AC Letto' //if you want change the name of switch different then domoticz
blocks[223]['image'] = 'air.png'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[223]['width'] = 6; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[223]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[224] = {}
blocks[224]['title'] = 'AC Salone' //if you want change the name of switch different then domoticz
blocks[224]['image'] = 'air.png'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[224]['width'] = 6; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[224]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// Temperature
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Temperature';
blocks[126] = {}
blocks[126]['title'] = 'Temperatura Patio' //if you want change the name of switch different then domoticz
blocks[126]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[126]['show_lastupdate'] = 'true'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[127] = {}
blocks[127]['title'] = 'CheckIpEsp' //if you want change the name of switch different then domoticz
blocks[127]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[327] = {}
blocks[327]['title'] = 'Temperatura Esterna' //if you want change the name of switch different then domoticz
blocks[327]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[207] = {}
blocks[207]['title'] = 'Temperatura Su' //if you want change the name of switch different then domoticz
blocks[207]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[328] = {}
blocks[328]['title'] = 'Temperatura Giu' //if you want change the name of switch different then domoticz
blocks[328]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[17] = {}
blocks[17]['title'] = 'Temperatura Netatmo' //if you want change the name of switch different then domoticz
blocks[17]['width'] = 4; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[335] = {}
blocks[335]['title'] = 'Temperatura Xiaomi Sala' //if you want change the name of switch different then domoticz
blocks[335]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[336] = {}
blocks[336]['title'] = 'Temperatura Xiaomi Letto' //if you want change the name of switch different then domoticz
blocks[336]['width'] = 3; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// Others
blocks[253] = {}
blocks[253]['title'] = 'Corrente' //if you want change the name of switch different then domoticz
blocks[253]['width'] = 12;
blocks[253]['switch'] = 'true'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[271] = {}
blocks[271]['title'] = 'PS4 Oggi' //if you want change the name of switch different then domoticz
blocks[271]['width'] = 12; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[271]['switch'] = 'true'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[271]['show_lastupdate'] = 'false'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// ---------------------- Columns -------------------------
var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['sunrise','miniclock','settings']
columns[1] = {}
columns[1]['blocks'] = [buttons.buienradar] //, buttons.repu, buttons.fatto, buttons.romat, buttons.webc]
columns[1]['width'] = 5;
columns[2] = {}
columns[2]['blocks'] = [buttons.webc, maps.rome, frames.weather]
columns[2]['width'] = 5;
columns[3] = {}
columns[3]['blocks'] = ['stationclock', buttons.radio,'253_1', '253_2', 271]
columns[3]['width'] = 2;
columns[4] = {}
columns[4]['blocks'] = ['blocktitle_1',96,95,256,272,'s1', 's3', 'blocktitle_2',90 ,91,92,93,94] //remark: idx 144 produces 2 blocks, so you can use: '144_1' and '144_2' (or just 144 if you want one)
columns[4]['width'] = 6;
columns[5] = {}
columns[5]['blocks'] = ['blocktitle_3', 17, '18', '19', 223, 224, '126_1', '327_1', '207_1', '328_1', '335_1', '336_1'] //remark: idx 144 produces 2 blocks, so you can use: '144_1' and '144_2' (or just 144 if you want one)
columns[5]['width'] = 6;
columns[6] = {}
columns[6]['blocks'] = ['graph_17', 'graph_126']
columns[6]['width'] = 6;
columns[7] = {}
columns[7]['blocks'] = ['graph_253']
columns[7]['width'] = 6;
columns[8] = {}
columns[8]['width'] = 6;
columns[8]['blocks'] = [calendars.combined]
columns[9] = {}
columns[9]['blocks'] = ['spotify']
columns[9]['width'] = 5;
// ---------------------- Screens -------------------------
var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 1920;
screens['default']['maxheight'] = 1280;
screens['default'][1] = {}
screens['default'][1]['background'] = 'bg2.jpg';
screens['default'][1]['columns'] = [1, 2, 3]
screens['default'][2] = {}
screens['default'][2]['background'] = 'bg2.jpg';
screens['default'][2]['columns'] = [4, 5]
screens['default'][3] = {}
screens['default'][3]['background'] = 'bg2.jpg';
screens['default'][3]['columns'] = [6,7,8,9]
screens['tablet'] = {}
screens['tablet']['maxwidth'] = 1024;
screens['tablet']['maxheight'] = 768;
screens['tablet'][1] = {}
screens['tablet'][1]['background'] = 'bg2.jpg';
screens['tablet'][1]['columns'] = [1, 2, 3] //, 14, 14,14]
screens['tablet'][2] = {}
screens['tablet'][2]['background'] = 'bg2.jpg';
screens['tablet'][2]['columns'] = [4, 5]
screens['tablet'][3] = {}
screens['tablet'][3]['background'] = 'bg2.jpg';
screens['tablet'][3]['columns'] = [6,7,8,9]
Code: Select all
/*
CUSTOM CSS FILE
*/
.fa,.wi {
font-size:24px !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
margin: 0px;
margin-left: 15px;
font-weight: 900;
/* font-size: 300%;*/
}
.fa.fa-lightbulb-o.on {
color:#00FF00;
}
/*.fa.fa-lightbulb-o.off {
color:#FF0000;
}
*/
/* Altezza blocchi */
#graphoutput253{height:150px;}
#graphoutput126{height:150px;}
#graphoutput17{height:150px;}
/* top bar opacity */
.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: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* Calendar font modifications with icon active */
.col-xs-10.items {
font-size: 16px;
}
/* Calendar font modifications with NO icon active */
.col-xs-12.items {
font-size: 16px;
}
.warning {
background: rgba(199,44,44,0.3) !important;
background-clip: padding-box;
}
/* //////////// Background of 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: 5px solid rgba(255,255,255,0); /* border: 7px -> 3px - Smaller space between blocks */
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 20px; /* Round corners */
}
.fa.fa-circle.on,
.fa.fa-circle.off {
margin-top: -8px; /* makes the device icon to move up to the center of the block */
padding-right: 1px;
}
/* Change background height of blocks with width 4, i.e. scene and door sensor blocks */
/*.transbg.col-xs-4{
height: 70px;
padding: 12px;
line-height: 15px;
font-size: 10pt;
}
*/
/* Make the background of the titleblocks less high */
.transbg.titlegroups {
height: 50px;
padding: 0px;
}
Code: Select all
//add custom javascript in here
function afterGetDevices(){
}
function getExtendedBlockTypes(blocktypes){
//blocktypes.Type['Lighting 2'] = { icon: 'fa fa-lightbulb-o', title: '<Name>', value: 'ds' }
return blocktypes;
}
/* if ESP is offline, red color on all Irrigation Zones blocks */
function getStatus_127(idx,value,device){
if(parseFloat(device['Status'])!='On'){
$('div.block_90').addClass('warning');
$('div.block_91').addClass('warning');
$('div.block_92').addClass('warning');
$('div.block_93').addClass('warning');
$('div.block_94').addClass('warning');
}
else {
$('div.block_90').removeClass('warning');
$('div.block_91').removeClass('warning');
$('div.block_92').removeClass('warning');
$('div.block_93').removeClass('warning');
$('div.block_94').removeClass('warning');
}
}
/* if ESP is offline, red color on all Irrigation Zones blocks */
function getStatus_289(idx,value,device){
if(parseFloat(device['Status'])!='On'){
$('div.block_17').removeClass('warning');
$('div.block_19').removeClass('warning');
$('div.block_18').removeClass('warning');
}
else {
$('div.block_17').addClass('warning');
$('div.block_19').addClass('warning');
$('div.block_18').addClass('warning');
}
}
Just found that the issue was Spotify
Code: Select all
config['spot_clientid'] = 'xxxxx';
....
columns[9] = {}
columns[9]['blocks'] = ['spotify']
columns[9]['width'] = 5;
Hi Frankyfands wrote: ↑Friday 13 October 2017 10:34 Hai Rob,
Nice work, I like Dashticz very much.
But I have way to many 'items' for 1 dashboard, so by creating more dashboards (screens) I'll keep swiping, so In my opinion there was only one thing missing, a mainmenu, I can now jump to the desired screen by a click/touch.
So with a little change in main.js I was able to create a menu with buttons, once clicked/touched will slide to the desired screen.
Maybe another option for Dashticz, but I like to see it in an ordered fashion, something in Config.js saying var Menu{} etc..
Or maybe keep the dashboard 'look', and create a mainmenu in the topbar.
This is what I did.
....
Regards
Frank
Code: Select all
if(typeof(button.newwindow)!=='undefined'){
var html='<div class="col-xs-'+width+' hover transbg buttons-'+key+'" data-id="buttons.'+key+'" onclick="window.open(\''+button.url+'\')">';
}
else if(typeof(button.slide)!=='undefined'){
var html='<div class="col-xs-'+width+' hover transbg buttons-'+key+'" data-id="buttons.'+key+'" onclick="toSlide('+(parseFloat(button.slide)-1)+')">';
}
else {
var html='<div class="col-xs-'+width+' hover transbg buttons-'+key+'" data-id="buttons.'+key+'" data-toggle="modal" data-target="#button_'+b+'_'+random+'" onclick="setSrc(this);">';
}
Code: Select all
if(typeof(button.slide)!=='undefined'){
var html='<div class="col-xs-'+width+' hover transbg Menu" data-id="buttons.'+key+'" onclick="toSlide(\''+button.slide+'\')">';
}
else {
if(typeof(button.newwindow)!=='undefined'){
var html='<div class="col-xs-'+width+' hover transbg" data-id="buttons.'+key+'" onclick="window.open(\''+button.url+'\')">';
}
else {
var html='<div class="col-xs-'+width+' hover transbg" data-id="buttons.'+key+'" data-toggle="modal" data-target="#button_'+b+'_'+random+'" onclick="setSrc(this);">';
}
}
Code: Select all
var _LANGUAGE = 'it_IT'; //or: en_US, fr_FR, hu_HU
var _HOST_DOMOTICZ = 'http://192.168.xx.xx:xx';
var _USE_AUTO_POSITIONING = true; //don't want to configure positions, use auto positioning
var _USE_FAVORITES = true; //only used when using auto positioning
var buttons = {}
buttons.hoofdmenu= {width:12, image: 'img/hoofdmenu_mirror.png', title: 'Hoofdmenu' ,slide:0 }
buttons.huismodus= {width:4, image: 'img/house_mirror.png', title: 'Huismodus' ,slide:1 }
buttons.alarm= {width:4, image: 'img/alarmpanel_mirror.png', title: 'Alarm',slide: 2}
buttons.utility= {width:4, image: 'img/power_mirror.png', title: 'Elektra, Gas & Water' ,slide:3 }
buttons.verlichting= {width:4, image: 'img/Light-off_mirror.png', title: 'Verlichting',slide: 4}
buttons.temperatuur= {width:4, image: 'img/temp_mirror.png', title: 'Temperatuur' ,slide:5 }
buttons.weerstation= {width:4, image: 'img/weer_mirror.png', title: 'Weerstation',slide: 6}
buttons.kas_en_moestuin= {width:4, image: 'img/kas_mirror.png', title: 'Kas & Moestuin' ,slide:7 }
buttons.instellingen= {width:4, image: 'img/settings_mirror.png', title: 'Instellingen',slide: 8}
buttons.media= {width:4, image: 'img/media_mirror.png', title: 'Media' ,slide:9 }
buttons.nieuws= {width:4, image: 'img/nieuws_mirror.png', title: 'Nieuws' ,slide:10 }
buttons.plattegrond= {width:4, image: 'img/floorplan_mirror.png', title: 'Plattegrond' ,slide:11 }
//buttons.domoticz= {width:3, image: 'img/weer_mirror.png', title: 'Weather',slide: 0}
-------------------------------------------------------------------------------------------------------
//Column[0] contains the 'goto mainmenu' button, so add column[0] on every screen.
var blocks = {}
blocks['blocktitle_1'] = {} Defines the blocktitle - Create a unique name for each block
blocks['blocktitle_1']['type'] = 'blocktitle'; Defines the type of block. This always should be blocktitle.
blocks['blocktitle_1']['title'] = 'Switches'
var columns = {}
columns[0] ={}
columns[0]['blocks']=['blocktitle_1',buttons.hoofdmenu]
columns[0]['width']=2;
//with columns[1] [2] [3] I define the first screen, the mainmenu
columns[1] = {}
columns[1]['width'] = 3;
columns[2] = {}
columns[2]['blocks'] = ['blocktitle_1',buttons.huismodus, buttons.alarm, buttons.utility, buttons.verlichting, buttons.temperatuur, buttons.weerstation, buttons.kas_en_moestuin, buttons.instellingen, buttons.media, buttons.nieuws, buttons.plattegrond]
columns[2]['width'] = 6;
columns[3] = {}
columns[3]['width'] = 3;
/*'bt_Hoofdmenu' is a blocktitle*/
var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg1.jpg';
screens[1]['background_morning'] = 'bg_morning.jpg';
screens[1]['background_noon'] = 'bg_noon.jpg';
screens[1]['background_afternoon'] = 'bg_afternoon.jpg';
screens[1]['background_night'] = 'bg_night.jpg';
screens[1]['columns'] = [0,1]
I didn't know about the system alive checker. It works easier and updates the device status much quicker. Thanks for the tip!
Code: Select all
if(typeof(button.newwindow)!=='undefined'){
var html='<div class="col-xs-'+width+' hover transbg buttons-'+key+'" data-id="buttons.'+key+'" onclick="window.open(\''+button.url+'\')">';
}
else if(typeof(button.slide)!=='undefined'){
var html='<div class="col-xs-'+width+' hover transbg Menu buttons-'+key+'" data-id="buttons.'+key+'" onclick="toSlide('+(parseFloat(button.slide)-1)+')">';
}
else {
var html='<div class="col-xs-'+width+' hover transbg buttons-'+key+'" data-id="buttons.'+key+'" data-toggle="modal" data-target="#button_'+b+'_'+random+'" onclick="setSrc(this);">';
}
Hi Ingmar