2023/01/02

Arduino #42集, “快速取得u8g2的字型代碼” (Get u8g2 unifont code quick & easy, u8g2 のフォント コードをすばやく取得する」です, u8g2용 폰트코드 빠르게 받아보기" 입니다)

歡迎收看Weekend project with Stonez56。 
本周是Arduino #42集, “快速取得u8g2的字型代碼”
我們將使用Stonez56 這個網站來快速取得字型代碼

目前為測試版: https://stonez56.com/u8g2/

這個 Stonez56 轉碼網站過人之處:

* 簡單易用用省時
* 自動移除重複字
* 產生極小的檔案 

使用方法簡單:

* 輸入你要轉換的字詞
* 按下送出
* 下載產生的字型代碼
* 存到 Arduino 專案目錄下
* 在你的主程式中, 用 include 帶進 字型.h 程式
* 用 u8g2.setFont(u8g2_font_unifont_myfonts) 

目前為測試版: https://stonez56.com/u8g2/




===========================
Stonez56 の Weekend プロジェクトへようこそ。
今週は Arduino #42 のエピソード「u8g2 のフォント コードをすばやく取得する」です。
Web サイト Stonez56 を使用して、フォント コードをすばやく取得します。

現在ベータ版:https://stonez56.com/u8g2/

この Stonez56 トランスコーディング サイトの優れた点:
*使いやすく、時間を節約
*重複する単語を自動的に削除
* 非常に小さいファイルを生成します

使いやすい:
*変換したい単語を入力してください
※押すと送信されます
* 生成されたフォント コードをダウンロードする
* Arduino プロジェクト ディレクトリに保存します。
* メイン プログラムで、include を使用して font.h プログラムを取り込みます。
* u8g2.setFont(u8g2_font_unifont_myfonts) を使用

現在ベータ版:https://stonez56.com/u8g2/


=============================
Stonez56과 함께하는 주말 프로젝트에 오신 것을 환영합니다.
이번주는 아두이노 #42편 "u8g2용 폰트코드 빠르게 받아보기" 입니다.
Stonez56 웹 사이트를 사용하여 글꼴 코드를 빠르게 얻습니다.

현재 베타 버전: https://stonez56.com/u8g2/

이 Stonez56 트랜스코딩 사이트의 장점:
* 사용하기 쉽고 시간을 절약
* 중복 단어 자동 제거
* 매우 작은 파일 생성

사용하기 쉬운:
* 변환하려는 단어를 입력하십시오
* 누르면 보내기
* 생성된 글꼴 코드 다운로드
* Arduino 프로젝트 디렉토리에 저장
* 기본 프로그램에서 include를 사용하여 font.h 프로그램을 가져옵니다.
* u8g2.setFont(u8g2_font_unifont_myfonts) 사용

현재 베타 버전: https://kidsgo.net/u8g2/

#arduino #u8g2 #font #lcd #display #weekendprojectwithstonez56 #diy #maker #oled #esp32 #esp8266 #stonez56 #fontgenerator #kidsgo.net #CJKfonts #CJK

2022/12/10

如何解決 ESPAsyncWebServer 錯誤 - undefined reference to `mbedtls_md5_starts' (Solving ESPAsyncWebServer - undefined reference to `mbedtls_md5_starts issues )




最近在使用 ESPAsyncWebServer 時, 發生了一個編譯的錯誤:

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'


看來是 ESPAsyncWebServer 的問題, 於是我到 Git Hub 找到了 ESPAsyncWebServer https://github.com/me-no-dev/ESPAsyncWebServer 從新下載, 更新了 Library 還是沒有辦法, 錯誤依然存在, 無法解決. 

經過了3個小時反覆搜尋, 發現這是 ESPAsyncWebServer 的一個 issue, 目前還沒有被修正. 

不過, 在底下有高手提出了解決方法:
找到 WebAuthentication.cpp 然在大約 72 行左右, 

modify in the library directory your_directory/Arduino/libraries/ESPAsyncWebServer-master/src/WebAuthentication.cpp  @line 72 with this (the comment are the old line ......)

只要把原來的後3行紅色註解掉(//), 加上4個藍色新程式碼, 即可以修正!

#ifdef ESP32
mbedtls_md5_init(&_ctx);
mbedtls_md5_update_ret (&_ctx,data,len);
mbedtls_md5_finish_ret(&_ctx,data);
mbedtls_internal_md5_process( &_ctx ,data);

// mbedtls_md5_starts(&_ctx);
// mbedtls_md5_update(&_ctx, data, len);
// mbedtls_md5_finish(&_ctx, _buf);


-----------ENGLISH-------------

When I tried to compile ESPAsyncWebServer with AsyncElegantOTA, the following error occured:

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'


It looked like the ESPAsyncWebsrver issue, so I went to GitHub to re-download ESPAsyncWebServer (https://github.com/me-no-dev/ESPAsyncWebServer ) 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.

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:

In line 72 of the WebAuthentication.cpp file:

modify in the library directory your_directory/Arduino/libraries/ESPAsyncWebServer-master/src/WebAuthentication.cpp  @line 72 with this (the comment are the old line ......)

Just comment these red in comment below and add the blue codes, then compile went fine without issues!

#ifdef ESP32
mbedtls_md5_init(&_ctx);
mbedtls_md5_update_ret (&_ctx,data,len);
mbedtls_md5_finish_ret(&_ctx,data);
mbedtls_internal_md5_process( &_ctx ,data);

// mbedtls_md5_starts(&_ctx);
// mbedtls_md5_update(&_ctx, data, len);
// mbedtls_md5_finish(&_ctx, _buf);

2022/12/04

App Inventor #11自己來寫 App - 骰子遊戲 (Dice Game)

大家好, 歡迎收看本週的Weekend project with Stonez56。 

本周要進行的是 App Inventor 第10集 -  自己來寫 App - 骰子遊戲

這個影片適合稍進階同學來觀看&學習, 想要越級挑戰的朋也也歡迎拿來這個單元來學習 App Inventor 2! 

這是一個學習任意組件的好範例, Android, iPad 都可以使用!




本次教學你可以學到:

 * 本集會使用到:

 * 感測器 (Sensor)

 * 變數應用 (Variables)

 * 清單的應用 (List)

 * 圖片的應用 (Image)

 * 為APP加上音音效 (Audio)

 * 亂數的應用 (Randomized)

 * 用任意組件 (Any component)

 * 程序的應用 (Procedure)


參考資料: 

App inventor 語法 & 使用方式: http://ai2.appinventor.mit.edu/reference/blocks/ 

音效來源: https://pixabay.com/ 

圖片製作:  https://figma.com 


如果你時間不夠, 也可以從以下的時間軸挑選想看的部份即可! 


影片時間軸: 

00:00 開始

00:24 骰子 App 示範

01:20 App 畫面的配置 / 素材上傳

04:39 App 程式設計

05:18 如何使用變數/變數種子

06:31 設定音效

11:54 如何使用任意元件

15:22 使用任意組件來移除重複的運算

16:26 把骰子元件放入清單中

23:11 使用任意組件 vs 未使用任意組件


App Inventor 相關教學影片:


* App Inventor #11自己來寫 App - 骰子遊戲 (Dice Game)

https://youtu.be/2d6Si6u8FVE


* App Inventor #10 集 自己來寫 APP YouBike 2.0 (下). 

https://youtu.be/Cli-_lUPjgU


* App Inventor #9 集 - 自己來寫 APP YouBike 2.0 (上) 

https://youtu.be/D78-eDRFiXM


*App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android) https://youtu.be/_HeM9GyVmIE


* App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available)  https://youtu.be/senjdb-cREY


* App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation) https://youtu.be/RfYi8h9y6kE


* App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) https://youtu.be/J8b3zWX1FXM


* App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2)

https://youtu.be/x545mFSZWgg


* App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor)

https://youtu.be/u5J4FJQ5UQQ


* App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2)

https://youtu.be/kIONEfLO4sI


* MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition)

https://youtu.be/msV4V6af6tA 

2022/11/06

Arduino #38 YouBike 2.0 餘車通知器 (Arduino #38 ESP32 1306 YouBik 2.0 remain notifier)

大家好, 歡迎收看本週的Weekend project with Stonez56。 

本周要進行的是Arduino 第38集 -  UBike 2.0 餘車通知器.



大多數坐捷運上下班的朋友, 一定有這樣的經驗:下班時,匆匆忙忙趕到捷運站,卻發現捷運站的Ubike已經都沒有了, 只好在那邊癡癡的等候.

如果下班之前, 看一下YouBike 2.0, 餘車通知器, 確定站點還有較多的Ubike, 這時候再過去牽車, 是不是很安心呢? 我們來看看怎麼做吧!


如果你時間不夠, 也可以從以下的時間軸挑選想看的部份即可! 

影片時間軸:

00:00 開始

00:43 UBike 2.0 餘車通知器使用方法

03:22 Google Sheet 設定

14:44 Google Sheet 發佈API設定

17:19 Google Script doPost(e) 程式解釋

20:27 Google Script doGet(e) 程式解釋

21:46 ESP32 程式解釋

26:51 ESP32 refreshYouBike2data (更新SHEET資料)

28:52 ESP32 goGetData 由Sheet取得資料

30:03 showUTF8String 顯示餘車資料


App Inventor 相關教學影片:

* App Inventor #11自己來寫 App - 骰子遊戲 (Dice Game)
https://youtu.be/2d6Si6u8FVE

* App Inventor #10 集 自己來寫 APP YouBike 2.0 (下).
https://youtu.be/Cli-_lUPjgU

* App Inventor #9 集 - 自己來寫 APP YouBike 2.0 (上)
https://youtu.be/D78-eDRFiXM

*App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android) https://youtu.be/_HeM9GyVmIE

* App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available)  https://youtu.be/senjdb-cREY

* App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation) https://youtu.be/RfYi8h9y6kE

* App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) https://youtu.be/J8b3zWX1FXM

* App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2)

https://youtu.be/x545mFSZWgg

* App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor)

https://youtu.be/u5J4FJQ5UQQ

* App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2)   https://youtu.be/kIONEfLO4sI

* MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition)
https://youtu.be/msV4V6af6tA 

2022/10/23

App Inventor 第10集 - 自己來寫 YouBike 2.0 APP (下集)

 大家好, 歡迎收看本週的Weekend project with Stonez56。 

本周要進行的是 App Inventor 第10集 -  自己來寫 YouBike 2.0 APP (下集), 這個影片適合初學者來觀看學習, 想拿來這個單元來學習 App Inventor 2 也是很 Ok 的!  

上集影片請點此: https://youtu.be/D78-eDRFiXM 




對了,如果你沒有看過上一集, 請記得到右上角這邊, 按一下先觀看上集再來看下集.  那相信看過上一集的朋友都在等待這一集呢!   這個是一個專門為初學者來開發的一個系列, 所以會講的比較詳細, 相信各位只要仔細收看內容並進行實作, 一定會收獲滿滿滿。好, 那我們就開始吧今天的練習吧~


本集目標:

* 資料由政府資料開放平臺即時更新

* 美化使用者介面 (加入 Splash)

* 加入 App 開機畫面

* 移動 maker 更加順暢

* 打開 App 自動讀入 Json

* 取得手機所在位置定位

* 顯示附近 YouBike 車輛數目 (比對 YouBike 2.0 App 數量)


使用位置感測器, 注意權限:

* 位置權限要授權給 MIT App Companion 

* 若是下載為 APK, 位置權限要授權給 APK

* GPS 精準要打開


如果時間不夠的朋友, 也可以從以下的時間軸挑選想看的部份即可! 

影片時間軸:

00:00 Start

00:37 本集可以學到什麼?

02:14 YouBike 2.0 App 示範

03:28 美化 YouBike 2.0 App

04:30 App 起始畫面 (Splash) 

14:25 直讀政府公開YouBike資料

22:34 設定位置感測器(GPS)

35:17 顯示所有站點及每一站點車輛數

47:54 在我位置做標記


上集影片請點此: https://youtu.be/D78-eDRFiXM 

App Inventor 相關教學影片: * MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition) https://youtu.be/msV4V6af6tA * App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2) https://youtu.be/kIONEfLO4sI * App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor) https://youtu.be/u5J4FJQ5UQQ * App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2) https://youtu.be/x545mFSZWgg * App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) https://youtu.be/J8b3zWX1FXM * App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation) https://youtu.be/RfYi8h9y6kE * App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available) https://youtu.be/senjdb-cREY *App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android) https://youtu.be/_HeM9GyVmIE


