0

我正在开发一个使用以太网屏蔽的 Arduino 项目。Adruino 连接到我的笔记本电脑（服务器）并读取一个PHP文件，告诉它打开或关闭继电器。

用户界面是一个 HTML 页面。提交表单的值打开和关闭。这些值被发送到处理程序页面进行处理，以便 Arduino 可以读取它。

我想使用 CSS/JavaScript 样式的切换按钮来替换看起来丑陋的提交按钮。

http://proto.io/freebies/onoff/是我想使用的按钮。如何提取切换状态的值并在我的 HTML 页面上实现它？

4

4 回答 4

0

您需要为切换按钮单击创建一个 JavaScript Ajax事件处理程序。Ajax 请求应该转到PHP页面，然后该页面将切换/设置按钮状态。您需要某种方式来存储按钮的状态，也许只是一个文件？不需要太复杂的东西。

于 2012-12-26T17:28:04.273 回答
0

好吧，使用 JavaScript 将需要您使用我目前不熟悉的 Ajax。我还建议使用写入文本文件而不是使用 Arduino 的PHP文件。试图保护，是否不能像使用 PHP API 的任何服务器一样向 Arduino 发送请求？

<?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.
?>

但我不确定 Arduino 是否可以读取发送变量。如果它有效，如果我是对的，变量应该出现在序列中吗？

更多网站信息。

使用表格是您的最佳选择。要使用切换，您可以使用 JavaScript 代码发布表单 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提交表单onClick：

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

CSS使它看起来很漂亮：

<style>
    #on{background:#00FFFF;content:'On';}
    #off{background:#00FFFF;content:'Off';}
</style>
于 2012-12-26T17:21:37.170 回答
0

Xocoatzin的解决方案是好的。但如果你喜欢纯 CSS解决方案，这里是DEMO。

有一个隐藏input类型checkbox：

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

它可用于获取服务器端的值以及其他脚本。

于 2012-12-26T17:21:43.350 回答
0

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)

于 2012-12-26T17:17:19.557 回答