NEW frontpage.html - request comments

[pvm]

I'm working on a dashboard in that style, but currently really customized to my setup
Colors and layout based on Toon. But definitely work in progress

[Skorpion]

I use Hue color, LivingColors and LivingWhites. I double checked the code, and as far as I can see, it doesn't differ from yours. There probably must be a faulty piece of code in my files though, because my RPi cpu usage goes sky high when I enable the dimmer function for one or multiple lamps.

Does it work if you use the frontpage.js file from the version I have shared in this topic?

So far, no succes here. But I will keep trying to get it to work.

Edit:

I found out that, while testing in my Firefox webconsole, I get this error "SyntaxError: expected expression, got end of script" , when I press the minus or plus button to dim the lights. It directs me to the frontpage.html line 1 rule. Nothing exciting there, so does anyone know where or how this problem can be fixed?

Thanks in advance!

[jossie67]

Probably a stupid question, but can I swip to the 'next' page , to see cell 20 ect, on a desktop with chrome.

You can add some lines of code in frontpage.html to give you some small arrows which you can use to swipe on a desktop.

After
<div id="cnt" class="v-wrap">
<div class="v-box">
of page 1 in frontpage.html add the following:

Code: Select all

<!-- show arrow to scroll on desktop -->
<div id="right-arrow"
     style="font-size: 20px; position: absolute; right: 23%; top: 50%; z-index: 1000;"
     onclick="javascript:window.mySwipe.next();">
     <a href="#">></a>
</div>

And after
<div id="cnt" class="v-wrap">
<div class="v-box">
of page 2 add the following code

Code: Select all

<!-- show arrow to scroll on desktop -->
<div id="left-arrow"
     style="font-size: 20px; position: absolute; left: 23%; top: 50%; z-index: 1000;"
     onclick="javascript:window.mySwipe.prev();">
     <a href="#"><</a>
</div>

The position will probably be dependent on the size of your frontpage, but this code is working for me.

G3rard Thanks,

I will this.

[pinhead]

I really like this FrontPage option in Domoticz so i'm creating one but I have a question.

I have a few outdoor camera wich I would like to add. The Axis camera are working correctly but I also have a Foscam fi9804.
But for some reason I cannot get this one to work in the Frontpage
does anyone know how I can add the Foscam camera in the FrontPage.html file.

I have added the camera to Domoticz with the following settings

ipaddress = ipaddres of the camera
portnumber = 88
username = empty
password = empty
imageurl = cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=username&pwd=password

With the following url I can access the camera within a browser
<http://ipaddress:portnumber/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=username&pwd=password>

[ThinkPad]

Maybe try a different URL, enough options here: http://www.ispyconnect.com/man.aspx?n=foscam (CTRL-F 'FI8094').

I would try the last one (http://IPADDRESS/snapshot.cgi?)

[pinhead]

Maybe try a different URL, enough options here: http://www.ispyconnect.com/man.aspx?n=foscam (CTRL-F 'FI8094').

I would try the last one (http://IPADDRESS/snapshot.cgi?)

Thanx, I already looked at that website. There is where I found the url.
<http://ipaddress:portnumber/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=username&pwd=password>
This is the only one which is working, if I enter this url in my webbrowser I'll see a snaphot.

But I have a working solution when I add this to my FrontPage.html it works,
<img src="http://192.168.3.245:88/CGIProxy.fcgi?c ... i]username[/i]&pwd=password&t=" "width="222px" height="216px" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' />

The only 'problem' now is that i'm not completly flexible with the width and height settings with some values I don't see any changes. The size stays the same. Looks like in need to change the cell sizes so it fits more nicely in the cells.

[Heisenberg]

I'm working on a dashboard in that style, but currently really customized to my setup
Colors and layout based on Toon. But definitely work in progress

Looks very nice pvm! Could you please share your code?

[G3rard]

This is a great topic and makes live easier to switch and check status on a tablet on the wall.

I ran into some question marks on how to get some thing arranged and I have already been scouting the forum to find the answer in which I was unsuccesfull till now.

I now turn to you guys for help.

See the screencapture of the what I have up till now and I'm looking to have a live camera feed in the left over cell which is cell3 and all the somfy's and the one Blind (rolluik) provide a clear status but I cannot get them to action when I push the button.

Can some one help me with the instruction to implement the life feed which ultimate I would like to have taking a picture when someone pushes the doorbell button and save this picture on my Raspberry Pi. Also which code do I need to implement or change to get the buttons to action the blinds to open or closed.

FullSizeRender.jpg

I am using the following in frontpage.html for my camera. It also depends on your camera brand.

Code: Select all

<div id="cell3"><img src="http://username:password@ip-address/videostream.cgi"  onClick="lightbox_open('camera', 25400);" width="200px" class='camera' /></div>

It's not showing the feed in Chrome on the PC, but is does show the feed in Safari on the iPad.

I also have two somfy's, but not yet configured them. Will do that and try to get it working in the frontpage. Will let you know if I get it working.

Thx a million this finally worked , got the camera now up and running.

Yes I would really appriciate if you would find out something on the switches .

I have added the Somfy switches to the Frontpage. Use the following steps:
- Create a virtual on/off switch
- Make the following blockly
if <virtualswitch>=on
set <your_somfy_switch> = on
else if <virtualswitch>=off
set <your_somfy_switch> = off

You have to use on and off for the Somfy switch, close and open is not working.

Add the virtual switch to the frontpage and you can close and open the blinds

[ThinkPad]

I always include an extra check in my events (red marked part)

if <virtualswitch>=on AND somfy_switch = Off
set <your_somfy_switch> = on
else if <virtualswitch>=off AND somfy_switch = On
set <your_somfy_switch> = off

Domoticz doesn't really needs it (we can see because you tell it is working) but it definately is a better approach code-wise seen...
Because if the somfy_switch is already on, why do we want the event to do it again? Saves some CPU-load

[G3rard]

I always include an extra check in my events (red marked part)

if <virtualswitch>=on AND somfy_switch = Off
set <your_somfy_switch> = on
else if <virtualswitch>=off AND somfy_switch = On
set <your_somfy_switch> = off

Domoticz doesn't really needs it (we can see because you tell it is working) but it definately is a better approach code-wise seen...

True, I am also always using that in other cases, but in this case it caused the Somfy to not close the blinds (or in some cases it stopped after 1 second).
When I removed the red part all went okay.

[Gerwin1967]

I always include an extra check in my events (red marked part)

if <virtualswitch>=on AND somfy_switch = Off
set <your_somfy_switch> = on
else if <virtualswitch>=off AND somfy_switch = On
set <your_somfy_switch> = off

Domoticz doesn't really needs it (we can see because you tell it is working) but it definately is a better approach code-wise seen...

True, I am also always using that in other cases, but in this case it caused the Somfy to not close the blinds (or in some cases it stopped after 1 second).
When I removed the red part all went okay.

Thx Guys,

This helps me a lot and I'm happy I can operate them now from the frontpage.

Rgds,

Gerwin1967

[Skorpion]

As some of us have traffic info in their dashboards, I came across something I think is very nice. On this page they describe how you can implement the "Flitsmeister" widget. This includes traffic (jam) info & speed traps. http://tesla.flitsmeister.nl/widgets.html

It would also be very neat to get the train information included. E.g. http://vertrektijden.rijdendetreinen.nl ... n&stijl=tb This can be adjusted to any railroad station in the Netherlands and big stations in surrounding countries. As far I can see, there isn't any API for the Dutch railroad yet.

[WebStar]

Probably a stupid question, but can I swip to the 'next' page , to see cell 20 ect, on a desktop with chrome.

You can add some lines of code in frontpage.html to give you some small arrows which you can use to swipe on a desktop.

After
<div id="cnt" class="v-wrap">
<div class="v-box">
of page 1 in frontpage.html add the following:

Code: Select all

<!-- show arrow to scroll on desktop -->
<div id="right-arrow"
     style="font-size: 20px; position: absolute; right: 23%; top: 50%; z-index: 1000;"
     onclick="javascript:window.mySwipe.next();">
     <a href="#">></a>
</div>

And after
<div id="cnt" class="v-wrap">
<div class="v-box">
of page 2 add the following code

Code: Select all

<!-- show arrow to scroll on desktop -->
<div id="left-arrow"
     style="font-size: 20px; position: absolute; left: 23%; top: 50%; z-index: 1000;"
     onclick="javascript:window.mySwipe.prev();">
     <a href="#"><</a>
</div>

The position will probably be dependent on the size of your frontpage, but this code is working for me.

G3rard Thanks,

I will this.

Or add after

$(document).ready(function(){

this code

Code: Select all

$("body").keydown(function(e) {
	if(e.keyCode == 37) { // left
		window.mySwipe.prev();
	} else if(e.keyCode == 39) { // right
		window.mySwipe.next();
	}
});

Then you can use the right and left arrows on the keyboard to navigate

[jossie67]

Has any one put his/her sunshade in this frontpage?

[bernard]

@G3rard : Do you have a new(er) version of Frontpage ? Perhaps an idea to post it @ GitHub ?

[bernard]

i changed the floorplan in the settings and added an existing switch. Now i see NAN .. did i forget something ?

[G3rard]

Has any one put his/her sunshade in this frontpage?

Yep, see my previous post, I have copied the text below. That works for my Somfy blind and sunshade.

I have added the Somfy switches to the Frontpage. Use the following steps:
- Create a virtual on/off switch
- Make the following blockly
if <virtualswitch>=on
set <your_somfy_switch> = on
else if <virtualswitch>=off
set <your_somfy_switch> = off

You have to use on and off for the Somfy switch, close and open is not working.

Add the virtual switch to the frontpage and you can close and open the blinds

[G3rard]

@G3rard : Do you have a new(er) version of Frontpage ? Perhaps an idea to post it @ GitHub ?

I have made some updates in the meanwhile. These updates are mostly regarding the layout (e.g. to nicely fit the screen of the Nexus 7 I have recently bought).

I will look into Github to post the latest version there.

[G3rard]

i changed the floorplan in the settings and added an existing switch. Now i see NAN .. did i forget something ?

You can ceep the floorplan on '0'. That will allow you to use all the switches etc. without adding them to a separate floorplan (at least if you haven't put the switch to the hidden floorplan).

I have sent you a PM with some questions to see if I can help you with the NAN issue.

[G3rard]

Or add after

$(document).ready(function(){

this code

Code: Select all

$("body").keydown(function(e) {
	if(e.keyCode == 37) { // left
		window.mySwipe.prev();
	} else if(e.keyCode == 39) { // right
		window.mySwipe.next();
	}
});

Then you can use the right and left arrows on the keyboard to navigate

That's even better, avoids having arrows on the frontpage.