Dashticz - General Discussions

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: robgeerts, htilburgs

User avatar
HansieNL
Posts: 422
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - General Discussions

Post by HansieNL » Friday 17 August 2018 18:11

@alarm_guy1: First try a basic CONFIG.js and see if your Domoticz favorites are visible.

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://xxxxxxxx:xxxxxxxx@192.168.2.137:8081';
config['app_title'] = 'Dashticz';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
From there you can add more functions to your dashboard. See https://www.domoticz.com/wiki/Dashticz_V2 how to do that.
Blah blah blah

alarm_guy1
Posts: 28
Joined: Tuesday 14 January 2014 1:03
Target OS: Linux
Domoticz version:
Contact:

Re: Dashticz - General Discussions

Post by alarm_guy1 » Friday 17 August 2018 19:30

:-( still not working

pass is def correct
Attachments
dashticz.jpg
dashticz.jpg (98.94 KiB) Viewed 812 times

alarm_guy1
Posts: 28
Joined: Tuesday 14 January 2014 1:03
Target OS: Linux
Domoticz version:
Contact:

Re: Dashticz - General Discussions

Post by alarm_guy1 » Friday 17 August 2018 19:41

right after messing all working now on a basic setup.

many thanks.
im not 100% sure what solved it though

rfvdboom
Posts: 22
Joined: Tuesday 20 September 2016 8:32
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - General Discussions

Post by rfvdboom » Sunday 26 August 2018 13:53

Hi there,

Is it possible to edit the images of sensors etc? I've changed the icons of the switches successfully , but when i change the images of the sensors, nothing happens.

The. Grtz

rfvdboom
Posts: 22
Joined: Tuesday 20 September 2016 8:32
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz - General Discussions

Post by rfvdboom » Sunday 26 August 2018 13:58

alarm_guy1 wrote:
Friday 17 August 2018 19:41
right after messing all working now on a basic setup.

many thanks.
im not 100% sure what solved it though
I see you are using spotify. When you're not using the beta version, that could be the problem. When I import the spotify using the stable version , all my blocks were gone. In the beta version that problem is solved.

peet3kabo
Posts: 31
Joined: Thursday 05 July 2018 17:29
Target OS: -
Domoticz version:
Contact:

Re: Dashticz - General Discussions

Post by peet3kabo » Sunday 26 August 2018 21:50

Maybe simple or stupid question. Been searching this forum and the net but can't find it.
I know how to create a block for graphs and see a lot of dashboards where they show like power usage today, but where do I find the number of the graphs I need in domoticz?
Or do I need a script of some kind.
Not into scripts or programming up until now.
Got my dashboard working so far with switches and so on.
Who can enlighten me?

Edit:
Was more simple then I thought.
The idx numbers in Domoticz just did the trick.
So solved for now.
After a few hours staring at configs and the net you get blind in a way

Verstuurd vanaf mijn SM-G935F met Tapatalk




Last edited by peet3kabo on Sunday 26 August 2018 21:50, edited 1 time in total.

User avatar
EdwinK
Posts: 1291
Joined: Sunday 22 January 2017 22:46
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Dashticz - General Discussions

Post by EdwinK » Monday 03 September 2018 11:45

Can't get the Logitech Media Server to show in Dashticz anymore. After reinstalling Domoticz the LMS got another idx, but when changing that in the blocks it doesn't show, just an empty place on Dasthicz.
Running latest BETA on a Pi-3 | Toon Thermostat | RFxcom | Dashticz V2 |

User avatar
bierlaagh
Posts: 45
Joined: Friday 14 March 2014 17:15
Target OS: Raspberry Pi
Domoticz version: 4.9984
Contact:

Re: Dashticz - General Discussions

Post by bierlaagh » Thursday 06 September 2018 22:40

hi all,
I can really use you're help.

I'm working on a new dashboard using Dashticz 1 homepage with a menu on is (the buttons refere to corresponding slides.
what I want to do is change the size of these buttons (the height to be exact), but whatever I do I don't get them to change.
Schermafbeelding 2018-09-06 om 22.27.35.jpg
Schermafbeelding 2018-09-06 om 22.27.35.jpg (87.16 KiB) Viewed 437 times
config.js
Spoiler: show
var config = {}
config['domoticz_ip'] = 'http://192.168.x.x:xxx';
config['app_title'] = 'Dashticz-control';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '7';
config['standby_after'] = 0;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '10';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = 0;
config['gm_zoomlevel'] = 0;
config['gm_latitude'] = 0;
config['gm_longitude'] = 0;
config['wu_api'] = 'xxxxxxxxxxx';
config['wu_city'] = 'Apeldoorn';
config['wu_name'] = 'Apeldoorn';
config['wu_country'] = 'NL';
config['idx_moonpicture'] = '15';
config['switch_horizon'] = 'http://192.168.x.x/domotica/dashticz/te ... orizon.php';
config['host_nzbget'] = 0;
config['spot_clientid'] = 0;
config['garbage_company'] = 'circulusberkel';
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = 'xxx';
config['garbage_street'] = 'xxxx';
config['garbage_housenumber'] = 'xxx';
config['garbage_maxitems'] = '2';
config['garbage_width'] = '12';
config['selector_instead_of_buttons'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 1;
config['last_update'] = 0;
config['hide_topbar'] = 1;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 1;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['garbage_hideicon'] = 0;

//Ziggo horizon
var _HOST_ZIGGO_HORIZON = 'xxx.xxx.xxx.xxx';

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

//info bus 9292ov
var publictransport = {}
publictransport.ovinfobus= { show_via: false, station: '', provider: '9292-bus', icon: 'bus', width:6, results: 10 }
publictransport.ovinfotrein= { show_via: false, station: '', provider: '9292-train', icon: 'train', width:6, results: 10}

//treinen vertrek informatie webcam Valtho
var frames = {}
frames.treinen = {refreshiframe:30000,height:800,frameurl:"https://www.rijdendetreinen.nl/vertrekt ... ",width:10}
frames.valtho = {refreshiframe:30000,height:195,frameurl:"https://www.skaping.com/valthorens/lamaison",width:5}
frames.weer = {refreshiframe:30000,height:700,frameurl:"https://weerdata.weerslag.nl/image/1.0/ ... ",width:10}


//TV gids
var tvguide = {}
tvguide.dutch = { key:'dutch', icon: 'fa-television', width:12, channels: [1,2,3,4,31,36,460,46,37,34,92,466], maxitems: 40 }

var calendars = {}
//calendars.f1 = { maxitems: 5, icalurl: 'https://www.gpupdate.net/en/calendar/27 ... -calendar/' }
calendars.f1 = {maxitems: 15, icon: '' , image: 'F1.png', icalurl:'webcal://www.gpupdate.net/nl/kalender/273/formul ... lendar.ics'}
calendars.google = {maxitems: 15, icon: 'fa-mars', image:'', icalurl:''}

//Stream players voor radio stations
var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"Q-music","file":"http://icecast-qmusic.cdp.triple-it.nl/ ... ive_96.mp3"},
{"track":2,"name":"Radio 2","file":"http://icecast.omroep.nl/radio2-bb-mp3"},
{"track":3,"name":"Radio 538","file":"http://18973.live.streamtheworld.com/RADIO538.mp3"},
{"track":4,"name":"Slam!","file":"http://stream.radiocorp.nl/web10_mp3"},
{"track":5,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
];

//Buttons hier maak je de knoppen met link aan OOK voor camera links
var buttons = {}
buttons.buienradar = {width:12, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/Rada ... =600&h=600', url: 'http://api.buienradar.nl/image/1.0/Rada ... =600&h=400'}
buttons.calendar = {width:4, image: 'img/calendar.png', title: 'Kalender', url: 'https://www.formula1.com/sp/static/f1/2 ... r/ical.ics'}
buttons.radio = {width:3, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}
buttons.nunl = {width:4, icon: 'fa-newspaper-o', title: 'Nu.nl', url: 'http://www.nu.nl'}
buttons.nzbget = {width:4, icon: 'fa-download', title: 'NZBget', url: ''}
buttons.moon= {width:12, isimage:true, refreshimage:60000, image: 'moon'}
buttons.webcam1 = {width:6, isimage:true, refresh:2000, image: 'http://xxx.xxx.xxx.xxx:xxx/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=xxx&pwd=xxxxx', url: 'http://xxx.xxx.xxx.xxx/cgi-bin/CGIProxy ... xx&pwd=xxx'}
buttons.webcam2 = {width:6, isimage:true, image: '', url: ''}
buttons.alarm = {key:'alarm', width:12, image: 'img/alarm2.png', title: 'Security Panel', url: 'secpanel.html'}
buttons.sonarr = {width:3, image: 'img/sonarr.png', title: 'Sonarr' ,slide:10 }
buttons.hoofdmenu = {width:12, image: 'img/hoofdmenu_mirror.png', title: 'Hoofdmenu ' ,slide:0 }
//buttons.huismodus = {width:4, image: 'img/home-icon.png', title: 'Huismodus' ,slide:1 }
buttons.trein = {width:4, image: 'img/trein.png', title: 'Trein',slide: 2}
buttons.verkeer = {width:4, image: 'img/verkeer.png', title: 'Verkeer' ,slide:3 }
buttons.verlichting = {width:4, image: 'img/Light-on_mirror.png', title: 'Verlichting',slide: 3}
buttons.temperatuur = {width:4, height:99,image: 'img/temp_mirror.png', title: 'Temperatuur' ,slide:5 }
buttons.webcam = {width:4, image: 'img/webcam.jpg', title: 'Webcam',slide: 4}
buttons.kalender = {width:4, image: 'img/calendar.jpg', title: 'Kalender' ,slide:7 }
buttons.tvgids = {width:4, image: '', title: 'TV Gids',slide: 8}
buttons.weer = {width:4, image: 'img/weer_mirror.png', title: 'Weer' ,slide:9 }

var blocks = {}
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['key'] = 'blocktitle_1';
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Verlichting';
blocks['blocktitle_1']['width'] = 12;

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['key'] = 'blocktitle_2';
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'multimedia';

blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['key'] = 'blocktitle_3';
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'overig';

blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['key'] = 'blocktitle_4';
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Weer en Temperatuur';

blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['key'] = 'blocktitle_5';
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Hoofdmenu';

//weer
blocks[69] = {}
blocks[69]['width'] = 4;
blocks[69]['title'] = 'UV'

blocks[594] = {}
blocks[594]['width'] = 4;
blocks[594]['title'] = 'Slaapkamer'
blocks[594]['icon'] = 'fa-bed';

blocks[595] = {}
blocks[595]['width'] = 4;
blocks[595]['title'] = 'Waterbed Mark'
blocks[595]['icon'] = 'fa-bed';

blocks[596] = {}
blocks[596]['width'] = 4;
blocks[596]['title'] = 'Waterbed Nicolette'
blocks[596]['icon'] = 'fa-bed';

blocks[713] = {}
blocks[713]['width'] = 4;
blocks[713]['title'] = 'Audio media'
blocks[713]['icon'] = 'fa-bed';

blocks[708] = {}
blocks[708]['width'] = 4;
blocks[708]['title'] = 'Waterbed'
blocks[708]['icon'] = 'fa-bed';

blocks[722] = {}
blocks[722]['width'] = 4;
blocks[722]['title'] = 'Waterbed'
blocks[722]['icon'] = 'fa-bed';


//lampen en schakelaars
blocks[4] = {}
blocks[4]['width'] = 4;
blocks[4]['title'] = 'Eettafel'

blocks[5] = {}
blocks[5]['width'] = 4;
blocks[5]['title'] = 'zonnescherm'

blocks[7] = {}
blocks[7]['width'] = 4;
blocks[7]['title'] = 'Salontafel'

blocks[8] = {}
blocks[8]['width'] = 4;
blocks[8]['title'] = 'Hoek bank'

blocks[9] = {}
blocks[9]['width'] = 4;
blocks[9]['title'] = 'Lamp Subwoofer'

//blocks[9] = {}
//blocks[9]['width'] = 4;
//blocks[9]['title'] = 'aquarium airflow'

blocks[111] = {}
blocks[111]['width'] = 4;
blocks[111]['title'] = 'aquarium'
//blocks[212]['icon'] = 'fa-television';

blocks[112] = {}
blocks[112]['width'] = 4;
blocks[112]['title'] = 'kerstboom'
blocks[112]['icon'] = 'fa-tree';

blocks[181] = {}
blocks[181]['width'] = 4;
blocks[181]['title'] = 'buitenlamp midden'

blocks[216] = {}
blocks[216]['width'] = 4;
blocks[216]['title'] = 'kerst wandkast'
blocks[216]['icon'] = 'fa-tree';

blocks[138] = {}
blocks[138]['width'] = 4;
blocks[138]['title'] = 'slaapkamer'

blocks[165] = {}
blocks[165]['width'] = 4;
blocks[165]['title'] = 'Lamp keuken'

blocks[313] = {}
blocks[313]['width'] = 4;
blocks[313]['title'] = 'wandkast'

blocks[315] = {}
blocks[315]['width'] = 4;
blocks[315]['title'] = 'led keuken'

blocks[321] = {}
blocks[321]['width'] = 4;
blocks[321]['title'] = 'kapstok'

blocks[323] = {}
blocks[323]['width'] = 4;
blocks[323]['title'] = 'aquarium verlichting'
blocks[323]['icon'] = 'fa-life-ring';

blocks[373] = {}
blocks[373]['width'] = 4;

blocks[554] = {}
blocks[554]['width'] = 4;


blocks[14] = {}
blocks[14]['width'] = 4;
blocks[14]['title'] = 'aquarium verlichting zolder'
blocks[14]['icon'] = 'fa-life-ring';

blocks[324] = {}
blocks[324]['width'] = 4;
blocks[324]['title'] = 'Led Zolder K'

blocks[549] = {}
blocks[549]['width'] = 3;
blocks[549]['title'] = 'zwembadpomp'

//multimedia
blocks[712] = {}
blocks[712]['width'] = 4;
blocks[712]['title'] = 'multimedia'
blocks[712]['icon'] = 'fa-power-off';

blocks[212] = {}
blocks[212]['width'] = 4;
blocks[212]['title'] = 'tv-beneden'
blocks[212]['icon'] = 'fa-television';

blocks[2] = {}
blocks[2]['width'] = 4;
blocks[2]['title'] = 'Onkyo'
blocks[2]['icon'] = 'fa-headphones';

blocks[17] = {}
blocks[17]['width'] = 4;
blocks[17]['title'] = 'tv-boven'
blocks[17]['icon'] = 'fa-television';

blocks[397] = {}
blocks[397]['width'] = 4;
blocks[397]['title'] = 'solar'
blocks[397]['icon'] = 'fa-windows';

blocks[399] = {}
blocks[399]['width'] = 4;
blocks[399]['title'] = 'WII U'
blocks[399]['icon'] = 'fa-gamepad';

blocks['s1'] = {}
blocks['s1']['type'] = 'Scene';
blocks['s1']['width'] = 12;
blocks['s1']['title'] = 'lampen beneden'
blocks['s1']['icon'] = 'fa-power-off';
blocks['s1']['hide_data'] = true;

blocks['s2'] = {}
blocks['s2']['type'] = 'Scene';
blocks['s2']['width'] = 12;
blocks['s2']['title'] = 'Slapen alles uit'
blocks['s2']['icon'] = 'fa-power-off';
blocks['s2']['hide_data'] = true;

var columns = {}

//Main scherm in alle screens toegevoegd
columns[1] ={}
columns[1]['blocks']=[buttons.hoofdmenu,'clock','sunrise',buttons.buienradar,'s1','s2']
columns[1]['width']=2;

//Buttons naar screens
columns[2] = {}
columns[2]['blocks'] = ['currentweather_big','blocktitle_5',buttons.verlichting, buttons.trein, buttons.verkeer, buttons.temperatuur, buttons.webcam, buttons.kalender, buttons.tvgids, buttons.weer, buttons.webcam]
columns[2]['width'] = 10;
columns[2]['blocks']['height'] = 250;

//Screen trein
columns[3] = {}
columns[3]['blocks'] = [frames.treinen]
columns[3]['width'] = 10;

//Screen weer
columns[4] = {}
columns[4]['blocks'] = ['blocktitle_4','weather','687_1',659,69,531,191,397,'547_1','570_1','481_1',]
columns[4]['width'] = 10;

//Screen verlichting
columns[5] = {}
columns[5]['blocks'] = ['blocktitle_1',4,8,313,7,315,165,321,689,14,9,16,679, ,554,373,216,112,19,181,'s8','s10','s11']
columns[5]['width'] = 10;

//Screen temperatuur
columns[6] = {}
columns[6]['blocks'] = [ 594,595,596,'713_1','713_2','708_1','708_2','722_1','722_2']
columns[6]['width'] = 10;

//Screen webcam
columns[7] = {}
columns[7]['blocks'] = [buttons.webcam1]
columns[7]['width'] = 10;

//Screen Calender
columns[8] = {}
columns[8]['blocks'] = [calendars.f1,calendars.google]
columns[8]['width'] = 10;


//Quick knoppen
columns[9] = {}
columns[9]['blocks'] = [1,2,7,9,49,41,59,19,15,110,57,'64_1','65_1','66_1','60_1',publictransport.ovinfobus,publictransport.ovinfotrein]
columns[9]['width'] = 5;

//TV GIDS
columns[10] = {}
columns[10]['blocks'] = [tvguide.dutch,'news_tv'];
columns[10]['width'] = 10;

//Weer
columns[11] = {}
columns[11]['blocks'] = [frames.weer];
columns[11]['width'] = 10;

//sonarr
columns[12] = {}
columns[12]['blocks'] = ['sonarr'];
columns[12]['width'] = 10;

var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 1440;
screens['default']['maxheight'] = 900;

screens['default'][1] = {}
screens['default'][1]['background'] = 'E7P_3737.jpg';
screens['default'][1]['background_morning'] = 'bg_morning.jpg';
screens['default'][1]['background_noon'] = 'bg_noon.jpg';
screens['default'][1]['background_afternoon'] = 'bg_afternoon.jpg';
screens['default'][1]['background_night'] = 'E7P_3737.jpg';
screens['default'][1]['columns'] = [1,2]


/*weer*/
screens['default'][2] = {}
screens['default'][2]['background'] = 'bg1.jpg';
screens['default'][2]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][2]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][2]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][2]['background_night'] = 'E7P_3737.jpg';
screens['default'][2]['columns'] = [1,4]

