dashticz block for the new Energy Dashboard

nfuse · Post by **nfuse** » Tuesday 09 July 2024 12:53

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?

rolandbreedveld · Post by **rolandbreedveld** » Wednesday 10 July 2024 12:50

same question, would be nice if the Energy dashboard, can be added to Dashticz

nfuse · Post by **nfuse** » Wednesday 10 July 2024 16:47

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
}

rolandbreedveld · Post by **rolandbreedveld** » Wednesday 10 July 2024 17:26

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.

Lokonli · Post by **Lokonli** » Saturday 13 July 2024 15:24

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 1216 times

Main change is that there is no Domoticz navigation bar. Further, the margins/paddings have been removed.

nfuse · Post by **nfuse** » Monday 15 July 2024 13:06

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

Beschuitje · Post by **Beschuitje** » Saturday 20 July 2024 11:02

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 1078 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.

dashticz block for the new Energy Dashboard

dashticz block for the new Energy Dashboard

Re: dashticz block for the new Energy Dashboard

Re: dashticz block for the new Energy Dashboard

Re: dashticz block for the new Energy Dashboard

Re: dashticz block for the new Energy Dashboard

Re: dashticz block for the new Energy Dashboard

Re: dashticz block for the new Energy Dashboard

Who is online