0°

通过web控制灯泡

简介

如今,通过网络控制已经成为一种常态。在这个简单的项目中,我将向您展示如何制作一个通过网络控制灯泡的应用。

当然这不是什么新东西,你可能会看到看到过基于网络的控制东西只需要几步就可以完成。这样我们可以通过应用程序来控制/监

控设备,我么可以把我们的想法付诸实践。

步骤一 材料准备

硬件准备:

我使用Arduino Uno板,

PHPoC WiFi Shield

PHPoC Arduino中继板

灯泡

软件准备:

arduino IDE

步骤二 原理说明

它涉及“Web”部分。需要我们结合PHPoC Shield,使得我们的Arduino板成为Web服务器/ WebSocket服务器。所以,我们需要客户端代码和服务器端代码。

+客户端代码:提供基于Web的用户界面来控制灯泡。UI允许用户将控制命令发送到Web服务器(Arduino板)。UI还显示来自服务器的相应从而控制UI的状态。在从Web浏览器(Web客户端)接收到HTTP请求时,Web服务器将解释的Web文件发送到Web浏览器。

+服务器端代码:根据Web浏览器发送的数据控制灯泡。代码在Arduino板上运行,检查Web客户端是否有任何请求设置继电器打开/关闭灯泡,然后将灯泡状态发送到Web浏览器。

在这个项目中,我制作了一个SVG元素来显示灯泡和一个从Web发送控制命令的按钮。Web浏览器和Web服务器通过WebSocket相互通信。WebSocket连接适合实时应用程序。

您花在制作UI上的努力越多,它看起来就越好。但不要担心,互联网上有大量的共享资源可供使用,因此您可以找到一些很酷的免费源代码,而不是自己完成所有的编程工作。

步骤三 编写程序

PHP

<html>
<head><title>
         <?php echo system("uname -i") ?>
    <title>
    <meta content="initial-scale=0.7, maximum-scale=1.0, minimum-scale=0.5, width=device-width, user-scalable=yes" name="viewport">
     <style>
        body {
            text-align: center;
            font-family: verdana, Helvetica, Arial, sans-serif, gulim;
            background: #C2CCD0;
        }
      
        h2 {
            font-size: 16px;
            line-height: 25px;
        }

        body.active {
            background: #E2ECF1;
        }

        #on {
            opacity: 0;
        }

        .active #on {
            opacity: 1;
        }

        .light-bulb {
            width: 250px;
            height: 400px;
            margin-top: 100px
        }

        

        .container {
            margin: auto;
            width: 250px;
        }


        .switches {
            width: 150px;
            height: 65px;
            background-color: #38434A;
            font-size: 24px;
            margin: auto;
            border-radius: 10px;
            color: white;
            cursor: pointer;
            letter-spacing: 0.2px;
            line-height: 65px;
            text-align: center;
            user-select: none;
            transition: none;
        }

    <style>

<head>

<body><div class="container"><div class="light-bulb"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 275.3 413.3" enable-background="new 0 0 275.3 413.3" xml:space="preserve"><g><path fill="#E2ECF1" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8
		c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /><g><g id="on"><path fill="#FFDB55" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8
		c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /><g>
<g>

                    <path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M168.5,375.5h-61.7c-8.9,0-16-7.2-16-16
		v-55.8h93.8v55.8C184.6,368.3,177.4,375.5,168.5,375.5z" /><path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M151.2,401.5h-27.1c-3.9,0-7-3.2-7-7v-19
		h41.1v19C158.2,398.4,155.1,401.5,151.2,401.5z" /><line fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" x1="184.6" y1="339.6" x2="90.8" y2="339.6" /><path fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4
		c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /><g><g>

                    <path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M207.1,89.5
		c-12.3-16.1-28.4-29.1-46.9-37.8" /><path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M225,121.4
		c-0.8-2.2-1.8-4.4-2.7-6.5" /><g><svg><div><div class="switches">
            Switch
        <div><div><br><h2 id="ws_state"><h2>
<body>

<script>
    var is_on;
    var ws;
    var button = document.querySelector('.switches');
    var ws_state = document.getElementById("ws_state");

    function init() {
        button.addEventListener("click", toogleLed);
        connect();
        is_on = 0;
    }



    function connect() {
        if (ws == null) {
            var ws_host_addr = "HTTP_HOST") ?>";
            if ((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) {
                // network resource identifier to UNC path name conversion
                ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
                ws_host_addr = ws_host_addr.replace(/:/g, "-");
                ws_host_addr += ".ipv6-literal.net";
            }
            ws = new WebSocket("ws://" + ws_host_addr + "/remote_led", "text.phpoc");
            ws_state.innerHTML = "Connecting. Please wait!";
            ws.onopen = ws_onopen;
            ws.onclose = ws_onclose;
            ws.onmessage = ws_onmessage;
        } else
            ws.close();
    }
    function ws_onopen() {
        ws_state.style.display = "none";
        display_lightbulb();
    }


    function ws_onclose() {
        button.style.backgroundColor = "#C2C2C2";
        ws_state.style.display = "";
        ws_state.innerHTML = "Can not connect to Arduino Board. 
 Please check again and reload this page!";
        ws.onopen = null;
        ws.onclose = null;
        ws.onmessage = null;
        ws = null;
        is_on = 0;
        display_lightbulb();
    }



    function ws_onmessage(e_msg) {
        e_msg = e_msg || window.event; // MessageEvent
        is_on = parseInt(e_msg.data);
        display_lightbulb();
    }



    function toogleLed() {
        if (is_on)
            ws.send("0");
        else
            ws.send("1");
    }



    function display_lightbulb() {
        document.body.className = (is_on) ? "active" : "";
    }

    window.onload = init;

<script>



<html>

arduino代码

#include <Phpoc.h>
#include <PhpocExpansion.h>

#define ON '1'
#define OFF '0'

byte expansionId = 1;
ExpansionRelayOutput relay(expansionId, 0);
PhpocServer server(80);


void setup() {
  Serial.begin(9600);
  while(!Serial);


  // initialize PHPoC [WiFi] Shield:
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  //Phpoc.begin();

  // start WebSocket server
  server.beginWebSocket("remote_led");

  // print IP address of PHPoC [WiFi] Shield to serial monitor:
  Serial.print("WebSocket server address : ");
  Serial.println(Phpoc.localIP());

  Expansion.begin();
  // get name and print it to serial
  Serial.println(relay.getName()); 
}



void loop() {
  // wait for a new client:
  PhpocClient client = server.available();

  if (client) {
    if (client.available() > 0) {
      // read a byte incoming from the client:char thisChar = client.read();
      switch(thisChar)
      {
        case OFF:
          Serial.println("Turn LED OFF");
          relay.off();
          server.write(OFF);
          break;
        case ON:
          Serial.println("Turn LED ON");
          relay.on();
          server.write(ON);
          break;
      }
    }
  }
}

步骤四 验证结果

通过网页端可以轻松控制远程设备。

当前内容已被隐藏,您需要登录才能查看
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论