NEW frontpage.html - request comments

[Moppersmurf]

In the file frontpage.js search for the text "// Thermostat"
And add the following code above it:

Code: Select all

if(vtype == 'CounterDelivToday' || vtype == 'CounterToday'){
	vdata = vdata + " kWh";
}

Also try setting idx_Usage1 tot the idx of the device. It will change the usage text from "10 WATT" to "10 W" for a cleaner look.

Thanks, found it and also changed the Watt to W. After that I also changed the KWH to look the same like the W

Code: Select all

if(vtype == 'CounterDelivToday' || vtype == 'CounterToday'){vdata = vdata + "<sup style=\'font-size:40%;vertical-align:top;position:relative;bottom:-0.6em;\'> kWh</sup>"};

Looking better and better

[Moppersmurf]

In the file frontpage.js search for the text "// Thermostat"
And add the following code above it:

Code: Select all

if(vtype == 'CounterDelivToday' || vtype == 'CounterToday'){
	vdata = vdata + " kWh";
}

Also try setting idx_Usage1 tot the idx of the device. It will change the usage text from "10 WATT" to "10 W" for a cleaner look.

That's not quite the solution if your meter also registers gas-usage, because it will also show gas-usage in kWh

Your right, didn't see that because gas is on my second page and not that interesting. For now i'll leave it like it is unless anyone knows how to fix this?

[Moppersmurf]

I found there's actually code in frontpage.js that removes kwh and m3.

Code: Select all

		// remove too much text
		//vdata=new String(vdata).split("Watt",1)[0];
		vdata=new String(vdata).split("kWh",1)[0];
		vdata=new String(vdata).split(" Level:",1)[0];
		vdata=new String(vdata).replace("Set","On");
		vdata=new String(vdata).split("m3",1)[0];
		//vdata=new String(vdata).split("C",1)[0];
		vdata=new String(vdata).replace("true","protected");
		//Added by GZ to only show date if <> today, see below
		vdate=new String(vls).split(" ",2)[0];
	}

Fiddled around a bit but can't seem to get it completely right.

[jannl]

As far as I can remember you can put the unit in the settings section.

[racquemis]

Yes, through the UsageTot and GasUsageTot vars. but there is a catch.
If you add several values (data & CounterDelivToday for example) from one device/idx all those values will have the same unit. As far as i can see the script doesn't accomodate for multiple values of the same idx.

[jannl]

Ok, that's propably the reason I added the possibility to use the name instead of the idx.

[Jeff]

Hi All!

For the past few days i'm experimenting with my own version of the frontpage (based on the attachment back on page 4), Now after a few days of trial and error it's looking good.
I actually making 2 versions of it, a non-responsive design and with responsive design, While creating the non-responsive some values are exceeding the boundaries of the cell so that for example the cell for water usage is showing "Liter" at the column of the total water usage and the total gas consumption is overlapping the total kWh usage and the description for the forecast cell is overlapping the forecast prediction which is pretty annoying.

The problem with the responsive design is that cell 10 doesn't match the stylesheet layout and doesn't care about the dimensions plus the hue switches aren't working as seen with the values.

For the overlapping text i've tried to put both value's in the

Code: Select all

// remove too much text
vdata=new String(vdata).split("Watt",1)[0];
							vdata=new String(vdata).split("kWh",1)[0];
                            vdata=new String(vdata).split("m3",1)[0];
                            vdata=new String(vdata).split("Level:",1)[0];
                            vdata-new String(vdata).split("Liter",1) [0];
                            vdata=new String(vdata).replace("Set","On");
							vdata=new String(vdata).replace("true","protected");                  

field but none seem to work and editing the css code for the forecast field buth without luck.

The responsive design HTML code
The responsive design CSS stylesheet

The non responsive design HTML code
The non responsive design CSS code

non responsive page
responsive page

What can i do to solve this.

[SwordFish]

I have 2 Hue ledstrips that i added to my frontpage. Know i want to use in the frontpage settings the z-wave code 5 to dim the leds. Is there someone knows how to align the percentage, its know in my text and i want it in the middle or bottom with %.

Knipsel.PNG (4.67 KiB) Viewed 3288 times

[Polygontrauma]

Hey everyone!

I tried different frontpages which where posted here, and liked Gerards version best. Unfortunately, I can't get my devices to get displayed in this design (of course I edited roomplan number, domoticz url and devices IDX in the frontpage_settings.js, exactly the same way I did as I was testing other frontpages, which worked that way). What could be my problem regarding this frontpage?!

[naitsirhc]

Hi,
I am reading and trying and do more reading and trying and so on. I'm now busy with frontpage and I would love to see the moon phase in my frontpage skin.
I there a posibitly to make a virtual device or something like that, to show the moonphases in the frontpage?



I would also like to see my total ammount of kWh of my solar panels.
The IDX from the panels is: 1825

AEG.JPG (19.01 KiB) Viewed 3185 times

