Pure HTML/CSS Domoticz Interface

In this subforum you can show projects you have made, or you are busy with. Please create your own topic.

Moderator: leecollings

Post Reply
fountside
Posts: 7
Joined: Tuesday 13 May 2014 18:05
Target OS: Linux
Domoticz version:
Contact:

Pure HTML/CSS Domoticz Interface

Post by fountside »

Hello all,
I have finished another version of my bespoke HTML front end template which is available at
https://github.com/fountside/domoticz-html-frontend

An accompanying YouTube video is available at
https://youtu.be/qgtygNnhQpQ

Please feel free to use any components from this HTML template for your own projects or you can download the CSS, start with the index.htm page and build your own multi-page panel. This front end is useful for homes where there are multiple (non-expert) users who will use static panels and smartphones as the template is auto-formatting to landscape and portrait screens.

I hope this is useful to someone out there, as it has taken a long time to refine the HTML and reusable JavaScript to get to this point. Thanks for reading.
Attachments
Portrait 1
Portrait 1
ScreenCap4.png (138.31 KiB) Viewed 1830 times
Landscape 2
Landscape 2
ScreenCap2.png (204.22 KiB) Viewed 1830 times
Landscape 1
Landscape 1
ScreenCap1.png (257.34 KiB) Viewed 1830 times
hoeby
Posts: 531
Joined: Saturday 02 June 2018 11:05
Target OS: Raspberry Pi / ODroid
Domoticz version: V2022.1
Location: Echt, Netherlands
Contact:

Re: Pure HTML/CSS Domoticz Interface

Post by hoeby »

Great for sharing this with use.

Wanted to let you know, that my html dashboard is made with your code. Not the one you posted here, but found on kind of blog you made.
https://fabuloushomeautomation.wordpress.com

This where the first stages
https://www.domoticz.com/forum/viewtopi ... 09#p186409

Now it looks like this
https://contactkring.nl/phpbb/viewtopic ... 1a11&p=934

I will for sure look to your html/css code.
Make some dirty programming in my html code. Wanted to look how you solved some things.
Thin-client --> Docker Domoticz main environment
Pi3A+ --> Google home (GAssistPi)
Pi3B+ --> Docker (P1monitor, Domoticz test environment, Ubiquity controller)
fountside
Posts: 7
Joined: Tuesday 13 May 2014 18:05
Target OS: Linux
Domoticz version:
Contact:

Re: Pure HTML/CSS Domoticz Interface

Post by fountside »

Thanks for your reply! Glad my code is of use to you, and I really like the look of your panel.
hoeby
Posts: 531
Joined: Saturday 02 June 2018 11:05
Target OS: Raspberry Pi / ODroid
Domoticz version: V2022.1
Location: Echt, Netherlands
Contact:

Re: Pure HTML/CSS Domoticz Interface

Post by hoeby »

2 Years ago i started with the dashboard, based on your code.
I show the dashboard on a touch screen which was connected to a Win10 machine.
This machine is not used for other things, only for showing the dashboard. When i started 2 years ago, i connected the screen to a PI 3B+, but processor went to 100%. When the Pi4 8gb came on the market, that was a new option to try.

I boughted one and installed everything from fresh.
All works without problems. Running on +/- 4 % processor use. Last week i connected the screen and opened the dashboard, the processor use raised to 15%. I think this has to do with my kind of programming, by updating the device status. Becasue when i want to update more device status, then the processor use is raising.

On my home screen there is a word-clock, which jumps from left to right, kind of screen saver.
On the background, the dashboard is asking the status for 12 devices. These devices are: Smokedetectors, doorbell.
I ask these status, because when one changes, the screen automatically jumps to smokedetector screen or doorbell screen. So you could see which smoke detector made the status change, of showing the camera from the frontdoor.
I noticed that these multi device status checks, will raise the processor use.

The idea to lower the processor use, is to make 1 selector dummy switch.
When it has value 0, not changed.
When it has value 10, go to firescreen
When it has value 20, go to camera screen

THe idea for this, that i only have to check 1 device and not 12.
This also needs some programming in domoticz, to get that selector dummy switch to work propperly.

Or do you have other options/ideas how to solve this?


PS.
i don't use multi .htm files. Only the index.htm with slider function in it.
This slide functions gives the option to work with pages in 1 .htm file.
To not update every page in the background i erase and set the "setInterval" value. Done this already a year ago, but looking further to lower the processor impact when using the page/dashboard.
Thin-client --> Docker Domoticz main environment
Pi3A+ --> Google home (GAssistPi)
Pi3B+ --> Docker (P1monitor, Domoticz test environment, Ubiquity controller)
hoeby
Posts: 531
Joined: Saturday 02 June 2018 11:05
Target OS: Raspberry Pi / ODroid
Domoticz version: V2022.1
Location: Echt, Netherlands
Contact:

Re: Pure HTML/CSS Domoticz Interface

Post by hoeby »

Playing a little with your code.
But could you help me?

I want to take out the part, which gives the popup menu, to change settings and close when finished.
Found some items, but missing things, because i got a lot of errors. Hope you can help me
Thin-client --> Docker Domoticz main environment
Pi3A+ --> Google home (GAssistPi)
Pi3B+ --> Docker (P1monitor, Domoticz test environment, Ubiquity controller)
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest