tag:blogger.com,1999:blog-163996052024-02-19T14:18:45.385+08:00Weekend project with Stonez56Let's learn Arduino, ESP32, ESP8266, App Inventor, NodeRed, Raspberry Pi together! :)Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.comBlogger95125tag:blogger.com,1999:blog-16399605.post-1700231599674866852023-11-12T08:08:00.000+08:002023-11-12T08:08:31.377+08:00Arduino #39 使用 u8g2 庫在 SSD1306 OLED 上動態繪製骰子 (Draw dynamic dice on SSD1306 OLED with u8g2 library)<p> <span face="Roboto, Arial, sans-serif" style="background-color: rgba(255, 255, 255, 0.1); font-size: 14px; white-space-collapse: preserve;">Hi, welcome to this week's Weekend project with Stonez56.</span></p><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;">This week is Arduino Episode #39, "Drawing Dice Dynamically at 0.96" OLED with u8g2"
This video is suitable for people who want to learn how to draw patterns on SD 1336 LED.
<br /></span><div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/O76_yzrG30w" width="600" youtube-src-id="O76_yzrG30w"></iframe></div><br /><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: red; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><br /></span></div><div><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><b><span style="color: red;">=== IMPORTANT NOTICE ===</span></b>
Do you want to generate u8g2 UTF8 font for your own Arduino projects?
Try this online web tool I created @ <a href="https://kidsgo.net/u8g2">https://kidsgo.net/u8g2</a>
Just 3 easy steps to get UTF8 Arduino codes for your projects!
Try it today!!
<b><span style="color: red;">=== NOTICE ===</span></b></span></div><div><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><br /></span></div><div><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;">
In the previous episode, I showed audiences how to use the accelerometer to draw dynamic dice in APP inventor 2. People who are interested can click this link to watch.
(App Inventor Episode 11: https: //</span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><span class="yt-core-attributed-string--highlight-text-decorator" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 8px; border: 0px; margin: 0px; padding: 0px 0px 1px;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/watch?v=2d6Si6u8FVE&t=0s" rel="nofollow" style="align-items: center; display: inline-flex; text-decoration-line: none;" tabindex="0" target=""> <span class="yt-core-attributed-string--inline-flex-mod" style="background: transparent; border: 0px; display: inline-flex; height: 1.4em; margin: 0.5px 0px 0px; padding: 0px; vertical-align: middle;"><img alt="" class="yt-core-attributed-string__image-element yt-core-attributed-string__image-element--image-alignment-vertical-center yt-core-image yt-core-image--content-mode-scale-to-fill yt-core-image--loaded" src="https://www.gstatic.com/youtube/img/watch/yt_favicon.png" style="align-self: center; background: transparent; border: 0px; display: inline-block; height: 10px; margin: 0px; min-height: 1px; min-width: 1px; object-fit: fill; padding: 0px; visibility: inherit; width: 14px;" /></span> • App Inventor #11 Write your own App (... </a></span></span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"> )
The next video is planned to transfer the dice points from App Inventor 2 to the OLED on ESP32 for display in real time. In this way, we can learn how to communicate from mobile App to ESP32. Stay tuned!
References:
* u8g2 font reference: </span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: #3ea6ff; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa000QWdVMzJoT21PbWhiX1dOaXBGYmlDdzJfZ3xBQ3Jtc0ttMGtXSF9QVm95NEdic00zYldjT3EtSjVHRm9Ea0sxbnB1Mld1aVhPYmJmS0dOUERJYUx4NGotd0tNQkNtXzAtWGxvdFpNWTFTYkdvZ1ZVN0FIOHhPMFM0OEtZU19wbDZ2UlhLWGFPNTNHeTJmRkF4NA&q=https%3A%2F%2Fgithub.com%2Folikraus%2Fu8g2%2Fwiki%2Ffntlist16&v=O76_yzrG30w" rel="nofollow" style="display: inline; text-decoration-line: none;" tabindex="0" target="_blank">https://github.com/olikraus/u8g2/wiki...</a></span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;">
* u8g2 Github: </span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: #3ea6ff; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa0hlZ25uNUx3bVVkY0x1Ry1ybDk4cHBVVmsyZ3xBQ3Jtc0tsWldwVmEtU3d3a1J3UUpFNWVCelNoX2hNOUZHWE5IRjNPVDl2ZmFWalc0eXUxZFNzaktzejdtX2Q2cEU5X1Vxc1JhSGNlYUdndUJxUWVxS05HWEV5TFNxYmRsUG5PSzBPQ2VCOU4yY0swS2dlbjBLWQ&q=https%3A%2F%2Fgithub.com%2Folikraus%2Fu8g2&v=O76_yzrG30w" rel="nofollow" style="display: inline; text-decoration-line: none;" tabindex="0" target="_blank">https://github.com/olikraus/u8g2</a></span></div><div><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;">* u8g2 UTF8 font generator: <a href="https://kidsgo.net/u8g2">https://kidsgo.net/u8g2</a>
If you don’t have enough time, you can also choose the part you want to watch from the timeline below!
Video timeline:
</span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: #3ea6ff; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/watch?v=O76_yzrG30w&t=0s" rel="nofollow" style="display: inline; text-decoration-line: none;" tabindex="0" target="">00:00</a></span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"> start
</span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: #3ea6ff; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/watch?v=O76_yzrG30w&t=40s" rel="nofollow" style="display: inline; text-decoration-line: none;" tabindex="0" target="">00:40</a></span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"> Results presentation (Demo)
</span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: #3ea6ff; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/watch?v=O76_yzrG30w&t=75s" rel="nofollow" style="display: inline; text-decoration-line: none;" tabindex="0" target="">01:15</a></span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"> Coding briefing
</span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: #3ea6ff; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/watch?v=O76_yzrG30w&t=133s" rel="nofollow" style="display: inline; text-decoration-line: none;" tabindex="0" target="">02:13</a></span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"> Use random in code
</span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: #3ea6ff; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/watch?v=O76_yzrG30w&t=263s" rel="nofollow" style="display: inline; text-decoration-line: none;" tabindex="0" target="">04:23</a></span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"> Show dice at random location
</span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: #3ea6ff; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/watch?v=O76_yzrG30w&t=533s" rel="nofollow" style="display: inline; text-decoration-line: none;" tabindex="0" target="">08:53</a></span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"> drawDice function
</span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: #3ea6ff; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/watch?v=O76_yzrG30w&t=899s" rel="nofollow" style="display: inline; text-decoration-line: none;" tabindex="0" target="">14:59</a></span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"> Show total points
</span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; color: #3ea6ff; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><a class="yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color" force-new-state="true" href="https://www.youtube.com/watch?v=O76_yzrG30w&t=967s" rel="nofollow" style="display: inline; text-decoration-line: none;" tabindex="0" target="">16:07</a></span><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"> Select u8g2 fonts </span></div><div><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><br /></span></div><div><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;">==================== 中文版 =================================</span></div><div><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><br /></span></div><div><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;"><p data-sourcepos="3:1-3:51" style="background-color: #131314; color: #e3e3e3; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 24px 0px; word-break: break-word;"><span class="animating">Hi,</span><span class="animating">歡迎來到本週的 Weekend project with Stonez56。</span><span class="animating">本週是 Arduino 第 39 集,</span><span class="animating">“在 0.</span><span class="animating">96" OLED 上使用 u8g2 動態繪製骰子”。</span><span class="animating">此影片適合希望學習如何在 SD 1336 LED 上繪製圖案的人。</span></p><div style="font-size: medium; white-space-collapse: collapse;"><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/O76_yzrG30w" width="600" youtube-src-id="O76_yzrG30w"></iframe></div></div><p data-sourcepos="7:1-7:126" style="background-color: #131314; color: #e3e3e3; font-family: "Google Sans", "Helvetica Neue", sans-serif; font-size: 16px; margin: 24px 0px; word-break: break-word;"><br /></p></span></div><div><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;">描述: 嗨,歡迎來到本週的 Stonez56 週末項目。本週是 Arduino 第 39 集,“在 0.96" OLED 上使用 u8g2 動態繪製骰子”。此視頻適合希望學習如何在 SD 1336 LED 上繪製圖案的人。
在上一集中,我向觀眾展示了如何使用加速計在 APP inventor 2 中繪製動態骰子。感興趣的人可以點擊此鏈接觀看。 (App Inventor 第 11 集:<a href="https://www.youtube.com/watch?v=2d6Si6u8FVE">https://www.youtube.com/watch?v=2d6Si6u8FVE</a>)
下一個視頻計劃將骰子點數從 App Inventor 2 轉移到 ESP32 上的 OLED 以進行實時顯示。這樣,我們就可以學習如何從移動應用程序與 ESP32 通信。敬請期待!
參考文獻:
<ul style="text-align: left;"><li><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;">u8g2 字體參考:<a href="https://github.com/olikraus/u8g2/wiki/fntlist16">https://github.com/olikraus/u8g2/wiki/fntlist16</a></span></li><li><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;">u8g2 Github:<a href="https://github.com/olikraus/u8g2">https://github.com/olikraus/u8g2</a></span></li><li><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;">u8g2 UTF8 font generator: <a href="https://kidsgo.net/u8g2">https://kidsgo.net/u8g2</a>(這是我寫的 UI, 快速, 小型化, 非方便建立你的 UTF8字型檔)</span></li></ul></span></div><div><span class="yt-core-attributed-string--link-inherit-color" face="Roboto, Arial, sans-serif" style="background: rgba(255, 255, 255, 0.1); border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve;">
如果您沒有足夠的時間,您還可以在以下時間軸中選擇您想觀看的部分!
視頻時間軸:
00:00 開始
00:40 結果展示(演示)
01:15 編碼簡報
02:13 在代碼中使用隨機
04:23 在隨機位置顯示骰子
08:53 drawDice 函數
14:59 顯示總分
16:07 選擇 u8g2 字體>
<br><br><br>
====================== ESP32 Codes ===============================
<style>
.prettyprint ol.linenums > li { list-style-type: decimal; }
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { background: #eee }
</style>
<pre class="prettyprint lang-c linenums:1">
#include <Arduino.h>
#include <U8g2lib.h>
U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/U8X8_PIN_NONE);
void setup(void)
{
Serial.begin(115200);
u8g2.begin();
randomSeed(analogRead(5)); // randomSeed() must be in setup()!
}
// OLED TEXT ROW number, vertical position
const byte ROW[5] = {0, 15, 31, 47, 63};
// 4 dice top-left {x, y} locations in tl[]
const int tl[4][2] = {{2, 20}, {34, 28}, {68, 20}, {100, 28}};
const int size = 28; // dice width and height
const int diceRoundedCorner = 5;
/**
* drawDiceImage
* n = dice serial (1 ~ 4)
* pnt = dice points (1 ~ 6)
*/
void drawDiceImage(int n, int pnt)
{
int tx = tl[n][0]; // top left x
int ty = random(17, 35); // Makes the y showing at random height
// int ty = tl[n][1]; //top left y, makes Y showing at fixed height
int centerX = tx + (size / 2); // center of the dice X
int centerY = ty + (size / 2); // center of th dice Y
const int largeDotSize = 4; // drawing dot size for 1 only
const int smallDotSize = 2; // drawing dot size for rest
u8g2.drawRFrame(tx, ty, size, size, diceRoundedCorner); // draw the dice border
// draw the points based on the variable: pnt
switch (pnt)
{
case 1:
u8g2.drawFilledEllipse(centerX, centerY, largeDotSize, largeDotSize, U8G2_DRAW_ALL);
break;
case 2:
u8g2.drawFilledEllipse(centerX, centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX, centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
break;
case 3:
u8g2.drawFilledEllipse(centerX, centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX, centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX, centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
break;
case 4:
u8g2.drawFilledEllipse(centerX - (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX - (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX + (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX + (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
break;
case 5:
u8g2.drawFilledEllipse(centerX - (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX - (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX + (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX + (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX, centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
break;
case 6:
u8g2.drawFilledEllipse(centerX - (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX - (size / 4), centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX - (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX + (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX + (size / 4), centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
u8g2.drawFilledEllipse(centerX + (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
break;
default:
break;
}
}
void loop(void)
{
int dicePoint[4];
int totalPoints = 0;
u8g2.clearBuffer();
//Generate 4 random dice points
for (int i = 0; i < 4; i++)
{
dicePoint[i] = random(1, 6); // get random dice number to point
drawDiceImage(i, dicePoint[i]); // draw dice i with the random dicePoint
totalPoints += dicePoint[i]; // adding current points to totalPoints
}
//Print out the title + total points
u8g2.setCursor(0, ROW[1]);
u8g2.setFont(u8g2_font_lubBI14_te); // font list: https://github.com/olikraus/u8g2/wiki/fntlist16
u8g2.print("POINTS:");
u8g2.print(totalPoints);
u8g2.sendBuffer();
delay(1500);
}
</pre>
==================================================================Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-22790571075543853042023-11-05T15:15:00.006+08:002023-11-05T15:32:55.686+08:00 VS Code 初始化的時候出現 Cannot find Arduino tools. Use Arduino CLI bundled with this extension instead? 要如何處理?<p><br /></p><p><br /></p><p>"安裝 Arduino Extension for VS code 時,如果遇到 “Cannot find Arduino tools. Use Arduino CLI bundled with this extension instead?”錯誤訊息。</p><p><br /></p><p><br /><br />請嘗試以下方法解決此問題。</p><h3 style="text-align: left;">解決步驟:</h3><p></p><ul style="text-align: left;"><li>安裝 Arduino-CLI 版本</li><ul><li>參考這個文件 <a href="https://arduino.github.io/arduino-cli/0.19/installation/">https://arduino.github.io/arduino-cli/0.19/installation/</a></li><li>直接下載Mac OS 64bit: <a href="https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_macOS_64bit.tar.gz">https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_macOS_64bit.tar.gz</a></li><li>直接下載Linux 64bit: <a href="https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_Linux_64bit.tar.gz">https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_Linux_64bit.tar.gz</a></li><li>直接下載Windows 64bit: <a href="https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_Windows_64bit.zip">https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_Windows_64bit.zip</a> </li><li>下載後在 Terminal 下測試安裝是否成功</li><li>>arduino-cli version</li><li><span style="color: #01ffff;">arduino-cli Version: 0.30.0 Commit: 83700ca2 Date: 2023-02-08T14:48:15Z (OK)</span></li></ul><li>從 VS Code 菜單中選擇</li><li>檔案 -> 偏好設定 -> 設定</li><li>在使用者和工作區設定中</li></ul><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjiqIIGKVozNHgaax0FdJbExeGXPeY7YmUadRAck138FrJpHm7wMrA8UxfpE3kg4Fxnyb1oL_jjKRgIgTh_qwpCUlDfa89VA4QZ2I_OekhryyyaiKCtFa1gzrzbw6X7kKiMuB5EHS9mk93spyJ_nW4vKfdg-qqim04HP59jm4aXTRQYVLoCR12_5g" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="" data-original-height="827" data-original-width="1729" height="306" src="https://blogger.googleusercontent.com/img/a/AVvXsEjiqIIGKVozNHgaax0FdJbExeGXPeY7YmUadRAck138FrJpHm7wMrA8UxfpE3kg4Fxnyb1oL_jjKRgIgTh_qwpCUlDfa89VA4QZ2I_OekhryyyaiKCtFa1gzrzbw6X7kKiMuB5EHS9mk93spyJ_nW4vKfdg-qqim04HP59jm4aXTRQYVLoCR12_5g=w640-h306" width="640" /></a><br /><p></p><p></p><ol style="text-align: left;"><ol><li>Arduino: command path -> 保持為空白</li><li>Arduino: path -> 保持為空白</li><li>Arduino: Use Arduino Cli -> 勾選“Use Arduino CLI installed instated of the legacy Arduino IDE”</li><li>重新啟動 VS code</li></ol></ol><p></p><p>============ ENGLISH =====================</p><p>When install Arduino Extension for VS code, if you encountered "Cannot find Arduino tools. Use Arduino CLI bundled with this extension instead?" error message. Try this to fix it.</p><p></p><br /><p></p><h3 style="text-align: left;">Steps to fix:</h3><p></p><ul style="text-align: left;"><li>Install Arduino-CLI version</li><ul><li>For complete doc: <a href="https://arduino.github.io/arduino-cli/0.19/installation/">https://arduino.github.io/arduino-cli/0.19/installation/</a></li><li>Download Mac OS 64bit: <a href="https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_macOS_64bit.tar.gz">https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_macOS_64bit.tar.gz</a></li><li>Download Linux 64bit: <a href="https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_Linux_64bit.tar.gz">https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_Linux_64bit.tar.gz</a></li><li>Download Windows 64bit: <a href="https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_Windows_64bit.zip">https://downloads.arduino.cc/arduino-cli/arduino-cli_latest_Windows_64bit.zip</a> </li><li>Test Arduino-cli installation correctness by running the command below at terminal</li><li>><b>arduino-cli version</b></li><li><span style="color: #01ffff;">arduino-cli Version: 0.30.0 Commit: 83700ca2 Date: 2023-02-08T14:48:15Z (OK)</span></li></ul><li>From VS code menu</li><li>Files -> Preference -> Settings</li><li>In bot User & Workspace</li></ul><p></p><p></p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjiqIIGKVozNHgaax0FdJbExeGXPeY7YmUadRAck138FrJpHm7wMrA8UxfpE3kg4Fxnyb1oL_jjKRgIgTh_qwpCUlDfa89VA4QZ2I_OekhryyyaiKCtFa1gzrzbw6X7kKiMuB5EHS9mk93spyJ_nW4vKfdg-qqim04HP59jm4aXTRQYVLoCR12_5g" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="" data-original-height="827" data-original-width="1729" height="306" src="https://blogger.googleusercontent.com/img/a/AVvXsEjiqIIGKVozNHgaax0FdJbExeGXPeY7YmUadRAck138FrJpHm7wMrA8UxfpE3kg4Fxnyb1oL_jjKRgIgTh_qwpCUlDfa89VA4QZ2I_OekhryyyaiKCtFa1gzrzbw6X7kKiMuB5EHS9mk93spyJ_nW4vKfdg-qqim04HP59jm4aXTRQYVLoCR12_5g=w640-h306" width="640" /></a><br /><ol style="text-align: left;"><ol><li>Arduino: command path -> leave it empty</li><li>Arduino: path -> leave it empty</li><li>Arduino: Use Arduino Cli -> tick "Use Arduino CLI installed instated of the legacy Arduino IDE"</li><li>Restart VS code</li></ol></ol><p></p><p></p><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><br /><br /><p></p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-60986117869189529002023-09-29T10:48:00.005+08:002023-09-29T11:10:59.403+08:00 [從零開始學習 App Inventor 系列] 之 自己來寫 APP 系列 - 新影片上架了~<p> [從零開始學習 App Inventor 系列] 之 自己來寫 APP 系列, <br />有新單元推出囉~有興趣的朋友,趕緊來觀看!<br /><br />別忘了點讚,按下喜歡及分享給好朋友喔~</p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCOWQA3n7Wcap2akOAndQ9tyBGYI7Fdq8ydWnz-OM0Gv3xZLOqGiKBIbcmJXYQ915DXwNnPrdgtyG-eLJ-WOozoaWvRIW0TIq1LmJPJr6ksKlISLzPHCQnaxy6HXMqheNYOM9nuD4jXGZkEWeojzTsA4ilyIw_4i8IM_GHMfW8NuFhEsLMCi0Jdw/s796/Screen%20Shot%202023-09-29%20at%2010.38.59%20AM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="796" data-original-width="755" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCOWQA3n7Wcap2akOAndQ9tyBGYI7Fdq8ydWnz-OM0Gv3xZLOqGiKBIbcmJXYQ915DXwNnPrdgtyG-eLJ-WOozoaWvRIW0TIq1LmJPJr6ksKlISLzPHCQnaxy6HXMqheNYOM9nuD4jXGZkEWeojzTsA4ilyIw_4i8IM_GHMfW8NuFhEsLMCi0Jdw/w608-h640/Screen%20Shot%202023-09-29%20at%2010.38.59%20AM.png" width="608" /></a></div><br /><p>這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, </p><p>相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿!! :)</p><p><br /></p><p>(0) 課程簡介 <a href="https://youtu.be/gkGW8bnO66w">https://youtu.be/gkGW8bnO66w</a></p><p>(1) 基本認識, 環境設定及註冊帳號 <a href="https://youtu.be/BesQP6GckjE">https://youtu.be/BesQP6GckjE</a></p><p>(2) 使用者 / 程式設計介面介紹 (忘了增加開發流程介紹 / ) <a href="https://youtu.be/ukV7c5IWMaA">https://youtu.be/ukV7c5IWMaA</a></p><p>(3) 動手寫程式吧! (犬犬汪汪 App) <a href="https://youtu.be/kih39aqtI64">https://youtu.be/kih39aqtI64</a></p><p>(4) App 開發流程 / 各式變數介紹 <a href="https://youtu.be/L9jtQBDIzow">https://youtu.be/L9jtQBDIzow</a></p><p>(5) 單位換算 App 之實作練習 <a href="https://youtu.be/f4l6uckAfEo">https://youtu.be/f4l6uckAfEo</a></p><p>(6) 條件判斷式 (if then else) <a href="https://youtu.be/y8MVDTkskHA">https://youtu.be/y8MVDTkskHA</a></p><p>(7) 高鐵票優惠計算 App 實作練習 <a href="https://youtu.be/30Sq8610WFk">https://youtu.be/30Sq8610WFk</a></p><p>(8) 待續... </p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-75032779487700073632023-09-16T22:00:00.005+08:002023-09-16T22:00:40.563+08:00 [從零開始學習 App Inventor 系列] 之 自己來寫 APP 系列<h2 style="text-align: left;">Stonez56 推出全新的單元 - <br />[從零開始學習 App Inventor 系列] 之 自己來寫 APP 系列 </h2><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjHqy5-PQkkVx2FjxM2K-QRFB0EmJ3JvwD3MotasKZdF4r1y4OzKPtMPhu16h1-QaLwytnj2OyqnduFy4VmymA_QmPE4qW4JqWcU--u-SP_-kCKQyStw7FkMeFV6CiYRiXIEN7DtGThdHp-vvjK7Z5SjhOCvbLWi_Pl4SfZbEgB8JEAu7dKPOaNRQ" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="1007" data-original-width="1007" height="640" src="https://blogger.googleusercontent.com/img/a/AVvXsEjHqy5-PQkkVx2FjxM2K-QRFB0EmJ3JvwD3MotasKZdF4r1y4OzKPtMPhu16h1-QaLwytnj2OyqnduFy4VmymA_QmPE4qW4JqWcU--u-SP_-kCKQyStw7FkMeFV6CiYRiXIEN7DtGThdHp-vvjK7Z5SjhOCvbLWi_Pl4SfZbEgB8JEAu7dKPOaNRQ=w640-h640" width="640" /></a></div><br />這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細,<p></p><p>相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿!! :)<br /><br /></p><h3 style="text-align: left;">自己來寫 APP 課程內容:</h3><h4 style="text-align: left;">
(0) 課程簡介 </h4><br />
<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/gkGW8bnO66w" width="600" youtube-src-id="gkGW8bnO66w"></iframe></div><h3 style="text-align: left;"><br /> (1) 基本認識, 環境設定及註冊帳號
</h3><div><div><ul style="text-align: left;"><li>本集內容主要包括了以下內容: </li><li>- AppInventor介紹 </li><li>- 基本需求 </li><li>- 環境設定 </li><li>- 如何註冊帳號</li></ul></div></div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/BesQP6GckjE" width="600" youtube-src-id="BesQP6GckjE"></iframe></div><h3 style="text-align: left;"><br /> (2) 使用者 / 程式設計介面介紹
<br /></h3><p style="text-align: left;"></p><ul style="text-align: left;"><li><span style="font-size: 18.72px;">本集內容主要包括了以下內容: </span></li><li><span style="font-size: 18.72px;">- 主界面介紹 </span></li><li><span style="font-size: 18.72px;">- 程式設計界面介紹</span></li></ul><p></p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/ukV7c5IWMaA" width="600" youtube-src-id="ukV7c5IWMaA"></iframe></div><h3 style="text-align: left;"><br /> (3) 動手寫程式吧! (犬犬汪汪 App)
</h3><div><div><ul style="text-align: left;"><li>本集內容主要包括了以下內容: </li><li>- 寫出 小狗汪汪 App</li><li>- 測驗 寫出猫咪喵喵 App</li></ul></div></div><div><br /></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/kih39aqtI64" width="600" youtube-src-id="kih39aqtI64"></iframe></div><h3 style="text-align: left;"><br /> (4) App 開發流程 / 各式變數介紹
</h3><div><div><ul style="text-align: left;"><li>本集內容主要包括了以下內容: </li><li>- App 開發流程 (四思而後行)</li><li>- 什麼是變數?</li><li>- 全域變數 & 區域變數 App 實作</li><li>- 各式變數型別介紹 - 數字, 字串, 布林, 顏色</li></ul></div></div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/L9jtQBDIzow" width="600" youtube-src-id="L9jtQBDIzow"></iframe></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">#stonez56, #weekendproject , #EPS32, #ESP8226, #Arduinoproject, #Arduino, #IOTprojects, #tutorials, #Raspberrypi, #虛擬容器, #IOT, #樹莓派, #docker, #rclone, #mqtt, #appinventor, app inventortutorial , #appinventor2教學, #樹莓派教學, #iotproject, #u8G2, #wifimanager, #ESP32 FOTA, #FOTA, #VScode, #lighttracing, #lighttracking, #voicecontrol, #IFTTT, #Adafruit, #Scratch, #Tello, #PIRsensor, #rgbledcontroller, #WS2812B, #LCD, #Temperaturesensor, #uwb, #uwb technology, #lora, #loramodule, #loratest, #從零開始學習AppInventor!, #自己來寫APP</div>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-62976555828527156932023-06-23T20:39:00.002+08:002023-06-23T20:47:28.980+08:00Arduino #48集, 用一塊ESP32來學 IOT (#48 Learn IOT with MQTT + ESP32) 把 MQTTlens 換成 EMQX MQTT Web Client<p>大家好, 今天和大家來分享, Arduino #48集, 用一塊ESP32來學 IOT (#32 Learn IOT with MQTT + ESP32) 這個影片很適合初學者來觀看學習. <br /><br />影片內容主要是告訴大家, 只要手上有一塊 ESP32 和一台電腦, 就可以開始學習 IOT 了 ! 看過這個影片, 你會了解學習 IOT 一點都不難喔! 甚至可以延伸作法, EMQX MQTT web client 透過雲端EMQX來做遠端的控制! <br /><br /><br /></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzBThaPFYOBp1yx6vPZebnVwfocDKIRCf-HhxtMMwilJBSvXjiJPX6d3INztb33BEgtt-Fv_k9drEBXyUT7HnpMtnllxIs4GTNIp19vPL3x9sESVeg0tKmN6Yv0A5p4DtEug1YD3kuvk6FLKR3Ctf0IiTvdaREKnU0_AJIaG8KcjK01dpHwlHjSA/s1920/learn-IOT-with-ESP32-EMQX-mqtt-client-2nd-pic.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzBThaPFYOBp1yx6vPZebnVwfocDKIRCf-HhxtMMwilJBSvXjiJPX6d3INztb33BEgtt-Fv_k9drEBXyUT7HnpMtnllxIs4GTNIp19vPL3x9sESVeg0tKmN6Yv0A5p4DtEug1YD3kuvk6FLKR3Ctf0IiTvdaREKnU0_AJIaG8KcjK01dpHwlHjSA/w640-h360/learn-IOT-with-ESP32-EMQX-mqtt-client-2nd-pic.png" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">使用 MQTT 來幫助你快速完成第一個 IoT專案</td></tr></tbody></table><br /><p>有幾位朋友寫信來告知, MQTTLens 這個 Chrome 流覽器插件(extension) 已經無法再使用了, 所以我把這個教學的流程, 整理一下, 改用了 EMQX 本身自有的 MQTT web client 來做這個教學. </p><p>這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, 相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿。好, 那我們就開始吧今天的練習吧~</p><div><br /></div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/3WTYGdX6O44" width="640" youtube-src-id="3WTYGdX6O44"></iframe></div><br /><p><br /></p><p>如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可!</p><p>影片時間軸:</p><p>00:00 開始</p><p>01:03 什麼是 MQTT,它是如何運作的?</p><p>02:29 打造你的第一個MQTT IOT專案!</p><p>03:34 MQTT 程式:pubsubclient</p><p>04:27 Arduino IDE: 設定Additional Boards Manager URL</p><p>04:55 Arduino IDE 其它設定</p><p>05:22 從我的部落格中下載程式並貼在Arduino IDE</p><p>05:51 在程式中更改必要的設定</p><p>08:55 使用 EMQX MQTT web client</p><p>09:34 EMQX 簡易設定</p><p>11:39 訂閱 ESP32上的主題</p><p>14:30 從EMQX MQTT client 訂閱主題</p><p>16:52 從EMQX MQTT client 發佈主題 Stonez56/esp32s</p><div><br /></div><p><br /></p><div><br /></div><div><div>參考資料:</div><div><ul style="text-align: left;"><li>EMQX MQTT Web Client<br /><a href="https://www.emqx.io/online-mqtt-client/">https://www.emqx.io/online-mqtt-client/</a> </li><li>Pubsubclient library: <a href="https://github.com/knolleary/pubsubclient/blob/master/examples/mqtt_esp8266/mqtt_esp8266.ino">https://github.com/knolleary/pubsubclient/blob/master/examples/mqtt_esp8266/mqtt_esp8266.ino</a></li><li>Additional Boards Manager URL: <u>https://arduino.esp8266.com/stable/package_esp8266com_index.json,https://dl.espressif.com/dl/package_esp32_index.json</u> </li><li>Source code: <u>https://stonez56.blogspot.com/</u> </li></ul></div></div><div><br /></div>
///
<pre class="prettyprint linenums:1">/*
Basic ESP8266 MQTT example
This sketch demonstrates the capabilities of the pubsub library in combination
with the ESP8266 board/library.
It connects to an MQTT server then:
- publishes "hello world" to the topic "outTopic" every two seconds
- subscribes to the topic "inTopic", printing out any messages
it receives. NB - it assumes the received payloads are strings not binary
- If the first character of the topic "inTopic" is an 1, switch ON the ESP Led,
else switch it off
It will reconnect to the server if the connection is lost using a blocking
reconnect function. See the 'mqtt_reconnect_nonblocking' example for how to
achieve the same result without blocking the main loop.
To install the ESP8266 board, (using Arduino 1.6.4+):
- Add the following 3rd party board manager under "File -&nbgt; Preferences -&nbgt; Additional Boards Manager URLs":
http://arduino.esp8266.com/stable/package_esp8266com_index.json
- Open the "Tools -&nbgt; Board -&nbgt; Board Manager" and click install for the ESP8266"
- Select your ESP8266 in "Tools -&nbgt; Board"
*/
#include &nblt;WiFi.h&nbgt;
#include &nblt;PubSubClient.h&nbgt;
#include &nblt;EasyButton.h&nbgt;
#define LED 2 //built-in LED on ESP32
// Update these with values suitable for your network.
const char *ssid = "Stonez24";
const char *password = "a0101010101a";
// Define your client ID on EMQX
String mqtt_ClientID = "stonez56_IOT_Station_";
// Define your topics to subscribe / publish
const char* sub_topic = "stonez56/esp32s";
const char* pub_led_topic = "stonez56/esp32s_led_state";
const char* pub_init_topic = "stonez56/esp32s_is_back";
// EMQX broker parameters
const char *mqtt_server = "broker.emqx.io";
const char *mqtt_userName = "emqx";
const char *mqtt_password = "public";
WiFiClient espClient;
PubSubClient client(espClient);
unsigned long lastMsg = 0;
#define MSG_BUFFER_SIZE (50)
char msg[MSG_BUFFER_SIZE];
int value = 0;
void setup_wifi()
{
delay(10);
// We start by connecting to a WiFi network
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
randomSeed(micros());
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
}
void callback(char *topic, byte *payload, unsigned int length)
{
Serial.print("Message arrived [");
Serial.print(topic);
Serial.print("] ");
for (int i = 0; i &nblt; length; i++)
{
Serial.print((char)payload[i]);
}
Serial.println();
payload[length] = '\0';
String message = (char *)payload;
if (strcmp(topic, sub_topic) == 0)
{
if (message == "off")
{
digitalWrite(LED, LOW); //Turn off
client.publish(pub_led_topic, "LED off");
}
if (message == "on")
{
digitalWrite(LED, HIGH); //Turn on
client.publish(pub_led_topic, "LED on");
}
if (message == "flash")
{
digitalWrite(LED, LOW); //LED flashing 2 times
delay(200);
digitalWrite(LED, HIGH);
delay(200);
digitalWrite(LED, LOW);
delay(200);
digitalWrite(LED, HIGH);
delay(200);
digitalWrite(LED, LOW);
client.publish(pub_led_topic, "LED flashed 2 times");
}
}
/* Switch on the LED if an 1 was received as first character
// if ((char)payload[0] == '1')
// {
// digitalWrite(BUILTIN_LED, LOW); // Turn the LED on (Note that LOW is the voltage level
// // but actually the LED is on; this is because
// // it is active low on the ESP-01)
// }
// else
// {
// digitalWrite(BUILTIN_LED, HIGH); // Turn the LED off by making the voltage HIGH
// } */
}
void reconnect()
{
// Loop until we're reconnected
while (!client.connected())
{
Serial.println("Attempting EMQX MQTT connection...");
// Create a random client ID
mqtt_ClientID += String(random(0xffff), HEX);
// Attempt to connect
if (client.connect((mqtt_ClientID, mqtt_userName, mqtt_password)))
{
Serial.print(" connected with Client ID: ");
Serial.println(mqtt_ClientID);
// Once connected, publish an announcement...
client.publish(pub_init_topic, "Hi, I'm online!");
// ... and resubscribe
client.subscribe(sub_topic);
}
else
{
Serial.print("failed, rc=");
Serial.print(client.state());
Serial.println(" try again in 5 seconds");
// Wait 5 seconds before retrying
delay(5000);
}
}
}
void setup()
{
pinMode(LED, OUTPUT); // Initialize the _LED pin as an output
digitalWrite(LED, LOW); //default ESP32 LOW is turn off
Serial.begin(115200);
setup_wifi();
client.setServer(mqtt_server, 1883);
client.setCallback(callback);
}
void loop()
{
if (!client.connected())
{
reconnect();
}
client.loop();
/* unsigned long now = millis();
// if (now - lastMsg &nbgt; 2000)
// {
// lastMsg = now;
// ++value;
// snprintf(msg, MSG_BUFFER_SIZE, "hello world #%ld", value);
// Serial.print("Publish message: ");
// Serial.println(msg);
// client.publish("stonez56/esp32s_button_pushed", msg);
// } */
}
</pre>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-90734939534193860402023-01-29T21:02:00.001+08:002023-01-29T21:02:28.406+08:00App Inventor #13 掃瞄條碼直送 Google Sheets (Scan barcodes and save to Google Sheets)<p> 大家好, 歡迎收看本週的Weekend project with Stonez56!</p><p><br /></p><p>本周要進行的是 App Inventor #13 掃瞄條碼後, 直接儲存到 Google Sheets! </p><p>掃描條碼是學習APP inventor很重要的一個技巧, 但是它也非常的簡單使用. 所以我們來加深一些難度. 今天我們來教大家如何把掃描到的條碼存放在Listview, 再把掃瞄的文字內容直接儲存到 Google sheets.</p><p><br /></p><p>在本影片中你將會學習到:</p><p> - 設定 Google sheets API</p><p> - 在APP inventor中使用條碼</p><p> - 如何把條碼儲存到 Listview</p><p> - 如何把條碼掃描的內容文字儲存到Google sheets </p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/nrILklGhKIA" width="640" youtube-src-id="nrILklGhKIA"></iframe></div><br /><p><br /></p><p><br /></p><p>如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可! </p><p><br /></p><p>影片時間軸: </p><p>00:00 開始</p><p>01:37 條碼 App 示範</p><p>02:52 設定 Google Sheet API </p><p>09:24 建立一個 Google Sheet並做好設定</p><p>09:52 如何獲取 Google SheetID</p><p>11:21 建立 App 使用者界面</p><p>18:31 上傳 Spreadsheet Json Key & 設置 SheetID</p><p>19:31 開始撰寫應用程式</p><p><br /></p><p>App Inventor 相關教學影片:</p><p><br /></p><p>* App Inventor #13 掃瞄條碼直送 Google Sheets</p><p>https://youtu.be/nrILklGhKIA</p><p><br /></p><p>* App Inventor #12 自己來寫 APP - 用骰子遊戲學IoT </p><p>https://youtu.be/d5jQHN1zguQ</p><p><br /></p><p>* App Inventor #11自己來寫 App - 骰子遊戲 (Dice Game)</p><p>https://youtu.be/2d6Si6u8FVE</p><p><br /></p><p>* App Inventor #10 集 自己來寫 APP YouBike 2.0 (下). </p><p>https://youtu.be/Cli-_lUPjgU</p><p><br /></p><p>* App Inventor #9 集 - 自己來寫 APP YouBike 2.0 (上) </p><p>https://youtu.be/D78-eDRFiXM</p><p><br /></p><p>*App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android) https://youtu.be/_HeM9GyVmIE</p><p><br /></p><p>* App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available) https://youtu.be/senjdb-cREY</p><p><br /></p><p>* App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation) https://youtu.be/RfYi8h9y6kE</p><p><br /></p><p>* App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) https://youtu.be/J8b3zWX1FXM</p><p><br /></p><p>* App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2)</p><p>https://youtu.be/x545mFSZWgg</p><p><br /></p><p>* App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor)</p><p>https://youtu.be/u5J4FJQ5UQQ</p><p><br /></p><p>* App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2)</p><p>https://youtu.be/kIONEfLO4sI</p><p><br /></p><p>* MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition)</p><p>https://youtu.be/msV4V6af6tA</p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-48754640554389413352023-01-02T23:00:00.003+08:002023-01-04T09:54:36.592+08:00Arduino #42集, “快速取得u8g2的字型代碼” (Get u8g2 unifont code quick & easy, u8g2 のフォント コードをすばやく取得する」です, u8g2용 폰트코드 빠르게 받아보기" 입니다)<div>歡迎收看Weekend project with Stonez56。 </div><div>本周是Arduino #42集, “快速取得u8g2的字型代碼”</div><div>我們將使用Stonez56 這個網站來快速取得字型代碼</div><div><br /></div><div><b>目前為測試版: <a href="https://kidsgo.net/u8g2/">https://kidsgo.net/u8g2/</a></b></div><div><br /></div><h3 style="text-align: left;">這個 Stonez56 轉碼網站過人之處:</h3><div>* 簡單易用用省時</div><div>* 自動移除重複字</div><div>* 產生極小的檔案 </div><div><br /></div><h3 style="text-align: left;">使用方法簡單:</h3><div>* 輸入你要轉換的字詞</div><div>* 按下送出</div><div>* 下載產生的字型代碼</div><div>* 存到 Arduino 專案目錄下</div><div>* 在你的主程式中, 用 include 帶進 字型.h 程式</div><div>* 用 u8g2.setFont(u8g2_font_unifont_myfonts) </div><div><br /></div><div><b>目前為測試版: <a href="https://kidsgo.net/u8g2/">https://kidsgo.net/u8g2/</a></b></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY_6MD0ECa1jljsOttaexzNpRIomron49jMJGllbE4CIsddxKrqXriMsVY2FnV4THpthMeJvtieajwvXpVuxhK0BbJjuwlGzCf7xmhdUmq_dz0gXe4wzH2N9NwFIumGmZRAsH1gsJVr82e6_xAfYJeBptD0N6gwBkLBseRPoDfdA_f5OZ3nYI/s1594/Screen%20Shot%202023-01-04%20at%209.22.16%20AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1594" data-original-width="1466" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY_6MD0ECa1jljsOttaexzNpRIomron49jMJGllbE4CIsddxKrqXriMsVY2FnV4THpthMeJvtieajwvXpVuxhK0BbJjuwlGzCf7xmhdUmq_dz0gXe4wzH2N9NwFIumGmZRAsH1gsJVr82e6_xAfYJeBptD0N6gwBkLBseRPoDfdA_f5OZ3nYI/w588-h640/Screen%20Shot%202023-01-04%20at%209.22.16%20AM.png" width="588" /></a></div><br /><div><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">===========================</div><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">Stonez56 の Weekend プロジェクトへようこそ。</div><div class="separator" style="clear: both;">今週は Arduino #42 のエピソード「u8g2 のフォント コードをすばやく取得する」です。</div><div class="separator" style="clear: both;">Web サイト Stonez56 を使用して、フォント コードをすばやく取得します。</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">現在ベータ版:<a href="https://kidsgo.net/u8g2/">https://kidsgo.net/u8g2/</a></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">この Stonez56 トランスコーディング サイトの優れた点:</div><div class="separator" style="clear: both;">*使いやすく、時間を節約</div><div class="separator" style="clear: both;">*重複する単語を自動的に削除</div><div class="separator" style="clear: both;">* 非常に小さいファイルを生成します</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">使いやすい:</div><div class="separator" style="clear: both;">*変換したい単語を入力してください</div><div class="separator" style="clear: both;">※押すと送信されます</div><div class="separator" style="clear: both;">* 生成されたフォント コードをダウンロードする</div><div class="separator" style="clear: both;">* Arduino プロジェクト ディレクトリに保存します。</div><div class="separator" style="clear: both;">* メイン プログラムで、include を使用して font.h プログラムを取り込みます。</div><div class="separator" style="clear: both;">* u8g2.setFont(u8g2_font_unifont_myfonts) を使用</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">現在ベータ版:<a href="https://kidsgo.net/u8g2/">https://kidsgo.net/u8g2/</a></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">=============================</div><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">Stonez56과 함께하는 주말 프로젝트에 오신 것을 환영합니다.</div><div class="separator" style="clear: both;">이번주는 아두이노 #42편 "u8g2용 폰트코드 빠르게 받아보기" 입니다.</div><div class="separator" style="clear: both;">Stonez56 웹 사이트를 사용하여 글꼴 코드를 빠르게 얻습니다.</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">현재 베타 버전: <a href="https://kidsgo.net/u8g2/">https://kidsgo.net/u8g2/</a></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">이 Stonez56 트랜스코딩 사이트의 장점:</div><div class="separator" style="clear: both;">* 사용하기 쉽고 시간을 절약</div><div class="separator" style="clear: both;">* 중복 단어 자동 제거</div><div class="separator" style="clear: both;">* 매우 작은 파일 생성</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">사용하기 쉬운:</div><div class="separator" style="clear: both;">* 변환하려는 단어를 입력하십시오</div><div class="separator" style="clear: both;">* 누르면 보내기</div><div class="separator" style="clear: both;">* 생성된 글꼴 코드 다운로드</div><div class="separator" style="clear: both;">* Arduino 프로젝트 디렉토리에 저장</div><div class="separator" style="clear: both;">* 기본 프로그램에서 include를 사용하여 font.h 프로그램을 가져옵니다.</div><div class="separator" style="clear: both;">* u8g2.setFont(u8g2_font_unifont_myfonts) 사용</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">현재 베타 버전: <a href="https://kidsgo.net/u8g2/">https://kidsgo.net/u8g2/</a></div></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJt6OuJjVJkO9dp9IIxofl_w_RjNlmCeGS_XKNW9C-QntK1XKZZF7r_HZTw017rICqZJdGFgbLOzmw_OB4gy8qWQX51kg0x3fqjbF0jAfyXvTOASUIQfYNQr93Nu6NZ5n1eyiU-005bnR572uXis1uK1mc0Rosl1cdv0HOXxYw2veg0165_I/s1594/Screen%20Shot%202023-01-04%20at%209.22.16%20AM.png" style="display: block; padding: 1em 0px; text-align: center;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJt6OuJjVJkO9dp9IIxofl_w_RjNlmCeGS_XKNW9C-QntK1XKZZF7r_HZTw017rICqZJdGFgbLOzmw_OB4gy8qWQX51kg0x3fqjbF0jAfyXvTOASUIQfYNQr93Nu6NZ5n1eyiU-005bnR572uXis1uK1mc0Rosl1cdv0HOXxYw2veg0165_I/s1594/Screen%20Shot%202023-01-04%20at%209.22.16%20AM.png" style="display: block; padding: 1em 0px; text-align: center;"><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#arduino</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#u8g2</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#font</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#lcd</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#display</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#weekendprojectwithstonez56</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#diy</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#maker</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#oled</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#esp32</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#esp8266</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#stonez56</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#fontgenerator</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#kidsgo</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">.net </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#CJKfonts</span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;"> </span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; text-align: start; white-space: pre-wrap;">#CJK</span></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJt6OuJjVJkO9dp9IIxofl_w_RjNlmCeGS_XKNW9C-QntK1XKZZF7r_HZTw017rICqZJdGFgbLOzmw_OB4gy8qWQX51kg0x3fqjbF0jAfyXvTOASUIQfYNQr93Nu6NZ5n1eyiU-005bnR572uXis1uK1mc0Rosl1cdv0HOXxYw2veg0165_I/s1594/Screen%20Shot%202023-01-04%20at%209.22.16%20AM.png" style="display: block; padding: 1em 0px; text-align: center;"><br /></a></div>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-65594881265425806672022-12-10T22:12:00.011+08:002022-12-11T08:55:10.314+08:00如何解決 ESPAsyncWebServer 錯誤 - undefined reference to `mbedtls_md5_starts' (Solving ESPAsyncWebServer - undefined reference to `mbedtls_md5_starts issues )<p><br /><br /><br />最近在使用 ESPAsyncWebServer 時, 發生了一個編譯的錯誤:<br /><br /><span style="color: #666666; font-family: courier;">c:/users/stone/appdata/local/arduino15/packages/esp32/tools/xtensa-esp32-elf-gcc/gcc8_4_0-esp-2021r2-patch3/bin/../lib/gcc/xtensa-esp32-elf/8.4.0/../../../../xtensa-esp32-elf/bin/ld.exe: d:\stone\Documents\build\libraries\ESPAsyncWebServer-master\WebAuthentication.cpp.o:(.literal._ZL6getMD5PhtPc+0x4): undefined reference to `mbedtls_md5_starts'</span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSeoH2cp_Qp4Xdnll_qhoAFZglysLZdKwsILVCFJxvb2PKj7fb9FKqsK-vz5OPuCGaZ1zzgq1sgLh7Fjqs2eWn812ggFbo9jCXT4_wwBiJA03ai2TZHnqW8KRFl0178aOYNPZsmmZLzVG1bhi9dFeJBO5FeTlecfsaZrVs5bXrrTNgTq0ywM/s960/error-screen.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="540" data-original-width="960" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSeoH2cp_Qp4Xdnll_qhoAFZglysLZdKwsILVCFJxvb2PKj7fb9FKqsK-vz5OPuCGaZ1zzgq1sgLh7Fjqs2eWn812ggFbo9jCXT4_wwBiJA03ai2TZHnqW8KRFl0178aOYNPZsmmZLzVG1bhi9dFeJBO5FeTlecfsaZrVs5bXrrTNgTq0ywM/s320/error-screen.png" width="320" /></a></div><br /><p>看來是 ESPAsyncWebServer 的問題, 於是我到 Git Hub 找到了 ESPAsyncWebServer <a href="https://github.com/me-no-dev/ESPAsyncWebServer">https://github.com/me-no-dev/ESPAsyncWebServer</a> 從新下載, 更新了 Library 還是沒有辦法, 錯誤依然存在, 無法解決. </p><p>經過了3個小時反覆搜尋, 發現這是 ESPAsyncWebServer 的一個 issue, 目前還沒有被修正. </p><p>不過, 在底下有高手提出了解決方法:<br />找到 WebAuthentication.cpp 然在大約 72 行左右, </p><p><span style="color: #666666; font-family: courier;">modify in the library directory your_directory/Arduino/libraries/ESPAsyncWebServer-master/src/WebAuthentication.cpp @line 72 with this (the comment are the old line ......)</span></p><p>只要把原來的後3行紅色註解掉(//), 加上4個藍色新程式碼, 即可以修正!</p><p><span style="font-family: courier;">#ifdef ESP32<br /><span style="color: #2b00fe;">mbedtls_md5_init(&_ctx);<br />mbedtls_md5_update_ret (&_ctx,data,len);<br />mbedtls_md5_finish_ret(&_ctx,data);<br />mbedtls_internal_md5_process( &_ctx ,data);</span><br /><span style="color: red;">// mbedtls_md5_starts(&_ctx);<br />// mbedtls_md5_update(&_ctx, data, len);<br />// mbedtls_md5_finish(&_ctx, _buf);</span></span></p><p><span style="font-family: courier;"><span style="color: red;"><br /></span></span></p><p>-----------ENGLISH-------------<br /><br />When I tried to compile ESPAsyncWebServer with AsyncElegantOTA, the following error occured:<br /><br /><span style="color: #666666; font-family: courier;">c:/users/stone/appdata/local/arduino15/packages/esp32/tools/xtensa-esp32-elf-gcc/gcc8_4_0-esp-2021r2-patch3/bin/../lib/gcc/xtensa-esp32-elf/8.4.0/../../../../xtensa-esp32-elf/bin/ld.exe: d:\stone\Documents\build\libraries\ESPAsyncWebServer-master\WebAuthentication.cpp.o:(.literal._ZL6getMD5PhtPc+0x4): undefined reference to `mbedtls_md5_starts'</span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSeoH2cp_Qp4Xdnll_qhoAFZglysLZdKwsILVCFJxvb2PKj7fb9FKqsK-vz5OPuCGaZ1zzgq1sgLh7Fjqs2eWn812ggFbo9jCXT4_wwBiJA03ai2TZHnqW8KRFl0178aOYNPZsmmZLzVG1bhi9dFeJBO5FeTlecfsaZrVs5bXrrTNgTq0ywM/s960/error-screen.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="540" data-original-width="960" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSeoH2cp_Qp4Xdnll_qhoAFZglysLZdKwsILVCFJxvb2PKj7fb9FKqsK-vz5OPuCGaZ1zzgq1sgLh7Fjqs2eWn812ggFbo9jCXT4_wwBiJA03ai2TZHnqW8KRFl0178aOYNPZsmmZLzVG1bhi9dFeJBO5FeTlecfsaZrVs5bXrrTNgTq0ywM/s320/error-screen.png" width="320" /></a></div><p><span style="font-family: courier;"><span style="color: red;"><br style="color: black; font-family: "Times New Roman";" /></span></span></p><p>It looked like the ESPAsyncWebsrver issue, so I went to GitHub to re-download ESPAsyncWebServer (<a href="https://github.com/me-no-dev/ESPAsyncWebServer">https://github.com/me-no-dev/ESPAsyncWebServer</a> ) and then updated the library. However, this didn't solve the issue that the same error still stopping me from compile it for my ESP32.</p><p>After couple of hours, I realized that this was an error that didn't have a proper fixed yet. However, someone at Github provided a solution and it worked for me:</p><p>In line 72 of the WebAuthentication.cpp file:</p><p><span style="color: #666666; font-family: courier;">modify in the library directory your_directory/Arduino/libraries/ESPAsyncWebServer-master/src/WebAuthentication.cpp @line 72 with this (the comment are the old line ......)</span></p><p>Just comment these red in comment below and add the blue codes, then compile went fine without issues!</p><p><span style="font-family: courier;"><span style="color: red;"></span></span></p><p><span style="font-family: courier;">#ifdef ESP32<br /><span style="color: #2b00fe;">mbedtls_md5_init(&_ctx);<br />mbedtls_md5_update_ret (&_ctx,data,len);<br />mbedtls_md5_finish_ret(&_ctx,data);<br />mbedtls_internal_md5_process( &_ctx ,data);</span><br /><span style="color: red;">// mbedtls_md5_starts(&_ctx);<br />// mbedtls_md5_update(&_ctx, data, len);<br />// mbedtls_md5_finish(&_ctx, _buf);</span></span></p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-44556632344800857992022-12-04T21:54:00.007+08:002022-12-07T21:57:53.372+08:00App Inventor #11自己來寫 App - 骰子遊戲 (Dice Game)<p>大家好, 歡迎收看本週的Weekend project with Stonez56。 </p><p>本周要進行的是 App Inventor 第10集 - 自己來寫 App - 骰子遊戲</p><p>這個影片適合稍進階同學來觀看&學習, 想要越級挑戰的朋也也歡迎拿來這個單元來學習 App Inventor 2! </p><p>這是一個學習任意組件的好範例, Android, iPad 都可以使用!</p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/2d6Si6u8FVE" width="640" youtube-src-id="2d6Si6u8FVE"></iframe></div><br /><p><br /></p><p><br /></p><p>本次教學你可以學到:</p><p> * 本集會使用到:</p><p> * 感測器 (Sensor)</p><p> * 變數應用 (Variables)</p><p> * 清單的應用 (List)</p><p> * 圖片的應用 (Image)</p><p> * 為APP加上音音效 (Audio)</p><p> * 亂數的應用 (Randomized)</p><p> * 用任意組件 (Any component)</p><p> * 程序的應用 (Procedure)</p><p><br /></p><p>參考資料: </p><p>App inventor 語法 & 使用方式: http://ai2.appinventor.mit.edu/reference/blocks/ </p><p>音效來源: https://pixabay.com/ </p><p>圖片製作: https://figma.com </p><p><br /></p><p>如果你時間不夠, 也可以從以下的時間軸挑選想看的部份即可! </p><p><br /></p><h4 style="text-align: left;">影片時間軸: </h4><p>00:00 開始</p><p>00:24 骰子 App 示範</p><p>01:20 App 畫面的配置 / 素材上傳</p><p>04:39 App 程式設計</p><p>05:18 如何使用變數/變數種子</p><p>06:31 設定音效</p><p>11:54 如何使用任意元件</p><p>15:22 使用任意組件來移除重複的運算</p><p>16:26 把骰子元件放入清單中</p><p>23:11 使用任意組件 vs 未使用任意組件</p><p><br /></p><h4 style="text-align: left;">App Inventor 相關教學影片:</h4><p><br /></p><p>* App Inventor #11自己來寫 App - 骰子遊戲 (Dice Game)</p><p>https://youtu.be/2d6Si6u8FVE</p><p><br /></p><p>* App Inventor #10 集 自己來寫 APP YouBike 2.0 (下). </p><p>https://youtu.be/Cli-_lUPjgU</p><p><br /></p><p>* App Inventor #9 集 - 自己來寫 APP YouBike 2.0 (上) </p><p>https://youtu.be/D78-eDRFiXM</p><p><br /></p><p>*App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android) https://youtu.be/_HeM9GyVmIE</p><p><br /></p><p>* App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available) https://youtu.be/senjdb-cREY</p><p><br /></p><p>* App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation) https://youtu.be/RfYi8h9y6kE</p><p><br /></p><p>* App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) https://youtu.be/J8b3zWX1FXM</p><p><br /></p><p>* App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2)</p><p>https://youtu.be/x545mFSZWgg</p><p><br /></p><p>* App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor)</p><p>https://youtu.be/u5J4FJQ5UQQ</p><p><br /></p><p>* App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2)</p><p>https://youtu.be/kIONEfLO4sI</p><p><br /></p><p>* MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition)</p><p>https://youtu.be/msV4V6af6tA </p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-77059997550175077092022-11-06T21:49:00.011+08:002022-12-07T21:54:43.301+08:00Arduino #38 YouBike 2.0 餘車通知器 (Arduino #38 ESP32 1306 YouBik 2.0 remain notifier)<p>大家好, 歡迎收看本週的Weekend project with Stonez56。 </p><p>本周要進行的是Arduino 第38集 - UBike 2.0 餘車通知器.</p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/HLaiPmlyhHc" width="640" youtube-src-id="HLaiPmlyhHc"></iframe></div><br /><p><br /></p><p>大多數坐捷運上下班的朋友, 一定有這樣的經驗:下班時,匆匆忙忙趕到捷運站,卻發現捷運站的Ubike已經都沒有了, 只好在那邊癡癡的等候.</p><p>如果下班之前, 看一下YouBike 2.0, 餘車通知器, 確定站點還有較多的Ubike, 這時候再過去牽車, 是不是很安心呢? 我們來看看怎麼做吧!</p><p><br /></p><p>如果你時間不夠, 也可以從以下的時間軸挑選想看的部份即可! </p><h4 style="text-align: left;">影片時間軸:</h4><p>00:00 開始</p><p>00:43 UBike 2.0 餘車通知器使用方法</p><p>03:22 Google Sheet 設定</p><p>14:44 Google Sheet 發佈API設定</p><p>17:19 Google Script doPost(e) 程式解釋</p><p>20:27 Google Script doGet(e) 程式解釋</p><p>21:46 ESP32 程式解釋</p><p>26:51 ESP32 refreshYouBike2data (更新SHEET資料)</p><p>28:52 ESP32 goGetData 由Sheet取得資料</p><p>30:03 showUTF8String 顯示餘車資料</p><p><br /></p><h4 style="text-align: left;">App Inventor 相關教學影片:</h4><p>* App Inventor #11自己來寫 App - 骰子遊戲 (Dice Game)<br />https://youtu.be/2d6Si6u8FVE</p><p>* App Inventor #10 集 自己來寫 APP YouBike 2.0 (下). <br />https://youtu.be/Cli-_lUPjgU</p><p>* App Inventor #9 集 - 自己來寫 APP YouBike 2.0 (上) <br />https://youtu.be/D78-eDRFiXM</p><p>*App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android) https://youtu.be/_HeM9GyVmIE</p><p>* App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available) https://youtu.be/senjdb-cREY</p><p>* App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation) https://youtu.be/RfYi8h9y6kE</p><p>* App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) https://youtu.be/J8b3zWX1FXM</p><p>* App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2)</p><p>https://youtu.be/x545mFSZWgg</p><p>* App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor)</p><p>https://youtu.be/u5J4FJQ5UQQ</p><p>* App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2) https://youtu.be/kIONEfLO4sI</p><p>* MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition) <br />https://youtu.be/msV4V6af6tA </p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-46078135700756558822022-10-23T07:15:00.007+08:002022-10-23T07:15:56.304+08:00App Inventor 第10集 - 自己來寫 YouBike 2.0 APP (下集)<p> 大家好, 歡迎收看本週的Weekend project with Stonez56。 </p><p>本周要進行的是 App Inventor 第10集 - 自己來寫 YouBike 2.0 APP (下集), 這個影片適合初學者來觀看學習, 想拿來這個單元來學習 App Inventor 2 也是很 Ok 的! </p><p>上集影片請點此: <a href="https://youtu.be/D78-eDRFiXM">https://youtu.be/D78-eDRFiXM</a> </p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="400" src="https://www.youtube.com/embed/Cli-_lUPjgU" width="640" youtube-src-id="Cli-_lUPjgU"></iframe></div><br /><p><br /></p><p><br /></p><p>對了,如果你沒有看過上一集, 請記得到右上角這邊, 按一下先觀看上集再來看下集. 那相信看過上一集的朋友都在等待這一集呢! 這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, 相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿。好, 那我們就開始吧今天的練習吧~</p><p><br /></p><h4 style="text-align: left;">本集目標:</h4><p>* 資料由政府資料開放平臺即時更新</p><p>* 美化使用者介面 (加入 Splash)</p><p>* 加入 App 開機畫面</p><p>* 移動 maker 更加順暢</p><p>* 打開 App 自動讀入 Json</p><p>* 取得手機所在位置定位</p><p>* 顯示附近 YouBike 車輛數目 (比對 YouBike 2.0 App 數量)</p><p><br /></p><h4 style="text-align: left;">使用位置感測器, 注意權限:</h4><p>* 位置權限要授權給 MIT App Companion </p><p>* 若是下載為 APK, 位置權限要授權給 APK</p><p>* GPS 精準要打開</p><p><br /></p><p>如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可! </p><p>影片時間軸:</p><p>00:00 Start</p><p>00:37 本集可以學到什麼?</p><p>02:14 YouBike 2.0 App 示範</p><p>03:28 美化 YouBike 2.0 App</p><p>04:30 App 起始畫面 (Splash) </p><p>14:25 直讀政府公開YouBike資料</p><p>22:34 設定位置感測器(GPS)</p><p>35:17 顯示所有站點及每一站點車輛數</p><p>47:54 在我位置做標記</p><p><br /></p><p>上集影片請點此: <a href="https://youtu.be/D78-eDRFiXM">https://youtu.be/D78-eDRFiXM</a> <br /><br /><span style="background-color: white;"><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">App Inventor 相關教學影片:
* MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition)
</span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><a href="https://youtu.be/msV4V6af6tA">https://youtu.be/msV4V6af6tA</a></span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
* App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2)
</span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><a href="https://youtu.be/kIONEfLO4sI">https://youtu.be/kIONEfLO4sI</a></span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
* App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor)
</span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><a href="https://youtu.be/u5J4FJQ5UQQ">https://youtu.be/u5J4FJQ5UQQ</a></span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
* App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2)
</span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><a href="https://youtu.be/x545mFSZWgg">https://youtu.be/x545mFSZWgg</a></span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
* App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) </span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><a href="https://youtu.be/J8b3zWX1FXM">https://youtu.be/J8b3zWX1FXM</a></span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
* App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation)
</span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><a href="https://youtu.be/RfYi8h9y6kE">https://youtu.be/RfYi8h9y6kE</a></span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
* App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available) </span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><a href="https://youtu.be/senjdb-cREY">https://youtu.be/senjdb-cREY</a></span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
*App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android)
</span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><a href="https://youtu.be/_HeM9GyVmIE">https://youtu.be/_HeM9GyVmIE</a></span><span style="font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
</span></span><span style="background-color: #282828; color: white; font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">
</span></p><p><br /></p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-21636990341906980742022-10-16T07:55:00.005+08:002022-10-23T07:16:52.978+08:00App Inventor 第9集, 自己來寫 YouBike 2.0 APP (上集)<div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">大家好, 歡迎收看本週的Weekend project with Stonez56。</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">本周要進行的是 App Inventor 第9集 - 自己來寫 YouBike 2.0 APP (上集) </span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">這個影片適合初學者來觀看學習, 想拿來這個單元來學習 App Inventor 2 也是很 Ok 的!</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="400" src="https://www.youtube.com/embed/D78-eDRFiXM" width="640" youtube-src-id="D78-eDRFiXM"></iframe></div><br /><span style="color: #444444;"><br /></span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;"><br /></span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">上集內容主要包括程式流程:</span></span></div><ol class="x1e56ztr x1xmf6yo x1xfsgkm x3yw8vx" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px; margin-top: 8px; padding-left: 32px;"><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">讀入 YouBike 2.0 JSON 資料並做先期處理</span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">把所有地區送入, 清單選擇器按鈕</span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">使用者選擇某一地區後</span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">在清單顯示器內顯示所有的站點, 位置, 總共單車量, 剩餘單車量</span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">移動地圖到所選的地點, 並呈現出 YouBike 圖示<br /><br /></span></span></div></li></ol><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">下集內容包括: (製作中, 敬請期待~ 10/22 TBD)</span></span></div><ol class="x1e56ztr x1xmf6yo x1xfsgkm x3yw8vx" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px; margin-top: 8px; padding-left: 32px;"><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">資料由政府資料開放平臺即時更新</span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">更新程式流程並且美化使用者介面</span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">取得手機所在位置定位</span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">顯示附近 YouBike 車輛數目</span></span></div></li></ol><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">YouBike 2.0 資料是由政府資料開放平臺的下載而來的, 每幾分鐘便會做更新. 本程式會把 YouBike 2.0 json 資料下載到電腦上, 以節省去一直查詢政府雲端資料庫的時間. <br /><br /></span></span><h3 style="text-align: left;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">參考資料:</span></span></h3></div><ul class="x1e56ztr x1xmf6yo x1xfsgkm xtaz4m5" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin: 8px 0px; padding: 0px 0px 0px 32px;"><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">Online Json Parser <span style="font-family: inherit;"><a class="x1i10hfl xjbqb8w x6umtig x1b1mbwd xaqea5y xav7gou x9f619 x1ypdohk xt0psk2 xe8uvvx xdj266r x11i5rnm xat24cr x1mh8g0r xexx8yu x4uap5 x18d9i69 xkhd6sd x16tdsg8 x1hl2dhg xggy1nq x1a2a7pz xt0b8zv x1fey0fg" href="http://json.parser.online.fr/?fbclid=IwAR240bEhGJVOejB_xMMCShXj29qMT_A9sQrD28-xOZMKCGjAvIoaHrh11HQ" rel="nofollow noopener" role="link" style="-webkit-tap-highlight-color: transparent; border-color: initial; border-style: initial; border-width: 0px; box-sizing: border-box; cursor: pointer; display: inline; font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: inherit; text-decoration-line: none; touch-action: manipulation;" tabindex="0" target="_blank"><span style="font-family: inherit;"><u>http://json.parser.online.fr/</u></span></a></span></span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">YouBike2.0臺北市公共自行車即時資訊<span style="font-family: inherit;"><a class="x1i10hfl xjbqb8w x6umtig x1b1mbwd xaqea5y xav7gou x9f619 x1ypdohk xt0psk2 xe8uvvx xdj266r x11i5rnm xat24cr x1mh8g0r xexx8yu x4uap5 x18d9i69 xkhd6sd x16tdsg8 x1hl2dhg xggy1nq x1a2a7pz xt0b8zv x1fey0fg" href="https://l.facebook.com/l.php?u=https%3A%2F%2Fdata.gov.tw%2Fdataset%2F137993%3Ffbclid%3DIwAR3sCcWZi4GRdwlXpFdSKpWrDs_jV8PHCMtqwZgnNFUQRMJlR_V64OlWli4&h=AT3bc6lSbEH-cUyueWp0V4PBfo4VSi_YVhlLDmi_tSF4gyrXzTjKJG1Fid5H1vMSsJoBpbvqkOr7CpcK6FXU043KVt_Bvdj7LwcyIVqQL8BFkVq60QYGW2C2ejPD2NrrwQ&__tn__=-UK-R&c[0]=AT2PWOYOrfT_6_G-Y_jZcAMgK6CKUX2zVJ524RArt5AmzEMcQfjORUIMdOkHIxbtwi54LaZxJsPaqMXkjT8nIcDv5kc2WvGXrsmfafgYMkQDFwN7OMFOVok6yE0_cQTzXjXFYgoksjlXiFlJT-T7PZLqtetr2NULwI7yxB0" rel="nofollow noopener" role="link" style="-webkit-tap-highlight-color: transparent; border-color: initial; border-style: initial; border-width: 0px; box-sizing: border-box; cursor: pointer; display: inline; font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: inherit; text-decoration-line: none; touch-action: manipulation;" tabindex="0" target="_blank">https://data.gov.tw/dataset/137993</a></span></span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">YouBike 2.0 Json file: <span style="font-family: inherit;"><a class="x1i10hfl xjbqb8w x6umtig x1b1mbwd xaqea5y xav7gou x9f619 x1ypdohk xt0psk2 xe8uvvx xdj266r x11i5rnm xat24cr x1mh8g0r xexx8yu x4uap5 x18d9i69 xkhd6sd x16tdsg8 x1hl2dhg xggy1nq x1a2a7pz xt0b8zv x1fey0fg" href="https://tcgbusfs.blob.core.windows.net/dotapp/youbike/v2/youbike_immediate.json?fbclid=IwAR240bEhGJVOejB_xMMCShXj29qMT_A9sQrD28-xOZMKCGjAvIoaHrh11HQ" rel="nofollow noopener" role="link" style="-webkit-tap-highlight-color: transparent; border-color: initial; border-style: initial; border-width: 0px; box-sizing: border-box; cursor: pointer; display: inline; font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: inherit; text-decoration-line: none; touch-action: manipulation;" tabindex="0" target="_blank">https://tcgbusfs.blob.core.windows.net/....../youbike......</a></span></span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">YouBike 2.0 Json file: <span style="font-family: inherit;"><a class="x1i10hfl xjbqb8w x6umtig x1b1mbwd xaqea5y xav7gou x9f619 x1ypdohk xt0psk2 xe8uvvx xdj266r x11i5rnm xat24cr x1mh8g0r xexx8yu x4uap5 x18d9i69 xkhd6sd x16tdsg8 x1hl2dhg xggy1nq x1a2a7pz xt0b8zv x1fey0fg" href="https://l.facebook.com/l.php?u=https%3A%2F%2Ftcgbusfs.blob.core.windows.net%2Fdotapp%2Fyoubike%2Fv2%2Fyoubike_immediate.json%3Ffbclid%3DIwAR0y6EzgsK1PhmUL2FRtidkf2yIllKJ8qcFiSAu8pAzPZSAa8NLP2DRKKrw&h=AT1k_jK1nAEYm6A76Xq7KX9slruSH4-5I_wgqqOnlsaNuVvkqJUhwzAb06x7uyr2bm4_CLNHPdAZrWpIqOwXL7f0Nc52-b1y6cx9ghqh_RSTYQNBcyLHw4GSCxrux298cw&__tn__=-UK-R&c[0]=AT2PWOYOrfT_6_G-Y_jZcAMgK6CKUX2zVJ524RArt5AmzEMcQfjORUIMdOkHIxbtwi54LaZxJsPaqMXkjT8nIcDv5kc2WvGXrsmfafgYMkQDFwN7OMFOVok6yE0_cQTzXjXFYgoksjlXiFlJT-T7PZLqtetr2NULwI7yxB0" rel="nofollow noopener" role="link" style="-webkit-tap-highlight-color: transparent; border-color: initial; border-style: initial; border-width: 0px; box-sizing: border-box; cursor: pointer; display: inline; font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: inherit; text-decoration-line: none; touch-action: manipulation;" tabindex="0" target="_blank"><span style="font-family: inherit;"><u>https://tcgbusfs.blob.core.windows.net/dotapp/youbike/v2/youbike_immediate.json</u></span></a></span></span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">APP 地圖使用: App Inventor 內建之 OpenStreet Map: <span style="font-family: inherit;"><a class="x1i10hfl xjbqb8w x6umtig x1b1mbwd xaqea5y xav7gou x9f619 x1ypdohk xt0psk2 xe8uvvx xdj266r x11i5rnm xat24cr x1mh8g0r xexx8yu x4uap5 x18d9i69 xkhd6sd x16tdsg8 x1hl2dhg xggy1nq x1a2a7pz xt0b8zv x1fey0fg" href="https://l.facebook.com/l.php?u=https%3A%2F%2Fwww.openstreetmap.org%2F%3Ffbclid%3DIwAR0gp7Et_ymSPLWnWs2KQ_gwwOl3ymdYONcNcfO9j-CMbVG3_xzKLruFD0A%23map%3D8%2F23.611%2F120.768&h=AT3tpIiRorj3OPcBr3FFAX_g4513cJFq5-2ei-zTMAA1ejkMQy2yEQ29KBZGL4lrGAWu4svWm-g_nnkYe_-jpOFBSxeeV1WOtLu13Zo_r-9J5GncEjBA_MAOi5UrcAqGGw&__tn__=-UK-R&c[0]=AT2PWOYOrfT_6_G-Y_jZcAMgK6CKUX2zVJ524RArt5AmzEMcQfjORUIMdOkHIxbtwi54LaZxJsPaqMXkjT8nIcDv5kc2WvGXrsmfafgYMkQDFwN7OMFOVok6yE0_cQTzXjXFYgoksjlXiFlJT-T7PZLqtetr2NULwI7yxB0" rel="nofollow noopener" role="link" style="-webkit-tap-highlight-color: transparent; border-color: initial; border-style: initial; border-width: 0px; box-sizing: border-box; cursor: pointer; display: inline; font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: inherit; text-decoration-line: none; touch-action: manipulation;" tabindex="0" target="_blank"><span style="font-family: inherit;"><u>https://www.openstreetmap.org/#map=8/23.611/120.768</u></span></a></span></span></span></div></li><li><div class="x1e56ztr" style="font-family: inherit; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">TextUtils extension: <span style="font-family: inherit;"><a class="x1i10hfl xjbqb8w x6umtig x1b1mbwd xaqea5y xav7gou x9f619 x1ypdohk xt0psk2 xe8uvvx xdj266r x11i5rnm xat24cr x1mh8g0r xexx8yu x4uap5 x18d9i69 xkhd6sd x16tdsg8 x1hl2dhg xggy1nq x1a2a7pz xt0b8zv x1fey0fg" href="https://community.appinventor.mit.edu/t/all-rescued-extensions-from-appybuilder-community/27169/47?page=3&fbclid=IwAR1QzI0DSgVF1_b78mdrvyoTfTQEq_sb3HHqvmTPYZJlpokabiUxJzSrIV8" rel="nofollow noopener" role="link" style="-webkit-tap-highlight-color: transparent; border-color: initial; border-style: initial; border-width: 0px; box-sizing: border-box; cursor: pointer; display: inline; font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: inherit; text-decoration-line: none; touch-action: manipulation;" tabindex="0" target="_blank"><span style="font-family: inherit;"><u>https://community.appinventor.mit.edu/t/all-rescued-extensions-from-appybuilder-community/27169/47?page=3</u></span></a></span></span></span></div></li></ul><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">如果你時間不夠, 也可以從以下的時間軸挑選想看的部份即可!</span></span></div><h4 class="x1heor9g x1qlqyl8 x1pd3egz x1a2a7pz xyorhqc xtvhhri x1anpbxc" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: inherit; margin: 10px 0px; outline: none; padding: 0px; text-transform: uppercase;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen x1xlr1w8 xi81zsa" style="background-color: white; font-family: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;"><br />影片時間軸:</span></span></h4><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">00:00 開始</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">00:21 取得 YouBike 即時資訊</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">01:04 Json 線上編排後讀取 (Json Parser Online)</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">02:20 YouBike 2.0 APP 成果展示</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">03:32 開始APP頁面設計</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">07:23 簡化資料方便偵錯</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">17:52 開始程式設計</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">18:29 讀取上傳檔案的位置以 // 表示</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">29:50 如何取得站別的資訊 (Json)</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">55:19 如何移動地圖到 YouBike 站點</span></span></div><div class="x1e56ztr" style="font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; margin-bottom: 8px;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;">1:02:15 如何顯示 YouBike 圖示<br /><br /></span></span><h4 style="text-align: left;"><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;"><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;">App Inventor 相關教學影片:</span></span></span></h4><span class="x193iq5w xeuugli x13faqbe x1vvkbs x1xmvt09 x6prxxf xvq8zen xo1l8bm xzsf02u" style="background-color: white; font-family: inherit; font-size: 0.9375rem; line-height: 1.3333; max-width: 100%; min-width: 0px; overflow-wrap: break-word; word-break: break-word;"><span style="color: #444444;"><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;">* MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition)
</span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;"><a href="https://youtu.be/msV4V6af6tA">https://youtu.be/msV4V6af6tA</a></span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;">
* App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2)
</span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;"><a href="https://youtu.be/kIONEfLO4sI">https://youtu.be/kIONEfLO4sI</a></span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;">
* App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor)
</span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;"><a href="https://youtu.be/u5J4FJQ5UQQ">https://youtu.be/u5J4FJQ5UQQ</a></span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;">
* App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2)
</span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;"><a href="https://youtu.be/x545mFSZWgg">https://youtu.be/x545mFSZWgg</a></span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;">
* App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) </span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;"><a href="https://youtu.be/J8b3zWX1FXM">https://youtu.be/J8b3zWX1FXM</a></span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;">
* App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation)
</span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;"><a href="https://youtu.be/RfYi8h9y6kE">https://youtu.be/RfYi8h9y6kE</a></span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;">
* App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available) </span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;"><a href="https://youtu.be/senjdb-cREY">https://youtu.be/senjdb-cREY</a></span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;">
*App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android)
</span><span style="color: black; font-family: Roboto, Noto, sans-serif; white-space: pre-wrap;"><a href="https://youtu.be/_HeM9GyVmIE">https://youtu.be/_HeM9GyVmIE</a></span></span></span></div>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-36620824573872379352022-10-01T20:37:00.008+08:002022-10-01T20:38:28.961+08:00App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧<p><span style="font-family: Arial; font-size: 11pt; white-space: pre-wrap;">大家好, 歡迎收看本週的Weekend project with Stonez56。 </span></p><span id="docs-internal-guid-31368151-7fff-173a-1c11-6f39eb9d0460"><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">本周要進行的是 App Inventor 第8集 - AI2 Companion 一直斷線怎麼辦?</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">在使用 App Inventor 時, 我比較喜歡是在手機上安裝 AI2 Companion 來測試 App 以確保App</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">的畫面設計與預期的相符合, 但是你是不是常常發生ai2 companion常常發生斷線的問題? </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">斷線後, 你必須在App inventor裡, 重新產生QR Code, 掃描, 等待ai2 companion再次連線,</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">真的是很麻煩呢! 本集我們就來在Android手機上做一些設定讓ai2 companion永遠連線, 這樣子以後就很方便喔!</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">也可以從以下的時間軸挑選想看的部份即可! </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; white-space: pre-wrap;"><span style="font-size: 14.6667px;">
</span></span></p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="480" src="https://www.youtube.com/embed/_HeM9GyVmIE" width="640" youtube-src-id="_HeM9GyVmIE"></iframe></div><br />
</span><span style="color: #434343;"><span style="font-size: 14pt;">影片時間軸: </span></span><p></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">00:00 開始</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">00:54 為什麼 AI2 會斷線?</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">01:31 Android 手機設定打開發人員選項</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">02:12 在版本號碼上點7次</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">03:04 打開螢幕不休眠選項</span></p><div><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-14660139425933870912022-09-04T20:10:00.009+08:002022-10-01T20:45:23.729+08:00App Inventor #7 ESP32 語音控制-IOT 專案必備程式庫範例 (Voice Control ESP32 with IoT Essential Code Base/Voice command )<p> </p><span id="docs-internal-guid-ee94f2e8-7fff-e90e-6129-ca7489766944"><h3 dir="ltr" style="line-height: 1.38; margin-bottom: 4pt; margin-top: 16pt;"><span style="color: #434343; font-family: Arial; font-size: 14pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">前言:</span></h3><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">大家好, 歡迎收看本週的Weekend project with Stonez56。 </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">本周要進行的是 App Inventor 第7集 - 語音控制ESP32 - IOT 專案必備程式庫範例</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">本週要來示範如何設計App inventor 2 語音控制 APP, 只要加上我之前介紹的IoT專用必備程式庫, (請參考下方的#27連結), 為了讓初學者更好上手, 本次採用沒有放入MQTT的程式庫, 讓範例更簡單一點. 我們先來看一下實際的操作影片. </span><span style="font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: Arial;"><span style="font-size: 14.6667px; white-space: pre-wrap;"><a href="https://www.youtube.com/watch?v=senjdb-cREY&t=40s">https://www.youtube.com/watch?v=senjdb-cREY&t=40s</a></span></span></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">整個範例做完,你就可以以語音來控制遠端的 ESP32 了. 本次範例, 除了可以控制ESP32上的LED開 & 關, 也可以控制伺服馬達的開 & 關, 這集也加上了多語功能的控制, 中文和英文都可以喔. 範例中也設定了法文, 西班牙文, 和日文,有興趣的朋友可以自行加上這些語言的控制程式碼. </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><br /></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">#27 AsyncWifimanager ElegantOTA ESP32 (WiFi 密碼管理+ WiFi 韌體更新)</span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><a href="https://stonez56.blogspot.com/2021/07/asyncwifimanager-elegantota-esp32-wifi.html" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://stonez56.blogspot.com/2021/07/asyncwifimanager-elegantota-esp32-wifi.html</span></a><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">請先到上方的連結, copy 所有的程式嗎, 再複製到 Arduino 編輯程式中存檔.</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">也要記得把 esp32_servo.h 檔案給儲存下來.
</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">好, 那我們就開始吧今天的練習吧~</span></p><div><br /></div><div><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div></span><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="400" src="https://www.youtube.com/embed/senjdb-cREY" width="640" youtube-src-id="senjdb-cREY"></iframe></div><div class="separator" style="clear: both; text-align: center;"><br /></div>
<br /><h3 style="text-align: left;">Source code:</h3><br /><h4 style="text-align: left;"><b>
37_vioceControl_ESP32_ECBv1.ino
</b></h4><pre class="prettyprint linenums:1">#include "esp32_servo.h" //------->
#define myLED 2 //------->
#include <AsyncElegantOTA.h>
const char *FOTA_USERNAME = "un";
const char *FOTA_PASSWORD = "pw";
/****************************************************************************************************************************
Async_AutoConnect_ESP32_minimal.ino
For ESP8266 / ESP32 boards
Built by Khoi Hoang https://github.com/khoih-prog/ESPAsync_WiFiManager
Licensed under MIT license
*****************************************************************************************************************************/
#if !(defined(ESP32))
#error This code is intended to run on the ESP32 platform! Please check your Tools->Board setting.
#endif
#include <ESPAsync_WiFiManager.h> //https://github.com/khoih-prog/ESPAsync_WiFiManager
AsyncWebServer webServer(80);
#define DEVICE_NAME "VoiceCommandESP32" //------->
DNSServer dnsServer;
void setup()
{
pinMode(myLED, OUTPUT); //------->
servo_setup(); //------->
// put your setup code here, to run once:
Serial.begin(115200);
while (!Serial)
;
delay(200);
Serial.println("\nStarting Async_AutoConnect_ESP32_minimal on " + String(ARDUINO_BOARD));
Serial.println(ESP_ASYNC_WIFIMANAGER_VERSION);
ESPAsync_WiFiManager ESPAsync_wifiManager(&webServer, &dnsServer, DEVICE_NAME); //------->
//ESPAsync_wifiManager.resetSettings(); //reset saved settings
//ESPAsync_wifiManager.setAPStaticIPConfig(IPAddress(192, 168, 132, 1), IPAddress(192, 168, 132, 1), IPAddress(255, 255, 255, 0));
ESPAsync_wifiManager.autoConnect();
if (WiFi.status() == WL_CONNECTED)
{
Serial.print(DEVICE_NAME); //------->
Serial.print(F(" Connected. Local IP: "));
Serial.println(WiFi.localIP());
}
else
{
Serial.println(ESPAsync_wifiManager.getStatus(WiFi.status()));
}
webServer.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
{ request->send(200, "text/plain", "Hi! I am ESP32S. access to URL /update to update firmware"); }); //------->
webServer.onNotFound([](AsyncWebServerRequest *request)
{ request->send(404, "text/plain", "Page not found!"); }); //------->
// move the motors //-------> NEW ADDITION Codes
webServer.on("/go", HTTP_GET, [](AsyncWebServerRequest *request)
{
String motor = "";
String rotation = "";
// Get input value from URL/go?motor=msg1&rotation=msg2
if(request->hasParam("motor") && request->hasParam("rotation")){
if(request->hasParam("motor")){
AsyncWebParameter* p = request->getParam("motor");
Serial.print(p->name().c_str());
Serial.println(p->value().c_str());
motor = p->value();
}
if(request->hasParam("rotation")){
AsyncWebParameter* p = request->getParam("rotation");
Serial.print(p->name().c_str());
Serial.println(p->value().c_str());
rotation = p->value();
}
if(rotation == "0"){
digitalWrite(myLED, LOW);
}else if(rotation == "1"){
digitalWrite(myLED, HIGH);
}else{
servo_spin(rotation.toInt());
}
request->send(200, "text/plain", "Command executed!");
}else{
request->send(200, "text/plain", "Error command!");
Serial.println("Error commands!");
}
});
//AsyncElegantOTA.begin(&webServer); // Start ElegantOTA WITHOUT username & password
AsyncElegantOTA.begin(&webServer, FOTA_USERNAME, FOTA_PASSWORD); // Start ElegantOTA with username & password
webServer.begin();
Serial.println("HTTP server started");
}
void loop() {
}
</pre>
<br /><br /><h4 style="text-align: left;"><b>esp32_servo.h
</b></h4><pre class="prettyprint linenums:1">// ESP32Servo by John K. Bennett,autoConnectKevin Harrington Version 0.11.0
// https://github.com/jkb-git/ESP32Servo/blob/master/src/ESP32_Servo.h
#include <analogWrite.h>
#include <ESP32PWM.h>
#include <ESP32Servo.h>
#include <ESP32Tone.h>
/** Define SERVO pins **/
#define SERVO_PIN2 13 //
Servo SERVO_LR; //left right
const int MAX_ANGLE = 170; //keep servo at minimum range
const int MIN_ANGLE = 10;
int SERVO_LR_POS = 90;
void servo_setup()
{
SERVO_LR.setPeriodHertz(50); // standard 50 hz servo
// http://yehnan.blogspot.com/2013/09/arduinotower-pro-sg90.html
SERVO_LR.attach(SERVO_PIN2, 500, 2400);
//init position 90 degree for LR & UD
SERVO_LR.write(SERVO_LR_POS);
}
void servo_spin(int angle){
// motor protection
if(angle > MAX_ANGLE) angle = MAX_ANGLE;
if(angle < MIN_ANGLE) angle = MIN_ANGLE;
SERVO_LR.write(angle);
}
</pre>
<br /><br />
Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-53849931522571511042022-08-14T19:58:00.010+08:002023-09-04T14:21:39.371+08:00Android #36 IoT 基本程式庫 Wifimanager FOTA MQTT (IOT Essential Code base with wifimanager, ElegantOTA, & MQTT)<p>Hi, Welcome to weekend project with Stonez56</p><p>This week's Arduino episode #37, "Essential IoT Code Base- Wifimanager FOTA + MQTT"</p><p>Here is the source code: <a href="https://stonez56.blogspot.com/2022/08/android-36-iot-wifimanager-fota-mqtt.html">https://stonez56.blogspot.com/2022/08/android-36-iot-wifimanager-fota-mqtt.html</a> </p><p><br /></p><p>Today, I will show how to combine three commonly used IoT libraries;</p><p>WiFimanager, AsyncElegantOTA, and MQTT To become a common IoT code base. So, for our future projects, ESP8266 or ESP32, would have these basic functions.</p><p>Let's first look at these three libraries:</p><p></p><ul style="text-align: left;"><li>Wifimanager = Wi-Fi password management, no need to re-burn the code to change the Wi-Fi SSID & password</li><li>FOTA = Use Wi-Fi to update ESP32 code, you can burn code without connecting to USB</li><li>MQTT = Streamlined and lightweight communication protocol (Message Queueing Telemetry Transport)</li></ul><p></p><p><br /></p><p>This episode will only introduce how to integrate MQTT into Wifimanager + AsyncElegantFOTA.</p><p>To learn how to start Wifimanager + AsyncElegantOTA, Please watch Android #27 Wifimanager + OTA for ESP32/ESP8266 (ESPAsyncWifimanager / ESPAsyncElegantOTA)) <a href="https://youtu.be/UlRLTvl4DRc">https://youtu.be/UlRLTvl4DRc</a> </p><p><br /></p><p>==References==</p><p>Arduino Library URL:</p><p></p><ul style="text-align: left;"><li>* ESPAsync_WiFiManager: <a href="https://github.com/khoih-prog/ESPAsync_WiFiManager">https://github.com/khoih-prog/ESPAsync_WiFiManager</a> </li><li>* AsyncElegantOTA: <a href="https://github.com/ayushsharma82/AsyncElegantOTA">https://github.com/ayushsharma82/AsyncElegantOTA</a> </li><li>* Pubsubclient MQTT Client: <a href="https://github.com/knolleary/pubsubclient">https://github.com/knolleary/pubsubclient</a> </li></ul><p></p><p><br /></p><p>==Sample code URL==</p><p>ESPAsync_WiFiManager minimal: <a href="https://github.com/khoih-prog/ESPAsync_WiFiManager/blob/master/examples/Async_AutoConnect_ESP32_minimal/Async_AutoConnect_ESP32_minimal.ino">https://github.com/khoih-prog/ESPAsync_WiFiManager/blob/master/examples/Async_AutoConnect_ESP32_minimal/Async_AutoConnect_ESP32_minimal.ino</a> </p><p><br /></p><p>ESP32 Async OTA : <a href="https://github.com/ayushsharma82/AsyncElegantOTA/blob/master/examples/ESP32_Async_Demo/ESP32_Async_Demo.ino">https://github.com/ayushsharma82/AsyncElegantOTA/blob/master/examples/ESP32_Async_Demo/ESP32_Async_Demo.ino</a> </p><p><br /></p><p>If you don't have enough time, you can also select the part you want to watch from the timeline below!</p><p><span style="background-color: white;"><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;">Video Timeline:
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=FCZlCc_8d3k&t=0s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">00:00</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> Start
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=FCZlCc_8d3k&t=99s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">01:39</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> Demonstration of project results
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=FCZlCc_8d3k&t=117s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">01:57</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> mqttgo.io MQTT server, free, fast, & stable
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=FCZlCc_8d3k&t=352s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">05:52</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> Install three libraries
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=FCZlCc_8d3k&t=434s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">07:14</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> Added two ESP32 PINs as MQTT example
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=FCZlCc_8d3k&t=461s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">07:41</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> Encrypt the firmware update (ElegantOTA) page
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=FCZlCc_8d3k&t=704s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">11:44</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> Explain how the MQTT callback function works
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=FCZlCc_8d3k&t=787s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">13:07</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> Control ESP32 I/O pins with MQTT
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=FCZlCc_8d3k&t=916s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">15:16</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> Future program can be written from here</span></span></p><p>=====中文版本======</p><p>大家好, 歡迎收看本週的Weekend project with Stonez56。 </p><p>本周要進行的是 Arduino 第36集,"IoT 基本程式庫 - Wifimanager FOTA + MQTT”</p><p>今天來跟大家介紹如何把 一般的 IoT 專案常用到的三個程式庫, WiFiManager 以及WiFi 韌體更新FOTA (Firmware Over the Air), 再加上 MQTT 三個整合在一起, 變成一個常用的 Code base. 往後你的 ESP32 IoT 專案呢, 就可以俱備這些基本功能了! </p><p><br /></p><p></p><ul style="text-align: left;"><li>Wifimanager = WiFi 密碼管理, 不用重新燒 Code 改 Wifi SSID & 密碼</li><li>FOTA = 用Wi-Fi更新ESP32程式碼, 不用接USB就可以燒Code</li><li>MQTT = 精簡輕量化的通訊協定(Message Queueing Telemetry Transport)</li></ul><p></p><p><br /></p><p>本集僅會介紹如何把 MQTT 整合到 Wifimanager + AsyncElegantFOTA</p><p>若想了解如何整合 Wifimanager + AsyncElegantOTA, </p><p>請觀看 Arduino #26 AsyncWifimanager ElegantOTA ESP32 (WiFi 密碼管理+ WiFi 韌體更新) <a href="https://youtu.be/zepkinJ46Zg">https://youtu.be/zepkinJ46Zg</a> </p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="400" src="https://www.youtube.com/embed/giFHp9RSMvQ" width="640" youtube-src-id="giFHp9RSMvQ"></iframe></div><br /><p><br /></p><h4 style="text-align: left;"><b>==參考資料==</b></h4><p><b>Arduino Library URL: </b></p><p></p><ul style="text-align: left;"><li>* ESPAsync_WiFiManager: <a href="https://github.com/khoih-prog/ESPAsync_WiFiManager">https://github.com/khoih-prog/ESPAsync_WiFiManager</a> </li><li>* AsyncElegantOTA: <a href="https://github.com/ayushsharma82/AsyncElegantOTA">https://github.com/ayushsharma82/AsyncElegantOTA</a> </li><li>* Pubsubclient MQTT Client: <a href="https://github.com/knolleary/pubsubclient">https://github.com/knolleary/pubsubclient</a> </li></ul><p></p><p><br /></p><h4 style="text-align: left;"><b>==Sample code URL==</b></h4><p></p><ul style="text-align: left;"><li>ESPAsync_WiFiManager minimal: <a href="https://github.com/khoih-prog/ESPAsync_WiFiManager/blob/master/examples/Async_AutoConnect_ESP32_minimal/Async_AutoConnect_ESP32_minimal.ino">https://github.com/khoih-prog/ESPAsync_WiFiManager/blob/master/examples/Async_AutoConnect_ESP32_minimal/Async_AutoConnect_ESP32_minimal.ino</a> </li><li>ESP32 Async OTA : <a href="https://github.com/ayushsharma82/AsyncElegantOTA/blob/master/examples/ESP32_Async_Demo/ESP32_Async_Demo.ino">https://github.com/ayushsharma82/AsyncElegantOTA/blob/master/examples/ESP32_Async_Demo/ESP32_Async_Demo.ino</a> </li></ul><p></p><p><br /></p><p>如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可! </p><p>影片時間軸:</p><p><span style="background-color: white;"><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;">影片時間軸:
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=giFHp9RSMvQ&t=0s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">00:00</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> Start
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=giFHp9RSMvQ&t=99s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">01:39</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 專案成果示範
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=giFHp9RSMvQ&t=117s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">01:57</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> mqttgo.io 快速免費的 MQTT 伺服器
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=giFHp9RSMvQ&t=352s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">05:52</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 安裝三支程式庫
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=giFHp9RSMvQ&t=434s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">07:14</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 加入兩個 ESP32 PIN做為MQTT範例
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=giFHp9RSMvQ&t=461s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">07:41</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 為韌體更新(ElegantOTA)頁面加密
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=giFHp9RSMvQ&t=704s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">11:44</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 說明MQTT callback 函數運作方式
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=giFHp9RSMvQ&t=787s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">13:07</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> MQTT由此控制ESP32 PIN
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=giFHp9RSMvQ&t=916s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">15:16</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 把你的程式可以寫在這裡</span></span></p><p><span style="background-color: white;"><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"><br /></span></span></p><h4 style="text-align: left;"><span style="background-color: white; font-size: 14px; white-space: pre-wrap;">IoT基本程式庫原始程式:</span></h4><div><br /></div>
<pre class="prettyprint linenums:1" style="text-align: left;">
/**
* Arduino code base for IoT Projects
* By: Stonez56 aka Kevin Chen 2022-08-16
*
* This source code combined three most common Arduino libraries for IoT Projects,
* ESPAsync_Wifimanager, AsyncElegantOTA, & Pubsubclient MQTT Client.
*
* 1. ESPAsync_WiFiManager: https://github.com/khoih-prog/ESPAsync_WiFiManager
* 2. AsyncElegantOTA: https://github.com/ayushsharma82/AsyncElegantOTA
* 3. Pubsubclient MQTT Client: https://github.com/knolleary/pubsubclient
*
* YouTube video: https://youtu.be/giFHp9RSMvQ
* Source code is available my blog: https://stonez56.blogspot.com/2022/08/android-36-iot-wifimanager-fota-mqtt.html
**/
/*
* Define Relay pins as examples to send/receive MQTT messages
* **/
#define RELAY_PIN_1 12
#define RELAY_PIN_2 14
/**
* Perform OTAs for ESP8266 / ESP32 Elegantly with password protection!
* https://github.com/ayushsharma82/AsyncElegantOTA
* **/
#include <AsyncElegantOTA.h>
const char *FOTA_USERNAME = "un";
const char *FOTA_PASSWORD = "pw";
/**
* Add MQTT client here` PubSubClient V2.8 by Nick O'Leary
* https://github.com/knolleary/pubsubclient
*/
#include <WiFiClient.h>
#include <PubSubClient.h>
#define MSG_BUFFER_SIZE (1024)
char msg[MSG_BUFFER_SIZE];
/** Taiwan No. 1 Free MQTT Server!! **/
const char *mqtt_server = "mqttgo.io";
const int mqtt_port = 1883;
/****************************************************************************************************************************
Async_AutoConnect_ESP32_minimal.ino
For ESP8266 / ESP32 boards
Built by Khoi Hoang https://github.com/khoih-prog/ESPAsync_WiFiManager
Licensed under MIT license
*****************************************************************************************************************************/
#if !(defined(ESP32))
#error This code is intended to run on the ESP32 platform! Please check your Tools->Board setting.
#endif
#include <ESPAsync_WiFiManager.h>
AsyncWebServer webServer(80);
//Start DNS server
DNSServer dnsServer;
//MQTT - Start WiFi client and connect to MQTT server
WiFiClient espClient;
PubSubClient mqtt_client(espClient);
//Define device name
String DEVICE_NAME = "Dual_Relay_Switch";
String home_page_message = "";
void setup()
{
Serial.begin(115200);
pinMode(RELAY_PIN_1, OUTPUT);
pinMode(RELAY_PIN_2, OUTPUT);
while (!Serial)
;
delay(200);
Serial.print("\nAsyncWifimanager started on " + String(ARDUINO_BOARD) + "\n");
//Initialize ESPAsyncWifimanager instance and assign Wi-Fi Client name "AsyncAutoConnect"!
//This name and IP address can be checked from the router
ESPAsync_WiFiManager ESPAsync_wifiManager(&webServer, &dnsServer, "Dual_Relay_Switch");
//####### RESET SAVED WIFI SETTINGS #############
//ESPAsync_wifiManager.resetSettings();
//ESPAsync_wifiManager.setAPStaticIPConfig(IPAddress(192, 168, 132, 1), IPAddress(192, 168, 132, 1), IPAddress(255, 255, 255, 0));
//ESPAsync_wifiManager.autoConnect("Stonez_ESP32S", "AP-NAME", "AP-PASSWORD");
ESPAsync_wifiManager.autoConnect("Dual_Switch_ESP32S");
if (WiFi.status() == WL_CONNECTED)
{
Serial.print(DEVICE_NAME);
Serial.print(" is on Local IP: ");
Serial.println(WiFi.localIP());
}
else
{
Serial.println(ESPAsync_wifiManager.getStatus(WiFi.status()));
}
//Setup home page access content when visite
home_page_message = "<!DOCTYPE html><html><head><title>" + DEVICE_NAME
+ "</title></head><body><p><h2> Hi! This is " + DEVICE_NAME + "</h2>"
+ "To update firmware, <a href='/update'>Click here!!</a><br/><span>Username & Password required!</span></p><body></html>";
webServer.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
{ request->send(200, "text/html", home_page_message); });
//AsyncElegantOTA.begin(&webServer); // Start ElegantOTA WITHOUT username & password
AsyncElegantOTA.begin(&webServer, FOTA_USERNAME, FOTA_PASSWORD); // Start ElegantOTA with username & password
webServer.begin();
Serial.println("AsyncElegantOTA server started @URL/update");
//MQTT starts here!
mqtt_client.setServer(mqtt_server, mqtt_port);
mqtt_client.setCallback(callback);
}
/**
//When MQTT lost connection, this function will be called to reconnect MQTT//
* Modified to accept multiple MQTT topics
* https://www.baldengineer.com/multiple-mqtt-topics-pubsubclient.html
*/
void callback(char *topic, byte *payload, unsigned int length)
{
//Print message received
Serial.print("Message arrived [");
Serial.print(topic);
Serial.print("] ");
for (int i = 0; i < length; i++)
{
Serial.print((char)payload[i]);
}
Serial.println();
//Process multiple topics here//
payload[length] = '\0';
String message = (char*)payload;
if (strcmp(topic, "studio/humd_switch") == 0)
{
if(message == "true"){
digitalWrite(RELAY_PIN_1, HIGH);
Serial.println("humd_switch true");
}
if(message == "false"){
digitalWrite(RELAY_PIN_1, LOW);
Serial.println("humd_switch false");
}
}
if (strcmp(topic, "studio/humd_switch2") == 0)
{
if(message == "true"){
digitalWrite(RELAY_PIN_2, HIGH);
Serial.println("humd_switch2 true");
}
if(message == "false"){
digitalWrite(RELAY_PIN_2, LOW);
Serial.println("humd_switch2 false");
}
}
}
//============= MQTT ===================
//When MQTT lost connection, this function will be called to reconnect MQTT//
void reconnect(){
//Loop while MQTT connected
while (!mqtt_client.connected())
{
Serial.print("Attempting MQTT connection... ");
// Create a random client ID
String clientId = "Stonez_ESP32Client-";
clientId += String(random(0xffff), HEX);
// Attempt to connect
if (mqtt_client.connect(clientId.c_str()))
{
Serial.print("connected to ");
Serial.print(mqtt_server);
// Once connected, publish an announcement...
mqtt_client.publish("outTopic", "Hello world");
// ... and resubscribe
mqtt_client.subscribe("studio/humd_switch");
mqtt_client.subscribe("studio/humd_switch2");
}
else
{
Serial.print("failed, rc=");
Serial.print(mqtt_client.state());
Serial.println(" try again in 5 seconds");
// Wait 5 seconds before retrying
delay(5000);
}
}
}
void loop() {
//============= MQTT ===================
//if can't connect to MQTT server, then re-connect
if (!mqtt_client.connected())
{ reconnect(); }
//constantly check MQTT to see for messages sending/receiving
mqtt_client.loop();
/**
* Write your own code here....
*
*/
}
</pre>
<h3 style="text-align: left;"><b>
Async_AutoConnect_ESP32_minimal.ino
</b></h3><pre class="prettyprint linenums:1" style="text-align: left;">
/****************************************************************************************************************************
Async_AutoConnect_ESP32_minimal.ino
For ESP8266 / ESP32 boards
Built by Khoi Hoang https://github.com/khoih-prog/ESPAsync_WiFiManager
Licensed under MIT license
*****************************************************************************************************************************/
#if !(defined(ESP32) )
#error This code is intended to run on the ESP32 platform! Please check your Tools->Board setting.
#endif
#include <ESPAsync_WiFiManager.h> //https://github.com/khoih-prog/ESPAsync_WiFiManager
AsyncWebServer webServer(80);
DNSServer dnsServer;
void setup()
{
// put your setup code here, to run once:
Serial.begin(115200); while (!Serial); delay(200);
Serial.print("\nStarting Async_AutoConnect_ESP32_minimal on " + String(ARDUINO_BOARD)); Serial.println(ESP_ASYNC_WIFIMANAGER_VERSION);
ESPAsync_WiFiManager ESPAsync_wifiManager(&webServer, &dnsServer, "AutoConnectAP");
//ESPAsync_wifiManager.resetSettings(); //reset saved settings
ESPAsync_wifiManager.setAPStaticIPConfig(IPAddress(192,168,132,1), IPAddress(192,168,132,1), IPAddress(255,255,255,0));
ESPAsync_wifiManager.autoConnect("AutoConnectAP");
if (WiFi.status() == WL_CONNECTED) { Serial.print(F("Connected. Local IP: ")); Serial.println(WiFi.localIP()); }
else { Serial.println(ESPAsync_wifiManager.getStatus(WiFi.status())); }
}
void loop() { }
</pre><h3 style="text-align: left;">
Async_AutoConnect_ESP8266_minimal.ino
</h3><pre class="prettyprint linenums:1">
/****************************************************************************************************************************
Async_AutoConnect_ESP8266_minimal.ino
For ESP8266 / ESP32 boards
Built by Khoi Hoang https://github.com/khoih-prog/ESPAsync_WiFiManager
Licensed under MIT license
*****************************************************************************************************************************/
#if !( defined(ESP8266) )
#error This code is intended to run on ESP8266 platform! Please check your Tools->Board setting.
#endif
#include <ESPAsync_WiFiManager.h> //https://github.com/khoih-prog/ESPAsync_WiFiManager
AsyncWebServer webServer(80);
DNSServer dnsServer;
void setup()
{
// put your setup code here, to run once:
Serial.begin(115200); while (!Serial); delay(200);
Serial.print("\nStarting Async_AutoConnect_ESP8266_minimal on " + String(ARDUINO_BOARD)); Serial.println(ESP_ASYNC_WIFIMANAGER_VERSION);
ESPAsync_WiFiManager ESPAsync_wifiManager(&webServer, &dnsServer, "AutoConnectAP");
//ESPAsync_wifiManager.resetSettings(); //reset saved settings
//ESPAsync_wifiManager.setAPStaticIPConfig(IPAddress(192,168,186,1), IPAddress(192,168,186,1), IPAddress(255,255,255,0));
ESPAsync_wifiManager.autoConnect("AutoConnectAP");
if (WiFi.status() == WL_CONNECTED) { Serial.print(F("Connected. Local IP: ")); Serial.println(WiFi.localIP()); }
else { Serial.println(ESPAsync_wifiManager.getStatus(WiFi.status())); }
}
void loop() { }
</pre>
Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com1tag:blogger.com,1999:blog-16399605.post-6262486163507219232022-07-09T14:46:00.001+08:002022-07-16T15:00:05.058+08:00一起來學樹莓派系列 - “如何使用 Log2RAM” 來增加SD卡的壽命, 及Pi運作的速度.<p> <span style="font-family: Arial; font-size: 11pt; white-space: pre-wrap;">大家好, 歡迎收看本週的weekend project with Stonez56. </span></p><span id="docs-internal-guid-90b99b10-7fff-a7b4-bb23-37f04ac73bcd"><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">今天來和大家分享 “一起來學樹莓派” 系列 - “如何使用 Log2RAM” 來增加SD卡的壽命, 及Pi運作的速度. </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Log 主要是由系統上執行的一些程式在背景寫入到你的磁碟裡. 它可能是幾分鐘寫入一次, 或是幾秒鐘就寫入一次, 頻繁的讀寫 很容易造成SD卡的損毀並且影響運作的速度. </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">如果我們將 Log 直接寫入RAM, 就可以減少讀寫的次數, 提升Pi的運作速度, 及延長SD卡的壽命. 這些寫入到RAM的 Log 並不會消失, 它會每天再把這些 Log 寫回到SD卡. 所以你還是可以存取這些 Log的. </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; white-space: pre-wrap;">使用 Log2RAM 也不是沒缺點, 如果你的 Pi 突然斷掉電源, 那麼你的 Log 就會完全消失了. </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">但仔細想想, 你上次查看 Log 是什麼時候呢? 如果不常使用 Log, 那麼這個 Log2RAM 就對你非常有幫助. 另外如果你的 Pi 的記憶體只有1GB或是512MB, 那可能就不合適來使用這個軟體的. </span></p><br /><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">半年前我曾經做過一個簡單的線上調查, 看看各位使用樹莓派時, 用什麼儲存裝置. </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">調查的結果有75%的朋友都是使用SD卡.
<span id="docs-internal-guid-b1ea6a15-7fff-eb4f-978b-610b1b249622"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="border: none; display: inline-block; height: 221px; overflow: hidden; width: 624px;"><img height="221" src="https://lh4.googleusercontent.com/4OgN6Gt7RWhObZCK5-UXzupz_arJqfVlFpjji17fwgy6sMIsLTwDlKlM8B81af30Co803R2dFZkAQHdWMQs1Mtq0WyQ8qVDHv_HS2SXr9cBAStaUsJ9lXqoskwKUoFCBokDhf0yTngiEagK-0WwfFUY" style="margin-left: 0px; margin-top: 0px;" width="624" /></span></span></span>
那我們就開始今天的練習吧!
<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/GJtjG8aNS94" width="600" youtube-src-id="GJtjG8aNS94"></iframe></div><br />
<span id="docs-internal-guid-b40da6ab-7fff-1670-7adc-eb2186b3c42a"><h3 style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: left;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Step: </span></h3><ol style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">更新你的 Pi</span></p></li><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>sudo apt update</span></p></li><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>sudo apt full-upgrade</span></p></li></ul><li aria-level="1" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">安裝 rsync (用來同步兩地的資料)</span></p></li><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>sudo apt install rsync</span></p></li></ul><li aria-level="1" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">取得 Log2RAM</span></p></li><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>wget https://github.com/azlux/log2ram/archive/master.tar.gz -O log2ram.tar.gz</span></p></li></ul><li aria-level="1" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">使用 tar 來解壓縮</span></p></li><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>tar xf log2ram.tar.gz</span></p></li><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>cd /home/pi/log2ram-master</span></p></li><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>sudo ./install.sh</span></p></li></ul><li aria-level="1" dir="ltr" style="color: blue; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">先檢查system log 的大小</span></p></li><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="2" dir="ltr" style="color: blue; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>sudo du -sh /var/log 41M</span></p></li><li aria-level="2" dir="ltr" style="color: blue; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">先用3倍大小 = 120M</span></p></li></ul><li aria-level="1" dir="ltr" style="color: blue; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">重新開機</span></p></li><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>sudo reboot</span></p></li></ul><li aria-level="1" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">檢查 log2ram 是否正常運作</span></p></li><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">systemctl status log2ram</span></p></li></ul><li aria-level="1" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">如果想要檢查 log 怎麼辦呢? 把 log 寫回到 /var/log</span></p></li><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>log2ram write</span></p></li></ul><li aria-level="1" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">如果想要暫時停止或重新開始 log2RAM 怎麼辦呢?</span></p></li><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>log2ram stop</span></p></li><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>log2ram start</span></p></li></ul></ol><br /><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">以後任何程式有寫入Log 到 /var/log, 就會被寫入到RAM裡面 </span></p><br /><h3 dir="ltr" style="line-height: 1.38; margin-bottom: 4pt; margin-top: 16pt;"><span style="color: #434343; font-size: 14pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline;">如何設定 Log2RAM</span></h3><ol style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">使用 Nano 來編輯設定檔 log2ram.conf</span></p></li><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">>sudo nano /etc/log2ram.conf</span></p></li><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">找到 SIZE=40M, 看你係統的設定如果你的系統有產生很多少個話可以把設成120MB</span></p></li><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">PATH_DISK=”/var/log” 如果你還有其他的程式會時時寫入到SD, 可以在PATH_DISK後面加入分號, 再加入其它的路徑, 如: PATH_DISK=”/var/log; /var/mylog”</span></p></li><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">儲存後並退出</span></p></li><li aria-level="2" dir="ltr" style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">重新啟動樹莓派</span></p></li></ul></ol><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">想了解有哪些Log會寫入SD卡, 請到 /var/hdd.log/ 去看看有那些檔案被寫入. </span></p><div><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><br /></span></div></span>
</span></span>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-31466952815290920162022-07-03T14:50:00.002+08:002022-07-16T15:00:22.111+08:00App Inventor #5 無線搖控 ESP32-CAM APP (Part 2)<p> <span style="font-family: Arial; font-size: 11pt; white-space: pre-wrap;">大家好, 歡迎收看本週的Weekend project with Stonez56。 本周要進行的是 App Inventor 第5集 - “無線搖控 ESP32-CAM APP Part 2”! 這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, 相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿。</span></p><span id="docs-internal-guid-205493e5-7fff-fc3a-aea4-80897e8d5b11"><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">因內容較多, 本影片分為上, 下兩集. 本集為 App Inventor程式設計. </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">而上集為 UI 界面設計(</span><a href="https://youtu.be/x545mFSZWgg" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://youtu.be/x545mFSZWgg</span></a><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> ), </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">如果你還沒有觀看的朋友, 請記得先去看一下, 再回來看這一集</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">再前一集是ESP32 程式的說明在這: </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Arduino #35 使用 MQTT 無線搖控 ESP32-CAM 模組</span><a href="https://youtu.be/ECHBRdtV-yw" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://youtu.be/ECHBRdtV-yw</span></a><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">好, 那我們就開始吧今天的練習吧~</span></p><div><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">
<br /></span><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/J8b3zWX1FXM" width="600" youtube-src-id="J8b3zWX1FXM"></iframe></div><br /></div></span>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-27588653528848068322022-07-02T14:48:00.002+08:002022-07-16T15:00:31.004+08:00App Inventor #4 無線搖控 ESP32-CAM APP (Part 1)<p> <span style="font-family: Arial; font-size: 11pt; white-space: pre-wrap;">大家好, 歡迎收看本週的Weekend project with Stonez56。 本周要進行的是 App Inventor 第4集 - “無線搖控 ESP32-CAM APP Part 1”! 這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, 相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿。</span></p><span id="docs-internal-guid-3f7bb75c-7fff-a7ec-c84a-1d0db0664131"><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">因內容較多, 本影片分為上, 下兩集. 上集為 UI 界面設計, 下集為 App Inventor程式設計. </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">上次為大家示範了如何使用HTML + CSS + Javascript來寫網頁程式(Arduino #35 </span><a href="https://youtu.be/ECHBRdtV-yw" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://youtu.be/ECHBRdtV-yw</span></a><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">), 利用網頁版的MQTT來遠端搖控ESP32 , 收到了不錯的回響. </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">今天我們使用 App Inventor 2來開發遠端搖控的 APP來取代網頁版本. 在ESP32程式的撰寫不需做任何的改變, 因為只要 MQTT Topic 一樣, APP inventor 就可以發佈訊息到ESP32了! 超方便的!</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">App Inventor 使用 WebView 想串流影像時, 會出現: header fields are too long for the server to interpret. 這問題會在下集時, 跟各位說明. </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">另外, 針對 ESP32 C++上的程式說明, 請看 Arduino #35 </span><a href="https://youtu.be/ECHBRdtV-yw" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://youtu.be/ECHBRdtV-yw</span></a></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">好, 那我們就開始吧今天的練習吧~
</span></p><div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/x545mFSZWgg" width="600" youtube-src-id="x545mFSZWgg"></iframe></div><br /><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div></span>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-77886934557791054732022-06-18T14:52:00.019+08:002022-07-16T14:59:35.013+08:00Android #35 使用 MQTT 無線搖控 ESP32-CAM 模組<p> <span style="font-family: Arial; font-size: 11pt; white-space: pre-wrap;">大家好, 歡迎收看本週的Weekend project with Stonez56。 </span></p><span id="docs-internal-guid-75550741-7fff-c10e-77d5-6094839ad23b"><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">本周要進行的是 Arduino 第35集,"使用 MQTT 無線搖控 ESP32-CAM 模組”。這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, 相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿。好, 那我們就開始吧今天的練習吧~</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">!!! ESP32-CAM streaming 的程式是由這裡取得: </span><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span><a href="https://github.com/wjsanek/wjsanek/blob/main/Working_ESP32_CameraWebServer_V2_with_OTA.zip" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://github.com/wjsanek/wjsanek/blob/main/Working_ESP32_CameraWebServer_V2_with_OTA.zip</span></a></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> 這位高手把一大堆沒有用到的ESP32-CAM的程式移除, 所以我才有機會把程式寫成可以OTA.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">在 VScode 裡, ESP32-CAM 的模組, 設定如下:</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Board: ESP32 Wrover Module</span></p><ul style="margin-bottom: 0px; margin-top: 0px; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Upload Speed: 115200</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Flash Frequency: 80MHz</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Flash Mode: QIO</span></p></li><li aria-level="1" dir="ltr" style="color: red; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Partition Scheme: Minimal SPIFFS (1.9MB APP with OTA/190KB SPIFFS)</span></p></li></ul><br /><h3 dir="ltr" style="line-height: 1.38; margin-bottom: 4pt; margin-top: 16pt;"><span style="color: #434343; font-family: Arial; font-size: 14pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">本次學習的目標是能遠端遙控 ESP32-CAM, 所以會用到下列的程式</span></h3><ul style="margin-bottom: 0px; margin-top: 0px; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">ESP32-CAM - Camera 伺服器 串流影像</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Servo - 控制 SG90 伺服器擺動</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">ESPAsyncWifimanager - 隨時改變 Wi-Fi 設定</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">AsyncElegantOTA - FOTA - 隨時隨地的更新 firmware</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">MQTT - PubSubClient - 由ESP32-CAM 收送訊息</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Paho MQTT Javascript client - 由瀏覽器 收送訊息 / HTML 編寫</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></p></li></ul><br /></span><div style="text-align: left;"><span id="docs-internal-guid-70fb46e5-7fff-0155-0c47-e49ce521708a"><h3 dir="ltr" style="line-height: 1.38; margin-bottom: 4pt; margin-top: 16pt;"><span style="color: #434343; font-family: Arial; font-size: 14pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">本專案會用到下列的電子元件:</span></h3><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span></p><ul style="margin-bottom: 0px; margin-top: 0px; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">ESP32-CAM * 1</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">天線 * 1</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">SG90 Servo 伺服器 * 2 - 上下 & 左右擺動各一個</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">1000uf 電容一顆 * 1 - 過濾影像的水波紋</span></p></li><li aria-level="1" dir="ltr" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">杜邦線 * 4 - Power, GND, IO12, IO13</span></p></li></ul><br /><br /><br /><h3 dir="ltr" style="line-height: 1.38; margin-bottom: 4pt; margin-top: 16pt;"><span style="color: #434343; font-family: Arial; font-size: 14pt; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">參考資料:</span></h3><ul style="margin-bottom: 0px; margin-top: 0px; padding-inline-start: 48px; text-align: left;"><li aria-level="1" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Minimized ESP32 Camera Streaming code</span></p></li><ul style="margin-bottom: 0px; margin-top: 0px; padding-inline-start: 48px;"><li aria-level="2" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><a href="https://github.com/wjsanek/wjsanek/blob/main/Working_ESP32_CameraWebServer_V2_with_OTA.zip" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://github.com/wjsanek/wjsanek/blob/main/Working_ESP32_CameraWebServer_V2_with_OTA.zip</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span></p></li></ul><li aria-level="1" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">MQTT client PubSubClient V2.8 by Nick O'Leary</span></p></li><ul style="margin-bottom: 0px; margin-top: 0px; padding-inline-start: 48px;"><li aria-level="2" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><a href="https://github.com/knolleary/pubsubclient" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://github.com/knolleary/pubsubclient</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span></p></li></ul><li aria-level="1" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">AsyncElegantOTA</span></p></li><ul style="margin-bottom: 0px; margin-top: 0px; padding-inline-start: 48px;"><li aria-level="2" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><a href="https://github.com/ayushsharma82/AsyncElegantOTA" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://github.com/ayushsharma82/AsyncElegantOTA</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span></p></li></ul><li aria-level="1" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">MQTT Javascript Client by PAHO</span></p></li><ul style="margin-bottom: 0px; margin-top: 0px; padding-inline-start: 48px;"><li aria-level="2" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><a href="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span></p></li></ul><li aria-level="1" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">ESP32Servo</span></p></li><ul style="margin-bottom: 0px; margin-top: 0px; padding-inline-start: 48px;"><li aria-level="2" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: circle; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><a href="https://github.com/jkb-git/ESP32Servo" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://github.com/jkb-git/ESP32Servo</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> </span></p></li></ul><li aria-level="1" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">SG90 Gimbal STL file</span></p></li><li aria-level="1" style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><a href="https://www.thingiverse.com/thing:5388271" style="font-size: 11pt; text-decoration-line: none;"><span style="color: #1155cc; font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://www.thingiverse.com/thing:5388271</span></a><span style="font-family: Arial; font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">
</span></p></li></ul></span><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/ECHBRdtV-yw" width="600" youtube-src-id="ECHBRdtV-yw"></iframe></div><br /></div>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-30211328642362526002022-05-22T18:30:00.001+08:002022-05-23T18:41:22.037+08:00ESP32-CAM module not stable, black screen, disconnect all the time? (模組 影像串流一直斷線不穩 - 先檢查電阻)<p>I have bought two ESP32-CAM modules and doing a weekend project. However, the video streaming from these two ESP-32CAM modules are not stable and just constantly disconnect and get black screens after few minutes or even few seconds. It's quite annoying. After search and search, I found this article...</p><p><a href="https://randomnerdtutorials.com/esp32-cam-connect-external-antenna/">https://randomnerdtutorials.com/esp32-cam-connect-external-antenna/</a></p><p>If you have encountered similar issues on your ESP32-CAM modules, <span style="color: red;"><b>remember to check the location of the resistors.</b></span></p><p><b>Left:</b> External antenna resistor location</p><p><b>Right: </b>Internal antenna resistor location</p><p></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEicjvMyCit5kYw9Xg-E1JuO2-jPQRWFXLvFMxBRZtBOMK_6zx-i-zs4Za1otuGkj7MO1AbFhnpRUmrUziQvkLOfYujG5nNqxC_uWSGAQKDs6SRREHeg1_XG_aYDJzMmyvJnR72bfJw77IJumKpy42pUIZ-EbeZ8yyb6zWfwaWeaA9HoRq9SEXc" style="margin-left: auto; margin-right: auto;"><img alt="" data-original-height="564" data-original-width="1010" height="358" src="https://blogger.googleusercontent.com/img/a/AVvXsEicjvMyCit5kYw9Xg-E1JuO2-jPQRWFXLvFMxBRZtBOMK_6zx-i-zs4Za1otuGkj7MO1AbFhnpRUmrUziQvkLOfYujG5nNqxC_uWSGAQKDs6SRREHeg1_XG_aYDJzMmyvJnR72bfJw77IJumKpy42pUIZ-EbeZ8yyb6zWfwaWeaA9HoRq9SEXc=w640-h358" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Photo from the refereed website above. Thanks!</td></tr></tbody></table><p><br />Thanks for the vendor who sold me these two ESP32-CAM modules that put on these external antenna resistors for me....but at least tell me in advance. I was debug here and there for few days until I found out why! ha.. 😅</p><p></p><p><br /></p><p><br /></p><p>===中文版====</p><p>我買了2 個ESP32-CAM 模組, 搞不定影像串流一直斷線不穩定….直到看到這一篇! 找了外接天線來裝上後, 穩定多了, 不再斷線黑畫面. </p><p>如果你也遇到同樣的問題, <span style="color: red;"><b>記得先檢查 ESP32-CAM 上的天線電阻位置. </b></span></p><p><a href="https://randomnerdtutorials.com/esp32-cam-connect-external-antenna/">https://randomnerdtutorials.com/esp32-cam-connect-external-antenna/</a><br /><br />左側圖: 外接天線電阻<br />右側圖: 內接天線電阻</p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEicjvMyCit5kYw9Xg-E1JuO2-jPQRWFXLvFMxBRZtBOMK_6zx-i-zs4Za1otuGkj7MO1AbFhnpRUmrUziQvkLOfYujG5nNqxC_uWSGAQKDs6SRREHeg1_XG_aYDJzMmyvJnR72bfJw77IJumKpy42pUIZ-EbeZ8yyb6zWfwaWeaA9HoRq9SEXc" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="564" data-original-width="1010" height="358" src="https://blogger.googleusercontent.com/img/a/AVvXsEicjvMyCit5kYw9Xg-E1JuO2-jPQRWFXLvFMxBRZtBOMK_6zx-i-zs4Za1otuGkj7MO1AbFhnpRUmrUziQvkLOfYujG5nNqxC_uWSGAQKDs6SRREHeg1_XG_aYDJzMmyvJnR72bfJw77IJumKpy42pUIZ-EbeZ8yyb6zWfwaWeaA9HoRq9SEXc=w640-h358" width="640" /></a></div><br />但這老闆也太好心了, 給我的 2個模組都焊上了外接天線電阻...也沒有告訴我, 於是我一直 debug … debug … 再debug 就這樣花了好久時間~~ 😅<p></p><p><br /></p><p><br /></p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-70501249530606999632022-05-09T19:50:00.004+08:002023-01-15T09:34:28.282+08:00App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2)<p>本週我要進行教授的課程是 App Inventor 第二集。 “自己來寫mqtt APP Android & iOS都能用”.</p><p>這個影片適合初學者來觀看學習, 想拿來這個單元來學習 App Inventor 2 也是很 Ok 的! </p><p><span style="color: red;">~~ 更新 2023-01-15~~~~~~~~~~~~~~~~~~~~~~~~~</span></p><p>有少數朋友來詢問, 這個範例要怎麼連線, 所以我把 ESP32 + DH11 的連線方式寫在此分享:<br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhGv11jM52RPGppv_ydGGnKNwEPf4bGMwp6xsVtIvysOzpXcyK1a9r61mEFzCVNdeciB8HOzQH-OFeTgpz-X1Sw39Q4u3w4DtduSXII1rRjSKQxq9I0q6bPghPP65zAYdowZWxI_YVVNUQIwxOsyHpz9-7tS7kbJL6agmd5KOIfyRO2kGFUhtU" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="511" data-original-width="765" height="429" src="https://blogger.googleusercontent.com/img/a/AVvXsEhGv11jM52RPGppv_ydGGnKNwEPf4bGMwp6xsVtIvysOzpXcyK1a9r61mEFzCVNdeciB8HOzQH-OFeTgpz-X1Sw39Q4u3w4DtduSXII1rRjSKQxq9I0q6bPghPP65zAYdowZWxI_YVVNUQIwxOsyHpz9-7tS7kbJL6agmd5KOIfyRO2kGFUhtU=w640-h429" width="640" /></a></div><br /><br /><p></p><p>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p><p> </p><p>上次為大家介紹了 Android MQTT App - MQTTDash, 但是苦於沒有免費好用的 iOS MQTT Client, 那就用 App Inventor 2 來自己寫吧~ 據 App Inventor 2 官網資料, 它可以同步開發 Android & iOS App! 但是我沒有使用 iOS 手機, 有成功的朋友再來和大家回報一下, 謝謝! </p><p> </p><p>觀看本集後, 那要如何在 ESP32 上如何自己寫程式呢?</p><p>請看: Arduino #32 用一塊ESP32來學 IOT: </p><p><a href="https://www.youtube.com/watch?v=x3k_dZXua1I">https://www.youtube.com/watch?v=x3k_dZXua1I</a> </p><p><br /><br /></p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/kIONEfLO4sI" width="640" youtube-src-id="kIONEfLO4sI"></iframe></div><br /><p>本影片用到的程式碼:</p><p><a href="https://stonez56.blogspot.com/2022/04/android-34-esp32iot-android-learn-iot.html">https://stonez56.blogspot.com/2022/04/android-34-esp32iot-android-learn-iot.html</a> </p><p><br /></p><p>影片中有錯字更正, 不然收不到溫溼度喔~~</p><p>Typo here...</p><p>13:32 影片中口誤把 RWD (Responsive Web Design) 說成 RDW </p><p>33:49 Correction: stonez56/esp32s_temp </p><p>34:05 Correction: stonez56/esp32s_humd </p><p>35:27 Correction: stonez56/esp32s_temp </p><p>46:49 Correction: stonez56/esp32s_humd</p><p><br />App Inventor 程式碼提供在此, 以方便偵錯使用!</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2d3vUFEGjY5RB85kl8QVOcRYZ0vOB1QIATsr2EtMH05pc1UC-sac8mGBZmqc9dj9wtbtgvTv2Y9tzGjuqnJAqO6NAlf3BYMNdyTsZm--Cgsm_rALqdbRqvNllnYTL8DsXz6bG9FCqdMD3Cy8Ltwdr83-cdVCbcbG1XedeqfYO2M9OAGgFnWo/s1040/blocks-1.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1040" data-original-width="914" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2d3vUFEGjY5RB85kl8QVOcRYZ0vOB1QIATsr2EtMH05pc1UC-sac8mGBZmqc9dj9wtbtgvTv2Y9tzGjuqnJAqO6NAlf3BYMNdyTsZm--Cgsm_rALqdbRqvNllnYTL8DsXz6bG9FCqdMD3Cy8Ltwdr83-cdVCbcbG1XedeqfYO2M9OAGgFnWo/w562-h640/blocks-1.png" width="562" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3QyWw0l0LdaqDZG_LqPbclEtL9jGh8_7TiAyIMyh22y7D-iJUbmKN50_ZS2VycJJ8SiaciV03qbP_CufUudmY7VNJCwGqEApqyAxYnmequJPztwE9LgTY0fdxWnfKguNQarboLoInmp5MngE8vlw7WV8O6UesSafCTArC5ZqritEgqhVPLA/s969/blocks-2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="969" data-original-width="969" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3QyWw0l0LdaqDZG_LqPbclEtL9jGh8_7TiAyIMyh22y7D-iJUbmKN50_ZS2VycJJ8SiaciV03qbP_CufUudmY7VNJCwGqEApqyAxYnmequJPztwE9LgTY0fdxWnfKguNQarboLoInmp5MngE8vlw7WV8O6UesSafCTArC5ZqritEgqhVPLA/w640-h640/blocks-2.png" width="640" /></a></div><br /><p><br /></p><p>參考資料:</p><p>MIT App Inventor: <a href="https://appinventor.mit.edu/">https://appinventor.mit.edu/</a> </p><p>MQTT extension: <a href="https://ullisroboterseite.de/android-AI2-PahoMQTT-en.html">https://ullisroboterseite.de/android-AI2-PahoMQTT-en.html</a> </p><p>MQTT extension download: <a href="https://ullisroboterseite.de/android-AI2-PahoDown.html">https://ullisroboterseite.de/android-AI2-PahoDown.html</a> </p><p>Apple store download: <a href="https://apps.apple.com/tw/app/mit-app-inventor/id1422709355">https://apps.apple.com/tw/app/mit-app-inventor/id1422709355</a> </p><p><br /></p><p>如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可!</p><p><br /></p><p>影片時間軸:</p><p>00:00 Start</p><p>01:01 先到 MIT App Inventor 網站</p><p>01:50 導入 MQTT extension (外掛)</p><p>04:26 上傳App 所需要用的圖片</p><p>05:23 設置 Screen1</p><p>07:07 啟用可滾動樣式 - 可更容易排列元件</p><p>08:43 如何佈局螢幕</p><p>12:47 設置燈泡圖片</p><p>14:04 RWD設計, 元件皆以百分比來設定!</p><p>17:20 在標籤上顯示溫度/濕度</p><p>21:52 設置 MQTT 連接按鈕</p><p>24:56 將圖片設計成按鈕; 稍候方可點選!</p><p>25:26 設置 MQTT Extension (外掛)</p><p>27:31 點擊“Blocks”開始寫程式</p><p>30:10 MQTT連線狀態變更的設定</p><p>35:53 發布主題並打開/關閉燈泡</p><p>43:23 處理接收所訂閱的 topics</p><p>47:34 為 Android 生成 .apk 執行檔</p><p>49:30 如何在Apple 手機運行程式? (未實作! 慎入) </p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-1532435396206876512022-05-09T19:46:00.007+08:002022-05-09T22:27:34.087+08:00App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor)<p>~~更新~~</p><p>有網友留言, 兩個Global變數 "search_city" & "search_area" 沒有在影片中定義~ </p><p>剛剛把影片調出來看, 這兩個Global變數 "search_city" & "search_area" 的確沒有在影片中出現! 這兩周剪接這影片時, 可能被我不小心剪掉了, 請各位朋友自行加入這兩個變數. 謝謝darbertchang 提醒~ <br /><br />加入的方法可以參考這裡的作法喔: <a href="https://youtu.be/cEN9jAxf2VU">https://youtu.be/cEN9jAxf2VU</a></p><p>~~~~</p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/u5J4FJQ5UQQ" width="640" youtube-src-id="u5J4FJQ5UQQ"></iframe></div><br /><p><br /></p><p><br /></p><p>App Inventor #3</p><p>大家好, 歡迎收看本週的Weekend project with Stonez56. </p><p><br /></p><p> 本週我要進行教授的課程是 App Inventor 第3集。 “App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor 2)”. 這個影片適合初學者來觀看學習, 想拿來這個單元來學習 App Inventor 2 也是很 Ok 的! </p><p><br /></p><p>這幾天最熱門的話題就是快篩試劑何處買了! 到處都大排長龍, 有找了許多點也找不到~ 本集的 App Inventor #3 我們一起來做一隻 App 以縣市, 鄉鎮區來查詢什麼地方才能買到.</p><p><br /></p><p>這支App 主要是處理 .CSV 檔案來呈現 App 的資訊. 而這個資料是由政府資料開放平臺的- 配合辦理發放公費COVID-19家用快篩試劑社區定點診所名單 頁面下載的資料而來, 資料更新時間為 2022-04-26 20:16 算是很即時的資料~~ 不準不能怪我 Stonez56~~ (2022-5-6 17:09 又釋出新版資料, 格式不變, 一樣能用, 同學們記得下載新版來用)</p><p><br /></p><p>我採用下載 .CSV 檔案後, 上傳到 App 裡, 再處理 .CSV. 我們也可以直接即時下載 .CSV 來得最新即時的資料, 但是我觀察了幾天, 資料變化不快, 不需要每執行一次, 就去下載一次 .CSV 快浪費時間, 也浪費頻寬~ </p><p><br /></p><p>一起動手來寫 APP 吧~ </p><p><br /></p><p>如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可!</p><p><br /></p><p>影片時間軸:</p><p>00:00:00 開始</p><p>00:00:28 了解這次開發程式的功能</p><p>00:01:38 從政府開放資料平台獲取資料(.CSV)</p><p>00:02:18 使用 OpenStreetMap, 拾棄 Google Map</p><p>00:02:51 了解 .CSV 文件格式</p><p>00:04:25 設計 App 使用者界面</p><p>00:16:59 準備開始來寫 APP</p><p>00:36:34 介紹AI2 Companion App</p><p>00:40:39 如何建立並使用副程式(Procedure)</p><p>00:56:42 使用 ListUtils 擴展刪除重複項</p><p>01:09:29 如何分割/結合字串</p><p>01:25:40 使用副程式(Procedure)的好處</p><p>01:27:11 加入 OpenStreetMap 地圖畫面</p><p>01:28:09 設計 MapScreen 使用者介面</p><p>01:33:59 開始設計 MapScreen 程式</p><p>01:47:06 秘密挑戰~~ ;)</p><p>圖檔下載:<br /><br /><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYgZUEy98-C9Pk2dMlyfCtl7kzTxvHf7pa1HoLLw4wlCh-EIAuT1m3y9qLeEOgE8c6HpXSaxFurXBbmCn8LsZDepK_D-Qc3-XgY5dsHRdjFjTsKqhf8RiYQrHw-yYxWwaJfeQebEH1maGxSbNm3nUO2JpIgXdeKg9l1P78MOZUM9Ib89Hi1E/s512/rapid-test-icon.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYgZUEy98-C9Pk2dMlyfCtl7kzTxvHf7pa1HoLLw4wlCh-EIAuT1m3y9qLeEOgE8c6HpXSaxFurXBbmCn8LsZDepK_D-Qc3-XgY5dsHRdjFjTsKqhf8RiYQrHw-yYxWwaJfeQebEH1maGxSbNm3nUO2JpIgXdeKg9l1P78MOZUM9Ib89Hi1E/w200-h200/rapid-test-icon.png" width="200" /></a><br />rapid-test-icon.png</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjirsutgJu-B6sfFtxeWjzG_bakRvyyWu5l5ONSoC-gAHIdFXOmaN88e0d0Vg2KOCuRdjEAD9s8tVK5RgrHkvgZQGE_PlfRT3op9NTU5sUfFsWpoZR9jj6k1diVLbR2v44LMuCJZ984khjQTXiAFJ6Sh7qvuq5nKQrvVehVtNM_hcDIW1dK3qo/s853/rapid-test-big.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="853" data-original-width="634" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjirsutgJu-B6sfFtxeWjzG_bakRvyyWu5l5ONSoC-gAHIdFXOmaN88e0d0Vg2KOCuRdjEAD9s8tVK5RgrHkvgZQGE_PlfRT3op9NTU5sUfFsWpoZR9jj6k1diVLbR2v44LMuCJZ984khjQTXiAFJ6Sh7qvuq5nKQrvVehVtNM_hcDIW1dK3qo/w477-h640/rapid-test-big.png" width="477" /></a><br />rapid-test-big.png</div><br /><h4 style="text-align: left;">AI2 程式碼 (Screen 1):</h4><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1XgCWohgRhk6hjsQJZ7kgmmuCNqpiSvxustWwa0f20azWXwqXq_oR20EDaqAH6b5HxO8rmIXZfzpIq-5gYGK1tSqLbPvf5QimFVo4fitC5LC1flwTedJpHhtGD_YLDbaF5aYciRnvUXj-OX9carq1CADMSrjDSfih1lK81-wLp_o5bmWfQe8/s1022/Screen1-blocks-1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1022" data-original-width="718" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1XgCWohgRhk6hjsQJZ7kgmmuCNqpiSvxustWwa0f20azWXwqXq_oR20EDaqAH6b5HxO8rmIXZfzpIq-5gYGK1tSqLbPvf5QimFVo4fitC5LC1flwTedJpHhtGD_YLDbaF5aYciRnvUXj-OX9carq1CADMSrjDSfih1lK81-wLp_o5bmWfQe8/w450-h640/Screen1-blocks-1.png" width="450" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">變數定義 (Define Global variables)</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp4aB7O9S9HHYAoVUGZX9szBSnFms6rgM243U8fpBRBi5gUO-ic-oVQ1cbIg5bOUkpAzMzIUD4O98xBgEKqZBvjm0E-Jk1HOci2Qudvjg5HVyue3pa4hs2ow2tZQMFCKSPzok7MF5FbffGo-CcJ3pqoDQ8vdGw1B9y2m1qG6TqyEWQm059yFE/s962/Screen1-blocks-2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="962" data-original-width="953" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp4aB7O9S9HHYAoVUGZX9szBSnFms6rgM243U8fpBRBi5gUO-ic-oVQ1cbIg5bOUkpAzMzIUD4O98xBgEKqZBvjm0E-Jk1HOci2Qudvjg5HVyue3pa4hs2ow2tZQMFCKSPzok7MF5FbffGo-CcJ3pqoDQ8vdGw1B9y2m1qG6TqyEWQm059yFE/w634-h640/Screen1-blocks-2.png" width="634" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">產生查詢結果到 list view (Generate display item list)</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYPYybs0aH5zL0x9i3OXNuTMqgAQIzfV1z9P8iT_PQ3yOvMdRLQm0cRTV3VS6zdIR_wwgktYOvsFvgIhZLcUM4IUdWwcuafHEP-ameGd5jzkROXkcNCKeSfN8yWHmD5d_mPGJNjgGsomWN7SGbKfN4i9QQtpN9OPNoribUOEv7si1tCjF8RQ/s1088/Screen1-blocks-3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1088" data-original-width="749" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYPYybs0aH5zL0x9i3OXNuTMqgAQIzfV1z9P8iT_PQ3yOvMdRLQm0cRTV3VS6zdIR_wwgktYOvsFvgIhZLcUM4IUdWwcuafHEP-ameGd5jzkROXkcNCKeSfN8yWHmD5d_mPGJNjgGsomWN7SGbKfN4i9QQtpN9OPNoribUOEv7si1tCjF8RQ/w440-h640/Screen1-blocks-3.png" width="440" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Screen1 Initialize & process after read .csv file</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt_sI6b8X_w-M_ksulRdfNhpuVwsiU530wWJ15vivXDYPb8zYfTImIz7xIKyZ46qzWoHa3T22InR5G78HWk4sOaVlxQvTdCAELClqLRztCGUE6ANO1JJuDA_V6QLyu7pc1KHN18pON5y4NJTkm8OxC4CFDi3CPyZb74nrRo0xEZkxT-KZqr30/s1007/Screen1-blocks-4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1007" data-original-width="965" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt_sI6b8X_w-M_ksulRdfNhpuVwsiU530wWJ15vivXDYPb8zYfTImIz7xIKyZ46qzWoHa3T22InR5G78HWk4sOaVlxQvTdCAELClqLRztCGUE6ANO1JJuDA_V6QLyu7pc1KHN18pON5y4NJTkm8OxC4CFDi3CPyZb74nrRo0xEZkxT-KZqr30/w614-h640/Screen1-blocks-4.png" width="614" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">After picking of city & area / populate specific city & unique area</td></tr></tbody></table><br /><div><br /></div><h4>AI2 程式碼 (MapScreen):</h4><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVewouiEc9c0IqWMkV06HDHPhLODG_M8-7NwmhHlrPviPJzWWYUe0R0b7ftQ9b9vIBzSIeNoDkTkBKczLO8GLX66kk24UJoQG5YEIgkW48AwTMRIAl2AlT50KGTKZp1k-gj40F-nRax2IqgS8wo9zPCYPM4a9IfCR8CrtsLwKrGLOUfixFf2Q/s1225/MapScreen-blocks-1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1045" data-original-width="1225" height="546" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVewouiEc9c0IqWMkV06HDHPhLODG_M8-7NwmhHlrPviPJzWWYUe0R0b7ftQ9b9vIBzSIeNoDkTkBKczLO8GLX66kk24UJoQG5YEIgkW48AwTMRIAl2AlT50KGTKZp1k-gj40F-nRax2IqgS8wo9zPCYPM4a9IfCR8CrtsLwKrGLOUfixFf2Q/w640-h546/MapScreen-blocks-1.png" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">顯示結果在 OpenStreetMap 上 (Show results on the map)</td></tr></tbody></table><br /><div><br /></div><h4 style="text-align: left;"><div style="text-align: left;"><br /></div>參考資料:</h4><p>* 如何處理 .csv: <a href="https://www.youtube.com/watch?v=K2n98PYO90M">https://www.youtube.com/watch?v=K2n98PYO90M</a> </p><p>* TextUtils extension: <a href="https://community.appinventor.mit.edu/t/all-rescued-extensions-from-appybuilder-community/27169/47?page=3">https://community.appinventor.mit.edu/t/all-rescued-extensions-from-appybuilder-community/27169/47?page=3</a> </p><p> * 配合辦理發放公費COVID-19家用快篩試劑社區定點診所名稱、地址、座標</p><p><a href="https://data.gov.tw/dataset/150692">https://data.gov.tw/dataset/150692</a> </p><p>* Google Map 取得 Marker 要輸入信用卡資料了: </p><p><a href="https://developers.google.com/maps/documentation/maps-static/overview">https://developers.google.com/maps/documentation/maps-static/overview</a> </p><p>* APP 地圖使用: App Inventor 內建之 OpenStreet Map: <a href="https://www.openstreetmap.org/#map=8/23.611/120.768">https://www.openstreetmap.org/#map=8/23.611/120.768</a> </p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-81387086761915640282022-04-23T23:07:00.002+08:002022-08-14T20:00:06.257+08:00Android #34 用一塊ESP32來學IOT - Android手機也能通 (Learn IOT with an ESP32 / remote control w/ MQTTDash)
<pre><h2 style="text-align: left;">Android #34 用一塊ESP32來學IOT - Android手機也能通
Learn IOT with an ESP32 / remote control w/ MQTTDash</h2>
** ENGLISH closed captions is now available for this video **
Learn IOT with an ESP32 / remote control w/ MQTTDash APP
<h4 style="text-align: left;">Video timeline:</h4>00:58 Download MQTTDash App
01:29 Create an MQTT connection
03:20 Dashboard Design
04:17 Review subscriptions on MQTTLens
05:15 Enter subscription topics in MQTTDash
10:30 See the Demo on the phone
12:39 Modify ESP32 code accordingly
大家好, 歡迎收看本週的Weekend project with Stonez56。 本周是Android 第34集,"用一塊ESP32來學IOT - Android 手機也能通”。這個是一個專門為初學者來開發的一個系列。
繼上集之後, 有網友反應無法在手機上用 MQTTlens. 所以我們今天要把只能在電腦上使用的 MQTTLens 改成 MQTTDash 這支Android APP. 這樣子, 只要帶著手機, 我們就可真正隨時隨地的遠端控制IOT設備了~ 那我們就一起來學習吧。
Android MQTTDash App: <a href="https://play.google.com/store/apps/details?id=net.routix.mqttdash&hl=zh_TW&gl=US&showAllReviews=true">https://play.google.com/store/apps/details?id=net.routix.mqttdash&hl=zh_TW&gl=US&showAllReviews=true</a>
尚未看過這系列的朋友, 建議從這裡依序學習:
* 用一塊ESP32來學 IOT <a href="https://youtu.be/rjPU4YZG338">https://youtu.be/rjPU4YZG338</a>
* 溫溼度篇 <a href="https://youtu.be/x3k_dZXua1I">https://youtu.be/x3k_dZXua1I</a>
* Android App 也能通 <a href="https://youtu.be/0IjQOxD2j48">https://youtu.be/0IjQOxD2j48</a>
如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可!
影片時間軸:
00:00 開始
00:58 下載 MQTTDash APP
01:29 建立 EMQX MQTT 連線
03:20 儀表板設計
04:17 查看之前 MQTTLens 上的訂閱/發佈主題
05:15 在 MQTTDash 中加入訂閱/發佈主題
10:30 看實際手機+ESP32 展示
12:39 如何修改 ESP32 相應代碼
<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="300" src="https://www.youtube.com/embed/0IjQOxD2j48" width="640" youtube-src-id="0IjQOxD2j48"></iframe></div><br />
</pre>
<h4 style="text-align: left;">Source code:</h4>
<pre class="prettyprint linenums:1">/*
Basic ESP8266 MQTT example
This sketch demonstrates the capabilities of the pubsub library in combination
with the ESP8266 board/library.
It connects to an MQTT server then:
- publishes "hello world" to the topic "outTopic" every two seconds
- subscribes to the topic "inTopic", printing out any messages
it receives. NB - it assumes the received payloads are strings not binary
- If the first character of the topic "inTopic" is an 1, switch ON the ESP Led,
else switch it off
It will reconnect to the server if the connection is lost using a blocking
reconnect function. See the 'mqtt_reconnect_nonblocking' example for how to
achieve the same result without blocking the main loop.
To install the ESP8266 board, (using Arduino 1.6.4+):
- Add the following 3rd party board manager under "File -> Preferences -> Additional Boards Manager URLs":
http://arduino.esp8266.com/stable/package_esp8266com_index.json
- Open the "Tools -> Board -> Board Manager" and click install for the ESP8266"
- Select your ESP8266 in "Tools -> Board"
*/
#include <WiFi.h>
#include <PubSubClient.h>
#include <EasyButton.h>
#define LED 2 //built-in LED on ESP32
#include "DHT.h"
#define DHTPIN 23 // Digital pin connected to the DHT sensor
#define DHTTYPE DHT11 // DHT11
DHT dht(DHTPIN, DHTTYPE); // Initialize DHT sensor.
// Set up the temp / humidity update cycle
const int updateCycle = 5000;
// Update these with values suitable for your network.
const char *ssid = "Wi-Fi SSID";
const char *password = "Wi-Fi Password";
// Define your client ID on EMQX
String mqtt_ClientID = "stonez56_IOT_Station_";
// Define your topics to subscribe / publish
const char* sub_topic = "stonez56/esp32s";
const char* pub_led_topic = "stonez56/esp32s_led_state";
const char* pub_init_topic = "stonez56/esp32s_is_back";
const char* pub_temp_topic = "stonez56/esp32s_temp";
const char* pub_humd_topic = "stonez56/esp32s_humd";
// EMQX broker parameters
const char *mqtt_server = "broker.emqx.io";
const char *mqtt_userName = "emqx";
const char *mqtt_password = "public";
WiFiClient espClient;
PubSubClient client(espClient);
unsigned long lastMsg = 0;
#define MSG_BUFFER_SIZE (50)
char msg[MSG_BUFFER_SIZE];
char msg1[MSG_BUFFER_SIZE];
int value = 0;
void setup_wifi()
{
delay(10);
// We start by connecting to a WiFi network
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
randomSeed(micros());
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
}
void callback(char *topic, byte *payload, unsigned int length)
{
Serial.print("Message arrived [");
Serial.print(topic);
Serial.print("] ");
for (int i = 0; i < length; i++)
{
Serial.print((char)payload[i]);
}
Serial.println();
payload[length] = '\0';
String message = (char *)payload;
if (strcmp(topic, sub_topic) == 0)
{
if (message == "off")
{
digitalWrite(LED, LOW); //Turn off
client.publish(pub_led_topic, "off");
}
if (message == "on")
{
digitalWrite(LED, HIGH); //Turn on
client.publish(pub_led_topic, "on");
}
}
/* Switch on the LED if an 1 was received as first character
// if ((char)payload[0] == '1')
// {
// digitalWrite(BUILTIN_LED, LOW); // Turn the LED on (Note that LOW is the voltage level
// // but actually the LED is on; this is because
// // it is active low on the ESP-01)
// }
// else
// {
// digitalWrite(BUILTIN_LED, HIGH); // Turn the LED off by making the voltage HIGH
// } */
}
void reconnect()
{
// Loop until we're reconnected
while (!client.connected())
{
Serial.println("Attempting EMQX MQTT connection...");
// Create a random client ID
mqtt_ClientID += String(random(0xffff), HEX);
// Attempt to connect
if (client.connect((mqtt_ClientID, mqtt_userName, mqtt_password)))
{
Serial.print(" connected with Client ID: ");
Serial.println(mqtt_ClientID);
// Once connected, publish an announcement...
client.publish(pub_init_topic, "Hi, I'm online!");
// ... and resubscribe
client.subscribe(sub_topic);
}
else
{
Serial.print("failed, rc=");
Serial.print(client.state());
Serial.println(" try again in 5 seconds");
// Wait 5 seconds before retrying
delay(5000);
}
}
}
void setup()
{
//Start DH11 sensor
dht.begin();
pinMode(LED, OUTPUT); // Initialize the _LED pin as an output
digitalWrite(LED, LOW); //default ESP32 LOW is turn off
Serial.begin(115200);
setup_wifi();
client.setServer(mqtt_server, 1883);
client.setCallback(callback);
}
void loop()
{
if (!client.connected())
{
reconnect();
}
client.loop();
unsigned long now = millis();
if (now - lastMsg > updateCycle)
{
lastMsg = now;
float humidity = dht.readHumidity();
float temperature = dht.readTemperature();
// Check if any reads failed and exit early (to try again).
if (isnan(humidity) || isnan(temperature))
{
Serial.println(F("Failed to read from DHT sensor!"));
return;
}else{ // publish the message
snprintf(msg, MSG_BUFFER_SIZE, "%.1lf°", temperature);
snprintf(msg1, MSG_BUFFER_SIZE,"%.0lf%%", humidity);
Serial.print("Publish message: ");
Serial.println(msg);
client.publish(pub_temp_topic, msg);
client.publish(pub_humd_topic, msg1);
}
}
}
</pre>;Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-37763697967527967022022-03-27T21:32:00.005+08:002022-08-14T20:00:40.283+08:00Arduino #32 用一塊ESP32來學 IOT (#32 Learn IOT with MQTT + ESP32)<p>大家好, 今天和大家來分享, Arduino #32 用一塊ESP32來學 IOT (#32 Learn IOT with MQTT + ESP32) 這個影片很適合初學者來觀看學習. 影片內容主要是告訴大家, 只要手上有一塊 ESP32 和一台電腦, 就可以開始學習 IOT 了 ! 看過這個影片, 你會了解學習 IOT 一點都不難喔! 甚至可以延伸作法, 利用 MQTTlens 透過雲端EMQX來做遠端的控制! <br /><br /><br /></p><div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/x3k_dZXua1I" width="640" youtube-src-id="x3k_dZXua1I"></iframe></div><br />
<h3 style="text-align: left;">參考資料:</h3><ul style="text-align: left;">
<li>Pubsubclient library: <a href="https://github.com/knolleary/pubsubclient/blob/master/examples/mqtt_esp8266/mqtt_esp8266.ino">https://github.com/knolleary/pubsubclient/blob/master/examples/mqtt_esp8266/mqtt_esp8266.ino</a></li><li>Additional Boards Manager URL: <a href="https://arduino.esp8266.com/stable/package_esp8266com_index.json,https://dl.espressif.com/dl/package_esp32_index.json">https://arduino.esp8266.com/stable/package_esp8266com_index.json,https://dl.espressif.com/dl/package_esp32_index.json</a> </li><li>Source code: <a href="https://stonez56.blogspot.com/">https://stonez56.blogspot.com/</a></li>
</ul>
如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可!
<h3 style="text-align: left;">影片時間軸:</h3><div style="text-align: left;"><div><ul style="text-align: left;"><li>00:00 開始</li><li>00:29 什麼是 MQTT,它是如何運作的?</li><li>01:30 你的第一個IOT專案!</li><li>01:55 MQTT 程式:pubsubclient</li><li>02:40 Arduino IDE: 設定Additional Boards Manager URL</li><li>03:09 Arduino IDE 其它設定</li><li>03:48 從我的部落格中下載程式並貼在Arduino IDE</li><li>04:07 在程式中更改必要的設定</li><li>07:27 從 Chrome 瀏覽器啟動 MQTTlens</li><li>07:54 在 MQTTlens 新增 EMQX 連線</li><li>09:54 訂閱 ESP32上的兩個主題</li><li>11:19 從 MQTTlens 發布主題</li><li>12:45 本次主要內容摘要</li></ul></div></div><h3 style="text-align: left;">程式碼:</h3>
<br />
<pre class="prettyprint linenums:1">/*
Basic ESP8266 MQTT example
This sketch demonstrates the capabilities of the pubsub library in combination
with the ESP8266 board/library.
It connects to an MQTT server then:
- publishes "hello world" to the topic "outTopic" every two seconds
- subscribes to the topic "inTopic", printing out any messages
it receives. NB - it assumes the received payloads are strings not binary
- If the first character of the topic "inTopic" is an 1, switch ON the ESP Led,
else switch it off
It will reconnect to the server if the connection is lost using a blocking
reconnect function. See the 'mqtt_reconnect_nonblocking' example for how to
achieve the same result without blocking the main loop.
To install the ESP8266 board, (using Arduino 1.6.4+):
- Add the following 3rd party board manager under "File -> Preferences -> Additional Boards Manager URLs":
http://arduino.esp8266.com/stable/package_esp8266com_index.json
- Open the "Tools -> Board -> Board Manager" and click install for the ESP8266"
- Select your ESP8266 in "Tools -> Board"
*/
#include <WiFi.h>
#include <PubSubClient.h>
#include <EasyButton.h>
#define LED 2 //built-in LED on ESP32
// Update these with values suitable for your network.
const char *ssid = "WiFi-SSID";
const char *password = "WiFi-PASSWORD";
// Define your client ID on EMQX
String mqtt_ClientID = "stonez56_IOT_Station_";
// Define your topics to subscribe / publish
const char* sub_topic = "stonez56/esp32s";
const char* pub_led_topic = "stonez56/esp32s_led_state";
const char* pub_init_topic = "stonez56/esp32s_is_back";
// EMQX broker parameters
const char *mqtt_server = "broker.emqx.io";
const char *mqtt_userName = "emqx";
const char *mqtt_password = "public";
WiFiClient espClient;
PubSubClient client(espClient);
unsigned long lastMsg = 0;
#define MSG_BUFFER_SIZE (50)
char msg[MSG_BUFFER_SIZE];
int value = 0;
void setup_wifi()
{
delay(10);
// We start by connecting to a WiFi network
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
randomSeed(micros());
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
}
void callback(char *topic, byte *payload, unsigned int length)
{
Serial.print("Message arrived [");
Serial.print(topic);
Serial.print("] ");
for (int i = 0; i < length; i++)
{
Serial.print((char)payload[i]);
}
Serial.println();
payload[length] = '\0';
String message = (char *)payload;
if (strcmp(topic, sub_topic) == 0)
{
if (message == "off")
{
digitalWrite(LED, LOW); //Turn off
client.publish(pub_led_topic, "off");
}
if (message == "on")
{
digitalWrite(LED, HIGH); //Turn on
client.publish(pub_led_topic, "on");
}
}
/* Switch on the LED if an 1 was received as first character
// if ((char)payload[0] == '1')
// {
// digitalWrite(BUILTIN_LED, LOW); // Turn the LED on (Note that LOW is the voltage level
// // but actually the LED is on; this is because
// // it is active low on the ESP-01)
// }
// else
// {
// digitalWrite(BUILTIN_LED, HIGH); // Turn the LED off by making the voltage HIGH
// } */
}
void reconnect()
{
// Loop until we're reconnected
while (!client.connected())
{
Serial.println("Attempting EMQX MQTT connection...");
// Create a random client ID
mqtt_ClientID += String(random(0xffff), HEX);
// Attempt to connect
if (client.connect((mqtt_ClientID, mqtt_userName, mqtt_password)))
{
Serial.print(" connected with Client ID: ");
Serial.println(mqtt_ClientID);
// Once connected, publish an announcement...
client.publish(pub_init_topic, "Hi, I'm online!");
// ... and resubscribe
client.subscribe(sub_topic);
}
else
{
Serial.print("failed, rc=");
Serial.print(client.state());
Serial.println(" try again in 5 seconds");
// Wait 5 seconds before retrying
delay(5000);
}
}
}
void setup()
{
pinMode(LED, OUTPUT); // Initialize the _LED pin as an output
digitalWrite(LED, LOW); //default ESP32 LOW is turn off
Serial.begin(115200);
setup_wifi();
client.setServer(mqtt_server, 1883);
client.setCallback(callback);
}
void loop()
{
if (!client.connected())
{
reconnect();
}
client.loop();
/* unsigned long now = millis();
// if (now - lastMsg > 2000)
// {
// lastMsg = now;
// ++value;
// snprintf(msg, MSG_BUFFER_SIZE, "hello world #%ld", value);
// Serial.print("Publish message: ");
// Serial.println(msg);
// client.publish("stonez56/esp32s_button_pushed", msg);
// } */
}
</pre>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0tag:blogger.com,1999:blog-16399605.post-58559846727583991392021-12-31T16:25:00.003+08:002022-08-14T20:01:37.864+08:00#10.1 如何開機自動連接Google 雲端硬碟/ How to auto-mount Google Drive on boot<p style="text-align: left;"><br /></p><p style="text-align: left;"> <br /><br /><span style="background-color: white;"><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: white; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;">如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可!
</span><span style="color: #444444;"></span></span></p><div class="separator" style="clear: both; text-align: center;"><h1><span style="color: #444444;">#10.1 如何開機自動連接Google 雲端硬碟/ How to auto-mount Google Drive on boot</span></h1><span style="color: #444444;"><br /><br /></span></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #444444;"><iframe allowfullscreen="" class="BLOG_video_class" height="320" src="https://www.youtube.com/embed/wo9DhIFtXPI" width="600" youtube-src-id="wo9DhIFtXPI"></iframe></span></div><span style="color: #444444;"><br /><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"><br /></span></span><p></p><p><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;">大家好, 今天是2021的最後一天, 祝大家新年快樂!!</span></span></p><p><span style="color: #444444; font-size: 14px; white-space: pre-wrap;">在今年的最後天天, 來和大家分享 “一起來學樹莓派” 系列之 </span><span style="color: #444444; font-size: 14px; white-space: pre-wrap;">“如何開機自動連接Google 雲端硬碟/ How to auto-mount Google Drive on boot”</span></p><p><span style="color: #444444; font-size: 14px; white-space: pre-wrap;">之前的影片做了一片”#10 重要資料, 直接備份到Google雲端硬碟的影片https://youtu.be/GmyiPJ1cxvk , 卻忘了一個重要的程序, 就是如何開機後, 如何自動連接Google 雲端硬碟, 少了這個重要的步驟, 那每次重新開機都要下 rclone 指令來掛載Google drive 也是很麻煩的! 請務必先看之前的影片 #10, 不然會不容易了解此片的內容!</span></p><p><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;"> </span></span><span style="color: #444444; font-size: 14px; white-space: pre-wrap;">參考資料: </span></p><p></p><ul style="text-align: left;"><li><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;">* Raspberry pi Mount error: setting does not match unit name</span></span></li><ul><li><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;"><a href="https://unix.stackexchange.com/questions/283442/systemd-mount-fails-where-setting-doesnt-match-unit-name">https://unix.stackexchange.com/questions/283442/systemd-mount-fails-where-setting-doesnt-match-unit-name</a></span></span></li></ul><li><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;">* Rclone + Raspberry pi parameters</span></span></li><ul><li><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;"><a href="https://forum.rclone.org/t/raspberry-pi4b-4gb-config-help/11361/2">https://forum.rclone.org/t/raspberry-pi4b-4gb-config-help/11361/2</a> </span></span></li></ul><li><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;">* Rclone mount:</span></span></li><ul><li><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;"><a href="https://rclone.org/commands/rclone_mount/">https://rclone.org/commands/rclone_mount/</a></span></span></li></ul></ul><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;"></span></span><p></p><p><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;"><br /></span></span></p><h4 style="text-align: left;">home-pi-mnt-gdrive.mount (千萬別照抄...要依你 Rclone 設定來修改)</h4><blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px; text-align: left;"><div style="text-align: left;"><span id="docs-internal-guid-ad5cabf3-7fff-9b63-3927-f3710f9811dd"><span style="font-family: "Courier New"; font-size: 11pt; white-space: pre-wrap;">[Unit]</span></span></div><div style="text-align: left;"><span><span style="font-family: "Courier New"; font-size: 11pt; white-space: pre-wrap;">After=network.target</span></span></div><div style="text-align: left;"><span><span style="font-family: Courier New;"><span style="font-size: 14.6667px; white-space: pre;"><br /></span></span></span></div><div style="text-align: left;"><span><span style="font-family: "Courier New"; font-size: 11pt; white-space: pre-wrap;">[Mount]</span></span></div><div style="text-align: left;"><span><span style="font-family: "Courier New"; font-size: 11pt; white-space: pre-wrap;">Type=rclone</span></span></div><div style="text-align: left;"><span><span style="font-family: "Courier New"; font-size: 11pt; white-space: pre-wrap;">What=<span style="color: red;"><b>gdrive:rpi4</b></span></span></span></div><div style="text-align: left;"><span><span style="font-family: "Courier New"; font-size: 11pt; white-space: pre-wrap;">Where=<span style="color: #2b00fe;"><b>/home/pi/mnt/gdrive</b></span></span></span></div><div style="text-align: left;"><span><span style="font-family: "Courier New"; font-size: 11pt; white-space: pre-wrap;">Options=rw,allow_other,args2env,vfs-cache-mode=writes,config=<span style="color: #ff00fe;"><b>/home/pi/.config/rclone/rclone.conf</b></span>,cache-dir=/tmp</span></span></div><div style="text-align: left;"><span><span style="font-family: Courier New;"><span style="font-size: 14.6667px; white-space: pre;"><br /></span></span></span></div><div style="text-align: left;"><span><span style="font-family: "Courier New"; font-size: 11pt; white-space: pre-wrap;">[Install]</span></span></div><div style="text-align: left;"><span><span style="font-family: "Courier New"; font-size: 11pt; white-space: pre-wrap;">WantedBy = multi-user.target</span></span></div></blockquote><p><br /></p><p></p><ul style="text-align: left;"><li> <b style="color: red; font-family: "Courier New"; font-size: 14.6667px; white-space: pre-wrap;">gdrive:rpi4: </b><b style="font-family: "Courier New"; font-size: 14.6667px; white-space: pre-wrap;"><span style="color: #444444;">Google drive 上要掛載的資料夾</span></b></li><li><b style="color: red; font-family: "Courier New"; font-size: 14.6667px; white-space: pre-wrap;"><b style="color: #2b00fe;">/home/pi/mnt/gdrive: 對應的樹莓派上的資料夾</b></b></li><li><b style="font-family: "Courier New"; font-size: 14.6667px; white-space: pre-wrap;"><b><b style="color: #ff00fe;">/home/pi/.config/rclone/rclone.conf: </b><b><span style="color: #444444;">rclone 設定檔的位置!</span></b></b></b></li></ul><p></p><p><b style="color: red; font-family: "Courier New"; font-size: 14.6667px; white-space: pre-wrap;"><br /></b></p><p><span style="color: #444444;"><span style="font-size: 14px; white-space: pre-wrap;">如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可!</span></span></p><p><span style="background-color: white;"><span style="color: #444444;"><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;">影片時間軸:
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=wo9DhIFtXPI&t=0s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">00:00</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 開始
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=wo9DhIFtXPI&t=52s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">00:52</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 先閱讀 Rclone 文件
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=wo9DhIFtXPI&t=90s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">01:30</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 使用 ssh 程式來下達命令
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=wo9DhIFtXPI&t=138s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">02:18</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 遵守嚴格的磁碟掛載命名規則
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=wo9DhIFtXPI&t=197s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">03:17</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 解釋掛載檔案內容
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=wo9DhIFtXPI&t=456s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">07:36</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 不要忘記掛載文件要以 .mount 結尾
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=wo9DhIFtXPI&t=557s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">09:17</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 重新啟動以驗證自動掛載是否成功
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=wo9DhIFtXPI&t=619s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">10:19</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 沒有自動掛載的原因
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=wo9DhIFtXPI&t=739s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">12:19</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 重新啟動以再次檢查自動掛載
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" href="https://www.youtube.com/watch?v=wo9DhIFtXPI&t=792s" spellcheck="false" style="cursor: pointer; display: var(--yt-endpoint-display,inline-block); font-family: Roboto, Arial, sans-serif; font-size: 14px; overflow-wrap: var(--yt-endpoint-word-wrap,none); text-decoration: var(--yt-endpoint-text-regular-decoration,none); white-space: pre-wrap; word-break: var(--yt-endpoint-word-break,none);">13:12</a><span class="style-scope yt-formatted-string" dir="auto" face="Roboto, Arial, sans-serif" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 14px; margin: 0px; padding: 0px; white-space: pre-wrap;"> 教學內容總結</span></span></span></p>Stonezhttp://www.blogger.com/profile/00888027409890822638noreply@blogger.com0