推出 Half Decent 咖啡秤網頁應用程式

Half Decent 網頁應用程式

這個系列展示了三個以純 JavaScript、HTML 和 CSS 建構的網頁應用程式。它們示範了透過 Web 藍牙低功耗（Web BLE）、Wi-Fi 和 Web USB 可使用的各種功能。這些應用程式將為您提供與 Half Decent 咖啡秤互動的全新方式。它們能直接在您的網頁瀏覽器中，提供用於品質控制、精準秤重和簡化落粉的強大工具。

體驗這些應用程式：即時示範

親身體驗我們的網頁工具。它們可在桌上型電腦和筆記型電腦的瀏覽器，以及 Android 手機和平板上運作。在 iPhone 和 iPad 上，只要您安裝免費的 Beacio 應用程式（此程式為 Safari 加入藍牙功能），即可在 Safari 中使用。任何裝置也可以透過咖啡秤的 Wi-Fi 連線。

秤重與儲存：您進行一般秤重工作的首選應用程式。在設定的時間範圍內精確測量物品，並輕鬆匯出結果以供分析或記錄。

品質控制助理：確保一致性的完美選擇。此應用程式可讓您重複秤量相同的物品，簡化資料追蹤和品質檢查。

落粉助理：透過專為達成精確且可重複測量而設計的直覺式介面，簡化您的落粉流程。

雞尾酒調製器 ：這個互動式應用程式將引導您完成製作知名《PDT Cocktail Book》中經典雞尾酒的所有步驟。

開始使用：如何連線與操作

將您的 Half Decent 咖啡秤連線至我們的網頁應用程式非常簡單。請依照以下步驟操作：

1. 檢查瀏覽器：

檢查瀏覽器至關重要。在電腦或 Android 上，請使用最新版本的 Google Chrome（版本 136 或更新版本）或 Microsoft Edge（版本 136 或更新版本）。在 iPhone 或 iPad 上，請安裝免費的 Beacio 應用程式並使用 Safari：在 iOS 上只有 Safari 支援擴充功能。

2. 開啟應用程式：

前往上方提供的任一個應用程式連結。

3. 啟用配對模式：

將您的 Half Decent 咖啡秤置於藍牙配對模式。

4. 透過應用程式連線：
  • 在網頁應用程式中點擊「連線」按鈕。
  • 將出現一個彈出視窗，列出可用的藍牙裝置。
  • 從清單中選擇「Decent Scale」。
    • 5. 確認連線：

    連線後，「連線」按鈕將變為紅色，並將文字變更為「中斷連線」。您也會在螢幕上看到咖啡秤的即時重量更新。

    6. 開始：

    點擊「開始」按鈕，並依照您所使用之應用程式的螢幕指示操作。

    使用 USB-C 連線：

    我們的應用程式也支援直接 USB-C 連線。若您選擇此方式：

  • 首先，透過 USB-C 傳輸線將您的裝置連接至 Half Decent 咖啡秤。
  • 接著，在您的裝置上安裝 CH34X 序列埠驅動程式。
  • 從下拉式選單中選擇 USB 連線，點擊「連線」，並從彈出清單中選擇「USB Serial」。
  • 連線後，即時重量更新將顯示在螢幕上。

    • 使用 Wi-Fi 連線（需要韌體 3.0.0）：

    Half Decent 咖啡秤現在使用 Wi-Fi 提供額外功能和連線能力。

  • 若要啟用 Wi-Fi 模式，請前往 HDS 設定選單並找到「Wi-Fi 設定」項目。

    • 您可以在該處啟用或停用 Wi-Fi，並檢視目前的 Wi-Fi 詳細資訊。

  • 若您切換 Wi-Fi 的開啟/關閉，必須重新啟動咖啡秤，新設定才會生效。

    • HDS 將開啟自己的 Wi-Fi，名為「Decent Scale」。其密碼保護為：'12345678'。

  • 連線至此 Wi-Fi 後，使用瀏覽器前往 hds.local 或 192.168.1.1 以變更 Wi-Fi 設定。

    • 前往 hds.local 頁面並輸入您的 Wi-Fi ID 和密碼，將 HDS 連線至您的家用 Wi-Fi（2.4 GHz）。

    重新啟動咖啡秤以套用新設定。請正確儲存您的 Wi-Fi 設定，並將您的 HDS 保持在訊號範圍內。否則，它將返回其自身的 Wi-Fi（Decent Scale），讓您可在需要時再次變更設定。

    目的與適用對象

    這些網頁應用程式服務於兩大目標：

  • 供咖啡秤使用者：我們的 Half Decent 咖啡秤工具實用且易於使用。它們強化了咖啡秤在日常工作中的功能。
  • 供開發人員：Web 藍牙和 Web USB 能力的真實世界示範，對於鼓勵探索和創新這些技術至關重要。

    • 這些應用程式非常適合：

  • Decent 咖啡機和/或 Half Decent 咖啡秤的擁有者：最大化您日常秤重和咖啡準備流程。
  • 品質控制專業人員：簡化秤重流程、提升一致性並簡化資料收集。
  • 開發人員與科技愛好者：在物聯網情境中探索 Web BLE 和 Web USB 的實務實作。

    • 供開發人員：技術深入探討
  • 這些網頁應用程式的程式碼可在 openscale 儲存庫 的 web_apps 目錄中取得。
  • 基礎：以標準 HTML、CSS 和 JavaScript 建構。
  • 樣式：Tailwind CSS 是實用優先的樣式設計方法，確保介面具備回應式且現代化。注意：Tailwind 是 CSS 框架，但其核心邏輯為純 JavaScript，避免使用笨重的 JS 框架。
  • 連線能力：
  • Web 藍牙 API（Web BLE）：可與 Half Decent 咖啡秤進行無線通訊。
  • Web USB API：提供替代的有線連線方式。
  • 瀏覽器相容性：請使用 Google Chrome（版本 136 或更新版本）或 Microsoft Edge（版本 136 或更新版本）、iOS，以及透過咖啡秤 Wi-Fi 連線的 Safari。
  • Wi-Fi（Websocket）： 將 Half Decent 咖啡秤升級至韌體 3.0.0，然後依照上述指示開啟。HDS 現在將透過 WebSocket 端點廣播重量資料並接收歸零指令。範例程式碼請見此處。此處。
  • 資料儲存：讀數和預設值等資料會儲存在瀏覽器的本機儲存空間中。使用者可將資料下載為 JSON 或 CSV 檔案。

    • 程式碼結構與關鍵模組

    此程式碼庫的設計旨在易於理解與調整。「秤重與儲存」和「落粉助理」功能採用模組化結構，而「品質控制助理」則採用單體式結構，提供可能更簡單的功能互動概覽。

    關鍵 JavaScript 模組及其角色：

  • scale.js：處理 BLE 協定、與 Half Decent 咖啡秤（HDS）的通訊，以及核心落粉模式功能。
  • constants.js：儲存用於 HDS 通訊的預先編程 10 位元組訊息和各種閾值。
  • state-machine.js：使用有限狀態機模型實作「落粉助理」和「品質控制助理」的核心邏輯。
  • export.js：管理將重量讀數和評估資料匯出為 CSV 或 JSON 檔案的功能。
  • presets.js：允許「落粉助理」和「品質控制助理」中的使用者將目標重量儲存為預設值，並由瀏覽器在本機快取。
  • ui-controller.js：管理 HTML 介面的更新和變更。
  • modules/connection：包含 BLE 和 USB 連線方式的特定實作。
  • modules/reconnecting-websocket.js/：一個簡單的模組，可協助您自動重新連線 websocket，若 Wi-Fi 訊號強度不足，建議使用。

    • 請參閱 Half Decent 咖啡秤程式設計師指南，以取得咖啡秤通訊協定的完整詳細資訊。

    開發環境設定

    請依照以下簡單步驟，取得本機副本並執行：

    1. 下載 web_apps 目錄： GitHub 不提供子目錄的直接下載。請使用專門的工具來進行。以下是幾個選項：
  • 使用如 DownGit 或 github1s 的網頁工具。
  • 前往該工具的網站。
  • 貼上 GitHub 上 web_apps 目錄的 URL：https://github.com/decentespresso/openscale/tree/main/web_apps
  • 依照工具的指示，將該目錄下載為 ZIP 檔案。
  • 解壓縮下載的 ZIP 檔案。這將建立一個 web_apps 資料夾。
    • 2. 進入專案目錄：

    cd web_apps/dosing_assistant

    3. 使用本機 HTTP 伺服器提供檔案：

    由於這些是使用 Web BLE 的網頁應用程式，它們必須透過 https:// 或 http://localhost 提供。

    您可以使用簡單的 NPX HTTP 伺服器或您偏好的任何其他本機伺服器。

  • 使用 NPX 的 http.server：

    • npx http-server -p 8000

    然後，開啟您的 Chrome 瀏覽器並前往以下任一網址：


    http://localhost:8000/weigh_save.html


    http://localhost:8000/dosing_assistant.html

    本專案為開放原始碼，我們強烈鼓勵開發人員探索、學習並為此程式碼庫做出貢獻。

    Half Decent 咖啡秤手冊：目錄

    #app #opensource #javascript #webweigh #halfdecentscale #bluetooth #usb #decentscale #weighing #wifi



  • 這是以下內容的翻譯： Introducing Half Decent Scale web apps


    john created 2025/05/30, john updated 2026/11/10