Dashticz - Show your dashboard and how-to's!

[Chris12]

@HansieNL: So did strugle arround some more.

I added the Dummy devices as stated in the script file, and added the lua script to my domoticz (found some info that it should be place here: /volume1/@appstore/domoticz/var/scripts/lua), named the script buienradar.lua and set owner to 'domoticz'.

In the logging of domoticz I cannot see any activity of this script.
In dashticz the block is created, added, and shows the umbrella icon with the text Buienradar 'Hello World' on the dashboard.

[madpatrick]

You can add the script in the Domoticz dashboard
Go to Setting/Events
add a LUA script and paste the script into the dashboard

[Chris12]

You can add the script in the Domoticz dashboard
Go to Setting/Events
add a LUA script and paste the script into the dashboard

Ok, I added the script via Setup -> More Options -> Events. Added and saved there as buienradar.lua script (time-based LUA script).
But still nothing visable in the log, and dashticz shows the same 'Hello World' message.

edit: in de logfile staat nu wel

2020-08-29 16:40:00.166 Status: LUA: (Buienradar) Get data from Buienradar
2020-08-29 16:40:03.579 Status: LUA: (Buienradar) os.capture needed more than 1 call: 2

2020-08-29 16:40:03.579 Error: EventSystem: in buienradar.lua: [string "-- script_time_buienradar.lua ..."]:125: attempt to index a nil value (field '?')

[madpatrick]

Did you made the dummy switched and used the correct names (check for typo's) ?

-- create dummy text device from dummy hardware 'Buien Radar'
-- create dummy rain sensor from dummy hardware 'BuienRadarMeter'

[Chris12]

Hi,

I checked the names they're all OK. I even deleted and re-create the Dummy Devices and Virtual sensors.

but still this output in the domoticz logfile:

2020-08-29 18:55:00.148 Status: LUA: (Buienradar) Get data from Buienradar
2020-08-29 18:55:00.303 Error: EventSystem: in buienradar.lua: [string "-- script_time_buienradar.lua ..."]:125: attempt to index a nil value (field '?')

[Chris12]

Good news, it works!

I took the script out of this post: https://www.domoticz.com/forum/viewtopi ... 25#p176925 ( I first used the one of HansieNL, some post above here), change the lon/lat values to match my location.

Now I can see in the logfile no error anymore, and the 'Hello World' is now replaced with 'No Rain'

2020-08-29 19:15:00.364 Status: LUA: BuienRadar module
2020-08-29 19:15:00.517 Status: EventSystem: Script event triggered: buienradar.lua

No idea whats the difference between the scripts, I can see that the number of lines are different.

[Chris12]

Now the 'buienradar' part is working fine, I've got one other thing I would like to change for my dashboard.

How can I make the font smaller of the 'currentweather_big_owm' which shows the actual Temperature + City.
I tried to figure it out myself by using the developers tools in Chrome and came up with this css config part, but that does not work.

Code: Select all

.dt_block[data-id='currentweather_big'] .dt_title {
  font-size: 15px;
  color: yellow;
}

Is there a how-to for searching the correct ellements for within the css ?

[HansieNL]

Spoiler: show

Good news, it works!

I took the script out of this post: https://www.domoticz.com/forum/viewtopi ... 25#p176925 ( I first used the one of HansieNL, some post above here), change the lon/lat values to match my location.

Now I can see in the logfile no error anymore, and the 'Hello World' is now replaced with 'No Rain'

2020-08-29 19:15:00.364 Status: LUA: BuienRadar module
2020-08-29 19:15:00.517 Status: EventSystem: Script event triggered: buienradar.lua

No idea whats the difference between the scripts, I can see that the number of lines are different.

Did you create the dummy devices like in the script?:

Code: Select all

local myBuienRadarDevice = 'Buienradar'
local myBuienRadarMeter = 'RegenData'
local myBuienRadarFlg = 'Paraplu'

[HansieNL]

Spoiler: show

Now the 'buienradar' part is working fine, I've got one other thing I would like to change for my dashboard.

How can I make the font smaller of the 'currentweather_big_owm' which shows the actual Temperature + City.
I tried to figure it out myself by using the developers tools in Chrome and came up with this css config part, but that does not work.

Code: Select all

.dt_block[data-id='currentweather_big'] .dt_title {
  font-size: 15px;
  color: yellow;
}

Is there a how-to for searching the correct ellements for within the css ?

Can you try with:

Code: Select all

.title.weatherdegrees,
.weatherloc {
  font-size: 15px !important;
  color: yellow !important;
}

[madpatrick]

Hi

I've set an img for the LMS icon, but i like to get it bigger


I've set in custom.css
.block_lms .icon {width: 200% !important; height: 200% !important;}

But still it is not getting bigger if i incerease the width value
How do i get the image bigger ?

[HansieNL]

I don’t use a Squeezebox, but the icon looks an image to me. Can you try to replace .icon with img (no dot in front).

[madpatrick]

Correct. I'm using a .png image.

I've tried :
.block_lms img {width: 800% !important; height: 800% !important;}
but does not change the size

------- update --------
i've tried with another block and there i can adjust the size of the image
Looks something in the block is limiting the size of the image

[Chris12]

Spoiler: show

Good news, it works!

I took the script out of this post: https://www.domoticz.com/forum/viewtopi ... 25#p176925 ( I first used the one of HansieNL, some post above here), change the lon/lat values to match my location.

Now I can see in the logfile no error anymore, and the 'Hello World' is now replaced with 'No Rain'

2020-08-29 19:15:00.364 Status: LUA: BuienRadar module
2020-08-29 19:15:00.517 Status: EventSystem: Script event triggered: buienradar.lua

No idea whats the difference between the scripts, I can see that the number of lines are different.

Did you create the dummy devices like in the script?:

Code: Select all

local myBuienRadarDevice = 'Buienradar'
local myBuienRadarMeter = 'RegenData'
local myBuienRadarFlg = 'Paraplu'

No I did create the devices with the names stated in the script file. This is surely the issue it was not working in the first place! Thanks for clarifying this.

[Chris12]

Spoiler: show

Now the 'buienradar' part is working fine, I've got one other thing I would like to change for my dashboard.

How can I make the font smaller of the 'currentweather_big_owm' which shows the actual Temperature + City.
I tried to figure it out myself by using the developers tools in Chrome and came up with this css config part, but that does not work.

Code: Select all

.dt_block[data-id='currentweather_big'] .dt_title {
  font-size: 15px;
  color: yellow;
}

Is there a how-to for searching the correct ellements for within the css ?

Can you try with:

Code: Select all

.title.weatherdegrees,
.weatherloc {
  font-size: 15px !important;
  color: yellow !important;
}

No this does unfortunatelly not do a thing/change for the actual weather.

[lzwfkv]

Spoiler: show

Now the 'buienradar' part is working fine, I've got one other thing I would like to change for my dashboard.

How can I make the font smaller of the 'currentweather_big_owm' which shows the actual Temperature + City.
I tried to figure it out myself by using the developers tools in Chrome and came up with this css config part, but that does not work.

Code: Select all

.dt_block[data-id='currentweather_big'] .dt_title {
  font-size: 15px;
  color: yellow;
}

Is there a how-to for searching the correct ellements for within the css ?

Can you try with:

Code: Select all

.title.weatherdegrees,
.weatherloc {
  font-size: 15px !important;
  color: yellow !important;
}

No this does unfortunatelly not do a thing/change for the actual weather.

Must do with the right block class:

Code: Select all

.big .weatherloc,
.big .weatherdegrees {
  font-size: 15px;  /*default font you see is 24px, decrease that number at will if you want a smaller font or increase otherwise*/
}

to change fonts of every block having class "big"; to change specific OWM big weather block only:

Code: Select all

[data-id="currentweather_big"].big .weatherloc,
[data-id="currentweather_big"].big .weatherdegrees {
  font-size: 15px;  /*default font you see is 24px, decrease that number at will if you want a smaller font or increase otherwise*/
}

Alternatively you can use:
".block_currentweather_big_owm" class, or ".containsweather" class instead of ".big".

[Chris12]

@lzwfkv: Thanks this works!

How do you determine such CSS config? Is there a step-by-step how to?
Because now the font is smaller, how can I align the font and the weather icon to both center.

[lzwfkv]

@lzwfkv: Thanks this works!

How do you determine such CSS config? Is there a step-by-step how to?
Because now the font is smaller, how can I align the font and the weather icon to both center.

Sorry for answering with some delay, i have been busy.
Well, it is difficult to explain all of that in a step-by step guide here and, by the way, i am not that skilled with it to be able to explain, however i will try below.
You should at leat have some very basics of html/javascript/CSS and you can learn some basic syntax on all of them on a site like https://www.w3schools.com/ or serching with google when needed (e.g. syntax or CSS attributes meaning).
Also read/refer to the Dashticz doc at this sections which will explain how the Dashticz blocks are usually composed graphically: https://dashticz.readthedocs.io/en/beta ... icz-blocks (Domoticz Blocks and Special Blocks sections).
Basically every block in Dashticz is made of hierarchical subblocks/sections where all the various elements (title, value/data, icon/image) are placed:

Spoiler: show

Domoticz devices blocks typical structure:
block ID
|-> col-icon (holds the icon/image associated to the block)
|-> col-data (holds various data as below)
|-> title
|-> state/value
|-> last update
Special blocks typical structure:
block ID
|-> col-icon
|-> dt_content
|-> dt_title
|-> dt_state

So you have to identify the section of the block that you need to change/manipulate and set your needed values in CSS for those classes. You can do that, by running the browser's developer tools (press F12 key while on the page) which will allow you to analyse various aspects of the web page, debug network calls, etc. as well as to browse through the rendered page layout in the first Tab (page analysis), so you will be able to determine the CSS fields and classes to manipulate which on turn will have to refer to the HTML element mount point that you can find in the developer tool.

As to the icon position, it is not possible by default, as you can see it is placed in the col-icon subsection which is always the leftmost subblock under the block box; if you really want to change it, you should redefine the width of the col-icon and col-data subsections under the block in custom.css and it might be a bit complex.

[Chris12]

Thansk for explaining, I will have to do some reading/homework! (not my 2 most favorite topics )

[Krenstik]

Here is my one, still under development
( 24" touch screen )

[EdwinK]

Looks nice