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

[leonhannink]

without the slash in the name

[Lokonli]

without the slash in the name

ok, good. thanks

[HansieNL]

My final dashboard

Schermafbeelding.jpg (359.57 KiB) Viewed 2167 times

[leonhannink]

Can anyone help me, buienradar has a forecast for just 1hour, can i change this to 12 hours?


Verzonden vanaf mijn iPad met Tapatalk

[HansieNL]

Can anyone help me, buienradar has a forecast for just 1hour, can i change this to 12 hours?


Verzonden vanaf mijn iPad met Tapatalk

You can check here what options buienradar is offering:
https://www.buienradar.nl/overbuienrad ... s-weerdata

[leonhannink]

Thanks, but how do i apply this in Dashticz?


Verzonden vanaf mijn iPad met Tapatalk

[HansieNL]

Thanks, but how do i apply this in Dashticz?


Verzonden vanaf mijn iPad met Tapatalk

As far as I know you have to create your own web page with the code from Buienradar and load it as an iframe in Dashticz.
How to load an iframe in Dashticz you can find here https://dashticz.readthedocs.io/en/bet ... rames.html

[leonhannink]

Oke Thanks, i Will try and post when it works


Verzonden vanaf mijn iPad met Tapatalk

[niekbruggeman]

As of this week i'm running the latest version of Dashticz version 3.1.2. Master.
I did a clean install in the /Dashticz directory. Without the _3.

Most of the dashboard is performing well except all graphs.
I created a new block according to the new graph-documentation
https://dashticz-v3.readthedocs.io/en/b ... dom-graphs

All of my graphs are staying red of color an ignoring all the properties in the "graphProperties : { }" section.

Anyone else experiencing the same issue ?
Some help will be much appreciated!

Code: Select all

blocks['graph_123'] = {
    title: 'Stroomverbruik',
    graph: 'bar',
    graphProperties : {
        gridTextColor : '#c3f6fe',
        barColors: ['#40e0d0'],
        ymax:'auto',  //set to 'auto' for auto scaling
		stacked:'true',
		resize:'true'
    }
}

[Lokonli]

As of this week i'm running the latest version of Dashticz version 3.1.2. Master.
I did a clean install in the /Dashticz directory. Without the _3.

Most of the dashboard is performing well except all graphs.
I created a new block according to the new graph-documentation
https://dashticz-v3.readthedocs.io/en/b ... dom-graphs

All of my graphs are staying red of color an ignoring all the properties in the "graphProperties : { }" section.

Anyone else experiencing the same issue ?
Some help will be much appreciated!

Code: Select all

blocks['graph_123'] = {
    title: 'Stroomverbruik',
    graph: 'bar',
    graphProperties : {
        gridTextColor : '#c3f6fe',
        barColors: ['#40e0d0'],
        ymax:'auto',  //set to 'auto' for auto scaling
		stacked:'true',
		resize:'true'
    }
}

In 3.1.2 there is an update of the graph module. The configuration for the graph blocks changed as well.

I see you still use the old documentation. I will remove it. The new documentation can be found here:
https://dashticz.readthedocs.io/en/mast ... raphs.html

If you miss functionality in the new graph module, then leave a note here in the forum, and I'll have a look.

The latest beta is 3.2.0 and contains additional changes, The documentation link above is applicable to the master branch.

[EdwinK]

My final dashboard
Schermafbeelding.jpg

Nice, now care to share the codes?

[HansieNL]

My final dashboard
Schermafbeelding.jpg

Nice, now care to share the codes?

Here they are:
CONFIG.js

Spoiler: show

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://XXX.XXX.XXX.XXX:XXXX';
config['login_timeout'] = '60';
config['user_name'] = '';
config['pass_word'] = '';
config['app_title'] = 'Dashticz';
config['room_plan'] = '0';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'https://www.bndestem.nl/XXXXXXXXXX/rss.xml';
config['news_scroll_after'] = '12';
config['default_cors_url'] = '';
config['dashticz_php_path'] = './vendor/dashticz/';
config['standby_call_url'] = '';
config['standby_call_url_on_end'] = '';
config['theme'] = 'default';
config['background_image'] = 'img/bg14.jpg';
config['standby_after'] = '0';
config['start_page'] = '1';
config['enable_swiper'] = '2';
config['vertical_scroll'] = '2';
config['auto_swipe_back_to'] = '1';
config['auto_swipe_back_after'] = '0';
config['auto_slide_pages'] = '0';
config['slide_effect'] = 'slide';
config['standard_graph'] = 'day';
config['blink_color'] = '255,0,0,0.5';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = '';
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = 'xxxxxxxxxx';
config['gm_zoomlevel'] = '';
config['gm_latitude'] = 'xx.xxxxxx';
config['gm_longitude'] = 'xx.xxxxxx';
config['speak_lang'] = 'nl-NL';
config['wu_api'] = 'XXXXXXXXXX';
config['wu_city'] = 'XXXXXXXXXX';
config['wu_name'] = '';
config['wu_country'] = 'NL';
config['owm_api'] = 'XXXXXXXXXX';
config['owm_city'] = 'XXXXXXXXXX';
config['owm_name'] = 'XXXXXXXXXX';
config['owm_country'] = 'nl';
config['owm_lang'] = 'nl';
config['owm_cnt'] = '4';
config['idx_moonpicture'] = '';
config['longfonds_zipcode'] = 'XXXXXXXXXX';
config['longfonds_housenumber'] = 'XX';
config['switch_horizon'] = '';
config['host_nzbget'] = '';
config['spot_clientid'] = '';
config['sonarr_url'] = '';
config['sonarr_apikey'] = '';
config['sonarr_maxitems'] = '';
config['garbage_company'] = 'mijnafvalwijzer';
config['garbage_icalurl'] = '';
config['google_api_key'] = '';
config['garbage_calendar_id'] = '';
config['garbage_zipcode'] = 'XXXXXX';
config['garbage_street'] = '';
config['garbage_housenumber'] = 'XX';
config['garbage_housenumberadd'] = '';
config['garbage_maxitems'] = '3';
config['garbage_width'] = '12';
config['setpoint_min'] = '6';
config['setpoint_max'] = '30';
config['loginEnabled'] = 0;
config['disable_update_check'] = 1;
config['no_rgb'] = 1;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['disable_googleanalytics'] = 1;
config['last_update'] = 0;
config['hide_topbar'] = 0;
config['security_button_icons'] = 0;
config['edit_mode'] = 0;
config['hide_seconds'] = 1;
config['hide_seconds_stationclock'] = 0;
config['owm_days'] = 1;
config['owm_min'] = 1;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 1;
config['hide_mediaplayer'] = 0;
config['garbage_hideicon'] = 0;
config['garbage_icon_use_colors'] = 0;
config['garbage_use_colors'] = 0;
config['garbage_use_names'] = 1;
config['garbage_use_cors_prefix'] = 1;






	//Graph line colors and point size
	config['lineColors'] = ['#EE0000', '#00EE00', '#0000EE'];
	config['pointSize'] = ['0'];

	//Garbage
	config['garbage'] = {
        	gft: {kliko: 'green', code: '#375b23', name: 'GFT', icon: 'img/garbage/kliko_green.png'},
        	rest: {kliko: 'grey', code: '#5e5d5c', name: 'Rest', icon: 'img/garbage/kliko_grey.png'},
        	papier: {kliko: 'blue', code: '#153477', name: 'Papier', icon: 'img/garbage/kliko_blue.png'},
				};

var _STREAMPLAYER_TRACKS     = [
    {"track":1,"name":"NPO Radio 1","file":"http://icecast.omroep.nl/radio1-bb-mp3"},
    {"track":2,"name":"Omroep Brabant","file":"http://streaming.omroepbrabant.nl/mp3hq"},
    {"track":3,"name":"Studio Brussel","file":"http://icecast.vrtcdn.be/stubru-high.mp3"},
		];

var calendars = {}
    calendars.f1 = {
		maxitems: 5,
		image: '../custom/img/f1.png',
		url: 'https://www.f1calendar.com/#!/timezone/Europe-Amsterdam',
		icalurl: 'http://ip:port/kalenders/f1-calendar_gp_2019.ics'
		}

var buttons = {}
    buttons.buienradar = {key: 'buienradar', width:12, isimage:true, refreshimage:60000, btnimage: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256', url:'https://gadgets.buienradar.nl/gadget/zoommap/?lat=XX.XXXXX&lng=X.XXX&overname=2&zoom=13&naam=XXXXXX&size=3&voor=1', framewidth:580, frameheight: 520}
    buttons.log = {key:'log', width:12, image: '../custom/img/dz.png', title: 'Domoticz Log', log:true, level: 1}
    buttons.tvgids = {key: 'tvgids', width:4, image: '../custom/img/tv.png', title: 'TV Gids', url: 'https://www.tvgids24.nl/gadget'}
    buttons.bndestem = {key: 'bndestem', width:4, image: '../custom/img/bndestem.png',  title: 'Nieuws', newwindow:true, url: 'https://www.XXXX.nl/XXXXX'}
    buttons.p2000 = {key: 'p2000', width:4, image: '../custom/img/siren.png', title: 'P2000', newwindow:true, url: 'https://monitor.p2000alarm.nl'}
    buttons.fr24 = {key: 'fr24', width:4, image: '../custom/img/fr24.png', title: 'FR24', newwindow:true, url: 'https://flightradar24.com'}
    buttons.books = {key: 'books', width:12, image: '../custom/img/book.png', title: 'Boeken', url: '../clz/book.html'}
    buttons.movies = {key: 'movies', width:12, image: '../custom/img/film.png', title: 'Films', url: '../clz/movie.html'}
    buttons.music = {key: 'music', width:12, image: '../custom/img/music.png', title: 'Muziek', url: '../clz/music.html'}
    buttons.ipcam =  {key: 'ipcam', width:4, image: '../custom/img/camera.png', title: 'Camera', url: '../ipcam'}

var frames = {}
	frames.volumioplayer = { width:12, height:720, refreshiframe: 1000000, frameurl: "http://XXX.XXX.XXX.XXX/playback"}

var publictransport = {}
    publictransport.ovinfobus= { key: 'ovinfobus', show_via: true, station: 'XXXXXXXXXX', show_lastupdate:false, provider: '9292-bus', icon: 'fas fa-bus-alt', results: 7 };
    publictransport.ovinfotrains= { key: 'ovinfotrains', station: 'XXXXXXXXXX', show_lastupdate:false, provider: '9292-train', icon: 'fas fa-train', results: 7 };

var trafficinfo = {}
	trafficinfo.anwba58 = { key:'anwba58', provider: 'anwb', road:'A58', trafficJams: false, roadWorks: true, radars: false, show_lastupdate:false, icon: 'fas fa-car', width:12, results: 10 };

var maps = {}
    maps.thuis = { height: 300, link:'http://www.ovzoeker.nl', width:12, latitude: 51.432103, longitude: 4.314068, zoom:10 }

var tvguide = {}
    tvguide.npo = { key:'tvnpo', image: '../custom/img/tv.png', width:12, channels: [1,2,3], maxitems: 5 }
    tvguide.other = { key:'tvother', image: '../custom/img/tv.png', width:12, channels: [29,18], maxitems: 4 }


var blocks = {}
blocks[6] = { //Thuis
	textOff: 'AFWEZIG',
	textOn: 'AANWEZIG',
	icon: 'fas fa-home'
}
blocks[7] = { //Slapen
	textOff: 'WAKKER',
	textOn: 'ZZZ',
	image: '../custom/img/bed.png'
	/* imageOff: '../custom/img/awake.png',
	imageOn: '../custom/img/sleep.png' */
}
blocks[124] = { //Lamp Eettafel
	hide_data: true, width: 6 }
blocks[126] = { //Lamp Slaapkamer
	hide_data: true, width: 6 }
blocks[147] = { //Homey's Mike
    title: 'Mike',
	textOff: 'DICHT',
	textOn: 'OPEN',
	imageOff: '../custom/img/mic_off.png',
	imageOn: '../custom/img/mic_on.png',
    confirmation: 1
    //flash: 5000
}
blocks[149] = {} //Poetsen
blocks[236] = { //Lamp Salontafel
	hide_data: true, width: 6 }
blocks[249] = {} //Homey (alive)
blocks[252] = { //Lamp Badkamer
	hide_data: true, width: 6 }
blocks[258] = {} //Kodi
blocks['274_1'] = {} //Energieverbruik (P1 USB)
    blocks['274_1']['title'] = 'Nu';
    blocks['274_1']['switch'] = true;
blocks['274_2'] = {} //Energie vandaag (P1 USB)
    blocks['274_2']['title'] = 'Stroom';
    blocks['274_2']['switch'] = true;
blocks[276] = {} //Internet (alive)
blocks['320_1'] = { //Gas vandaag (P1 USB)
    title: 'Gas',
    switch: true,
    icon: 'fas fa-burn'
    //image: '../custom/img/gas.png'
}
blocks[330] = {} //Afvalwijzer (text)
blocks[344] = {} //Open Weather Map (hidden)
blocks[345] = { //Buienradar (text)
    title: 'Buienradar',
    switch: true,
    width: 12,
    image: '../custom/img/umbrella.png'
}
blocks[346] = {} //RegenData (rain sensor)
blocks[347] = {} //Paraplu (switch)
blocks[350] = { //Notebook PC
    title: 'Notebook',
	textOff: 'OFFLINE',
	textOn: 'ONLINE',
	image: '../custom/img/laptop.png'
	//icon: 'fas fa-laptop'
}
blocks[351] = { //Desktop PC
    title: 'Desktop',
	textOff: 'OFFLINE',
	textOn: 'ONLINE',
	image: '../custom/img/desktop.png'
	//icon: 'fas fa-desktop'
}
blocks[352] = { //Mede8er
	/* textOff: 'OFFLINE',
	textOn: 'ONLINE', */
	//imageOff: '../custom/img/toggle_off.png',
	//imageOn: '../custom/img/toggle_on.png'
	image: '../custom/img/clapper_board.png'
}
blocks[354] = {} //Buitentemperatuur (OWM)
	blocks[354]['switch'] = true;
blocks[391] = { //Lamp Washok
    hide_data: true, width: 6 }
blocks[392] = {} //Flightradar24 (alive)
blocks[400] = { //Schemerlamp
    hide_data: true, width: 6 }
blocks[401] = {} //Dummie
blocks[413] = {} //Kodi System Alive Check
blocks[417] = { //Lamp Gang
    hide_data: true, width: 6 }
blocks[428] = {} //Beweging Keuken
blocks[431] = { //Lamp Keuken
    hide_data: true, width: 6 }
blocks[435] = {} //Camera
	blocks[435]['image'] = '../custom/img/camera.png';
blocks[437] = {} //Binnentemperatuur (Toon)
	blocks[437]['switch'] = true;
	blocks[437]['title'] = 'Binnen';
blocks[438] = { //Toons (Selector Switch for Toon Program State)
    hide_title: true,
    width: 8,
    image: '../custom/img/toon.png'
}
blocks['441_2'] = {} //Thermostaat (Toon Setpoint)
    //blocks[441]['hide_title'] = true; // NOT AN OPTION
    blocks['441_2']['image'] = '../custom/img/toon.png';
blocks[442] = {} //TV
    blocks[442]['image'] = '../custom/img/tv.png';
blocks[443] = {} //Tuner
blocks[444] = {} //Volumio
    blocks[444]['image'] = 'volumio.png';
    //blocks[444]['image'] = '../custom/img/jukebox.png';
    //blocks[443]['confirmation'] = 1;

blocks[326] = { protected: true, width: 4 } //Placeholder

blocks['v3'] = { //Uptime
    title: 'Uptime',
	image: '../custom/img/uptime.png',
	switch: true,
	width: 12
}

blocks['longfonds'] = {
    width: 12,
    switch: true,
    icon: '',
    image: '../custom/img/lungs.png',
}

blocks['news'] = {
    image:'../custom/img/bndestem.png'
}

blocks['traffic'] = {
	//image:'../custom/img/car.png'
    icon: 'fas fa-car'
}

blocks['train'] = {
    //image:'../custom/img/train.png'
    icon: 'fas fa-train'
}

blocks['streamplayer'] = {
    image: '../custom/img/radio.png'
}

blocks['news_nualg'] = {
    feed: 'https://www.nu.nl/rss/algemeen',
    maxheight: 400,
    title: 'Nu.nl' //optional
    //icon: 'fas fa-icon'
}


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

//--- Topbar ---
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','settings']

//--- Screen 1 ---
columns[1] = {}
    columns[1]['blocks'] = [6,7,147,'441_2',438,236,400,124,431,126,252,417,391,442,352,435,350,351]
    columns[1]['width'] = 5;

columns[2] = {}
    columns[2]['blocks'] = ['weather_owm',437,354,'320_1','274_1','274_2',444,258,'streamplayer',buttons.bndestem,buttons.p2000,buttons.fr24,buttons.ipcam,buttons.tvgids]
    columns[2]['width'] = 5;

columns[3] = {}
    columns[3]['blocks'] = ['sunrise',buttons.buienradar,345,'longfonds','garbage','v3']
    columns[3]['width'] = 2;

//--- Screen 2 ---
columns[4] = {}
    columns[4]['blocks'] = ['news',calendars.f1,tvguide.npo,tvguide.other]
    columns[4]['width'] = 5;

columns[5] = {}
    columns[5]['blocks'] = ['traffic',trafficinfo.anwba58,publictransport.ovinfobus,'train',publictransport.ovinfotrains]
    columns[5]['width'] = 5;

columns[6] = {}
    columns[6]['blocks'] = ['stationclock',buttons.homepage,buttons.books,buttons.movies,buttons.music]
    columns[6]['width'] = 2;

columns[7] = {}
    columns[7]['blocks'] = [frames.volumioplayer]
    columns[7]['width'] = 6;

columns[9] = {}
    columns[9]['blocks'] = [frames.homepage]
    columns[9]['width'] = 6;


//--- Standby Screen ---
var columns_standby = {}
columns_standby[1] = {}
    columns_standby[1]['blocks'] = ['clock']
    columns_standby[1]['width'] = 12;

//--- Multiple screens ---
var screens = {}

screens[1] = {}
    screens[1]['background'] = 'bg14.jpg';
    screens[1]['columns'] = [1,2,3]

screens[2] = {}
    screens[2]['background'] = 'bg14.jpg';
    screens[2]['columns'] = [4,5,6]

screens[3] = {}
    screens[3]['background'] = 'bg14.jpg';
    screens[3]['columns'] = [7]

custom.js:

Spoiler: show

Code: Select all

//add custom javascript in here

// function afterGetDevices(){
// }

function getExtendedBlockTypes(blocktypes){
	//blocktypes.Type['Lighting 2'] = { icon: 'fa fa-lightbulb-o', title: '<Name>', value: 'ds' }
	return blocktypes;
}

$('<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Orbitron" />').appendTo('head');


 //Lamp Keuken
function getStatus_431(idx,value,device){
  if(device['Data']=="On"){
    $('div.block_431').addClass('slider-on');
  }
  else {
    $('div.block_431').removeClass('slider-on');
  }
}

 //Lamp Gang
function getStatus_417(idx,value,device){
  if(device['Data']!="Off"){
    $('div.block_417').addClass('slider-on');
  }
  else {
    $('div.block_417').removeClass('slider-on');
  }
}

 //Lamp Eettafel
function getStatus_124(idx,value,device){
  if(device['Data']!="Off"){
    $('div.block_124').addClass('slider-on');
  }
  else {
    $('div.block_124').removeClass('slider-on');
  }
}

//Lamp Slaapkamer
function getStatus_126(idx,value,device){
  if(device['Data']!="Off"){
    $('div.block_126').addClass('slider-on');
  }
  else {
    $('div.block_126').removeClass('slider-on');
  }
}

//Lamp Salontafel
function getStatus_236(idx,value,device){
  if(device['Data']!="Off"){
    $('div.block_236').addClass('slider-on');
  }
  else {
    $('div.block_236').removeClass('slider-on');
  }
}

//Lamp Badkamer
function getStatus_252(idx,value,device){
  if(device['Data']!="Off"){
    $('div.block_252').addClass('slider-on');
  }
  else {
    $('div.block_252').removeClass('slider-on');
  }
}

//Schemerlamp
function getStatus_400(idx,value,device){
  if(device['Data']!="Off"){
    $('div.block_400').addClass('slider-on');
  }
  else {
    $('div.block_400').removeClass('slider-on');
  }
}

//Washok
function getStatus_391(idx,value,device){
  if(device['Data']!="Off"){
    $('div.block_391').addClass('slider-on');
  }
  else {
    $('div.block_391').removeClass('slider-on');
  }
}


// Buienradar
/* function getStatus_345(idx,value,device){
	if (device.Data == 'Voorlopig droog') {
			blocks[345]['image'] = '../custom/img/rain-off.png'
	 }
	 else {
		blocks[345]['image'] = '../custom/img/rain-on.png'
	 }
 } */


function afterGetDevices(){
  // Buienradar
  if (alldevices[345].Data == 'Voorlopig droog') {
    $('.block_345 .col-icon').addClass('icon-off');
    $('.block_345 .col-data').addClass('data-off');
  }
  else {
    $('.block_345 .col-icon').removeClass('icon-off');
    $('.block_345 .col-data').removeClass('data-off');
  }
  // Ping CoreELEC device [413] (192.168.2.15) & Kodi Media Server [258]
  if (alldevices[413].Data == 'Off') {
    $('.block_258 .col-icon').addClass('icon-off');
    $('.block_258 .col-data').addClass('data-off');
  }
  else {
    $('.block_258 .col-icon').removeClass('icon-off');
    $('.block_258 .col-data').removeClass('data-off');
  }
  // Volumio
  if (alldevices[444].Data == 'Off') {
    $('.block_444 .col-data').addClass('data-off');
  }
  else {
    $('.block_444 .col-data').removeClass('data-off');
  }
  //Toon Setpoint [441] & Toon Selector [438]
  if (alldevices[441].Data == '6.0') {
    $('.block_441_2 .col-icon').addClass('icon-off');
    $('.block_441_2 .col-data').addClass('data-off');
    $('.block_438 .col-icon').addClass('icon-off');
  }
  else {
    $('.block_441_2 .col-icon').removeClass('icon-off');
    $('.block_441_2 .col-data').removeClass('data-off');
    $('.block_438 .col-icon').removeClass('icon-off');
  }
  // Thuis
  if (alldevices[6].Data == 'Off') {
    $('.block_6 .col-data').addClass('data-off');
  }
  else {
    $('.block_6 .col-data').removeClass('data-off');
  }
  // Mike
  if (alldevices[147].Data == 'Off') {
    $('.block_147 .col-data').addClass('data-off');
  }
  else {
    $('.block_147 .col-data').removeClass('data-off');
  }
  // Slapen
  if (alldevices[7].Data == 'Off') {
    $('.block_7 .col-data').addClass('data-off');
  }
  else {
    $('.block_7 .col-data').removeClass('data-off');
  }
  // Notebook PC
  if (alldevices[350].Data == 'Off') {
    $('.block_350 .col-data').addClass('data-off');
  }
  else {
    $('.block_350 .col-data').removeClass('data-off');
  }
  // Desktop PC
  if (alldevices[351].Data == 'Off') {
    $('.block_351 .col-data').addClass('data-off');
  }
  else {
    $('.block_351 .col-data').removeClass('data-off');
  }
  // Mede8er
  if (alldevices[352].Data == 'Off') {
    $('.block_352 .col-data').addClass('data-off');
  }
  else {
    $('.block_352 .col-data').removeClass('data-off');
  }
  // TV
  if (alldevices[442].Data == 'Off') {
    $('.block_442 .col-data').addClass('data-off');
  }
  else {
    $('.block_442 .col-data').removeClass('data-off');
  }
  // Camera switch [435] & Camera button [ipcam]
  if (alldevices[435].Data == 'Off') {
    $('.block_435 .col-data').addClass('data-off');
	$('[data-id="ipcam"] .col-icon').addClass('icon-off');
	$('[data-id="ipcam"] .dt_content').addClass('data-off');
  }
  else {
    $('.block_435 .col-data').removeClass('data-off');
	$('[data-id="ipcam"] .col-icon').removeClass('icon-off');
	$('[data-id="ipcam"] .dt_content').removeClass('data-off');
  }

}

Custom.css:

Spoiler: show

Code: Select all

/*
CUSTOM CSS FILE
*/

.transbg[class*="col-xs"] {
    border-width: 3px !important;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.7);
}
/* .transbg[class*="col-xs"].hover:hover {
    background-color: rgba(128,128,128,0.3);
} */


/* Placeholder */
/* .block_326 {
    background-color: transparent !important;
    color: transparent !important;
} */ 


/* Device blocks */
div.mh {
	height:75px;
}
@media (max-width: 975px) {
	div.mh {
		height:67px;
	}
}

/* Dimmer Slider and Handle - Off State */
[class*="block_"] .ui-slider-horizontal {
    background-color: rgba(255,255,255,0.4);
    border-color: transparent;
    height: 1px;
    top: 5px;
}
[class*="block_"] .ui-slider-handle {
    background-color: rgba(108,108,108,1.0);
    border-radius: 50%;
    border-color: transparent;
    height: 15px;
    width: 15px;
}
.block_431 .title, 
.block_417 .title, 
.block_124 .title, 
.block_126 .title,
.block_236 .title, 
.block_252 .title,
.block_391 .title,
.block_400 .title {
    color: rgba(108,108,108,1.0);
}

/* Dimmer Slider and Handle - On State */
.slider-on [class*="ui-slider-h"] {
    background-color: rgba(255,255,255,1.0);
    border-color: transparent;
}
.slider-on .title {
    color: rgba(255,255,255,1.0);
}


/* Swiper Pagination Bullet */
.swiper-pagination-bullet {
    display: none !important;
}


/* Thermostaat Setpoint */
.block_441_2 .icon {
    width: 85% !important;
    height: auto; 
}
/* .block_441_2 .col-data {		
    font-family: 'Orbitron';
    font-size: 99% !important;
} */
.block_441_2 .state.stateheating {		
    display: none
}
.input-number {
    font-size: 22px !important;
    font-weight: bold;
}
@media (max-width: 975px) {
	.input-number {
		font-size: 18px !important;
		font-weight: bold;
	}
}


/* Thermostaat Selector */
.block_438 .icon {
    width: 85% !important;
    height: auto; 
}
.block_438 .btn-group {
    margin-top: -15px !important;
}
.block_438 .btn {
  color: #000000;
  background-color: rgba(108,108,108,1.0);
  border-color: #000000;
}
.block_438 .btn.active {
  color: #000000;
  background-color: rgba(255,255,255,0.9);
  border-color: #000000;
}
.block_438 .title {		
    font-size: 0px !important;
}


/* Buienradar image */
[data-id='buienradar'] img {
	border-radius: 10px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);	
}

/* Buienradar text */
.block_345 {
    height: 100% !important; 
}


/* Longfonds */
.longfonds .dt_title {
	font-size: 12px !important;
}
.longfonds .dt_state {
	font-size: 18px !important;
}

/* AfvalWijzer */
.block_330  {
    height: 100% !important; 
}
.trashcan {
	margin-left:0px !important;
}


/* Uptime */
.block_v3 {
    height: 100% !important; 
}


/* Camera */
.block_435 .icon {
    width: 90%;
}


/* Kodi */
.block_258 {
    height: 100% !important; 
}


/* Streamplayer */
div[data-id='streamplayer'] > div {
  opacity: 0.4 !important; 
}
div[data-id='streamplayer'].playing > div {
  opacity: 1.0 !important; 
}
.streamplayer .title {
	font-size: 125%;
	font-weight: bold;
}


/* Mike */
[data-id='147'].hover:hover {
    background-color: rgba(255,69,0,1.0) !important;
}


/* Buttons */
.button {
	min-height: 55px;
    padding-top: 10px !important;
}
.button .icon {
    width: 75% !important;
}
.button .dt_title {
	font-size: 125%;
}


/* Off State
.icon-off,
.data-off {
    opacity: 0.4 !important;
} */

[class*="-off"] {
    opacity: 0.4 !important;
}

[EdwinK]

Thanks. Going to play with it later

[ben53252642]

CSS code for an alternative version of the Venetian blinds Domoticz block:

My alternate version:

blinds1.JPG (22.75 KiB) Viewed 1759 times

Code: Select all

/* Living Room Blinds*/
.block_1553 .title {font-size: 18px}
.block_1553 .col-data .state {font-size: 12px}
.block_1553.transbg.col-xs-12 {height: 90px; overflow:hidden}
.block_1553 .col-button2 {width: 170px}
.block_1553 .btn.btn-number.plus {width: 70px; height: 100%; position: absolute; right: 100px}
.block_1553 .btn.btn-number.min {width: 70px; height: 100%; position: absolute; right: 30px; margin-top: -38px}
.block_1553 .btn.btn-number.stop {width: 88px; height: 30px; position: absolute; margin-right: -9px; padding-left: 15px; padding-top: 2px}
.fa-chevron-up:before {font-size: 70px}
.fa-chevron-down:before {font-size: 70px}

Screenshot of the original default version:

blindsoriginal.JPG (19.89 KiB) Viewed 1759 times

I'm sure someone else could probably do a lot better job on the CSS, I just guessed until I got it worked out for about 6 hours.

[EdwinK]

Nice

Guess i need to do some tweaking about the size

Screen Shot 2019-11-27 at 09.33.49.png (46.43 KiB) Viewed 1739 times

[mvdheide01]

Hi, I would like to display only the graph of my watermeter, coming from Domoticz. So just the one that displays the bars of the last 24 hours.

WatermeterDomoticz.png (89.29 KiB) Viewed 1696 times

How could I do that?
I am using Dashticz in my Magic mirror and want my kids to see who used the least water during the morning shower

[HansieNL]

Hi, I would like to display only the graph of my watermeter, coming from Domoticz. So just the one that displays the bars of the last 24 hours.

WatermeterDomoticz.png

How could I do that?
I am using Dashticz in my Magic mirror and want my kids to see who used the least water during the morning shower

You can use blocks['graph_43'] = ... where change 43 with your own Domoticz idx
For custom graph options in the beta version see: https://dashticz.readthedocs.io/en/bet ... tom-graphs

[mvdheide01]

Hi Hansie, Thanks for the reply.
When I use it as you describe, I get the Dashticz standard, not just the Domoticz one.
Maybe you can point me where to find the instructions for using the beta, then I will try that.
That might also just solve the issue with showing liters and get the correct view.

Hi, I would like to display only the graph of my watermeter, coming from Domoticz. So just the one that displays the bars of the last 24 hours.

WatermeterDomoticz.png

How could I do that?
I am using Dashticz in my Magic mirror and want my kids to see who used the least water during the morning shower

You can use blocks['graph_43'] = ... where change 43 with your own Domoticz idx
For custom graph options in the beta version see: https://dashticz.readthedocs.io/en/bet ... tom-graphs

[mvdheide01]

Already found how to install the beta. First test is very promising:

Screenshot 2019-11-30_14-23-57-543.png (40.1 KiB) Viewed 3466 times

Hi Hansie, Thanks for the reply.
When I use it as you describe, I get the Dashticz standard, not just the Domoticz one.
Maybe you can point me where to find the instructions for using the beta, then I will try that.
That might also just solve the issue with showing liters and get the correct view.

Hi, I would like to display only the graph of my watermeter, coming from Domoticz. So just the one that displays the bars of the last 24 hours.

WatermeterDomoticz.png

How could I do that?
I am using Dashticz in my Magic mirror and want my kids to see who used the least water during the morning shower

You can use blocks['graph_43'] = ... where change 43 with your own Domoticz idx
For custom graph options in the beta version see: https://dashticz.readthedocs.io/en/bet ... tom-graphs

[EdwinK]

@Hansienl how did you get that uptime tile look so nice. I only got:

Screen Shot 2019-12-11 at 18.00.24.png (18.68 KiB) Viewed 3359 times