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.
Pure HTML/CSS Domoticz Interface
Moderator: leecollings
Pure HTML/CSS Domoticz Interface
- Attachments
-
- Portrait 1
- ScreenCap4.png (138.31 KiB) Viewed 1830 times
-
- Landscape 2
- ScreenCap2.png (204.22 KiB) Viewed 1830 times
-
- Landscape 1
- ScreenCap1.png (257.34 KiB) Viewed 1830 times
-
- 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
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.
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)
Pi3A+ --> Google home (GAssistPi)
Pi3B+ --> Docker (P1monitor, Domoticz test environment, Ubiquity controller)
Re: Pure HTML/CSS Domoticz Interface
Thanks for your reply! Glad my code is of use to you, and I really like the look of your panel.
-
- 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
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.
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)
Pi3A+ --> Google home (GAssistPi)
Pi3B+ --> Docker (P1monitor, Domoticz test environment, Ubiquity controller)
-
- 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
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
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)
Pi3A+ --> Google home (GAssistPi)
Pi3B+ --> Docker (P1monitor, Domoticz test environment, Ubiquity controller)
Who is online
Users browsing this forum: No registered users and 1 guest