Dashticz v3.8.2 beta: New weather block

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

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

Dashticz v3.8.2 beta: New weather block

Post by Lokonli »

To improve the configurability of the weather block I decided to rewrite the weather block.
The old weather blocks are not supported anymore.

This means you have to update your weather block definitions!!


See the documentation: https://dashticz.readthedocs.io/en/beta ... tomweather

I've removed support for WeatherUnderground API, since no free API keys are provided anymore.
Only OpenWeatherMap is supported.

Currently four different layouts have been implemented:
weather_default.jpg
weather_default.jpg (32.38 KiB) Viewed 2918 times
weather_current.jpg
weather_current.jpg (12.19 KiB) Viewed 2918 times
weather_detailed.jpg
weather_detailed.jpg (27.71 KiB) Viewed 2918 times
The fourth one is an hourly forecast,

Depending on your feedback I may add a few more layout options, or update the existing ones.

There are some configuration parameters per block already. These will be extended as well.
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 v3.8.2 beta: New weather block

Post by EdwinK »

Great :)

Another reason to redo the dashboard.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
User avatar
kiddigital
Posts: 438
Joined: Thursday 10 August 2017 6:52
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: Netherlands
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by kiddigital »

Would also be nice if the OWM weather block of Dashticz could use the information from the ‘getforecastconfig’ command as this provides the OWM config info as used in Domoticz for the Weatherforecast screen.

If you use the OWM module in Domoticz and select to use OWM also for the forecast (setting in OWM module), this command provides the config info needed to show the info. This means no need anymore to have the OWM config also in the Dashticz config :)
One RPi with Domoticz, RFX433e, aeon labs z-wave plus stick GEN5, ha-bridge 5.4.0 for Alexa, Philips Hue Bridge, Pimoroni Automation Hat
One RPi with Pi foundation standard touch screen to display Dashticz
jake
Posts: 742
Joined: Saturday 30 May 2015 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version: beta
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by jake »

Thanks for the continious development. I copied the owm module settings into a block, with the intention that the dashboard would look the same.

(I have the OWM module config parameters still in the CONFIG.js file)

-When I keep the block name 'weather', the dashboard will show the weather, but based on the weather module instead (Things like different amount of forecast days are used from the module parameters)
-When I change the block name (and of course also in the column) to a different name than 'weather' (for instance 'weatherForecast') the block is not loaded at all anymore, but the dashboard only shows 'weatherForecast' on that place on the dash.

(btw: in your wiki page, there is 1 forward slash missing before the text 'Your openWeatherMap API')

config['owm_api'] = 'abc1234';
config['owm_city'] = 'Amsterdam';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['owm_cnt'] = '4';
config['owm_days'] = 1; // Enter 1 for showing forecast in days, 0 for the OWM default 3 hour forecast
config['owm_lang'] = 'nl'; // Set language for de description of the forecast (rain, cloudy, etc.). For available languages, see https://openweathermap.org/forecast5/#multi
config['owm_min'] = 1; // Enter 1 to show min temperature on 2nd row
config['static_weathericons'] = 0; // Static or 'moving' weather icons

blocks['weather'] = {
type: 'weather',
apikey: 'abc1234', //Your OpenWeatherMap API key
city: 'Amsterdam',
country: 'nl',
lang: 'nl',
layout: 0, //Daily forecast
width: 12,
count: 3,
refresh: 1800,
static_weathericons: false,
decimals: 2,
showRain: true,
showDescription: true
}

Removing the OWM parameters will only show an icon of the sun on the dashboard.
Lokonli
Posts: 2287
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by Lokonli »

kiddigital wrote: Sunday 25 April 2021 10:55 Would also be nice if the OWM weather block of Dashticz could use the information from the ‘getforecastconfig’ command as this provides the OWM config info as used in Domoticz for the Weatherforecast screen.

If you use the OWM module in Domoticz and select to use OWM also for the forecast (setting in OWM module), this command provides the config info needed to show the info. This means no need anymore to have the OWM config also in the Dashticz config :)
ok, I'll look at that.
Lokonli
Posts: 2287
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by Lokonli »

jake wrote: Sunday 25 April 2021 12:47 Thanks for the continious development. I copied the owm module settings into a block, with the intention that the dashboard would look the same.

(I have the OWM module config parameters still in the CONFIG.js file)

