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

[Ingmar]

Hi Ingmar

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

Thanks

See viewtopic.php?f=67&t=17242&start=200#p151132

[woody4165]

Thanks Ingmar!

[woody4165]

Finally my tablet is on the wall. Fixed with two side supports printed with a 3d printer.
Since in that part of wall there is an interspace, I have inserted a 433Mhz relay connected with Domoticz/RFLink and created on the tablet with Macrodroid app two macros, one when the charging reaches 80% and one when it drops to 20% and send HTTP/GET action to domoticz to activate the charger, depending on it to have the tablet not charging every time.

The dashboard is very similar to the Ingmar one (thanks Ingmar for inspiration).

Some "bugs" that I noticed are the fact that when there is a block like xxx_1, the [switch] fuction does not work, either if I define the block with xxx_1 or xxx.
I don't see anymore the icons for sunrise/sunset, but just time for both.

Any advise on these two issues?

[yfands]

Hai woody4165,

yep only in "else if".. A white or black screen is mostly a typo (syntax error) look for missing } ] or ;
but Ierlandfan said it already, there a some strange things going on with the beta versions latests and previous.

[Ierlandfan]

Yep, I am on latest beta which magically started to work (sort of) no menu and I lost switches and a few other things . I din't do anything. Just left my the page alone for 24 hours or so. Probably caching issue, Eventhough I ctrl-F5 and F5 éd. Anyway, just wait for another version.

[MikeF]

Here's my attempt:



CONFIG.js:

Spoiler: show

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://xxxx:xxx';
config['app_title'] = 'Dashticz';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['auto_positioning'] = 0;
config['gm_api'] = 'xxx';
config['gm_zoomlevel'] = 8;
config['gm_latitude'] = xxx;
config['gm_longitude'] = xxx;
config['wu_api'] = 'xxx';
config['wu_city'] = 'Princes Risborough';
config['wu_name'] = '';
config['wu_country'] = 'UK';
config['last_update'] = 0;

var maps = {};
maps.location = { height: 450, width:12, latitude: xxx, longitude: xxx, zoom:14 }

var buttons = {}
buttons.webcam = {width:80, isimage:true, refresh:1000, image: 'http://xxxx/html/cam_pic.php', url: 'http://xxxx/html/cam_pic.php'}

var blocks = {}
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Switches';
blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Temperatures';
blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Power';
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Heating';
blocks['blocktitle_11'] = {}
blocks['blocktitle_11']['type'] = 'blocktitle';
blocks['blocktitle_11']['title'] = 'Map';

blocks[1] = {}
blocks[1]['switch'] = true;
blocks[1]['image'] = 'pi.png';
blocks[4] = {}
blocks[4]['switch'] = true;
blocks[4]['image'] = 'pi.png';
blocks[5] = {}
blocks[5]['switch'] = true;
blocks[5]['image'] = 'pi.png';

blocks[30] = {}
blocks[30]['switch'] = true;
blocks[31] = {}
blocks[31]['switch'] = true;
blocks[231] = {}
blocks[231]['switch'] = true;
blocks[245] = {}
blocks[245]['switch'] = true;
blocks[6] = {}
blocks[6]['switch'] = true;
blocks[46] = {}
blocks[46]['switch'] = true;
blocks[243] = {}
blocks[243]['switch'] = true;
blocks[249] = {}
blocks[249]['switch'] = true;
blocks[211] = {}
blocks[211]['switch'] = true;
blocks['211_1'] = {}
blocks['211_1']['switch'] = true;
blocks['211_2'] = {}
blocks['211_2']['switch'] = true;
blocks['211_3'] = {}
blocks['211_3']['switch'] = true;
blocks[215] = {}
blocks[215]['switch'] = true; 

blocks[224] = {}
blocks[224]['icon'] = 'fa-sun-o';
blocks[225] = {}
blocks[225]['icon'] = 'fa-sun-o';
blocks['240_1'] = {}

/*
blocks['240_1']['icon'] = 'fa-plug';
blocks['240_2'] = {}
blocks['240_2']['icon'] = 'fa-plug';
blocks['240_3'] = {}
blocks['240_3']['icon'] = 'fa-plug';
*/

var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','settings']
					
columns[1] = {}
columns[1]['blocks'] = ['currentweather_big','sunrise','weather','211_3',224,225,buttons.webcam,5,4,1]
columns[1]['width'] = 4;

columns[2] = {}
columns[2]['blocks'] = ['blocktitle_1',15,43,12,118,17,44,11,221,13,14,20,252,251,248,'s3','s2','blocktitle_3',240]
columns[2]['width'] = 4;

columns[3] = {}
columns[3]['blocks'] = ['blocktitle_2',211,30,231,245,6,46,243,249,215,'blocktitle_4',31,193,250]
columns[3]['width'] = 4;

columns[11] = {}
columns[11]['blocks'] = ['blocktitle_11',maps.location]
columns[11]['width'] = 6;

var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','weather']
columns_standby[1]['width'] = 12;

var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg10.jpg';
screens[1]['columns'] = [1,2,3]

screens[2] = {}
screens[2]['background'] = 'bg10.jpg';
screens[2]['background_night'] = 'custom/bg12.jpg';
screens[2]['columns'] = [11]

