Unique Html On/Off button

Projects Programming
1

Hi, i've passed all night testing different solutions for this problem but everyone had some issue.

I'm trying to do a simple thing but can't seem to get it work.

Actually I have this working situation :

client.println(F("<input type=button value='Main On' style=background-color:#ff9999;width:105px;height:42px onmousedown=location.href='/?mainOn'>"));
client.println(F("<input type=button value='Main Off' style=background-color:#ff9999;width:105px;height:42px onmousedown=location.href='/?mainOff'>"));

    
            if (readString.indexOf("/?mainOn") > 0)             main =  1;        
            if (readString.indexOf("/?mainOff") > 0)             main =  0;

Now, as you can guess, i will have a button for turning On and one for turning Off.
I have many things to turn On and Off so i will have to duplicate my buttons filling my webpage.

What I would like is a Single On/Off html button for each thing i have to turn on or off.

I've done this, but it does not work :

client.println(F("<input type=button value='Main On/Off' style=background-color:#ff9999;width:105px;height:42px onmousedown=location.href='/?mainOnOff'>"));

    
            if (readString.indexOf("/?mainOnOff") > 0)      

               { if main ==0 main=1; //it was Off so i turn On
                  else main = 0;         // it was On so i turn Off
                }

The rest of the code shows the effect of buttons in an IFRAME using this code :

           client.print(F("<td><b>Main is </b></td><td>"));
                if (main == 0) client.println( F("<b><font color ='GREEN' >OFF</font></b></td></tr><tr bgcolor='#b3ffff'>") );
                else  client.println( F("<b><font color ='RED' >ON</font></b></td></tr><tr bgcolor='#b3ffff'>") );

Any suggestions?

2

You have an HTML problem, not an Arduino problem. Time to go to school, instead of opening another new thread. HTML Tutorial

Buttons can have names and values. In the resulting GET request, both the name and the value appear. You need BOTH. The name won't change. The value will.

3

What PaulS said. Write an HTML page in an HTML editor that does what you want. If you can't do that, then you can't write an arduino program to generate a page that does what you want.

ps - you probably want "onclick" rather than "onmousedown". Click refers to the logical event, mousedown refers to doing that action with a mouse in particular. Stuff like that.

4

Ok, i will take a look at what PaulS suggested , i'm not expert in Html and I'm happy i've been pointed in the right direction.

Speaking about onclick against onmousedown, due to the fact i'll use this on my phone do you suggest onclick? What's the difference between the two?

Thanks to both.

5

@PaulS

before you replied to my post here i had done this but didn't seem to work.

 if (readString.indexOf("/?mainOnOff=off") > 0)          generale=0;
 if (readString.indexOf("/?mainOnOff=on") > 0)           generale=1;

if (generale==0) client.println(F("<input type=button value='Main On/Off' style=background-color:#ff9999;width:105px;height:42px onmousedown=location.href='/?mainOnOff=on'>"));
if (generale==1) client.println(F("<input type=button value='Main On/Off' style=background-color:#ff9999;width:105px;height:42px onmousedown=location.href='/?mainOnOff=off'>"));
6

PaulMurrayCbr:
What PaulS said. Write an HTML page in an HTML editor that does what you want. If you can't do that, then you can't write an arduino program to generate a page that does what you want.

ps - you probably want "onclick" rather than "onmousedown". Click refers to the logical event, mousedown refers to doing that action with a mouse in particular. Stuff like that.

I have all my code with onmousedown and it's working fine so i don't understand why i should use onclick.
I will give it a try anyways to see what's the difference.
What i wasn't able to do is have a unique button in html that turns on and off something...right now i have two buttons to be able to turn on and turn off.

I was hoping in an Example to work my way out...not asking someone to do the job for me!
Seems there are people here who think that helping solve a problem is as simple as saying " Hey!, do you know the library is down there?!"

7

PaulMurrayCbr:
If you can't do that, then you can't write an arduino program to generate a page that does what you want.

ps - you probably want "onclick" rather than "onmousedown". Click refers to the logical event, mousedown refers to doing that action with a mouse in particular. Stuff like that.

well, maybe that's why i'm asking here. I have no intention to become a html guru for writing a button in an Arduino sketch. This is just hobby time! You guys don't seem to know the answer otherwise why spend so much time speaking without saying something useful?

I know , the world is full of different kind of people, probably if i knew the answer and you were asking, i would have written an example and given an url for further study if needed ... but we're not all the same!

8

PaulMurrayCbr:
ps - you probably want "onclick" rather than "onmousedown". Click refers to the logical event, mousedown refers to doing that action with a mouse in particular. Stuff like that.

From this link : http://www.cardinalpath.com/experiment-onclick-vs-onmousedown-event-tracking-in-google-analytics/

It turns out that there are two very similar ways to track a click, either “onClick” or “onMouseDown” – let’s see the difference.

“onClick” means that the signal will be sent when the “click” has occured, in other words, pressing and releasing the mouse button.
“onMouseDown” means that the signal will be sent when the finger goes down and the mouse button is pressed.
Seems like such an insignificant detail… but it’s not. For example, a growing concern with “onClick” is that things online are so fast today that sometimes the visitor has navigated away from the page before the “onClick” signal is sent, so that particular Event is not recorded.

onClick vs onMouseDown seems like such a trivial question, let’s put it to the test.

THE EXPERIMENT
After having a philosophical ‘onClick’ vs ‘onMouseDown’ discussion with the team, particularly with Eduardo Cereto who decided to use “onMouseDown” with Google Analytics on Steroids (GAS) (a fantastic customization of GA, by the way), I decided to do a casual experiment to get an idea about the difference between “onClick” and “onMouseDown”.

The results… wow.

I added two events on an intro page for one site. The only links for this page are the “ENTER” and image and the small credit link at the bottom.

A pretty simple page that with the following layout.

At the end : These results suggest onMouseDown is more accurate than onClick when it comes to scenarios like the one presented.

Having said that, there is no right or wrong way of measuring things. There is just measurement. It’s up to us to interpret the numbers.

9

Most interface things in a web page are basic clickable links/buttons. You can use the mouse clicks to do more interesting things. Below is a code snip-it from a robotic arm control page where onmousedown starts a gripper servo moving at a specific speed and direction, and onmouseup stops the servo at its current position.

0<input type="button" value="<<<" 
onmousedown="location.href 
('http://127.0.0.1/cgi-bin/onclick.bat?0p700S100');" 
onmouseup="location.href 
('http://127.0.0.1/cgi-bin/stop.bat?STOP0');"/> 
<input type="button" value="<<" 
onmousedown="location.href 
('http://127.0.0.1/cgi-bin/onclick.bat?0p700S50');" 
onmouseup="location.href 
('http://127.0.0.1/cgi-bin/stop.bat?STOP0');"/> 
<input type="button" value="<" 
onmousedown="location.href 
('http://127.0.0.1/cgi-bin/onclick.bat?0p700S10');" 
onmouseup="location.href 
('http://127.0.0.1/cgi-bin/stop.bat?STOP0');"/> 

<input type="button" value="S" 
onmousedown="location.href 
('http://127.0.0.1/cgi-bin/stop.bat?STOP0');" 
onmouseup="location.href 
('http://127.0.0.1/cgi-bin/stop.bat?STOP0');"/> 

<input type="button" value=">" 
onmousedown="location.href 
('http://127.0.0.1/cgi-bin/onclick.bat?0p2300S10');" 
onmouseup="location.href 
('http://127.0.0.1/cgi-bin/stop.bat?STOP0');"/> 
<input type="button" value=">>" 
onmousedown="location.href 
('http://127.0.0.1/cgi-bin/onclick.bat?0p2300S50');" 
onmouseup="location.href 
('http://127.0.0.1/cgi-bin/stop.bat?STOP0');"/> 
<input type="button" value=">>>" 
onmousedown="location.href 
('http://127.0.0.1/cgi-bin/onclick.bat?0p2300S100');" 
onmouseup="location.href 
('http://127.0.0.1/cgi-bin/stop.bat?STOP0');"/> Gripper
10

marcomaroso:
I have all my code with onmousedown and it's working fine so i don't understand why i should use onclick.

If people use the tab key to naivgate around buttons and the enter key to activate them. That's a click, but not a mousedown. If a person presses down the mouse on a button and then slides the cursor off before releasing the mouse, that's a mouse down but not a click.

'click' means that the user has done some sort of user gesture that means "this is the button I want - go do that". It's a logical event. 'mousedown' means that a mouse button has been pressed while the cursor was over the button - physical event. Sure, it mostly comes to the same thing most of the time. But they don't mean the same thing.

11

Ok, in answer to the actual question,

you probably want an array of names of things:

char *buttons[] = {"foo", "bar", "event4", "setting5"};

Then you need to generate the html page using the pattern you are already using.

char *part1 = "<input type=button value='";
char *part2 = "' style=background-color:#ff9999;width:105px;height:42px onmousedown=location.href='/?";
char *part3 = "'>"

for(int i  = 0; i<sizeof(buttons) / sizeof(*buttons); i++) {
  client.print(part1);
  client.print(buttons[i]);
  client.print(part2);
  client.print(buttons[i]);
  client.println("-On");
  client.print(part3);
  client.println();

  client.print(part1);
  client.print(buttons[i]);
  client.print(part2);
  client.print(buttons[i]);
  client.println("-Off");
  client.print(part3);
  client.println();
}

But you want your title for the button to be different from the url (it has spaces, etc). So you'd define a structure:

struct Button {
  char *name;
  char *title;
}; 

char *buttons[] = {
  {"foo", "Do the foo"},
  {"bar", "Do the bar"},
  {"event4", "Confirm"},
  {"setting5", "Use frob"}
};

The code to generate the html then becomes

char *part1 = "<input type=button value='";
char *part2 = "' style=background-color:#ff9999;width:105px;height:42px onmousedown=location.href='/?";
char *part3 = "'>"

for(int i  = 0; i<sizeof(buttons) / sizeof(*buttons); i++) {
  client.print(part1);
  client.print(buttons[i].title);
  client.print(part2);
  client.print(buttons[i].name);
  client.println("-On");
  client.print(part3);
  client.println();

  client.print(part1);
  client.print(buttons[i].title);
  client.print(part2);
  client.print(buttons[i].name);
  client.println("-Off");
  client.print(part3);
  client.println();
}

Working out what button was pressed then becomes a matter of looping through the buttons and checking each title. An easy way to do things is to actually have the boolean in your struct:

struct Button {
  char *name;
  char *title;
  boolean value;
};

And it probably shouldn't be called 'Button' anymore - it should be called 'settings'. Then you loop becomes something like

for(int i  = 0; i<sizeof(buttons) / sizeof(*buttons); i++) {
  if (readString.indexOf(buttons[i].name) > 0) {
    if(readString.indexOf("-Off") > 0) {
      buttons[i].value = false;
    }
    if(readString.indexOf("-On") > 0) {
      buttons[i].value = true;
    }
  }

There's a variety of other things that you can do to neaten things up. You can make your urls more like:

href='/setting?name=foo&value=on'

and parse them out. There's sure to be a library of some sort to make it easier. But the easy way is what you are doing - just do a string match.

Notice that I have put a hyphen there. That's so that if your name is 'PublicOffering', you don't accidentally match it to 'Off'.