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

[ArjanPeeters]

Is that the old or the new model of the Nexus7?
I've got the old one, and never heard of the Qi charging thingy.

It's a 2013 version (new). I've also got a 2012 version. It does not have wireless charging but it does have a special dock (no clicking of cables!). That one is going on my bedside table soon. The 2012 version is quite a bit slower tho.

Be advised to remove your API-codes (Spottify and such) from posts. People can use them now.

Thanks! I changed it.

[EdwinK]

I noticed the slowness, esp. with scrolling through screens. Maybe I need to find a/the docking for it, so it can be used in my bedroom or 'office'.

[ArjanPeeters]

[raymond]

I have 2 Maps showing with traffic on the latest beta. Not sure how I can help, but let me know.

Ray

[raymond]

OK, did not take a look at the config from @remb0 at first, but in his CONFIG.js he tries use 'trafficmap' in column 2 which is not declared.
I have started to use this and that works:

Code: Select all

var maps = {}
maps.noordwijk = { key:'noordwijk', width:4, latitude: 52.246915, longitude: 4.448097, zoom:9 }
maps.amsterdam = { key:'amsterdam',width:4, latitude: 52.397876, longitude: 4.847882, zoom:10 }

and then you can use these in your columns:

Code: Select all

columns[1]['blocks'] = ['currentweather_big','weather',231,230,228,'9_1',10,11,buttons.buienradar,maps.noordwijk,maps.amsterdam,95,97,98]

I also use this in custom.css to manager the format of the maps:

Code: Select all

.trafficmap {
        height: 100%;
}
.col-xs-1.block_trafficmap, 
.col-xs-2.block_trafficmap
, .col-xs-3.block_trafficmap, .col-xs-4.block_trafficmap, .col-xs-5.block_trafficmap, .col-xs-6.block_trafficmap, .col-xs-7.block_trafficmap, .col-xs-8.block_trafficmap, .$

        padding-left: 10px !important;
    padding-right: 10px !important;
        height:200px !important;
}

I hope this sets you guys up right.

Cheers,

Ray

[EdwinK]

[quote=Ingmar post_id=152250 time=1506691774 user_id=1353]

I don't have a solution, but an alternative way. This is how I'm using it for pinging my printer:
I've made a virtual switch in domoticz called Printer_status. Then in domoticz Setup > Events, I created a new Lua/Time event with the following code:

Code: Select all

commandArray = {}
 
--Ping printer 
 ping_success=os.execute('ping -c1 192.168.1.1')
 if ping_success then
   print("ping success")
   commandArray['Printer_status']='On'
 else
   print("ping fail")
   commandArray['Printer_status']='Off'	
end

return commandArray

Then in the dashboard it's a block like any other light switch. Then pick an icon from Font Awesome and you can do anything you like with it.
[/quote]

Thanks for this. Once you know how, it's so easy to do.

[wvries]

Hi all,

I have a panel setup with 3 columns, working perfect.
One column has now a few blocks in it (and 3 x 4 is nicely aligned).

However, I also have 1 row that has a width of 5 and one of 6.
That shows the last block a little off the edge.

My question is, is there a method to create an "empty" block that ahs a variable width, that i can place in between the 2 blocks ?

for example:
Block 1 (width = 5) - Empty (width = 1) - Block 2 (width 6) = 12

Hope it makes sense

Screen Shot.png (125.91 KiB) Viewed 5159 times

[CaesarPL]

Can't you just change Block 1 to width=6?

[jake]

[quote=Ingmar post_id=152250 time=1506691774 user_id=1353]

I don't have a solution, but an alternative way. This is how I'm using it for pinging my printer:
I've made a virtual switch in domoticz called Printer_status. Then in domoticz Setup > Events, I created a new Lua/Time event with the following code:

Code: Select all

commandArray = {}
 
--Ping printer 
 ping_success=os.execute('ping -c1 192.168.1.1')
 if ping_success then
   print("ping success")
   commandArray['Printer_status']='On'
 else
   print("ping fail")
   commandArray['Printer_status']='Off'	
end

return commandArray

Then in the dashboard it's a block like any other light switch. Then pick an icon from Font Awesome and you can do anything you like with it.

Thanks for this. Once you know how, it's so easy to do.[/quote]

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

Verstuurd vanaf mijn SM-G930F met Tapatalk

[wvries]

could do, but then the + and - signs will be too far away from the text and logo on the left...
sounds picky, i know....

[htilburgs]

Hi all,

I have a panel setup with 3 columns, working perfect.
One column has now a few blocks in it (and 3 x 4 is nicely aligned).

However, I also have 1 row that has a width of 5 and one of 6.
That shows the last block a little off the edge.

My question is, is there a method to create an "empty" block that ahs a variable width, that i can place in between the 2 blocks ?

for example:
Block 1 (width = 5) - Empty (width = 1) - Block 2 (width 6) = 12

Hope it makes sense

Screen Shot.png

I had the same issue and solved it like this.
- Created a dummy switch in domoticz
- Created a block in config.js

