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

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

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

Post by robgeerts »

Industrial glue ;)
User avatar
HansieNL
Posts: 957
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by HansieNL »

welding.jpg
welding.jpg (40.33 KiB) Viewed 13556 times
:lol:
Blah blah blah
blacksn0w
Posts: 99
Joined: Friday 10 March 2017 22:27
Target OS: Raspberry Pi / ODroid
Domoticz version:
Location: Germany
Contact:

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

Post by blacksn0w »

Have really thought about weldering, there is a metal backplate at the tablet, but i think the heat would have destroyed it :lol:
Finished it and used epoxy resin glue, think i will never get this off again :roll:
But it works and looks, for my mind, quite good.
All in all around 23€ for all this.
Image
Image
Image
Image
Image
Image
Migration done, hello Home Assistant.
User avatar
mvveelen
Posts: 678
Joined: Friday 31 October 2014 10:22
Target OS: NAS (Synology & others)
Domoticz version: Beta
Location: Hoorn, The Netherlands
Contact:

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

Post by mvveelen »

Looks sturdy. You couldn't get rid of the power cable I guess? What tablet are you using (my iPad is very slooooooow).
RPi3b+/RFXCOM rfxtrx433E/Shelly/Xiaomi Gateway/Philips HUE Lights/Atag Zone One/2 SunnyBoy inverters/AirconWithMe/P1 smartmeter/Domoticz latest Beta
blacksn0w
Posts: 99
Joined: Friday 10 March 2017 22:27
Target OS: Raspberry Pi / ODroid
Domoticz version:
Location: Germany
Contact:

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

Post by blacksn0w »

Yeah the power cable is annoying, but there is no power source inside the wall i could use.
I'm using the "Teclast X10", the cheapest 10" China tablet i could find :D
https://www.banggood.com/Teclast-X10-Qu ... 43009.html

For the price it is surprisingly fast, but the speakers are really bad.
Migration done, hello Home Assistant.
tontze
Posts: 317
Joined: Thursday 12 January 2017 15:30
Target OS: Linux
Domoticz version: Beta Ch
Location: Finland
Contact:

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

Post by tontze »

blacksn0w wrote:Yeah the power cable is annoying, but there is no power source inside the wall i could use.
I'm using the "Teclast X10", the cheapest 10" China tablet i could find :D
https://www.banggood.com/Teclast-X10-Qu ... 43009.html

For the price it is surprisingly fast, but the speakers are really bad.
you could drill a hole to wall behind the tablet, and another one near floor, directly under the upper hole, and using some small chain as weight, lure that cable from upper hole and out from lower hole, and to the power socket :)

Before drilling, try to make sure there is nothing to prevent wire going down to lower hole inside the wall :)
-----------------------------------------
Smartthings
zigbee2mqtt
RFLink 433mhz / Nrf 2.4Ghz
Mi Light
esp8266MiLight Hub
OpenHab/HomeAssistant/Domoticz
HP T610 & Debian 5.10.19-1 x86_64[/b]
Steen
Posts: 1
Joined: Monday 05 June 2017 18:55
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Netherlands
Contact:

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

Post by Steen »

Due to frustrations on "of-the-shelve" baby monitors, I decided to make on my own. Also good for the wife acceptance factor, to purchase more domotics. :lol:

My question:
I would like to ad a block that shows: "expected low temperature" ( the minimum temperature for the current day)
From Wunderground I know where to find it in de JSON outputfile, but I can't figure out how to get it in a block like " currentweather"
https://www.wunderground.com/weather/ap ... a/forecast
What would be the way to do this?
1. Create a virtual device(sensor/switch) in Domoticz?
2. Edit some of the js files in Dashticz?
3. Other suggestions
Actually I haven't found any post/wiki that describes a virtual sensor based on a weather forecast...

BTW: Thanks to Robgeerts and all the contributors to this forum, I would not have gotten to this point without reading your posts.
BTW2: Toon is not the name of the device, but my two year old son :)
Attachments
Capture.JPG
Capture.JPG (123.17 KiB) Viewed 13224 times
curious
Posts: 132
Joined: Saturday 02 April 2016 19:38
Target OS: -
Domoticz version:
Contact:

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

Post by curious »

I tried to add the tweakers icon to its newsfeed. used next code but it still shows the defaukt news.icon
the image is in the img folder

Code: Select all

blocks['news_2'] = {}
 blocks['news_2']['width'] = 6;
 blocks['news_2']['feed'] = 'https://crossorigin.me/http://feeds.feedburner.com/tweakers/nieuws';
blocks['news_2']['image'] = 'tweakers.png';
Derik
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!

Post by Derik »

dear
There is some progress:
Someone can tell me how i can make the div for google traffic bigger?
ScreenShot039.jpg
ScreenShot039.jpg (93.12 KiB) Viewed 13050 times
And perhaps how i get the text bigger in the trafic and train sections [ colors i got working ]
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
dutchdevil83
Posts: 130
Joined: Monday 31 October 2016 19:34
Target OS: Raspberry Pi / ODroid
Domoticz version: latest
Location: Netherlands
Contact:

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

Post by dutchdevil83 »

Ok finally got some time to show my dashboard. Still some work to do but for now it`s not bad.

Screens in Chrome on PC:
screen1.jpg
screen1.jpg (167.67 KiB) Viewed 12856 times
screen2.jpg
screen2.jpg (125.69 KiB) Viewed 12856 times
screen3.jpg
screen3.jpg (145.24 KiB) Viewed 12856 times
Hardware
1x Raspberry Pi
1x Razberry Z-Wave
1x RFXtrx433E
1x Toon
1x GoodWe Solarpanels
2x FGSD-002 Smoke Detector
1x FGBS-001 Binaire Sensor (RFID lezer)
7x FGMS-001 Motion Sensor
3x ZW089 Verzonken Deursensor
7x NC Wallplug
&lots of KaKu stuff
dutchdevil83
Posts: 130
Joined: Monday 31 October 2016 19:34
Target OS: Raspberry Pi / ODroid
Domoticz version: latest
Location: Netherlands
Contact:

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

Post by dutchdevil83 »

Screens on Ipad:
Screen2_ipad.jpg
Screen2_ipad.jpg (397.44 KiB) Viewed 12858 times
Screen3_ipad.jpg
Screen3_ipad.jpg (346.96 KiB) Viewed 12858 times
Hardware
1x Raspberry Pi
1x Razberry Z-Wave
1x RFXtrx433E
1x Toon
1x GoodWe Solarpanels
2x FGSD-002 Smoke Detector
1x FGBS-001 Binaire Sensor (RFID lezer)
7x FGMS-001 Motion Sensor
3x ZW089 Verzonken Deursensor
7x NC Wallplug
&lots of KaKu stuff
dutchdevil83
Posts: 130
Joined: Monday 31 October 2016 19:34
Target OS: Raspberry Pi / ODroid
Domoticz version: latest
Location: Netherlands
Contact:

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

Post by dutchdevil83 »

And finally the config files used for this:

CONFIG.JS:
Spoiler: show
var _LANGUAGE = 'nl_NL'; //or: en_US, fr_FR, hu_HU
var _HOST_DOMOTICZ = 'http://192.168.192.24:8080';
var _DOMOTICZ_REFRESH = 5; //in seconds
var _DASHTICZ_REFRESH = 30; //in minutes
var _THEME = 'default'; // default = dashticz default theme

/*
IF YOU HAVE A MEDIABOX FROM ZIGGO (HORIZON), COPY SWITCH_HORIZON.PHP ON A WEBSERVER INSIDE YOUR NETWORK AND CHANGE THE IP.
ENTER THE PATH TO THIS FILE BELOW.
*/
var _HOST_ZIGGO_HORIZON = '';
var _APIKEY_WUNDERGROUND = '';
var _WEATHER_CITY = "'s-hertogenbosch";
var _WEATHER_CITYNAME = 'Den Bosch'; //show a different city name, leave empty if same as _WEATHER_CITY
var _WEATHER_COUNTRY = 'NL';
var _USE_AUTO_POSITIONING = true; //don't want to configure positions, use auto positioning
var _USE_FAVORITES = false; //only used when using auto positioning
var _HIDE_SECONDS_IN_CLOCK = true; //do not show the seconds in the clock
var _HIDE_MEDIAPLAYER_WHEN_OFF = false; //when you have a mediaplayer connected, hide it if nothing is playing
var _NEWS_RSSFEED = 'http://www.nu.nl/rss/algemeen';
var _USE_FAHRENHEIT = false;
var _USE_BEAUFORT = false; //Bft instead of m/s
var _TRANSLATE_SPEED = false; //windspeed, north northwest instead of NNW
var _STANDBY_AFTER_MINUTES = false; //enter amount of seconds like: 5 (5 seconds)
var _SCROLL_NEWS_AFTER = 7000; //milliseconds, so 7000 is 7 seconds
var _SHOW_LASTUPDATE = false;
var _LASTUPDATE_FORMAT = 'DD-MM-YY HH:mm';
var _SCREENSLIDER_EFFECT = 'fade'; //'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
var _AUTO_SWIPEBACK_TO = 1; //when no activity, swipe back to main screen after x seconds
var _AUTO_SWIPEBACK_TIME = 0; //seconds
var _SLIDE_PAGES = 60; //Loop all pages and change page every x (min. 5) seconds, set _AUTO_SWIPEBACK_TIME = 0

var _APIKEY_MAPS = '';
var _MAPS_LATITUDE = '';
var _MAPS_LONGITUDE = '';
var _MAPS_ZOOMLEVEL = 9;

// 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":"Q-music","file":"http://icecast-qmusic.cdp.triple-it.nl/ ... ive_96.mp3"},
{"track":2,"name":"538","file":"http://vip-icecast.538.lw.triple-it.nl/RADIO538_MP3"},
{"track":3,"name":"538 Dance Dep","file":"http://vip-icecast.538.lw.triple-it.nl/WEB01_MP3"},
{"track":4,"name":"Slam! Juize","file":"http://stream.radiocorp.nl/web09_mp3"},
{"track":5,"name":"Slam! Boom Room","file":"http://stream.radiocorp.nl/web12_mp3"},
{"track":6,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
{"track":7,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
];


//Buttons or images to open webpages in an iframe, like a news website or weather forecast
var buttons = {}
buttons.buienradar = {width:12, isimage:true, image: 'http://api.buienradar.nl/image/1.0/Rada ... =285&h=256', url: 'https://www.buienradar.nl/weer/s-hertog ... nl/2747351'}
buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}
buttons.nunl = {width:12, icon: 'fa-newspaper-o', title: 'Nu.nl', url: 'http://www.nu.nl'}
buttons.webcam = { width:12, isimage:true, refresh:5000, image: 'http://192.168.192.6:xx/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=xxx&pwd=xxx', url: 'http://192.168.192.6:xxx/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=xxx&pwd=xxx' }
buttons.verkeer = {width:12, isimage:true, image: 'https://www.anwb.nl/verkeer/verkeerstool.js', url: 'https://www.anwb.nl/verkeer/verkeerstool.js'}

//Trash options
var trashcan = {}
trashcan.afvalwijzer = { trashapp: 'mijnafvalwijzer', maxitems: 10, width:12, zipcode:'xxx', housenumber:'xx' }
trashcan.recyclemanager = { trashapp: 'recyclemanager', width:12, zipcode:'xxx', housenumber:'xx' }

// iCalendar Plugin, supports all .ics calendar types like Google Calendar, Apple Calendar

var calendars = {}
calendars.marco = { maxitems: 5, icalurl: 'https://cors-anywhere.herokuapp.com/htt ... /ical/xxxx' }


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

/* Example:
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 the title and data
blocks[1]['hide_data'] = true; //if you want to hide the data of this block
blocks[1]['show_lastupdate'] = true; //if you want to show the last update specific for this block
blocks[1]['playsound'] = 'sounds/ping.mp3'; //play a sound when a device changes
blocks[1]['protected'] = true; //protect switching manually in Dashticz
*/

var blocks = {}

//Open camera als er iemand aan de deur staat
blocks[241] = {}
blocks[241]['playsound'] = 'sounds/doorbell.mp3';
blocks[241]['openpopup'] = {}
blocks[241]['openpopup']['url'] = 'http://192.168.192.6:xxx/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=xxx&pwd=xxx';
blocks[241]['openpopup']['auto_close'] = 30; //seconds

//Groepen & Scenes
blocks['s4'] = {} //Groep - Huiskamer
blocks['s4']['width'] = 6; //1 to 12, remove this line if you want to use the default (4)
blocks['s4']['icon'] = 'fa-power-off';
blocks['s4']['hide_data'] = true;

blocks['s2'] = {} //Groep - Buitenverlichting
blocks['s2']['width'] = 6; //1 to 12, remove this line if you want to use the default (4)
blocks['s2']['icon'] = 'fa-power-off';
blocks['s2']['hide_data'] = true;

//Schakelaars
blocks[98] = {} //Schakelaar - Toilet
blocks[98]['title'] = 'Toilet';

blocks[162] = {} //Schakelaar - Keukenkasten
blocks[162]['title'] = 'Keukenkasten';

blocks[553] = {} //Schakelaar - TV Meubel
blocks[553]['title'] = 'TV Meubel';

blocks[580] = {} //Schakelaar - Dressoir
blocks[580]['title'] = 'Dressoir';

blocks[342] = {} //Schakelaar - Hal voor
blocks[342]['title'] = 'Hal';

blocks[389] = {} //Schakelaar - Hal trap
blocks[389]['title'] = 'Hal trap';

blocks[184] = {} //Schakelaar - Slaapkamer
blocks[184]['title'] = 'Slaapkamer';

blocks[347] = {} //Schakelaar - Badkamer
blocks[347]['title'] = 'Badkamer';

blocks[345] = {} //Schakelaar - Schuur
blocks[345]['title'] = 'Schuur';

blocks[541] = {} //Schakelaar - Afdak Voor
blocks[541]['title'] = 'Afdak voor';

blocks[343] = {} //Schakelaar - Afdak achter
blocks[343]['title'] = 'Afdak achter';

blocks[398] = {} //Schakelaar - Achtertuin
blocks[398]['title'] = 'Achtertuin';

blocks[402] = {} //Schakelaar - Buitenlamp schuur
blocks[402]['title'] = 'Buitenlamp schuur';

//Aanwezigheidsschakelaar
blocks[744] = {} //Schakelaar - Marco@home
blocks[744]['title'] = 'Marco Thuis';
blocks[744]['icon'] = 'fa-male';

blocks[745] = {} //Schakelaar - Chantal@home
blocks[745]['title'] = 'Chantal Thuis';
blocks[745]['icon'] = 'fa-female';

//Klimaat schakelaars
blocks[20] = {} //Toon scenes
blocks[20]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[20]['icon'] = 'fa-list-ul';
blocks[20]['title'] = 'Toon scenes';

blocks[115] = {} //Toon temperatuur instelling
blocks[115]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[115]['title'] = '';

//Slimme meters
blocks[29] = {} //Zonnepanelen
blocks[29]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[29]['icon'] = 'fa-sun-o';
blocks[29]['title'] = '';
blocks[29]['switch'] = true;

blocks[121] = {} //Gas meter
blocks[121]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[121]['title'] = 'Gas';
blocks[121]['switch'] = true;

blocks[120] = {} //Elektra meter
blocks[120]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[120]['title'] = '';
blocks[120]['switch'] = false;

//Temperaturen
blocks[12] = {} //Weer
blocks[12]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[12]['title'] = 'Buiten';
blocks[12]['switch'] = true;

blocks[116] = {} //Huiskamer temperatuur
blocks[116]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[116]['title'] = 'Huiskamer';
blocks[116]['switch'] = true;

blocks[173] = {} //Hal (voor) temperatuur
blocks[173]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[173]['title'] = 'Hal (voor)';
blocks[173]['switch'] = true;

blocks[627] = {} //Schuur temperatuur
blocks[627]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[627]['title'] = 'Schuur';
blocks[627]['switch'] = true;

blocks[404] = {} //Zonnepanelen temperatuur
blocks[404]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[404]['title'] = 'Zonnepanelen';
blocks[404]['switch'] = true;

blocks[777] = {} //Badkamer temperatuur
blocks[777]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[777]['title'] = 'Badkamer';
blocks[777]['switch'] = true;


//Deurcontacten

blocks[201] = {} //Deurcontact - Voordeur
blocks[201]['title'] = 'Voordeur';

blocks[176] = {} //Deurcontact - Achterdeur
blocks[176]['title'] = 'Achterdeur';

blocks[197] = {} //Deurcontact - Schuur
blocks[197]['title'] = 'Schuur';

blocks[139] = {} //Deurcontact - Hal Voor
blocks[139]['title'] = 'Hal';

blocks[123] = {} //Deurcontact - Toilet
blocks[123]['title'] = 'Toilet';

blocks[145] = {} //Deurcontact - Badkamer
blocks[145]['title'] = 'Badkamer';

blocks[761] = {} //Deurcontact - Traphal
blocks[761]['title'] = 'Traphal';

blocks[762] = {} //Deurcontact - Meterkast
blocks[762]['title'] = 'Meterkast';

//Bewegingssensors
blocks[511] = {} //Beweging - Afdak achter
blocks[511]['title'] = 'Achtertuin Afdak';

blocks[773] = {} //Beweging - Badkamer
blocks[773]['title'] = 'Badkamer';

blocks[170] = {} //Beweging - Hal voor
blocks[170]['title'] = 'Hal';

blocks[624] = {} //Beweging - Schuur
blocks[624]['title'] = 'Schuur';

blocks[472] = {} //Beweging - Toilet
blocks[472]['title'] = 'Toilet';

blocks[501] = {} //Beweging - Traphal
blocks[501]['title'] = 'Traphal';

blocks[506] = {} //Beweging - Voorzolder
blocks[506]['title'] = 'Voorzolder';


//
// NEWS FEED
//

blocks['news_10'] = {} // NU.NL
blocks['news_10']['width'] = 12;
blocks['news_10']['feed'] = 'https://crossorigin.me/http://www.nu.nl/rss';

blocks['news_20'] = {} // TVGIDS
blocks['news_20']['width'] = 12;
blocks['news_20']['feed'] = 'https://crossorigin.me/https://www.tvgi ... nieuws.rss';

blocks['news_30'] = {} // BUIENRADAR RSS
blocks['news_30']['width'] = 12;
blocks['news_30']['feed'] = 'https://crossorigin.me/http://api.buien ... buienradar';
blocks['news_30']['url'] = 'http://www.verkeerplaza.nl/';

//
// BLOCK TITLES
//

blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Agenda Marco';

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Temperatuur Sensoren';

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

blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Bewegings Sensoren';

blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Energie Verbruik';

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

blocks['blocktitle_7'] = {}
blocks['blocktitle_7']['type'] = 'blocktitle';
blocks['blocktitle_7']['title'] = 'Gas Verbruik';

blocks['blocktitle_8'] = {}
blocks['blocktitle_8']['type'] = 'blocktitle';
blocks['blocktitle_8']['title'] = '';

//defining number of columns, their contents en widths
//width can be a number 1 to 12, but total widths of all columns should always be 12
var columns = {}

columns[1] = {}
columns[1]['width'] = 5;
columns[1]['blocks'] = ['weather','s4','s2',162,553,580,98,342,389,184,347,345,541,343,398,402] //remark: idx 144 produces 2 blocks, so you can use: '144_1' and '144_2' (or of course, just 144 if you want one)
//columns[1]['blocks'] = ['blocktitle_2',162,553,580]

columns[2] = {}
columns[2]['width'] = 5;
columns[2]['blocks'] = ['news_10',20,115,225,'12_1',744,745,29,121,120,'blocktitle_1',calendars.marco]

//Sidebar column for all pages
columns[3] = {}
columns[3]['width'] = 2;
columns[3]['blocks'] = ['clock','sunrise',buttons.webcam,buttons.buienradar,trashcan.afvalwijzer]

columns[4] = {}
columns[4]['width'] = 5;
columns[4]['blocks'] = ['blocktitle_4',170,501,472,773,506,511,624]

columns[5] = {}
columns[5]['width'] = 5;
columns[5]['blocks'] = ['blocktitle_3',201,176,197,139,123,145,761,762,'blocktitle_2',116,173,627,'777_1']

columns[6] = {}
columns[6]['width'] = 5;
columns[6]['blocks'] = ['blocktitle_5','graph_120', 'blocktitle_6','graph_29']

columns[7] = {}
columns[7]['width'] = 5;
columns[7]['blocks'] = ['blocktitle_7','graph_121','blocktitle_8']

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

//if you want to use multiple screens, use the code below:
var screens = {}

screens[1] = {}
//screens[1]['background'] = 'bg1.jpg';
screens[1]['background_morning'] = 'blurry_morning.jpg';
screens[1]['background_noon'] = 'blurry_day.jpg';
screens[1]['background_afternoon'] = 'blurry_afternoon.jpg';
screens[1]['background_night'] = 'blurry_night.jpg';
screens[1]['columns'] = [1,2,3]


screens[2] = {}
//screens[2]['background'] = 'bg3.jpg';
screens[2]['background_morning'] = 'blurry_morning.jpg';
screens[2]['background_noon'] = 'blurry_day.jpg';
screens[2]['background_afternoon'] = 'blurry_afternoon.jpg';
screens[2]['background_night'] = 'blurry_night.jpg';
screens[2]['columns'] = [4,5,3]


screens[3] = {}
//screens[3]['background'] = 'bg3.jpg';
screens[3]['background_morning'] = 'blurry_morning.jpg';
screens[3]['background_noon'] = 'blurry_day.jpg';
screens[3]['background_afternoon'] = 'blurry_afternoon.jpg';
screens[3]['background_night'] = 'blurry_night.jpg';
screens[3]['columns'] = [6,7,3]
CUSTOM.CSS:
Spoiler: show
/*
CUSTOM CSS FILE
*/

#graphoutput120{height:100px;}
#graphoutput121{height:100px;}
#graphoutput29{height:100px;}

/* Titles */

div.mh.titlegroups h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
margin: 0px;
margin-left: 15px;
padding-top:0px;
height: auto !important; /* default height=75px */
}


/* Icons */

.fa.fa-lightbulb-o.on:before {color: yellow;font-size: 25px;}
.fa.fa-lightbulb-o.off:before {color: white;font-size: 25px;}
.fa.fa-power-off.on:before {color: green;font-size: 25px;}
.fa.fa-power-off.off:before {color: red;font-size: 25px;}
.fa.fa-thermometer-half:before {color: red;font-size: 25px;}
.fa.fa-plug:before {color: yellow;font-size: 25px;}
.fa.fa-flash:before {color: yellow;font-size: 25px;}
.fa.fa-male.on:before {color: darkblue;font-size: 25px;}
.fa.fa-female.on:before {color: pink;font-size: 25px;}
.fa.fa-eye-slash.off:before {color: white;font-size: 25px;}
.fa.fa-eye.on:before {color: black;font-size: 25px;}

/* Blocks */

.title {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: regular;
font-style: normal;
font-size: 10pt;
letter-spacing: 0.1pt;
height: 55px !important; /* default height=75px */
padding-top: 4px; /* center text for new height */
}


.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 {
align-items: center;
justify-content: center;
border: 3px solid rgba(255,255,255,0); /* border: 7px -> 3px - Smaller space between blocks */
background: rgba(0,0,0,0.5);
background-clip: padding-box;
border-radius: 20px; /* Rounded corners */
}

/* Animation code */

/* background-siren */
@keyframes background-siren {
from {background-color: red;}
to {background-color: blue;}
}

.lightswitch {
background: rgba(143,227,136,0.3) !important;
}

.warning {
background: rgba(199,44,44,0.3) !important;
background-clip: padding-box;
-webkit-animation: BLINK-ANIMATION 1s infinite;
-moz-animation: BLINK-ANIMATION 1s infinite;
-o-animation: BLINK-ANIMATION 1s infinite;
animation: BLINK-ANIMATION 1s infinite;
}

.alert_motion {
background: rgba(0,0,0,0.3) !important;
animation-name: background-siren;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-webkit-keyframes BLINK-ANIMATION {
0%, 49% {
background-color: rgba(255,0,0,0.5);
border: 3px solid red;
}
50%, 100% {
background-color: red;
border: 3px solid rgba(255,0,0.0.5);
}
}




/* Weather */

.weatherfull > div div.temp {font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
margin-top:0px;
opacity:1;
}
.weatherfull > div div.temp .nightT {font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 12pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
margin:0px auto;
opacity:0.7;
display:block;
}
.weatherfull > div div.icon {font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
margin:0px auto;
opacity:1;
display:block;
height:60px;
}
.weatherfull > div div.day {font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: regular;
font-style: normal;
font-size: 11pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
margin-top:0px;
opacity:0.9;
}

.btn {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
padding:0px 5px 0px 5px;
margin-right:5px;
}

/* Clock */
.standby .clock{
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
padding:0px 5px 0px 5px;
margin-right:5px;
}
.standby .weekday,.standby .date{
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: medium;
font-style: normal;
font-size: 17pt;
letter-spacing: 0.5pt;
text-transform: uppercase;
padding:0px 5px 0px 5px;
margin-right:5px;
}

/* Trashcan */
.trash .state div.trashrow {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: regular;
font-style: normal;
font-size: 10pt;
letter-spacing: 0.1pt;
}
.trash .state div.trashtoday {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: regular;
font-style: normal;
font-size: 10pt;
letter-spacing: 0.1pt;
}
.trash .state div.trashtomorrow {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: regular;
font-style: normal;
font-size: 10pt;
letter-spacing: 0.1pt;
}

/* News ticker */
#newsTicker li {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight: regular;
font-style: normal;
font-size: 10pt;
letter-spacing: 0.1pt;
min-height: 72px;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
color: white;
max-height: 250px; */ Set the maxim height of the news-ticker */
}

/* Transparent background for buttons Thermostat */
.input-groupBtn .btn-number {
opacity: 0.5;
color: white;
background-color: rgb(34, 34, 34);
border-radius: 0px;
padding: 6px 10px 6px 10px;
line-height: 20px;
background-color: transparent;
}
CUSTOM.JS:
Spoiler: show
//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;
}

/* Temperatuur functie t.b.v. rood knipperend kader bij te hoge temperatuur */

function getStatus_116(idx,value,device){
if(parseFloat(device['Data'])>28){
$('div.block_116').addClass('warning');
}
else {
$('div.block_116').removeClass('warning');
}
}

/* PIR Functie t.b.v. alarm licht bij beweging en custom tekst */

function getBlock_511(device,idx){ //PIR Afdak Achtertuin
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') {
html+=iconORimage(idx,'fa-eye-slash','','off icon');
$('div.block_511').removeClass('alert_motion');
}
else {
html+=iconORimage(idx,'fa-eye','','on icon');
$('div.block_511').addClass('alert_motion');
}
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">Geen beweging</span>';
else html+='<span class="state">BEWEGING</span>';

if(_SHOW_LASTUPDATE) html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
html+='</div>';
return html;
}

function getBlock_170(device,idx){ //PIR Hal
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') {
html+=iconORimage(idx,'fa-eye-slash','','off icon');
$('div.block_170').removeClass('alert_motion');
}
else {
html+=iconORimage(idx,'fa-eye','','on icon');
$('div.block_170').addClass('alert_motion');
}
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">Geen beweging</span>';
else html+='<span class="state">BEWEGING</span>';

if(_SHOW_LASTUPDATE) html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
html+='</div>';
return html;
}

function getBlock_506(device,idx){ //PIR Voorzolder
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') {
html+=iconORimage(idx,'fa-eye-slash','','off icon');
$('div.block_506').removeClass('alert_motion');
}
else {
html+=iconORimage(idx,'fa-eye','','on icon');
$('div.block_506').addClass('alert_motion');
}
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">Geen beweging</span>';
else html+='<span class="state">BEWEGING</span>';

if(_SHOW_LASTUPDATE) html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
html+='</div>';
return html;
}

function getBlock_501(device,idx){ //PIR Traphal
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') {
html+=iconORimage(idx,'fa-eye-slash','','off icon');
$('div.block_501').removeClass('alert_motion');
}
else {
html+=iconORimage(idx,'fa-eye','','on icon');
$('div.block_501').addClass('alert_motion');
}
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">Geen beweging</span>';
else html+='<span class="state">BEWEGING</span>';

if(_SHOW_LASTUPDATE) html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
html+='</div>';
return html;
}

function getBlock_472(device,idx){ //PIR Toilet
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') {
html+=iconORimage(idx,'fa-eye-slash','','off icon');
$('div.block_472').removeClass('alert_motion');
}
else {
html+=iconORimage(idx,'fa-eye','','on icon');
$('div.block_472').addClass('alert_motion');
}
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">Geen beweging</span>';
else html+='<span class="state">BEWEGING</span>';

if(_SHOW_LASTUPDATE) html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
html+='</div>';
return html;
}

function getBlock_624(device,idx){ //PIR Schuur
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') {
html+=iconORimage(idx,'fa-eye-slash','','off icon');
$('div.block_624').removeClass('alert_motion');
}
else {
html+=iconORimage(idx,'fa-eye','','on icon');
$('div.block_624').addClass('alert_motion');
}
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">Geen beweging</span>';
else html+='<span class="state">BEWEGING</span>';

if(_SHOW_LASTUPDATE) html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
html+='</div>';
return html;
}

function getBlock_773(device,idx){ //PIR Badkamer
var html='';
html+='<div class="col-xs-4 col-icon">';
if(device['Status']=='Off') {
html+=iconORimage(idx,'fa-eye-slash','','off icon');
$('div.block_773').removeClass('alert_motion');
}
else {
html+=iconORimage(idx,'fa-eye','','on icon');
$('div.block_773').addClass('alert_motion');
}
html+='</div>';
html+='<div class="col-xs-8 col-data">';
html+='<strong class="title">'+device['Name']+'</strong><br />';
if(device['Status']=='Off') html+='<span class="state">Geen beweging</span>';
else html+='<span class="state">BEWEGING</span>';

if(_SHOW_LASTUPDATE) html+='<br /><span class="lastupdate">'+moment(device['LastUpdate']).format(_LASTUPDATE_FORMAT)+'</span>';
html+='</div>';
return html;
}

/* Negeer waarschuwingen */
window.alert = function ( text ) { console.error( text ); return true; };
Hardware
1x Raspberry Pi
1x Razberry Z-Wave
1x RFXtrx433E
1x Toon
1x GoodWe Solarpanels
2x FGSD-002 Smoke Detector
1x FGBS-001 Binaire Sensor (RFID lezer)
7x FGMS-001 Motion Sensor
3x ZW089 Verzonken Deursensor
7x NC Wallplug
&lots of KaKu stuff
User avatar
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!

Post by EdwinK »

Tht looks nice. Do you really need to see if the toilet-door is closed? ;)
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
dutchdevil83
Posts: 130
Joined: Monday 31 October 2016 19:34
Target OS: Raspberry Pi / ODroid
Domoticz version: latest
Location: Netherlands
Contact:

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

Post by dutchdevil83 »

EdKo66 wrote:Tht looks nice. Do you really need to see if the toilet-door is closed? ;)
Yep :lol: Even monitor the time someone is present in there to turn on the ventilation when needed ;) :lol:
Hardware
1x Raspberry Pi
1x Razberry Z-Wave
1x RFXtrx433E
1x Toon
1x GoodWe Solarpanels
2x FGSD-002 Smoke Detector
1x FGBS-001 Binaire Sensor (RFID lezer)
7x FGMS-001 Motion Sensor
3x ZW089 Verzonken Deursensor
7x NC Wallplug
&lots of KaKu stuff
jjnj

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

Post by jjnj »

htilburgs wrote:I liked your idea, but with a little different buttons and moved the slider further down.
(And I don't have a problem with different thickness).

Image

Code: Select all

.block_46 .ui-slider-handle, 
.block_70 .ui-slider-handle,
.block_179 .ui-slider-handle,
.block_193 .ui-slider-handle,
.block_213 .ui-slider-handle {
    border-radius: 25px;
    height: 15px;
    width: 15px;
    padding: 6px 10px 6px 10px;
}

.block_46 .ui-slider-horizontal, 
.block_70 .ui-slider-horizontal,
.block_179 .ui-slider-horizontal,
.block_193 .ui-slider-horizontal, 
.block_213 .ui-slider-horizontal {
    border-color: transparent;
    height: 3px;
    bottom: -10px;
}
Where do you put this code?
Derik
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!

Post by Derik »

is there someone that have a portrait setup for a tablet. [ 13 inch.. ]
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
robgeerts
Posts: 1273
Joined: Saturday 24 January 2015 22:12
Target OS: NAS (Synology & others)
Domoticz version: 3.7067
Location: NL
Contact:

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

Post by robgeerts »

jjnj wrote:
htilburgs wrote:I liked your idea, but with a little different buttons and moved the slider further down.
(And I don't have a problem with different thickness).

Image

Code: Select all

.block_46 .ui-slider-handle, 
.block_70 .ui-slider-handle,
.block_179 .ui-slider-handle,
.block_193 .ui-slider-handle,
.block_213 .ui-slider-handle {
    border-radius: 25px;
    height: 15px;
    width: 15px;
    padding: 6px 10px 6px 10px;
}

.block_46 .ui-slider-horizontal, 
.block_70 .ui-slider-horizontal,
.block_179 .ui-slider-horizontal,
.block_193 .ui-slider-horizontal, 
.block_213 .ui-slider-horizontal {
    border-color: transparent;
    height: 3px;
    bottom: -10px;
}
Where do you put this code?
in custom.css
ArieKanarie
Posts: 41
Joined: Saturday 12 December 2015 13:25
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by ArieKanarie »

dutchdevil83 wrote:
//Open camera als er iemand aan de deur staat
blocks[241] = {}
blocks[241]['playsound'] = 'sounds/doorbell.mp3';
blocks[241]['openpopup'] = {}
blocks[241]['openpopup']['url'] = 'http://192.168.192.6:xxx/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=xxx&pwd=xxx';
blocks[241]['openpopup']['auto_close'] = 30; //seconds
I'm trying to use this popup too.
My camera has as far as I know/been able to find only a rtsp url which won't work in this way. I do have a snapshot url, but what I want is a live feed in the popup.

In Domoticz itself, camera settings, I am able to open the live feed in a popup, the only things I entered there are the ip/username/ww/snapshot url.
Which method does Domoticz use to open the live feed in the popup, and maybe I can use that method maybe in dashticz too?
Gerwin
Posts: 84
Joined: Friday 12 August 2016 13:08
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Gerwin »

versterker.jpg
versterker.jpg (399.29 KiB) Viewed 12570 times
IMG_20170624_131955.jpg
IMG_20170624_131955.jpg (152.44 KiB) Viewed 12570 times
IMG_20170624_132539.jpg
IMG_20170624_132539.jpg (180.81 KiB) Viewed 12570 times
Would like to play music on the tablet on the wall to run through the raspberry usb sound card so I can adjust the volume in domoticz and then move on to the amplifier that I can control in the case of domoticz by group in and out,
Does anyone know how to make the volume in domoticz via usb sound card

Gerwin
irishv
Posts: 14
Joined: Saturday 01 April 2017 5:15
Target OS: -
Domoticz version:
Contact:

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

Post by irishv »

ArieKanarie wrote:My camera has as far as I know/been able to find only a rtsp url which won't work in this way. I do have a snapshot url, but what I want is a live feed in the popup.

In Domoticz itself, camera settings, I am able to open the live feed in a popup, the only things I entered there are the ip/username/ww/snapshot url.
Which method does Domoticz use to open the live feed in the popup, and maybe I can use that method maybe in dashticz too?
Any luck in figuring something out? I have a Foscam camera set up and Dashticz shows a snapshot (updates every few seconds). When I click on the block, it shows the larger popup. I like your idea of moving to another screen, but ideally want a way to get video and audio. I'm not sure if it's possible. Another option could be clicking a link to open the VLC app on the ipad, which can show a livestream with audio.
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest