NEW frontpage.html - request comments

[ThinkPad]

Maybe you 2 can work together at the code, at a service like http://www.codeshare.io .... And then post only when it is working correctly Or design something so the settings stay in an external file?

[floris74]

Hi,
It's an awesome frontpage! i'm getting closer to the wife friendly frontend...
Thanks all you guys!!!

still got my problems with the thermostat.

It includes dimmer buttons (also for thermostats) and the optional indication of the 'last seen'.
See the read me file in the attachment.

['96','Status', 'cell8', 'Thermostaat','0','0.5'],
only result is the idx numer in green, with + and - buttons.

['96','SetPoint', 'cell2', 'Thermostaat','0','0.5'],
correct number of the temerature of the thermostat, in green But the + and - buttons doesnt change the setpoint...

I have a virtual thermostat. but that shouldn't be the problem i guess. any one can help?

Floris

[jannl]

By placing console.log messages on some places, it is possible to check the value of variables. Please check frontpage.html for the correct syntax.

[bbqkees]

Hi,

still got my problems with the thermostat.

['96','Status', 'cell8', 'Thermostaat','0','0.5'],
only result is the idx numer in green, with + and - buttons.

['96','SetPoint', 'cell2', 'Thermostaat','0','0.5'],
correct number of the temerature of the thermostat, in green But the + and - buttons doesnt change the setpoint...

I have a virtual thermostat. but that shouldn't be the problem i guess. any one can help?

Floris

You need to keep into acount that basically you can show the buttons next to any ID, even if it does not support dimming (or level change, as this is what the function does).

What happens when you press on the button, it sends the following command:
/json.htm?type=command&param=switchlight&idx=" + idx + "&switchcmd=Set%20Level&level=" + newvalue.

Edit:
I created a virtual setpoint device, I now see I need to send another command for those devices.
/json.htm?type=command&param=udevice&idx=93&nvalue=0&svalue=21.5
But I can fix that this weekend.


I think with a few more code iterations we will have a nice and complete general setup.

This weekend I will try to find time to also at least separate code/html from settings, in that way you only have to change 1 file to get the updates.

[mvveelen]

I'm (again) trying to get those nice weather icons (called Skycons) into one of the div's. Source: https://github.com/darkskyapp/skycons

It uses an external .js file (Skycons.js) and in the html you can embed the image by using:

Code: Select all

<script src="skycons.js">

Code: Select all

 <script>
      var icons = new Skycons(),
          list  = [
            "clear-day", "clear-night", "partly-cloudy-day",
            "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
            "fog"
          ],
          i;

      for(i = list.length; i--; )
        icons.set(list[i], list[i]);

      icons.play();
    </script>

and finally (for example):

Code: Select all

<canvas id=cloudy width=64 height=64></canvas>

When I use this outside the div's, I can see the (animated) image, but when I use this in the piece of code like:

Code: Select all

if(vdata == 'Cloudy'){
vdata=new String(vdata).replace("Cloudy","<canvas id=cloudy width=64 height=64></canvas>");
}

It won't show me anything. Mind you, I already changed the colors to be sure I can see the image on the background.

jan_nl or bbqkees, can you guys help me out here?

[Skorpion]

@mvveelen,

I see a typo in your code. "Mew" string must be new string.

[bbqkees]

Not sure if your idea with the fancy HTML5 stuff will work with the existing code anyway, but at least you need to close the canvas tag.

<canvas id=cloudy width=64 height=64></canvas>

[mvveelen]

True, true....I made a typo and I already closed the canvas (will edit the post again). I'm typing this on my work-pc at the moment. With closing the canvas it doesn't show me anything. Do you think it can be implemented?

[bbqkees]

You need to make sure that <canvas id="fog" width="64" height="64"></canvas>

comes BEFORE

<script src="skycons.js"></script>

<script>
var icons = new Skycons({"color": "pink"}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for(i = list.length; i--; )
icons.set(list, list);
icons.play();
</script>

AND you need to change the color because default is black, and then it works!

I will include it in the next version.

[mvveelen]

You need to make sure that <canvas id="fog" width="64" height="64"></canvas>

comes BEFORE

<script src="skycons.js"></script>

<script>
var icons = new Skycons({"color": "pink"}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for(i = list.length; i--; )
icons.set(list, list);
icons.play();
</script>

AND you need to change the color because default is black, and then it works!

I moved:

Code: Select all

<script src="skycons.js"></script>

    <script>
      var icons = new Skycons({"color": "pink"}),
          list  = [
            "clear-day", "clear-night", "partly-cloudy-day",
            "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
            "fog"
          ],
          i;
      for(i = list.length; i--; )
        icons.set(list[i], list[i]);
      icons.play();
    </script>

to the bottom, just before </body> and I already changed the color in the .js file to white. I still can only see the rain (in my example) outside the div's and not in the code (in the div's).
Did you test it in your code?

[mvveelen]

You need to make sure that <canvas id="fog" width="64" height="64"></canvas>

I will include it in the next version.

That would be great! Thanks!! You can even use the colored version and/or set the canvas-size. It look very nice......

[bbqkees]

Did you test it in your code?

Yes,
During lunchbreak, but only in an offline version. I have to check it this weekend in my own live setup.

[floris74]

Edit:
I created a virtual setpoint device, I now see I need to send another command for those devices.
/json.htm?type=command&param=udevice&idx=93&nvalue=0&svalue=21.5
But I can fix that this weekend.

i experimented with that, but after pressing the button it sets the setpoint to 0.0. i deleted the line, so i cant show the line.

It's so great that you, and others, are working on all of this so enthousiastic. Wish that i could help, but i cant program...

p.s. is your new format t big for 7" tablet? and the 2th page looks weird?
Before i had to scroll a little bit, so i looked up for a nice app, wich hide your navigation bar (and status bar) easily. i think it's a real must have for the 7" Nexus i have bought for 55 euro last week!

Floris

[jannl]

You can save the page to your homescreen and use it more or less as an app, the bars are gone in that way.
There is code in frontpage to accomplish this.

[floris74]

Jan_nl, Thanks. I already did that, but the little bar on top and bottom were stille there, so I had to scroll anyway vertical.

[jannl]

Hm. Strange. The code for this is at least in my last upload..

[remb0]

damn I downloaded al the files in this thread but still get 1 cloumn with al my devices

Is it an option to split userfiles and html ?
And the usersettings like Ip / webcam etc all centralised?
So we can replace one block of setting into the html of usersettings?

[mvveelen]

Well, I think that is what jan_nl / bbqkees are already planning to do. I hope they will find the time today / early tomorrow, so we can modify the basic code a bit to fit our 'needs'. I'm very interested, and depending on how this all will turn out, I might buy myself a cheap tablet

[bbqkees]

I have now split the entire thing in several files:

-frontpage.html (Contains all the html layout)
-frontpage2.css (Contains all styling)
-scripts.js (Contains all necessary scripts and functions)
And most important:
-settings.js (Contains all the settings you can change yourself)


I am having some difficulty with the swipe layout, for some reason I get 4 panels instead of 2.
So I am working on that now.

Also the skycons are not working correctly yet, but I am getting close.

I will make the skycons an option, because I don't like the moving icons in the otherwise 'plain' layout myself.
Also I am going to make these skycons scale automatically depending if you put them in a large or a small cell.

I hope I can finish it al tomorrow.

[remb0]

Nice! I will try it when you are done. And also thinking of a cheap tablet.
I will place it in the hall.