Dashticz Dial - Features, Fixes & Updates

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

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

Re: Dashticz Dial - Features, Fixes & Updates

Post by Lokonli »

gaber wrote: Friday 15 October 2021 13:34
Lokonli wrote: Thursday 14 October 2021 19:58
gaber wrote: Tuesday 12 October 2021 7:41 Hi all,

is it possible to enlarge the font/title in the dial switches?

Image
I can't see the image. Can you repost it?
Sure i can.

Image

Code: Select all

  .dial .device {
      font-size: 30px
  }
dial_switch.jpg
dial_switch.jpg (11.53 KiB) Viewed 2304 times
gaber
Posts: 5
Joined: Tuesday 12 October 2021 7:34
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by gaber »

Code: Select all

  .dial .device {
      font-size: 30px
  }
Thank you!

Works! :)
JuanUil
Posts: 497
Joined: Friday 22 May 2015 12:21
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.11083
Location: Asten NB Nederland
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by JuanUil »

Hi all,

I have this dial which is a selectorswitch in Domoticz.

This is how I configured it:

Code: Select all

blocks['Beregenen'] = {
	type: 'dial',
	idx: 1320,
	title: 'Sproeien',
	addClass:'sproei',
	subtype: 'Text',
	last_update: false,
}	
This is what I get:

Image

I want to display the title and I want to center the different possibilities and enlarge the font.

Tried a lot of things in custom.css nothing works.
Could anybody please help me with a direction on how to format a selector dial?
In read the docs i didn't get any wiser :(
should i use .dial .value or .dialmenu tried everything with no result.

please help.

tnx in advance
Jan
Your mind is like a parachute,
It only works when it is opened!

RPI4 several Fibaro, KaKu, Neocoolcam switches, Z-Wave, Zigbee2Mqtt, Ikea bulbs and remote, Zigbee temp nodes
Lokonli
Posts: 2271
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Lokonli »

Displaying the title is not possible at the moment for selector switches. Centering and font size are described a few posts above.

Verstuurd vanaf mijn AC2003 met Tapatalk

JuanUil
Posts: 497
Joined: Friday 22 May 2015 12:21
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.11083
Location: Asten NB Nederland
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by JuanUil »

Hi Lokonli,

thnx for your reply.
I have tried now in custom.css:

Code: Select all

.sproei {
    font-size: 600% !important;
    color: blue !important;
  }
and

Code: Select all

.sproei .data{
    font-size: 600% !important;
    color: blue !important;
  }
both with no luck :roll:
getting a bit desperate
Your mind is like a parachute,
It only works when it is opened!

RPI4 several Fibaro, KaKu, Neocoolcam switches, Z-Wave, Zigbee2Mqtt, Ikea bulbs and remote, Zigbee temp nodes
Lokonli
Posts: 2271
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Lokonli »

JuanUil wrote: Wednesday 20 October 2021 11:28 Hi Lokonli,

thnx for your reply.
I have tried now in custom.css:

Code: Select all

.sproei {
    font-size: 600% !important;
    color: blue !important;
  }
and

Code: Select all

.sproei .data{
    font-size: 600% !important;
    color: blue !important;
  }
both with no luck :roll:
getting a bit desperate
First try the following in custom.css:

Code: Select all

/*to vertical center the dial menu*/

  .dial-menu .status {
      justify-content: center;
      display: flex;
      flex-direction: column;
  }

  .dial-menu .status li {
      margin: unset
  }

/*to change the font of the dial menu text*/

.dial-menu .status li {
    font-size: 75%
}
If this is working you can limit the scope to '.sproei' as follows:

Code: Select all

/*to vertical center the dial menu*/

  .sproei .dial-menu .status {
      justify-content: center;
      display: flex;
      flex-direction: column;
  }

  .sproei .dial-menu .status li {
      margin: unset
  }

/*to change the font of the dial menu text*/

.sproei .dial-menu .status li {
    font-size: 75%
}
 
JuanUil
Posts: 497
Joined: Friday 22 May 2015 12:21
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.11083
Location: Asten NB Nederland
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by JuanUil »

Hi Lokonli,

Thnx for your advice!!
Works like charm.

Image
Your mind is like a parachute,
It only works when it is opened!

RPI4 several Fibaro, KaKu, Neocoolcam switches, Z-Wave, Zigbee2Mqtt, Ikea bulbs and remote, Zigbee temp nodes
darrepac
Posts: 133
Joined: Tuesday 04 February 2014 21:31
Target OS: Raspberry Pi / ODroid
Domoticz version:
Location: Isère, France
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by darrepac »

I have some issues with DIAL and power counter:

Domoticz screen:
2021-11-01 21_32_55-Domoticz.png
2021-11-01 21_32_55-Domoticz.png (10.86 KiB) Viewed 2211 times
Dashticz results:
2021-11-01 21_32_40-Dashticz.png
2021-11-01 21_32_40-Dashticz.png (78.08 KiB) Viewed 2211 times
Note:
Consommation = Linky
Maison W = Conso Maison

=> in Dashticz:
----------------
Linky: I have negative value instead of positive in Domoticz, and I don't have the current consumption in Dashticz (610W)
CONFIG.js:

Code: Select all

blocks['Linky'] = {
    idx: 34,
    title: 'Linky',
    type: 'dial',
    width: 6,
    min: -10,
    max: 10,
    showring: true,
    showunit: true,
    shownumbers: true,
    last_update: false
}
JSON output:

Code: Select all

{
	"ActTime" : 1635799147,
	"AstrTwilightEnd" : "19:05",
	"AstrTwilightStart" : "05:37",
	"CivTwilightEnd" : "17:56",
	"CivTwilightStart" : "06:46",
	"DayLength" : "10:08",
	"NautTwilightEnd" : "18:31",
	"NautTwilightStart" : "06:12",
	"ServerTime" : "2021-11-01 21:39:07",
	"SunAtSouth" : "12:21",
	"Sunrise" : "07:17",
	"Sunset" : "17:25",
	"app_version" : "2021.1",
	"result" : 
	[
		{
			"AddjMulti" : 1.0,
			"AddjMulti2" : 1.0,
			"AddjValue" : 0.0,
			"AddjValue2" : 0.0,
			"BatteryLevel" : 255,
			"Counter" : "17278.993",
			"CounterDeliv" : "0.000",
			"CounterDelivToday" : "0.000 kWh",
			"CounterToday" : "10.986 kWh",
			"CustomImage" : 0,
			"Data" : "17278993;0;0;0;630;0",
			"Description" : "",
			"Favorite" : 1,
			"HardwareDisabled" : false,
			"HardwareID" : 4,
			"HardwareName" : "TeleInfo",
			"HardwareType" : "Teleinfo EDF",
			"HardwareTypeVal" : 19,
			"HaveTimeout" : false,
			"ID" : "0001",
			"LastUpdate" : "2021-11-01 21:39:04",
			"Name" : "Consommation",
			"Notifications" : "false",
			"PlanID" : "0",
			"PlanIDs" : 
			[
				0
			],
			"Protected" : false,
			"ShowNotifications" : true,
			"SignalLevel" : "-",
			"SubType" : "Energy",
			"SwitchTypeVal" : 0,
			"Timers" : "false",
			"Type" : "P1 Smart Meter",
			"TypeImg" : "counter",
			"Unit" : 1,
			"Usage" : "630 Watt",
			"UsageDeliv" : "0 Watt",
			"Used" : 1,
			"XOffset" : "0",
			"YOffset" : "0",
			"idx" : "34"
		}
	],
	"status" : "OK",
	"title" : "Devices"
}
---------------
Conso Maison: in Dashticz I don't have the current consumption (435.31W) and the daily consumption is false (!) (11106 vs 5571)

CONFIG.js:

Code: Select all

blocks['Conso Maison'] = {
    idx: 188,
    title: 'Conso Maison',
    type: 'dial',
    width: 6,
    min: -10,
    max: 10,
    showring: true,
    showunit: true,
    shownumbers: true,
    last_update: false
}
JSON output:

Code: Select all

{
	"ActTime" : 1635799317,
	"AstrTwilightEnd" : "19:05",
	"AstrTwilightStart" : "05:37",
	"CivTwilightEnd" : "17:56",
	"CivTwilightStart" : "06:46",
	"DayLength" : "10:08",
	"NautTwilightEnd" : "18:31",
	"NautTwilightStart" : "06:12",
	"ServerTime" : "2021-11-01 21:41:57",
	"SunAtSouth" : "12:21",
	"Sunrise" : "07:17",
	"Sunset" : "17:25",
	"app_version" : "2021.1",
	"result" : 
	[
		{
			"AddjMulti" : 1.0,
			"AddjMulti2" : 1.0,
			"AddjValue" : 0.0,
			"AddjValue2" : 0.0,
			"BatteryLevel" : 255,
			"CounterToday" : "11.178 kWh",
			"CustomImage" : 0,
			"Data" : "5571.052 kWh",
			"Description" : "",
			"EnergyMeterMode" : "1",
			"Favorite" : 1,
			"HardwareDisabled" : false,
			"HardwareID" : 12,
			"HardwareName" : "ShellyMQTT",
			"HardwareType" : "Shelly MQTT",
			"HardwareTypeVal" : 94,
			"HaveTimeout" : false,
			"ID" : "shellyem-C7F472-0-energy",
			"LastUpdate" : "2021-11-01 21:41:40",
			"Name" : "Maison W",
			"Notifications" : "false",
			"PlanID" : "0",
			"PlanIDs" : 
			[
				0
			],
			"Protected" : false,
			"ShowNotifications" : true,
			"SignalLevel" : "-",
			"SubType" : "kWh",
			"SwitchTypeVal" : 0,
			"Timers" : "false",
			"Type" : "General",
			"TypeImg" : "current",
			"Unit" : 11,
			"Usage" : "494.69 Watt",
			"Used" : 1,
			"XOffset" : "0",
			"YOffset" : "0",
			"idx" : "188"
		}
	],
	"status" : "OK",
	"title" : "Devices"
}
Lokonli
Posts: 2271
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Lokonli »

darrepac wrote: Monday 01 November 2021 21:42
=> in Dashticz:
----------------
Linky: I have negative value instead of positive in Domoticz, and I don't have the current consumption in Dashticz (610W)
The default P1 Smart Meter dial will by default show the -1*'Nett Counter Today' as big value in the middle.
Below that as smaller values CounterDelivToday and CounterToday are shown as positive values.

so what you see is indeed by design.

If you want to show other values, you have to create a custom dial. See the following link for an example:
https://dashticz.readthedocs.io/en/mast ... mart-meter

Instead of the Datax fields, you can also use the other predefined P1 smart meter data fields:
Usage (=Actual power entering your house)
UsageDeliv (=Actual power leaving your house)
NettUsage (=Usage - UsageDeliv)

CounterToday (=Energy entered your house today)
CounterDelivToday (=Energy left your house today)
NettCounterToday (=CounterToday - CounterDelivToday)

Counter (=Total counter of energy that entered your house)
CounterDeliv (=Total counter of energy that left your house)
NettCounter (=Counter - CounterDeliv)

All parameter names are case sensitive.
darrepac wrote: Monday 01 November 2021 21:42 Conso Maison: in Dashticz I don't have the current consumption (435.31W) and the daily consumption is false (!) (11106 vs 5571)
Conso Maison is not a P1 Smart Meter, but a energy device.
By default the dial of the energy device will show the Data value. This is the total counter. So the result you see is also by design.

If you want to only show the CounterToday as main value in the middle, try the following block definition:

Code: Select all

