記事一覧

WiFiでiPhone(Safari)からM5Stackに送信してLED点灯

WiFiでiPhone(Safari)からM5Stackに送信してLED点灯



こんにちはRoboTakaoです。

前回はM5StackからBLEでiOSアプリに送信してスイッチを駆動しました。

今回はWiFiでiPhoneのSafariからM5Stackにデータ送信してLEDを点灯してみます。

M5Stack_Wifi04.jpg

基本的にはM5StackのライブラリーをインストールしたArduino IDE内にあるサンプルスケッチを使います。
サンプルスケッチでは単に文字だけがiPhoneに表示されますが、ボタンを押すことでLEDを点灯できるようにしました。

スケッチの説明

ファイル -> サンプル例 -> WiFi -> SimpleWiFiServer

M5Stack_Wifi06.png

iPhone側に表示するWebページをhtmlというStringに格納して
client.print(html);で表示させます。

後M5Stackにもステイタスを表示するように書き加えています。

サンプルスケッチ

動作確認

M5Stackを起動すると振り当てられたIPアドレスがシリアルモニタかM5Stackの画面で確認できます。

iPhone側のSafariなどのウェブブラウザでそのIPアドレスを入れればWebページが表示されます。

M5Stack_Wifi07.png

Webページのボタンを押せばLEDが点灯します。




/*
WiFi Web Server LED Blink

A simple web server that lets you blink an LED via the web.
This sketch will print the IP address of your WiFi Shield (once connected)
to the Serial monitor. From there, you can open that address in a web browser
to turn on and off the LED on pin 5.

If the IP address of your shield is yourAddress:
http://yourAddress/H turns the LED on
http://yourAddress/L turns it off

This example is written for a network using WPA encryption. For
WEP or WPA, change the Wifi.begin() call accordingly.

Circuit:
* WiFi shield attached
* LED attached to pin 5

created for arduino 25 Nov 2012
by Tom Igoe

ported for sparkfun esp32
31.01.2017 by Jan Hendrik Berlin

*/

#include
#include

const char* ssid = "aterm-753fbd-g";
const char* password = "4960ef845d682";

WiFiServer server(80);

String html = "";

void setup()
{
M5.begin();
Serial.begin(115200);
pinMode(5, OUTPUT); // set the LED pin mode

delay(10);

// We start by connecting to a WiFi network

Serial.println();
M5.Lcd.println();
Serial.println();
M5.Lcd.println();
Serial.print("Connecting to ");
M5.Lcd.print("Connecting to ");
Serial.println(ssid);
M5.Lcd.println(ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
M5.Lcd.print(".");
}

Serial.println("");
M5.Lcd.println("");
Serial.println("WiFi connected.");
M5.Lcd.println("WiFi connected.");
Serial.println("IP address: ");
M5.Lcd.println("IP address: ");
Serial.println(WiFi.localIP());
M5.Lcd.println(WiFi.localIP());

server.begin();

html = "<!DOCTYPE html>\
<html>\
<head>\
<meta charset=\"UTF-8\">\
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1\">\
<style>\
table td{\
padding:15px;\
}\
</style>\
</head>\
<body>\
<br>\
<br>\
<br>\
<table>\
<tr><td><input type=\"button\" value=\"ON\" style=\"font-size:32px;\" onclick=\"location.href='/H';\"></td><td><input type=\"button\" value=\"OFF\" style=\"font-size:32px;\" onclick=\"location.href='/L';\"></td></tr>\
</table>\
</body>\
</html>";

}

int value = 0;

void loop(){
WiFiClient client = server.available(); // listen for incoming clients

if (client) { // if you get a client,
Serial.println("New Client."); // print a message out the serial port
M5.Lcd.println("New Client.");
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
if (c == '\n') { // if the byte is a newline character

// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();

// the content of the HTTP response follows the header:
client.print(html);
//client.print("Click here to turn the LED on pin 5 on.
");
//client.print("Click here to turn the LED on pin 5 off.
");
// The HTTP response ends with another blank line:
client.println();
// break out of the while loop:
break;
} else { // if you got a newline, then clear currentLine:
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}

// Check to see if the client request was "GET /H" or "GET /L":
if (currentLine.endsWith("GET /H")) {
digitalWrite(5, HIGH); // GET /H turns the LED on
}
if (currentLine.endsWith("GET /L")) {
digitalWrite(5, LOW); // GET /L turns the LED off
}
}
}
// close the connection:
client.stop();
Serial.println("Client Disconnected.");
Serial.println("Client Disconnected.");
}
M5.update();
}



それでは今回はこの辺で失礼します!ありがとうございます。

M5Stack関連投稿
1)M5StackとりあえずArduinoIDEで使う初期設定した。(macOS)
2)M5Stack Arduino IDE のサンプルスケッチを試してみた
3)M5Stack アバターを試してみた(Arduino IDE) Avatar
4)M5Stack とりあえずLチカ
5)M5Stack サーボ動かしてみた
6)M5Stackで16チャンネルサーボドライバPCA9685を使ってみる
7)M5StackでBluetooth Low Energy (BLE)のテストをしてみた
8)M5StackでWiFiのテストをしてみた
9)iOSアプリからBLEでM5Stack に送信してLEDを点灯させてみた
10)M5StackからBLEでiOSアプリに送信してスイッチを駆動

スポンサードリンク

コメント

コメントの投稿

非公開コメント

プロフィール

RoboTakao

Author:RoboTakao
みなさんご訪問ありがとうございます。ロボット作りたいけどお小遣いそんなにないし、簡単でローコストでロボットを作るための私のプロジェクトを紹介します。

ウェブサイトもありますのでそちらもよろしくお願いします。
http://robotakao.jp/

スポンサーリンク