HTML/Javascript code and Pink

Dgswaner · 2007-07-08 16:42

I'm writing a web interface for a robot with a PINK module as the server. I want to graphically show the status of the IRPD sensors.
showing an image of a LED thats off when nothing is in front of the sensor but show a picture of a LED that on when the sensor detects something. I know how to have it display a value but I don't know how to change a picture based on the value of a variable.

so basically
If Nb_var01 = "1" then show on LED picture
If NB_var01 = "0" then show Off LED picture

I plan on having the "sensor status" page in it's own frame which automatically reloads every few seconds, unless someone knows a better way to have more real time status of the sensors.

Thanks

Added:
how about changing the background color of a cell using a variable?

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Post Edited (Dgswaner) : 7/9/2007 5:52:34 AM GMT

Franklin · 2007-07-08 16:51

The way the SitePlayer does it is to incorporate the variable into the name of the jpg. The Pink should be able to do something like that. See if you can find anything in the manual.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
- Stephen

Dgswaner · 2007-07-08 20:40

Thanks that's a good idea I think I know how to do that. It's a starting point at least.

the manual.... it's virtually non existent. There is only one simple example of how to display a variable. There are plenty of websites for example code I just need to know what to look for.

With as many pinks that have gone out I'm actually surprised of how few sites there are.

Thanks

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Dgswaner · 2007-07-09 06:23

I figured it out! In case anyone wants to know.

<html>
<body>
<script type="text/javascript">
var name = "<Nb_var06>"
if (name == 1)
{
document.write('<img src="images/Image1.jpg">')
}
else
{
document.write('<img src="images/Image2.jpg">')
}
</script>
</body>
</html>

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Chris Savage · 2007-07-09 22:02

Well, I posted a similar example just over a week ago in another thread. As a note more information will be available in the new documentation which should be out soon, but we won’t be able to address everything. Two things that are required to really use the PINK effectively are basic networking skills and basic HTML/Java experience. What we may do is release some AppNotes that contain the more intricate examples that may be more useful, rather than clogging up the documentation with that. Take care.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
Chris Savage
Parallax Tech Support

Dgswaner · 2007-07-13 14:51

Thanks Chris, I found your post after I posted here, once I knew what languages I could use I was off and running, I was trying to get an ASP page working before. I have to say, I'm very impressed with the pink it's going to add some fun capabilities. I am surprised that only a few others on the forum have posted what they have done with their pinks.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

mhammer · 2007-07-16 03:22

I know that you already solved this issue but a more compact way that doesn't use javascript would be

<HTML>
<BODY>
<img src="images\<Nb_var01>.jpg">
</BODY>
</HTML>

Just name the images according to the states.·· (1.jpg for connected 0.jpg for not.)

That way depending on the value the correct icon would be loaded into the page.

skylight · 2007-07-16 13:54

Nice and simple, it would need some form of refresh for the application. Not sure how to achieve that though.

Dgswaner · 2007-07-16 17:15

Mhammer thanks for that, I was working on a web based compass last night, I might have to scrap it and start over based on the new info. but it will make it simpler and that's a good thing. do you know right off if I can add a number to that variable, <img src="images\" <Nb_var01> + 1 " .jpg"> I'll need that to work in some cases. I have it working in javascript but it's much easier to format in HTML.

SkyLight refreshing the web page at set intervals is quite simple, I don't have the code with me at work but google javascript automatic reload or metatag automatic reload and you'll find it.

I'm going through all of my sensors and making them viewable via a web page, then I'll make a custom page for each robot containing the specific sensors to that bot. I'll be posting the code for each sensor as I complete them.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Paul · 2007-07-18 21:54

Just an interesting note: If Nb_var01 = "1" in mhammers code (above), this line...

<img src="images\<Nb_var01>.jpg">

Actually becomes this line:

<img src="images\1.jpg">

if you view the source of the html.
I learn something everyday.

Dgswaner · 2007-07-19 19:59

