Question

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

用户界面是一个HTML页面。有提交表单，其中包含值和值。这些值被发送到处理程序页面进行处理，以便Arduino可以读取它。

我想使用CSS / JavaScript风格的切换按钮来替换可怕的提交按钮。

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

Answer 1

1 以某种方式存储系统状态

您可以使用数据库，文件和服务。

2 Arduino应通过PHP脚本连接到您的服务器

此脚本将系统状态返回到设置的值

3 创建用户界面

这可以是另一个PHP脚本。它应该显示你的按钮。

4 使用jQuery捕获点击事件。

然后对服务器发出Ajax调用并更改系统状态，服务器应返回新状态，使用$.ajax成功回调函数检查新状态并更新用户接口（如果状态无法持久存在，则必须再次执行此操作，以防止UI不同步）

Answer 2

好吧，使用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是否可以读取send变量。如果它有效，如果我是对的，变量应出现在序列中吗？

更多网站信息。

使用表单是您的最佳选择。要使用切换，您可以使用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>

Answer 3

Xocoatzin 的解决方案之路很好。但如果你喜欢纯CSS 解决方案，那么DEMO。

隐藏式input类型checkbox：

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

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

Answer 4

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

如何使用切换按钮？

4 个答案:

更多网站信息。