/*verlichting*/
screens['default'][3] = {}
screens['default'][3]['background'] = 'bg1.jpg';
screens['default'][3]['background_morning'] = 'bg_morning.jpg';
screens['default'][3]['background_noon'] = 'bg_noon.jpg';
screens['default'][3]['background_afternoon'] = 'bg_afternoon.jpg';
screens['default'][3]['background_night'] = 'E7P_3737.jpg';
screens['default'][3]['columns'] = [1,5]

/*webcam*/
screens['default'][4] = {}
screens['default'][4]['background'] = 'bg1.jpg';
screens['default'][4]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][4]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][4]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][4]['background_night'] = 'bg_night_winter.jpg';
screens['default'][4]['columns'] = [1,7]

/*weer*/
screens['default'][5] = {}
screens['default'][5]['background'] = 'bg1.jpg';
screens['default'][5]['background_morning'] = 'bg_morning_winter.jpg';
screens['default'][5]['background_noon'] = 'bg_noon_winter.jpg';
screens['default'][5]['background_afternoon'] = 'bg_afternoon_winter.jpg';
screens['default'][5]['background_night'] = 'E7P_3737.jpg';
screens['default'][5]['columns'] = [1,6]
I only want the buttons.xxx ie buttons.weer buttons.webcam to change height they wil be located on the frontpage
1x Raspberry PI 3 With Domoticz V.3.7318
1X RFXtrx433 USB 433.92MHz
1X Synology DS213j Nas
Toon by Eneco including Toon Zon
several KAKU switches and dimmers
Mysensors WIFI Gateway including meters, switches en humidity sensors
Wifi Dimmers (home made)

User avatar
HansieNL
Posts: 422
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - General Discussions

Post by HansieNL » Friday 07 September 2018 0:36

@bierlaagh :
First you have to look up what the elements are for the buttons (You can use developers tools Ctrl-Shift-I and select elements in Chrome). Then you have to add extra code to custom.css. There are some examples at the Wiki https://www.domoticz.com/wiki/Dashticz_V2_-_CSS
I use one to auto resize for Buien Radar block.
/* Buien Radar */
.block_345 {
height: 100% !important;
}
Blah blah blah

User avatar
bierlaagh
Posts: 45
Joined: Friday 14 March 2014 17:15
Target OS: Raspberry Pi
Domoticz version: 4.9984
Contact:

Re: Dashticz - General Discussions

Post by bierlaagh » Friday 07 September 2018 9:52

@HansieNL tanks for the reply.

i've looked at the wiki and seen the cunsom.css

but i still have a challenge (or maybe I don't understand it well enough) :?:

but when I look at inspect element (I use safari but the outcome should be the same)
is see no Blocks

inspect element:
Spoiler: show
<div class="col-xs-4 hover transbg buttons-UNKNOWN" data-id="buttons.UNKNOWN" onclick="toSlide(2)"><div class="col-xs-4 col-icon"><img class="buttonimg" src="img/Light-on_mirror.png"></div><div class="col-xs-8 col-data"><strong class="title">Verlichting</strong><br><span class="state"></span></div></div>
is it because of the way the page is build?

column 2 only show buttons with are defined in buttons.[buttonname]

config.js var buttons
Spoiler: show
var buttons = {}

buttons.hoofdmenu = {width:12, image: 'img/hoofdmenu_mirror.png', title: 'Hoofdmenu' ,slide:0 }
buttons.trein = {width:4, image: 'img/trein.png', title: 'Trein',slide: 2}
buttons.verkeer = {width:4, image: 'img/verkeer.png', title: 'Verkeer' ,slide:3 }
buttons.verlichting = {width:4, image: 'img/Light-on_mirror.png', title: 'Verlichting',slide: 3}
buttons.temperatuur = {width:4, height:99,image: 'img/temp_mirror.png', title: 'Temperatuur' ,slide:5 }
buttons.webcam = {width:4, image: 'img/webcam.jpg', title: 'Webcam',slide: 4}
buttons.kalender = {width:4, image: 'img/calendar.jpg', title: 'Kalender' ,slide:7 }
buttons.tvgids = {width:4, image: '', title: 'TV Gids',slide: 8}
buttons.weer = {width:4, image: 'img/weer_mirror.png', title: 'Weer' ,slide:2 }

columns
Spoiler: show
//Buttons naar screens
columns[2] = {}
columns[2]['blocks'] = ['currentweather_big','blocktitle_5',buttons.verlichting, buttons.trein, buttons.verkeer, buttons.temperatuur, buttons.webcam, buttons.kalender, buttons.tvgids, buttons.weer, buttons.webcam]
columns[2]['width'] = 10;
1x Raspberry PI 3 With Domoticz V.3.7318
1X RFXtrx433 USB 433.92MHz
1X Synology DS213j Nas
Toon by Eneco including Toon Zon
several KAKU switches and dimmers
Mysensors WIFI Gateway including meters, switches en humidity sensors
Wifi Dimmers (home made)

Prutsium
Posts: 57
Joined: Monday 18 June 2018 11:31
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Germany / Netherlands
Contact:

Re: Dashticz - General Discussions

Post by Prutsium » Friday 07 September 2018 10:55

When i want to show for example 2 webcams or 2 remote images what should i do in that case?
Did not see any tips in the Wiki.

User avatar
bierlaagh
Posts: 45
Joined: Friday 14 March 2014 17:15
Target OS: Raspberry Pi
Domoticz version: 4.9984
Contact:

Re: Dashticz - General Discussions

Post by bierlaagh » Friday 07 September 2018 11:12

Prutsium wrote:
Friday 07 September 2018 10:55
When i want to show for example 2 webcams or 2 remote images what should i do in that case?
Did not see any tips in the Wiki.
you could create a buttons.webcam1 and buttons.webcam2 and put those in your column
take a look at @Corbin example

http://www.domoticz.com/forum/viewtopic ... 40#p131610
1x Raspberry PI 3 With Domoticz V.3.7318
1X RFXtrx433 USB 433.92MHz
1X Synology DS213j Nas
Toon by Eneco including Toon Zon
several KAKU switches and dimmers
Mysensors WIFI Gateway including meters, switches en humidity sensors
Wifi Dimmers (home made)

Prutsium
Posts: 57
Joined: Monday 18 June 2018 11:31
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Germany / Netherlands
Contact:

Re: Dashticz - General Discussions

Post by Prutsium » Friday 07 September 2018 12:04

bierlaagh wrote:
Friday 07 September 2018 11:12
Prutsium wrote:
Friday 07 September 2018 10:55
When i want to show for example 2 webcams or 2 remote images what should i do in that case?
Did not see any tips in the Wiki.
you could create a buttons.webcam1 and buttons.webcam2 and put those in your column
take a look at @Corbin example

http://www.domoticz.com/forum/viewtopic ... 40#p131610
Superb that did the trick!

Thanks!

User avatar
HansieNL
Posts: 422
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - General Discussions

Post by HansieNL » Friday 07 September 2018 13:27

@bierlaagh :
You can set the class of a button with the key. For example:
buttons.hoofdmenu = {key: 'hoofdmenu', width:12, image: 'img/hoofdmenu_mirror.png', title: 'Hoofdmenu' ,slide:0 }
and then you the UNKNOWN should have the value buttons-hoofdmenu.
Blah blah blah

User avatar
bierlaagh
Posts: 45
Joined: Friday 14 March 2014 17:15
Target OS: Raspberry Pi
Domoticz version: 4.9984
Contact:

Re: Dashticz - General Discussions

Post by bierlaagh » Friday 07 September 2018 15:26

HansieNL wrote:
Friday 07 September 2018 13:27
@bierlaagh :
You can set the class of a button with the key. For example:
buttons.hoofdmenu = {key: 'hoofdmenu', width:12, image: 'img/hoofdmenu_mirror.png', title: 'Hoofdmenu' ,slide:0 }
and then you the UNKNOWN should have the value buttons-hoofdmenu.
ok its now official....I still have a lot to learn.
when I create a key (ie weer)

like this:
Spoiler: show
buttons.weer = {key: 'weer', width:4, image: 'img/weer_mirror.png', title: 'Weer' ,slide:2 }
and I see inspect element:
Spoiler: show
<div class="col-xs-4 hover transbg menu buttons-weer" data-id="buttons.weer" onclick="toSlide(1)"></div>
what do I put in my custom.css ?
Spoiler: show
.block_weer {
height: 200% !important;
}

.weer {
height: 200% !important;
}
non of these work...
1x Raspberry PI 3 With Domoticz V.3.7318
1X RFXtrx433 USB 433.92MHz
1X Synology DS213j Nas
Toon by Eneco including Toon Zon
several KAKU switches and dimmers
Mysensors WIFI Gateway including meters, switches en humidity sensors
Wifi Dimmers (home made)

User avatar
HansieNL
Posts: 422
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - General Discussions

Post by HansieNL » Friday 07 September 2018 18:30

@bierlaagh : Me too still have a lot to learn ;-)
You have to use the class shown in the developers tools. That's in your case buttons-weer.
So try: .buttons-weer
https://www.w3schools.com/ I think is a good place to start to learn HTML and CSS.
Blah blah blah

amauryverschooren
Posts: 8
Joined: Friday 31 August 2018 19:16
Target OS: Linux
Domoticz version:
Contact:

Re: Dashticz - General Discussions

Post by amauryverschooren » Friday 07 September 2018 18:51

hello, i want to get a block with new updates from tweakers but can't get it to work. what am i doing wrong?

Code: Select all

var config = {}
config['language'] = 'nl_NL'; //or: en_US, de_DE, fr_FR, hu_HU, it_IT, pt_PT, sv_SE
config['domoticz_ip'] = 'http://192.168.0.185:8080';
config['app_title'] = 'Dashboard';
config['domoticz_refresh'] = '0.1';
config['dashticz_refresh'] = '60';
config['standby_after'] = 0;
config[''] = 0;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '10';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = 0;
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = 'XXX';
config['gm_zoomlevel'] = '8';
config['gm_latitude'] = 'XXX';
config['gm_longitude'] = 'XXX';
config['wu_api'] = '40e147012dd3f272';
config['wu_city'] = 'Rapenberg';
config['wu_name'] = 'in Bazel';
config['wu_country'] = 'BE';
config['idx_moonpicture'] = 0;
config['switch_horizon'] = 0;
config['host_nzbget'] = 0;
config['spot_clientid'] = 'xxxxxx';
config['garbage_width'] = '6';
config['selector_instead_of_buttons'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 1;
config['last_update'] = 0;
config['hide_topbar'] = 0;
config['hide_seconds'] = 1;
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['garbage_company'] = 'afhaalkalender';
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = 'xxxxx';
config['garbage_street'] = 'xxxxx';
config['garbage_housenumber'] = 'xxxx';
config['garbage_maxitems'] = '5';
config['garbage_width'] = '6';
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: '#375b23', name: 'GFT', icon: 'img/garbage/kliko_green.png'},
    pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
    rest: {kliko: 'grey', code: '#5e5d5c', name: 'Restafval', icon: 'img/garbage/kliko_grey.png'},
    papier: {kliko: 'blue', code: '#153477', 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'},

};

var calendars = {}
calendars.business = { maxitems: 5, url: 'https://calendar.google.com/calendar/', icalurl: 'https://calendar.google.com/calendar/' }
calendars.private = { maxitems: 5, icalurl: 'xxxxxxx' }

// Online Radio Stream Plugin, Note: you must enable plugin in column section 'streamplayer'
var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
{"track":2,"name":"Radio 538","file":"http://vip-icecast.538.lw.triple-it.nl/RADIO538_MP3"},
{"track":3,"name":"Arrow Classic Rock","file":"http://www.garnierstreamingmedia.com/as ... stream=205"},
{"track":4,"name":"Radio Veronica","file":"http://live.icecast.kpnstreaming.nl/sky ... GSTR09.mp3"},
{"track":5,"name":"Q-music","file":"http://live.icecast.kpnstreaming.nl/omr ... bantHq.m3u"},
];

var buttons = {}
buttons.webcam1 = { width:6, isimage:true, refresh:5000, image: 'http://sensored/image.jpg', url: 'http://sensored/image.jpg' }
buttons.webcam2 = { width:6, isimage:true, refresh:5000, image: 'sensored' }
buttons.buienradar = {width:4, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=sensored', url: 'http://www.weeronline.nl/Europa/Nederland/Dordrecht/sensored'}
buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}
buttons.nzbget = {width:12, icon: 'fa-download', title: 'NZBget', url: 'http://sensored:6789'}
buttons.log = {key:'log', width:12, icon:'fa-microchip', title: 'Domoticz Log', log:true, level: 2}


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

var blocks = {}

//Groepen & Scenes


//Schakelaars





//Overige


blocks[6] = {}
blocks[6]['width'] = 6;
blocks[6]['title'] = 'Temp. Kamer Amaury:'
blocks[6]['switch'] = true;

blocks[7] = {}
blocks[7]['width'] = 6;
blocks[7]['title'] = 'Temp. Kamer Valerie:'
blocks[7]['switch'] = true;

blocks[8] = {}
blocks[8]['width'] = 6;
blocks[8]['title'] = 'Temp. Woonkamer:'
blocks[8]['switch'] = true;


//Titels
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Temperatuur sensors';

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

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

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

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

blocks['news_2'] = {}
blocks['news_2']['feed'] = 'http://feeds.feedburner.com/tweakers/nieuws';





// Kolommen
var columns = {}

columns[1] = {}
columns[1]['blocks'] = ['clock','sunrise', 'currentweather_big']
columns[1]['width'] = 2;

columns[2] = {}
columns[2]['blocks'] = ['news', 'blocktitle_1','6','7','8', calendars.private, 'news_2']
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = ['blocktitle_3','1','2','5','blocktitle_4','weather']
columns[3]['width'] = 5;

columns[4] = {}
columns[4]['blocks'] = ['currentweather_big']
columns[4]['width'] = 6;

columns[5] = {}
columns[5]['blocks'] = [buttons.buienradar, buttons.radio, buttons.nunl]
columns[5]['width'] = 6;








//if you want to use multiple screens, use the code below:
var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg9.jpg';
screens[1]['background_night'] = 'bg12.jpg';
screens[1]['columns'] = [1,2,3]



User avatar
HansieNL
Posts: 422
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - General Discussions

Post by HansieNL » Friday 07 September 2018 19:13

@amauryverschooren :

Code: Select all

blocks['news_2']['feed'] = 'https://cors-anywhere.herokuapp.com/http://feeds.feedburner.com/tweakers/nieuws';
TIP: Don't post personal keys on the forum config['wu_api'] =
Blah blah blah

User avatar
bierlaagh
Posts: 45
Joined: Friday 14 March 2014 17:15
Target OS: Raspberry Pi
Domoticz version: 4.9984
Contact:

Re: Dashticz - General Discussions

Post by bierlaagh » Friday 07 September 2018 21:01

HansieNL wrote:
Friday 07 September 2018 18:30
@bierlaagh : Me too still have a lot to learn ;-)
You have to use the class shown in the developers tools. That's in your case buttons-weer.
So try: .buttons-weer
https://www.w3schools.com/ I think is a good place to start to learn HTML and CSS.
well it took a while, finally found the problem. :geek:

using
Spoiler: show
.buttons-weer {
height: 200% !important;
}
doesn't work , not figured out why

using
Spoiler: show
.buttons-weer {
height: 120px !important;
}
does work. (was 65px)

only question remaining is why doesn't percentage work and px do?
1x Raspberry PI 3 With Domoticz V.3.7318
1X RFXtrx433 USB 433.92MHz
1X Synology DS213j Nas
Toon by Eneco including Toon Zon
several KAKU switches and dimmers
Mysensors WIFI Gateway including meters, switches en humidity sensors
Wifi Dimmers (home made)

User avatar
HansieNL
Posts: 422
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Dashticz - General Discussions

Post by HansieNL » Friday 07 September 2018 22:08

@bierlaagh : CSS can be rather complex. It depends on what classes are used , what order and where they are in a CSS file. You also can have more then one CSS file.
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style (inside a specific HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or a browser default value.
Blah blah blah

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest