如何使用切换按钮？

Question

I'm working on an Arduino project that uses the Ethernet shield. The Adruino connects to my laptop (server) and reads a PHP file telling it to turn on or off a relay.

The user interface is an HTML page. There are submit forms with values on and off. The values get sent to a handler page for processing so that it can be read by the Arduino.

I want to make use of a CSS/JavaScript-styled toggle button to replace the hideous looking submit buttons.

http://proto.io/freebies/onoff/ is the button I want to use. How do I extract the values of the toggle states and implement it on my HTML page?

Answer 1

1 Store the status of your system somehow

You can use a database, a file, a service for this.

2 The Arduino should connect to your server via a PHP script

This script is returns the status of the system to whatever value is set

3 Create the user interface

This can be another PHP script. It should display your button.

4 Use jQuery to capture the click event.

Then fire an Ajax call to the server and change the status of the system, the server should return the new status, use $.ajax success callback function to check for the new status and update your user interface (you have to do this again in case the status could not be persisted you prevent your UI to go out of sync)

Answer 2

Well, to use JavaScript would entail you to use Ajax which I'm not familiar with at this point. I'd also recommend using writing to a text file than using a PHP file by the Arduino. Trying to be protective, would it not be possible to send request to the Arduino like you would any server using PHP APIs?

<?php
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'http://192.168.0.5');//depending on your arduino's address
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $_POST['on/off']);
    //You may want to validate your variables.
?>

But I'm unsure whether the Arduino can read the send variable. If it works, the variable should appear in the serial if I'm right?

Further website information.

Using a form is your best option. To use a toggle you could use JavaScript code to post the form onClick.

<form name="toggleForm" action="poster.php" method="POST"> <!-- Post method to get your variables. poster.php will be the script above.-->
    <input id="on" name="on/off" onClick="send()" value="on" type="radio"/>
    <input id="off" name="on/off" onClick="send()" value="off" type="radio"/>
</form>

javascript to submit the form onClick:

<script>
    function send(){
        document.toggleForm.submit();
    }
</script>

CSS to make it look pretty:

<style>
    #on{background:#00FFFF;content:'On';}
    #off{background:#00FFFF;content:'Off';}
</style>

Answer 3

Xocoatzin 's path to the solution is good. But if you like a pure CSS solution here is the DEMO .

There is a hidden input type checkbox :

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch1" checked="">

It can be used to get the value on the server side as well as by other scripts.

Answer 4

You'll need to make a JavaScript Ajax event handler for the toggle button click. The Ajax request should go to a PHP page which will then toggle / set the button state. You would need some sort of way to store the state of the button, perhaps just a file? There is no need for anything too complex.