平面圖上的操作：點一下、長按、雙擊各做不同的事

charles

平面圖不只能開關燈。

這篇把三種點擊動作講完，讓一個圖示能做三件事。



三種動作

每個元素都可以設定：

• tap_action —— 點一下
  
• hold_action —— 長按（按住不放）
  
• double_tap_action —— 快速點兩下
  

我的建議配置：

1. tap_action        → 開關（最常用的放這裡）
2. hold_action       → 打開詳細資訊（調亮度、色溫）
3. double_tap_action → 跳到那個房間的專屬分頁

複製代碼

完整寫法

1.   - type: state-icon
2.     entity: light.living_room
3.     style: {top: 24%, left: 22%}
4.     tap_action:
5.       action: toggle
6.     hold_action:
7.       action: more-info
8.     double_tap_action:
9.       action: navigate
10.       navigation_path: /lovelace/living-room

複製代碼

所有可用的 action



toggle —— 切換開關

1.     tap_action:
2.       action: toggle

複製代碼

最常用的，適合燈、開關、風扇。

more-info —— 打開詳細資訊視窗

1.     tap_action:
2.       action: more-info

複製代碼

跳出那個實體的詳細頁，可以調亮度、色溫、看歷史。

感測器類的元素用這個（因為 sensor 不能 toggle）。

navigate —— 跳到另一個頁面

1.     tap_action:
2.       action: navigate
3.       navigation_path: /lovelace/bedroom

複製代碼

路徑寫法：

• /lovelace/xxx —— 預設儀表板的某一頁
  
• /my-dashboard/xxx —— 自訂儀表板的某一頁
  
• /history?entity_id=light.living_room —— 直接跳到歷史頁
  

perform-action —— 呼叫任何服務（最強大）

1.     tap_action:
2.       action: perform-action
3.       perform_action: light.turn_on
4.       target:
5.         entity_id: light.living_room
6.       data:
7.         brightness_pct: 30
8.         color_temp_kelvin: 2700

複製代碼

這個可以做出「點一下就進入某個情境」。

（舊版本這個 action 叫 call-service，
如果你看到舊教學寫 call-service，那是同一件事。）

url —— 開外部網址

1.     tap_action:
2.       action: url
3.       url_path: https://example.com

複製代碼

none —— 什麼都不做

1.     tap_action:
2.       action: none

複製代碼

這個很有用 —— 用在純裝飾的圖示上，
避免使用者點了之後跳出奇怪的視窗。

實用組合一：一個圖示三種亮度

1.   - type: state-icon
2.     entity: light.living_room
3.     style: {top: 24%, left: 22%}
4.     # 點一下：開關
5.     tap_action:
6.       action: toggle
7.     # 長按：調成夜間模式（很暗的暖光）
8.     hold_action:
9.       action: perform-action
10.       perform_action: light.turn_on
11.       target:
12.         entity_id: light.living_room
13.       data:
14.         brightness_pct: 8
15.         color_temp_kelvin: 2200
16.     # 雙擊：全亮
17.     double_tap_action:
18.       action: perform-action
19.       perform_action: light.turn_on
20.       target:
21.         entity_id: light.living_room
22.       data:
23.         brightness_pct: 100
24.         color_temp_kelvin: 4000

複製代碼

這個很好用：半夜起來長按一下就是柔光，
打掃的時候雙擊就是全亮。

實用組合二：整個房間變成一個大按鈕

用一個透明的 image 元素蓋住整個房間：

1.   - type: image
2.     image: /local/floorplan/transparent.png
3.     style:
4.       top: 26%
5.       left: 20%
6.       width: 40%
7.       height: 52%
8.     tap_action:
9.       action: toggle
10.       entity: light.living_room
11.     hold_action:
12.       action: more-info
13.       entity: light.living_room

複製代碼

注意這裡的 entity 寫在 action 裡面，
因為 image 元素本身不需要綁實體。

效果：整個客廳區域都可以點，不用瞄準那個小圖示。

在手機上這個差別非常大。

實用組合三：場景按鈕

在平面圖的角落放幾個場景按鈕：

1.   - type: icon
2.     icon: mdi:movie-open
3.     title: 看電影
4.     style:
5.       top: 6%
6.       left: 6%
7.       "--mdc-icon-size": 32px
8.       color: "#888"
9.     tap_action:
10.       action: perform-action
11.       perform_action: script.turn_on
12.       target:
13.         entity_id: script.movie_mode
15.   - type: icon
16.     icon: mdi:sleep
17.     title: 睡覺
18.     style:
19.       top: 6%
20.       left: 14%
21.       "--mdc-icon-size": 32px
22.       color: "#888"
23.     tap_action:
24.       action: perform-action
25.       perform_action: script.turn_on
26.       target:
27.         entity_id: script.bedtime

複製代碼

title 是滑鼠移上去時顯示的提示文字，
在電腦上很有用，手機上沒作用。



六個實務上的建議

一、長按的時間是固定的

HA 的長按大概是半秒，不能調。

不要把「危險的動作」放在 tap（例如開門鎖），
容易誤觸。放 hold 比較安全。

二、雙擊在手機上不好用

手指點兩下的時間窗很短，常常會被判定成兩次單擊。

我的建議：雙擊只放「不做也沒關係」的功能。

三、沒設定的話有預設行為

• state-icon 預設 tap 是 more-info（不是 toggle）
  
• image 預設 tap 是 more-info
  

所以想要「點了就開關」一定要明確寫 tap_action: toggle。

很多人以為點不會反應，其實是跳出了詳細視窗然後被忽略了。

四、加一點視覺回饋

點下去沒有任何反應的話，使用者會一直點。

1.     style:
2.       top: 24%
3.       left: 22%
4.       cursor: pointer

複製代碼

cursor: pointer 讓滑鼠移上去變成手指，告訴使用者「這裡可以點」。

五、給元素加 title

1.     title: 客廳主燈

複製代碼

滑鼠停留時會顯示。對不熟悉的人很有幫助。

六、確認家人真的會用

做完一定要讓家人實際操作一次。

我第一版的長按功能完全沒人用 —— 因為沒人知道可以長按。

後來我在平面圖底下加了一行小字說明，才有人開始用。

一個進階技巧：confirmation（二次確認）

危險的動作加上確認：

1.     tap_action:
2.       action: perform-action
3.       perform_action: lock.unlock
4.       target:
5.         entity_id: lock.front_door
6.       confirmation:
7.         text: 確定要開前門嗎？

複製代碼

門鎖、保全、車庫門這類一定要加。

---

下一篇：在平面圖上顯示感測器數值 ——
溫度、濕度、門窗狀態，而且要好看。