[{"data":1,"prerenderedAt":164},["ShallowReactive",2],{"portfolio-glancehud":3},{"id":4,"title":5,"body":6,"category":142,"cover":143,"date":144,"description":145,"extension":146,"featured":147,"links":148,"meta":150,"navigation":151,"path":152,"seo":153,"status":154,"stem":155,"tags":156,"__hash__":163},"portfolio\u002Fportfolio\u002Fglancehud.md","GlanceHUD",{"type":7,"value":8,"toc":133},"minimark",[9,14,18,25,28,31,37,48,54,58,92,95,101,107,117,120,123,130],[10,11,13],"h2",{"id":12},"為什麼做這個","為什麼做這個？",[15,16,17],"p",{},"起初的想法很簡單：做一個懸浮在螢幕角落的 HUD，顯示 CPU、記憶體之類的系統狀態。不過 AI 一下子就把基礎版做出來了，反而讓我覺得可以調高難度——",[15,19,20,21],{},"真正想解決的問題是：",[22,23,24],"strong",{},"怎麼讓這個 HUD 不只顯示系統資訊，而是能接收任何資料？",[15,26,27],{},"展場 demo、GPU 訓練監控、自訂腳本的輸出……都應該能直接推送到桌面上顯示，不需要重新編譯主程式。",[10,29,30],{"id":30},"核心設計",[15,32,33,36],{},[22,34,35],{},"鎖定模式 vs 編輯模式","：鎖定時滑鼠可以穿透視窗點擊底下的東西（真正的 HUD 體驗）；切換到編輯模式後可以拖放 Widget、調整順序。",[15,38,39,42,43,47],{},[22,40,41],{},"HTTP Push API（Sidecar 模式）","：對 ",[44,45,46],"code",{},"POST \u002Fapi\u002Fwidget"," 送 JSON 就能在 HUD 上新增\u002F更新一個 Widget，無需任何設定。第一次送帶 template 就自動註冊；10 秒沒有心跳自動標記離線、視覺灰階。",[15,49,50,53],{},[22,51,52],{},"Settings Feedback Loop","：Sidecar 推送資料時，response 會帶回使用者在 UI 上修改的 settings，外部腳本可以即時讀取並調整行為。",[10,55,57],{"id":56},"widget-類型","Widget 類型",[59,60,61,68,74,80,86],"ul",{},[62,63,64,67],"li",{},[22,65,66],{},"Sparkline","：滾動趨勢折線圖（CPU 負載、網速等）",[62,69,70,73],{},[22,71,72],{},"Gauge","：環形進度條，狀態自動配色（綠→黃→紅）",[62,75,76,79],{},[22,77,78],{},"Bar-list","：水平進度條列表（磁碟使用率、進程排名）",[62,81,82,85],{},[22,83,84],{},"Key-value","：圖示 + 文字資訊卡",[62,87,88,91],{},[22,89,90],{},"Text","：大數值單行顯示，含動態數字動畫",[10,93,94],{"id":94},"技術架構",[15,96,97,100],{},[22,98,99],{},"後端","：Go + Wails v3（Alpha）、gopsutil（系統資訊）",[15,102,103,106],{},[22,104,105],{},"前端","：React + TypeScript、Framer Motion（動畫）、Tailwind CSS",[15,108,109,112,113,116],{},[22,110,111],{},"API","：HTTP REST，支援 ",[44,114,115],{},"GET \u002Fapi\u002Fstats","（供 Home Assistant、Stream Deck 讀取）",[10,118,119],{"id":119},"心得",[15,121,122],{},"這個專案讓我第一次認真寫 Go，也第一次用 Wails 做跨平台桌面程式。",[15,124,125,126,129],{},"最有挑戰的部分是「透明穿透模式」——不同平台的實作完全不同，Windows 用 ",[44,127,128],{},"WS_EX_TRANSPARENT","，macOS 另一套。Wails v3 還在 Alpha，文件不完整，很多地方得自己翻 source code 或在 Discord 問。",[15,131,132],{},"另一個收穫是 Push API 的設計。最初以為只是個小功能，後來發現這讓整個專案的定位完全不同：它從「系統監控工具」變成了「通用桌面資料顯示平台」。一個設計決策，讓用途擴大了好幾倍。",{"title":134,"searchDepth":135,"depth":135,"links":136},"",2,[137,138,139,140,141],{"id":12,"depth":135,"text":13},{"id":30,"depth":135,"text":30},{"id":56,"depth":135,"text":57},{"id":94,"depth":135,"text":94},{"id":119,"depth":135,"text":119},"desktop","\u002Fimages\u002Fportfolio\u002Fglancehud.png","2026-02-16T00:00:00.000Z","跨平台桌面懸浮監控儀表板。支援透明穿透模式、自由拖放佈局，以及 HTTP Push API——讓任何外部腳本都能把資料顯示在你的桌面上。","md",false,{"github":149},"https:\u002F\u002Fgithub.com\u002Fharry18456\u002FGlanceHUD",{},true,"\u002Fportfolio\u002Fglancehud",{"title":5,"description":145},"active","portfolio\u002Fglancehud",[157,158,159,160,161,162],"Go","Wails v3","React","TypeScript","Framer Motion","HTTP API","cniUhTXCfqOscJrfPY4u8KH76I7L5D5RQjAoapKMGR0",1774434898859]