NEW frontpage.html - request comments

[Minglarn]

Absolutely...
Here there are...

Varsågod! Alltid roligt med andra svenskar på utländska forum =)

[erske]

Great. It's working perfect.
Now i gonna build a small MySensors tempsensor that is gonna sit in the car, and report the current coupetemp to domoticz.

[Minglarn]

Another question...
I did notice that there is skycons.js included in the archive...
How do I use it on my frontpage?

Never mind... Think I'll remove the weather icon...
The weather prediction is worthless...
It's been snowing the whole night and it still says Partly Cloudy... Haha...

[G3rard]

Glad I could help...

But I need some assistance with 2 issues....

1.Trying to add a switch wich. In domotics it is a group containing switches for my outside and garden lights. Cant get it to work...

Code: Select all

	$.PageArray_Scenes = [
		['1','Status', 	'cell4_22',			'Utebelysning'],

Do I need to add something else?

2. Want to make the temperature color RED incase it gets to hot. Have added this to the cell i want to monitor

Code: Select all

		['14','Temp',				'cell7',	'Biorummet','1','0'],

Where do I add the alarm threshold?

This is an example of a group I am using on frontpage. So you need to add '1','0'.

Code: Select all

['5','Status',				'cell9',	'Lampen kamer','1','0'],

For changing temperature color you can have a look at:
https://github.com/gerard33/frontpage/b ... ge.js#L625

The variable temp_freeze_color is set in frontpage_setting:
https://github.com/gerard33/frontpage/b ... ngs.js#L36.

[Minglarn]

Glad I could help...

This is an example of a group I am using on frontpage. So you need to add '1','0'.

Code: Select all

['5','Status',				'cell9',	'Lampen kamer','1','0'],

For changing temperature color you can have a look at:
https://github.com/gerard33/frontpage/b ... ge.js#L625

The variable temp_freeze_color is set in frontpage_setting:
https://github.com/gerard33/frontpage/b ... ngs.js#L36.

Added '1','0' to the array but still does not work...
and the line you reffer to does not exist in frontpage.js ..:/ Instead i've this:

Code: Select all

                            case "Temp":
                                if (vdata < 0) {
                                    alarmcss = temp_freeze_color;
                                }
                                vdata += "<sup style=\'font-size:40%;vertical-align:top;position:relative;bottom:0.5em;\'> &#176;C</sup>";
                                break;

further down I found this:

Code: Select all

                        // if alarm threshold is defined, make value red
                        if (typeof valarm != 'undefined') {
                            alarmcss='';
                            if ( eval(vdata + valarm)) {  // note orig:  vdata > alarm
                                alarmcss=';color:red;';
                            }
                        }

Really need some assistance here... =)

[G3rard]

Are you sure the group has IDX 1? You can check this in the devices overview.
And cell cell4_22 is right? Do you have 4 pages? Maybe try another cell first.

You are using a changed version of the frontpage version I am using, but change the code as follows:

Code: Select all

 case "Temp":
                                if (vdata < 0) {
                                    alarmcss = temp_freeze_color;
                                } else if (vdata > 20) {
                                    alarmcss = temp_hot_color;
                                }
                                vdata += "<sup style=\'font-size:40%;vertical-align:top;position:relative;bottom:0.5em;\'> &#176;C</sup>";
                                break;

You can change 20 to the value you want. And set the temp_hot_color in frontpage_settings file.

[Minglarn]

Yes I'm sure....

Skärmklipp.PNG (2.35 KiB) Viewed 3407 times

And thanks for the code... But i'm after making a specific cell RED when temperature goes above a given value. Whit this every temp above 20 will shine RED

[Minglarn]

Are you sure the group has IDX 1? You can check this in the devices overview.
And cell cell4_22 is right? Do you have 4 pages? Maybe try another cell first.

You are using a changed version of the frontpage version I am using, but change the code as follows:

Code: Select all

 case "Temp":
                                if (vdata < 0) {
                                    alarmcss = temp_freeze_color;
                                } else if (vdata > 20) {
                                    alarmcss = temp_hot_color;
                                }
                                vdata += "<sup style=\'font-size:40%;vertical-align:top;position:relative;bottom:0.5em;\'> &#176;C</sup>";
                                break;

You can change 20 to the value you want. And set the temp_hot_color in frontpage_settings file.

Solved! I did use your code an added this:

Code: Select all

var idx_server_temp_max = '20' // IDC för temperaturmätaren i serverrummet
var temp_serverrum_max = '25'  // MAX temp

and this:

Code: Select all

							case idx_server_temp_max: //Serverrum	
                                if(item.idx == idx_server_temp_max && vdata > temp_serverrum_max){	
                                    alarmcss = temp_hot_color;
                                }
								break;	

And it works GREAT!

[teha]

Love this frontpage! Have been poking around and really love the easiness behind it! Great job to you all!

Two questions...
If I create a third page , would it bee to much for the Rasp PI2 & Domoticz to handle. I've already added an extra row to both of the pages, but I feel I need a 3 page.
And I dont seem to make a switch with custom icons "switchable" ...

I've added this to frontpage_settings.js:

Code: Select all

var idx_Motor = '62'; 
['62','Status',				'cell2_8',	'Motorvärmare','1','0'],

And this in frontpage.js:

Code: Select all

case idx_Motor:
if (vdata == txt_on) {
vdata = '<img src=icons/engine_on.png onclick="bleep.play();SwitchToggle('+item.idx+', \'On\');">';
} else {
vdata = '<img src=icons/engine_off.png onclick="bleep.play();SwitchToggle('+item.idx+', \'Off\');">';									
 }
break;	

I am also very happy to se other fellow swedes in this forum

@Minglarn
Can you please prove the URL fro the swedish weather radar?

[Minglarn]

Hej!

Here you go...

Code: Select all

http://api.sat24.com/animated/SCAN/rainTMC/1/Central European Standard Time

[Minglarn]

Great. It's working perfect.
Now i gonna build a small MySensors tempsensor that is gonna sit in the car, and report the current coupetemp to domoticz.

Hej!
Where do you buy MySensors and are they ok to use? The sensors I use today are a little big for my taste. Would like small ones so they don't inferior with the interior of the car.

[trekker25]

anyone found a reliable android browser that allows to easily:

- hide address bar / add as webapp to the home screen
- none memory hogging (chrome kills my motion detector / slows my tablet insanely after several hours)

tried:
- Dolphin: refreshing after motion detector is not smoothly / doesnt play gif animations
- Next browser: seems fast but can't hide the address bar (unless you can swipe down, but the frontpage is just made for no scrolling)
- Opera: only hide the address bar when scrolling down. Adding bookmark to homescreen doesn't open full screen!

Any options left?

(coming from iPhone this is a really basic thing and hope to get it running on my android tablet)

Testing boat browser now:
-easy full screen (system bar hider is needed)
- after display turn on a quick correct refresh

Now wait about memory / performance in the long run.

I have a temp button on front page, how add I put a popup on this (display hourly weather prediction in popup)

[trekker25]

Chrome is easy to hide adress bar..
Just add as desktop as you said..

Memory problem not come with chrome but with custom page's code...

Mine has auto restart each hour for this, I hope I will fix this a next day.. Hope a real dev will help to fix memory leak..

Dolphin could run stable for 7 days so i assumed it was Chrome issue.

Hourly restart doesnt seem Nice?

[jannl]

I almost never restart Chrome on my Tablet, runs ok for months mostly.

Another question, trying to get live image from my webcam in Frontpage now.
I use a Foscam fi9853ep.
When selecting the little webcam image in the cam setup in Domoticz it works, I just do not seem to be able to find the correct url myself (googled a lot).

For now (a few months), I only take a snapshot when someone rings at the door. This image is displayed in Frontpage and mailed to myself, but motion would be nice as well.

Anyone?

[trekker25]

I almost never restart Chrome on my Tablet, runs ok for months mostly.

Another question, trying to get live image from my webcam in Frontpage now.
I use a Foscam fi9853ep.
When selecting the little webcam image in the cam setup in Domoticz it works, I just do not seem to be able to find the correct url myself (googled a lot).

For now (a few months), I only take a snapshot when someone rings at the door. This image is displayed in Frontpage and mailed to myself, but motion would be nice as well.

Anyone?

You also use automagic/ tasker and motion detector?

And how much memory has your tablet? Rooted/tweaked.

[G3rard]

