LoginSignup
2
2

More than 3 years have passed since last update.

Node jsとESP32を使ってLEDをリアルタイムに制御する

Posted at

はじめに

開発環境

node.js 12以降
npm 6以降
Arduino core for the ESP32 1.04以降

作るもの

スマホ等のブラウザからnode.jsを通してESP32にLEDの制御信号を送り,ESP32でリアルタイムにLEDを制御します。
またスマホからnode.jsサーバーにはwebsocketを、node.jsからESP32にはMQTTを用います。

対象読者

node.jsを触ったことのある人
ESP32にコードを書き込める人
フルカラーLEDを持っている人

node.js側の実装

まず以下のコマンドを実行する

$mkdir 好きな名前 
$cd さっき決めた名前
$npm init (質問に答える エンター連打でもヨシ!)

パッケージのインストール

して以下のコマンドを実行ください

$npm install express mosca mqtt socket.io  -s

サーバーのコードを作成

index.jsを作成して以下のコードを書き込む

index.js
//各パッケージの読み込み
const mosca = require('mosca')
var express = require('express');
var app = express();
const server = new mosca.Server()//mqttブローカーを定義
var webserver = require('http').createServer(app);//webサーバーを定義

app.get("/", function (request, response)
{
    response.sendFile(__dirname + '/index.html');
});
webserver.listen(3000);//ポート3000でサーバーを開始
var io = require('socket.io').listen(webserver);
server.on('ready', () => console.log('server started'))

server.on('clientConnected', client =>
    console.log(`client connected: ${client.id}`))

server.on('published', (packet) =>
const mqtt = require('mqtt')
const client = mqtt.connect('mqtt://localhost')

client.on('message', (topic, msg) =>
{
    console.log(`topic: ${topic}, msg: ${msg}`)

})
io.on('connection', function (socket)
{
    socket.on('red', function (msg)//赤LEDの値が届いたらその値をESP32に送信する
    {
        console.log("red=" + msg);
        client.publish('esp32/red', msg);
    });
    socket.on('blue', function (msg)//青LEDの値が届いたらその値をESP32に送信する
    {
        console.log("blue=" + msg);
        client.publish('esp32/blue', msg);
    });
    socket.on('green', function (msg)//緑LEDの値が届いたらその値をESP32に送信する
    {
        console.log("green=" + msg);
        client.publish('esp32/green', msg);
    });
});

htmlファイルを作成する

index.html を作成して以下のコードを書き込む

index.html


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ESP32</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>


    <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
    <style>
        body {
            max-width: 100%;
        }

        .slider {
            width: 300px;
        }
    </style>
</head>

<body>
    <p id="redp">red=50</p>
    <input type="range" value="50" min="0" max="100" step="1" id="redrange" class="slider">
    <p id="bluep">blue=50</p>
    <input type="range" value="50" min="0" max="100" step="1" id="bluerange" class="slider">
    <p id="greenp">green=50</p>
    <input type="range" value="50" min="0" max="100" step="1" id="greenrange" class="slider">

    <script>
        const socket = io();
        var redrange = document.getElementById("redrange");
        var redp = document.getElementById("redp");
        var interval = window.setInterval(sendcolor, 25);
        var red = 0, blue = 0, green = 0;
        var oldred = 0, oldblue = 0, oldgreen = 0;
        redrange.oninput = function ()
        {
            redp.innerHTML = "red=" + this.value;
            red = this.value
        }

        var bluerange = document.getElementById("bluerange");
        var bluep = document.getElementById("bluep");
        bluerange.oninput = function ()
        {
            bluep.innerHTML = "blue=" + this.value;
            blue = this.value
        }

        var greenrange = document.getElementById("greenrange");
        var greenp = document.getElementById("greenp");
        greenrange.oninput = function ()
        {
            greenp.innerHTML = "green=" + this.value;
            green = this.value
        }

        function sendcolor()
        {

            if (red != oldred)
            {
                oldred = red;
                socket.emit('red', red);
            }
            if (blue != oldblue)
            {
                oldblue = blue;
                socket.emit('blue', blue);
            }
            if (green != oldgreen)
            {
                oldgreen = green;
                socket.emit('green', green);
            }
        }
    </script>
</body>

</html>

ESP32にコードを書き込む

まずhttps://github.com/knolleary/pubsubclient
よりPubSubClientライブラリを入れて以下のコードを書き込む

#include <WiFi.h>
#include <PubSubClient.h>
const char ssid[] = "あなたの家のSSID";
const char passwd[] = "あなたの家のpasswd";
const char* mqtt_server = "mqttブローカー(nodejsサーバー)のIPアドレス";

WiFiClient espClient;
PubSubClient client(espClient);
long lastMsg = 0;
char msg[50];
int value = 0;
int red=0,blue=0,green=0;
const int ledR = A18;
const int ledG = A4;
const int ledB = A5;
void setup() {

  ledcSetup(0, 12800, 8);

  ledcAttachPin(ledR, 0);


  ledcSetup(1, 12800, 8);

  ledcAttachPin(ledG, 1);


  ledcSetup(2, 12800, 8);

  ledcAttachPin(ledB, 2);
  Serial.begin(115200);

  connectWiFi();
  client.setServer(mqtt_server, 1883);
  client.setCallback(callback);
}
void loop() {
   if ( WiFi.status() == WL_DISCONNECTED ) {
            connectWiFi(); 
        }
  if (!client.connected()) {
    reconnect();
  }
  client.loop();


    //client.publish("esp32/temperature", "ddd");


  }

void connectWiFi()
{
  WiFi.begin(ssid, passwd);
  Serial.print("WiFi connecting...");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(100);
  }
  Serial.print(" connected. ");
  Serial.println(WiFi.localIP());
}
void callback(char* topic, byte* message, unsigned int length) {
  Serial.print("Message arrived on topic: ");
  Serial.print(topic);
  Serial.print(". Message: ");
  String messageTemp;

  for (int i = 0; i < length; i++) {
    Serial.print((char)message[i]);
    messageTemp += (char)message[i];
  }
  Serial.println();

  if (String(topic) == "esp32/red") {
red=messageTemp.toInt()*255/100;
  }
   if (String(topic) == "esp32/blue") {
blue=messageTemp.toInt()*255/100;
  }
   if (String(topic) == "esp32/green") {
green=messageTemp.toInt()*255/100;
  }
  ledcontrol();
}
void reconnect() {
  // Loop until we're reconnected
  while (!client.connected()) {
   Serial.println("Connecting to MQTT...");
    String clientId = "ESP32-" + String(random(0xffff), HEX);
    if (client.connect(clientId.c_str())) {
      Serial.println("connected");
      // Subscribe
      client.subscribe("esp32/red");
      client.subscribe("esp32/blue");
      client.subscribe("esp32/green");
    } 
     delay(1000);
            randomSeed(micros());
  }
}
void ledcontrol(){
  Serial.println(red);

ledcWrite(0,red);
ledcWrite(1,blue);
ledcWrite(2,green);
}

ESP32に配線をする

フルカラーLEDをそれぞれ32,33,25に接続する

起動する

まず以下のコマンドを実行する

$node index.js

次にESP32に電源を入れる
ブラウザから サーバーのIP:3000 にアクセスする

以上です。

終わりに

初めてのQiitaなので見るに堪えないところがあればご指摘お願いします。
また今日使ったコードはgithubにあげています。
https://github.com/iotConnecter/iotprototypes

参考サイト

https://wak-tech.com/archives/752
https://qiita.com/hilucky/items/0e394760a1445593cea5

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2