述文老師學習網

在前一篇「Webduino Blockly 「積木方城市」：用 MQTT 打通所有 Webduino 開發板的「任督二脈」」文章中，介紹在 Webduino 中如何使用 MQTT 進行多個開發板間的訊息溝通，在這次的文章將再來探討，如何用 MQTT 做到真正 Webduino 網頁協同同步顯示裝置狀態！

在以下的 Webduino 官方 Demo 影片中，可以看到電腦與行動裝置畫面可以隨著 Webduino 的 RFID 裝置的切換，同步更新顯示！

https://youtu.be/OrTTr74UKgU


雖然透過核選開發板積木上的「協同控制」可以達到多個連線裝置同時控制 Webduino 開發板，但是，不同裝置上的畫面是各自獨立的，並不會隨著其中一個裝置的操控而同步將其他裝置上的畫面一併進行更新！如果想要達到 Webduino 官方 Demo 影片中的效果，只要用 MQTT 就可以完成喔！



一、先來看看使用 MQTT 協同同步顯示網頁的執行結果：



二、Blockly 程式說明：初始化設定與 MQTT 接收訊息的設定


三、Blockly 程式說明：點擊燈泡時的變數設定與 MQTT 傳送訊息的設定

四、Blockly 完整程式：加入 Smart 開發板與 LED 燈MQTT 點擊燈泡 Blockly 程式專案檔：https://blocklypro.webduino.io/#7nL15rvxpD
(需先登入 Webduino 雲端平台後，才能正確開啟！)


五、在 Blockly、行動裝置與客製作網頁頁面中同步控制 Smart 開發板與 LED 燈



※ 延伸閱讀：


Webduino Blockly 「積木方城市」：用 MQTT 打通所有 Webduino 開發板的「任督二脈」Webduino Blockly 「積木方城市」：雲端部署功能正式上線，全自動運行 Webduino 更方便！Webduino Blockly 「積木方城市」：如何將 Blockly 體驗版程式無痛轉移至 Cloud 雲端版？Webduino 動手做系列：冰棒棍水車小木屋Webduino 動手做系列：冰棒棍智慧小木屋Webduino 動手做系列：環保紙風車 + 冰棒棍基座Webduino Blockly 「積木方城市」：如何一次停用或啟用多個程式積木？Webduino Blockly 「積木方城市」：…

在這次暑假東海大學推廣中心的「兒童3D模型小小建築師」五天營隊課程中，特別規劃 3D Slash 「彎腰郵筒」的主題，讓同學練習以下的 3D Slash 技巧：

如何匯入外部 STL 模型如何利用「XYZ軸切割視圖」進行物件挖空的設計如何建立開關門的旋轉軸承設計如何手動建立 3D 列印用支撐架，讓 3D 模型列印過程避免因無支撐而失敗

學會這些技巧後，再配合可彎曲的吸管，就能讓這個郵筒自由改變角度囉！



※ 這個彎腰郵筒的尺寸有特別縮小到高度只有三公分，因為這個尺寸用 3D 列印時，只需要不到 20 分鐘的時間就能完成，能大幅減輕 3D 列印的時間，也讓同學很快就能看到設計的成品！


營隊課程中還加入了冰棒棍、紙板建立屋頂、小木屋與柵欄底座，並配合「Remove Image Background 免費雲端 AI 服務，不囉嗦！5 秒鐘自動完成人物去背(摳圖)！」，將自己喜歡的圖形去背後，彩色列印貼在紙板上剪下，就能輕鬆創作出具有立體效果又與 3D 列印結合的作品！

※ 為了加快同學製作的速度與精準度，在課前有準備一些用紙板做的模板，方便同學進行屋頂組裝、小木屋與底座的線條繪製，在簡報中有提到如何使用！












以下就是這次營隊作品「用 3D Slash + 吸管建立可自由改變角度與打開開口的彎腰郵筒！」教案簡報，供大家做為參考！



※ 同學小木屋與 Sweet Home 3D 作品：



※ 3D Slash 網站：https://www.3dslash.net/
彎腰郵筒原始設計來自 Thingiverse：https://www.thingiverse.com/thing:965409

彎腰郵筒原始檔與完成檔下載：
https://drive.google.com/open?id=1eLchEVDReNBROLKaqKbGrZCSvB_J2do7




一、3D Slash 如何匯入外部 STL 模型

二、如何利用「XYZ軸切割視圖」進行物件挖空的設計

※ 如果是自己建立新的模型，請記得在郵筒底下中間打出寬度與深度約 1公分的洞，讓吸管可以插入喔！

3D Slash 雖然好像只是像遊戲式的敲敲打打，但其實是可以真的透過 3D 設計及 3D 列印來完成一些作品的！

以下就是使用 3D Slash 建立 SG90 伺服馬達底座的過程，供大家做為參考！

※ 3D Slash 網站：https://www.3dslash.net/SG 90 伺服馬達底座「標準版」STL 檔案下載：
https://drive.google.com/open?id=1VhIbpVVU8pk2z1KgwDMN1hrfVJF1QaucSG 90 伺服馬達底座「可拆解版」：STL 檔案下載：
https://drive.google.com/open?id=16VZrzGdVcWdDv5Cuc__uzCBP2p1Pcevs
※ SG90 伺服馬達底座：標準版
↑ 滑鼠左鍵按住拖曳：旋轉模型、右鍵按住拖曳：平移模型
※ SG90 伺服馬達底座：可拆解版 製作可活動拆解的版本，讓使用者可以自行決定要把伺服馬達放左邊或右邊，也把底部的鏤空加大，讓伺服馬達的連接線可以放在 3D 模型的下方！





一、用 3D Slash 建立 SG90 伺服馬達底座的過程


二、改為可拆解式的 SG90 伺服馬達底座 

三、SG90 伺服馬達底座 3D 列印成品與動手組裝

※ 教學資料總整理：跟著 Webduino 一起 Smart 學習 https://sites.google.com/view/cfp-webduino-smart/Sweet Home 3D 教學總整理：https://sites.google.com/view/sweethome3d-tw/OBS Studio 虛擬攝影棚教學總整理：https://sites.google.com/view/obs-tw翻轉教學「現形記」教學總整理：https://sites.google.com/view/teachers-tools/
※ 延伸閱讀：3D 造型設計界的打擊樂團 - 3D Slash：不同於一般 3D 設計概念，用減法進行創作的 3D Slash 基本使用！Webduino 動手做系列：冰棒棍水車小木屋Webduino 動手做系列：冰棒棍智慧小木屋Webduino 動手做系列：環保紙風車 + 冰棒棍基座Webduino 動手做系列：用回收紙板 + 冰棒棍 + 3D 造型設計 + 3D 列印，更適合教學…

近來 Remove Image Background 針對原本比較陽春的線上影像編器改版，讓它更加有彈性、更人性化！我們一起來看看做了哪些的改善吧！

一、增加 Blur 效果 二、在背景影像與顏色的縮圖，可以看到即時合成的效果


三、更高的放大顯示倍率 四、可以回溯的歷史記錄
五、改善行動裝置上的影像放大縮小與橡皮擦、還原工具的流暢性



※ 教學資料總整理：跟著 Webduino 一起 Smart 學習 https://sites.google.com/view/cfp-webduino-smart/Sweet Home 3D 教學總整理：https://sites.google.com/view/sweethome3d-tw/OBS Studio 虛擬攝影棚教學總整理：https://sites.google.com/view/obs-tw翻轉教學「現形記」教學總整理：https://sites.google.com/view/teachers-tools/
※ 延伸閱讀：Remove Image Background 免費雲端 AI 服務全面進化：動物、植物、美食、生活用品…等 AI 都認得了，還在等什麼，趕快來幫忙出考題測驗一下囉！Remove Image Background 免費雲端 AI 服務再次進化，專業汽車去背一次搞定！Remove Image Background 免費雲端 AI 服務再次進化，解決最難的人像辨識後，又快馬加鞭推出物件去背功能了！Remove Image Background 免費雲端 AI 服務再進化，提供微調工具與即時背景合成！Remove Image Background 免費雲端 AI 服務，不囉嗦！5 秒鐘自動完成人物去背(摳圖)！Snipaste 與 Picpick 攜手合作 1+1，幫您一次搞定螢幕擷取、教學圖片、資料比對、便利貼！20181114 中興大學：海報設計懶人包，輕鬆應用沒煩惱(2018)Google搜尋透明點陣圖、向量圖關鍵字：「PNG」與「SVG」「拋棄式信箱」，你怎麼可以不使用的「關鍵字」呢？SVG 向量格式如何轉換成 PNG 透明點陣圖格式？Free online file converter 雲端服務輕鬆幫您搞定各種檔案格式的轉換！(包括Audio、Image、Video、壓縮檔、Ebook…等)…

3D Slash 免費線上 3D 造型設計，它用類似微軟 Minecraft 遊戲的方式，在一片加法製造的氛圍下，以「減法」敲磗塊的手法，讓使用者自行雕刻出心中的 3D 模型，且每個工具都會有不同的音效，使用時特別讓人有感覺呢！

※ 3D Slash 網站：https://www.3dslash.net/



↑ 3D Slash 官方 Demo 影片

一、免費註冊 3D Slash 帳號 雖然一開啟網頁，按下「CREATE NOW!」就可以使用部份工具，但是為了更完整的體驗，建議還是先註冊一個帳號，方便後續的使用與作品保存！



1.資料填寫完成後，請至您的 Email 信箱收取驗證信件！


2.點選信件中的啟用連結



3.在這裏就會看到系統自動產生的密碼，請務必記住此密碼。


如果想換成比較容易記憶的密碼，可以選按右上角的帳號名稱，再按下「CHANGE PASSWORD」。





二、3D Slash  建立新專案 按下紅色的「CREATE」後，就會出現如下圖的五種建立模型方式，建議可以先從最左邊的「Classic」經典立方體開始體驗。




三、3D Slash  工具的基本使用 以下我們先簡單介紹 3D Slash 所提供的「破壞與建設」工具、「投影機」工具以及「XY軸切割視圖的使用」，比較詳細的使用方式，可以參考下方的上課錄影影片！



選按「工具」圖示後，可以更換其他的工具：



 一次破壞一個立方體 一次建立一個立方體 一次破壞一排立方體 一次建立一排立方體