custom.css:

Spoiler: show

Code: Select all

/*
CUSTOM CSS FILE
*/

/* Modifications to the fa en wi font family*/
.fa.fa-lightbulb-o.on {
color: rgba(255,255,0,1.0)
}
.fa.fa-lightbulb-o.off {
color:#fff;
}
.fa.fa-mobile.on.icon {
font-size: 30px !important;
color: green;
}
.fa.fa-mobile.off.icon {
font-size: 30px !important;
}


/* Fontsize buttons Blinds */
.fa,.wi {
font-size:20px !important;
}

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

/* Block Title */
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: 200%;
}

.smalltitle h3 {
font-size: 12px !important;
margin-left: 6px;
}

/* Title of tile */
.title {
font-size:14px;
}

/* Standby screen */
.standby .clock{
font-size:60px !important;
}
.standby .weekday,.standby .date{
font-size:40px !important;
}

/* Swiper bullet */
.swiper-pagination-bullet {
width: 30px;
height: 30px;
background: white;
}

/* Up-Down arrow Blinds */
.input-groupBtn li {
position:sticky;
z-index: 9999;
right: 1px;
border-radius: 25px; /* Round corners */
}

/* Transparent Background for arrow Blinds - Big Screen */
.input-groupBtn.input-chevron .btn-number {
padding: 5px 10px 5px 10px;
background-color: transparent;
}

/* Transparent Background for arrow Blinds - Small Screen */
@media only screen and (max-width: 1400px) {
.input-groupBtn.input-chevron .btn-number {
padding: 7px 10px 7px 10px;
background-color: transparent;
}
}

(2nd page under construction - primarily to get map working).

I don't seem to be able to switch title and date on multi-value devices
- I've tried:

Code: Select all

blocks[211] = {}
blocks[211]['switch'] = true;

and

Code: Select all

blocks['211_1'] = {}
blocks['211_1']['switch'] = true;
blocks['211_2'] = {}
blocks['211_2']['switch'] = true;
blocks['211_3'] = {}
blocks['211_3']['switch'] = true;

Also, if anyone has a transparent Raspberry Pi image I'd be grateful!

[EdwinK]

Must be a big screen

[MikeF]

Nah - iMac 21.5-inch. Browser (Firefox) occupying about 2/3rds width...

[htilburgs]

rpi.png (49.92 KiB) Viewed 5344 times

[yfands]

Hello,

Still having issues with the lastest Beta Latest commit f4d1f5a 4 days ago (21/10/2017) regarding Temp & Humidiy sensors.
see http://www.domoticz.com/forum/viewtopic ... 00#p154374 (bug report) and
http://www.domoticz.com/forum/viewtopic ... 00#p154381 (bug report)

is this just me or ?

One issue solved
blocks[xxx]['show_lastupdate'] = false; //if you want to show the last update specific for this block
if you use:
blocks[xxx]['hide_lastupdate'] = false/true; this works..

I studied the latest Master version and I can't debug where the image I want it to display is being processed, In my opinion it isn't.
So I cut and pasted and coded some in the main,js with following results:

"Zwembad" is a Temp sensor only and processed accordingly, the other sensors are Temp/Hygro sensors with:

My own image.
Temp & Humidy in one (1) block.
Status of battery in text in % and icon. (icon will flash if < 20%)
and last seen will turn red if (in my case) there is no value received within 15 minutes.
Unfortunately The impact on main.js is to extensive to share, but maybe an inspiration for team Rob.


I thought a LCD theme was nice..

Screenshot-2017-10-25 Dashticz.png (157.71 KiB) Viewed 5315 times

[MikeF]

@htilburgs Thanks!

[woody4165]

Really nice @yfands, more than nice.

This is what's missing for temp/hum sensors and you added also the battery status. Really fantastic!

If I can help anyone in testing or (small) coding, let me know.

[EdwinK]

Again, really nice @yfands. Hope this too will one day be in Dashticz.

[landi]

My Dashticz panel on old iPad:

Actual HW setup:
- Logitech squeezebox
- Netatmo weather station
- Denon AVR
- Broadlink RM2 Pro (for sending RF and IR codes)
- LightwaveRF switches
- RFXCOM 433 (controlling RF and lightwave)
- USB Zwave controller
- Danfoss radiator valves (Z-wave)
- INODE (inode.pl) electricity meter + inode LAN

custom.css:

Spoiler: show

/*
CUSTOM CSS FILE
*/
.transbg.col-xs-8 {
padding-top: 15px;
padding-bottom: 15px;
border: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.2);
height: 160px; !important;
background-clip: padding-box;
}

.fa.fa-arrow-circle-left.fa-small {
font-size: 50px !important;
}
.fa.fa-stop-circle.fa-small {
font-size: 50px !important;
}
.fa.fa-play-circle.fa-small {
font-size: 50px !important;
}
.fa.fa-arrow-circle-right.fa-small {
font-size: 50px !important;
}
.fa.fa-pause-circle.fa-small {
font-size: 50px !important;
}
.fa.fa-lightbulb-o.on {
font-size: 48px; !important;
color:#F1C300;
}
.fa.fa-lightbulb-o.off {
font-size: 48px; !important;
color:#fff;
}
.fa.fa-thermometer-3.on {
font-size: 48px; !important;
color:#00BFFF;
}
.fa.fa-thermometer-3.off {
font-size: 48px; !important;
color:#fff;
}
.fa.fa-television.on {
font-size: 48px; !important;
color:#00BFFF;
}
.fa.fa-television.off {
font-size: 48px; !important;
color:#fff;
}
.fa.fa-video-camera.on {
font-size: 48px; !important;
color:#00BFFF;
}
.fa.fa-video-camera.off {
font-size: 48px; !important;
color:#fff;
}

CONFIG.js:

Spoiler: show

var config = {}
config['domoticz_ip'] = 'http://xx.xx.xx.xx:8080';
config['app_title'] = 'Dashticz';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '7';
config['standby_after'] = 0;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '15';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'day';
config['language'] = 'en_US';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'en_US';
config['calendarurl'] = 0;
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = 'REMOVED';
config['gm_zoomlevel'] = 3;
config['gm_latitude'] = '51.2xx';
config['gm_longitude'] = '22.5xx';
config['wu_api'] = 'REMOVED';
config['wu_city'] = 'Lublin';
config['wu_name'] = 0;
config['wu_country'] = 'PL';
config['idx_moonpicture'] = 0;
config['switch_horizon'] = 0;
config['host_nzbget'] = 0;
config['spot_clientid'] = 0;
config['sonarr_url'] = 0;
config['sonarr_apikey'] = 0;
config['sonarr_maxitems'] = 0;
config['garbage_company'] = 0;
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = 0;
config['garbage_street'] = 0;
config['garbage_housenumber'] = 0;
config['garbage_maxitems'] = 0;
config['garbage_width'] = 0;
config['selector_instead_of_buttons'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 1;
config['last_update'] = 1;
config['hide_off_button'] = 0;
config['hide_topbar'] = 1;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['garbage_hideicon'] = 0;

var blocks = {}

// Light switches



blocks[10] = {}
blocks[10]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[10]['title'] = 'Kitchen sink' //if you want change the name of switch different then domoticz
blocks[10]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[10]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[10]['switch'] = true; //if you want to switch the title and data
blocks[10]['hide_data'] = false; //if you want to hide the data of this block
blocks[10]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[10]['protected'] = false; //protect switching manually in Dashticz

blocks[11] = {}
blocks[11]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[11]['title'] = 'Kitchen table' //if you want change the name of switch different then domoticz
blocks[11]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[11]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[11]['switch'] = true; //if you want to switch the title and data
blocks[11]['hide_data'] = false; //if you want to hide the data of this block
blocks[11]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[11]['protected'] = false; //protect switching manually in Dashticz

blocks[12] = {}
blocks[12]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[12]['title'] = 'Salon light 2' //if you want change the name of switch different then domoticz
blocks[12]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[12]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[12]['switch'] = true; //if you want to switch the title and data
blocks[12]['hide_data'] = false; //if you want to hide the data of this block
blocks[12]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[12]['protected'] = false; //protect switching manually in Dashticz

blocks[13] = {}
blocks[13]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[13]['title'] = 'Salon light 1' //if you want change the name of switch different then domoticz
blocks[13]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[13]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[13]['switch'] = true; //if you want to switch the title and data
blocks[13]['hide_data'] = false; //if you want to hide the data of this block
blocks[13]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[13]['protected'] = false; //protect switching manually in Dashticz

blocks[14] = {}
blocks[14]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[14]['title'] = 'Sofa lights' //if you want change the name of switch different then domoticz
blocks[14]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[14]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[14]['switch'] = true; //if you want to switch the title and data
blocks[14]['hide_data'] = false; //if you want to hide the data of this block
blocks[14]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[14]['protected'] = false; //protect switching manually in Dashticz

blocks[16] = {}
blocks[16]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[16]['title'] = 'Bar light' //if you want change the name of switch different then domoticz
blocks[16]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[16]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[16]['switch'] = true; //if you want to switch the title and data
blocks[16]['hide_data'] = false; //if you want to hide the data of this block
blocks[16]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[16]['protected'] = false; //protect switching manually in Dashticz

blocks[17] = {}
blocks[17]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[17]['title'] = 'Kitchen main' //if you want change the name of switch different then domoticz
blocks[17]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[17]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[17]['switch'] = true; //if you want to switch the title and data
blocks[17]['hide_data'] = false; //if you want to hide the data of this block
blocks[17]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[17]['protected'] = false; //protect switching manually in Dashticz

blocks[85] = {}
blocks[85]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[85]['title'] = 'ALL LIGHTS OFF' //if you want change the name of switch different then domoticz
// blocks[85]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[85]['image'] = 'bulb_off.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[85]['switch'] = true; //if you want to switch the title and data
blocks[85]['hide_data'] = true; //if you want to hide the data of this block
blocks[85]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[85]['protected'] = false; //protect switching manually in Dashticz

// Denon

blocks[20] = {}
blocks[20]['width'] = 12; //1 to 12, remove this line if you want to use the default (4)
blocks[20]['title'] = 'Denon Source' //if you want change the name of switch different then domoticz
blocks[20]['icon'] = 'fa-film'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[20]['switch'] = true; //if you want to switch the title and data
blocks[20]['hide_data'] = false; //if you want to hide the data of this block
blocks[20]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[20]['protected'] = false; //protect switching manually in Dashticz

blocks[21] = {}
blocks[21]['width'] = 12; //1 to 12, remove this line if you want to use the default (4)
blocks[21]['title'] = 'Denon Volume' //if you want change the name of switch different then domoticz
blocks[21]['icon'] = 'fa-volume-up'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[21]['switch'] = true; //if you want to switch the title and data
blocks[21]['hide_data'] = false; //if you want to hide the data of this block
blocks[21]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[21]['protected'] = false; //protect switching manually in Dashticz

// RM2 switches


blocks[39] = {}
blocks[39]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[39]['title'] = 'A/C' //if you want change the name of switch different then domoticz
blocks[39]['icon'] = 'fa-thermometer-3'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[39]['image'] = 'fan_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[39]['switch'] = true; //if you want to switch the title and data
blocks[39]['hide_data'] = false; //if you want to hide the data of this block
blocks[39]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[39]['protected'] = false; //protect switching manually in Dashticz

blocks[40] = {}
blocks[40]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[40]['title'] = 'Screen' //if you want change the name of switch different then domoticz
blocks[40]['icon'] = 'fa-television'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[40]['image'] = 'fa-eye.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[40]['switch'] = true; //if you want to switch the title and data
blocks[40]['hide_data'] = false; //if you want to hide the data of this block
blocks[40]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[40]['protected'] = false; //protect switching manually in Dashticz


blocks[41] = {}
blocks[41]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[41]['title'] = 'TV' //if you want change the name of switch different then domoticz
blocks[41]['icon'] = 'fa-video-camera'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[41]['image'] = 'tv.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[41]['switch'] = true; //if you want to switch the title and data
blocks[41]['hide_data'] = false; //if you want to hide the data of this block
blocks[41]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[41]['protected'] = false; //protect switching manually in Dashticz

blocks[19] = {}
blocks[19]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[19]['title'] = 'PC' //if you want change the name of switch different then domoticz
blocks[19]['icon'] = 'fa-windows'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[19]['image'] = 'tv.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[19]['switch'] = true; //if you want to switch the title and data
blocks[19]['hide_data'] = false; //if you want to hide the data of this block
blocks[19]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[19]['protected'] = false; //protect switching manually in Dashticz

// Squeezebox

blocks[44] = {}
blocks[44]['width'] = 8; //1 to 12, remove this line if you want to use the default (4)
blocks[44]['title'] = 'Squeezebox' //if you want change the name of switch different then domoticz
blocks[44]['icon'] = 'fa-music'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[44]['image'] = 'tv.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[44]['switch'] = true; //if you want to switch the title and data
blocks[44]['hide_data'] = false; //if you want to hide the data of this block
blocks[44]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[44]['protected'] = false; //protect switching manually in Dashticz

// NetAtmo

blocks[49] = {}
blocks[49]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[49]['title'] = 'Outdoor' //if you want change the name of switch different then domoticz
blocks[49]['icon'] = 'fa-thermometer-3'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[49]['image'] = 'tv.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[49]['switch'] = true; //if you want to switch the title and data
blocks[49]['hide_data'] = false; //if you want to hide the data of this block
blocks[49]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[49]['protected'] = false; //protect switching manually in Dashticz

blocks[50] = {}
blocks[50]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[50]['title'] = 'Salon' //if you want change the name of switch different then domoticz
blocks[50]['icon'] = 'fa-thermometer-3'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[50]['image'] = 'tv.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[50]['switch'] = false; //if you want to switch the title and data
blocks[50]['hide_data'] = false; //if you want to hide the data of this block
blocks[50]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[50]['protected'] = false; //protect switching manually in Dashticz

// Danfoss Radiators

blocks[55] = {}
blocks[55]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[55]['title'] = 'Salon Heat P' //if you want change the name of switch different then domoticz
blocks[55]['switch'] = true; //if you want to switch the title and data
blocks[55]['hide_data'] = false; //if you want to hide the data of this block
blocks[55]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[55]['protected'] = false; //protect switching manually in Dashticz

blocks[57] = {}
blocks[57]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[57]['title'] = 'Salon Heat L' //if you want change the name of switch different then domoticz
blocks[57]['switch'] = true; //if you want to switch the title and data
blocks[57]['hide_data'] = false; //if you want to hide the data of this block
blocks[57]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[57]['protected'] = false; //protect switching manually in Dashticz

blocks[64] = {}
blocks[64]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[64]['title'] = 'Antek Heat' //if you want change the name of switch different then domoticz
blocks[64]['switch'] = true; //if you want to switch the title and data
blocks[64]['hide_data'] = false; //if you want to hide the data of this block
blocks[64]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[64]['protected'] = false; //protect switching manually in Dashticz

blocks[66] = {}
blocks[66]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[66]['title'] = 'Bedroom Heat' //if you want change the name of switch different then domoticz
blocks[66]['switch'] = true; //if you want to switch the title and data
blocks[66]['hide_data'] = false; //if you want to hide the data of this block
blocks[66]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[66]['protected'] = false; //protect switching manually in Dashticz

// Blocktitles

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'] = 'Denon';

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

blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Rain radar';

blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Radiators';

// Buttons

var buttons = {}
buttons.buienradar = {width:12, isimage:true, refreshimage:60000, image: 'http://strony.toya.net.pl/~rybar/met/img/radar-map.png', url: 'http://strony.toya.net.pl/~rybar/met/img/radar-map.png'}

// Frames

var frames = {}
frames.squeeze = {height:160,frameurl:"http://xxx.xxx.xxx.xxx:8080/dashticz_v2 ... g",width:4}
frames.weather = {refreshiframe:10000,height:230,frameurl:"//forecast.io/embed/#lat=51.2516&lon=22.5619&name=Lublin&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si&text-color=#fff",width:12}

// Columns

var columns = {}

columns[1] = {}
columns[1]['blocks'] = ['clock','weather','blocktitle_1',14,13,12,16,11,10,17,85];
// columns[1]['blocks'] = ['clock',frames.weather,'blocktitle_1',14,13,12,16,11,10,17];
columns[1]['width'] = 6;


columns[2] = {}
columns[2]['blocks'] = ['blocktitle_3',39,40,41,19,'blocktitle_2',20,21,frames.squeeze,44]
columns[2]['width'] = 6;

columns[3] = {}
//columns[3]['blocks'] = ['clock','sunrise','currentweather_big',50,49]
columns[3]['blocks'] = ['sunrise',frames.weather,50,49,'blocktitle_6',55,57,64,66] /
columns[3]['width'] = 6;

columns[4] = {}
columns[4]['blocks'] = ['blocktitle_4',buttons.buienradar]
columns[4]['width'] = 6;


columns[5] = {}
columns[5]['blocks'] = ['clock','graph_9',9] // show clock and e-meter graph for electricity usage
columns[5]['width'] = 12;


// Screens

var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg2.jpg';
screens[1]['columns'] = [1,2]

screens[2] = {}
screens[2]['background'] = 'bg3.jpg';
screens[2]['columns'] = [3,4]

screens[3] = {}
screens[3]['background'] = 'bg4.jpg';
screens[3]['columns'] = [5]

crontab:

Spoiler: show

# m h dom mon dow command
* * * * * /opt/domoticz/scripts/denon.sh 2>&1
* * * * * wget -q -O /tmp/cover.jpg "http://xx.xx.xx.xx:9000/music/current/c ... 0:xx:xx:xx" && convert -resize 160X160 /tmp/cover.jpg /opt/domoticz/www/dashticz_v2/img/cover.jpg
@reboot python /opt/domoticz/INODE/inode.py &

[EdwinK]

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.


Regards
Frank

I've been playing with this, and although it looks great, I rather go back to the original Dashticz for now. Do I need to change stuff in main.js again?

[EdwinK]

Nah - iMac 21.5-inch. Browser (Firefox) occupying about 2/3rds width...

Much bigger then my 7inch Nexus7 tablet

[htilburgs]

I like a as simple as possible dashboard. I have tried several setups, but wasn't sattisfied.
After I choose for a Microsoft Surface RT tablet to use as the dashboard, I've started all over to fit the important buttons on the screen.
I came to the conclusion that buttons have to be simple and kids (wife) proof. This is my new simplified dashboard.

Dashboard.jpg (247.83 KiB) Viewed 4723 times

Dashboard02.jpg (15.41 KiB) Viewed 4723 times

config.JS

Spoiler: show

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://192.168.0.100:8088';
config['app_title'] = 'Domotica Dashboard';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'https://cors-anywhere.herokuapp.com/http://www.nu.nl/rss';
config['news_scroll_after'] = '7';
config['standby_after'] = 15;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = 0;	
config['auto_slide_pages'] = 0;			//set _AUTO_SWIPEBACK_TIME = 0
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YYYY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = 0;
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = 0;
config['gm_zoomlevel'] = 0;
config['gm_latitude'] = 0;
config['gm_longitude'] = 0;
config['wu_api'] = '--APIKEY--;
config['wu_city'] = 'Eindhoven';
config['wu_name'] = 0;
config['wu_country'] = 'NL';
config['idx_moonpicture'] = '7';
config['switch_horizon'] = 0;
config['host_nzbget'] = 0;
config['spot_clientid'] = 0;
config['garbage_company'] = 'cure';
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = '--POSTCODE--';
config['garbage_street'] = '--ADRES--';
config['garbage_housenumber'] = '--HUISNUMMER--';
config['garbage_maxitems'] = '6';
config['garbage_width'] = '12';
config['selector_instead_of_buttons'] = 1;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['last_update'] = 0;
config['hide_off_button'] = 0;
config['hide_topbar'] = 0;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['garbage_hideicon'] = 0;
config['selector_instead_of_buttons'] = 0;	//use for selectors
config['hide_off_button'] = 0; //use for selectors

// Garbage - Advanced Settings
var _DO_NOT_USE_COLORED_TRASHCAN 	= true;
var trashcan = {}
var trashnames = {}
trashnames['Pmd bennekel blaarthem'] = 'PMD';
trashnames['Papier en karton'] = 'PAPIER';
trashnames['Gft'] = 'GFT'

//var trashcolors = {}
//trashcolors['Pmd bennekel blaarthem'] = 'Yellow';
//trashcolors['Papier en karton'] = 'Blue'
//trashcolors['Gft'] = 'Green';

// iCalendar Plugin, supports all .ics calendar types like Google Calendar, Apple Calendar
var _ICALENDAR_URL			= 'https://testurl.com/ical.ics'; //supports .ics type calendars (Google Calendar, Apple Calendar etc.)
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		= 'nl'; //en,hu, etc. 

// Calendar
var calendars = {}
calendars.f1 = {maxitems: 5, title:'', image:'', icalurl:'--F1 CALENDAR URL--'}
calendars.prive = {maxitems: 5, title: '', image: '', --PRIVATE CALENDAR URL--'}

// Online Radio Stream Plugin, Note: you must enable plugin in column section 'streamplayer'
var _STREAMPLAYER_TRACKS     = [
   {"track":1,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
   {"track":2,"name":"Radio 538","file":"http://vip-icecast.538.lw.triple-it.nl/RADIO538_MP3"},
   {"track":3,"name":"Arrow Classic Rock","file":"http://www.garnierstreamingmedia.com/asx/streamerswitch.asp?stream=205"},
   {"track":4,"name":"Radio Veronica","file":"http://live.icecast.kpnstreaming.nl/skyradiolive-SRGSTR09.mp3"},
   {"track":5,"name":"Q-music","file":"http://live.icecast.kpnstreaming.nl/omroepbrabantlive-OmroepBrabantHq.m3u"},
];

var buttons = {}
buttons.moon = {width:8, isimage:true, refreshimage:60000, image: 'moon'}
buttons.cam_voor = { width:12, isimage:true, refresh:2000, image: '--CAMERA URL--', url: '--CAMERA URL--' }

//CUSTOM POSITIONING:
//defining wich blocks to show, de numbers represents the IDX of the device in Domoticz
//only define if you want to use a custom width instead of the default

var blocks = {}

//Schakelaars
blocks[226] = {} //Rolluik woonkamer - Selector
blocks[226]['title'] = 'Rolluik Woonkamer';
blocks[226]['width'] = 12;
blocks[226]['icon'] = '' 

blocks[225] = {} //Rolluik slaapkamer - Selector
blocks[225]['title'] = 'Rolluik Slaapkamer';
blocks[225]['width'] = 12;
blocks[225]['icon'] = '' 

blocks[6] = {} //Rolluik woonkamer
blocks[6]['width'] = 12;
blocks[6]['hide_stop'] = true;
blocks[6]['hide_data'] = false; 
blocks[6]['icon'] = 'fa-align-justify';

blocks[217] = {} //Rolluik slaapkamer
blocks[217]['width'] = 12;
blocks[217]['hide_stop'] = true;
blocks[217]['hide_data'] = false;
blocks[217]['icon'] = 'fa-align-justify';

blocks[461] = {} //Woonkamer achter - Selector
blocks[461]['title'] = 'Woonkamer achter';
blocks[461]['icon'] = '' 
blocks[461]['width'] = 12;

blocks[179] = {} //Woonkamer achter
blocks[179]['title'] = 'Woonkamer achter';
blocks[179]['width'] = 12;

blocks[193] = {} //Woonkamer voor
blocks[193]['title'] = 'Woonkamer voor';
blocks[193]['width'] = 12;

blocks[462] = {} //Woonkamer voor - Selector
blocks[462]['title'] = 'Woonkamer voor';
blocks[462]['icon'] = '' 
blocks[462]['width'] = 12;

blocks[443] = {} //Schemerlamp woonkamer
blocks[443]['title'] = 'Schemerlamp';
blocks[443]['width'] = 12;

blocks[463] = {} //Overloop
blocks[463]['title'] = 'Lamp Overloop';
blocks[463]['width'] = 12;

blocks[464] = {} //Zolder
blocks[464]['title'] = 'Lamp Zolder';
blocks[464]['width'] = 12;

blocks[213] = {} //Yeelight Huiskamer
blocks[213]['title'] = 'Yeelight';
blocks[213]['width'] = 12;

blocks[214] = {} //Yeelight RGBW
blocks[214]['title'] = 'Yeelight Woonkamer';
blocks[214]['icon'] = ''
blocks[214]['width'] = 12;

blocks[452] = {} //Schemerlamp - Sara
blocks[452]['title'] = 'Lamp Sara';
blocks[452]['width'] = 12;

//Overige
blocks[150] = {} //iPhone Harm
blocks[150]['width'] = 12;		
blocks[150]['icon'] = 'fa-male'
blocks[150]['show_lastupdate'] = true;
blocks[150]['protected'] = true;
blocks[150]['playsound'] = 'sounds/sonar.mp3';	
blocks[150]['title'] = 'Harm'

blocks[153] = {} //iPhone Nassira
blocks[153]['width'] = 12;		
blocks[153]['icon'] = 'fa-female'
blocks[153]['show_lastupdate'] = true;
blocks[153]['protected'] = true;
blocks[153]['playsound'] = 'sounds/sonar.mp3';	
blocks[153]['title'] = 'Nassira'

blocks[211] = {} //Maanphase
blocks[211]['width'] = 4;
blocks[211]['title'] = ''
blocks[211]['icon'] = 'fa-moon-o'

blocks[208] = {} //Maanpercentage
blocks[208]['width'] = 4;
blocks[208]['title'] = ''
blocks[208]['icon'] = 'fa-moon-o' 

//Block Titles
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Familie agenda';

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

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

//Empty Block
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = '';

//blocks[1] = {}
//blocks[1]['width'] = 4; 						// 1 to 12, remove this line if you want to use the default (4)
//blocks[1]['title'] = 'Living room' 				// if you want change the name of switch different then domoticz
//blocks[1]['icon'] = 'fa-eye'; 					// if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
//blocks[1]['image'] = 'bulb_off.png'; 				// if you want to show an image instead if icon, place image in img/ folder
//blocks[1]['switch'] = true;						// if you want to switch title and data
//blocks[1]['hide_data'] = true; 					// if you want to hide the data of this block
//blocks[1]['show_lastupdate'] = true;				// show lastupdate time from device (per device)
//blocks[1]['protected'] = true;					// make switch protected (no actions on push)
//blocks[1]['playsound'] = 'sounds/sonar.mp3';		// play sound

var columns = {}

columns[1] = {}
columns[1]['blocks'] = [226,6,461,179,214,213,443]
columns[1]['width'] = 3; 

columns[2] = {}
columns[2]['blocks'] = [225,217,462,193,464,463,452]
columns[2]['width'] = 3; 

columns[3] = {}
columns[3]['blocks'] = [buttons.cam_voor, 'blocktitle_1',calendars.prive,'blocktitle_2',calendars.f1]
columns[3]['width'] = 4; 

columns[4] = {}
columns[4]['blocks'] = ['clock', buttons.moon, 211, 208, 'sunrise','currentweather_big','garbage',150,153]
columns[4]['width'] = 2; 

//TOP Bar
//columns['bar'] = {}
//columns['bar']['blocks'] = ['logo','miniclock','settings']


//Standby Screen
var columns_standby = {}

columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','weather']
columns_standby[1]['width'] = 12

columns_standby[2] = {}
columns_standby[2]['blocks'] = ['blocktitle_1',calendars.prive]
columns_standby[2]['width'] = 4

columns_standby[3] = {}
columns_standby[3]['blocks'] = ['blocktitle_2',calendars.f1]
columns_standby[3]['width'] = 4

columns_standby[4] = {}
columns_standby[4]['blocks'] = ['blocktitle_3','blocktitle_4','garbage']
columns_standby[4]['width'] = 4

//Screens & Background
var screens = {}

screens[1] = {}
screens[1]['background'] = 'dv2-bg10.jpg';
screens[1]['columns'] = [1,2,3,4]

custom.css

Spoiler: show

Code: Select all

/*
CUSTOM CSS FILE
*/

/* Modifications Top Bar */
.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);		/* 7px solid rgba(255,255,255,0); */
    background: rgba(0,0,0,0.1);				/* rgba(0,0,0,0.5); */
    background-clip: padding-box;
}

/* Modifications for the currentweather_big block */
.big .weatherdegrees, .big .weatherloc {
    display: inline-block;
    margin-top: -4px;		/* default -2px */
	margin-left: 24px;		/* move text to the right */
    font-size: 20px;		
    font-weight: bold;
}

.skyconsmall {
    display: block;
	width: 75px;			/* default 100% - make icon smaller */
    max-width: 125px;
    font-size: 15px;
	margin-left: -30px;		/* move icon to the right */
}

/* Modification for Moonphase and Moon %*/
.block_208,					/* Moonphase */
.block_211 {  				/* Moon % */
	font-size: 13px !important;
}

/* Modifications to the fa en wi font family*/
.fa.fa-lightbulb-o.on {
	color: rgba(255,255,0,1.0);
	font-size: 35px !important;
	margin-top: 1px; 
	margin-left: 1px;
}
.fa.fa-lightbulb-o.off {
    color:#fff;
	font-size: 35px !important;
	margin-top: 1px; 
	margin-left: 1px;
}
.fa.fa-male.on.icon,
.fa.fa-female.on.icon {
	font-size: 35px !important;
	color: rgba(255,255,0,1.0);
}
.fa.fa-male.off.icon,
.fa.fa-female.off.icon {
	font-size: 35px !important;
}
.fa.fa-moon-o {
    margin-top: -12px !important;		/* Move icon to the top */
    font-size: 20px !important;
    display: block;						/* Needed to get margin-top to work */
}

/* Fontsize buttons Blinds */
.fa,.wi {
   font-size: 20px !important;
}

/* Sunrise & Sunset icon */
.wi.wi-sunrise, 
.wi.wi-sunset {
	font-size: 20px !important;
}

/* Fontsize Sunrise & Sunset */
.sunriseholder, 
.sunriseholder .wi {
    font-size: 17px !important;
}

/* 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: 2px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(0,0,0,0.1);				/* rgba(0,0,0,0.1); -> 0,0,0,0 makes transparent */ 
	background-clip: padding-box;
	border-radius: 15px;						/* Round corners */ 
}

