PowerHome Messageboard: Dynamic Bargraphs with JavaScript

Active Topics

Memberlist

Help

PowerHome Programming
PowerHome Messageboard : PowerHome Programming

Topic: Dynamic Bargraphs with JavaScript

Author

Message

<< Prev Topic | Next Topic >>

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 02 2005 at 21:11 \| IP Logged

I've taken what I've learned coding JavaScript for Browseamp and folded it into PowerHome PSP pages. The first results are dynamic bargraphs for dim levels. The picture shows a page of lighting controls from a set of pages I'm working on in anticipation of setting up my first touch screen.

Please ignore the look (resolution) of the on and off buttons. I just found the size I like and need to redo them!

The blue bars reflect the current dim level, and, when you click in a different spot, the dim level adjusts to that value. Note that these can not be dragged.

Let me know if anyone wants more info.

dhoward
Admin Group

Joined: June 29 2001
Location: United States
Online Status: Offline
Posts: 4447

Posted: January 04 2005 at 14:14 \| IP Logged

Tony, that looks great! I'd like to see the code behind it.

Dave.

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 04 2005 at 21:34 \| IP Logged

Well, this trick uses JavaScript to stretch the width of a one-pixel image in a single-cell table. Remember, when you call out an image, you can alter the dimensions to stretch it out.

Here is the code with the one-pixel image (bluepixel.gif). The bar is 180 pixels wide, max. In this example, I am working with A11...

<% ph_rtne( ph_setvar_s ( 1, 1, "A" ) + ph_setvar_s ( 1, 2, "11" ))%>
<% ph_rtne( ph_setvar_a ( 1, 3, int(ph_getx10level("[LOCAL1]",[LOCAL2])) ))%>

<table width="180" border="0" cellpadding="0" cellspacing="1" bgcolor="#00007f" title="click bar to change level">
     <tr>
          <td onClick="clickLevelBar(this, event, '<%"[LOCAL1]"%>', <%[LOCAL2]%>);" align="left" valign="top" width="180" bgcolor="#000033"><img src= "/bluepixel.gif">           <script type="text/JavaScript">
          var Level = <%"[LOCAL3]"%>
          if(isNaN(Level))
               Level = 1;
          if(Level == 0)
               document.getElementById("LevelBar").width = 1;
          else
               document.getElementById("LevelBar").width = Level*1.78;
          </script>
          </td>
     </tr>
     </table>

Here is the function called to figure out where you clicked and send that value to PH via the dimac function, also below...

function clickLevelBar(Element, myevent, house, unit)
{
var x;
if(Netscape) x = myevent.pageX - findPosX(Element); // x relative to the table cell
else x = window.event.offsetX; // x relative to the table cell
dimac(house + " " + unit, parseInt(100*x/Element.width));
}

function findPosX(obj)
{
     var curleft = 0;
     if (obj.offsetParent)
     {
          while (obj.offsetParent)
          {
               curleft += obj.offsetLeft
               obj = obj.offsetParent;
          }
     }
     else if (obj.x)
          curleft += obj.x;
     return curleft;
}

function dimac(ad, value)
{ document.execsendkeys.sendkeys.value = "ph_rtne( ph_setvar_s( 2, 1, '" + ad.toUpperCase() + "') + ph_setvar_s(2, 2, '"+ value + "') + ph_macro('DIMAC'))"; document.execsendkeys.submit(); }

I guess I should also post the DIMAC macro (I think it is already in the forum somewhere).

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 04 2005 at 21:53 \| IP Logged

Here is an updated screen shot...

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 07 2005 at 07:12 \| IP Logged

Well, I just noticed that this only works in Firefox! That's a switch! Investigating...

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 08 2005 at 16:15 \| IP Logged

OK, It does work in IE, but, not if you have several bargraphs on a single page. Seems that IE chokes, but, Firefox does not. Definitely a switch from the usual! If you want to use this in IE and have more than one, you'll need to use unique ID's.

I also just noticed that the forum chopped off part of the HTML that calls out the colored portion of the cell graphic.

This portion...
<img src= "/bluepixel.gif">

Should be...
<img src= "/bluepixel.gif" width="1" height="36" id="volumeBar" border="0">

jimmyb
Newbie
Newbie

Joined: December 10 2004
Location: United States
Online Status: Offline
Posts: 6

Posted: January 08 2005 at 19:24 \| IP Logged

Thought I recognized those BrowseAmp Winamp buttons :)

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 08 2005 at 19:44 \| IP Logged

Heh! Yup. Henry sent me the blank button PNG, so, I figured I'd make good use of it!

I should get rid of the GIF version that I used there to help with the jaggies.

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: December 27 2005 at 03:01 \| IP Logged

A "little" update here...

I was playing around and came up with some more screen and button/control ideas.

The code behind it is almost clean enough to make public!

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: December 29 2005 at 13:39 \| IP Logged

My new weather screen.

dhoward
Admin Group

Joined: June 29 2001
Location: United States
Online Status: Offline
Posts: 4447

Posted: January 03 2006 at 15:09 \| IP Logged

Tony, those shots are looking great!! I cant wait to see the code when you've got it ready

.

Dave.

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 03 2006 at 21:45 \| IP Logged

I think I'm going to switch from using Local variables to JavaScript, just to make it easier for people to understand.

If others may use this, the code seems intimidating, and I'm only setting up the house code, unit code, device description, and location of the control in here...

Code:

<!-- Set LOCAL1 and LOCAL2 with house and unit codes -->

<% ph_rtne( ph_setvar_s ( 1, 1, "A" ) + ph_setvar_s ( 1, 2, "11" )) %>

<% ph_rtne( ph_setvar_s ( 1, 6, "Porch" )) %>

<!-- Set LOCAL4 and LOCAL5 with X and Y coordinates of control -->

<% ph_rtne( ph_setvar_a ( 1, 4, 20 )) + ph_rtne( ph_setvar_a ( 1, 5, 20 )) %>

This seems better...

Code:

<script type="text/JavaScript">

var HC = "A";

var UC = "11";

var DevDesc = "Porch";

var CX = 20;

var CY = 20;

...

</script>

Although, I fear it would make my code more difficult to write!

Comments?

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 03 2006 at 23:23 \| IP Logged

OK, does PH replacement (<%...%>) come before JavaScript?

dhoward
Admin Group

Joined: June 29 2001
Location: United States
Online Status: Offline
Posts: 4447

Posted: January 03 2006 at 23:39 \| IP Logged

Absolutely

. The <%..%> are evaluated and replaced on the PowerHome server when the page is requested. The client never sees the PSP code. Once all of the PSP is evaluated and replaced, the resulting page including any Javascript is then sent to the client.

So, PSP is PowerHome server side only and Javascript is client browser side only.

HTH,

Dave.

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 04 2006 at 00:01 \| IP Logged

Until I get that figured out, here is a ZIP file that contains the code and the required graphics files for my light dimmer control (setup for A8, which is a table lamp in my living room).

Unzip to your PH folder and check it out. The page to load in your browser is "touch_test.psp".

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 04 2006 at 00:08 \| IP Logged

I neglected to mention that this is made for Firefox.

IE works, but does not support PNG transparency, which I use in the graphics. Also, the bar graph looks shifted up in IE.

krommetje
Super User

Joined: December 29 2004
Location: Netherlands
Online Status: Offline
Posts: 695

Posted: January 07 2006 at 03:24 \| IP Logged

The screens look nice TonyNo, did you make these with that program you mentioned a short time ago? (seem to have forgotten the name)

Peter

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 07 2006 at 11:02 \| IP Logged

Yes, the app was Inkscape.

krommetje
Super User

Joined: December 29 2004
Location: Netherlands
Online Status: Offline
Posts: 695

Posted: January 07 2006 at 11:06 \| IP Logged

Tell me how this works, I mean.... the basics, not the programming....That I understand... Somehow I can't use my touchscreen in the zip you provided... I think this has to do with me.... ;-)

Peter

TonyNo
Moderator Group

Joined: December 05 2001
Location: United States
Online Status: Offline
Posts: 2889

Posted: January 07 2006 at 15:48 \| IP Logged

My touch screen runs FireFox in Kiosk mode, and all my "screens" are web pages served from my PH machine. HTML and JavaScript, along with ph_xxx commands, take care of everyting.

I chose this method because I did not want to wait until a plugin for MainLobby/NetRemote/etc. was developed. Plus, I knew I could do almost anything those apps did with web pages instead (and for free

).

My latest breakthrough was seeing the forest for the trees. I was hung up on laying out pages using tables and such, and finally realized that I could put items exactly where I wanted them by just specifying coordinates with style="position:absolute".

I took that a bit further, and added code to simplify things: In the beginning of each control section, I load the desired X and Y location into Temp variables, and then use the temp variables for positioning the individual graphics, text, and "bar graphs". I could then focus on layout and not math.

I thought my next step was to handle these as JavaScript functions, but that won't work since JavaScript is client-side. I think the only way to clean this up more is to use include-type code (ph_readfile) to keep the HTML "friendly" and easy to use.

The ZIP file contains the graphics and code to run one light. You specify the House Code, Unit Code, Description, and XY location for the control (as described above), and it assembles and labels the control for you. All that is left to do is to duplicate the code, and change the parameters to add more of these for additional lights.

Let me know if anyone wants more info.

Page of 3 Next >>

Printable version

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum