HTML Indicator Code

[nemiro]

I need to find a way to indicate the status of power for a piece of equipment I am controlling. My actual code is all driven through serial ports, and is cumbersome, so I wrote a real quick and dirty example of what I am trying to do. The HTML part is a simple table with two cells, with links to ON and OFF. What I am trying to do is flip the state of Pin J2[23] by toggling the link. Then Pin J2[7] will read the status and set a flag as to the actual power status. What I am after is getting that indicator back into the HTML. I would like the power status (as read on J2[7]) to change the background color of the appropriate cell blue, and turn the text white. In other words, reverse the colors there. This will be an instant visual indicator as to the status.

One more thing, is there a way to get the NB code to poll J2[7], and automatically update the HTML if the status changes? In other words, the Read_Power_Status will only be called if index.htm is refreshed. If it is not refreshed, the power status can change, but there will be no indication of this (Power can be cycled via the web page, or by an external switch). If I have the Read_Power_Status called every now and again, this could be accomplished, but is there a better / proper way?

[nemiro]

I know someone has done all of this. If you don't mind sharing, it would really help me out. Thanks!

[Chris Ruff]

It has been discussed in various ways here. You can use:

1. Ajax
2. Java Applet
3. Flash (I think)

The java applet code is in the NB factory example as a graph. The Ajax code is Tod's domain and you need to search the forum for conversations on Ajax. There is example code somewhere.

I think I remember somebody got flash working. Not sure about that one

The code is not difficult to do what you want to do. You will just have to learn some new things to do it

Chris

[tod]

The code for both the original Ajax and the new and improved Ajax II examples are on the wiki. I also wrote a blog entry with an associated video (about 10 minutes long) giving an overview of how it works and how to use it.

-Tod

[Ridgeglider]

It seems to me that the factory demo does this: cliclk on a box in the browser and an LED on the board turns on via a port bit. Click again and it goes out. See: C:/nburn/examples/yourplatform/PLATFORM_factorydemo or something like that.

The solution with Adobe Flex (of Flash) supports nicer graphics w/o too much overhead but you need to figure out flex or flash. See http://forum.embeddedethernet.com/viewt ... ?f=5&t=104

[nemiro]

I'll take a look at that AJAX info. The bar graph and the factory demo do put info back into the web page, and that is fine, but I cannot figure out how to simply invert the colors. The program currently passes integers back to the page, so I do understand that part of it.

Are you guys suggesting that I simply make the indicators graphics that 'flip' when status changes? I have to admit that I had not thought of that.

[Chris Ruff]

On the HTML page load a red .jpg image or a green image based on the state of a bit. The images can be anything including solid colors. See how the factory demo indicates dip switches

If it is a Java applet you also can draw any graphics image you want based on data. The factory demo again

Chris

[tod]

I'm not sure what your experience level is but if you just want to invert background colors the css property is background-color. For example

Code: Select all

<div id="feedback" style="width:40px;height:40px;background-color:red">Test</div>

would show up as a red square on a page, change the color to green and it's a green square.

[nemiro]

When it comes to HTML/CSS/Java, my experience level is maybe one notch over complete dummy. OK, it's a little better than that, but not much. My C/C++ is a little bit better I had been reading you AJAX tutorial, and will be where the NB hardware is installed tomorrow afternoon, and am looking forward to trying that part out.

I really appreciate all of everyone's help, and am looking forward to doing this and a whole lot more with the NB.

[nemiro]

Tod-
I want to thank you! Your AJAX tutorial is awesome! I was easily able to implement that part of it into my code, and now have near real time updates of what the equipment is doing. That is so awesome! I owe you a beer!



Now the first part is where I am still having trouble. Using your code:

Code: Select all

<div id="feedback" style="width:40px;height:40px;background-color:red">Test</div>

looks easy enough, but how do I set up the "if - then" test for this? I have looked at the MOD5270 demo code, and I am still scratching my head. Basically, if I can set up a test like (in really bad pseudocode):

if status == 0
{
color = green;
}

else
{
color = red;
}

Do I test for this in a javascript, or can I do it right in the HTML?





One minor last thing, I noticed in NBEclipse that if I update a HTML file, and "F5" it in the project tree, the IDE will refresh, and rebuild the code. However, if I modify a .js file, I have to go to Project -> Clean to get everything cleared out, and have the compiler rebuild. Surely I must have a setting wrong in my environment somewhere?