I almost never restart Chrome on my Tablet, runs ok for months mostly.

Another question, trying to get live image from my webcam in Frontpage now.
I use a Foscam fi9853ep.
When selecting the little webcam image in the cam setup in Domoticz it works, I just do not seem to be able to find the correct url myself (googled a lot).

For now (a few months), I only take a snapshot when someone rings at the door. This image is displayed in Frontpage and mailed to myself, but motion would be nice as well.

Anyone?

I use a picture of the camera on the frontpage and when I click on the picture it opens the live stream in a popup. For the live stream the stream of Domoticz is used.
This is the code I am using in frontpage.html for the popup:

Code: Select all

<div id="popup_camera"><img src="http://ip:port/camsnapshot.jpg?idx=2&t=" onClick="lightbox_close('camera');" width="640" height="480" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 100)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' class='bigcamera' /></div>

Idx 2 is the idx of the camera.
Maybe this can help you?

[jannl]

I almost never restart Chrome on my Tablet, runs ok for months mostly.

Another question, trying to get live image from my webcam in Frontpage now.
I use a Foscam fi9853ep.
When selecting the little webcam image in the cam setup in Domoticz it works, I just do not seem to be able to find the correct url myself (googled a lot).

For now (a few months), I only take a snapshot when someone rings at the door. This image is displayed in Frontpage and mailed to myself, but motion would be nice as well.

Anyone?

You also use automagic/ tasker and motion detector?

And how much memory has your tablet? Rooted/tweaked.

I only use an app to keep my tablet alive.

Not rooted/tweaked at all, everything default. I use an Archos 70c

@G3rard: thanks, I will try that later

[jannl]

Or a different tablet.....or de motion detection

[jannl]

I almost never restart Chrome on my Tablet, runs ok for months mostly.

Another question, trying to get live image from my webcam in Frontpage now.
I use a Foscam fi9853ep.
When selecting the little webcam image in the cam setup in Domoticz it works, I just do not seem to be able to find the correct url myself (googled a lot).

For now (a few months), I only take a snapshot when someone rings at the door. This image is displayed in Frontpage and mailed to myself, but motion would be nice as well.

Anyone?

I use a picture of the camera on the frontpage and when I click on the picture it opens the live stream in a popup. For the live stream the stream of Domoticz is used.
This is the code I am using in frontpage.html for the popup:

Code: Select all

<div id="popup_camera"><img src="http://ip:port/camsnapshot.jpg?idx=2&t=" onClick="lightbox_close('camera');" width="640" height="480" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 100)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' class='bigcamera' /></div>

Idx 2 is the idx of the camera.
Maybe this can help you?

Basically this did the trick indeed.

[Minglarn]

Hi again....
Again a small contribution to the fantastic frontpage....

The temperature cells where kinda static. Red or BLUE was the only way to tell the difference from the other temp sensors...
I wanted more... Today I added the BLINK function ...
The code could contain error as I never tried javascript/css before, please correct it if so... =)
This is how I did it....

First add these lines to the frontpage css:

Code: Select all

.blink {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: blink;
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    76% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

Then add these lines to your frontpage.js for the idx you want to monitor, in my case it was the temperature in the server room. If it gets to hot it will blink the cell...

Code: Select all

							case idx_server: 	
                                if(item.idx == idx_server && vdata > parseInt(temp_server_max)){	
                                    alarmcss = temp_hot_color;
									vdata = '<span class=blink>'+vdata+'</span';
                                }
								break;

Or you can add blink function if it gets below a given value. In this case I monitor my car! If it's higher than 20 degrees C or if it's below 0 degrees make the cell blink!
The code inserted in frontpage_settings.js

Code: Select all

var idx_car= '389';
var temp_max_car = '20';
var temp_min_car = '5';

And the code for frontpage.js

Code: Select all

							case idx_car: 	
                                if(item.idx == idx_car && vdata >= parseInt(temp_max_car)){	
                                    alarmcss = temp_hot_color;
									vdata = '<span class=blink>'+vdata+'</span';
								} else if(item.idx == idx_car && vdata <= parseInt(temp_min_car)){	
                                    alarmcss = temp_freeze_color;
									vdata = '<span class=blink>'+vdata+'</span>';
								break;
								}