NEW frontpage.html - request comments

[G3rard]

Hi,
I also use the frontpage. I was able to add the current and total electricity usage and Gas meter usage from my smart meter. However, I also want to add the costs to the frontpage. How can I do this? I already used and changed the vdata for adding kWH or Watt. ?

I used this part of code:

Code: Select all

if(item.idx == '83'){			// Adds Watt after current electricity usage
		//vdata=new String(vdata).replace( vdata,vdata + "%");
		if (vdata == vtotal) {
		//vdata = Math.round(cur_elec_cost / 100* vdata);
		vdata = vdata+"<sup style=\'font-size:50%;vertical-align:top;position:relative;bottom:-0.2em;\'> kWh</sup>";
		} else {
		vdata = vdata+"<sup style=\'font-size:50%;vertical-align:top;position:relative;bottom:-0.2em;\'> Watt</sup>";
		}}

Hope someone can help.

I guess you don't have the costs available in Domoticz? In that case you can indeed make a calculation like the out commented code in your example.
Just use a second cell with the idx 83 in put your calculation for vdata in the code.

[JuanUil]

Hi all,

I have another problem:
I have a virtual switch "Thuis" and I want the apperance in the switch change from on / off to Thuis / Weg
when I activate this code in frontpage.js the switch isn't switchable anymore.
in

Code: Select all

		// replace On/Off to Thuis/Weg
		if (item.idx == idx_Thuis && vdata == 'On' ){
		vdata=new String(vdata).replace( "On", "Thuis");
	}
	if (item.idx == idx_Thuis && vdata == 'Off'){
		vdata=new String(vdata).replace( "Off", "Weg");
		alarmcss=color_off;
	}

in frontpage_settings.js I have placed this:

Code: Select all

var idx_Thuis = '62';

When I deactivate the code he is switchable again.
Anybody any idea?
Thnx
Juan

[bierlaagh]

Hi all,

I have another problem:
I have a virtual switch "Thuis" and I want the apperance in the switch change from on / off to Thuis / Weg
when I activate this code in frontpage.js the switch isn't switchable anymore.
in

Code: Select all

		// replace On/Off to Thuis/Weg
		if (item.idx == idx_Thuis && vdata == 'On' ){
		vdata=new String(vdata).replace( "On", "Thuis");
	}
	if (item.idx == idx_Thuis && vdata == 'Off'){
		vdata=new String(vdata).replace( "Off", "Weg");
		alarmcss=color_off;
	}

in frontpage_settings.js I have placed this:

Code: Select all

var idx_Thuis = '62';

When I deactivate the code he is switchable again.
Anybody any idea?
Thnx
Juan

Wouldn't it be easier to replace the string in something like this:

Code: Select all

if(item.idx == idx_Thuis ){
		vdata=new String(vdata).replace( "ON","Thuis");
		vdata=new String(vdata).replace( "Off","Weg");
	}
	

just my 5 cent, i haven't tried it myself.

[JuanUil]

Thnx for your reply,

No not working,
strange is that When I replace it with

Code: Select all

		// replace On/Off to Thuis/Weg
		
		if(item.idx == idx_Thuis ){
      vdata=new String(vdata).replace( "Aan","Thuis");
      vdata=new String(vdata).replace( "Uit","Weg");
   }

then it becomes switchable again but text is then AAN or UIT
strange.........

[bierlaagh]

Indeed, strange.

just to see the whole picture...

The IDX is 62

what is the outcome of :

http://YOURDOMOTICZIP:PORT/json.htm?type=devices&rid=62

and what is config of the cell its printed in (in FrontPage_settings.js)?

[JuanUil]

Thnx for your help,
this is for node 62

Code: Select all

{

    "ActTime": 1440762241,
    "ServerTime": "Aug 28 2015 13:44:01",
    "Sunrise": "06:44:00",
    "Sunset": "20:32:00",
    "result": 

[

        {
            "AddjMulti": 1,
            "AddjMulti2": 1,
            "AddjValue": 0,
            "AddjValue2": 0,
            "BatteryLevel": 255,
            "CustomImage": 9,
            "Data": "On",
            "Favorite": 0,
            "HardwareID": 5,
            "HardwareName": "dummy",
            "HaveDimmer": true,
            "HaveGroupCmd": true,
            "HaveTimeout": false,
            "ID": "001408D",
            "Image": "Generic",
            "IsSubDevice": false,
            "LastUpdate": "2015-08-28 13:22:40",
            "Level": 0,
            "LevelInt": 0,
            "MaxDimLevel": 15,
            "Name": "Thuis",
            "Notifications": "false",
            "PlanID": "0",
            "Protected": false,
            "ShowNotifications": true,
            "SignalLevel": 7,
            "Status": "On",
            "StrParam1": "",
            "StrParam2": "",
            "SubType": "AC",
            "SwitchType": "On/Off",
            "SwitchTypeVal": 0,
            "Timers": "false",
            "Type": "Lighting 2",
            "TypeImg": "lightbulb",
            "Unit": 1,
            "Used": 1,
            "UsedByCamera": false,
            "XOffset": "0",
            "YOffset": "0",
            "idx": "62"
        }
    ],
    "status": "OK",
    "title": "Devices"

}

and this is in frontpage_settings.js

Code: Select all

	['62',	'Status',	'cell11',		'thuis / weg','0','0'],
	['67',	'Status',	'cell12',		'lamp tafel voor','0','0'],
	['76',	'Status',	'cell13',		'lampen achter (kast)','0','0'],

[bierlaagh]

0kay, I figured it out!

I have created the same situation and managed to reproduce the problem.

The problem lies in the fact that the scripts is making cells switchable depending on the content looking for on or off (around line 634 in frontpage.js)

So what you have to do is:

remove the code you already placed

add the folowing to the frontpage_settings.js (somewhere on top but below the var txt_on and var txt_off):

Code: Select all

var txt_thuison = 'Thuis'; 
var txt_thuisoff = 'Weg'; 

fter that jou go to the frontpage.js

and place the following code after the clickable part (around line 634, depends on what jou have altererd yourself):

Code: Select all

	//change text of thuis weg, placed after switch code above, otherwise is is not clickable
	if (item.idx == idx_Thuis && vdata == txt_on){ //txt_on from frontpage settings
		vdata=txt_thuison;
		alarmcss=color_on;
	}
	if (item.idx == idx_Thuis && vdata == txt_off){ //txt_off from frontpage settings
		vdata=txt_thuisoff;
		alarmcss=color_off;

save it all and then you should have "Thuis" and "weg"in your FrontPage (with the alarm colors "Green" and "Red
"
and is should be clickable

[JuanUil]

Thanx verry much, that did the trick!!

[jompie]

Hi,
I also use the frontpage. I was able to add the current and total electricity usage and Gas meter usage from my smart meter. However, I also want to add the costs to the frontpage. How can I do this? I already used and changed the vdata for adding kWH or Watt. ?

I used this part of code:

Code: Select all

if(item.idx == '83'){			// Adds Watt after current electricity usage
		//vdata=new String(vdata).replace( vdata,vdata + "%");
		if (vdata == vtotal) {
		//vdata = Math.round(cur_elec_cost / 100* vdata);
		vdata = vdata+"<sup style=\'font-size:50%;vertical-align:top;position:relative;bottom:-0.2em;\'> kWh</sup>";
		} else {
		vdata = vdata+"<sup style=\'font-size:50%;vertical-align:top;position:relative;bottom:-0.2em;\'> Watt</sup>";
		}}

Hope someone can help.

I guess you don't have the costs available in Domoticz? In that case you can indeed make a calculation like the out commented code in your example.
Just use a second cell with the idx 83 in put your calculation for vdata in the code.

Hi G3rard,

thanks for your remark. However, when I create another cell which also looks to idx 83, this will have the same values as my original cell. Or do I make a mistake here?
You also question that I don't have the costs in Domoticz. I can add them, but how can I get them out and make them available in the frontpage.html? Do you have a clue?
Hope you can help.

[G3rard]

You have to do a calculation in that second cell with the vdata of idx 83. In the code you sent earlier there was already an out commented line. Try it further with that code and google how to make calculations in javascript (stackoverflow.com is a good source).

If you have the costs in Domoticz then this will also have an idx I presume? Then you can add that idx to the frontpage.
I am on holiday right now so can't help you with examples etc.

[jossie67]

I want to create a 3 and 4th page in frontpage.

So I copied 'cell2_1', till cell2_25 in frontpage_settings.js
change 2_ to 3_.

In frontpage_settings.js I copied
<!-- Page 2 -->
....
</div>
</div>
</div>
</div>
</div>

When I go to the 3th screen I get this



I think i miss one or two </div>, but I can't findout where

[G3rard]

You also have to define the new cells in the css files (folder css) to have the same layout.

[ThinkPad]

User 'Dountill' has already made it responsive a while ago: http://domoticz.com/forum/viewtopic.php ... 350#p30350
Then user 'thorbj' built further on that version: http://domoticz.com/forum/viewtopic.php ... 377#p33377

[jossie67]

You also have to define the new cells in the css files (folder css) to have the same layout.

Ofcourse.... How simple

[mvveelen]

Now that Jumbotroll is updating the package for the Synology users almost daily, I was forced to restore the frontpage every time I updated Domoticz. So I had to upload the icons folder, the frontpage.html, images, .js files, .css files, etcetera.

So I wanted the frontpage to be in the web folder on the Synology and decided to try that. Everything seemed to work, BUT if I wanted to turn a light on or off.....nothing..... So I took a look at the code and decided to change one little thing in the

frontpage.js :

Search for the 5 entries with:

Code: Select all

url: "json.htm?type=command&param=switchscene" + (etc)

and replace it by

Code: Select all

url: $.domoticzurl+"/json.htm?type=command&param=switchscene" + (etc)

So only the first part of the 5 lines is changed: $.domoticzurl+ and don't forget the slash !!

I also changed the name of frontpage.html to index.html and now I can open my frontpage just bij entering the IP address of my Synology and then the subfolder:

http://192.168.0.124/frontpage

A few minutes ago I updated to Domoticz V2.2927 and the frontpage wasn't affected anymore Didn't have to upload anything after the update for the frontpage.

[HPsweden]

Hi Forummembers,

Quite new to Domoticz but have got everything up and running on PC, Z-wave components and Webcams.

Just tried the new frontpage.html as well and that works also great.

Did some small adds to get webcams visible in the frontpage.html as well and added that under Template -> so visible under Custom in normal index.html view.

To the problem ->

Logging in externally through my ddns works like a charm and activating the frontpage.html from custom menu also works, but then going back to index.html via tabs gives me blank pages or pages with no values, like the $domotics url changed and trying to connect through ddns instead....

Someone here having some ideas in the right direction to solve this?

//HP

[stuffer]

He G3rard and others!

Very nice frontpage! Playing with it now for 3 days and it is fun (and has a WAF).

2 things i don't see how to do it:

Customize cell 3 what is used now for the camera images. Can i use it for an other api link (or google maps with traffic?)

Is it possible to display the domoticz graphs into slide 2?

Hope you can point me in the right direction

----Edit----

hi,

if we want use frontpage on different screen size, some guy had to change CSS..

not good for me and I made a trick.

put this in frontpage.html header

Code: Select all

<script type="text/javascript">
//<!--

<!-- viewport auto detect best scale -->		
	var def = 962;	
	var actual = document.documentElement.clientWidth;
	var scale = Math.ceil((actual/def)*100)/100;
	document.querySelector("meta[name=viewport]").setAttribute('content','width=device-width, initial-scale='+scale+', maximum-scale='+scale+', user-scalable=no');

//-->
</script>	

tested on 4", 5", 7", 9", 10" android devices, and frontpage always fit the screen

Just had it in the frontpage.html and my 7"Lenovo with chrome makes the page smaller than it was. The bottem line from G3rard his frontpage is falling off.....

Does it need to be placed in a particular place in the header?

[G3rard]

The code for the camera image of cell 3 is in the frontpage.html file, so you can change it there. The buienradar image is also part of that file.

I haven't tried to display graphs but that must be possible as well.

[stuffer]

Thanx all, will work on that!


------
Edit
------
Unfortunately the auto-size won't work on the tablet. The notification bar and the action buttons are in the way. I tryed to install an other launcher and auto-hide buttons app but that won't work.

When i searched more on the android problem, I discovered that it is an typical android thing.

http://www.smashingmagazine.com/2011/08 ... d-tablets/ (old post but i get the point)

Enough for today

[JuanUil]

Hi all,

I have the frontpage working fine now.
I want to change the stepsize for adjusting the thermostat from 1 to 0.5 but i can't find where to do that.
Is it possible?

tnx for your help

Juan