Domoticz

Posted: **Saturday 24 April 2021 22:32**

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 (32.38 KiB) Viewed 2929 times

: weather_current.jpg (12.19 KiB) Viewed 2929 times

: weather_detailed.jpg (27.71 KiB) Viewed 2929 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.

Posted: **Sunday 25 April 2021 9:47**

Great

Another reason to redo the dashboard.

Posted: **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

Posted: **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.

Posted: **Sunday 25 April 2021 13:30**

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.

Posted: **Sunday 25 April 2021 13:34**

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.

Posted: **Sunday 25 April 2021 17:00**

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

Posted: **Sunday 25 April 2021 19:28**

Great !
I have it working (in basics) and will test it the next coming days.

Posted: **Sunday 25 April 2021 19:53**

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)

Posted: **Sunday 25 April 2021 20:17**

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

Verstuurd vanaf mijn AC2003 met Tapatalk

Posted: **Sunday 25 April 2021 20:20**

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

Posted: **Sunday 25 April 2021 20:43**

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

Thanks a lot lokonli

Posted: **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;}

Posted: **Monday 26 April 2021 9:51**

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

Posted: **Monday 26 April 2021 10:43**

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

Posted: **Monday 26 April 2021 10:48**

Did you try to reduce the font sizes ?
60px is pretty big
Also your icon is at 150%

Posted: **Monday 26 April 2021 10:49**

Hi just editted my previous post with the actual css.
Still the same behavior.

Posted: **Monday 26 April 2021 10:57**

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

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)

Posted: **Monday 26 April 2021 13:47**

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

Posted: **Monday 26 April 2021 17:22**

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

Domoticz

Dashticz v3.8.2 beta: New weather block

Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block

Re: Dashticz v3.8.2 beta: New weather block