ya I found that out also. I'm thinking that would have been nice to know up front. as far as I know Html has no method for manipulating variables, so I spent a lot of time developing a javascript that would transfer the variable and display an image accordingly, then when looking at the source of a page I saw that the value there automatically and I was a little annoyed! oh well no I can do it in JavaScript or html. I'm going to post simple web pages for each sensor that I have, when i get them done, hopefully the next guy won't have to start where I did.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Paul · 2007-07-20 15:03

I found a couple other quirks also:

1. I haven't found a way to manipulate a value before posting it to the PINK module. If the user enters a value in an INPUT box you can't do anything except post it to the Nb_varXX variable. So if Box 1 is "3" and Input Box 2 is "7" you can't add them and stick them in a variable in Javascript. So in effect there seems to be no way to validate user inputs before running submit(). I'm still working on this so if I find something I will post it.

2. I talked to Parallax support yesterday and there is·no way to·save variables into the FLASH memory. So once you turn off the PINK module everything goes away.·

Dgswaner · 2007-07-20 15:38

I'm not a master at Javascript but it seems like you should be able to get the user input using a variable validate it and if it's good pass that variable to the NB_varxx variable.

I don't have the pink in front of me but there is 10 or 20 variables that can be written into flash ram. it surprises me that they say it can't be done. maybe I'm not understanding what you after. have you looked at the source for the Default "Modify variables" page. so you should be able to take that code and rather than have it on I'll look into it. this weekend's project is going to be getting my Pink's "base Station" with RF link online. so I'll check on it if I have time.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Paul · 2007-07-20 20:03

Yep, you can update the 20 general purpose FLASH variables from the HTML page. You can't sent a variable value from your stamp to flash memory. Thats what I meant by that.

Dgswaner · 2007-07-20 20:08

Ahh I get ya. ya that does pose a problem. I can think of a few work a rounds like auto refreshing a page, but I'm guessing your looking for a working solution not a work around.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

mhammer · 2007-07-21 02:19

If anyone is interested in a AJAX Powered Webpage run from a Netburner i think i can put something together.· I could setup the code to allow for dynamic updates of the webpage.·· This would be very powerful for sensor displays on robots or for your Web Based Compass Dgswaner.· Next week I will take the·12 or so Pinks i have in my office and·try to get something working.·

Paul · 2007-07-21 12:28

I think an AJAX powered web page would be very welcome addition to our knowledge base about the PINK. (and AJAX for that matter) I just started javascripting for my current project so I'm not really good at it. As Chris S. pointed out, it's a good idea to have·some network or web page background first.
·

Dgswaner · 2007-07-21 16:05

I'm not familiar with it but from what I have read about it, it sounds very cool. I was planning on have pages set to refresh every second or at longer intervals if it fit the circumstance. with multiple pages refreshing at a quick interval I was worried about the PINK being able to handle all of the traffic. sounds like ajax is a good solution. that would be great if you could spnd some time on it and help out the community.

dg

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

mhammer · 2007-07-21 20:00

Ok.· here is the frame work for an ajax powered Pink Webpage.

3 Files are needed.

1. A webpage with a named Span (See Below)

2. A Javascript File to handle the ajax calls (Ajax.js)

3. a Data file to load into the page. (Sensor.dat) This file can be called anything as long as the same name is used in the javascript file.

Copy all 3 to the netburner and you should have a page that updates every 2 seconds. without a refresh.

A quick note about the Sensor.dat file.·· This file would need to have all of your netburner tags in it. For example in the Sensor.dat file attached the cotent is <H1><NB_var01></H1>.· If variable 1 is set to "100" the file when accessed returns <H1>100</H1>.· I hope this sparks the minds of people to come up with more complex ajax calls.··

Please note that i haven't tested this on a netburner but on a workstation.· Once i get into work i will try this on a pink and update the code as needed.· If anyone get's a chance before that please let me know if it works.

Hope this helps the Stamp/Pink Community.

Code for AjaxPink.html

<HTML>
<HEAD>
<script src="Ajax.js" type="text/javascript"></SCRIPT>
<TITLE>Pink AJAX Example</TITLE>
</HEAD>
<BODY onload=InitTimer()>
<Table border=1>
<TR Height= 75px>
<TD>
<Span id="AjaxImg" />
</TD>
</TR>
<TR>
<TD>
variable 01
</TD>
</TR>
<Table>
</BODY>

mhammer · 2007-07-21 22:49

Ok, so the code that·I submitted doesn't work right...I guess that's what i get for developing on another workstation.· Found a couple issues with·the code·I submitted·as well as a glitch that might·migrate·to the netburner, it's so hard to tell without a pink or a properly setup·Web Server.· Im going to have to wait until·monday to get it working on a Pink, unless someone else want's to pickup where·I left off and correct the code.

mhammer · 2007-07-22 02:31

a Tip on validation.·· Look into the OnSubmit Function.·· Also using Ajax you can post data to a website if you know the format.· I would have to look at it but it might be a way to update flash variables as well as the runtime variables.

Harrison. · 2007-07-22 02:57

You might want to polish up the code once you are done (add in semicolons at the end of statement lines). That way it looks nicer and is javascript compliant.

On the side note, it may be easier if you use one of the many free javascript ajax frameworks out there. I personally hate having to check cross browser and security compliance so I just use pre made ajax frameworks. I'll have to find which one I used to use before I switched to using asp.net ajax.

mhammer · 2007-07-22 03:02

Thanks Harrison,· Most of the code i wrote really quickly as proof of concept.· once i get into the office i will be putting a more stable and usable system together.

mhammer · 2007-07-25 20:46

Ok after a little work i got the AJAX Calls to work correctly.

Only Change is the Ajax.js file.

The sensor file also needs to be called Sensor.txt.

the webpage is the same.

Code for AjaxPink.html

<HTML>
<HEAD>
<script src="Ajax.js" type="text/javascript"></SCRIPT>
<TITLE>Pink AJAX Example</TITLE>
</HEAD>
<BODY onload=InitTimer()>
<Table border=1>
<TR Height= 75px>
<TD>
<Span id="AjaxImg" />
</TD>
</TR>
<TR>
<TD>
variable 01
</TD>
</TR>
<Table>
</BODY>

The only thing that needs to be developed is a basic program to update the netburner and you have an dynamicly updated(Ajax) Webpage running off of a Pink.

Dgswaner · 2007-07-27 13:47

Mhammer, thanks for your work on this. I've been so busy that I haven't had a chance to try it out. I'm hoping this weekend I'll find some time. and i'll let you know how it goes.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Dgswaner · 2007-09-06 04:10

Mhammer, I tried to get your code for the Ajax example to work, and I can't. I don't know enough about Ajax to trouble shoot it. any ideas on where to start? I have all 3 files uploaded to my PINK no sub directories and I didn't change any of the file names. and I did upload the correct Ajax.js file.

thanks

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

Post Edited (Dgswaner) : 10/10/2007 7:45:21 PM GMT

Dgswaner · 2007-10-13 00:00

Mhammer, I'm trying to get this Ajax thing figured out, couple of questions if you don't mind. What browser were you using when you tested this. I'm getting a Error in IE, Object doesn't support this property or method. Line: 52 code :0 I'm guessing that my browser doesn't support some part of the Java script. Foxfire doesn't give an error but it doesn't work either. I thought I might have a path problem in that it wasn't finding the ajax.js but this error tells me its finding it. I only know enough JavaScript to be dangerous, would it be possible to something equivalent to a debug screen so I can see where it having problems. do you know if anyone else got this code to work on a pink?

Thanks

Dave

▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
A complex design is the sign of an inferior designer. - Jamie Hyneman, Myth Buster

HTML/Javascript code and Pink

Comments