Dashticz Dial - Features, Fixes & Updates

[gielie]

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?

This looks really nice, if this could be implemented.

[EdwinK]

I second that

[clinkadink]

Progress has been slow, its been manic at work - no excuse

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:


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:


"Temp + Humidity + Baro" dial:


"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.


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


"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


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

[Vomera]

Wow that looks very cool clinkadin!

[EdwinK]

Indeed, looks cool. Can't wait for them to show up

[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

[clinkadink]

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.



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.

[clinkadink]

Apologies for the delay in this. My server crashed, had to rebuild it - and work (day job) is taking over my life

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



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

[EdwinK]

Looks great.

[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
}

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)
}

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
}

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
}

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:



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



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;
}

[EdwinK]

I guess I did something wrong

[clinkadink]

I guess I did something wrong

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

[EdwinK]

Strange, in incognitomode it works withoud problems, but not in the normal chrome mode.

[clinkadink]

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.

[EdwinK]

On my Mac it worked a bit differently, but in the end it got fixed.

[clinkadink]

On my Mac it worked a bit differently, but in the end it got fixed.

Glad its now working

[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!

[clinkadink]

I cannot see idx in your block. For example:

Code: Select all

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

[Trigun]

I cannot see idx in your block. For example:

Code: Select all

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

got it! unbelievable how you can stare youself blind for something so obvious

thanks a lot!

[clinkadink]

got it! unbelievable how you can stare youself blind for something so obvious
thanks a lot!

No probs. Happens to me daily