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

[EdwinK]

Got it working now. Could you please attach the images you use?

[yfands]

@EdwinK

Nice..

Images in the zip file, added a few more..

[Regdul]

Hello all,

Last month i updated my working version V1 for V2. I made a backup of my custom config and made a new config.

So far so good. Dashticz is showing but not the switches.



I think the problem is V1 i installed manually. V2 i used the pull command.
Is there a way to roll back. Or deinstall and install V2?

Greetings,

Regdul

heres the configfile:

Spoiler: show

CONFIG.js

(7.11 KiB) Downloaded 363 times

[Derik]

please this menu option in the las beta....[ so it is work out of the box.. ]
GREAT work!!

Thanks guys..

[remb0]

wow yfands this is really great. I had 6 screens but all: full, too little, too big etc. but now I use your way and it all looks nices.
a few more screens but all nicely separated and easy to choose!

great work!

[EdwinK]

I like this too. Just too bad that now everything looks really small. Maybe something I didn't do right in the CSS.

Esp. the tiles on the first screen need to be bigger, and text on all the tiles/screens





This is my css-code

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;

}

[yfands]

@EdwinK

Looks like the menu class is not processed.
are you using the latest beta version, Rob already implemented my piece of buttons.slide code but did not add the Menu class.
in main.js add the word Menu at line 572 after transbg

suc6

[EdwinK]

Did get the latest beta earlier this morning.

This is what I've got in my main.js at 572

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)+')">';

[yfands]

@EdwinK

I'll take it take you inserted Menu yourself?, it should do the trick! and give you bigger buttons..

[EdwinK]

Yes. It does. Somehow i deleted part of the css file.

[woody4165]

Hi

has something changed in latest beta, just downloaded?
I downloaded in a new folder, copied CONFIG.js and the two custom (js and css) from master folder and I don't see anymore any blocks.
Any suggestion?

Thanks

[EdwinK]

Not that I know of. Everything working as it should.

[woody4165]

Really strange.

Same CONFIG.js and custom files, copied from master to beta folder does not work


CONFIG.js

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]

custom.css

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

custom.js

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

[woody4165]

Hi

has something changed in latest beta, just downloaded?
I downloaded in a new folder, copied CONFIG.js and the two custom (js and css) from master folder and I don't see anymore any blocks.
Any suggestion?

Thanks

Just found that the issue was Spotify

I have

Code: Select all

config['spot_clientid'] = 'xxxxx';
 ....
columns[9] = {}
columns[9]['blocks'] = ['spotify']
columns[9]['width'] = 5; 

If I remove columns[] 9 from screens[] all works well.

Anyone wit this issue with latest beta?

Thanks

[woody4165]

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

Hi Frank

regarding the main.js is it correct that I have to replace this

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);">';
	}
	

with 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);">';
		}
 	}

I have then created a simple CONFIG.js just to test:

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]

But then I get a white page.

What did I make wrong?

Thanks

[Ingmar]

Instead of writing your own ping script, you can add the 'system alive checker' virtual hardware in domoticz to check your devices. Saves the programming

I didn't know about the system alive checker. It works easier and updates the device status much quicker. Thanks for the tip!

[yfands]

Hai Woody4165,

nop, This is not gonna work, You are using the beta version where Rob already put the buttons.slide code in, but forgot the Menu.
the only thing you have to do is insert the word Menu after transbg

Look for:
else if(typeof(button.slide)!=='undefined'){
var html='<div class="col-xs-'+width+' hover transbg buttons-'+key+'" data-id="buttons.'+key+'" onclick= etc

after the word transbg type a space then Menu and again space.
That should to the trick..

Beware that after you update/upgrade to another version the change is lost.
Hopefully Rob adds the class Menu to make the menu permanent.

Regards
Frank

[woody4165]

Thanks Frank.

Just changed like this:

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);">';
	}

The Menu word appears only in "else if" correct?

I left the CONFIG.js as in previous message, but I still get a white page.
There might be something wrong in there, but I don't find it

[woody4165]

....

Then in the dashboard it's a block like any other light switch. Then pick an icon from Font Awesome and you can do anything you like with it. I made this of it:
status.JPG

Hi Ingmar

How did you reduce the height of that block?
Can you show settings for the icon and blocks in css file?

Thanks

[Ierlandfan]

I think there's something not ok in the latest beta since I get a white page after doing a new git pull and not changing anything.
Probably missing a parameter in CONFIG.js for the slides to work?