blocks['Conso Maison'] = {
    idx: 188,
    type: 'dial',
    
    values: [
        {
        value: 'CounterToday',
        addClass: 'primary',
        decimals: 1,
        unit: 'kWh',
        isNeedle: true
        },
    ],
    min: -10,
    max: 10,
    splitdial:true,  //0 in the top
    shownumbers: true,
    showvalue: false //to hide the total counter (=default main value)
}
darrepac
Posts: 133
Joined: Tuesday 04 February 2014 21:31
Target OS: Raspberry Pi / ODroid
Domoticz version:
Location: Isère, France
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by darrepac »

Many thanks it helped a lot
Musje
Posts: 4
Joined: Saturday 07 October 2017 21:39
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Musje »

hey,

I don't know if it is asked before, but is it posibble to create a dial for a RGB switch?
And then I perfer a dial than functions as a dimmer with a possibilty to change the color.
Krenstik
Posts: 45
Joined: Saturday 13 June 2020 12:51
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Krenstik »

Also I had one idea - DIAL with sunset and sunrise?

It can show the length of the day :-)

Text value inside a dial and coloured part between a sunset and sun rise :)

Just as an idea :-)
User avatar
HansieNL
Posts: 960
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by HansieNL »

@Krenstik I Added your idea as new issue at GitHub:
https://github.com/Dashticz/dashticz/issues/906
Blah blah blah
User avatar
heggink
Posts: 972
Joined: Tuesday 08 September 2015 21:44
Target OS: Raspberry Pi / ODroid
Domoticz version: 12451
Location: NL
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by heggink »

Hey Sander,

QQ: I built myself a home battery and would like to display some values including the battery percentage. I have a %% device in domoticz called Battery SOC (state of Charge) that I would like to display. I am probably a bit thick trying to find an appropriate representation in dashticz. Could you give me a hint as to how I could do that?

Thanks!

H

Edit: NVM, just added a device. Would be nice to have like a battery indicator of sorts tho ;-)
Docker in Truenas scale, close to latest beta
DASHTICZ 🙃
RFXCOM, zwavejs2mqtt, zigbee2mqtt,
P1 meter & solar panel
Google home, Wifi Cams motion detection
Geofence iCloud, Bluetooth & Wifi ping
Harmony hub, Nest, lots more :-)
Lokonli
Posts: 2271
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Lokonli »

heggink wrote:Hey Sander,

QQ: I built myself a home battery and would like to display some values including the battery percentage. I have a %% device in domoticz called Battery SOC (state of Charge) that I would like to display. I am probably a bit thick trying to find an appropriate representation in dashticz. Could you give me a hint as to how I could do that?

Thanks!

H

Edit: NVM, just added a device. Would be nice to have like a battery indicator of sorts tho ;-)
I would just use a Dial for that, between 0 and 100%


Verzonden vanaf mijn iPhone met Tapatalk
Beschuitje
Posts: 32
Joined: Saturday 24 February 2018 12:07
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Beschuitje »

I'm having a strange issue with my dials.
Just started using them but the have a smaller grey box in the background

Image
dial.png
dial.png (37.44 KiB) Viewed 460 times
Understand that since v3.7.3 beta this is removed
Update 26-1
Some styling updates:
removed the square background of a dial
Improved dial sizing
Improved height of popup block
Using

Code: Select all

.dt_content .dial {
    	background: none;

}
in CSS doesn't work

When i check in Chrome i get

Image
dial2.png
dial2.png (89.4 KiB) Viewed 460 times
What am i doing wrong?
Lokonli
Posts: 2271
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Lokonli »

Which Dashticz version are you using? Can you switch to latest Dashticz version?
Do you make use of custom.css? Please post it here so I can check.
Beschuitje
Posts: 32
Joined: Saturday 24 February 2018 12:07
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Beschuitje »

Using the latest master version, 3.13
To be on the safe side i downloaded this version again and copied dial.js with WinSCP to replace excisting one, no difference.
I even replaced the entire JS folder, no difference

