大家好, 歡迎收看本週的Weekend project with Stonez56。 本周要進行的是 App Inventor 第5集 - “無線搖控 ESP32-CAM APP Part 2”! 這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, 相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿。
因內容較多, 本影片分為上, 下兩集. 本集為 App Inventor程式設計.
而上集為 UI 界面設計(https://youtu.be/x545mFSZWgg ),
如果你還沒有觀看的朋友, 請記得先去看一下, 再回來看這一集
再前一集是ESP32 程式的說明在這:
Arduino #35 使用 MQTT 無線搖控 ESP32-CAM 模組https://youtu.be/ECHBRdtV-yw
好, 那我們就開始吧今天的練習吧~
大家好, 歡迎收看本週的Weekend project with Stonez56。 本周要進行的是 App Inventor 第4集 - “無線搖控 ESP32-CAM APP Part 1”! 這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, 相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿。
因內容較多, 本影片分為上, 下兩集. 上集為 UI 界面設計, 下集為 App Inventor程式設計.
上次為大家示範了如何使用HTML + CSS + Javascript來寫網頁程式(Arduino #35 https://youtu.be/ECHBRdtV-yw), 利用網頁版的MQTT來遠端搖控ESP32 , 收到了不錯的回響.
今天我們使用 App Inventor 2來開發遠端搖控的 APP來取代網頁版本. 在ESP32程式的撰寫不需做任何的改變, 因為只要 MQTT Topic 一樣, APP inventor 就可以發佈訊息到ESP32了! 超方便的!
App Inventor 使用 WebView 想串流影像時, 會出現: header fields are too long for the server to interpret. 這問題會在下集時, 跟各位說明.
另外, 針對 ESP32 C++上的程式說明, 請看 Arduino #35 https://youtu.be/ECHBRdtV-yw
好, 那我們就開始吧今天的練習吧~
大家好, 歡迎收看本週的Weekend project with Stonez56。
本周要進行的是 Arduino 第35集，"使用 MQTT 無線搖控 ESP32-CAM 模組”。這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, 相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿。好, 那我們就開始吧今天的練習吧~
!!! ESP32-CAM streaming 的程式是由這裡取得:
https://github.com/wjsanek/wjsanek/blob/main/Working_ESP32_CameraWebServer_V2_with_OTA.zip
這位高手把一大堆沒有用到的ESP32-CAM的程式移除, 所以我才有機會把程式寫成可以OTA.
在 VScode 裡, ESP32-CAM 的模組, 設定如下:
Board: ESP32 Wrover Module
Upload Speed: 115200
Flash Frequency: 80MHz
Flash Mode: QIO
Partition Scheme: Minimal SPIFFS (1.9MB APP with OTA/190KB SPIFFS)
ESP32-CAM - Camera 伺服器 串流影像
Servo - 控制 SG90 伺服器擺動
ESPAsyncWifimanager - 隨時改變 Wi-Fi 設定
AsyncElegantOTA - FOTA - 隨時隨地的更新 firmware
MQTT - PubSubClient - 由ESP32-CAM 收送訊息
Paho MQTT Javascript client - 由瀏覽器 收送訊息 / HTML 編寫
ESP32-CAM * 1
天線 * 1
SG90 Servo 伺服器 * 2 - 上下 & 左右擺動各一個
1000uf 電容一顆 * 1 - 過濾影像的水波紋
杜邦線 * 4 - Power, GND, IO12, IO13
Minimized ESP32 Camera Streaming code
MQTT client PubSubClient V2.8 by Nick O'Leary
AsyncElegantOTA
MQTT Javascript Client by PAHO
ESP32Servo
SG90 Gimbal STL file
*** If you are using the ESP32, Please see this: ESP32
It would be great if every IoT device deployed with OTA capability with Wifimanager. Then the IoT device would be able to change SSID & password without connecting the device to the computer to update SSID and password as well as FOTA at any time when you wanted.
In this tutorial, let’s combine ESPAsync_Wifimanager and AsyncElegantOTA into a code base to become a handy tool for future IoT projects!
I have made WiFiManager & AsyncElegantOTA tutorial videos. If you don't know what they are and how they work for IoT projects, I strongly recommend you to watch these videos first.
This time, I used ESPAsync_WiFiManager library, it's because WiFiManager does not work with AsyncElegnatOTA together. We have to change to ESPAsync_WiFiManager. The main reason for this is that AsnycWiFiManager is using Asynchronous technology. Which means it can accept connections from different sources at the same time. So, while WiFiManager is running on the device, the device can also be a FOTA server to allow firmware to be remotely updated!
Watch these videos first, if haven't heard about these.
GitHub Library:
Sample code:
*** If you are using the ESP8266, Please see this: ESP8266
It would be great if every IoT device deployed with OTA capability with Wifimanager. Then the IoT device would be able to change SSID & password without connecting the device to the computer to update SSID and password as well as FOTA at any time when you wanted.
In this tutorial, let’s combine ESPAsync_Wifimanager and AsyncElegantOTA into a code base to become a handy tool for future IoT projects!
I have made WiFiManager & AsyncElegantOTA tutorial videos. If you don't know what they are and how they work for IoT projects, I strongly recommend you to watch these videos first.
This time, I used ESPAsync_WiFiManager library, it's because WiFiManager does not work with AsyncElegnatOTA together. We have to change to ESPAsync_WiFiManager. The main reason for this is that AsnycWiFiManager is using Asynchronous technology. Which means it can accept connections from different sources at the same time. So, while WiFiManager is running on the device, the device can also be a FOTA server to allow firmware to be remotely updated!
Watch these videos first, if haven't heard about these.
GitHub Library:
Sample code:
It's always troublesome to update firmware for your IoT projects? Tried Arduino BasicOTA examples, but never get it to work? Then you must try AsyncElegantOTA! It's very easy to use and I've succeed the first time I try it.
For those of you do not have time to watch it all, here is the video timeline for your quick reference.
Video Timeline:
00:13 Tutorial summary 00:53 What's OTA & Why 01:25 Tutorial begin 01:36 Install AsyncElegantOTA library 02:32 Download ESPAsyncWebServer & ESPAsyncTCP 02:57 Ensure Arduino board is capable of OTA 03:41 Where to place downloaded libraries 04:09 Open sample AsyncElegantOTA sketch 04:52 Upload sketch 05:05 Open serial monitor to see ESP8266 IP address 05:36 Access to ESP8266 from browser 06:10 Update ESP8266 firmware from browser 06:31 Where to find .bin file in VS Code 06:54 How to create .bin file in Arduino IDE 08:16 OTA update ESP8266 firmware 09:01 Next video tutorial - How to combine ESP8266 project with AsyncElegantOTA library
/***************************************************
Adafruit MQTT Library ESP8266 Adafruit IO SSL/TLS example
Must use the latest version of ESP8266 Arduino from:
https://github.com/esp8266/Arduino
Works great with Adafruit's Huzzah ESP board & Feather
---- https://www.adafruit.com/product/2471
---- https://www.adafruit.com/products/2821
Adafruit invests time and resources providing this open source code,
please support Adafruit and open-source hardware by purchasing
products from Adafruit!
Written by Tony DiCola for Adafruit Industries.
SSL/TLS additions by Todd Treece for Adafruit Industries.
MIT license, all text above must be included in any redistribution
****************************************************/
#include <ESP8266WiFi.h>
#include "Adafruit_MQTT.h"
#include "Adafruit_MQTT_Client.h"
//This line allows one to use NODEMCU pin name, such as D0
#define FASTLED_ESP8266_RAW_PIN_ORDER
#include <FastLED.h>
#include <Wire.h>
// Information about the LED strip itself
#define LED_PIN1 D3
#define LED_PIN2 D4
#define LED_PIN3 D5
#define LED_PIN4 D6
#define COLOR_ORDER GRB
#define CHIPSET WS2811
#define NUM_LEDS 30
#define BRIGHTNESS 255
CRGB leds[NUM_LEDS];
// FastLED v2.1 provides two color-management controls:
// (1) color correction settings for each LED strip, and
// (2) master control of the overall output 'color temperature'
//
// THIS EXAMPLE demonstrates the second, "color temperature" control.
// It shows a simple rainbow animation first with one temperature profile,
// and a few seconds later, with a different temperature profile.
//
// The first pixel of the strip will show the color temperature.
//
// HELPFUL HINTS for "seeing" the effect in this demo:
// * Don't look directly at the LED pixels. Shine the LEDs aganst
// a white wall, table, or piece of paper, and look at the reflected light.
//
// * If you watch it for a bit, and then walk away, and then come back
// to it, you'll probably be able to "see" whether it's currently using
// the 'redder' or the 'bluer' temperature profile, even not counting
// the lowest 'indicator' pixel.
//
//
// FastLED provides these pre-conigured incandescent color profiles:
// Candle, Tungsten40W, Tungsten100W, Halogen, CarbonArc,
// HighNoonSun, DirectSunlight, OvercastSky, ClearBlueSky,
// FastLED provides these pre-configured gaseous-light color profiles:
// WarmFluorescent, StandardFluorescent, CoolWhiteFluorescent,
// FullSpectrumFluorescent, GrowLightFluorescent, BlackLightFluorescent,
// MercuryVapor, SodiumVapor, MetalHalide, HighPressureSodium,
// FastLED also provides an "Uncorrected temperature" profile
// UncorrectedTemperature;
#define TEMPERATURE_1 Tungsten100W
#define TEMPERATURE_2 OvercastSky
// How many seconds to show each temperature before switching
#define DISPLAYTIME 20
// How many seconds to show black between switches
#define BLACKTIME 3
// Relay settings
#define relay2Pin D7 //NodeMCU pin D7
#define relay1Pin D8 //NodeMCU pin D8
int relay1Status = 0; //switch of the relay; either 0=off or 1=on
int relay2Status = 0; //switch of the relay; either 0=off or 1=on
/************************* WiFi Access Point *********************************/
#define WLAN_SSID "Use_your_ssid"
#define WLAN_PASS "Use_your_wifi_password"
/************************* Adafruit.io Setup *********************************/
#define AIO_SERVER "io.adafruit.com"
#define AIO_SERVERPORT 8883 // 8883 for MQTTS sercure, 1883 for non-Secure
#define AIO_USERNAME "Use_your_user_name"
#define AIO_KEY "Use_your_own_AIO_key"
/************ Global State (you don't need to change this!) ******************/
// WiFiFlientSecure for SSL/TLS support
WiFiClientSecure client;
//WiFiClient for non-secure
//WiFiClient client;
// Setup the MQTT client class by passing in the WiFi client and MQTT server and login details.
Adafruit_MQTT_Client mqtt(&client, AIO_SERVER, AIO_SERVERPORT, AIO_USERNAME, AIO_KEY);
// io.adafruit.com SHA1 fingerprint
const char* fingerprint = "AD 4B 64 B3 67 40 B5 FC 0E 51 9B BD 25 E9 7F 88 B6 2A A3 5B";
/****************************** Feeds ***************************************/
// Setup a feed called 'test' for publishing.
// Notice MQTT paths for AIO follow the form: <username>/feeds/<feedname>
//Adafruit_MQTT_Publish light_color = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/light-color");
//Adafruit_MQTT_Publish light_1 = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/light-1");
/*************************** Sketch Code ************************************/
// Bug workaround for Arduino 1.6.6, it seems to need a function declaration
// for some reason (only affects ESP8266, likely an arduino-builder bug).
void MQTT_connect();
void verifyFingerprint();
//set up two feeds called 'light_1' / 'light_color' for subscribing to changes
Adafruit_MQTT_Subscribe light_1 = Adafruit_MQTT_Subscribe(&mqtt, AIO_USERNAME "/feeds/light-1");
Adafruit_MQTT_Subscribe light_color = Adafruit_MQTT_Subscribe(&mqtt, AIO_USERNAME "/feeds/light-color");
void setup() {
delay( 3000 ); // power-up safety delay for LED stripe
Serial.begin(115200);
delay(10);
//MQTT connection indication when Blue is on
pinMode(LED_BUILTIN, OUTPUT);
// Relay pins
pinMode(relay1Pin, OUTPUT);
pinMode(relay2Pin, OUTPUT);
//LED pins
pinMode(LED_PIN1, OUTPUT);
pinMode(LED_PIN2, OUTPUT);
pinMode(LED_PIN3, OUTPUT);
pinMode(LED_PIN4, OUTPUT);
//FastLED declaration
FastLED.addLeds<CHIPSET, LED_PIN1, COLOR_ORDER>(leds, NUM_LEDS).setCorrection( TypicalLEDStrip );
FastLED.addLeds<CHIPSET, LED_PIN2, COLOR_ORDER>(leds, NUM_LEDS).setCorrection( TypicalLEDStrip );
FastLED.addLeds<CHIPSET, LED_PIN3, COLOR_ORDER>(leds, NUM_LEDS).setCorrection( TypicalLEDStrip );
FastLED.addLeds<CHIPSET, LED_PIN4, COLOR_ORDER>(leds, NUM_LEDS).setCorrection( TypicalLEDStrip );
FastLED.setBrightness( BRIGHTNESS );
//Turn on the light to White in the beginning
Serial.println(F("Connecting Wi-Fi...(Blue)"));
fill_solid(leds, NUM_LEDS, CRGB::Blue);
FastLED.show();
Serial.println(F("Home MQTT Color Light Control System"));
// Connect to WiFi access point.
Serial.println(); Serial.println();
Serial.print("Connecting to ");
Serial.println(WLAN_SSID);
WiFi.begin(WLAN_SSID, WLAN_PASS);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println();
Serial.println("WiFi connected");
Serial.print("IP address: "); Serial.println(WiFi.localIP());
// check the fingerprint of io.adafruit.com's SSL cert
verifyFingerprint();
//Subscribe to Adafruit Feed!
mqtt.subscribe(&light_1);
mqtt.subscribe(&light_color);
//Turn on the light When io.adafruit.com & MQTT connected
Serial.println(F("Wi-Fi Connected...(White)"));
fill_solid(leds, NUM_LEDS, CRGB::White);
FastLED.show();
}
uint32_t x = 0;
/* This turn on/off relay switch
*/
void switchRelay(int relay, int stat) {
if (relay == 2) { //this is light-1;
if (stat == 0) {
digitalWrite(relay2Pin, LOW);
relay1Status = 0;
Serial.println(F("Relay off"));
}
if (stat == 1) {
digitalWrite(relay2Pin, HIGH);
relay1Status = 1;
Serial.println(F("Relay on"));
}
}
if (relay == 1) { //this is color-light;
if (stat == 0) {
digitalWrite(relay1Pin, LOW);
relay2Status = 0;
Serial.println(F("Relay off"));
}
if (stat == 1) {
digitalWrite(relay1Pin, HIGH);
relay2Status = 1;
Serial.println(F("Relay on"));
}
}
}
void loop() {
String feed_lastread; //This is the String of effect name read from Adafruit.IO
// Ensure the connection to the MQTT server is alive (this will make the first
// connection and automatically reconnect when disconnected). See the MQTT_connect
// function definition further below.
MQTT_connect();
Adafruit_MQTT_Subscribe *subscription;
while ((subscription = mqtt.readSubscription(1000))) {
if (subscription == &light_1) {
Serial.print(F("Light-1:"));
Serial.println((char *)light_1.lastread);
feed_lastread = (char *)light_1.lastread;
feed_lastread.trim(); //
// Serial.println("Light 1:" + feed_lastread); //for verifying the varialble
// *** NOTICE: adafruit.io publishes the data as strings, not numbers!!!
if (feed_lastread == "ON") {
switchRelay(2, 1);
}
if (feed_lastread == "OFF") {
switchRelay(2, 0);
}
}
if (subscription == &light_color) {
Serial.print(F("Color-Light:"));
Serial.println((char *)light_color.lastread);
feed_lastread = (char *)light_color.lastread;
feed_lastread.trim(); //
// Serial.println("Color Light:" + feed_lastread); //for verifying the variable
// *** NOTICE: adafruit.io publishes the data as strings, not numbers!!!
if (feed_lastread == "ON") {
switchRelay(1, 1);
} else if (feed_lastread == "OFF") {
switchRelay(1, 0);
} else {
//if (relay2Status == 1 ) { //Only send color light commands when Color Light is on
colorEffectFunction(feed_lastread);
//}
}
}
} //while MQTT got message loop
/*
switchRelay();
Serial.print(F("\nSwitch is:"));
if (relay1Status == 1) {
Serial.print(F("On"));
} else {
Serial.print(F("Off"));
}
// Now we can publish stuff!
Serial.print(F("\nSending val "));
Serial.print(x);
Serial.print(F(" to Relay1 feed..."));
if (! Relay1.publish(x++)) {
Serial.println(F("Failed"));
} else {
Serial.println(F("OK!"));
}
// Now we can publish stuff!
Serial.print(F("\nSending val "));
Serial.print(x);
Serial.print(F(" to Relay2 feed..."));
if (! Relay2.publish(x)) {
Serial.println(F("Failed"));
} else {
Serial.println(F("OK!"));
}
// wait a couple seconds to avoid rate limit
delay(5000);
*/
}
/*
This function show the color light
Control multiple WS2812 strips easily!
https://github.com/FastLED/FastLED/wiki/Multiple-Controller-Examples
FastLED All effects in one script
https://www.tweaking4all.com/hardware/arduino/arduino-all-ledstrip-effects-in-one/
Take this to complete your "Google Home" project
First example to show you the basics about FastLED: https://www.tweaking4all.com/hardware/arduino/adruino-led-strip-effects/
*/
void colorEffectFunction(String colorVariant) {
Serial.print(F("Color effect:"));
if (colorVariant == "rainbow") {
static uint8_t starthue = 0;
Serial.println(F("Rainbow"));
fill_rainbow( leds, NUM_LEDS, --starthue, 20);
FastLED.show();
}
if (colorVariant == "candle") {
Serial.println(F("Candle"));
fill_solid(leds, NUM_LEDS, Candle);
FastLED.show();
}
if (colorVariant == "red") {
Serial.println(F("Red"));
fill_solid(leds, NUM_LEDS, CRGB::OrangeRed);
FastLED.show();
}
if (colorVariant == "green") {
Serial.println(F("Green"));
fill_solid(leds, NUM_LEDS, CRGB::Green);
FastLED.show();
}
if (colorVariant == "blue") {
Serial.println(F("Blue"));
fill_solid(leds, NUM_LEDS, CRGB::Blue);
FastLED.show();
}
if (colorVariant == "yellow") {
Serial.println(F("Yellow"));
fill_solid(leds, NUM_LEDS, CRGB::Yellow);
FastLED.show();
}
if (colorVariant == "gold") {
Serial.println(F("Gold"));
fill_solid(leds, NUM_LEDS, CRGB::Gold);
FastLED.show();
}
if (colorVariant == "orange") {
Serial.println(F("Orange"));
fill_solid(leds, NUM_LEDS, CRGB::Orange);
FastLED.show();
}
if (colorVariant == "White") {
Serial.println(F("White"));
fill_solid(leds, NUM_LEDS, CRGB::White);
FastLED.show();
}
if (colorVariant == "purple") {
Serial.println(F("Std. Fluorescent"));
fill_solid(leds, NUM_LEDS, CRGB::Purple);
FastLED.show();
}
}
void verifyFingerprint() {
const char* host = AIO_SERVER;
Serial.print("Connecting to ");
Serial.println(host);
if (! client.connect(host, AIO_SERVERPORT)) {
Serial.println("Connection failed. Halting execution.");
while (1);
}
// if (client.verify(fingerprint, host)) {
// Serial.println("Connection secure.");
// } else {
// Serial.println("Connection insecure! Halting execution.");
// while(1);
// }
}
// Function to connect and reconnect as necessary to the MQTT server.
// Should be called in the loop function and it will take care if connecting.
void MQTT_connect() {
int8_t ret;
// Stop if already connected.
if (mqtt.connected()) {
return;
}
Serial.print("Connecting to MQTT... ");
uint8_t retries = 30;
while ((ret = mqtt.connect()) != 0) { // connect will return 0 for connected
Serial.println(mqtt.connectErrorString(ret));
Serial.println("Retrying MQTT connection in 5 seconds...");
mqtt.disconnect();
delay(5000); // wait 5 seconds
retries--;
if (retries == 0) {
// basically die and wait for WDT to reset me
while (1);
}
}
Serial.println("MQTT Connected!");
//Turn on Blue LED to indicate it's connected.
digitalWrite(LED_BUILTIN, HIGH);
}
---------------------------------------The END-----------------------------