2022/10/16

App Inventor 第9集, 自己來寫 YouBike 2.0 APP (上集)

大家好, 歡迎收看本週的Weekend project with Stonez56。
本周要進行的是 App Inventor 第9集 - 自己來寫 YouBike 2.0 APP (上集) 
這個影片適合初學者來觀看學習, 想拿來這個單元來學習 App Inventor 2 也是很 Ok 的!



上集內容主要包括程式流程:
  1. 讀入 YouBike 2.0 JSON 資料並做先期處理
  2. 把所有地區送入, 清單選擇器按鈕
  3. 使用者選擇某一地區後
  4. 在清單顯示器內顯示所有的站點, 位置, 總共單車量, 剩餘單車量
  5. 移動地圖到所選的地點, 並呈現出 YouBike 圖示

下集內容包括: (製作中, 敬請期待~ 10/22 TBD)
  1. 資料由政府資料開放平臺即時更新
  2. 更新程式流程並且美化使用者介面
  3. 取得手機所在位置定位
  4. 顯示附近 YouBike 車輛數目
YouBike 2.0 資料是由政府資料開放平臺的下載而來的, 每幾分鐘便會做更新. 本程式會把 YouBike 2.0 json 資料下載到電腦上, 以節省去一直查詢政府雲端資料庫的時間.

參考資料:

如果你時間不夠, 也可以從以下的時間軸挑選想看的部份即可!


影片時間軸:

00:00 開始
00:21 取得 YouBike 即時資訊
01:04 Json 線上編排後讀取 (Json Parser Online)
02:20 YouBike 2.0 APP 成果展示
03:32 開始APP頁面設計
07:23 簡化資料方便偵錯
17:52 開始程式設計
18:29 讀取上傳檔案的位置以 // 表示
29:50 如何取得站別的資訊 (Json)
55:19 如何移動地圖到 YouBike 站點
1:02:15 如何顯示 YouBike 圖示

App Inventor 相關教學影片:

* MIT App Inventor 2 #1 - 語音辨識 (Voice Recognition) https://youtu.be/msV4V6af6tA * App Inventor #2 “自己來寫mqtt APP Android & iOS都能用” (Create MQTT Apps with App Inventor 2) https://youtu.be/kIONEfLO4sI * App Inventor #3 “自己來寫APP 快篩何處買?” (How to process .csv files in App Inventor) https://youtu.be/u5J4FJQ5UQQ * App Inventor #4 無線搖控 ESP32-CAM APP 上集 (Write ESP32-CAM remote APP 1/2) https://youtu.be/x545mFSZWgg * App Inventor #5 - “無線搖控 ESP32-CAM APP 下集 (Write ESP32-CAM remote APP 2/2) https://youtu.be/J8b3zWX1FXM * App Inventor #6 使用’ 繪圖動畫' 製作使用者介面 (App Inventor 2 UI design with Draw and Animation) https://youtu.be/RfYi8h9y6kE * App Inventor #7 ESP32 語音辨識控制 IOT 專案, 使用 IoT Essential Library Example (CC available) https://youtu.be/senjdb-cREY *App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧 (How to keep AI2 always connected for Android) https://youtu.be/_HeM9GyVmIE

2022/10/01

App Inventor #8 AI2 Companion 一直斷線怎麼辦? AI2 小技巧

大家好, 歡迎收看本週的Weekend project with Stonez56。

本周要進行的是 App Inventor 第8集 -   AI2 Companion 一直斷線怎麼辦?


在使用 App Inventor 時, 我比較喜歡是在手機上安裝 AI2 Companion 來測試 App 以確保App

的畫面設計與預期的相符合, 但是你是不是常常發生ai2 companion常常發生斷線的問題? 


斷線後, 你必須在App inventor裡, 重新產生QR Code, 掃描, 等待ai2 companion再次連線,

真的是很麻煩呢! 本集我們就來在Android手機上做一些設定讓ai2 companion永遠連線, 這樣子以後就很方便喔!


也可以從以下的時間軸挑選想看的部份即可! 


影片時間軸: 

00:00 開始

00:54 為什麼 AI2 會斷線?

01:31 Android 手機設定打開發人員選項

02:12 在版本號碼上點7次

03:04 打開螢幕不休眠選項