Browsers also make no difference, Chrome incognito gives the same as does Edge.

custom.css

Code: Select all

/* graphs */
#graphoutput1{height:150px}
#graphoutput7{height:150px}

/* Weather */
.big .weatherdegrees,
.big .weatherloc {
display: inline-block;
margin-top: -2px;
margin-left: 24px; /* move text to the right */
font-size: 30px;
font weight: bold;
}

div[data-id='empty'] {
visibility: hidden;
}

div[data-id='buien'] {
border-radius: 14px; /* Rounded corners */
}

.skyconsmall {
display: block;
width: 75px;
font-size: 15px;
}

/* sunrise */
.sunriseholder,
.sunriseholder .wi{
font-size:20px !important;
}

.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: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 0px; /* Rounded corners */
}

[data-id='mygarbage'].garbage img {max-width: 50px !important;}
}

.selectedbutton {
font-size:12px !important;
}

.dial_content {
background-clip: none;
}

.dial-center {
height: 68%!important;width: 68%!important;
}

div.mh.titlegroups {
height: 50px !important;
padding-top: 3px !important;
background: rgba(0,0,0,0);
}

.alarmrow{
font-size: 12px !important;
}

.alarmrow a {
color: white;
}

.alarmrow strong{
display: inline-block;
}

/* DOTS BELOW SCREEN SWITCH SCREENS */
.swiper-pagination-bullet {background: #FFFFFF; width: 10px; height: 10px; float:middle; position:relative; left:35px;}
}
when i load the CUSTUM_BACKUP css i get the same only with a slightly bigger square background and the round corners

Image
Attachments
dial.png
dial.png (79.3 KiB) Viewed 388 times
Lokonli
Posts: 2271
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Lokonli »

Beschuitje wrote: Tuesday 24 December 2024 16:23 Using the latest master version, 3.13
To be on the safe side i downloaded this version again and copied dial.js with WinSCP to replace excisting one, no difference.
I even replaced the entire JS folder, no difference

Browsers also make no difference, Chrome incognito gives the same as does Edge.

custom.css

Code: Select all

/* graphs */
#graphoutput1{height:150px}
#graphoutput7{height:150px}

/* Weather */
.big .weatherdegrees,
.big .weatherloc {
display: inline-block;
margin-top: -2px;
margin-left: 24px; /* move text to the right */
font-size: 30px;
font weight: bold;
}

div[data-id='empty'] {
visibility: hidden;
}

div[data-id='buien'] {
border-radius: 14px; /* Rounded corners */
}

.skyconsmall {
display: block;
width: 75px;
font-size: 15px;
}

/* sunrise */
.sunriseholder,
.sunriseholder .wi{
font-size:20px !important;
}

.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: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 0px; /* Rounded corners */
}

[data-id='mygarbage'].garbage img {max-width: 50px !important;}
}

.selectedbutton {
font-size:12px !important;
}

.dial_content {
background-clip: none;
}

.dial-center {
height: 68%!important;width: 68%!important;
}

div.mh.titlegroups {
height: 50px !important;
padding-top: 3px !important;
background: rgba(0,0,0,0);
}

.alarmrow{
font-size: 12px !important;
}

.alarmrow a {
color: white;
}

.alarmrow strong{
display: inline-block;
}

/* DOTS BELOW SCREEN SWITCH SCREENS */
.swiper-pagination-bullet {background: #FFFFFF; width: 10px; height: 10px; float:middle; position:relative; left:35px;}
}
when i load the CUSTUM_BACKUP css i get the same only with a slightly bigger square background and the round corners

Image
It's caused by this line from your custom.css:

Code: Select all

background: rgba(0,0,0,0.2);
Consider to remove it.
Beschuitje
Posts: 32
Joined: Saturday 24 February 2018 12:07
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz Dial - Features, Fixes & Updates

Post by Beschuitje »

Yup of course missing the obvious, that did it.

Thanks!
Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests