Dashticz - Show your dashboard and how-to's!
Moderators: leecollings, htilburgs, robgeerts
- EdwinK
- Posts: 1820
- Joined: Sunday 22 January 2017 21:46
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Rhoon
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Got it working now. Could you please attach the images you use?
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
-
- Posts: 67
- Joined: Monday 04 July 2016 10:16
- Target OS: Raspberry Pi / ODroid
- Domoticz version: latest B
- Location: Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
@EdwinK
Nice..
Images in the zip file, added a few more..
Nice..
Images in the zip file, added a few more..
- Attachments
-
- Menu_images.zip
- (367.49 KiB) Downloaded 268 times
-
- Posts: 7
- Joined: Friday 28 October 2016 11:24
- Target OS: Linux
- Domoticz version: 3.8153
- Location: Lemmer - Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
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:
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
- Attachments
-
- dashticz.jpg (143.21 KiB) Viewed 3416 times
Last edited by Regdul on Sunday 15 October 2017 21:21, edited 2 times in total.
-
- Posts: 1601
- Joined: Friday 18 October 2013 23:33
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Arnhem/Nijmegen Nederland
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
please this menu option in the las beta....[ so it is work out of the box.. ]
GREAT work!!
Thanks guys..
GREAT work!!
Thanks guys..
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups
- remb0
- Posts: 499
- Joined: Thursday 11 July 2013 22:21
- Target OS: Raspberry Pi / ODroid
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
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!
a few more screens but all nicely separated and easy to choose!
great work!
- EdwinK
- Posts: 1820
- Joined: Sunday 22 January 2017 21:46
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Rhoon
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
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
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;
}
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
-
- Posts: 67
- Joined: Monday 04 July 2016 10:16
- Target OS: Raspberry Pi / ODroid
- Domoticz version: latest B
- Location: Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
@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
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
- Posts: 1820
- Joined: Sunday 22 January 2017 21:46
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Rhoon
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Did get the latest beta earlier this morning.
This is what I've got in my main.js at 572
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)+')">';
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
-
- Posts: 67
- Joined: Monday 04 July 2016 10:16
- Target OS: Raspberry Pi / ODroid
- Domoticz version: latest B
- Location: Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
@EdwinK
I'll take it take you inserted Menu yourself?, it should do the trick! and give you bigger buttons..
I'll take it take you inserted Menu yourself?, it should do the trick! and give you bigger buttons..
- EdwinK
- Posts: 1820
- Joined: Sunday 22 January 2017 21:46
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Rhoon
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Yes. It does. Somehow i deleted part of the css file.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
-
- Posts: 476
- Joined: Monday 14 March 2016 13:55
- Target OS: Linux
- Domoticz version: beta
- Location: Rome, Italy
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
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
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
Cubietruck - Linux cubietruck 4.13.16 (Debian GNU/Linux 8 (jessie)) + Domoticz + RFLink, Xiaomi Gateway, Owl USB, Yeelight Color and B/W, ESP8266, Broadlink RM2, Netatmo Thermostat
- EdwinK
- Posts: 1820
- Joined: Sunday 22 January 2017 21:46
- Target OS: Raspberry Pi / ODroid
- Domoticz version: BETA
- Location: Rhoon
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Not that I know of. Everything working as it should.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
-
- Posts: 476
- Joined: Monday 14 March 2016 13:55
- Target OS: Linux
- Domoticz version: beta
- Location: Rome, Italy
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Really strange.
Same CONFIG.js and custom files, copied from master to beta folder does not work
CONFIG.js
custom.css
custom.js
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');
}
}
Cubietruck - Linux cubietruck 4.13.16 (Debian GNU/Linux 8 (jessie)) + Domoticz + RFLink, Xiaomi Gateway, Owl USB, Yeelight Color and B/W, ESP8266, Broadlink RM2, Netatmo Thermostat
-
- Posts: 476
- Joined: Monday 14 March 2016 13:55
- Target OS: Linux
- Domoticz version: beta
- Location: Rome, Italy
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
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;
Anyone wit this issue with latest beta?
Thanks
Cubietruck - Linux cubietruck 4.13.16 (Debian GNU/Linux 8 (jessie)) + Domoticz + RFLink, Xiaomi Gateway, Owl USB, Yeelight Color and B/W, ESP8266, Broadlink RM2, Netatmo Thermostat
-
- Posts: 476
- Joined: Monday 14 March 2016 13:55
- Target OS: Linux
- Domoticz version: beta
- Location: Rome, Italy
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
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
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);">';
}
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]
What did I make wrong?
Thanks
Cubietruck - Linux cubietruck 4.13.16 (Debian GNU/Linux 8 (jessie)) + Domoticz + RFLink, Xiaomi Gateway, Owl USB, Yeelight Color and B/W, ESP8266, Broadlink RM2, Netatmo Thermostat
-
- Posts: 51
- Joined: Sunday 04 May 2014 1:34
- Target OS: NAS (Synology & others)
- Domoticz version:
- Location: The Netherlands
- Contact:
Re: A little help to make my dashboard awesome
I didn't know about the system alive checker. It works easier and updates the device status much quicker. Thanks for the tip!
Synology NAS with stable release, AEON Z-wave, RFXCOM, Toon, Echo Dot, HAbridge, HarmonyHUB, Dashticz.
-
- Posts: 67
- Joined: Monday 04 July 2016 10:16
- Target OS: Raspberry Pi / ODroid
- Domoticz version: latest B
- Location: Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
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
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
-
- Posts: 476
- Joined: Monday 14 March 2016 13:55
- Target OS: Linux
- Domoticz version: beta
- Location: Rome, Italy
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Thanks Frank.
Just changed like 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
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);">';
}
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
Cubietruck - Linux cubietruck 4.13.16 (Debian GNU/Linux 8 (jessie)) + Domoticz + RFLink, Xiaomi Gateway, Owl USB, Yeelight Color and B/W, ESP8266, Broadlink RM2, Netatmo Thermostat
-
- Posts: 476
- Joined: Monday 14 March 2016 13:55
- Target OS: Linux
- Domoticz version: beta
- Location: Rome, Italy
- Contact:
Re: A little help to make my dashboard awesome
Hi Ingmar
How did you reduce the height of that block?
Can you show settings for the icon and blocks in css file?
Thanks
Cubietruck - Linux cubietruck 4.13.16 (Debian GNU/Linux 8 (jessie)) + Domoticz + RFLink, Xiaomi Gateway, Owl USB, Yeelight Color and B/W, ESP8266, Broadlink RM2, Netatmo Thermostat
-
- Posts: 89
- Joined: Friday 09 October 2015 17:40
- Target OS: Linux
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
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?
Probably missing a parameter in CONFIG.js for the slides to work?
Who is online
Users browsing this forum: No registered users and 1 guest