Arduino Yun 上使用 jQuery + Bootstrap 制作简单的 Web UI 控制

Hello!在我发表上一篇博客之后,最近一直很忙。但是上个周末,我终于有时间和我的 Arduino Yun 做了一个小项目。在那之间,它已经堆满了很多灰尘。我想做一个简单的项目来展示 REST API 和前端应用程序的概念,以及它们之间如何进行交互。

为什么我选择 Arduino Yun 来做这个项目? 它是这种项目的理想工具,因为在 RESTful 模式下,很容易就能设置 Arduino 的开发板引脚(您只需选择 IDE 中的Bridge示例)。并且很容易为前端应用程序(HML/JS/CSS)提供服务,您只需将该站点放在 /root/path_to/www/ 文件夹中,然后通过 URL 来访问它( http://arduinoYunIp/path_to/www/index.html )。

步骤1:介绍项目架构

我将引导您完成每个步骤,轻松完成此项目。

首先让我们来了解前端应用(用户界面)如何与 API 进行交互,看看下面的图片:

Arduino Yun 前端应用架构图

Arduino REST API

如你所见,前端应用程序作为一个类似 Apache 的服务器。要设置 API,请将 “Bridge Example” 上传到 Arduino 上,如图所示:

Arduino Yun bridge Example

API 的工作原理如下:要打开 LED 13,您必须将以下 GET 请求发送到 Arduino:

  • http://arduinoIp/arduino/mode/13/output
  • http://arduinoIp/arduino/digital/13/1

您还可以使用模拟引脚,或创建自己的自定义 URL 命令,我们将在后面的内容介绍到。

前端

前端基本上包含这些文件( 在Arduino Yun 的 www/ 文件夹中提供):

前端项目文件

我使用 bootstrap 来美化 html,并使用 jQuery(JavaScript库)将请求发送到API。您可以使用 jQuery 轻松地向 API 使用 AJAX 请求,示例如下:

main.js

$('#onButton').click(function(){
    $.get('http://192.168.0.10/arduino/digital/13/1', function(response){
        console.log(response);
    });
});

index.html

<button class="btn btn-secondary" id="onButton" type="button">On</button>

我不会解释 bootstrap 的语法,因为它对于项目来说并不重要,实际上你可以忽略 CSS,应用程序也将会正常工作。

步骤2:解释项目

一图胜行言,看看照片,布线看起来有点复杂,但它实际上它很简单:有两个 led(引脚8和11)连接它们的电阻,还有一个16x2 的 LCD 连接到引脚 7、12、2、3、4 和 5,电位器仅用于液晶显示器的亮度控制。

Arduino Yun 简单 Web UI Demo

因为 Arduino Yun 内置的闪存非常有限(16 MB),因为在 Arduino Yun 的 microSD 卡上旋转服务器文件。您可以按照 Arduino Yun 的控制台中的这些命令,在 SD 中提供网页:

&gt; mkdir /mnt/sda1
&gt; mount /dev/sda /mnt/sda1
# and the symlink (may already exist)
&gt; ln -s /mnt/sda1/www /sd/www

解释一下 UI:

  • On/Off Button,这个按钮连接到引脚 8
  • Slider,用来控制使用 pwm(analogWrite)引脚 11 的亮度强度。
  • Text Input,可以填写任意的内容,当您按 “Send” 按钮时,这些文本将显示在液晶显示器上。
  • Console Label,这示 API 的输出,每当应用程序向 API 发送请求时,它会收到一个响应,这些都会显示在 Console label 中。

步骤3:自制 LCD API 命令

默认的 bridge 示例没有控制 LCD 的命令,但添加以下代码后,将会方便我们发送文本:

main.ino

void process(BridgeClient client) {
  // read the command
  String command = client.readStringUntil('/');

  // is "digital" command?
  if (command == "digital") {
    digitalCommand(client);
  }

  // is "analog" command?
  if (command == "analog") {
    analogCommand(client);
  }

  // is "mode" command?
  if (command == "mode") {
    modeCommand(client);
  }

  // --- Here starts the lcd code ---

  // is "lcd" command?
  if (command == "lcd") {
    lcdCommand(client);
  }
}

void lcdCommand(BridgeClient client) {
  String text = client.readStringUntil('/');
  String text2 = "";
  lcd.clear();
  if (text.length()-2 &gt; 16)
  {
    text2 = text.substring(16, text.length()-2);
    lcd.print(text.substring(0,16));
    lcd.setCursor(0, 1);
    lcd.print(text2);
  }
  else
  {
    lcd.print(text.substring(0,text.length()-2));    
  }

  client.print(F("LCD: "));
  client.print(text);
}

main.js

$('#send').click(function(){
        var url = "http://192.168.XX.XX/arduino";
        var lcdUrl ="/lcd/";
        $.get(url+lcdUrl+$("#text").val()+"/", function(response){
        console.log(response);
        $("#console").text(response);
    });
});

index.html

<div class="input-group container">
<input class="form-control" id="text" placeholder="" type="text"/>
<span class="input-group-btn">
<button class="btn btn-secondary" id="send" type="button">Send</button>
</span>
</div>
<ol class="breadcrumb">
<li class="breadcrumb-item active">Console:</li>
<li class="breadcrumb-item active" id="console"></li>
</ol>

步骤4:Do it!

所以,为了使这个项目工作,请按照下列步骤操作:

  • 按照照片所示进行连线,并按照说明进行操作
  • 将我修改过的 Bridge 示例上传到 Arduino 中。
  • 将 index.html、js/ 和 css/ 文件夹上传到 Arduino 的 www/ 文件夹。
  • 修改 main.js 并写下 Arduino Yun 的ip。
  • 打开 http//arduinoYunIp/path_to/www/index.html,玩~

以下是本文的 GitHub 地址:https://github.com/martinKindall/yunWebPanel

原文链接:http://www.tecnomacs.com/2016/12/03/lets-do-a-simple-webserver-ui-for-arduino-yun-using-bootstrap/

尚未评分
您的评分将帮助我们做出更好的玩法

观光\评论区

Copyright © 2017 玩点什么. All Rights Reserved.