-When I keep the block name 'weather', the dashboard will show the weather, but based on the weather module instead (Things like different amount of forecast days are used from the module parameters)
-When I change the block name (and of course also in the column) to a different name than 'weather' (for instance 'weatherForecast') the block is not loaded at all anymore, but the dashboard only shows 'weatherForecast' on that place on the dash.

(btw: in your wiki page, there is 1 forward slash missing before the text 'Your openWeatherMap API')

config['owm_api'] = 'abc1234';
config['owm_city'] = 'Amsterdam';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['owm_cnt'] = '4';
config['owm_days'] = 1; // Enter 1 for showing forecast in days, 0 for the OWM default 3 hour forecast
config['owm_lang'] = 'nl'; // Set language for de description of the forecast (rain, cloudy, etc.). For available languages, see https://openweathermap.org/forecast5/#multi
config['owm_min'] = 1; // Enter 1 to show min temperature on 2nd row
config['static_weathericons'] = 0; // Static or 'moving' weather icons

blocks['weather'] = {
type: 'weather',
apikey: 'abc1234', //Your OpenWeatherMap API key
city: 'Amsterdam',
country: 'nl',
lang: 'nl',
layout: 0, //Daily forecast
width: 12,
count: 3,
refresh: 1800,
static_weathericons: false,
decimals: 2,
showRain: true,
showDescription: true
}

Removing the OWM parameters will only show an icon of the sun on the dashboard.
That should work. Can you check in DevTools for errors in the console tab or network tab?

You have to add type:'weather' to your block definition, otherwise it's not handled as a weather block, but as a button.
jake
Posts: 742
Joined: Saturday 30 May 2015 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version: beta
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by jake »


Lokonli wrote:
jake wrote: Sunday 25 April 2021 12:47 Thanks for the continious development. I copied the owm module settings into a block, with the intention that the dashboard would look the same.

(I have the OWM module config parameters still in the CONFIG.js file)

-When I keep the block name 'weather', the dashboard will show the weather, but based on the weather module instead (Things like different amount of forecast days are used from the module parameters)
-When I change the block name (and of course also in the column) to a different name than 'weather' (for instance 'weatherForecast') the block is not loaded at all anymore, but the dashboard only shows 'weatherForecast' on that place on the dash.

(btw: in your wiki page, there is 1 forward slash missing before the text 'Your openWeatherMap API')

config['owm_api'] = 'abc1234';
config['owm_city'] = 'Amsterdam';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['owm_cnt'] = '4';
config['owm_days'] = 1; // Enter 1 for showing forecast in days, 0 for the OWM default 3 hour forecast
config['owm_lang'] = 'nl'; // Set language for de description of the forecast (rain, cloudy, etc.). For available languages, see https://openweathermap.org/forecast5/#multi
config['owm_min'] = 1; // Enter 1 to show min temperature on 2nd row
config['static_weathericons'] = 0; // Static or 'moving' weather icons

blocks['weather'] = {
type: 'weather',
apikey: 'abc1234', //Your OpenWeatherMap API key
city: 'Amsterdam',
country: 'nl',
lang: 'nl',
layout: 0, //Daily forecast
width: 12,
count: 3,
refresh: 1800,
static_weathericons: false,
decimals: 2,
showRain: true,
showDescription: true
}

Removing the OWM parameters will only show an icon of the sun on the dashboard.
That should work. Can you check in DevTools for errors in the console tab or network tab?

You have to add type:'weather' to your block definition, otherwise it's not handled as a weather block, but as a button.
Update:
I feel a little stupid. I didn't define the block in the 'var blocks' part of the config file. Now it loads fine. Sorry for the confusion
User avatar
madpatrick
Posts: 662
Joined: Monday 26 December 2016 12:17
Target OS: Linux
Domoticz version: 2024.7
Location: Netherlands
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by madpatrick »

Great !
I have it working (in basics) and will test it the next coming days.
-= HP server GEN11 =- OZW -=- Toon2 (rooted) -=- Domoticz v2024.7 -=- Dashticz v3.14b on Tab8" =-
jake
Posts: 742
Joined: Saturday 30 May 2015 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version: beta
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by jake »

After that the above matter (of not putting the block in the block section) is solved , the blocks shows in a first glimpse identical to the weather module block. However:

The 3.8.2 weather module/block shows days (text): Sunday, Monday, Tuesday, Wednesday
The 3.8.1 weather module shows days (text): Monday, Tuesday, Wednesday, Thursday

The temperatures for those days do not match for all 4 days (for the identical named days) between the weather module of 3.8.1 and module/block of 3.8.2 (in my case the Tuesday temperature is different)
Lokonli
Posts: 2287
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by Lokonli »

Yes, in 3.8.2 the daily forecast shows the current day as well.


Verstuurd vanaf mijn AC2003 met Tapatalk

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

Re: Dashticz v3.8.2 beta: New weather block

Post by Lokonli »


jake wrote: The temperatures for those days do not match for all 4 days (for the identical named days) between the weather module of 3.8.1 and module/block of 3.8.2 (in my case the Tuesday temperature is different)
The old block computed the min max temperatures from 3 hourly forecast.
The new block uses daily forecast as provided by OWM.


Verstuurd vanaf mijn AC2003 met Tapatalk

Dickey
Posts: 25
Joined: Friday 19 April 2019 22:29
Target OS: Raspberry Pi / ODroid
Domoticz version: 2022.1
Location: Netherlands
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by Dickey »

Just added the block. Looks very nice.
A good replacement for WU.

Thanks a lot lokonli
Dz-beta | Dashticz 3.8.10 BETA | Tradfri | RF-Link | Z-Wave | Harmony | Unify | P1 |
Chris12
Posts: 238
Joined: Tuesday 18 August 2020 8:41
Target OS: NAS (Synology & others)
Domoticz version: 2021.1
Location: NL
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by Chris12 »

Hi @lokonli,

Just updated, and configured the new OWM block.
The new block messed up my screen and standby screen a little, as I was previously using some css to resize icons/text etc. for the old 'weather_owm'.
I tried to get the same look&feel with the new OWM block, this goes fine for the normal screen.

But one css parameter I can't find: how to decrease the space between the 'rain' parameter and bottom of the block, this is now a little to big.
Same question for the space between 'description' and 'max' temperature parameter.

For the standby screen I cannot figure out the css.

My old weather_owm standby screen css:
Spoiler: show

Code: Select all

.standby .block_weather_owm  .skycon 								{width: 150% !important;}
.standby .block_weather_owm  .weatherfull > div div.day				{font-size: 60px !important;font-weight: bold !important;}
.standby .block_weather_owm  .weatherfull > div div.day.owmdescription	{font-size: 40px !important;}
.standby .block_weather_owm  .weatherfull > div div					{font-size: 40px !important;}
.standby .block_weather_owm  .weatherfull > div div.temp			{font-size: 60px !important;}
.standby .block_weather_owm  .weatherfull > div div.temp .nightT	{font-size: 40px !important;}
How to rebuild this with the new OWM block?
Is it something like this:
Spoiler: show

Code: Select all

/* new OWM weather standby */
.standby .block_weather-own-new  .skycon 								{width: 150% !important;}
.standby .block_weather-own-new  .weatherfull > div div.day				{font-size: 60px !important;font-weight: bold !important;}
.standby .block_weather-own-new  .weatherfull > div div.day.description	{font-size: 40px !important;}
.standby .block_weather-own-new  .weatherfull > div div					{font-size: 40px !important;}
.standby .block_weather-own-new  .weatherfull > div div.temp .max	{font-size: 60px !important;}
.standby .block_weather-own-new  .weatherfull > div div.temp .min	{font-size: 40px !important;}
Domoticz beta | Dashticz beta | Synology DS415+ | Wall tablet Teclast 11.6inch (Android) | TADO v3 controlled heating
User avatar
madpatrick
Posts: 662
Joined: Monday 26 December 2016 12:17
Target OS: Linux
Domoticz version: 2024.7
Location: Netherlands
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by madpatrick »

Chris12 wrote: Monday 26 April 2021 9:36 Hi @lokonli,

Just updated, and configured the new OWM block.
The new block messed up my screen and standby screen a little, as I was previously using some css to resize icons/text etc. for the old 'weather_owm'.
I tried to get the same look&feel with the new OWM block, this goes fine for the normal screen.

But one css parameter I can't find: how to decrease the space between the 'rain' parameter and bottom of the block, this is now a little to big.
Same question for the space between 'description' and 'max' temperature parameter.

For the standby screen I cannot figure out the css.

My old weather_owm standby screen css:
Spoiler: show

Code: Select all

.standby .block_weather_owm  .skycon 								{width: 150% !important;}
.standby .block_weather_owm  .weatherfull > div div.day				{font-size: 60px !important;font-weight: bold !important;}
.standby .block_weather_owm  .weatherfull > div div.day.owmdescription	{font-size: 40px !important;}
.standby .block_weather_owm  .weatherfull > div div					{font-size: 40px !important;}
.standby .block_weather_owm  .weatherfull > div div.temp			{font-size: 60px !important;}
.standby .block_weather_owm  .weatherfull > div div.temp .nightT	{font-size: 40px !important;}
How to rebuild this with the new OWM block?
Is it something like this:
Spoiler: show

Code: Select all

/* new OWM weather standby */
.standby .block_weather-own-new  .skycon 								{width: 150% !important;}
.standby .block_weather-own-new  .weatherfull > div div.day				{font-size: 60px !important;font-weight: bold !important;}
.standby .block_weather-own-new  .weatherfull > div div.day.description	{font-size: 40px !important;}
.standby .block_weather-own-new  .weatherfull > div div					{font-size: 40px !important;}
.standby .block_weather-own-new  .weatherfull > div div.temp .max	{font-size: 60px !important;}
.standby .block_weather-own-new  .weatherfull > div div.temp .min	{font-size: 40px !important;}
Chris,

You need to change it more like this (this is working for me.... ;) )

Code: Select all

.standby [data-id='weather_standby'] 			{height: 70px !important}
.standby [data-id='weather_standby'] .icon		{font-size: 26pt !important;color: yellow !important;margin-left: 120px !important}
.standby [data-id='weather_standby'] .temp		{font-size: 36px !important;color:#f4ffcc;margin-left: 40px !important;}

Code: Select all

[data-id='weather_full']  				{height: 220px !important;}
[data-id='weather_full'] .day				{color:yellow !important;font-size: 16px !important;}
[data-id='weather_full'] .max				{color:#f4ffcc !important;font-size: 22px !important;font-weight: bold !important;padding-top:15px !important;}
[data-id='weather_full'] .min				{color:white  !important;font-size: 20px !important;font-weight: normal !important;}
[data-id='weather_full'] .description			{color:white  !important;font-size: 14px !important;}
The parameters are decribed on the wiki page
-= HP server GEN11 =- OZW -=- Toon2 (rooted) -=- Domoticz v2024.7 -=- Dashticz v3.14b on Tab8" =-
Chris12
Posts: 238
Joined: Tuesday 18 August 2020 8:41
Target OS: NAS (Synology & others)
Domoticz version: 2021.1
Location: NL
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by Chris12 »

Thanks for the code I tried it, but the code below doesn't seems to work.
The weather on the standby screen is still fullscreen.
Spoiler: show

Code: Select all

/* new OWM weather standby */
.standby [data-id='weather-owm-new']				{height: 300px !important}
.standby [data-id='weather-owm-new']  .day			{font-size: 60px !important;font-weight: bold !important;}
.standby [data-id='weather-owm-new']  .icon 		{width: 100% !important;}
.standby [data-id='weather-owm-new']  .description	{font-size: 60px !important;}
.standby [data-id='weather-owm-new']  .max			{font-size: 60px !important;}
.standby [data-id='weather-owm-new']  .min			{font-size: 40px !important;}
.standby [data-id='weather-owm-new']  .rain			{font-size: 40px !important;}
Last edited by Chris12 on Monday 26 April 2021 10:48, edited 1 time in total.
Domoticz beta | Dashticz beta | Synology DS415+ | Wall tablet Teclast 11.6inch (Android) | TADO v3 controlled heating
User avatar
madpatrick
Posts: 662
Joined: Monday 26 December 2016 12:17
Target OS: Linux
Domoticz version: 2024.7
Location: Netherlands
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by madpatrick »

Did you try to reduce the font sizes ?
60px is pretty big
Also your icon is at 150%
-= HP server GEN11 =- OZW -=- Toon2 (rooted) -=- Domoticz v2024.7 -=- Dashticz v3.14b on Tab8" =-
Chris12
Posts: 238
Joined: Tuesday 18 August 2020 8:41
Target OS: NAS (Synology & others)
Domoticz version: 2021.1
Location: NL
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by Chris12 »

Hi just editted my previous post with the actual css.
Still the same behavior.
Domoticz beta | Dashticz beta | Synology DS415+ | Wall tablet Teclast 11.6inch (Android) | TADO v3 controlled heating
Chris12
Posts: 238
Joined: Tuesday 18 August 2020 8:41
Target OS: NAS (Synology & others)
Domoticz version: 2021.1
Location: NL
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by Chris12 »

when I inspect elements on the standby screen I see this:

Image

So I changed my config to:
Spoiler: show

Code: Select all

/* new OWM weather standby */
.standby [data-id='weather_owm']				{height: 300px !important}
.standby [data-id='weather_owm']  .day			{font-size: 60px !important;font-weight: bold !important;}
.standby [data-id='weather_owm']  .icon 		{width: 100% !important;}
.standby [data-id='weather_owm']  .description	{font-size: 60px !important;}
.standby [data-id='weather_owm']  .max			{font-size: 60px !important;}
.standby [data-id='weather_owm']  .min			{font-size: 40px !important;}
.standby [data-id='weather_owm']  .rain			{font-size: 40px !important;}
Now the other item (a clock) is shown again on the standby screen, but the weather itself is still very big (only the day and half icon is shown due to the height 300px option defined)

Image
Domoticz beta | Dashticz beta | Synology DS415+ | Wall tablet Teclast 11.6inch (Android) | TADO v3 controlled heating
Lokonli
Posts: 2287
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by Lokonli »

On your standby screen you still are using 'weather_owm' instead of 'weather_owm_new'.

If you want to make the weather block a bit smaller, adjust the width parameter, or set the scale parameter to for instance 0.7.

You also can modifiy things in custom.css. If you have only one weather block on your standby screen, then you can use the following:

Code: Select all

.standby .weather {
   font-size: 8px !important
}
This sets the base font size for this block. Almost all sizes are relative to the base font size.

The 'day blocks' of layout 0 and layout 1 have a small padding at the bottom and top. You can remove them with:

Code: Select all

.standby .weather .weatherday {
    padding-top: 0px;
    padding-bottom: 0px;
}
With '.standby' in the CSS selector you select all weather blocks on the standby screen. You can also select a specific weather block by using the data-id selector.

If you have defined your block in CONFIG.js as follows:

Code: Select all

blocks['mycoolweatherblock'] = {
  type: 'weather',
  ...
 }
 
Then you can use the following in custom.css to apply styling to this block specifically:

Code: Select all

[data-id='mycoolweatherblock'].weather {
      font-size: 8px !important
}

[data-id='mycoolweatherblock'].weather .weatherday {
    padding-top: 0px;
    padding-bottom: 0px;
}
Chris12
Posts: 238
Joined: Tuesday 18 August 2020 8:41
Target OS: NAS (Synology & others)
Domoticz version: 2021.1
Location: NL
Contact:

Re: Dashticz v3.8.2 beta: New weather block

Post by Chris12 »

@lokonli, thanks for replying.

I tried your code snippets, but still no success.
I do now have the following css entries:
Spoiler: show

Code: Select all

[data-id='weather-owm-new'].weather .weatherday {padding-top: 0px !important;padding-bottom: 0px!important;}

.standby .weather 	{font-size: 16px !important;}

.standby [data-id='weather-owm-new'].weather			{height: 300px !important;font-size: 16px !important;}
.standby [data-id='weather-owm-new'].weatherday .day	{font-size: 60px !important;font-weight: bold !important;}
.standby [data-id='weather-owm-new'].weatherday .icon .skycon	{width: 50% !important;}
.standby [data-id='weather-owm-new'].weatherday .description	{font-size: 60px !important;}
.standby [data-id='weather-owm-new'].weatherday .max		{font-size: 60px !important;}
.standby [data-id='weather-owm-new'].weatherday .min		{font-size: 40px !important;}
.standby [data-id='weather-owm-new'].weatherday .rain		{font-size: 40px !important;}
I cannot see any change in the padding.
The only part working of the above css code is this:

Code: Select all

.standby .weather 											{font-size: 16px !important;}
When inspecting the standby screen I can still see the weather_own being defined there?
I already cleared browser cache, and restarted the browser (FF)

Image
Domoticz beta | Dashticz beta | Synology DS415+ | Wall tablet Teclast 11.6inch (Android) | TADO v3 controlled heating
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest