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

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Lokonli »

RuudP1987 wrote: Monday 15 February 2021 11:26 Almost done!

Image

Only question left is my graph and how to center the Buienradar screen in my 2nd column?
To center the button image add the following to custom.css

Code: Select all

.button .dt_content img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
damdub
Posts: 38
Joined: Tuesday 31 December 2019 16:29
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by damdub »

Hello
I have a question about the logitech squeezebox block.
If the title is too long the comand buttons get off of my block.
squeeze.png
squeeze.png (80.88 KiB) Viewed 3379 times
Is there any solution to at least truncate the title to a maximum lenght or, even better, to force the title to display on maximum 2 or 3 lines for example and make it scroll if it is too long ?

Thank you for your help
User avatar
madpatrick
Posts: 636
Joined: Monday 26 December 2016 12:17
Target OS: Linux
Domoticz version: 2024.7
Location: Netherlands
Contact:

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

Post by madpatrick »

You can change the looks in custom.css

changing the text and picture

Code: Select all

.block_lms					{font-size: 16px !important;color:white !important;display:flex;align-items:flex-end;text-align: left !important;}
.block_lms img					{}
.block_lms .title 				{font-size: 16px !important;color:yellow !important}
Changing the icons

Code: Select all

.fas.fa-arrow-circle-left.fa-small 			{font-size: 16px !important}
.fas.fa-stop-circle.fa-small 				{font-size: 16px !important}
.fas.fa-play-circle.fa-small 				{font-size: 16px !important}
.fas.fa-arrow-circle-right.fa-small 			{font-size: 16px !important}
.fas.fa-pause-circle.fa-small 				{font-size: 16px !important}
.fas.fa-minus-circle.fa-small 				{font-size: 16px !important}
.fas.fa-plus-circle.fa-small 				{font-size: 16px !important}
.fas.fa-music						{font-size: 16px !important}
-= HP server GEN8 Xeon(R) E3-1220L_V2 -=- OZW -=- Toon2 (rooted) -=- Domoticz v2024.7 -=- Dashticz v3.12b on Tab8" =-
damdub
Posts: 38
Joined: Tuesday 31 December 2019 16:29
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by damdub »

madpatrick wrote: Monday 15 February 2021 17:17 You can change the looks in custom.css

changing the text and picture

Code: Select all

.block_lms					{font-size: 16px !important;color:white !important;display:flex;align-items:flex-end;text-align: left !important;}
.block_lms img					{}
.block_lms .title 				{font-size: 16px !important;color:yellow !important}
Changing the icons

Code: Select all

.fas.fa-arrow-circle-left.fa-small 			{font-size: 16px !important}
.fas.fa-stop-circle.fa-small 				{font-size: 16px !important}
.fas.fa-play-circle.fa-small 				{font-size: 16px !important}
.fas.fa-arrow-circle-right.fa-small 			{font-size: 16px !important}
.fas.fa-pause-circle.fa-small 				{font-size: 16px !important}
.fas.fa-minus-circle.fa-small 				{font-size: 16px !important}
.fas.fa-plus-circle.fa-small 				{font-size: 16px !important}
.fas.fa-music						{font-size: 16px !important}
Thank you madPatrick but this is not exactly what I'm trying to achieve.
I already changed the font size and img size and buttons size to my needs.
Problem here is that depending on the title size the buttons line is pushed down.
The title could be very long and changing the font size will never be enough.
Do you think the block height could change depending on the title length so the buttons stay inside the block ?

Thank you
damdub
Posts: 38
Joined: Tuesday 31 December 2019 16:29
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by damdub »

I will answer this one myself.
You can use

Code: Select all

height: auto;
in your custom css so the block height will change depending on the content

Thank you for your help
damdub
Posts: 38
Joined: Tuesday 31 December 2019 16:29
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by damdub »

Hello
I'm using the "openpopupOn" option to show a snapshot of my main door camera when someone rings the doorbell.
The snapshot pops up when someone rings the bell but this snapshot is too large for the popup frame.
The camera provides a 1920*1080 snapshot where I'd like it to fit the 720*480 popup frame.
Is it possible to make the snapshot fit the popup frame no matter what size it is ?

Thank you for your help
whoami
Posts: 73
Joined: Tuesday 31 March 2020 22:31
Target OS: -
Domoticz version:
Location: Dutch
Contact:

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

Post by whoami »

damdub wrote: Monday 15 February 2021 20:51
madpatrick wrote: Monday 15 February 2021 17:17 You can change the looks in custom.css

changing the text and picture

Code: Select all

.block_lms					{font-size: 16px !important;color:white !important;display:flex;align-items:flex-end;text-align: left !important;}
.block_lms img					{}
.block_lms .title 				{font-size: 16px !important;color:yellow !important}
Changing the icons

Code: Select all

.fas.fa-arrow-circle-left.fa-small 			{font-size: 16px !important}
.fas.fa-stop-circle.fa-small 				{font-size: 16px !important}
.fas.fa-play-circle.fa-small 				{font-size: 16px !important}
.fas.fa-arrow-circle-right.fa-small 			{font-size: 16px !important}
.fas.fa-pause-circle.fa-small 				{font-size: 16px !important}
.fas.fa-minus-circle.fa-small 				{font-size: 16px !important}
.fas.fa-plus-circle.fa-small 				{font-size: 16px !important}
.fas.fa-music						{font-size: 16px !important}
Thank you madPatrick but this is not exactly what I'm trying to achieve.
I already changed the font size and img size and buttons size to my needs.
Problem here is that depending on the title size the buttons line is pushed down.
The title could be very long and changing the font size will never be enough.
Do you think the block height could change depending on the title length so the buttons stay inside the block ?

Thank you
You said that you changed the font size, center icons etc of buttons.
Do you have the css script for that? Im looking to center the icons in the buttons...
pvklink
Posts: 822
Joined: Wednesday 12 November 2014 15:01
Target OS: Raspberry Pi / ODroid
Domoticz version: latest b
Contact:

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

Post by pvklink »

Raspberry (raspbian on rpi 3) , Domoticz Beta, dzVents , RFXtrx433e, P1, Hue, Yeelight, Zwave+, X10, ESP(easy), MQTT,Weather Underground, System Alive Checker, Domoticz Remote Server to RPI with Google Assistant,
Jablotron connection, Ikea
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

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

Post by EdwinK »

Looking nice, pvklink. :)
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
sanderjohan
Posts: 4
Joined: Thursday 31 December 2015 10:01
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.4834
Contact:

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

Post by sanderjohan »

Is it possible that more then one domoticz system is giving input to a Dashticz interface? Problem is that I am using Zigbee2MQTT and I am encountering a 255 device limit of Domoticz. Setting up a second Domoticz as slave does not work due to another problem that information from a python device is not shared.
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Lokonli »

sanderjohan wrote: Friday 12 March 2021 15:56 Is it possible that more then one domoticz system is giving input to a Dashticz interface? Problem is that I am using Zigbee2MQTT and I am encountering a 255 device limit of Domoticz. Setting up a second Domoticz as slave does not work due to another problem that information from a python device is not shared.
Not really.

However, I think you could show a second Dashticz instance inside of a frame ...
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

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

Post by EdwinK »

Quite some time ago, Hansienl wrote:
HansieNL wrote: Tuesday 05 November 2019 22:02 My final dashboard :D :D
Schermafbeelding.jpg

Have an error popping up on line 7:3 of custom.js.
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');
  }

}

And somehow I can't save the file working from a Windows ( :oops: ) machine, so I have to work directly wth terminal.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
poweredge
Posts: 21
Joined: Thursday 05 July 2018 13:54
Target OS: Linux
Domoticz version:
Contact:

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

Post by poweredge »

sanderjohan wrote: Friday 12 March 2021 15:56 Is it possible that more then one domoticz system is giving input to a Dashticz interface? Problem is that I am using Zigbee2MQTT and I am encountering a 255 device limit of Domoticz. Setting up a second Domoticz as slave does not work due to another problem that information from a python device is not shared.
can you clarify that 255 limit ? i have now 286 entries - devices - scenes - dummy switches - etc .. works fine. i use 1 master domoticz (with the 286 entries / mix from master-slave) and a secondary which is more central in the house with the zwave stick.
DM2021.1 (pri+sec) VM/RPI4. Dashticz @touchscreen. IT: Dell ESXi cluster, UPS, fiber+4g WAN. Smart: Aeotec/Neo/Qubino/Eurotronic zwave, Philips Hue, P1, rfxom433, OTGW, ITHO WiFi, Shelly shutter/water sens, NEST v3, 9x Alexa
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Lokonli »

poweredge wrote: Wednesday 17 March 2021 15:47
sanderjohan wrote: Friday 12 March 2021 15:56 Is it possible that more then one domoticz system is giving input to a Dashticz interface? Problem is that I am using Zigbee2MQTT and I am encountering a 255 device limit of Domoticz. Setting up a second Domoticz as slave does not work due to another problem that information from a python device is not shared.
can you clarify that 255 limit ? i have now 286 entries - devices - scenes - dummy switches - etc .. works fine. i use 1 master domoticz (with the 286 entries / mix from master-slave) and a secondary which is more central in the house with the zwave stick.
I think the limitation is 255 devices per hardware 'device'.
TroisSix
Posts: 91
Joined: Monday 11 January 2016 9:29
Target OS: -
Domoticz version: 2022.2
Location: France
Contact:

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

Post by TroisSix »

Hi guys,

After a long period to read the very complete tutorial and read you all, thank's a lot to the devs for their work! 8-)
I present you my board on my iPad 2, mounted on the wall with a support 3d printed ;)
MyDashticz on the wall (for forum).jpg
MyDashticz on the wall (for forum).jpg (378.18 KiB) Viewed 2977 times
I put my config.js and custom.js in a thread viewtopic.php?f=67&t=35831 with some questions if you have any ideas to help me improve my dash :D
VM Debian - Domoticz stable v2023.1, RFXtrx433, Aeotec Z-Stick Gen5, APC ES700
- rts: dio, oregon, somfy
- zwave: fibaro fgs212, aeotec smart switch, vision ZG8101
- IO Homecontrol: Velux Connexoon
- logitech harmony hub, philips hue, gps Pilot
damdub
Posts: 38
Joined: Tuesday 31 December 2019 16:29
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by damdub »

Hello.
does anyone know if it is possible to exclude a screen from the auto_slide_pages config ?
I would like my dashboard to auto slide from screen 1 to screen 3 and avoid screen 4.
Thank you for your help.
D.
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by Lokonli »

damdub wrote: Tuesday 13 April 2021 12:05 Hello.
does anyone know if it is possible to exclude a screen from the auto_slide_pages config ?
I would like my dashboard to auto slide from screen 1 to screen 3 and avoid screen 4.
Thank you for your help.
D.
Implemented in Dashticz 3.8.1 beta.
JakeOfOz
Posts: 9
Joined: Wednesday 31 March 2021 10:04
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by JakeOfOz »

Hi, I have a dashboard with several dials, but find it very annoying that when you hover over them with the cursor, the dial changes. Is it possible to disable that hover animation?
And for good measure, is it also possible to disable interaction with blocks? this would make scrolling on an iPad a lot easier
stephanvdplas
Posts: 73
Joined: Wednesday 13 February 2019 18:09
Target OS: Windows
Domoticz version: 2023.1
Location: Netherlands
Contact:

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

Post by stephanvdplas »

damdub wrote: Monday 15 February 2021 14:55 Hello
I have a question about the logitech squeezebox block.
If the title is too long the comand buttons get off of my block.

squeeze.png

Is there any solution to at least truncate the title to a maximum lenght or, even better, to force the title to display on maximum 2 or 3 lines for example and make it scroll if it is too long ?

Thank you for your help
Sorry for the latency... I'd suggest you try the material skin (a plug-in in Squeezeserver). Then create an iFrame for it. It is so much prettier than the standard squeezebox players.

Image
- Running LMS, Domoticz and Dashticz on a windows 11 laptop.
- LMS (11 players) / Hue (26 lights, 2 switches) / Z-wave (14 devices) / Toon (unrooted) / Chromecast
fargle
Posts: 67
Joined: Tuesday 27 March 2018 17:42
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

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

Post by fargle »

stephanvdplas wrote: Tuesday 10 August 2021 15:18 Sorry for the latency... I'd suggest you try the material skin (a plug-in in Squeezeserver). Then create an iFrame for it. It is so much prettier than the standard squeezebox players.
This is a great suggestion, thanks! I had been under the mistaken impression that the Logitech Media Server only worked with proprietary gadgets, so hadn't checked it out. I installed it standalone on a Raspberry Pi3 together with Dashticz, and it runs very well. On the Pi, the hardest part was getting the external USB sound card to be recognized, but that's not unusual.
.
Dashticz-Logitech.jpg
Dashticz-Logitech.jpg (245.15 KiB) Viewed 3425 times
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest