NEW frontpage.html - request comments

[zicht]

I use both formats on foscam camera :

Code: Select all

<div id="cell3"><img src="http://yourIp:yourport/snapshot.cgi?user=yourusername&pwd=yourpassword&resolution=8&t=" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 800)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' onClick="lightbox_open('camera5', 15400);" width="273px"  class='camera' style='margin-top: 30px;' /></div>
								

and

Code: Select all

<div id="popup_camera5"><img  src="http://yourIp:yourport/videostream.cgi?user=yourusername&pwd=yourpassword"  onClick="lightbox_close('camera5');" width="100%"  /></div>

Both work perfectly fine.

There is one big thing that took some time for me to discover , the camera has limitiation on amount of parallel connections and on data transfer rate ( esp on WIFI)
If you hit one of the limitations you can solve by reducing but in some cases it was needed for me to reboot the camera. I have now a similar setup as in Bewired house,
4 cams (4 side FrontPage with on each 2 cams) buienradar, some traffic info (work in progress) & Still image from last doorbell action/
I run with 2 tables, and android Phone. When also connecting with more equipments it caused some divises to be locked out on the above limitations.

Currently i have broke something to cause the display of cells is wrong on IPhone
I am also struggling with amount of data transfer on the page as i also use VPN to connect to my FrontPage. My 1 GB data plan was done within a week ..I think manly due to the camera's. so i have no w special VPN light version without live cameras (switched based on IP dectection ).

Edit :
Please remember to alter the camera field as i have done in above code (camera5) for useing multiple camera's but also create the CSS values for it and in the bottem the popup

[Gerwin1967]

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 .

[SwordFish]

Just made some layout-tweaks:

- The sun / moon are now displayed on a similar button as all the others
- The % (text) for the dimmer isn't displayed anymore. instead there is a blue circle that becomes smaller or bigger when you dim the light.

I only have one problem with this last one: I can't use the button to switch the dimmed lights off. I made the numbers (%) 0% so it isn't displayed, that's why I can't use it to click on. When I use opacity to let the text to be transparent (and let it be big enough to make it clickable), both up and down buttons will be transparent too and that's not what we want do we ?

If anyone has a quick fix for this....??

Where you able to solve this?
Can you share what you changed.

[mvveelen]

No, this part with the circles wasn't working and I never tried to fix it again. There are some other things I want to have working first, maybe I'll try another time.

[SwordFish]

No, this part with the circles wasn't working and I never tried to fix it again. There are some other things I want to have working first, maybe I'll try another time.

Ok, thanks.
Do you know how you made it? can you share that piece of code.
Maybe i try something.

[mvveelen]

I named the circled images according to the dim level. And then in frontpage.js I changed the code to display the images instead of the percentage. I don't have the code anymore, but if you can't make it yourself, I'm willing to give it another try tomorrow or Friday.

[SwordFish]

I named the circled images according to the dim level. And then in frontpage.js I changed the code to display the images instead of the percentage. I don't have the code anymore, but if you can't make it yourself, I'm willing to give it another try tomorrow or Friday.

If its not to much to ask
I'm not so well with coding, when I see something i'll try to modify it. But to make something my self
Did you named the circles 33, 66 enz or did you used 1 till 16?

[jovo]

I am trying hard to get the day/night settings to work, but so far without luck.
Despite this has been discussed on this topic frequently I am desperately searching for help now.

I am using the "latest" code from mvveelen as basis.

When I change the var IsNight = 'No'; in frontpage_settings.js to Yes, the weather image on the frontpage change to the night images.
but I do like to have this happinging automatically with the IsDonker switch.
I have implemented the Blocky event that Thinkpad previously posted to trigger the IsDonker switch by sunrise/set. I believe this works. I also tried to switch IsDonker on in devices, but the day/night setting are not triggering the Isnight var.

I suspect my problem lies in the configuration of the IsDonker virtual switch (just a gut feeling...)
Below is the output of http://192.168.2.205:8080/json.htm?type=devices&rid=77

Code: Select all

{ "5MinuteHistoryDays" : 1, "ActTime" : 1426176400, "AllowWidgetOrdering" : true, "DashboardType" : 0, "Latitude" : "52.088170", "Longitude" : "4.963288", "MobileType" : 0, "TempScale" : 1.0, "TempSign" : "C", "WindScale" : 1.0, "WindSign" : "m/s", "dontcachehtml" : true, "result" : [ { "AddjMulti" : 1.0, "AddjMulti2" : 1.0, "AddjValue" : 0.0, "AddjValue2" : 0.0, "BatteryLevel" : 255, "CustomImage" : 0, "Data" : "On", "Favorite" : 0, "HardwareID" : 10, "HardwareName" : "IsDonker", "HaveDimmer" : true, "HaveGroupCmd" : true, "HaveTimeout" : false, "ID" : "001409C", "Image" : "Light", "IsSubDevice" : false, "LastUpdate" : "2015-03-12 17:06:08", "Level" : 0, "LevelInt" : 0, "MaxDimLevel" : 15, "Name" : "IsDonker", "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" : "77" } ], "status" : "OK", "title" : "Devices" } 

Is it required to define the Isdonker switch ACTION in the switch configuration? should this trigger the isnight var?
How can I troubleshoor the isnight var?
who can help me any further?

[G3rard]

I am trying hard to get the day/night settings to work, but so far without luck.
Despite this has been discussed on this topic frequently I am desperately searching for help now.

I am using the "latest" code from mvveelen as basis.

When I change the var IsNight = 'No'; in frontpage_settings.js to Yes, the weather image on the frontpage change to the night images.
but I do like to have this happinging automatically with the IsDonker switch.
I have implemented the Blocky event that Thinkpad previously posted to trigger the IsDonker switch by sunrise/set. I believe this works. I also tried to switch IsDonker on in devices, but the day/night setting are not triggering the Isnight var.

I suspect my problem lies in the configuration of the IsDonker virtual switch (just a gut feeling...)
Below is the output of http://192.168.2.205:8080/json.htm?type=devices&rid=77

Code: Select all

{ "5MinuteHistoryDays" : 1, "ActTime" : 1426176400, "AllowWidgetOrdering" : true, "DashboardType" : 0, "Latitude" : "52.088170", "Longitude" : "4.963288", "MobileType" : 0, "TempScale" : 1.0, "TempSign" : "C", "WindScale" : 1.0, "WindSign" : "m/s", "dontcachehtml" : true, "result" : [ { "AddjMulti" : 1.0, "AddjMulti2" : 1.0, "AddjValue" : 0.0, "AddjValue2" : 0.0, "BatteryLevel" : 255, "CustomImage" : 0, "Data" : "On", "Favorite" : 0, "HardwareID" : 10, "HardwareName" : "IsDonker", "HaveDimmer" : true, "HaveGroupCmd" : true, "HaveTimeout" : false, "ID" : "001409C", "Image" : "Light", "IsSubDevice" : false, "LastUpdate" : "2015-03-12 17:06:08", "Level" : 0, "LevelInt" : 0, "MaxDimLevel" : 15, "Name" : "IsDonker", "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" : "77" } ], "status" : "OK", "title" : "Devices" } 

Is it required to define the Isdonker switch ACTION in the switch configuration? should this trigger the isnight var?
How can I troubleshoor the isnight var?
who can help me any further?

Do you have the correct idx value (77 in your case) of the IsDonker switch in your frontpage_settings.js?
That value is being used in frontpage.js.

[G3rard]

This is my current frontpage. Still some work in progress (e.g. day theme, some more tweaks).

frontpage-screendump.png (207.86 KiB) Viewed 4344 times

I will share the code once it's finished.

[mvveelen]

This is my current frontpage. Still some work in progress (e.g. day theme, some more tweaks).

frontpage-screendump.png

I will share the code once it's finished.

I like the way you share the temp and humidity in one cell. What is the code you used for that?

I named the circled images according to the dim level. And then in frontpage.js I changed the code to display the images instead of the percentage. I don't have the code anymore, but if you can't make it yourself, I'm willing to give it another try tomorrow or Friday.

If its not to much to ask
I'm not so well with coding, when I see something i'll try to modify it. But to make something my self
Did you named the circles 33, 66 enz or did you used 1 till 16?

I'm not going to have the time for it real soon. I've uploaded the code a few weeks ago, maybe someone has the code stored on his HDD? If you can wait, I'll give it another try after the weekend.

[Denman009]

This is my current frontpage. Still some work in progress (e.g. day theme, some more tweaks).

frontpage-screendump.png

I will share the code once it's finished.

Hello G3rard.

How did you do to share cell 1 with temp and humidity i really like that.

And hows the code for the date at the clock.

[ThinkPad]

This is my current frontpage. Still some work in progress (e.g. day theme, some more tweaks).

frontpage-screendump.png

I will share the code once it's finished.

Looking great!

Looking forward to adjust your code to my situation

[SwordFish]

I'm not going to have the time for it real soon. I've uploaded the code a few weeks ago, maybe someone has the code stored on his HDD? If you can wait, I'll give it another try after the weekend.

Its ok, do it when you have time for it.
Maby someone who has it will share it.

edit;
I have the sunrise and sunset icons finally in different cells

Screenshot_2015-03-14-14-25-24.png (176.1 KiB) Viewed 4201 times

[mvveelen]

Wow, that looks nice too: separate cells for sunrise and sunset. What piece of code did you use for that exactly?

[SwordFish]

The coding isn't what real coders do, but it works for me

In the frontage.html i add this for the sunrise and sunset icons

Code: Select all

<object data="svg/sunrise.html" type="text/html" style="position:absolute; top:554px; left:87px; z-index:100; width:85px; height:85px;"></object>
<object data="svg/sunset.html" type="text/html" style="position:absolute; top:554px; left:860px; z-index:100; width:85px; height:85px;"></object>

In the frontpage.js

Code: Select all

    
else if ( $.PageArray[ii][1] === 'Sunrise' ) {    //Special nummer, zonsop/onder in cell (test)
 //var vtype=    $.PageArray[ii][1];              // Domotitcz type (like Temp, Humidity)
 var vlabel=     $.PageArray[ii][2];                // cell number from HTML layout
 var vdesc = '';
 var vattr=    $.PageArray[ii][6];                  // extra css attributes
 var valarm=     $.PageArray[ii][7];              // alarm value to turn text to red

$('#'+vlabel).html( '<div style='+vattr+'>'+var_sunrise+'</div>');
$('#desc_'+vlabel).html(txt_sunrise);
}
else if ( $.PageArray[ii][1] === 'Sunset' ) { //Special nummer, zonsop/onder in cell (test)
//var vtype=    $.PageArray[ii][1];             // Domotitcz type (like Temp, Humidity)
var vlabel=     $.PageArray[ii][2];             // cell number from HTML layout
var vdesc = '';
var vattr=    $.PageArray[ii][6];             // extra css attributes
var valarm=     $.PageArray[ii][7];             // alarm value to turn text to red

 $('#'+vlabel).html( '<div style='+vattr+'>'+var_sunset+'</div>');
 $('#desc_'+vlabel).html(txt_sunset);
}

In the frontpage_settings

Code: Select all

['0',	'Sunrise',   'cell21',        '','0','0','color:black;font-size:75%'],
['0',	'Sunset',     'cell23',        '','0','0','color:black;font-size:75%'],

[mvveelen]

Where (exactly) did you add the code in frontpage.html ? And also, where in frontpage.js did you add the code ? Going to try to get something like this in my current page....

[G3rard]

This is my current frontpage. Still some work in progress (e.g. day theme, some more tweaks).

frontpage-screendump.png

I will share the code once it's finished.

Hello G3rard.

How did you do to share cell 1 with temp and humidity i really like that.

And hows the code for the date at the clock.

@Denman009, mvveelen

If you want show both the temp and humidity you can use the following in the frontpage_settings.js

Code: Select all

['22','Data',		'cell1',	'Kamer','0','0']

This way you get both data back.
I changed the formatting for the degrees and percentage in frontpage.js. Let me know if you want to have that code as well.

The code for the date and the clock is as follows

Code: Select all

//Return current time: dd-mm-yyyy hh:mm
function currentTime() {
    var today=new Date();
    var h=today.getHours().toString();
    h = h.trim();
    if (h.length == 1) { 
   h = '0'+ h;
    }
    var m=today.getMinutes().toString();
    m = m.trim();
    if (m.length == 1) { 
   m = '0'+ m;
    }
    
    var day=today.getDate().toString();
    day = day.trim();
   
   //Change the day to reflect your preferred translation
   var day = new Array();
      day[0] = "Zondag";
      day[1] = "Maandag";
      day[2] = "Dinsdag";
      day[3] = "Woensdag";
      day[4] = "Donderdag";
      day[5] = "Vrijdag";
      day[6] = "Zaterdag";
   var day = day[today.getDay()];
   
   //haal datum op
   var datum=today.getDate().toString();
   datum=datum.trim();
   // if (datum.lenght = 1) {
   // datum = '0' + datum;
   // }
   
   //haal maand op
   var month = new Array();
     month[0] = "januari";
     month[1] = "februari";
     month[2] = "maart";
     month[3] = "april";
     month[4] = "mei";
     month[5] = "juni";
     month[6] = "juli";
     month[7] = "augustus";
     month[8] = "september";
     month[9] = "oktober";
     month[10] = "november";
     month[11] = "december";
   var month = month[today.getMonth()];
   //var month = today.getMonth();
   //if (month.length = 1) {
   //month = '0' + month;
   //}
   
   //haal jaar op
  var year = today.getFullYear();
   
   var ret_str=day+" "+datum+" "+month+" "+year+" <br /> "+h+":"+m+"";
    return ret_str;
}

[G3rard]

Regarding the temp and humidity, it is also possible to show it in one cell with adding some div's.

That's more work, but it gives more flexibility for the layout, see the example below. I am currently working on that.

temp.jpg (14.41 KiB) Viewed 4130 times

[mvveelen]

Ah, I see. With the div's is preferable because I would like to try some different layout for these cells. If I change the Temp into Data, the formatting isn't the way I want it to be. Looking forward to the changes you are working on.