Page 2 of 10

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Tuesday 09 June 2020 16:11
by gielie
clinkadink wrote: Sunday 07 June 2020 11:36
gielie wrote: Friday 05 June 2020 22:52 How do I get an temp/hum sensor in the dial button and is it possible to get an degree icon and an decimal in the dial?
Like this?

Image
This looks really nice, if this could be implemented.

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Tuesday 09 June 2020 22:53
by EdwinK
I second that

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Thursday 25 June 2020 0:16
by clinkadink
Progress has been slow, its been manic at work - no excuse :roll:

I have added dial numbers, as an optional parameter, based on the min/max range (also optional parameters). It is still work in progress, but I thought I would share some screenshots of how its shaping up.

Evohome, Heating, Thermostat or Toon dial:
Image

There is also an optional "setpoint" parameter than you can add to the following dials. This will control what ring color is displayed. For example, I have "setpoint: 15" in the dials below. If its above 15 degrees, it will show orange (or any custom color). If below, it will show blue (or any custom color).

"Temp + Humidity" dial:
Image

"Temp + Humidity + Baro" dial:
Image

"Wind" dial: this took a bit of effort, as its a 360 degree dial. I had added an 'offset' parameter so the dial needle can either point towards where the wind originates from, or the direction it is blowing in. Personally, I prefer the latter (which what is set below). It also uses the wind unit if set in Domoticz. Mine is set to "mph". Like above, because its above 15 degrees temperature, the dial ring is orange. That can be toggled on or off in the block.
Image

"Dimmer" dial (on): nothing really new here, except the numbers.
Image

"On/Off" dial (left = off, right = on): this is a new block I am working on specifically for "On/Off" devices. Technically, it isn't a dial, but I want all my switches/dials to match ;)
Image

Obviously, these are configured to my settings, the decimal for example is a dot on mine. But for all you NL folks, it will show a comma. All icons can be replaced on the block, with other icons or images. These are not finished yet, so they won't be in the beta for a while yet.

Cheers ;)

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Friday 26 June 2020 9:35
by Vomera
Wow that looks very cool clinkadin!

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Friday 26 June 2020 9:46
by EdwinK
Indeed, looks cool. Can't wait for them to show up ;)

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Tuesday 30 June 2020 23:45
by floris74
Yes it looks coooool, the wind and direction (hopefully with an option to set 'knots') and the thermostat with the decimal. Can't wait :)

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Sunday 12 July 2020 23:06
by clinkadink
floris74 wrote: Tuesday 30 June 2020 23:45 Yes it looks coooool, the wind and direction (hopefully with an option to set 'knots') and the thermostat with the decimal. Can't wait :)
The wind unit of measurement can be set in Domoticz. Dashticz then uses this in the Wind dial. Mine is set to MPH but you can set yours to knots.

Image

The dials will round to the nearest 1 decimal place where needed. The decimal format will either show a dot or a comma depending on your language setting in CONFIG.js.

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Sunday 12 July 2020 23:23
by clinkadink
Apologies for the delay in this. My server crashed, had to rebuild it - and work (day job) is taking over my life :evil:

I don't have a P1 Smart Meter, but I see a lot of them in Domoticz and Dashticz. I added one as a dummy device and reconfigured the Dial code for it. I am guessing that people would want to see the "Today" counters, rather than the total counter, or current usage. If not let me know, currently, it is using CounterDelivToday and CounterToday.

P1 Smart Meter - Today's energy consumption is more than production

Image

P1 Smart Meter - Today's energy production is more than consumption

Image

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Monday 13 July 2020 8:53
by EdwinK
Looks great. :)

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Monday 13 July 2020 12:24
by clinkadink
The dial component has been updated in the latest beta today.

In addition to devices supported already, which are:

- Type = 'Heating'
- Type = 'Thermostat'
- SubType = 'SetPoint'
- SubType = 'Evohome'
- SwitchType = 'Selector'
- SwitchType = 'Dimmer'

These new devices supported:

- SwitchType = 'On/Off'
- Type = 'Temp + Humidity'
- Type = 'Temp + Humidity + Baro'
- Type = 'Wind'
- Type = 'P1 Smart Meter'

SwitchType = 'On/Off' - any devices with this switchtype and type: 'dial' will automatically render as a dial button.
Spoiler: show

Code: Select all

blocks['kitchen_lights'] = {
  idx: 451,
  title: 'Kitchen',
  type: 'dial',
  color: '#57c4d6',
  width: 2
}
Image

Type = 'Temp + Humidity' - will display temperature as the main value and humidity as extra info below. There is enough room to display last_update with this dial.
Spoiler: show

Code: Select all

blocks['temp_hum'] = {
  idx: 435,
  title: 'Weather 1',
  type: 'dial', 
  setpoint: 15,  // this value will be used to control the color of the outer ring, e.g. < 15 is blue, >= 15 is orange
  min: -10, // set the minimum value for the dial range (default is 5)
  max: 40, // set the maximum value for the dial range (default is 35)
  width: 2,
  shownumbers: true,  // display the numbers on the dial (default is false)
  showring: true, // display outer ring color all the time (default is false, will only display when hover over)
  showunit: true // display unit for the dial value (default is false)
}
Image

Type = 'Temp + Humidity + Baro' - similar to above, but with Baro as extra info too. Last_update can be added but it is a tight fit.
Spoiler: show

Code: Select all

blocks['temp_hum_baro'] = {
  idx: 72,
  title: 'Weather 2',
  type: 'dial',
  setpoint: 15,
  min: -10,
  max: 40,
  width: 2,
  /* dialicon: ['fas fa-thermometer-half', 'fas fa-arrow-down'], */   // dial icons array when for dials have more than 1 extra info
  /* dialimage: ['volumio.png', 'air.png'],  */   // dial images array when for dials have more than 1 extra info
  showunit: true,
  shownumbers: true,
  last_update: false  // disabling last update to allow for more room
}
Image

Type = 'Wind' - this dial has a 360 degree range (like a compass). The wind direction can be set to point to where the wind is blowing from or to, by using the new "offset" parameter. Below I have set the dial to point to which direction the wind is blowing.
Spoiler: show

Code: Select all

blocks['wind'] = {
  idx: 73,
  title: 'Wind',
  type: 'dial',
  setpoint: 18, // the entire outer ring will change color based on this setpoint, factoring in the current temperature (default 15)
  offset: 180,  // 0 will point to the wind source, 180 will point to wind direction (default is 0)
  width: 2,
  showring: true,
  showunit: true,
  shownumbers: true,
  last_update: false
}
Image

Type = 'P1 Smart Meter' - currently this is configured to use the "Today" counters; CounterDelivToday and CounterToday, i.e. production vs consumption. Unlike any other dial, zero is at "12 o'clock" (instead of the tradional dial which starts at "7 o'clock").
Spoiler: show

Code: Select all

blocks['p1'] = {
  idx: 454,
  title: 'P1 Meter',
  type: 'dial',
  width: 2,
  min: -10,
  max: 10,
  showring: true,
  showunit: true,
  shownumbers: true,
  last_update: false
}
P1 Smart Meter - Today's energy consumption is more than production:

Image

P1 Smart Meter - Today's energy production is more than consumption:

Image

Custom styling using custom.css below.
Spoiler: show
To change the grey dial bezel color from grey to red:

Code: Select all

.dt_content .dial {
    background-color: #bb2424;
}
To change the outer ring primary color from orange (default) to yellow:

Code: Select all

.dial .bar.primary,
.dial .fill.primary {
    border-color: #d9e900;
}
To change the outer ring secondary color from blue (default) to lime green:

Code: Select all

.dial .bar.secondary,
.dial .fill.secondary {
    border-color: #26e500;
} 
To change the dial needle color from orange (default) to lime green:

Code: Select all

.dial-needle::before {
	border-bottom-color: lime!important;
}
To target just one dial, you can prefix the above code snippets with block id of the dial, for example:

Code: Select all

[data-id='temp_hum_baro'] .dial-needle::before {
	border-bottom-color: lime!important;
}

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Monday 13 July 2020 17:51
by EdwinK
I guess I did something wrong

Image

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Monday 13 July 2020 17:56
by clinkadink
EdwinK wrote: Monday 13 July 2020 17:51 I guess I did something wrong

Image
Please can you CTRL + F5 .... reset browser cache and/or try in an incognito tab.

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Monday 13 July 2020 21:53
by EdwinK
Strange, in incognitomode it works withoud problems, but not in the normal chrome mode.

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Monday 13 July 2020 21:59
by clinkadink
EdwinK wrote: Monday 13 July 2020 21:53 Strange, in incognitomode it works withoud problems, but not in the normal chrome mode.
Yes, that occasionally happens with browsers when there have been a lot of CSS changes. The dials have lots of styling. The browser caches this styling so you don't have to reload the CSS file each time. The only downside is that sometime its too clever. Hence you need to clear your browser cache for that page. Holding down CTRL + F5 should work too. As that is basically what incognito mode does ... loads a page with zero cache.

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Monday 13 July 2020 22:34
by EdwinK
On my Mac it worked a bit differently, but in the end it got fixed. :)

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Monday 13 July 2020 23:41
by clinkadink
EdwinK wrote: Monday 13 July 2020 22:34 On my Mac it worked a bit differently, but in the end it got fixed. :)
Glad its now working :D

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Tuesday 14 July 2020 12:36
by Trigun
Hi Guys,\I am really looking forward to use this dail as this is a great feature!

although I can't seem to get it to work with one of my dimmers :(
when I edit the Config file with the following:

Code: Select all

blocks['Keuken-Eiland']= {}
blocks['Keuken-Eiland'] ['title'] = 'Keuken-Eiland',	     // title that will appear on the dial (mandatory)
blocks['Keuken-Eiland'] ['type'] = 'dial',                // indentifies this block as a dial (mandatory)
blocks['Keuken-Eiland'] ['width'] = 3,                    // dial width (optional, default 3)
blocks['Keuken-Eiland'] ['height'] = 250,                 // dial height (optional, default based on width)
blocks['Keuken-Eiland'] ['color'] = '#57c4d6'             // color theme for the dial (default orange)
blocks['Keuken-Eiland'] ['last_update'] = true,           // shows last update info (default: true)
blocks['Keuken-Eiland'] ['flash'] = true,                 // outer dial will flash with user or default color (default: 0)
blocks['Keuken-Eiland'] ['dialimage'] = 'img/toon.png',   // show an image instead of the calendar icon (default: false)
blocks['Keuken-Eiland'] ['dialicon'] = 'fas fa-train',    // show a different font awesome icon (default: 'fas fa-calendar-alt')
blocks['Keuken-Eiland'] ['showring'] = 'true'               // always show the outer color ring (default: false)
I still get the normal slide instead of the nice looking dial.

Can anyone tell me what I am doing wrong?

thnx in advanced!

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Tuesday 14 July 2020 12:45
by clinkadink
I cannot see idx in your block. For example:

Code: Select all

blocks['Keuken-Eiland'] ['idx'] = 123,

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Tuesday 14 July 2020 12:49
by Trigun
clinkadink wrote: Tuesday 14 July 2020 12:45 I cannot see idx in your block. For example:

Code: Select all

blocks['Keuken-Eiland'] ['idx'] = 123,
got it! :oops: unbelievable how you can stare youself blind for something so obvious

thanks a lot!

Re: Dashticz Dial - Features, Fixes & Updates

Posted: Tuesday 14 July 2020 12:54
by clinkadink
Trigun wrote: Tuesday 14 July 2020 12:49 got it! :oops: unbelievable how you can stare youself blind for something so obvious
thanks a lot!
No probs. Happens to me daily :)