Page 1 of 1
dashticz block for the new Energy Dashboard
Posted: Tuesday 09 July 2024 12:53
by nfuse
Hi All,
i installed domoticz 2024.6 today and there is this nice new fancy energy dashboard is there a simple way to add this to dashticz? other than iframe it?
Re: dashticz block for the new Energy Dashboard
Posted: Wednesday 10 July 2024 12:50
by rolandbreedveld
same question, would be nice if the Energy dashboard, can be added to Dashticz
Re: dashticz block for the new Energy Dashboard
Posted: Wednesday 10 July 2024 16:47
by nfuse
for now i have it like this but it is not ideal
frames.energy = {
frameurl:"http://DOMOTICZ_IP/#/Energy",
aspectratio: 0.95,
scaletofit: 950,
scrollbars: false,
// forcerefresh: 1,
width: 12
}
Re: dashticz block for the new Energy Dashboard
Posted: Wednesday 10 July 2024 17:26
by rolandbreedveld
thats exactly the way I did it, and a big one in the second screen.
not the best way, with the bar above, hopefully it will be implemented.
Re: dashticz block for the new Energy Dashboard
Posted: Saturday 13 July 2024 15:24
by Lokonli
There are a few options:
* Create an energy dashboard within Dashticz
* Modify the Domoticz energy dashboard so it can be used within Dashticz within an iframe.
I've first investigated the second option.
I came with the following approach.
Add the following to custom.css for the Domoticz theme you are using.
By default this domoticz/www/styles/default/custom.css
Code: Select all
/*changes for integration of energy dashboard into dashticz*/
.view_energy .navbar {
display: none !important
}
.view_energy .container-fluid {
padding: 0 !important;
}
.view_energy #copyright {
display:none !important;
}
.view_energy #emain {
width:100% !important;
height: 100vh !important;
margin:0px !important;
border:0px !important;
border-radius: 0 !important;
}
.view_energy body{
padding: 0px;
}
.view_energy .bannercontent {
padding:0px !important;
}
Add the following to your Domoticz custom.js
Normally: domoticz/www/styles/default/custom.js
Code: Select all
var currentUrl = new URL(window.location.href);
var view = currentUrl.searchParams.get('view');
if(view) {
//We will display the customized energy dashboard
$('html').addClass('view_'+view.toLowerCase());
}
Then in Dashticz CONFIG.js define your energy dashboard block as follows:
Code: Select all
blocks['energydashboard'] = {
frameurl: 'http://domoticz:8080/?view=energy#/Energy',
aspectratio:0.7,
scrollbars: false,
}
This will give the following result:
- energydb.jpg (71.95 KiB) Viewed 2874 times
Main change is that there is no Domoticz navigation bar. Further, the margins/paddings have been removed.
Re: dashticz block for the new Energy Dashboard
Posted: Monday 15 July 2024 13:06
by nfuse
thanks for pointing me in the right direction, i couldn't figure it out how to hide the buttons. i went a little bit further and i managed to break the domoticz template a little bij removing the background in css but that doens't matter i use domoticz only for configuring the best thing is that i have it in dashticz exactly how i want it. (for everyone thinking things are not working, after every change in css or js clear your browser history!)
i cant recall the exact things i changed because it was all trial and error but i changed the next files and used background-color:rgba(255,255,255,0.0); allot
www/css/style.css
www/styles/default/base.css
www/styles/default/custom.css
www/styles/default/custom.js
www/views/energy_dashboard.html
Re: dashticz block for the new Energy Dashboard
Posted: Saturday 20 July 2024 11:02
by Beschuitje
Or you can make an iframe container with the URL of the energydash.
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="EnergyDash" content="width=device-width, initial-scale=1.0">
<title>EnergyDash</title>
<style>
.iframeContainer{
position: relative;
width: 500px;
height: 800px;
overflow: hidden;
}
.iframeContent{
position: absolute;
top: -170px;
left: -150px;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div> class="iframeContainer">
<iframe width="512" height="512" src="http://domoticzip:8080/#/Energy" scrolling="no" style="-webkit-transform:scale(0.7);moz-transform-scale(0.7)" class="iframeContent" />
<div>
</body>
Adjust the pixel values in iframecontent and scale values in the container to your own liking.
Save it as html file and put that file in the img folder of Dashticz.
Then make a frame in Dashticz config with the url to your image file.
Code: Select all
frames.Energydash = {
frameurl: "/img/Energydash.html",
refresh: 5000,
height: 276,
scrollbars: false,
width: 9
Config height and width and put it in a column
- Energydashboard.png (95.31 KiB) Viewed 2736 times
Not liking the white background and tried nfuse color suggestions but this doesn't work for me.
In my opinion the dash is not finished by the way. I have 2 P1 measurements (2nd for my heatpump) but only one is selectable in the dash settings
When i then select the idx of 'usage heatpump L1+L2+L3', nothing is displayed in the balloon although in domoticz values can be seen.