Add support for showing specific sensors to HomeAssistant

# Conflicts:
#	docs/customservices.md

Author: igorkulman

docs/customservices.md

@@ -4,11 +4,11 @@ Smart cards provide specific integrations for external services. They display ad
 
 Each service integration has different requirements and may need additional configuration parameters (see card list below).
 
-> [!WARNING]  
+> [!WARNING]
 > Your `config.yml` file is exposed at `/assets/config.yml` via HTTP. Any sensitive information (like API keys)
 > in this file is visible to anyone who can access your Homer instance. Only include API keys if your Homer
 > instance is protected by authentication or access controls **or use a proxy like [`CORSair`](https://github.com/bastienwirtz/corsair)
->  to inject your credentials safely**, using environment variable on the server side. 
+>  to inject your credentials safely**, using environment variable on the server side.
 
 Available services are located in `src/components/`:
 
@@ -60,7 +60,7 @@ Available services are located in `src/components/`:
 - [Wallabag](#wallabag)
 - [What's Up Docker](#whats-up-docker)
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
 > Smart cards that interact with external services are subject to CORS restrictions, therefore require one of the following:
 >
 > - All services hosted on the **same domain** as Homer (mydomain.tld/pihole, mydomain.tld/proxmox) to avoid cross-domain request entirely.
@@ -75,7 +75,7 @@ Available services are located in `src/components/`:
 - name: "My Service"
   type: "<type>"
   logo: "assets/tools/sample.png" # Optional
-  url: https://my-service.url # Optional: Card link and API base url unless 'endpoint' is provided (see below) 
+  url: https://my-service.url # Optional: Card link and API base url unless 'endpoint' is provided (see below)
   endpoint: https://my-service-api.url # Optional: alternative base URL used to fetch service data when necessary.
   useCredentials: false # Optional: Override global proxy.useCredentials configuration.
   headers: # Optional: Override global proxy.headers configuration.
@@ -96,8 +96,8 @@ Displays AdGuard Home protection status and blocked query statistics.
 
 > **Note**: If AdGuard Home’s web user is password-protected, you must pass Authorization HTTP header along with all requests. It can be done using a proxy or adding the following to the item configuration:
 >
-> ```yaml  
-> headers:  
+> ```yaml
+> headers:
 >   Authorization: "Basic <base64-encoded for username:password>"
 > ```
 
@@ -232,6 +232,7 @@ Displays status counts (up/down/grace) from your Healthchecks monitoring service
 
 Displays Home Assistant instance status, version, location, and entity count.
 
+**Basic configuration:**
 ```yaml
 - name: "Home Assistant"
   type: "HomeAssistant"
@@ -252,8 +253,40 @@ http:
   cors_allowed_origins:
     - "http://homer.local:8080"
     - "https://your-homer-domain.com"
+  ```
+
+**Custom sensors configuration:**
+```yaml
+- name: "Home Assistant"
+  logo: "assets/tools/sample.png"
+  url: "http://192.168.0.151/"
+  type: "HomeAssistant"
+  apikey: "<---insert-api-key-here--->"
+  showUnits: true # Optional: Show units from Home Assistant (default: true)
+  updateInterval: 30000 # Optional: Sensor refresh interval in ms (default: 30000)
+  sensors: # Optional: Display custom sensors instead of default stats
+    - id: "sensor.living_room_temperature"
+      icon: "fas fa-home"
+    - id: "sensor.bedroom_humidity"
+      icon: "fas fa-bed"
+    - id: "sensor.power_consumption"
+      icon: "fas fa-bolt"
+    - id: "sensor.outdoor_air_quality"
+      icon: "fas fa-cloud-sun"
 ```
 
+**Configuration Options:**
+
+- When `sensors` is provided, the service displays sensor readings with custom icons instead of the default version/entity information
+- `showUnits`: Controls whether to display units from Home Assistant (default: `true`)
+- `updateInterval`: How often to refresh sensor data in milliseconds (default: `30000`)
+- Sensor values are automatically formatted to 1 decimal place with units (when enabled)
+- Supports any numeric sensor type (temperature, humidity, power, etc.)
+- Falls back to original behavior if `sensors` is not configured
+
+To create an API token on HomeAssistant, follow the [official documentation here](https://developers.home-assistant.io/docs/auth_api/#long-lived-access-token).
+To enable cors on HomeAssistant, edit your `configuration.yml` and add the IP of Homer to `https: cors_allowed_origins`
+
 ## Immich
 
 Displays user count, photo/video counts, and storage usage from your Immich server.
@@ -302,7 +335,7 @@ The url must be the root url of Lidarr, Prowlarr, Readarr, Radarr or Sonarr appl
 
 **API Key**:  The Lidarr, Prowlarr, Readarr, Radarr or Sonarr API key can be found in `Settings` > `General`. It is needed to access the API.
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
 > **Radarr API V3 support**: If you are using an older version of Radarr or Sonarr which don't support the new V3 api endpoints, add the following line to your service config `"legacyApi: true"`
 
 ## Linkding
@@ -386,7 +419,7 @@ Moonraker's API mimmicks a few of OctoPrint's endpoints which makes these servic
   endpoint: "https://my-service-api.url:port"
   apikey: "<---insert-api-key-here--->"
   display: "text" # 'text' or 'bar'. Default to `text`.
-  
+
 ```
 
 ## Olivetin
@@ -435,7 +468,7 @@ The following configuration is available for the OpenWeatherMap service:
   locationId: "2759794" # Optional: Specify OpenWeatherMap city ID for better accuracy
   units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin.
   background: "square" # choose which type of background you want behind the image. Can be one of: square, circle, none. Defaults to none.
-  
+
 ```
 
 **Remarks:**
@@ -564,7 +597,7 @@ Displays container counts (running/dead/misc), version, and online status from y
 
 ## Proxmox
 
-Displays status information of a Proxmox node (VMs running and disk, memory and cpu used). 
+Displays status information of a Proxmox node (VMs running and disk, memory and cpu used).
 
 ```yaml
 - name: "Proxmox - Node"
@@ -632,7 +665,7 @@ for setting up rTorrent.
 
 ## SABnzbd
 
-Displays the number of currently active downloads on your SABnzbd instance. 
+Displays the number of currently active downloads on your SABnzbd instance.
 
 ```yaml
 - name: "SABnzbd"
@@ -677,7 +710,7 @@ Displays the number of currently active streams on you Plex instance.
   type: "Tautulli"
   logo: "assets/tools/sample.png"
   url: https://my-service.url
-  checkInterval: 5000 # (Optional) Interval (in ms) for updating the status  
+  checkInterval: 5000 # (Optional) Interval (in ms) for updating the status
   apikey: "<---insert-api-key-here--->"
 ```
 
@@ -717,7 +750,7 @@ Displays Traefik.
   type: "Traefik"
   logo: "assets/tools/sample.png"
   url: "http://traefik.example.com"
-  # basic_auth: "admin:password"  # (Optional) Send Authorization header. 
+  # basic_auth: "admin:password"  # (Optional) Send Authorization header.
 ```
 
 **Authentication**: If BasicAuth is set, credentials will be encoded in Base64 and sent as an Authorization header (`Basic <encoded_value>`). The value must be formatted as "admin:password".

src/components/services/HomeAssistant.vue

@@ -6,6 +6,18 @@
         <template v-if="item.subtitle">
           {{ item.subtitle }}
         </template>
+        <template v-else-if="item.sensors && sensors.length > 0">
+          <span class="sensors">
+            <span
+              v-for="(sensor, index) in sensors"
+              :key="index"
+              class="sensor"
+            >
+              <i :class="sensor.icon"></i>
+              <span class="sensor-value">{{ sensor.value }}</span>
+            </span>
+          </span>
+        </template>
         <template v-else>
           {{ details }}
         </template>
@@ -35,6 +47,7 @@ export default {
     location_name: "",
     separator: " ",
     items: ["name", "version"],
+    sensors: [],
   }),
   computed: {
     headers: function () {
@@ -70,16 +83,54 @@ export default {
     },
   },
   created() {
-    this.fetchServerStatus().then(() => {
-      if (!this.item.subtitle && this.status !== "dead") {
-        if (this.item.items) this.items = this.item.items;
-        if (this.item.separator) this.separator = this.item.separator;
+    if (this.item.sensors) {
+      // If sensors are configured, fetch sensor data
+      this.fetchSensors();
 
-        this.fetchServerStats();
-      }
-    });
+      // Set up configurable refresh interval (default 30 seconds)
+      const updateInterval = parseInt(this.item.updateInterval, 10) || 30000;
+      setInterval(() => this.fetchSensors(), updateInterval);
+    } else {
+      // Original behavior for status/stats
+      this.fetchServerStatus().then(() => {
+        if (!this.item.subtitle && this.status !== "dead") {
+          if (this.item.items) this.items = this.item.items;
+          if (this.item.separator) this.separator = this.item.separator;
+
+          this.fetchServerStats();
+        }
+      });
+    }
   },
   methods: {
+    fetchSensors: async function () {
+      const headers = this.headers;
+
+      try {
+        const response = await this.fetch("/api/states", { headers });
+
+        // Use configurable sensors from item.sensors
+        this.sensors = this.item.sensors
+          .map((sensorConfig) => {
+            const match = response.find((s) => s.entity_id === sensorConfig.id);
+            if (match && !isNaN(parseFloat(match.state))) {
+              const value = parseFloat(match.state).toFixed(1);
+              const unit = match.attributes?.unit_of_measurement || "";
+              const showUnits = this.item.showUnits !== false; // Default to true
+              return {
+                icon: sensorConfig.icon,
+                value: (showUnits && unit) ? `${value}${unit}` : value,
+              };
+            } else {
+              return null;
+            }
+          })
+          .filter(Boolean); // Remove null entries
+      } catch (error) {
+        console.error("Failed to fetch sensors:", error);
+        this.sensors = [];
+      }
+    },
     fetchServerStatus: async function () {
       const headers = this.headers;
 
@@ -151,4 +202,16 @@ export default {
     border-radius: 7px;
   }
 }
+
+.sensors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.sensor {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
 </style>