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?
dashticz block for the new Energy Dashboard
Moderators: leecollings, htilburgs, robgeerts
dashticz block for the new Energy Dashboard
docker with sonos http api / mosquitto / zigbee2mqtt assistant / portainer / dashticz / nodeJS on windows with Zigbee2Mqtt, and some flask builds of my own
- rolandbreedveld
- Posts: 156
- Joined: Wednesday 09 March 2016 11:25
- Target OS: Raspberry Pi / ODroid
- Domoticz version: 2021.1
- Contact:
Re: dashticz block for the new Energy Dashboard
same question, would be nice if the Energy dashboard, can be added to Dashticz
Raspberry Pi(SSD)+UPS HAT,Dashticz on WallTablet,HomeBridge, P1, HarmonyHub,FritzBox,API to 123Solar+ABB-PowerOne+SMA,ESP-Leds(flashed LSC),Tasmota,Shelly,MQTT,Mosquito,Node-Red,http://wiki.breedveld.net/index.php?title=RPiWaterMeter, Mercedes-Me
Re: dashticz block for the new Energy Dashboard
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
}
frames.energy = {
frameurl:"http://DOMOTICZ_IP/#/Energy",
aspectratio: 0.95,
scaletofit: 950,
scrollbars: false,
// forcerefresh: 1,
width: 12
}
docker with sonos http api / mosquitto / zigbee2mqtt assistant / portainer / dashticz / nodeJS on windows with Zigbee2Mqtt, and some flask builds of my own
- rolandbreedveld
- Posts: 156
- Joined: Wednesday 09 March 2016 11:25
- Target OS: Raspberry Pi / ODroid
- Domoticz version: 2021.1
- Contact:
Re: dashticz block for the new Energy Dashboard
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.
not the best way, with the bar above, hopefully it will be implemented.
Raspberry Pi(SSD)+UPS HAT,Dashticz on WallTablet,HomeBridge, P1, HarmonyHub,FritzBox,API to 123Solar+ABB-PowerOne+SMA,ESP-Leds(flashed LSC),Tasmota,Shelly,MQTT,Mosquito,Node-Red,http://wiki.breedveld.net/index.php?title=RPiWaterMeter, Mercedes-Me
-
- Posts: 2260
- Joined: Monday 29 August 2016 22:40
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: dashticz block for the new Energy Dashboard
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
Add the following to your Domoticz custom.js
Normally: domoticz/www/styles/default/custom.js
Then in Dashticz CONFIG.js define your energy dashboard block as follows:
This will give the following result:
Main change is that there is no Domoticz navigation bar. Further, the margins/paddings have been removed.
* 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;
}
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());
}
Code: Select all
blocks['energydashboard'] = {
frameurl: 'http://domoticz:8080/?view=energy#/Energy',
aspectratio:0.7,
scrollbars: false,
}
Re: dashticz block for the new Energy Dashboard
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
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
docker with sonos http api / mosquitto / zigbee2mqtt assistant / portainer / dashticz / nodeJS on windows with Zigbee2Mqtt, and some flask builds of my own
-
- Posts: 27
- Joined: Saturday 24 February 2018 12:07
- Target OS: Raspberry Pi / ODroid
- Domoticz version:
- Contact:
Re: dashticz block for the new Energy Dashboard
Or you can make an iframe container with the URL of the energydash.
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.
Config height and width and put it in a column
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.
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>
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
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.
Who is online
Users browsing this forum: No registered users and 0 guests