.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: 2px solid rgba(255,255,255,0); 
	background: rgba(255,255,255,0.1); 
	background-clip: padding-box; 
	border-radius: 15px; 
	cursor:pointer;
}

/* Height of the blocktitles and center text in new height */
div.mh.titlegroups {
    height: 20px !important;
    padding-top: 3px !important;
	background: rgba(0,0,0,0);	
}

.col-xs-12.mh.titlegroups.transbg {
	height: 0px;
}

/* Text size in blocks */
div.screen {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-position: center;
    color: white;
    font-size: 12.5px !important;				/* default 10px - 12.5px */
}

/* Text behind icon in blocks */
.col-xs-10 {
  width: 73%;		/* overrule bootstrap.css - width: 83,33333% */
}

/* Block Title */
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: 150%;
}

/* Standby screen */
.standby .clock{
   font-size:60px !important;
}
.standby .weekday,.standby .date{
   font-size:40px !important;
}

/* Transparent Background for arrow Blinds - Big Screen */
.input-groupBtn.input-chevron .btn-number {
    padding: 5px 10px 5px 10px;
    background-color: transparent;
}

/* Transparent Background for arrow Blinds - Small Screen */
@media only screen and (max-width: 1400px) {
	.input-groupBtn.input-chevron .btn-number {
		padding: 7px 10px 7px 10px;
		background-color: transparent;
	}
}

/* Trashcan text modification */
.trash .state div.trashrow {
    font-size: 14px;
}
.trash .state div.trashtoday {
    font-size: 18px;
}
.trash .state div.trashtomorrow {
    font-size: 14px;
}

.trashcan { 
    height: 30px;
    width: 30px;
} 

/* Modified sliders for the dimmers */
.block_179 .ui-slider-handle,
.block_193 .ui-slider-handle,
.block_213 .ui-slider-handle {
    border-radius: 25px;
    height: 28px;
    width: 35px;
	padding: 6px 10px 6px 10px;
	background-color: rgb(126,119,166);
	border-color: rgb(126,119,166);
}

.block_179 .ui-slider-horizontal,
.block_193 .ui-slider-horizontal, 
.block_213 .ui-slider-horizontal {
    border-color: transparent;
    height: 6px;
	bottom: -5px;
	margin-left: 10px;
	background-color: rgb(126,119,166);
}

.slider-on .ui-slider-handle {
    background-color: #fff;
    border-color:  #fff;
}

.slider-on .ui-slider-horizontal{
	background-color: #fff;
	border-color:transparent;
	height: 3px;
}

/* Scrollbar - Anywhere on the dashboard */
::-webkit-scrollbar {
    width: 1px;									/* Small vertical scrollbar */
    background-color: transparent !important;	/* Scrollbar transparent */
}

/* Location Buttons in Blocks */
.block_213 .btn-group, .block_214 .btn-group-vertical,
.block_214 .btn-group, .block_214 .btn-group-vertical,
.block_225 .btn-group, .block_225 .btn-group-vertical,
.block_226 .btn-group, .block_226 .btn-group-vertical,
.block_443 .btn-group, .block_443 .btn-group-vertical,
.block_461 .btn-group, .block_461 .btn-group-vertical,
.block_462 .btn-group, .block_462 .btn-group-vertical {
    position: fixed;
    display: inline-block;
    vertical-align: middle;
	margin-left: 10px !important;
}

/* Large Font for Block Titles */
.block_6 .title,
.block_150 .title,
.block_153 .title,
.block_179 .title,
.block_193 .title,
.block_213 .title, 
.block_214 .title, 
.block_217 .title,
.block_225 .title, 
.block_226 .title, 
.block_443 .title,
.block_452 .title,
.block_461 .title, 
.block_462 .title, 
.block_463 .title, 
.block_464 .title {
	font-size: 17px !important; 
	margin-left: 10px !important;
}

/* Large Font for Block Status */
.block_6 .state,
.block_150 .state,
.block_153 .state,
.block_179 .state,
.block_193 .state,
.block_213 .state,
.block_217 .state,
.block_443 .state,
.block_452 .state,
.block_463 .state,
.block_464 .state {
	font-size: 17px !important;
	margin-left: 10px !important;
}

/* Position Last Update Text */
.block_150 .lastupdate,
.block_153 .lastupdate {
	margin-left: 10px !important;
}

/* Font Size Calendar Items */
.col-xs-12.transbg.containsicalendar {
	font-size: 14px !important;	
}

/* END CUSTOM MODIFICATIONS */

[yfands]

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.


Regards
Frank

I've been playing with this, and although it looks great, I rather go back to the original Dashticz for now. Do I need to change stuff in main.js again?

@Edwin,

Just download the latest master or beta and install, the menu should be gone.
Rgds
Frank

[robgeerts]

Great dashboards!!

[dagger38]

Trouble setting up camera Velleman :

I own a velleman CAMIP5N1 ip cam.
In the setup i can give in all the variables , ecxept the url for the image?

If i put snapshot.jpg , no image is generated?

Anyone know the correct setup for this camera?

Thanks