The commands I use are
['1825','CounterToday', 'cell4', 'Elektra vandaag (kWh)','0','0'], --> returns a value
['1825','Usage', 'cell5', 'Actuele opwek (Watt)','0','0'], --> returns a value

I've tried
['1825','Counter', 'cell10', 'Elektra','1','0'],
['1825','CounterTotal', 'cell10', 'Elektra','1','0'],

And more.... unfortunatly it doesn't return the total value.

Can somebody help me please



Kind regards

[jannl]

In the javascript part you could load a different image for the moon depending on the moonphase.

For the counters,
I use for total Mwh: 'Data', I also use CounterToday and Usage.
If you issue the json command used in the frontpage code, you see all the fields present in a certain switch (etc). You can see there what to use.

[Tcar79]

Hi All,
Maybe somebody can help me. I really have no idea what I’m doing wrong. It seems so simple, but I don’t get my temp + hum sensor to work in the frontpage?!? Thanks to all the above great work from you guys I got a lot working already, but my simple (433hz origon) sensors keeps giving me dashes in the frontpage. It works everywhere, just not in my frontpage.
- Yes, it’s visible in domoticz temperature tap (data is accurate and up to date)
- Yes, it’s in the right roomplan which is used in the frontpage
- Yes, /json.htm?type=devices&plan=2 shows my sensors. Idx = 152
In frontpage_settings I have the following input

Code: Select all

	['0','Desc',		'cell2',	'Kamer Max','0','0'],
	['152','Temp',		'cell2a',	'Temperatuur','1','0'],
	['152','Humidity',	'cell2b',	'Windsnelheid','0','0'],

The output in the frontpage is like the following image (cell 2 is the lowest button):

temp wel en niet.jpg (27.24 KiB) Viewed 3108 times

Strangely my WU sensor works fine without any editing like you see above the Kamer Max in the image. I thought I had it working a while ago, but now only the description and dashes…
Seems like a stupid question, but does anybody know what I’m doing wrong or what am I missing?
Json output:

json output t1.jpg (87.67 KiB) Viewed 3108 times

[jannl]

You can show debug info in de browser and check the error messages.

[Tcar79]

You can show debug info in de browser and check the error messages.

My console is full of errors, but al related to sonos. I haven't configured or changed anything there, so it's still looking for gerard's sonos. Nothing I can find on the sensors. Do I have to look somewhere specifically?

[jannl]

You also can add console.log linea in the frontpage.js file to display the value you want to see. There are a lot of if statements in the code. I once had the problem an unexpected if caught a value, resulting in a similar problem you have

[naitsirhc]

For the counters,
I use for total Mwh: 'Data', I also use CounterToday and Usage.
If you issue the json command used in the frontpage code, you see all the fields present in a certain switch (etc). You can see there what to use.

It worked like a charm, Thanks Jannl

however I still would like to implement the moonphases. I can adapt a picture, but therefore I need to implement the code for moon phases times for moon up and moon down.

Is it possible?

[Tcar79]

You also can add console.log linea in the frontpage.js file to display the value you want to see.

Thx! But, how, where? First time to do this. Where to place the log for a function I dont have/see/understand?
I put console.log(vdata) underthe humidity and temp, but only got a % in my console.

Edit: Put the log behind the right humidity and then it only logs the WU humidity. He doesn't seem to find any other item with humidity.
Any idea? I dont know how to log only the specified item/idx. anybody has a script for that?

[jannl]

In the javscript you can check for the correct idx. If you do not now anything about scripting this will really take some time and using google. Tip: do not change more then 1 thing at a time.

[jannl]

For the counters,
I use for total Mwh: 'Data', I also use CounterToday and Usage.
If you issue the json command used in the frontpage code, you see all the fields present in a certain switch (etc). You can see there what to use.

It worked like a charm, Thanks Jannl

however I still would like to implement the moonphases. I can adapt a picture, but therefore I need to implement the code for moon phases times for moon up and moon down.

Is it possible?

I created a virtul switch in domoticz which indicates if it is day or nightime. Depending on that switch I show a sun or moon weather picture. In this way you also can change the moonphases. The example for this is in one of the zips in this thread I guess

[Tcar79]

In the javscript you can check for the correct idx. If you do not now anything about scripting this will really take some time and using google. Tip: do not change more then 1 thing at a time.

Thx again. Good tip!
I know something about javascript, only not in combination with domoticz. I tried all I know, but the page just doesn't seem to find the 152 idx. I dont know how to call the seperate idx in a javascipt. I can log the WU sensor, but not the 152 because the page doesnt seem to find it.

I tried:
if(item.idx == idx_testje){
console.log(vdata);
}
but that doesnt give me anything. If I change idx_testje (in frontpage_settings) to the WU idx, I get a perfectly good log.

To test the sensor in another frontpage I downloaded the one html responsive frontpage from Dountill. I adjusted the parameters with my sensor and it works like a charm! So it should work in the other one as well. Why not!!!??

Anybody any idea how to log an specific idx which isn't recognized as an item?