Code: Select all

blocks[440] = {} //Dummy Leeg
blocks[440]['title'] = '';
blocks[440]['width'] = 1;
blocks[440]['icon'] = '';
blocks[440]['hide_data'] = true;
blocks[440]['protected'] = true; 

- Made block complete transparent in custom.css

Code: Select all

.mh.transbg.block_440.col-xs-1 {		/* if widht = 1 then col-xs-1, width=2 then col-xs-2, etc... */
	background: rgba(0,0,0,0);		/* rgba(0,0,0,0); makes transparent */ 
}

Added this block behind my thermostat within the columns definition and now there is an empty space!
I hope this works for you.

Schermafbeelding 2017-10-12 om 11.55.23.png (29.33 KiB) Viewed 5045 times

[Toinevanlieshout]

Hi Toine.

I just used a round file and a lot of sandpaper to make the cuts.

Hope this helps.

Ah thanks! I will try it

[Toinevanlieshout]

I'll show mine here for inspiration to all.

First of all i've used a nexus 7 from 2013 because it's still a good tablet and it has Qi charging. And i could get my hands on a second hand for only 70,-

What have i done:
I've bolted six magnets to my wall. And glued six counter parts to the nexus. Then i've drilled a hole thru the wall in to the closet on the other side.
Opened a cheap five euro wireless charger pad and glued the coil to the wall in the middel of the magnets. Connected it to the electronics of the charger on the other side in my closed. And now i don't see any charger cables!

Thanks Arjan! Als o a very nice option with the magnets. I will rethink my options

[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.

Mainmenu

Screenshot-2017-10-13 Dashticz (1).png (312.74 KiB) Viewed 5232 times

Mainmenu button on other screens

Screenshot-2017-10-13 Dashticz (2).png (239.6 KiB) Viewed 5232 times

This is what I did.

Main.js

Spoiler: show

(near) line 551 (version depended) add/change the folowing lines with new marker:
I wasn't succesfull on using the 'key' option so data-id etc can be removed, but I leaf it for furhter testing


new if(typeof(button.slide)!=='undefined'){
new var html='<div class="col-xs-'+width+' hover transbg Menu" data-id="buttons.'+key+'" onclick="toSlide(\''+button.slide+'\')">';
new }
new 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);">';
}
new }

Config.js

Spoiler: show

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.

columns[0] ={}
columns[0]['blocks']=['bt_Hoofdmenu',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'] = ['bt_Hoofdmenu',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*/

Custom.css

Spoiler: show

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

}

Regards
Frank

[EdwinK]

Neat... /me wants it.

[EdwinK]

Line 521 is a '}' in my case. Is that correct? I hate screwing with main.js, but I really would like this menu thing.

[yfands]

@EdwinK

Edwin that's line 551 not 521.

Find the code:
var key = 'UNKNOWN';
if(typeof(button.key)!=='undefined') key=button.key;

after this you can start inserting the NEW lines, beware it integrates with the if(typeof(button.newwindow)!=='undefined'){
so dont forget to insert the last NEW line }

and always back up your original main.js

Also be aware after an update the code will be lost and has to be inserted again.
regards
Frank

[wvries]

Hi all,

I have a panel setup with 3 columns, working perfect.
One column has now a few blocks in it (and 3 x 4 is nicely aligned).

However, I also have 1 row that has a width of 5 and one of 6.
That shows the last block a little off the edge.

My question is, is there a method to create an "empty" block that ahs a variable width, that i can place in between the 2 blocks ?

for example:
Block 1 (width = 5) - Empty (width = 1) - Block 2 (width 6) = 12

Hope it makes sense

Screen Shot.png

I had the same issue and solved it like this.
- Created a dummy switch in domoticz
- Created a block in config.js

Code: Select all

blocks[440] = {} //Dummy Leeg
blocks[440]['title'] = '';
blocks[440]['width'] = 1;
blocks[440]['icon'] = '';
blocks[440]['hide_data'] = true;
blocks[440]['protected'] = true; 

- Made block complete transparent in custom.css

Code: Select all

.mh.transbg.block_440.col-xs-1 {		/* if widht = 1 then col-xs-1, width=2 then col-xs-2, etc... */
	background: rgba(0,0,0,0);		/* rgba(0,0,0,0); makes transparent */ 
}

Added this block behind my thermostat within the columns definition and now there is an empty space!
I hope this works for you.

Schermafbeelding 2017-10-12 om 11.55.23.png

good idea, didn't though of that.
will do and check. thanks for this.

[EdwinK]

Only getting a white page now. So, maybe it's better for me to wait and see if Rob will implement it.

[yfands]

@EdwinK,

If you get a white or black page 9 out of 10 times there is a syntax error in the code..
Look for missing } or ,

just for clearness, don't put the words NEW in the code, they are just there to mark the lines to add..

and maybe delete the 'bt_Hoofdmenu' in config.js thats a titleblock defined by me.

suc6
Frank