Page 12 of 51

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

Posted: Sunday 08 October 2017 19:57
by ArjanPeeters
EdwinK wrote: Saturday 07 October 2017 22:23 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.


EdwinK wrote: Saturday 07 October 2017 22:23 Be advised to remove your API-codes (Spottify and such) from posts. People can use them now.
Thanks! I changed it.

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

Posted: Sunday 08 October 2017 22:25
by 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'.

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

Posted: Monday 09 October 2017 21:25
by ArjanPeeters
Image

Re: A little help to make my dashboard awesome

Posted: Tuesday 10 October 2017 10:10
by raymond
I have 2 Maps showing with traffic on the latest beta. Not sure how I can help, but let me know.

Ray

Re: A little help to make my dashboard awesome

Posted: Tuesday 10 October 2017 10:21
by 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

Re: A little help to make my dashboard awesome

Posted: Tuesday 10 October 2017 11:39
by 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.

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

Posted: Tuesday 10 October 2017 15:29
by 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
Screen Shot.png (125.91 KiB) Viewed 5356 times

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

Posted: Tuesday 10 October 2017 15:41
by CaesarPL
Can't you just change Block 1 to width=6?

Re: A little help to make my dashboard awesome

Posted: Tuesday 10 October 2017 15:45
by jake

EdwinK wrote:[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 Image

Verstuurd vanaf mijn SM-G930F met Tapatalk


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

Posted: Tuesday 10 October 2017 15:56
by 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....

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

Posted: Thursday 12 October 2017 10:21
by htilburgs
wvries wrote: Tuesday 10 October 2017 15:29 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
Schermafbeelding 2017-10-12 om 11.55.23.png (29.33 KiB) Viewed 5242 times

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

Posted: Thursday 12 October 2017 20:27
by Toinevanlieshout
SuperMouse wrote: Thursday 05 October 2017 11:52 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 :)

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

Posted: Thursday 12 October 2017 20:30
by Toinevanlieshout
ArjanPeeters wrote: Saturday 07 October 2017 22:07 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. :D I will rethink my options :)

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

Posted: Friday 13 October 2017 10:34
by 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
Mainmenu
Screenshot-2017-10-13 Dashticz (1).png (312.74 KiB) Viewed 5429 times
Mainmenu button on other screens
Mainmenu button on other screens
Screenshot-2017-10-13 Dashticz (2).png (239.6 KiB) Viewed 5429 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

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

Posted: Friday 13 October 2017 11:11
by EdwinK
Neat... /me wants it.

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

Posted: Friday 13 October 2017 11:16
by 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.

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

Posted: Friday 13 October 2017 11:55
by 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

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

Posted: Friday 13 October 2017 14:23
by wvries
htilburgs wrote: Thursday 12 October 2017 10:21
wvries wrote: Tuesday 10 October 2017 15:29 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.

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

Posted: Friday 13 October 2017 15:30
by EdwinK
Only getting a white page now. So, maybe it's better for me to wait and see if Rob will implement it.

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

Posted: Saturday 14 October 2017 11:30
by 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