Shop OBEX P1 Docs P2 Docs Learn Events
HTML guidance — Parallax Forums

HTML guidance

Don MDon M Posts: 1,654
edited 2011-10-13 09:21 in General Discussion
I am thinking about a project involving the Prop and the Spinerret. The Spinerret will host a webpage that for conversations sake here, let's say that it has a simple page with a couple of big numbers placed on the page that use a specific font.

Let's say that when you first pull up the page it will have 2 zero's on the page and if you click on either number it will invoke a command through the Propeller to increment that number by 1 on the device to which it is connected.

So here is where I am at a cross road-

1. Do I write some HTML code that on its own can increment the number when clicked and then send the "new" number from the webpage through the Spinerret to the device?

2. Do I write some HTML code that when you click on a number it just sends an "increment command" to the device and then let the device report back to the webpage the new value?

And the second part of my question is what sort of code should I use to write this HTML code? Can it be done with just plain HTML code or does it need to be Java or something else? I don't know a lot about HTML but want to learn. I am looking for guidance- in other words what do I need to go study and where can I find some examples that may be close to what I am wanting to do?

Thanks.
Don

Comments

  • Phil Pilgrim (PhiPi)Phil Pilgrim (PhiPi) Posts: 23,514
    edited 2011-10-12 16:21
    If you choose to resend the entire page after each increment, you can do it in pure HTML, without any Javascripty-Ajaxy stuff going on. In your HTML reference manual (you do have one, right?), read up on forms, and you'll find the information you need.

    After you gain some experience with HTML (and only then), you will probably want to enhance the page's performance by incorporating some Javascript techniques.

    -Phil
  • Martin_HMartin_H Posts: 4,051
    edited 2011-10-12 19:05
    I would send an increment command because it is always possible that your browser's state does not reflect the device state. For example suppose two browsers load the page, then both add one browser side, and send the new result. The displayed value would only be one greater, but it would be two greater if increment commands were sent.

    Read up on html forms and how they post to a server. You might need to add onclick handlers to one of the buttons because usually only one can cause a form to submit.
  • Mike GMike G Posts: 2,702
    edited 2011-10-12 20:01
    Online HTML reference.
    http://www.w3schools.com/html/
  • rosco_pcrosco_pc Posts: 468
    edited 2011-10-13 01:33
    As Phil said, keep it simple. Here a very simple example:
    <html>
    <head>
      <title>test</title>
      <style type="text/css">
        #counter   {width:100%;text-align:center;}
        #counter a {color:green;font:bold 48px comics;text-decoration:none}
      </style>
    </head>
    <body>
      <div id="counter">
        <a href="your_url_to_increment">00</a>
      </div>
    </body>
    </html>
    

    Clicking on the number sends a HTTP request for an update (of course you need to change that URL to something useful).

    Change the style to make it look like you want. On the w3school link provided by Mike G you'll also find css/javascript references and tutorials.

    Making a specific increment request can be done by using javascript and AJAX techniques, not so difficult to do either but you'll want to read up a bit on that (you'll read a lot about frameworks when you do that, but it can be done without)
  • Don MDon M Posts: 1,654
    edited 2011-10-13 08:54
    OK. Thanks so far. I'll look into some of the tutorials suggested by Mike G. And just so you understand this will not be used by more than one person so the problem of multiple posts to the device won't be a problem for now. There may be some time later that I will make it so that more than 1 person can view simultaneously.

    If there are any other suggestions or webpages that someone has seen that I can "tear apart" please say so. Thanks.
Sign In or Register to comment.