Dashticz - Show your dashboard and how-to's!
Moderators: leecollings, htilburgs, robgeerts
-
- Posts: 347
- Joined: Friday 03 April 2015 17:09
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
See screenshot, I'm new to Dashticz and trying to build a nice dashboard.
How can I move the "Deurbel" text to the right of the icon? And the same applies for the "Deurbel" "On" text. I assume it is one and the same answer.
How can I move the "Deurbel" text to the right of the icon? And the same applies for the "Deurbel" "On" text. I assume it is one and the same answer.
- Thuis
- Posts: 251
- Joined: Tuesday 11 September 2018 11:36
- Target OS: Linux
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Wow, Martijn85, nice setup, looks great ! Is see you have dimmable lights, what kind of hardware do you use for dimming ?
I Love Domoticz ! And the community around it :-)
- Thuis
- Posts: 251
- Joined: Tuesday 11 September 2018 11:36
- Target OS: Linux
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Try this in you custom.cssrgroothuis wrote: ↑Wednesday 10 October 2018 10:52 See screenshot, I'm new to Dashticz and trying to build a nice dashboard.
Screen Shot 2018-10-10 at 10.51.00.png
How can I move the "Deurbel" text to the right of the icon? And the same applies for the "Deurbel" "On" text. I assume it is one and the same answer.
Code: Select all
.col-xs-2, .col-xs-4 {
float: right; /* or left, natuurlijk*/
}
I Love Domoticz ! And the community around it :-)
- Thuis
- Posts: 251
- Joined: Tuesday 11 September 2018 11:36
- Target OS: Linux
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Or try this in your custom.css:rgroothuis wrote: ↑Wednesday 10 October 2018 10:52 See screenshot, I'm new to Dashticz and trying to build a nice dashboard.
Screen Shot 2018-10-10 at 10.51.00.png
How can I move the "Deurbel" text to the right of the icon? And the same applies for the "Deurbel" "On" text. I assume it is one and the same answer.
Code: Select all
.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: 3px solid rgba(0,0,0,0); background: rgba(0,0,0,0.02); background-clip: padding-box; border-radius: 0px; height:auto}
.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover {padding-top:15px; padding-bottom:15px; border: 3px solid rgba(0,0,0,0); background: rgba(100,100,100,0.8); background-clip: padding-box; border-radius: 0px; cursor:pointer; height:auto}
I Love Domoticz ! And the community around it :-)
-
- Posts: 347
- Joined: Friday 03 April 2015 17:09
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
This is not yet what I want, I like the hover suggestion, that is good. But the text is still under the icon. I want to have the text on the block to the right of the icon.
- Thuis
- Posts: 251
- Joined: Tuesday 11 September 2018 11:36
- Target OS: Linux
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
I cannot recreate your layout, did you tried the last change, and undo the first ?rgroothuis wrote: ↑Wednesday 10 October 2018 12:41 This is not yet what I want, I like the hover suggestion, that is good. But the text is still under the icon. I want to have the text on the block to the right of the icon.
Screen Shot 2018-10-10 at 12.39.27.png
Otherwise, try and look at it yourself, i use firefox and when i press F12 i can look at all the names and then change them inside notepad++
I Love Domoticz ! And the community around it :-)
-
- Posts: 347
- Joined: Friday 03 April 2015 17:09
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Yes, when I tested the second option I removed the first configuration. When I've a bit more time I will analyse the css a bit more and try to understand it. I'm using Chrome, will try Firefox as well, maybe that is easier.Thuis wrote: ↑Wednesday 10 October 2018 13:02I cannot recreate your layout, did you tried the last change, and undo the first ?rgroothuis wrote: ↑Wednesday 10 October 2018 12:41 This is not yet what I want, I like the hover suggestion, that is good. But the text is still under the icon. I want to have the text on the block to the right of the icon.
Screen Shot 2018-10-10 at 12.39.27.png
Otherwise, try and look at it yourself, i use firefox and when i press F12 i can look at all the names and then change them inside notepad++
-
- Posts: 29
- Joined: Monday 08 October 2018 13:56
- Target OS: Raspberry Pi / ODroid
- Domoticz version: Beta
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Nobody can help me? Or did I post it in the wrong place?
1. Put this in custom.css so all images from the /IMG folder used in your dash wil be enlarged:
2. Put this in custom.css;
3. same as 1.
4. Still don't know...
*Edit; steep learning curve and I like it. For those who want to know:EastXIII wrote: ↑Tuesday 09 October 2018 13:42 @robgeerts ; Thanks for Dashticz! It's awesome!
So here is my dash so far. It still has a long way to go but there is progress.
Maybe someone can help me with some issues I've run across. I've done research but can't find the solution...
1. How do I enlarge image's instead of icons in Custom.css?
2. How do I align the images/icons separate from the text inside a block?
Below "Verlichting" I've enlarged the 'slide-switch' but I can't get the alignment right. Same for "Harmony Hub". I want the icons/images to drop down a bit.
3. At "Temperatuur" the thermometer icons stay small instead of the 26 px I set in Custom.css with the .fa,.wi command. How do I match these with the rest?
4. "Thermostaat?" Is suppossed to be my Honeywell EvoHome Thermostat, in Domoticz via WEB API, but I cannot adjust temperature like in Domoticz. How do I fix this?
Please believe me when I say I've done the research but I just did'nt find the solutions so far...
Thanks for making a great product and sharing all your skills!
1. Put this in custom.css so all images from the /IMG folder used in your dash wil be enlarged:
Code: Select all
img.icon { max-width:28px !important;}
Code: Select all
div.mh.transbg.block_IDX.col-xs-4.hover div.col-xs-8.col-data {
padding-left:10px !important;} // replace with own IDX
4. Still don't know...
- Attachments
-
- Still needs some minor tweaking though.
- Screenshot_20181010-165512.jpg (176.57 KiB) Viewed 3709 times
Last edited by EastXIII on Wednesday 10 October 2018 16:58, edited 2 times in total.
- Thuis
- Posts: 251
- Joined: Tuesday 11 September 2018 11:36
- Target OS: Linux
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Great ! Yes it is very time consuming if you do not know what your doing, like me. I keep trying and trying, searching logic of things, but it has so many variables that it is frustrating. Look here, I try to get the buttons and the reading inside my thermostat, but man, it is so hard, i do not understand the relationships between all the .mh .div .col .whatever ... hahargroothuis wrote: ↑Wednesday 10 October 2018 13:05Yes, when I tested the second option I removed the first configuration. When I've a bit more time I will analyse the css a bit more and try to understand it. I'm using Chrome, will try Firefox as well, maybe that is easier.Thuis wrote: ↑Wednesday 10 October 2018 13:02I cannot recreate your layout, did you tried the last change, and undo the first ?rgroothuis wrote: ↑Wednesday 10 October 2018 12:41 This is not yet what I want, I like the hover suggestion, that is good. But the text is still under the icon. I want to have the text on the block to the right of the icon.
Screen Shot 2018-10-10 at 12.39.27.png
Otherwise, try and look at it yourself, i use firefox and when i press F12 i can look at all the names and then change them inside notepad++
So in eed to get the + and the - to move in the right direction, and i need to put the " ingestelde temperatuur" text in the right direction ..... It does have the led font type of the setpoint in the middle, but now the rest ....
And i am used to scada packets like WinCC, Proface or Codesys, where i can draw, click, copy and paste, haha
I Love Domoticz ! And the community around it :-)
-
- Posts: 2262
- Joined: Monday 29 August 2016 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
For the text position, did you try:rgroothuis wrote: ↑Wednesday 10 October 2018 13:05Yes, when I tested the second option I removed the first configuration. When I've a bit more time I will analyse the css a bit more and try to understand it. I'm using Chrome, will try Firefox as well, maybe that is easier.Thuis wrote: ↑Wednesday 10 October 2018 13:02I cannot recreate your layout, did you tried the last change, and undo the first ?rgroothuis wrote: ↑Wednesday 10 October 2018 12:41 This is not yet what I want, I like the hover suggestion, that is good. But the text is still under the icon. I want to have the text on the block to the right of the icon.
Screen Shot 2018-10-10 at 12.39.27.png
Otherwise, try and look at it yourself, i use firefox and when i press F12 i can look at all the names and then change them inside notepad++
viewtopic.php?f=67&t=25200
If that's not a solution, please post your custom.css (I suppose you modified it), and I can have a look.
-
- Posts: 347
- Joined: Friday 03 April 2015 17:09
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Thanks for the suggestion, that seems to be working. Great.
- Thuis
- Posts: 251
- Joined: Tuesday 11 September 2018 11:36
- Target OS: Linux
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Hey, look I finally have the buttons and the set-point positioned on the thermostat image. The only thing is, I am trying to figure out, how i can group all the elements together. Try searching and reading. Is there some one here that could tell me how to do that? So that the buttons and the set-point data and the background image and the block become one? Must be possible, right? This is of course, when changing the display browser it comes all messed up, because they are not grouped...
I Love Domoticz ! And the community around it :-)
- gielie
- Posts: 290
- Joined: Tuesday 12 January 2016 11:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version: latest β
- Location: The Netherlands (Alkmaar)
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Looks great, you mind sharing your config.js, custom.css and custom.js?Thuis wrote: ↑Friday 12 October 2018 12:46 Hey, look I finally have the buttons and the set-point positioned on the thermostat image. The only thing is, I am trying to figure out, how i can group all the elements together. Try searching and reading. Is there some one here that could tell me how to do that? So that the buttons and the set-point data and the background image and the block become one? Must be possible, right? This is of course, when changing the display browser it comes all messed up, because they are not grouped...
- Aeon Labs USB Stick met Z-wave plus
- Aeotec MultiSensor 6
- FIBARO FGS223
- FIBARO FGWPE Wall Plug
- Neo CoolCam Power plug
- Popp Smoke Detector
- Toon
- Kodi Media Server
- Aeotec MultiSensor 6
- FIBARO FGS223
- FIBARO FGWPE Wall Plug
- Neo CoolCam Power plug
- Popp Smoke Detector
- Toon
- Kodi Media Server
- Thuis
- Posts: 251
- Joined: Tuesday 11 September 2018 11:36
- Target OS: Linux
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
config.js
custom.css
creative.css line 459 tot 524:
graphs.js bar begins at line 222:
settings.js line for color of bars or line 569:
Succes
Code: Select all
/* Configuratie */
var config = {}
config['language'] = 'nl_NL';
config['domoticz_ip'] = 'http://ip.ip:port';
config['app_title'] = 'Huis bediening';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.nu.nl/';
config['news_scroll_after'] = '15';
config['standby_after'] = 1;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '600';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide'; /*slide' or 'fade' or 'cube' or 'coverflow' or 'flip' */
config['standard_graph'] = 'month';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = 'https://basic.ics';
config['idx_moonpicture'] = 0;
config['switch_horizon'] = 0;
config['selector_instead_of_buttons'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 1;
config['last_update'] = 1;
config['hide_topbar'] = 1;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['logo'] = '';
config['last_update'] = 0;
config['gm_api'] = '';
config['boss_stationclock'] = 'RedBoss';
config['hide_seconds_stationclock'] = 0;
/*OpenWeather */
config['owm_api'] = 'key';
config['owm_city'] = 'somewhere';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['static_weathericons'] = 1;
/*Vuilnis Module */
config['garbage_company'] = 'curry';
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = '';
config['garbage_street'] = '';
config['garbage_housenumber'] = '';
config['garbage_maxitems'] = '12';
config['garbage_width'] = '12';
config['garbage_hideicon'] = 0;
config['garbage_use_names'] = true;
config['garbage_use_colors'] = true;
config['garbage_icon_use_colors'] = true;
config['garbage_use_cors_prefix'] = true;
config['garbage'] = {
gft: {kliko: 'green', code: '#FF8C00', name: 'GFT', icon: 'img/garbage/kliko_brown.png'},
pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
rest: {kliko: 'grey', code: '#7CFC00', name: 'Restafval', icon: 'img/garbage/kliko_green.png'},
papier: {kliko: 'blue', code: '#00BFFF', name: 'Papier', icon: 'img/garbage/kliko_blue.png'},
kca: {kliko: 'red', code: '#b21807', name: 'Chemisch afval', icon: 'img/garbage/kliko_red.png'},
brown: {kliko: 'brown', code: '#7c3607', name: 'Bruin', icon: 'img/garbage/kliko_brown.png'},
black: {kliko: 'black', code: '#000000', name: 'Zwart', icon: 'img/garbage/kliko_black.png'},
milieu: {kliko: 'yellow', code: '#f9e231', name: 'Geel', icon: 'img/garbage/kliko_yellow.png'},
kerstboom: {kliko: 'green', code: '#375b23', name: 'Kerstboom', icon: 'img/garbage/tree.png'},}
config['lineColors'] = ['#f1c40f', '#40e0d0', '#eee'];
/*iFrames aanmaken */
/*
var frames = {}
frames.weather = {refreshiframe:10000,height:230,frameurl:"//forecast.io/embed/#lat=00.0000&lon=0.0000&name=Somewhere&country=NL&lang=nl&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si",width:12}
*/
/* MAPS VAN GOOGLE */
/*
var maps = {}
maps.location = { height: 256, width:12, latitude: 00.00000, longitude: 0.00000, zoom:10 }
*/
/*Kalender var aanmaken */
var calendars = {}
calendars.private = { fontsize:28, image:'/icons/calendar.png', maxitems: 10, icalurl: 'https://cors-anywhere.herokuapp.com/https://basic.ics' }
/*De internet radio speler */
var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"NPO Radio 2","file":"http://icecast.omroep.nl/radio2-bb-mp3"},
{"track":2,"name":"Radio Rijnmond","file":"http://d2e9xgjjdd9cr5.cloudfront.net/icecast/rijnmond/radio-mp3"},
{"track":3,"name":"Sublime FM","file":"http://Stream.sublimefm.nl/SublimeFM_mp3 "},
{"track":4,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
{"track":5,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
{"track":6,"name":"Omroep Brabant","file":"http://streaming.omroepbrabant.nl/mp3"},];
/*Knoppen var aanamken */
var buttons = {}
buttons.buienradar = { key: 'buienradar' , width:12, isimage:true, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256'}
buttons.ipcam1 = {key: 'cam1' , width:12, isimage:true, image: 'http://ip:poort/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=username&pwd=password'}
buttons.ipcam2 = {key: 'cam2' , width:12, isimage:true, image: ' https://spacetrack.eu/iss/globe.php?114126457&'}
buttons.domoticz = {key:'log' , width:12, icon:'fa-microchip', title: 'Domoticz Log', log:true, level: 2}
buttons.school = {key: 'school' , width:12, image:'img/icons/school.png', title: 'School site, met handige informatie', url:'https://www.eenofandereschoolsite.nl/'}
buttons.vakantie = {key: 'vakantie' , width:12, image:'img/icons/vakantie3.png', title: 'School Vakanties voor alle regios', url: 'https://opendata.rijksoverheid.nl/v1/sources/rijksoverheid/infotypes/schoolholidays/schoolyear/2018-2019?output=html'}
buttons.energie = {key: 'EnergiePag', width:12, image: 'img/icons/huisenergie.png', title: 'Ga naar Energie' ,slide:2 }
buttons.home = {key: 'Homepag' , width:12, image: 'img/icons/thuispag.png', title: 'Ga naar Thuis Scherm' ,slide:1 }
buttons.bedien = {key: 'Bedinepag' , width:12, image: 'img/icons/bediening1.png', title: 'Ga naar Huis Besturing' ,slide:3 }
/*buttons.verkeer = { width:12, isimage:true, image:'https://www.anwb.nl/verkeer/verkeerstool.js', url: 'https://www.anwb.nl/verkeer/'}*/
/*buttons.wind1 = { width: 4, height: 10, isimage:true, image: 'https://www.windfinder.com/widget/forecast/js/Somewhere?unit_wave=m&unit_rain=mm&unit_temperature=c&unit_wind=m_s&days=2&show_day=0&show_pressure=0&show_temperature=0'}*/
/*buttons.moon = {key: 'moon'width:12, isimage:true, refreshimage:60000, image: 'moon'}*/
/*buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}*/
buttons.honeywell = {key: 'honeywell', width:12, isimage:true, image:'img/icons/HoneywellThermostaat.png', title: 'Honeywell Thermostaat' }
/*
var blocks = {}
/* Standaard blokken met config benaming */
blocks['news_1'] = {}
blocks['news_1']['feed'] = 'https://cors-anywhere.herokuapp.com/http://www.nu.nl/rss/Algemeen';
blocks['news_1']['maxheight'] = 350;
/*Blokken met [IDX] nummer vanuit Domoticz */
/* Xiaomi Gateway Kleuren */
blocks[1] = {}
blocks[1]['width'] = 6;
/* Xiaomi Ringtone Selector */
blocks[3] = {}
blocks[3]['width'] = 6;
/* Xiaomi Deursensor */
blocks[99] = {}
blocks[99]['title'] = 'Deur Sensor'
blocks[99]['width'] = 6;
/* Xiaomi Raam Sensor */
blocks[100] = {}
blocks[100]['title'] = 'Raam Sensor'
blocks[100]['width'] = 6;
/*Metingen onboard sensoren Server PC */
/* Ssyteem Temp */
blocks[101] = {}
blocks[101]['width'] = 6;
/* CPU temp */
blocks[105] = {}
blocks[105]['width'] = 6;
/*P1 Smartmeter Elektr */
/* KWh verbruik actueel */
blocks['94_1'] = {}
blocks['94_1']['title'] = 'Energie Actueel';
blocks['94_1']['width'] = 6;
blocks['94_1']['switch'] = true;
/* Verbruik KWh Vandaag */
blocks['94_2'] = {}
blocks['94_2']['title'] = 'Energie vandaag';
blocks['94_2']['width'] = 4;
blocks['94_2']['switch'] = true;
/* Totale KWh verbruik */
blocks['94_3'] = {}
blocks['94_3']['title'] = 'Energie Totaal';
blocks['94_3']['width'] = 4;
blocks['94_3']['switch'] = true;
blocks['94_3']['image'] = 'current48.png';
/* Binnenkomend Voltage */
blocks[95] = {}
blocks[95]['width'] = 4;
blocks[95]['title'] = 'Inkomend Voltage';
blocks[95]['switch'] = true;
blocks[95]['image'] = 'current48.png';
/* Gas meter verbruik vandaag */
blocks['96_1'] = {}
blocks['96_1']['width'] = 4;
blocks['96_1']['title'] = 'Gas Vandaag';
blocks['96_1']['switch'] = true;
blocks['96_1']['image'] = 'gas48.png'
/* Gasmeter verbruik totaal */
blocks['96_2'] = {}
blocks['96_2']['width'] = 4;
blocks['96_2']['title'] = 'Gas Totaal';
blocks['96_2']['switch'] = true;
/*Kosten Energie*/
/*Elektra vandaag*/
blocks['134'] = {}
blocks['134']['width'] = 4;
blocks['134']['title'] = 'Elektra Kosten Vandaag';
blocks['134']['switch'] = true;
/*Gas vandaag */
blocks['135'] = {}
blocks['135']['width'] = 4;
blocks['135']['title'] = 'Gas Kosten Vandaag';
blocks['135']['switch'] = true;
/*Elektra totaal*/
blocks['136'] = {}
blocks['136']['width'] = 4;
blocks['136']['title'] = 'Elektra Kosten Totaal';
blocks['136']['switch'] = true;
/*Gas totaal */
blocks['137'] = {}
blocks['137']['width'] = 4;
blocks['137']['title'] = 'Gas Kosten Totaal';
blocks['137']['switch'] = true;
/*Weer en metingen van buiten */
/* Buiten temperatuur */
blocks['123_1'] = {}
blocks['123_1']['title'] = 'Temperatuur'
blocks['123_1']['width'] = 4;
/* Luchtvochtigheid */
blocks['123_2'] = {}
blocks['123_2']['title'] = 'Vochtigheid'
blocks['123_2']['width'] = 4;
/* Lucht druk */
blocks['123_3'] = {}
blocks['123_3']['title'] = 'Luchtdruk'
blocks['123_3']['width'] = 4;
/* Windkracht */
blocks[124] = {}
blocks[124]['title'] = 'Windkracht'
blocks[124]['width'] = 4;
/* UV-index */
blocks[52] = {}
blocks[52]['title'] = 'UV Index'
blocks[52]['width'] = 4;
/* mm Regen */
blocks[127] = {}
blocks[127]['title'] = 'Regen'
blocks[127]['width'] = 4;
/* Zicht*/
blocks[125] = {}
blocks[125]['width'] = 4;
/* Gevoels temperatuur, Windchill */
blocks[121] = {}
blocks[121]['title'] = '';
blocks[121]['image'] = '/icons/windchill.png'
blocks[121]['width'] = 12;
/* Kamer Thermostaat */
/*Huiskamer Temperatuur */
blocks[128] = {}
blocks[128]['title'] = 'Huiskamer Temperatuur';
/* blocks[128]['image'] = '/icons/thermostemp.png'*/
blocks[128]['width'] = 12;
/*Buiten Tempratuur Via Thermostaat */
blocks[129] = {}
blocks[129]['title'] = 'Temperatuur Buiten Huis';
/* blocks[129]['image'] = '/icons/thermobuiten.png'*/
blocks[129]['width'] = 12;
/*CV aan of uit */
blocks[130] = {}
blocks[130]['width'] = 12;
blocks[130]['title'] = 'Programma Kachel';
/* blocks[130]['image'] = '/icons/windchill.png'*/
/*Ingestelde Huiskamer Temperatuur*/
blocks[131] = {}
blocks[131]['title'] = 'Ingestelde Temperatuur';
/* blocks[131]['image'] = '/icons/HoneywellThermostaat.png';*/
blocks[131]['width'] = 12;
*/
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Gas en Elektra Verbruik'
blocks['blocktitle_1']['width'] = 12 ;
blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Kamer Thermostaat'
blocks['blocktitle_2']['width'] = 12 ;
blocks['blocktitle_2']['image'] = 'icons/calendar.png';
blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Bediening Lampen'
blocks['blocktitle_3']['width'] = 12 ;
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Agenda / Kalender'
blocks['blocktitle_4']['icon'] = 'fa-calendar' /*Laatste wijziging, waarom werkt dit niet ?*/
blocks['blocktitle_4']['width'] = 12 ;
blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['icon'] = 'fa-calendar' /*Laatste wijziging, waarom werkt dit niet ?*/
blocks['blocktitle_5']['title'] = 'Nieuws / Files / Weer'
blocks['blocktitle_5']['width'] = 12 ;
blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Oranje = Hoog tarief / Blauw = Laag tarief'
blocks['blocktitle_6']['width'] = 12 ;
blocks['camtitle_1'] = {}
blocks['camtitle_1']['type'] = 'blocktitle';
blocks['camtitle_1']['title'] = 'Camera'
blocks['camtitle_1']['width'] = 12 ;
/*Hier worden de colommen voor op het scherm gemaakt */
var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','settings']
columns[1] = {}
columns[1]['blocks'] = ['currentweather_big_owm',buttons.ipcam1, buttons.ipcam2] //remark: idx 144 produces 2 blocks, so you can use: '144_1' and '144_2' (or just 144 if you want one)
columns[1]['width'] = 3;
columns[2] = {}
columns[2]['blocks'] = [calendars.private, buttons.school, buttons.vakantie, 'garbage', 'streamplayer']
columns[2]['width'] = 3;
columns[3] = {}
columns[3]['blocks'] = ['news_1','traffic',121,'123_1','123_2','123_3',124,52,127,125]
columns[3]['width'] = 4;
columns[4] = {}
columns[4]['blocks'] = ['clock','stationclock','sunrise',buttons.buienradar,buttons.energie]
columns[4]['width'] = 2;
columns[5] = {}
columns[5]['width'] = 3;
columns[5]['blocks'] = ['blocktitle_2',131,130,128,129]
columns[6] = {}
columns[6]['blocks']=['96_1','96_2',95,'graph_96',135,137,buttons.home]
columns[6]['width'] = 4;
columns[7] = {}
columns[7]['blocks'] = ['94_1','94_2','94_3','graph_94',134,136,buttons.bedien]
columns[7]['width'] = 4;
columns[8] = {}
columns[8]['blocks'] = ['clock']
columns[8]['width'] = 1;
columns[9] = {}
columns[9]['blocks'] = ['blocktitle_3',buttons.domoticz,1,99,100,]
columns[9]['width'] = 4;
columns[10] = {}
columns[10]['blocks'] = ['blocktitle_3']
columns[10]['width'] = 4;
columns[11] = {}
columns[11]['blocks'] = [buttons.home,buttons.energie]
columns[11]['width'] = 4;
/*Standby modus configuratie */
var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['weather_owm','clock','94_1','123_1',128] //specify blocks for the standby mode
columns_standby[1]['width'] = 36;
/*Hier worden de verschillende schermen gemaakt welke je kunt swipen */
var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 1920;
screens['default']['maxheight'] = 1080;
screens['default'][1] = {}
screens['default'][1]['background'] = 'bg27.png';
screens['default'][1]['columns'] = [1,2,3,4]
screens['default'][2] = {}
screens['default'][2]['background'] = 'bg27.png';
screens['default'][2]['columns'] = [5,6,7,8]
screens['default'][3] = {}
screens['default'][3]['background'] = 'bg27.png';
screens['default'][3]['columns'] = [8,9,10,11]
Code: Select all
/*
CUSTOM CSS FILE
*/
@font-face{
font-family:'digital-clock-font';
src: url('../img/font/digital-7.ttf');
}
/* Title of tile */
.title {font-size:15px;}
/* News block: Hide icon and change margins of text to fill block */
#rss-styled_news {
margin-right: -20px;
margin-left: -20px;}
.fas.fa-newspaper-o {opacity: 50;}
/* Blocktitles?*/
div.mh.transbg.block_graph_94 {Height:150px;}
div.mh.titlegroups {
height: 38px !important; /* default height=75px */
padding-top: 0px; /* center text for new height */
color: white;
background-color: rgba(0,0,0,0.02);}
/* Modifications to the fa en wi font family*/
.sunrise { font-size: auto; font-size: 1vw; color: yellow;}
.wi-sunrise:before { color: yellow; font-size: 25px; font-size: 1vw;}
.sunset { font-size: 25px; font-size: 1vw; color: orange;}
.wi-sunset:before { color: orange; font-size: 25px; font-size: 1vw;}
.wi-humidity:before {color: gray;}
.wi-barometer:before {color: aqua;}
.wi-wind-direction:before {color: lightcyan;}
.fas.fa-mobile.on.icon {font-size: 30px !; color: green;}
.fas.fa-mobile.off.icon {font-size: 30px !important;}
/*Alle iconen verkleuren*/
.fas.fa-lightbulb-o.on {color: yellow}
.fas.fa-fire {color: orange}
.fas.fa-bolt {color: yellow}
.fas.fa-plug {color:yellowgreen}
.fas.fa-thermometer-half {color:pink}
.fas.fa-newspaper-o {color:springgreen}
.fas.fa-calendar {color:purple}
.fas.fa-certificate {color:orange}
.fas.fa-sun-o {color:orange}
.fas.fa-tint {color: MediumSlateBlue }
.fas.fa-eye {color: LightGoldenRodYellow}
.fas.fa-radio {color:red}
.fas.fa-play {color:aqua; font-weight:bold;}
.fas.staticon {color:red}
.fas.fa-chevron-left {color:orange; font-weight:bold;}
.fas.fa-chevron-right {color:orange; font-weight:bold;}
.col-xs-6 transbg imgblock {
margin-left: auto;
margin-right: auto }
.wi.wi-day-sunny:before { color: #FFFF00; font-size: 40px;}
.wi.wi-night-clear:before { color: #FAFAD2; font-size: 40px; }
.wi.wi-day-cloudy:before { color: #FFFF00; font-size: 40px;}
.wi.wi-night-cloudy:before { color: #FAFAD2; font-size: 40px; }
.wi.wi-cloud:before { color: #F8F8FF; font-size: 40px; }
.wi.wi-cloudy:before { color: #DCDCDC; font-size: 40px;}
.wi.wi-showers:before { color: #00FFFF; font-size: 40px; }
.wi.wi-day-rain:before { color: #AFEEEE; font-size: 40px; }
.wi.wi-night-rain:before { color: #4169E1; font-size: 40px; }
.wi.wi-day-thunderstorm:before { color: #FFD700; font-size: 40px;}
.wi.wi-night-thunderstorm:before { color: #DAA520; font-size: 40px; }
.wi.wi-snow:before { color: #FFFAFA; font-size: 40px;}
.wi.wi-day-fog:before { color: #F5F5F5; font-size: 40px; }
.wi.wi-night-fog:before { color: #D3D3D3; font-size: 40px; }
div.mh.transbg.block_131.col-xs-12 {
background-image: url("../img/icons/honeywellthermostaat1.png");
/*background-clip:content-box;*/
background-repeat: no-repeat;
/* background-attachment: fixed;*/
height:260px;
background-position: 110px;
text-align:center;
line-height: 60px;
text-align: center;
}
/*
.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: 0px;
border-radius:180px;
}
*/
section.wrapper {
min-width: 400px; /* Minimum width of your wrapper element */
overflow: hidden;
display: inline-block;
}
.btn-number.plus{
border-bottom:0px;
padding-bottom:7px;
display:inline-block;
color:red;
position: relative;
left: -110px;
top: 95px;
}
.btn-number.min{
border-bottom:0px;
padding-bottom:7px;
color:blue;
position: relative;
right: 652%;
top: 35px;
}
.stateheating {
color:black;
display:inline-block;
width:100%;
height:100%;
vertical-align:0px;
position: relative;
left: 0%;
bottom:70px;
}
.title-input {
font-family: 'digital-clock-font';
font-size:28px;
display:inline-block;
/*width:100%;
Height:100%;*/
color:black;
position: relative;
Top: 75px;
}
/*
div.mh.transbg.block_131.col-xs-12 div.col-data{
text-align:left;
*/
/* OWM Weather */
.col-xs-12.big .weatherdegrees, .big .weatherloc {
display: inline-block;
margin-top: -2px;
font-size: 18px;
font-weight: bold;
margin-right: 4px;
float: right;
text-align:right;
color:orange;}
.weatherfull > div div.temp {
font-size: 28px;
font-weight: 400;
color: orange;
margin-top: 10px;
margin-left:100px;
text-align: left;
padding: 0px 4px;}
.weatherfull > div div.day {
margin-top: 0px;
font-weight: 300;
font-size: 20px;
color:aqua;}
.block_currentweather_owm
{margin-left: 0px;}
.transbg.col-xs-2.temp .av-temp {text-align:left;}
.transbg.col-xs-2.temp .rain {text-align:right;}
.col-xs-4 transbg hover text-center btnPrev {color:red;}
/* Fontsize buttons Blinds */
.fa,.wi {font-size:auto !important;}
/* Block Title */
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
margin: 0px;
margin-left: 15px;
font-weight: 100;
font-size: 140%;
/* color: white;*/
text-shadow: 2px 2px black;
text-align: center;}
.smalltitle h3 {font-size: 15px !important;margin-left: 6px;color: pink; font-weight:bold;}
/* Buienradar */
.block_117 {height: 100% !important;}
.fas.fa-umbrella {font-size: 32px !important;font-weight: bold !important;}
.fas.fa-umbrella.on {color:#3399ff !important;}
/* Standby screen */
.standby .clock {font-size:60px !important;}
.standby .weekday,.standby .date {font-size:40px !important;}
.standby .fas.fa-thermometer-half {color:pink}
.standby .swiper-slide {background:rgba(0,0,0,0.0)}
/* Swiper bullet */
.swiper-pagination-bullet {width: 30px;height: 30px;background: white;}
/* Up-Down arrow Blinds */
.input-groupBtn li {
position:sticky;
z-index: 9999;
right: 1px;
border-radius: 0px; /* Round corners */}
/*Default buttons*/
.btn.btn-default {
background-color: black;
color: white;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
border: none;}
.btn.btn-default:hover {
background-color: black; /* Green */
color: lime;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
border: none;}
/* 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: 3px solid rgba(0,0,0,0); background: rgba(0,0,0,0.02); background-clip: padding-box; border-radius: 0px; height:auto}
.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover {padding-top:15px; padding-bottom:15px; border: 3px solid rgba(0,0,0,0); background: rgba(100,100,100,0.3); background-clip: padding-box; border-radius: 0px; cursor:pointer; height:auto}
/*Thermostaat Image*/
.transbg.col-xs-12.imgblock{
text-align:center;}
Code: Select all
/*
.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;
}
.input-groupBtn.input-chevron .btn-number {
padding: 5px 10px 5px 10px
}
.input-groupBtn .btn-number.plus{
border-bottom:0px;
padding-bottom:7px;
}
.input-groupBtn li {
position: -webkit-sticky;
position: sticky;
z-index:9997;
right:1px;
}
.input-groupBtn li.down {
top:35px;
}
.input-groupBtn .stop {
z-index:9997;
-ms-transform: rotate(45deg); /* IE 9 */
/* -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
/*
transform: rotate(45deg);
top: 0;
width: 71px;
height: 33px;
position: absolute;
right: 0;
margin-right: -27px;
margin-top: 0px;
}
.input-groupBtn.input-chevron {
right:27px;
}
.input-groupBtn.input-chevron.hidestop {
right:-5px;
}
*/
.input-groupBtn .btn-number:active,.btn-number:hover {
color: black;
background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0 padding-box;
}
/*
.input-groupBtn .fa-thermostat {
vertical-align: top;
font-size: 20px !important;
}
.title-input {
font-size: 20px !important;
margin-top:-2px;
display: inline-block;
}
*/
Code: Select all
function getGraphs(device, popup) {
var sensor = 'counter';
var txtUnit = '?';
var currentValue = device['Data'];
var decimals = 2;
switch (device['Type']) {
case 'Rain':
sensor = 'rain';
txtUnit = 'mm';
decimals = 1;
break;
case 'Lux':
sensor = 'counter';
txtUnit = 'Lux';
decimals = 0;
break;
case 'Wind':
sensor = 'wind';
if (config['use_beaufort']) {
currentValue = Beaufort(device['Speed']);
decimals = 0;
txtUnit = 'Bft';
} else {
currentValue = device['Speed'];
decimals = 1;
txtUnit = 'm/s';
}
break;
case 'Temp':
case 'Temp + Humidity':
case 'Temp + Humidity + Baro':
sensor = 'temp';
txtUnit = '°C';
currentValue = device['Temp'];
decimals = 1;
break;
case 'Humidity':
sensor = 'temp';
txtUnit = '%';
decimals = 1;
break;
}
switch (device['SubType']) {
case 'Percentage':
sensor = 'Percentage';
txtUnit = '%';
decimals = 1;
break;
case 'Custom Sensor':
sensor = 'Percentage';
txtUnit = device['SensorUnit'];
decimals = 1;
break;
case 'Gas':
txtUnit = 'm3';
break;
case 'Energy':
case 'kWh':
case 'YouLess counter':
txtUnit = 'kWh';
currentValue = device['CounterToday'];
break;
case 'Visibility':
txtUnit = 'km';
break;
case 'Radiation':
case 'Solar Radiation':
txtUnit = 'Watt/m2';
decimals = 0;
break;
case 'Pressure':
txtUnit = 'Bar';
break;
case 'Soil Moisture':
txtUnit = 'cb';
break;
case 'Leaf Wetness':
txtUnit = 'Range';
break;
case 'Voltage':
case 'A/D':
txtUnit = 'mV';
break;
case 'VoltageGeneral':
txtUnit = 'V';
break;
case 'DistanceGeneral':
case 'Distance':
txtUnit = 'cm';
break;
case 'Sound Level':
txtUnit = 'dB';
break;
case 'CurrentGeneral':
case 'Current':
txtUnit = 'A';
break;
case 'Weight':
txtUnit = 'kg';
break;
case 'Waterflow':
sensor = 'Percentage';
txtUnit = 'l/min';
break;
case 'Counter Incremental':
txtUnit = device['CounterToday'].split(' ')[1];
currentValue = device['CounterToday'].split(' ')[0];
break;
}
currentValue = number_format(currentValue, decimals);
showGraph(device['idx'], device['Name'], txtUnit, 'initial', currentValue, false, sensor, popup);
}
function getGraphByIDX(idx) {
getGraphs(alldevices[idx], true);
}
function getButtonGraphs(device) {
if ($('#opengraph' + device['idx']).length === 0) {
var html = '<div class="modal fade opengraph' + device['idx'] + '" data-idx="' + device['idx'] + '" id="opengraph' + device['idx'] + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content">';
html += '<div class="modal-header">';
html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
html += '</div>';
html += '<div class="modal-body block_graphpopup_' + device['idx'] + '">' + language.misc.loading;
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
$('body').append(html);
$('#opengraph' + device['idx']).on('shown.bs.modal', function () {
getGraphByIDX($(this).data('idx'));
});
}
}
function showGraph(idx, title, label, range, current, forced, sensor, popup) {
if (typeof(popup) === 'undefined') forced = false;
if (typeof(forced) === 'undefined') forced = false;
if (typeof(_GRAPHS_LOADED[idx]) === 'undefined' || _GRAPHS_LOADED[idx] < (time() - (parseFloat(_GRAPHREFRESH) * 60))) {
forced = true;
}
if ($('.graphcurrent' + idx).length > 0) {
$('.graphcurrent' + idx).html(current + ' ' + label);
}
if (forced || popup) {
_GRAPHS_LOADED[idx] = time();
//Check settings for standard graph
if (range === 'initial') {
switch (settings['standard_graph']) {
case 'hours':
range = 'last';
break;
case 'day':
range = 'day';
break;
case 'month':
range = 'month';
break;
}
}
realrange = range;
if (range === 'last') realrange = 'day';
$.ajax({
url: settings['domoticz_ip'] + '/json.htm?username=' + usrEnc + '&password=' + pwdEnc + '&type=graph&sensor=' + sensor + '&idx=' + idx + '&range=' + realrange + '&time=' + new Date().getTime() + '&jsoncallback=?',
type: 'GET', async: true, contentType: "application/json", dataType: 'jsonp',
success: function (data) {
if (data.status === 'ERR') {
alert('Could not load graph!');
return;
}
var buttons = createButtons(idx, title, label, range, current, sensor, popup);
title = '<h4>' + title;
if (typeof(current) !== 'undefined' && current !== 'undefined') title += ': <B class="graphcurrent' + idx + '">' + current + ' ' + label + '</B>';
title += '</h4>';
var html = '<div class="graph' + (popup ? 'popup' : '') + '" id="graph' + idx + '">';
html += '<div class="transbg col-xs-12">';
html += title + '<br /><div style="margin-left:15px;">' + buttons + '</div><br /><div id="graphoutput' + idx + '"></div>';
html += '</div>';
html += '</div>';
if ($('#graph' + idx + '.graph').length > 0) {
$('#graph' + idx + '.graph').replaceWith(html);
}
$('.block_graph' + (popup ? 'popup' : '') + '_' + idx).html(html);
var graphProperties = getGraphProperties(data.result[0], label);
graphProperties.dateFormat = settings['shorttime'];
if (range === 'month' || range === 'year') {
graphProperties.dateFormat = settings['shortdate'];
}
if (range === 'last') {
var fourHoursAgo = moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm');
data.result = data.result.filter(function (element) {
return element.d > fourHoursAgo;
});
}
graphProperties.data = data.result.filter(function (element) {
return element.hasOwnProperty(graphProperties.keys[0]);
});
if ($('#graphoutput' + idx).length > 0) {
makeMorrisGraph(idx, graphProperties);
}
}
});
}
}
function makeMorrisGraph(idx, graphProperties) {
Morris.Bar({
parseTime: false,
element: 'graphoutput' + idx,
data: graphProperties.data,
fillOpacity: 0.2,
gridTextColor: '#c3f6fe',
lineWidth: 1,
stacked: true,
xkey: ['d'],
ykeys: graphProperties.keys,
labels: graphProperties.labels,
xLabelFormat: function (x) { return moment(x.src.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat); },
lineColors: settings['lineColors'],
barColors: settings['lineColors'],
pointFillColors: ['none'],
pointSize: 1,
hideHover: 'auto',
resize: true,
hoverCallback: function (index, options, content, row) {
var datePoint = moment(row.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat);
var text = datePoint + ": ";
graphProperties.keys.forEach(function (element, index) {
text += (index > 0 ? ' / ' : '') + number_format(row[element], 2) + ' ' + graphProperties.labels[index];
});
return text;
}
});
}
function createButtons(idx, title, label, range, current, sensor, popup) {
var buttons = '<div class="btn-group" role="group" aria-label="Basic example">';
buttons += '<button type="button" class="btn btn-default ';
if (range === 'last') buttons += 'active';
buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'last\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_hours + '</button> ';
buttons += '<button type="button" class="btn btn-default ';
if (range === 'day') buttons += 'active';
buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'day\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.today + '</button> ';
buttons += '<button type="button" class="btn btn-default ';
if (range === 'month') buttons += 'active';
buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'month\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_month + '</button>';
buttons += '</div>';
return buttons;
}
function getGraphProperties(result, label) {
var graphProperties = {};
if (result.hasOwnProperty('uvi')) {
graphProperties = {
keys: ['uvi'],
labels: [label],
};
} else if (result.hasOwnProperty('lux')) {
graphProperties = {
keys: ['lux'],
labels: ['Lux'],
};
} else if (result.hasOwnProperty('lux_avg')) {
graphProperties = {
keys: ['lux_avg', 'lux_min', 'lux_max'],
labels: ['Lux average', 'Minimum', 'Maximum'],
};
} else if (result.hasOwnProperty('gu') && result.hasOwnProperty('sp')) {
graphProperties = {
keys: ['gu', 'sp'],
labels: ['m/s', 'm/s'],
};
} else if (result.hasOwnProperty('ba') && result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
graphProperties = {
keys: ['ba', 'hu', 'te'],
labels: ['hPa', '%', _TEMP_SYMBOL],
};
} else if (result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
graphProperties = {
keys: ['hu', 'te'],
labels: ['%', _TEMP_SYMBOL],
};
} else if (result.hasOwnProperty('te')) {
graphProperties = {
keys: ['te'],
labels: [_TEMP_SYMBOL],
};
} else if (result.hasOwnProperty('hu')) {
graphProperties = {
keys: ['hu'],
labels: ['%'],
};
} else if (result.hasOwnProperty('mm')) {
graphProperties = {
keys: ['mm'],
labels: ['mm'],
};
} else if (result.hasOwnProperty('v_max')) {
graphProperties = {
keys: ['v_max'],
labels: [label],
};
} else if (result.hasOwnProperty('v2')) {
graphProperties = {
keys: ['v2', 'v'],
labels: [label, label],
};
if (label === 'kWh' && realrange === 'day') {
graphProperties.labels = ['Watt', 'Watt'];
}
} else if (result.hasOwnProperty('v')) {
if (label === 'kWh' && realrange === 'day') {
label = 'Wh';
}
if (data.method === 1) {
graphProperties = {
keys: ['eu'],
labels: [label],
};
} else {
graphProperties = {
keys: ['v'],
labels: [label],
};
}
} else if (result.hasOwnProperty('eu')) {
graphProperties = {
keys: ['eu'],
labels: [label],
};
} else if (result.hasOwnProperty('u')) {
graphProperties = {
keys: ['u'],
labels: [label],
};
} else if (result.hasOwnProperty('u_max')) {
graphProperties = {
keys: ['u_max', 'u_min'],
labels: ['?', '?'],
};
}
return graphProperties;
}
Code: Select all
if (typeof(settings['lineColors']) === 'undefined') settings['lineColors'] = ['#eee', '#eee', '#eee'];
Succes
I Love Domoticz ! And the community around it :-)
-
- Posts: 237
- Joined: Wednesday 17 October 2018 12:11
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Been scrolling through these pages hoping to find an actual How-to for Dashticz.
It's got a huge amount of potential, however, having no programming experience whatsoever, it is quite difficult to get a start.
All i've got now is a working dash, with all my domoticz info on it.
But when i try and steal anyhting from the other configs, that info disappears…
I'm afraid i'm gonna have to spend a lot of time on this
It's got a huge amount of potential, however, having no programming experience whatsoever, it is quite difficult to get a start.
All i've got now is a working dash, with all my domoticz info on it.
But when i try and steal anyhting from the other configs, that info disappears…
I'm afraid i'm gonna have to spend a lot of time on this
-
- Posts: 29
- Joined: Monday 08 October 2018 13:56
- Target OS: Raspberry Pi / ODroid
- Domoticz version: Beta
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
I had the same. I went wrong with the IDX numbers. When you borrow someone’s config you should replace the IDX numbers with your own.MikeyMan wrote:Been scrolling through these pages hoping to find an actual How-to for Dashticz.
It's got a huge amount of potential, however, having no programming experience whatsoever, it is quite difficult to get a start.
All i've got now is a working dash, with all my domoticz info on it.
But when i try and steal anyhting from the other configs, that info disappears…
I'm afraid i'm gonna have to spend a lot of time on this
IDX number is the unique number for a device. It can be found in the ‘Devices’ tab in Domoticz.
-
- Posts: 237
- Joined: Wednesday 17 October 2018 12:11
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Do i understand correctly that you managed to set your honeywell with Dashticz?Thuis wrote: ↑Monday 15 October 2018 16:24 config.jscustom.cssCode: Select all
/* Configuratie */ var config = {} config['language'] = 'nl_NL'; config['domoticz_ip'] = 'http://ip.ip:port'; config['app_title'] = 'Huis bediening'; config['domoticz_refresh'] = '5'; config['dashticz_refresh'] = '60'; config['default_news_url'] = 'http://www.nu.nl/'; config['news_scroll_after'] = '15'; config['standby_after'] = 1; config['auto_swipe_back_to'] = 1; config['auto_swipe_back_after'] = '600'; config['auto_slide_pages'] = 0; config['slide_effect'] = 'slide'; /*slide' or 'fade' or 'cube' or 'coverflow' or 'flip' */ config['standard_graph'] = 'month'; config['timeformat'] = 'DD-MM-YY HH:mm'; config['calendarformat'] = 'dd DD.MM HH:mm'; config['calendarlanguage'] = 'nl_NL'; config['calendarurl'] = 'https://basic.ics'; config['idx_moonpicture'] = 0; config['switch_horizon'] = 0; config['selector_instead_of_buttons'] = 0; config['auto_positioning'] = 0; config['use_favorites'] = 1; config['last_update'] = 1; config['hide_topbar'] = 1; config['hide_seconds'] = 0; config['hide_seconds_stationclock'] = 0; config['use_fahrenheit'] = 0; config['use_beaufort'] = 0; config['translate_windspeed'] = 1; config['static_weathericons'] = 0; config['hide_mediaplayer'] = 0; config['logo'] = ''; config['last_update'] = 0; config['gm_api'] = ''; config['boss_stationclock'] = 'RedBoss'; config['hide_seconds_stationclock'] = 0; /*OpenWeather */ config['owm_api'] = 'key'; config['owm_city'] = 'somewhere'; config['owm_name'] = ''; config['owm_country'] = 'nl'; config['static_weathericons'] = 1; /*Vuilnis Module */ config['garbage_company'] = 'curry'; config['garbage_icalurl'] = 0; config['garbage_zipcode'] = ''; config['garbage_street'] = ''; config['garbage_housenumber'] = ''; config['garbage_maxitems'] = '12'; config['garbage_width'] = '12'; config['garbage_hideicon'] = 0; config['garbage_use_names'] = true; config['garbage_use_colors'] = true; config['garbage_icon_use_colors'] = true; config['garbage_use_cors_prefix'] = true; config['garbage'] = { gft: {kliko: 'green', code: '#FF8C00', name: 'GFT', icon: 'img/garbage/kliko_brown.png'}, pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'}, rest: {kliko: 'grey', code: '#7CFC00', name: 'Restafval', icon: 'img/garbage/kliko_green.png'}, papier: {kliko: 'blue', code: '#00BFFF', name: 'Papier', icon: 'img/garbage/kliko_blue.png'}, kca: {kliko: 'red', code: '#b21807', name: 'Chemisch afval', icon: 'img/garbage/kliko_red.png'}, brown: {kliko: 'brown', code: '#7c3607', name: 'Bruin', icon: 'img/garbage/kliko_brown.png'}, black: {kliko: 'black', code: '#000000', name: 'Zwart', icon: 'img/garbage/kliko_black.png'}, milieu: {kliko: 'yellow', code: '#f9e231', name: 'Geel', icon: 'img/garbage/kliko_yellow.png'}, kerstboom: {kliko: 'green', code: '#375b23', name: 'Kerstboom', icon: 'img/garbage/tree.png'},} config['lineColors'] = ['#f1c40f', '#40e0d0', '#eee']; /*iFrames aanmaken */ /* var frames = {} frames.weather = {refreshiframe:10000,height:230,frameurl:"//forecast.io/embed/#lat=00.0000&lon=0.0000&name=Somewhere&country=NL&lang=nl&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si",width:12} */ /* MAPS VAN GOOGLE */ /* var maps = {} maps.location = { height: 256, width:12, latitude: 00.00000, longitude: 0.00000, zoom:10 } */ /*Kalender var aanmaken */ var calendars = {} calendars.private = { fontsize:28, image:'/icons/calendar.png', maxitems: 10, icalurl: 'https://cors-anywhere.herokuapp.com/https://basic.ics' } /*De internet radio speler */ var _STREAMPLAYER_TRACKS = [ {"track":1,"name":"NPO Radio 2","file":"http://icecast.omroep.nl/radio2-bb-mp3"}, {"track":2,"name":"Radio Rijnmond","file":"http://d2e9xgjjdd9cr5.cloudfront.net/icecast/rijnmond/radio-mp3"}, {"track":3,"name":"Sublime FM","file":"http://Stream.sublimefm.nl/SublimeFM_mp3 "}, {"track":4,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"}, {"track":5,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"}, {"track":6,"name":"Omroep Brabant","file":"http://streaming.omroepbrabant.nl/mp3"},]; /*Knoppen var aanamken */ var buttons = {} buttons.buienradar = { key: 'buienradar' , width:12, isimage:true, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256'} buttons.ipcam1 = {key: 'cam1' , width:12, isimage:true, image: 'http://ip:poort/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=username&pwd=password'} buttons.ipcam2 = {key: 'cam2' , width:12, isimage:true, image: ' https://spacetrack.eu/iss/globe.php?114126457&'} buttons.domoticz = {key:'log' , width:12, icon:'fa-microchip', title: 'Domoticz Log', log:true, level: 2} buttons.school = {key: 'school' , width:12, image:'img/icons/school.png', title: 'School site, met handige informatie', url:'https://www.eenofandereschoolsite.nl/'} buttons.vakantie = {key: 'vakantie' , width:12, image:'img/icons/vakantie3.png', title: 'School Vakanties voor alle regios', url: 'https://opendata.rijksoverheid.nl/v1/sources/rijksoverheid/infotypes/schoolholidays/schoolyear/2018-2019?output=html'} buttons.energie = {key: 'EnergiePag', width:12, image: 'img/icons/huisenergie.png', title: 'Ga naar Energie' ,slide:2 } buttons.home = {key: 'Homepag' , width:12, image: 'img/icons/thuispag.png', title: 'Ga naar Thuis Scherm' ,slide:1 } buttons.bedien = {key: 'Bedinepag' , width:12, image: 'img/icons/bediening1.png', title: 'Ga naar Huis Besturing' ,slide:3 } /*buttons.verkeer = { width:12, isimage:true, image:'https://www.anwb.nl/verkeer/verkeerstool.js', url: 'https://www.anwb.nl/verkeer/'}*/ /*buttons.wind1 = { width: 4, height: 10, isimage:true, image: 'https://www.windfinder.com/widget/forecast/js/Somewhere?unit_wave=m&unit_rain=mm&unit_temperature=c&unit_wind=m_s&days=2&show_day=0&show_pressure=0&show_temperature=0'}*/ /*buttons.moon = {key: 'moon'width:12, isimage:true, refreshimage:60000, image: 'moon'}*/ /*buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}*/ buttons.honeywell = {key: 'honeywell', width:12, isimage:true, image:'img/icons/HoneywellThermostaat.png', title: 'Honeywell Thermostaat' } /* var blocks = {} /* Standaard blokken met config benaming */ blocks['news_1'] = {} blocks['news_1']['feed'] = 'https://cors-anywhere.herokuapp.com/http://www.nu.nl/rss/Algemeen'; blocks['news_1']['maxheight'] = 350; /*Blokken met [IDX] nummer vanuit Domoticz */ /* Xiaomi Gateway Kleuren */ blocks[1] = {} blocks[1]['width'] = 6; /* Xiaomi Ringtone Selector */ blocks[3] = {} blocks[3]['width'] = 6; /* Xiaomi Deursensor */ blocks[99] = {} blocks[99]['title'] = 'Deur Sensor' blocks[99]['width'] = 6; /* Xiaomi Raam Sensor */ blocks[100] = {} blocks[100]['title'] = 'Raam Sensor' blocks[100]['width'] = 6; /*Metingen onboard sensoren Server PC */ /* Ssyteem Temp */ blocks[101] = {} blocks[101]['width'] = 6; /* CPU temp */ blocks[105] = {} blocks[105]['width'] = 6; /*P1 Smartmeter Elektr */ /* KWh verbruik actueel */ blocks['94_1'] = {} blocks['94_1']['title'] = 'Energie Actueel'; blocks['94_1']['width'] = 6; blocks['94_1']['switch'] = true; /* Verbruik KWh Vandaag */ blocks['94_2'] = {} blocks['94_2']['title'] = 'Energie vandaag'; blocks['94_2']['width'] = 4; blocks['94_2']['switch'] = true; /* Totale KWh verbruik */ blocks['94_3'] = {} blocks['94_3']['title'] = 'Energie Totaal'; blocks['94_3']['width'] = 4; blocks['94_3']['switch'] = true; blocks['94_3']['image'] = 'current48.png'; /* Binnenkomend Voltage */ blocks[95] = {} blocks[95]['width'] = 4; blocks[95]['title'] = 'Inkomend Voltage'; blocks[95]['switch'] = true; blocks[95]['image'] = 'current48.png'; /* Gas meter verbruik vandaag */ blocks['96_1'] = {} blocks['96_1']['width'] = 4; blocks['96_1']['title'] = 'Gas Vandaag'; blocks['96_1']['switch'] = true; blocks['96_1']['image'] = 'gas48.png' /* Gasmeter verbruik totaal */ blocks['96_2'] = {} blocks['96_2']['width'] = 4; blocks['96_2']['title'] = 'Gas Totaal'; blocks['96_2']['switch'] = true; /*Kosten Energie*/ /*Elektra vandaag*/ blocks['134'] = {} blocks['134']['width'] = 4; blocks['134']['title'] = 'Elektra Kosten Vandaag'; blocks['134']['switch'] = true; /*Gas vandaag */ blocks['135'] = {} blocks['135']['width'] = 4; blocks['135']['title'] = 'Gas Kosten Vandaag'; blocks['135']['switch'] = true; /*Elektra totaal*/ blocks['136'] = {} blocks['136']['width'] = 4; blocks['136']['title'] = 'Elektra Kosten Totaal'; blocks['136']['switch'] = true; /*Gas totaal */ blocks['137'] = {} blocks['137']['width'] = 4; blocks['137']['title'] = 'Gas Kosten Totaal'; blocks['137']['switch'] = true; /*Weer en metingen van buiten */ /* Buiten temperatuur */ blocks['123_1'] = {} blocks['123_1']['title'] = 'Temperatuur' blocks['123_1']['width'] = 4; /* Luchtvochtigheid */ blocks['123_2'] = {} blocks['123_2']['title'] = 'Vochtigheid' blocks['123_2']['width'] = 4; /* Lucht druk */ blocks['123_3'] = {} blocks['123_3']['title'] = 'Luchtdruk' blocks['123_3']['width'] = 4; /* Windkracht */ blocks[124] = {} blocks[124]['title'] = 'Windkracht' blocks[124]['width'] = 4; /* UV-index */ blocks[52] = {} blocks[52]['title'] = 'UV Index' blocks[52]['width'] = 4; /* mm Regen */ blocks[127] = {} blocks[127]['title'] = 'Regen' blocks[127]['width'] = 4; /* Zicht*/ blocks[125] = {} blocks[125]['width'] = 4; /* Gevoels temperatuur, Windchill */ blocks[121] = {} blocks[121]['title'] = ''; blocks[121]['image'] = '/icons/windchill.png' blocks[121]['width'] = 12; /* Kamer Thermostaat */ /*Huiskamer Temperatuur */ blocks[128] = {} blocks[128]['title'] = 'Huiskamer Temperatuur'; /* blocks[128]['image'] = '/icons/thermostemp.png'*/ blocks[128]['width'] = 12; /*Buiten Tempratuur Via Thermostaat */ blocks[129] = {} blocks[129]['title'] = 'Temperatuur Buiten Huis'; /* blocks[129]['image'] = '/icons/thermobuiten.png'*/ blocks[129]['width'] = 12; /*CV aan of uit */ blocks[130] = {} blocks[130]['width'] = 12; blocks[130]['title'] = 'Programma Kachel'; /* blocks[130]['image'] = '/icons/windchill.png'*/ /*Ingestelde Huiskamer Temperatuur*/ blocks[131] = {} blocks[131]['title'] = 'Ingestelde Temperatuur'; /* blocks[131]['image'] = '/icons/HoneywellThermostaat.png';*/ blocks[131]['width'] = 12; */ blocks['blocktitle_1'] = {} blocks['blocktitle_1']['type'] = 'blocktitle'; blocks['blocktitle_1']['title'] = 'Gas en Elektra Verbruik' blocks['blocktitle_1']['width'] = 12 ; blocks['blocktitle_2'] = {} blocks['blocktitle_2']['type'] = 'blocktitle'; blocks['blocktitle_2']['title'] = 'Kamer Thermostaat' blocks['blocktitle_2']['width'] = 12 ; blocks['blocktitle_2']['image'] = 'icons/calendar.png'; blocks['blocktitle_3'] = {} blocks['blocktitle_3']['type'] = 'blocktitle'; blocks['blocktitle_3']['title'] = 'Bediening Lampen' blocks['blocktitle_3']['width'] = 12 ; blocks['blocktitle_4'] = {} blocks['blocktitle_4']['type'] = 'blocktitle'; blocks['blocktitle_4']['title'] = 'Agenda / Kalender' blocks['blocktitle_4']['icon'] = 'fa-calendar' /*Laatste wijziging, waarom werkt dit niet ?*/ blocks['blocktitle_4']['width'] = 12 ; blocks['blocktitle_5'] = {} blocks['blocktitle_5']['type'] = 'blocktitle'; blocks['blocktitle_5']['icon'] = 'fa-calendar' /*Laatste wijziging, waarom werkt dit niet ?*/ blocks['blocktitle_5']['title'] = 'Nieuws / Files / Weer' blocks['blocktitle_5']['width'] = 12 ; blocks['blocktitle_6'] = {} blocks['blocktitle_6']['type'] = 'blocktitle'; blocks['blocktitle_6']['title'] = 'Oranje = Hoog tarief / Blauw = Laag tarief' blocks['blocktitle_6']['width'] = 12 ; blocks['camtitle_1'] = {} blocks['camtitle_1']['type'] = 'blocktitle'; blocks['camtitle_1']['title'] = 'Camera' blocks['camtitle_1']['width'] = 12 ; /*Hier worden de colommen voor op het scherm gemaakt */ var columns = {} columns['bar'] = {} columns['bar']['blocks'] = ['logo','miniclock','settings'] columns[1] = {} columns[1]['blocks'] = ['currentweather_big_owm',buttons.ipcam1, buttons.ipcam2] //remark: idx 144 produces 2 blocks, so you can use: '144_1' and '144_2' (or just 144 if you want one) columns[1]['width'] = 3; columns[2] = {} columns[2]['blocks'] = [calendars.private, buttons.school, buttons.vakantie, 'garbage', 'streamplayer'] columns[2]['width'] = 3; columns[3] = {} columns[3]['blocks'] = ['news_1','traffic',121,'123_1','123_2','123_3',124,52,127,125] columns[3]['width'] = 4; columns[4] = {} columns[4]['blocks'] = ['clock','stationclock','sunrise',buttons.buienradar,buttons.energie] columns[4]['width'] = 2; columns[5] = {} columns[5]['width'] = 3; columns[5]['blocks'] = ['blocktitle_2',131,130,128,129] columns[6] = {} columns[6]['blocks']=['96_1','96_2',95,'graph_96',135,137,buttons.home] columns[6]['width'] = 4; columns[7] = {} columns[7]['blocks'] = ['94_1','94_2','94_3','graph_94',134,136,buttons.bedien] columns[7]['width'] = 4; columns[8] = {} columns[8]['blocks'] = ['clock'] columns[8]['width'] = 1; columns[9] = {} columns[9]['blocks'] = ['blocktitle_3',buttons.domoticz,1,99,100,] columns[9]['width'] = 4; columns[10] = {} columns[10]['blocks'] = ['blocktitle_3'] columns[10]['width'] = 4; columns[11] = {} columns[11]['blocks'] = [buttons.home,buttons.energie] columns[11]['width'] = 4; /*Standby modus configuratie */ var columns_standby = {} columns_standby[1] = {} columns_standby[1]['blocks'] = ['weather_owm','clock','94_1','123_1',128] //specify blocks for the standby mode columns_standby[1]['width'] = 36; /*Hier worden de verschillende schermen gemaakt welke je kunt swipen */ var screens = {} screens['default'] = {} screens['default']['maxwidth'] = 1920; screens['default']['maxheight'] = 1080; screens['default'][1] = {} screens['default'][1]['background'] = 'bg27.png'; screens['default'][1]['columns'] = [1,2,3,4] screens['default'][2] = {} screens['default'][2]['background'] = 'bg27.png'; screens['default'][2]['columns'] = [5,6,7,8] screens['default'][3] = {} screens['default'][3]['background'] = 'bg27.png'; screens['default'][3]['columns'] = [8,9,10,11]
creative.css line 459 tot 524:Code: Select all
/* CUSTOM CSS FILE */ @font-face{ font-family:'digital-clock-font'; src: url('../img/font/digital-7.ttf'); } /* Title of tile */ .title {font-size:15px;} /* News block: Hide icon and change margins of text to fill block */ #rss-styled_news { margin-right: -20px; margin-left: -20px;} .fas.fa-newspaper-o {opacity: 50;} /* Blocktitles?*/ div.mh.transbg.block_graph_94 {Height:150px;} div.mh.titlegroups { height: 38px !important; /* default height=75px */ padding-top: 0px; /* center text for new height */ color: white; background-color: rgba(0,0,0,0.02);} /* Modifications to the fa en wi font family*/ .sunrise { font-size: auto; font-size: 1vw; color: yellow;} .wi-sunrise:before { color: yellow; font-size: 25px; font-size: 1vw;} .sunset { font-size: 25px; font-size: 1vw; color: orange;} .wi-sunset:before { color: orange; font-size: 25px; font-size: 1vw;} .wi-humidity:before {color: gray;} .wi-barometer:before {color: aqua;} .wi-wind-direction:before {color: lightcyan;} .fas.fa-mobile.on.icon {font-size: 30px !; color: green;} .fas.fa-mobile.off.icon {font-size: 30px !important;} /*Alle iconen verkleuren*/ .fas.fa-lightbulb-o.on {color: yellow} .fas.fa-fire {color: orange} .fas.fa-bolt {color: yellow} .fas.fa-plug {color:yellowgreen} .fas.fa-thermometer-half {color:pink} .fas.fa-newspaper-o {color:springgreen} .fas.fa-calendar {color:purple} .fas.fa-certificate {color:orange} .fas.fa-sun-o {color:orange} .fas.fa-tint {color: MediumSlateBlue } .fas.fa-eye {color: LightGoldenRodYellow} .fas.fa-radio {color:red} .fas.fa-play {color:aqua; font-weight:bold;} .fas.staticon {color:red} .fas.fa-chevron-left {color:orange; font-weight:bold;} .fas.fa-chevron-right {color:orange; font-weight:bold;} .col-xs-6 transbg imgblock { margin-left: auto; margin-right: auto } .wi.wi-day-sunny:before { color: #FFFF00; font-size: 40px;} .wi.wi-night-clear:before { color: #FAFAD2; font-size: 40px; } .wi.wi-day-cloudy:before { color: #FFFF00; font-size: 40px;} .wi.wi-night-cloudy:before { color: #FAFAD2; font-size: 40px; } .wi.wi-cloud:before { color: #F8F8FF; font-size: 40px; } .wi.wi-cloudy:before { color: #DCDCDC; font-size: 40px;} .wi.wi-showers:before { color: #00FFFF; font-size: 40px; } .wi.wi-day-rain:before { color: #AFEEEE; font-size: 40px; } .wi.wi-night-rain:before { color: #4169E1; font-size: 40px; } .wi.wi-day-thunderstorm:before { color: #FFD700; font-size: 40px;} .wi.wi-night-thunderstorm:before { color: #DAA520; font-size: 40px; } .wi.wi-snow:before { color: #FFFAFA; font-size: 40px;} .wi.wi-day-fog:before { color: #F5F5F5; font-size: 40px; } .wi.wi-night-fog:before { color: #D3D3D3; font-size: 40px; } div.mh.transbg.block_131.col-xs-12 { background-image: url("../img/icons/honeywellthermostaat1.png"); /*background-clip:content-box;*/ background-repeat: no-repeat; /* background-attachment: fixed;*/ height:260px; background-position: 110px; text-align:center; line-height: 60px; text-align: center; } /* .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: 0px; border-radius:180px; } */ section.wrapper { min-width: 400px; /* Minimum width of your wrapper element */ overflow: hidden; display: inline-block; } .btn-number.plus{ border-bottom:0px; padding-bottom:7px; display:inline-block; color:red; position: relative; left: -110px; top: 95px; } .btn-number.min{ border-bottom:0px; padding-bottom:7px; color:blue; position: relative; right: 652%; top: 35px; } .stateheating { color:black; display:inline-block; width:100%; height:100%; vertical-align:0px; position: relative; left: 0%; bottom:70px; } .title-input { font-family: 'digital-clock-font'; font-size:28px; display:inline-block; /*width:100%; Height:100%;*/ color:black; position: relative; Top: 75px; } /* div.mh.transbg.block_131.col-xs-12 div.col-data{ text-align:left; */ /* OWM Weather */ .col-xs-12.big .weatherdegrees, .big .weatherloc { display: inline-block; margin-top: -2px; font-size: 18px; font-weight: bold; margin-right: 4px; float: right; text-align:right; color:orange;} .weatherfull > div div.temp { font-size: 28px; font-weight: 400; color: orange; margin-top: 10px; margin-left:100px; text-align: left; padding: 0px 4px;} .weatherfull > div div.day { margin-top: 0px; font-weight: 300; font-size: 20px; color:aqua;} .block_currentweather_owm {margin-left: 0px;} .transbg.col-xs-2.temp .av-temp {text-align:left;} .transbg.col-xs-2.temp .rain {text-align:right;} .col-xs-4 transbg hover text-center btnPrev {color:red;} /* Fontsize buttons Blinds */ .fa,.wi {font-size:auto !important;} /* Block Title */ h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; margin: 0px; margin-left: 15px; font-weight: 100; font-size: 140%; /* color: white;*/ text-shadow: 2px 2px black; text-align: center;} .smalltitle h3 {font-size: 15px !important;margin-left: 6px;color: pink; font-weight:bold;} /* Buienradar */ .block_117 {height: 100% !important;} .fas.fa-umbrella {font-size: 32px !important;font-weight: bold !important;} .fas.fa-umbrella.on {color:#3399ff !important;} /* Standby screen */ .standby .clock {font-size:60px !important;} .standby .weekday,.standby .date {font-size:40px !important;} .standby .fas.fa-thermometer-half {color:pink} .standby .swiper-slide {background:rgba(0,0,0,0.0)} /* Swiper bullet */ .swiper-pagination-bullet {width: 30px;height: 30px;background: white;} /* Up-Down arrow Blinds */ .input-groupBtn li { position:sticky; z-index: 9999; right: 1px; border-radius: 0px; /* Round corners */} /*Default buttons*/ .btn.btn-default { background-color: black; color: white; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border: none;} .btn.btn-default:hover { background-color: black; /* Green */ color: lime; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); border: none;} /* 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: 3px solid rgba(0,0,0,0); background: rgba(0,0,0,0.02); background-clip: padding-box; border-radius: 0px; height:auto} .transbg.col-xs-1.hover:hover, .transbg.col-xs-2.hover:hover, .transbg.col-xs-3.hover:hover, .transbg.col-xs-4.hover:hover, .transbg.col-xs-5.hover:hover, .transbg.col-xs-6.hover:hover, .transbg.col-xs-7.hover:hover, .transbg.col-xs-8.hover:hover, .transbg.col-xs-9.hover:hover, .transbg.col-xs-10.hover:hover, .transbg.col-xs-11.hover:hover, .transbg.col-xs-12.hover:hover {padding-top:15px; padding-bottom:15px; border: 3px solid rgba(0,0,0,0); background: rgba(100,100,100,0.3); background-clip: padding-box; border-radius: 0px; cursor:pointer; height:auto} /*Thermostaat Image*/ .transbg.col-xs-12.imgblock{ text-align:center;}
graphs.js bar begins at line 222:Code: Select all
/* .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; } .input-groupBtn.input-chevron .btn-number { padding: 5px 10px 5px 10px } .input-groupBtn .btn-number.plus{ border-bottom:0px; padding-bottom:7px; } .input-groupBtn li { position: -webkit-sticky; position: sticky; z-index:9997; right:1px; } .input-groupBtn li.down { top:35px; } .input-groupBtn .stop { z-index:9997; -ms-transform: rotate(45deg); /* IE 9 */ /* -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ /* transform: rotate(45deg); top: 0; width: 71px; height: 33px; position: absolute; right: 0; margin-right: -27px; margin-top: 0px; } .input-groupBtn.input-chevron { right:27px; } .input-groupBtn.input-chevron.hidestop { right:-5px; } */ .input-groupBtn .btn-number:active,.btn-number:hover { color: black; background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0 padding-box; } /* .input-groupBtn .fa-thermostat { vertical-align: top; font-size: 20px !important; } .title-input { font-size: 20px !important; margin-top:-2px; display: inline-block; } */
settings.js line for color of bars or line 569:Code: Select all
function getGraphs(device, popup) { var sensor = 'counter'; var txtUnit = '?'; var currentValue = device['Data']; var decimals = 2; switch (device['Type']) { case 'Rain': sensor = 'rain'; txtUnit = 'mm'; decimals = 1; break; case 'Lux': sensor = 'counter'; txtUnit = 'Lux'; decimals = 0; break; case 'Wind': sensor = 'wind'; if (config['use_beaufort']) { currentValue = Beaufort(device['Speed']); decimals = 0; txtUnit = 'Bft'; } else { currentValue = device['Speed']; decimals = 1; txtUnit = 'm/s'; } break; case 'Temp': case 'Temp + Humidity': case 'Temp + Humidity + Baro': sensor = 'temp'; txtUnit = '°C'; currentValue = device['Temp']; decimals = 1; break; case 'Humidity': sensor = 'temp'; txtUnit = '%'; decimals = 1; break; } switch (device['SubType']) { case 'Percentage': sensor = 'Percentage'; txtUnit = '%'; decimals = 1; break; case 'Custom Sensor': sensor = 'Percentage'; txtUnit = device['SensorUnit']; decimals = 1; break; case 'Gas': txtUnit = 'm3'; break; case 'Energy': case 'kWh': case 'YouLess counter': txtUnit = 'kWh'; currentValue = device['CounterToday']; break; case 'Visibility': txtUnit = 'km'; break; case 'Radiation': case 'Solar Radiation': txtUnit = 'Watt/m2'; decimals = 0; break; case 'Pressure': txtUnit = 'Bar'; break; case 'Soil Moisture': txtUnit = 'cb'; break; case 'Leaf Wetness': txtUnit = 'Range'; break; case 'Voltage': case 'A/D': txtUnit = 'mV'; break; case 'VoltageGeneral': txtUnit = 'V'; break; case 'DistanceGeneral': case 'Distance': txtUnit = 'cm'; break; case 'Sound Level': txtUnit = 'dB'; break; case 'CurrentGeneral': case 'Current': txtUnit = 'A'; break; case 'Weight': txtUnit = 'kg'; break; case 'Waterflow': sensor = 'Percentage'; txtUnit = 'l/min'; break; case 'Counter Incremental': txtUnit = device['CounterToday'].split(' ')[1]; currentValue = device['CounterToday'].split(' ')[0]; break; } currentValue = number_format(currentValue, decimals); showGraph(device['idx'], device['Name'], txtUnit, 'initial', currentValue, false, sensor, popup); } function getGraphByIDX(idx) { getGraphs(alldevices[idx], true); } function getButtonGraphs(device) { if ($('#opengraph' + device['idx']).length === 0) { var html = '<div class="modal fade opengraph' + device['idx'] + '" data-idx="' + device['idx'] + '" id="opengraph' + device['idx'] + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">'; html += '<div class="modal-dialog">'; html += '<div class="modal-content">'; html += '<div class="modal-header">'; html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'; html += '</div>'; html += '<div class="modal-body block_graphpopup_' + device['idx'] + '">' + language.misc.loading; html += '</div>'; html += '</div>'; html += '</div>'; html += '</div>'; $('body').append(html); $('#opengraph' + device['idx']).on('shown.bs.modal', function () { getGraphByIDX($(this).data('idx')); }); } } function showGraph(idx, title, label, range, current, forced, sensor, popup) { if (typeof(popup) === 'undefined') forced = false; if (typeof(forced) === 'undefined') forced = false; if (typeof(_GRAPHS_LOADED[idx]) === 'undefined' || _GRAPHS_LOADED[idx] < (time() - (parseFloat(_GRAPHREFRESH) * 60))) { forced = true; } if ($('.graphcurrent' + idx).length > 0) { $('.graphcurrent' + idx).html(current + ' ' + label); } if (forced || popup) { _GRAPHS_LOADED[idx] = time(); //Check settings for standard graph if (range === 'initial') { switch (settings['standard_graph']) { case 'hours': range = 'last'; break; case 'day': range = 'day'; break; case 'month': range = 'month'; break; } } realrange = range; if (range === 'last') realrange = 'day'; $.ajax({ url: settings['domoticz_ip'] + '/json.htm?username=' + usrEnc + '&password=' + pwdEnc + '&type=graph&sensor=' + sensor + '&idx=' + idx + '&range=' + realrange + '&time=' + new Date().getTime() + '&jsoncallback=?', type: 'GET', async: true, contentType: "application/json", dataType: 'jsonp', success: function (data) { if (data.status === 'ERR') { alert('Could not load graph!'); return; } var buttons = createButtons(idx, title, label, range, current, sensor, popup); title = '<h4>' + title; if (typeof(current) !== 'undefined' && current !== 'undefined') title += ': <B class="graphcurrent' + idx + '">' + current + ' ' + label + '</B>'; title += '</h4>'; var html = '<div class="graph' + (popup ? 'popup' : '') + '" id="graph' + idx + '">'; html += '<div class="transbg col-xs-12">'; html += title + '<br /><div style="margin-left:15px;">' + buttons + '</div><br /><div id="graphoutput' + idx + '"></div>'; html += '</div>'; html += '</div>'; if ($('#graph' + idx + '.graph').length > 0) { $('#graph' + idx + '.graph').replaceWith(html); } $('.block_graph' + (popup ? 'popup' : '') + '_' + idx).html(html); var graphProperties = getGraphProperties(data.result[0], label); graphProperties.dateFormat = settings['shorttime']; if (range === 'month' || range === 'year') { graphProperties.dateFormat = settings['shortdate']; } if (range === 'last') { var fourHoursAgo = moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm'); data.result = data.result.filter(function (element) { return element.d > fourHoursAgo; }); } graphProperties.data = data.result.filter(function (element) { return element.hasOwnProperty(graphProperties.keys[0]); }); if ($('#graphoutput' + idx).length > 0) { makeMorrisGraph(idx, graphProperties); } } }); } } function makeMorrisGraph(idx, graphProperties) { Morris.Bar({ parseTime: false, element: 'graphoutput' + idx, data: graphProperties.data, fillOpacity: 0.2, gridTextColor: '#c3f6fe', lineWidth: 1, stacked: true, xkey: ['d'], ykeys: graphProperties.keys, labels: graphProperties.labels, xLabelFormat: function (x) { return moment(x.src.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat); }, lineColors: settings['lineColors'], barColors: settings['lineColors'], pointFillColors: ['none'], pointSize: 1, hideHover: 'auto', resize: true, hoverCallback: function (index, options, content, row) { var datePoint = moment(row.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat); var text = datePoint + ": "; graphProperties.keys.forEach(function (element, index) { text += (index > 0 ? ' / ' : '') + number_format(row[element], 2) + ' ' + graphProperties.labels[index]; }); return text; } }); } function createButtons(idx, title, label, range, current, sensor, popup) { var buttons = '<div class="btn-group" role="group" aria-label="Basic example">'; buttons += '<button type="button" class="btn btn-default '; if (range === 'last') buttons += 'active'; buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'last\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_hours + '</button> '; buttons += '<button type="button" class="btn btn-default '; if (range === 'day') buttons += 'active'; buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'day\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.today + '</button> '; buttons += '<button type="button" class="btn btn-default '; if (range === 'month') buttons += 'active'; buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'month\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_month + '</button>'; buttons += '</div>'; return buttons; } function getGraphProperties(result, label) { var graphProperties = {}; if (result.hasOwnProperty('uvi')) { graphProperties = { keys: ['uvi'], labels: [label], }; } else if (result.hasOwnProperty('lux')) { graphProperties = { keys: ['lux'], labels: ['Lux'], }; } else if (result.hasOwnProperty('lux_avg')) { graphProperties = { keys: ['lux_avg', 'lux_min', 'lux_max'], labels: ['Lux average', 'Minimum', 'Maximum'], }; } else if (result.hasOwnProperty('gu') && result.hasOwnProperty('sp')) { graphProperties = { keys: ['gu', 'sp'], labels: ['m/s', 'm/s'], }; } else if (result.hasOwnProperty('ba') && result.hasOwnProperty('hu') && result.hasOwnProperty('te')) { graphProperties = { keys: ['ba', 'hu', 'te'], labels: ['hPa', '%', _TEMP_SYMBOL], }; } else if (result.hasOwnProperty('hu') && result.hasOwnProperty('te')) { graphProperties = { keys: ['hu', 'te'], labels: ['%', _TEMP_SYMBOL], }; } else if (result.hasOwnProperty('te')) { graphProperties = { keys: ['te'], labels: [_TEMP_SYMBOL], }; } else if (result.hasOwnProperty('hu')) { graphProperties = { keys: ['hu'], labels: ['%'], }; } else if (result.hasOwnProperty('mm')) { graphProperties = { keys: ['mm'], labels: ['mm'], }; } else if (result.hasOwnProperty('v_max')) { graphProperties = { keys: ['v_max'], labels: [label], }; } else if (result.hasOwnProperty('v2')) { graphProperties = { keys: ['v2', 'v'], labels: [label, label], }; if (label === 'kWh' && realrange === 'day') { graphProperties.labels = ['Watt', 'Watt']; } } else if (result.hasOwnProperty('v')) { if (label === 'kWh' && realrange === 'day') { label = 'Wh'; } if (data.method === 1) { graphProperties = { keys: ['eu'], labels: [label], }; } else { graphProperties = { keys: ['v'], labels: [label], }; } } else if (result.hasOwnProperty('eu')) { graphProperties = { keys: ['eu'], labels: [label], }; } else if (result.hasOwnProperty('u')) { graphProperties = { keys: ['u'], labels: [label], }; } else if (result.hasOwnProperty('u_max')) { graphProperties = { keys: ['u_max', 'u_min'], labels: ['?', '?'], }; } return graphProperties; }
Code: Select all
if (typeof(settings['lineColors']) === 'undefined') settings['lineColors'] = ['#eee', '#eee', '#eee'];
Succes
My Evohome is working fine with Domoticz (although set only works on the temperature page, not on the dash), but in Dashticz i only get the current temperature...
- Thuis
- Posts: 251
- Joined: Tuesday 11 September 2018 11:36
- Target OS: Linux
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
Yes i can set my honeywell lyric t6 with dashticz, yes you understand well.
I Love Domoticz ! And the community around it :-)
-
- Posts: 237
- Joined: Wednesday 17 October 2018 12:11
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
I have managed to setup my evohome in Domoticz. I can see the "Woonkamer" temperature on the temperature pages. And i see the Evohome Touch on the switches page. However, i cannot set a specific temperature. I would guess that there would be some kind of slider on the Evohome Touch.
I see that the switch type is set to on/off, but is that correct? There is also no further action specified.
- Thuis
- Posts: 251
- Joined: Tuesday 11 September 2018 11:36
- Target OS: Linux
- Domoticz version: Beta
- Location: The Netherlands
- Contact:
Re: Dashticz - Show your dashboard and how-to's!
I added the hardware as honeywell thermostat, then i got 4 devices. 128Kamertemperatuur, 129Buitentemperatuur, 130CV volgt programma(switch) and 131Ingestelde temperatuur(setpoint). With the setpoint idx in dashticz i can change the ingestelde temperatuur. When i do this, the switch turns off, so i believe that this means, the thermostat is now not following the thermostat program. I am still figuring out what the switch is for. My thought is, if I turn the switch to on, the thermostat will follow its program again,but i have to test this, and i need time for that haha. Did you tried hardware honeywell thermostat?
I Love Domoticz ! And the community around it :-)
Who is online
Users browsing this forum: No registered users and 1 guest