Webduino Blockly 「積木方城市」:用MQTT 做到真正 ...
文章推薦指數: 80 %
雖然透過核選開發板積木上的「協同控制」可以達到多個連線裝置同時控制Webduino 開發板,但是,不同裝置上的畫面是各自獨立的,並不會隨著其中一個 ...
跳到主要內容
WebduinoBlockly「積木方城市」:用MQTT做到真正Webduino網頁協同同步顯示裝置狀態
取得連結
Facebook
Twitter
Pinterest
以電子郵件傳送
其他應用程式
8月19,2019
在前一篇「WebduinoBlockly「積木方城市」:用MQTT打通所有Webduino開發板的「任督二脈」」文章中,介紹在Webduino中如何使用MQTT進行多個開發板間的訊息溝通,在這次的文章將再來探討,如何用MQTT做到真正Webduino網頁協同同步顯示裝置狀態!
在以下的Webduino官方Demo影片中,可以看到電腦與行動裝置畫面可以隨著Webduino的RFID裝置的切換,同步更新顯示!
https://youtu.be/OrTTr74UKgU
雖然透過核選開發板積木上的「協同控制」可以達到多個連線裝置同時控制Webduino開發板,但是,不同裝置上的畫面是各自獨立的,並不會隨著其中一個裝置的操控而同步將其他裝置上的畫面一併進行更新!如果想要達到Webduino官方Demo影片中的效果,只要用MQTT就可以完成喔!
一、先來看看使用MQTT協同同步顯示網頁的執行結果:
二、Blockly程式說明:初始化設定與MQTT接收訊息的設定
※20200817補充:在2019年Webduino已經修正MQTT預設積木如下圖,如果沒有要使用特定MQTT伺服器時,就不需要加入「連線至MQTT伺服器」積木,只要使用「MQTT」的第三個「當從my/topic收到訊息時…執行」積木,就會直接使用Webduino預設的MQTT伺服器來發送訊息!
三、Blockly程式說明:點擊燈泡時的變數設定與MQTT傳送訊息的設定
四、Blockly完整程式:加入Smart開發板與LED燈
MQTT點擊燈泡Blockly程式專案檔:https://blocklypro.webduino.io/#7nL15rvxpD(需先登入Webduino雲端平台後,才能正確開啟!)
五、在Blockly、行動裝置與客製作網頁頁面中同步控制Smart開發板與LED燈
※延伸閱讀:
WebduinoBlockly「積木方城市」:用MQTT打通所有Webduino開發板的「任督二脈」
WebduinoBlockly「積木方城市」:雲端部署功能正式上線,全自動運行Webduino更方便!
WebduinoBlockly「積木方城市」:如何將Blockly體驗版程式無痛轉移至Cloud雲端版?
Webduino動手做系列:冰棒棍水車小木屋
Webduino動手做系列:冰棒棍智慧小木屋
Webduino動手做系列:環保紙風車+冰棒棍基座
WebduinoBlockly「積木方城市」:如何一次停用或啟用多個程式積木?
WebduinoBlockly「積木方城市」:用Bit九軸加速器玩「拋拋剪刀石頭布」與「擲骰子」
WebduinoBlockly「積木方城市」:如何利用「iframe顯示網頁」自有積木,免用任何網頁語法就能輕鬆在Blockly中動態顯示「Google統計圖」?
WebduinoBlockly「積木方城市」:如何利用「使用自有積木」找回失落的「Google地圖」積木「拼圖」?
Webduino太陽能照明與智慧植栽澆灌實作@台北市螢橋國中
Webduino模擬器「瘋」神榜:用伺服馬達+按鈕學旋轉角度控制與使用者資料輸入,看誰的角度「眉角」最神準!
Webduino模擬器「瘋」神榜:用三色LED幫交通警察控制紅綠燈、學函數(流程)
Webduino模擬器「瘋」神榜:用LED點矩陣+按鈕+蜂鳴器模擬擲骰子、認識等待、聲音播放與停止積木
跟著Webduino一起翻轉IoT物聯網:什麼,連測試的Blockly積木都懶得寫?那就使用「載入範例積木」功能吧!
Webduino模擬器「瘋」神榜:用LED點矩陣學陣列應用、玩賓果(進階版:可記錄與顯示已抽取號碼、Blockly程式註解)
Webduino模擬器「瘋」神榜:用LED點矩陣學小綠人動畫與分鏡設計
跟著Webduino一起翻轉IoT物聯網:杜邦線使用PK賽「張君雅小妹妹麵條餅」一排一排V.S「模範生點心麵」獨立麵條式一條一條?
Webduino模擬器「瘋」神榜:用LED燈+蜂鳴器+超音波完成「倒車雷達」、學「多重邏輯判斷」
Webduino模擬器「瘋」神榜:用「多顆LED霹靂燈」學列陣與多重迴圈
Webduino模擬器「瘋」神榜:用「多顆LED霹靂燈」學變數命名與迴圈
Webduino模擬器「瘋」神榜:模擬器為什麼無法「模擬」出結果?
Webduino模擬器「瘋」神榜:用「如來神掌」玩超音波感測器!
跟著Webduino一起翻轉IoT物聯網:線上模擬器為何無法做元件的「連線」?
20170630嘉義女中:用WebduinoFly開發板,一起High翻IoT物聯網
什麼?Webduino也能玩假的?Webduino最新推出的Arduino模擬器,讓您也能「弄假成真」!
GMT檢測語言中文簡體中文繁體日語英語韓語中文簡體中文繁體日語英語韓語語言功能限200個字符選項:歷史:反饋:Donate關閉
Webduino
WebduinoBlockly「積木方城市」
取得連結
Facebook
Twitter
Pinterest
以電子郵件傳送
其他應用程式
留言
這個網誌中的熱門文章
1110816屏東縣資訊教育資源中心:Canva教育版在教材製作與互動簡報的應用!線上研習直播影片
8月16,2022
在這次的Canva上下午的研習上,除了介紹Canva基本的使用、Canva簡報設計模式、影片剪輯模式、最新的白板應用、了解如何整合不同的素材、雲端服務,製作更具特色的內容加入Canva設計專案中!也一併將Canva升級成教育版後,如何新增多個班級、邀請同學加入、作業指派與審核等完整介紹,希望能讓Canva成為老師教學上不論在簡報設計、卡片製作、影片剪輯…等,全方位的最佳幫手!😊為了這次整天六小時的研習,特別再撰寫了三篇Canva的應用文章,讓整個Canva教學更全面!你Canva了沒?如何使用Draw繪圖與Photopea自製Canva「邊框」遮罩,滿足挑剔的你!你Canva了沒?使用Photopea圖層遮罩與布偶彎曲調整姿勢,製作大頭照+卡通身體造型素材你Canva了沒?新推出的白板功能具有無限大互動白板與多頁內容:線上討論、協同共編、專案管理、心智圖發想、資料搜集整合都適合!※Canva教育版的雲端空間已經從之前的100GB升級到1TB囉!※簡報檔案:※0816上半場Youtube直播影片段落:01:研習正式開始,開啟Canva簡報與加入OHA雲端教室https://youtu.be/-Qwh3g-FDfs?t=23602:Canva應用介紹與如何升級為教育版https://youtu.be/-Qwh3g-FDfs?t=65903:簡報設計從喜歡的範本開始https://youtu.be/-Qwh3g-FDfs?t=163204:加入網頁、影片、QRCode、表格資料超Easyhttps://youtu.be/-Qwh3g-FDfs?t=254205:了解Canva設計原則:先「整體」後「個別」,就能快速上手!https://youtu.be/-Qwh3g-FDfs?t=400706:Canva內建影像去背與RemoveBG雲端去背應用https://youtu.be/-Qwh3g-FDfs?t=486907:使用Emoji進行猜猜我是誰https://youtu.be/-Qwh3g-FDfs?t=626808:Canva融入雲端服務與免費圖庫介紹https://youtu.be/-Qwh3g-FDfs?t=6515
...............................繼續閱讀全文內容
剪映好用的字幕「簡體轉繁體」工具在這裏,別再找錯了!
2月26,2022
剪映的Windows/MAC電腦版免費影片剪輯軟體目前在網路上非常火紅,不僅具備影片剪輯的基本功能,包括子母畫面、藍綠幕去背…等商業軟體的功能也都包含在裏面,更重要的是它在字幕的「智能辨識」方面,真的非常強大,大大減輕製作影片字幕的工作量。
不過,目前剪映只有提供簡體中文字幕,無法直接將轉換為繁體中文,因此就有網友提供「簡體轉繁體」相關工具,例如透過下載特定字型、尋找簡映工作資料夾…等,但是這些方法的步驟比較麻煩,如果想要比較簡單的方式,可以參考今天介紹的這個「剪映字幕工具箱」喔!※20220613更新剪映3.0開始支援「字幕」的匯出與匯入,以下文章中介紹的簡繁轉換工具僅適合舊版2.X,在3.0之後的版本使用,反而會造成剪映軟體無法正確讀取字幕檔案,而造成閃退的情形!以下是剪映3.0字幕簡繁轉換的方式:1.先將剪映產生的簡體字幕導出為SRT文字檔2.以記事本或其他文字編輯器開啟SRT檔案,透過簡繁轉換線上工具,將簡體字轉換為繁體字,貼回SRT檔案並儲存3.先刪除原本的字幕,再透過「本地字幕」將繁體字幕SRC檔案匯入,加入到下面的時間軸內一、剪映官方網站剪映軟體安裝後只有簡體語系,不過,軟體的操作方式與一般常見的影片剪輯軟體都非常的接近,很容易上手的!https://lv.ulikecam.com/將影片加入下方的時間軸後,就可以選按「文本/智能字幕/開始識別」,進行AI語音轉文字註:目前剪映軟體中所提供的「素材」、「字型」、「範本」…等檔案,很有可能會有版權上的問題,因此,建議大家避免使用,以減少可能產生的侵權問題!二、剪映字幕工具箱剪映字幕工具箱是由「愈來愈美」這位網友開發,目前有兩個版本,由於新版本需要安裝Java環境,所以我個人是比較推薦使用舊版本,不需安裝,只要下載後就可以執行,相對簡單容易使用。
A.剪映字幕工具箱2.0版:https://github.com/jackychu0830/jy-srt-tools有字幕簡體轉繁體、匯出SRT字幕檔、更換剪映中的專案封面圖片、編輯字幕與匯入字幕功能,但是需要安裝Java環境。
作者的教學影片:https://youtu.be/td1EO3I1jJA B.剪映字幕工具箱舊版本:https:
...............................繼續閱讀全文內容
全民學3D就從Blender3D開始:Blender3D中文化設定、認識視窗介面與學習資源
3月07,2021
Blender3D屬於免費開源的全功能3D軟體,可以使用在個人或是商業用途,媲美3DSMax、MAYA…等傳統大型3D軟體,可以運行於不同的系統平台:Windows(有安裝版與可攜式版)、MAC、Linux,而且檔案大小不到200MB,是目前網路上相當火紅、社群最活躍的3D模型製作、3D動畫、2D動畫與視訊剪輯軟體!繼之前介紹過的Photoshop3D、AdobeDimension、SweetHome3D…等簡單容易入門3D軟體之後,想要擁有更多客製化、更完整的3D功能,Blender3D絕對是一個很不錯選擇!Blender3D官方網站:https://www.blender.orgBlender3D軟體下載:https://www.blender.org/download/Blender3D軟體自從2.8版開始,整體界面大改版,讓更多使用者可以更容易親近使用,台灣的使用者、教學文章、教學影片也逐漸增加,提高Blender3D在3D設計領域的能見度與接受度! 一、Blender繁體中文語系設定Blender3D已經內建繁體中文,讓初學者在剛開始學習時,減少不少語言的障礙。
二、調整Blender3D界面解析度縮放,讓選單更易閱讀Blender3D有一個不同於一般軟體的設定:界面解析度縮放,這對於選單超多、功能超多的軟體或是視力不佳的使用來說,真的非常貼心好用!在「偏好設定/介面」中,直接拖曳或輸入「ResolutionScale」的數值,就能即時看到選單縮放的情形! 三、Blender3D視窗介面Blender3D的界面比起其他軟體來說,確實是相對複雜許多,因此,需要一些時間來熟悉這些視窗與功能!TopBar置頂列:位於視窗的最上方,主要有檔案管理、使用者偏好設定、作業空間(WorkSpace)配置切換。
3DViewport:模型、場景在此製作。
開啟Blender,可以看到一個立方體(Cube)、一個點光源、一部攝影機。
Outliner大綱編輯器:可以從這裏進行場景中的物件、攝影機、燈光…等選取與控制。
PropertiesEditor屬性編輯器:這裏包括很多的設定,如物件屬性(Object
...............................繼續閱讀全文內容
免費影片剪輯「威力導演365基礎版」,不用輸入序號,只要註冊會員即可下載使用!
7月14,2020
以往威力導演從14版開始,即有釋出所謂的LTE特別版,在國外網站上提供限時下載的服務,下載後只要輸入一組共通的序號,就可以擁有約六成威力導演專業版的功能!但是,這個資訊並沒有在訊連的官方網站上顯示,所以多數人並不知道有這樣的版本!不過,現在這樣的版本除了正式登上訊連官方網站,威力導演18特別版(威力導演365基礎版)已經不再需要輸入序號,只要在訊連官方網站註冊會員,並啟用帳號後,就可以先試用30天的全功能,30天後變成免費的「威力導演365基礎版」。
以下馬上就來分享如何下載與安裝「威力導演365基礎版」!一、下載「威力導演365基礎版」「威力導演365基礎版」進入網頁後,按下「免費下載」,執行該程式就會開始下載「威力導演365基礎版」,檔案大小約521MB,需要等一點時間!二、註冊「訊連會員」安裝完成後執行,如果已經有註冊過,可直接輸入信箱與密碼登入,若尚未成為會員,則按下「快速註冊」,並至您的信箱收取認證信件啟用帳號,即可完成登入的動作!↑第一次執行時,會詢問是否要「最佳化您的GPU硬體加速功能」!↑前30天可以免費使用所有高級功能,試用到期後則回到「基本剪輯工具」的版本※使用「威力導演365基礎版」輸出影片時,與目前行動裝置上的APP應用程式一樣,會在輸出影片中加入如下圖右下角的浮水印喔!三、新的「訂閱型」服務除了一般的「永久授權」外,訊連現在也跟Adobe、微軟、Autodesk…等公司看齊,推出非常優惠的「訂閱型」服務!很適合同學專題或是臨時性的專案使用,與Adobe、微軟、Autodesk比較之下,負擔真的少很多!https://tw.cyberlink.com/products/powerdirector-video-editing-software/comparison_zh_TW.html以實用的角度來看,訊連「訂閱型」的方案,除了價格上優惠許多外,更重要的是享有更多持續更新的擴充內容與特效!「威力導演365」訂閱方案整年訂閱是165X12=1980元/年,即一個月165元/月,若是依月份訂閱則是580元/月。
前者等同是以升級版的價格,讓大家可以使用新的版本!後者則適合臨時性的專案需求!如果想要一次使用到更多軟體,
...............................繼續閱讀全文內容
ZoomIt螢幕畫筆終於在2022年7月推出6.0版,繼續榮登電腦教學最佳「隱形」助手!
8月08,2022
ZoomIt螢幕畫筆幾乎是所有電腦教學老師必備的「隱形」輔助工具,功能強大、檔案小、免安裝、完全免費,沒有任何多餘的面板出現在螢幕上,只要簡單使用幾個快速鍵,就可以滿足在螢幕上進行標註、寫字、放大…等的教學情境,真的是相當的方便!我自己也是ZoomIt的愛用者,使用ZoomIt螢幕畫筆的時間相當多年,只是它在4.52版停留了好多年都未曾再推出新版本,直到今年2月份推出5.0版,在7月份更推出6.0版,增加了錄影功能與一些原有功能的細部增修,如果您還沒有升級到最新版本,請記得更新一下喔!註:此次更新解決了之前使用即時螢幕放大互動與繪圖後,有時會發生滑鼠游標突然不見的bug。
一、下載與執行ZoomIthttps://docs.microsoft.com/zh-tw/sysinternals/downloads/zoomit下載並解壓縮後,直接執行ZoomIt.exe或是ZoomIt64.exe,第一次執行會出現同意授權的畫面,按下「Agree」即可,以後就不會出現該視窗。
二、ZoomIt與微軟內建的放大鏡有何不同雖然ZoomIt與微軟內建的放大鏡都有放大螢幕畫面的功能,但是後者僅具備螢幕放大功能,沒有螢幕繪圖的部份。
微軟內建的放大鏡的優點:已內建在Windows7以後所有版本中,只需要會使用它的快速鍵,就可以立即取得!以下有之前寫的介紹文章,也歡迎大家參考看看!原來鍵盤上的「Windows鍵」這麼重要!使用Windows一定要會的快速鍵!三、ZoomIt常用的功能與對應的快速鍵以下列出ZoomIt螢幕畫筆最常使用的幾個功能,我們也一起了解一下如何使用它的快速鍵。
註:必須在英/數模式下,快速鍵才發揮作用,如果發現快速鍵沒作用時,請檢查看看是不是在中文輸入的狀態。
1.螢幕繪圖(Ctrl+2)只要按下快速鍵,會自動將螢幕凍結截取,視訊畫面或是播放影片也會定格,並會進入螢幕繪圖模式:按住滑鼠左鍵:開始繪圖或寫字Ctrl+滑鼠滾輪前/後:調整畫筆粗細R/G/B/O/Y/P:切換顏色(紅/綠/藍/橘/黃/粉紅)E:清除畫面T:輸入英文/中文(按一下Shfit即可切換中英文)按住Shif
...............................繼續閱讀全文內容
跟著Webduino一起Smart學習
跟著Webduino邁向IoT高手之路
翻轉教學「現形記」
將述文老師所有相關的教學文章、教學影片與軟體,做一個有系統的整理,讓更多人可以一起「翻轉教學現場」,共創更優質的教學情境與學習體驗!
OBS虛擬攝影棚應用
用OBSStudio自動去背濾鏡,不用進虛擬攝影棚,研究室、你家就是最好的磨課師錄影場所!
3D設計跟你想的不一樣!
SweetHome3D免費開源室內設計顛覆您對3D設計的刻板印象
創用CC授權
本網站文章用「創用CC姓名標示-非商業性-相同方式分享4.0國際授權條款」授權。
相關網站
述文老師系列文章查詢
述文老師的Youtube教學頻道
述文老師Pinterest圖版
網站作品
述文老師教學電子報(舊網站)
述文老師FB粉絲專頁
述文老師的IG
免費軟體下載區
教育百科
聯絡表單
名稱
以電子郵件傳送
*
訊息
*
標籤
1Know+Google翻轉亮起來5
1Know翻轉學習27
3D設計跟你想的不一樣!16
打造您的雲端知識庫2
用GoogleEarth關心地球大小事16
用XMind心智圖練習規畫、學習的新思維3
用免費軟體提升工作效率17
你也可以輕鬆做個MotionGraphic動畫設計師研習課程4
免費設計資源47
免費軟體67
免費虛擬主機資源1
別讓你的學習不開心,一切就從開放課程+自主學習開始(MOOCs磨課師)1
音樂音效素材3
原來數位教材製作與錄影,一個人就能完成!18
海報設計懶人包,輕鬆應用沒煩惱3
您也可以這樣教,這樣學!用1Know進行翻轉學習!研習課程14
教室裏也有春天7
教學必備利器34
教學影片得來速21
善用雲端服務提升工作效率28
提升工作效率35
資安報報4
資策會課程4
跟著1Know改版,快樂開學備課去3
跟著Webduino一起翻轉IoT物聯網6
電腦常見問題7
網頁設計FAQ常見問題開講1
影像全記錄,用影片「剪」出精彩故事1
擁抱Google向前衝3
親子這樣說7
邁向Youtuber之路6
ActivePresenter數位教材這樣做3
AfterEffect54
AfterEffectFAQ常見問題開講16
Focusky創意簡報,用心智圖概念爆發您的簡報設計力!研習課程8
Google協作平台應用4
GoogleClassroom我的雲端教室5
google服務應用37
MOOCs磨課師(幕課)5
OBS虛擬攝影棚研習16
OBSStudio虛擬攝影棚開講31
Prezi雲端簡報大不同,顛覆簡報刻板印象3
SweetHome3D最Easy開講38
Webduino研習課程18
Webduino動手實作13
WebduinoBlockly「積木方城市」10
Webduino模擬器「瘋」神榜18
Youtube教學影音117
顯示更多
顯示較少
研習用Google協作平台
嶺東3D立體造形設計課程介紹
嶺東動態視覺設計課程介紹
嶺東AE與3DS課程介紹
中正大學教發中心
南投高商協同教學
東海推廣中心
封存
2022
42
八月
8
七月
8
六月
5
五月
8
四月
3
三月
1
二月
3
一月
6
2021
67
十二月
6
十一月
3
十月
3
九月
4
八月
8
七月
5
六月
8
五月
11
四月
6
三月
4
二月
4
一月
5
2020
75
十二月
7
十一月
6
十月
5
九月
3
八月
7
七月
4
六月
7
五月
7
四月
10
三月
6
二月
9
一月
4
2019
70
十二月
5
十一月
6
十月
9
九月
5
八月
8
3D造型設計界的打擊樂團-3DSlash:從樂高愛心型積木學習3DSlash多個模型組...
3D造型設計界的打擊樂團-3DSlash:投影機工具不能不知道的小技巧
WebduinoBlockly「積木方城市」:用MQTT做到真正Webduino網頁協同...
3D造型設計界的打擊樂團-3DSlash:用3DSlash+吸管建立可自由改變角度與...
3D造型設計界的打擊樂團-3DSlash:用3DSlash建立SG90伺服馬達底座
RemoveImageBackground免費雲端AI服務:讓線上影像編器更加有彈性、更...
3D造型設計界的打擊樂團-3DSlash:不同於一般3D設計概念,用減法進行創作的3D...
Windows10的游標箭頭終於有MAC風格:可自由改變大小、顏色!不用再擔心簡報或上課時,...
七月
8
六月
7
五月
5
四月
8
三月
3
二月
3
一月
3
2018
85
十二月
4
十一月
4
十月
9
九月
5
八月
15
七月
9
六月
6
五月
4
四月
7
三月
7
二月
5
一月
10
2017
126
十二月
5
十一月
12
十月
9
九月
6
八月
14
七月
20
六月
13
五月
9
四月
9
三月
12
二月
9
一月
8
2016
87
十二月
16
十一月
18
十月
10
九月
6
八月
7
七月
6
六月
4
五月
8
四月
6
三月
3
二月
1
一月
2
2015
20
十二月
2
十一月
3
十月
4
九月
1
八月
2
六月
2
五月
2
二月
2
一月
2
2014
8
十二月
1
十一月
1
十月
2
七月
2
六月
1
三月
1
2013
24
十二月
1
十一月
1
十月
2
九月
3
八月
2
七月
3
六月
3
五月
2
四月
1
三月
2
二月
2
一月
2
2012
86
十二月
1
十一月
2
十月
2
九月
1
八月
4
七月
1
六月
4
五月
19
四月
52
2010
14
七月
1
三月
6
二月
2
一月
5
2009
8
十一月
2
九月
6
顯示更多
顯示較少
網頁內容翻譯成各種語系
客戶服務專區
Q大頭手造禮物館
得趣公仔製作達人
授權轉載文章網站
映CG
延伸文章資訊
- 1(體驗版) Webduino Blockly 編輯器
顯示文字, 點擊燈泡, 控制圖片, 顏色調整, 按鈕行為, 拉霸操作, Youtube, 影像追蹤, 遙控器. 數值:90 拉霸:. 變數. 流程. 基本功能. 進階功能. 開發板控制. 發光元件.
- 2MQTT介紹與使用Webduino串聯、協同控制下所會遇到的問題
- 3Webduino 積木方程式:用MQTT 做到多裝置協同互動LED 燈控制
Aug 19, 2020 - 最近有某藝術學校同學詢問,想要與國外藝術表演者,透過網路連動兩盞燈,想了解Webduino 該如何達到這樣的效果! ↑ 同學設計的檯燈造型↑ 這位同學很 ...
- 4Webduino Blockly 「積木方城市」:用MQTT 做到真正 ...
雖然透過核選開發板積木上的「協同控制」可以達到多個連線裝置同時控制Webduino 開發板,但是,不同裝置上的畫面是各自獨立的,並不會隨著其中一個 ...
- 5啟芳出版社:跟著Webduino 一起Smart 學習 - Google Sites
本書內容將介紹Webduino 結合了程式的設計彈性與控制IoT 物聯網各項感測元件的能力,透過圖形化積木程式,就能以 ... 用MQTT 做到真正Webduino 網頁協同同步顯示裝置 ...