Skip to content
webduino 教學資源
  • AI 教學新趨勢Expand
    • AI 伴學小助教Expand
      • 使用教學
    • Python 思維工具
  • Web:BitExpand
    • Web:Bit
    • 凱比物聯網教室
  • Web:AI
  • 雲端平台Expand
    • 雲端平台
    • 其它元件
    • 專題應用
    • 更多產品Expand
      • 智慧插座 PLUS
      • 智慧插座
      • 智慧植栽
      • Smart 自走車
      • 智慧小屋
      • 其他教學
  • 精選課程Expand
    • 用 AI 融入教學
    • 用 AI 玩轉程式
    • 簡單入門物聯網
    • 打造專屬自走車
    • 與機器人共學
    • 科技鍵盤農夫
    • AR 虛實互動
    • 所有課程總覽 ✨
  • ✨ 部落格 ✨
webduino 教學資源
  1. Home
  2. docs
  3. 雲端平台
  4. 操控 Smart
  5. 按鈕開關 ( 控制顏色 )
2024 年 4 月 10 日
雲端平台
  • Folder icon closed Folder open icon雲端平台
  • Folder icon closed Folder open iconWebduino Smart
    • Smart 介紹
    • Smart 初始化設定
    • Smart 初始化設定 ( 未含 Device ID 燒錄 )
  • Folder icon closed Folder open icon其它開發板
    • 馬克一號 (介紹)
    • 馬克一號 ( 初始化設定 )
    • Webduino Fly ( 介紹 )
    • Webduino Fly ( 初始化設定 )
  • Folder icon closed Folder open icon平台介紹
    • Webduino 雲端平台
    • 註冊與登入
    • Device 裝置管理 ( 裝置認證 )
    • Device 裝置管理 ( 雲端更新 )
    • 兌換券 ( 領取與添加新功能 )
  • Folder icon closed Folder open iconWebduino Blockly
    • Blockly 程式積木
    • 使用 WebSocket 操控
    • 認識 Webduino Blockly
    • Webduino Blockly 基本操作
    • Webduino Blockly 特殊功能
  • Folder icon closed Folder open icon基本功能
    • 變數
    • 流程
    • 文字
    • 數學式
    • 列表
    • 邏輯
    • 迴圈
  • Folder icon closed Folder open icon進階功能
    • 控制台
    • 等待
    • 數值轉換
    • 鍵盤行為
    • 語音聲控
    • 語音朗讀
    • 行動裝置
    • MQTT
    • Telegram
  • Folder icon closed Folder open icon網頁互動
    • 文字、點擊、圖片
    • 顏色、按鈕、拉霸
    • 遙控器
    • Youtube
    • 影像追蹤
  • Folder icon closed Folder open icon資料庫
    • Google 試算表 ( 設定 )
    • Google 試算表 ( 儲存 )
    • Google 試算表 ( 讀取 )
  • Folder icon closed Folder open icon操控 Smart
    • 三色 LED
    • 三色 LED ( 色彩輪播 )
    • 光敏電阻
    • 光敏電阻 ( 色彩變化 )
    • 按鈕開關
    • 按鈕開關 ( 控制顏色 )
    • 按鈕開關 ( 控制 Youtube )
  • Folder icon closed Folder open iconDr.Smart
    • Dr. Smart
    • LED
    • 蜂鳴器
    • 蜂鳴器 ( 多人協奏 )
    • 按鈕開關 ( 控制蜂鳴器 )
    • 震動開關
    • LED 點矩陣
    • LED 點矩陣 ( 顯示距離 )
    • LED 點矩陣 ( 顯示溫度 )
    • 超音波偵測
    • 超音波 ( 倒車雷達 )
    • 超音波 ( 控制 Youtube )
    • 溫濕度偵測
  • Folder icon closed Folder open icon其他元件 ➚
  • Folder icon closed Folder open icon專題應用 ➚
  • Folder icon closed Folder open icon常見問題
操控 Smart

按鈕開關 ( 控制顏色 )

See More

Smart 開發板上內建一個微型按鈕開關,透過開關的三種行為:按下、放開和長按,可以控制三色 LED 燈的顏色,甚至將原本正在執行的迴圈暫停或啟動迴圈。

Webduino Blockly 操作解析

在畫面中放入開發板積木,開發板下拉選單選擇「Smart」,連線方式選擇「Wi-Fi」,填入 Device ID,在開發板內放入三色共陰 LED的積木 ( 腳位設定為紅 15、綠 12 和藍 13 ) 和上拉按鈕開關的積木 ( 腳位 4 )。

取得 Device ID、使用 IP 來進行 WebSocket 操控,請參考:Webduino Smart ( 初始化設定 )

Webduino Smart、三色燈與按鈕開關

一開始用按鈕的積木來測試最簡單的範例,當按鈕「按下」的時候,三色 LED 燈就會出現隨機的顏色,當按鈕「長按」,就會關閉三色 LED 燈,完成後填入裝置 Device ID,確認開發板上線,點選右上方紅色按鈕執行,接著按壓按鈕開關,就會看到三色 LED 燈發出不同顏色了。

隨機顏色功能在「基本功能 > 顏色」目錄下。

設定按鈕開關顯示三色燈顏色

除了基本的按鈕操控,我們也可以用按鈕開關來停止迴圈或開始迴圈,因為按鈕開關只有一個,所以必須透過一個會切換「真」與「否」的變數來判斷何時該停止迴圈,首先放入一個變數,命名為 a,將其初始值設定為「否」( 也就是迴圈停止狀態 ),接著在按鈕開關按下的時候,判斷如果是「否」,就切換為「真」,反之切換為「否」。

邏輯與真否的功能在「基本功能 > 邏輯」目錄下,此處不見得要用真或否,亦可使用 1 或 0 之類的數字判斷,總之必須要知道哪一個是對應迴圈停止,哪一個是對應迴圈開始。

利用邏輯積木設定按鈕動作

接著放入「無窮迴圈」的積木,無窮迴圈有兩種形式,一種是「當」,表示「當發生什麼事情」的時候會啟動迴圈,另外一種是「直到」,表示「直到發生什麼事情」的時候就會停止迴圈。

無窮迴圈的積木

在「無窮迴圈」積木下拉選單選擇「直到」,後面邏輯判斷放入「a 等於否」,也就是說如果按下開關的時候,a 切換為否,迴圈就會停止,不然就會啟動迴圈。迴圈內放入隨機顏色的積木,以及一個等待 0.5 秒的積木,注意!使用無窮迴圈一定要使用等待積木,不然可能會造成瀏覽器的效能被耗盡的情況。

無窮迴圈的功能在「基本功能 > 迴圈」目錄下,等待功能在「進階功能 > 等待」目錄下。

使用無窮迴圈與等待積木

最後放入「長按」的積木,在按鈕開關長按的時候,將 a 變成否,停止迴圈,同時把三色 LED 燈關閉。

放入長按按鈕開關積木

填入裝置 Device ID,確認開發板上線,點選右上方紅色按鈕執行,開始按壓按鈕開關,就可以控制顏色的播放,同時也可以暫停播放或關閉三色 LED 燈。

解答:https://reurl.cc/OM7Axr

相關參考

  • 範例解答:https://reurl.cc/OM7Axr
  • 範例完整程式碼:http://bin.webduino.io/yaleq/edit?html,js,output
  • Smart 三色 LED 燈教學文:Smart ( 三色 LED )
  • Smart 按鈕開關教學文:Smart ( 按鈕開關 )
分享

按鈕開關 ( 控制顏色 )

複製連結

Clipboard Icon

本篇內容由 Webduino 提供,感謝您的閱讀!

Webduino 教學資源

+886 7 3388511
[email protected]
806 高雄市前鎮區復興四路 2 號 4 樓 A10 室

教學資源

Web:Bit
Web:AI
雲端平台

部落格
常見問題
聯絡我們

相關網站

Webduino 官網
線上商城

程式積木平台

Web:Bit 教育版
Web:AI 程式積木平台
雲端平台

社群媒體

Facebook Facebook Group YouTube

Copyright © 2026 Webduino | All Rights Reserved.

Scroll to top
  • AI 教學新趨勢
    • AI 伴學小助教
      • 使用教學
    • Python 思維工具
  • Web:Bit
    • Web:Bit
    • 凱比物聯網教室
  • Web:AI
  • 雲端平台
    • 雲端平台
    • 其它元件
    • 專題應用
    • 更多產品
      • 智慧插座 PLUS
      • 智慧插座
      • 智慧植栽
      • Smart 自走車
      • 智慧小屋
      • 其他教學
  • 精選課程
    • 用 AI 融入教學
    • 用 AI 玩轉程式
    • 簡單入門物聯網
    • 打造專屬自走車
    • 與機器人共學
    • 科技鍵盤農夫
    • AR 虛實互動
    • 所有課程總覽 ✨
  • ✨ 部落格 ✨
Search