Card for all enteties

[enoch85]

import React, { useState, useEffect } from 'react';
import { 
  AlertCircle, 
  Battery, 
  Thermometer, 
  BatteryCharging, 
  Lock, 
  Unlock, 
  Droplets, 
  Fan, 
  MapPin, 
  Navigation, 
  Gauge, 
  Info,
  Car
} from 'lucide-react';

const OVMSVehicleDashboard = () => {
  // State to store entity data
  const [entities, setEntities] = useState({});
  const [loading, setLoading] = useState(true);
  const [vehicleId, setVehicleId] = useState(null);
  
  // Fetch entities on component mount
  useEffect(() => {
    async function fetchEntities() {
      try {
        // Find OVMS entities
        const response = await window.fetch('/api/states');
        const allEntities = await response.json();
        
        // Filter for OVMS entities
        const ovmsEntities = allEntities.filter(entity => 
          entity.entity_id.startsWith('sensor.ovms_') || 
          entity.entity_id.startsWith('binary_sensor.ovms_') || 
          entity.entity_id.startsWith('switch.ovms_') ||
          entity.entity_id.startsWith('device_tracker.ovms_')
        );
        
        // Extract vehicle ID from first entity
        if (ovmsEntities.length > 0) {
          const firstEntity = ovmsEntities[0];
          const match = firstEntity.entity_id.match(/ovms_([a-z0-9_]+)_/);
          if (match && match[1]) {
            setVehicleId(match[1]);
          }
        }
        
        // Convert array to object with entity_id as key
        const entitiesObject = {};
        ovmsEntities.forEach(entity => {
          entitiesObject[entity.entity_id] = entity;
        });
        
        setEntities(entitiesObject);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching entities:', error);
        setLoading(false);
      }
    }
    
    fetchEntities();
    
    // Set up interval to refresh data every 30 seconds
    const interval = setInterval(fetchEntities, 30000);
    return () => clearInterval(interval);
  }, []);
  
  // Find specific entity by partial name
  const findEntity = (partialName) => {
    const keys = Object.keys(entities);
    const matchingKey = keys.find(key => key.includes(partialName));
    return matchingKey ? entities[matchingKey] : null;
  };
  
  // Access common entities
  const batteryLevel = findEntity('battery_level') || findEntity('soc');
  const batteryRange = findEntity('range_est') || findEntity('range');
  const vehicleLocation = findEntity('location');
  const climateControl = findEntity('climate') || findEntity('hvac');
  const doorLockState = findEntity('locked');
  const batteryTemp = findEntity('battery_temp') || findEntity('b_temp');
  const cabinTemp = findEntity('cabin_temp') || findEntity('cabintemp');
  const chargeStatus = findEntity('charging');
  
  // Helper to safely get entity value
  const getEntityValue = (entity, defaultValue = 'N/A') => {
    if (!entity) return defaultValue;
    return entity.state === 'unknown' || entity.state === 'unavailable' ? defaultValue : entity.state;
  };
  
  // Helper to get numeric value with units
  const getNumericValue = (entity, unit = '', defaultValue = 'N/A') => {
    if (!entity) return defaultValue;
    if (entity.state === 'unknown' || entity.state === 'unavailable') return defaultValue;
    
    const numValue = parseFloat(entity.state);
    if (isNaN(numValue)) return entity.state;
    
    // Use entity's unit if available
    const displayUnit = entity.attributes.unit_of_measurement || unit;
    return `${numValue}${displayUnit ? ' ' + displayUnit : ''}`;
  };
  
  // Determine vehicle status
  const determineVehicleStatus = () => {
    if (chargeStatus && chargeStatus.state === 'on') {
      return { status: 'Charging', icon: <BatteryCharging className="text-green-600" /> };
    }
    
    if (climateControl && climateControl.state === 'on') {
      return { status: 'Climate On', icon: <Fan className="text-blue-600" /> };
    }
    
    if (doorLockState && doorLockState.state === 'off') {
      return { status: 'Unlocked', icon: <Unlock className="text-yellow-600" /> };
    }
    
    return { status: 'Parked', icon: <Lock className="text-green-600" /> };
  };
  
  const vehicleStatus = determineVehicleStatus();
  
  // Handle loading state
  if (loading) {
    return (
      <div className="flex items-center justify-center p-8 bg-gray-100 rounded-lg">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 mx-auto mb-4"></div>
          <p className="text-gray-700">Loading vehicle data...</p>
        </div>
      </div>
    );
  }
  
  // Handle no entities found
  if (Object.keys(entities).length === 0) {
    return (
      <div className="p-6 bg-white rounded-lg shadow">
        <div className="flex items-center justify-center mb-4">
          <AlertCircle className="text-yellow-500 mr-2" />
          <h2 className="text-lg font-semibold">No OVMS Entities Found</h2>
        </div>
        <p className="text-gray-600 text-center">
          Make sure your OVMS integration is properly set up and connected.
        </p>
      </div>
    );
  }
  
  return (
    <div className="bg-white rounded-lg shadow overflow-hidden">
      {/* Header */}
      <div className="bg-gray-800 p-4 text-white">
        <div className="flex justify-between items-center">
          <h2 className="text-xl font-bold">
            {vehicleId ? `OVMS - ${vehicleId.toUpperCase()}` : 'OVMS Vehicle'}
          </h2>
          <div className="flex items-center px-3 py-1 rounded-full bg-gray-700">
            <span className="mr-2">{vehicleStatus.icon}</span>
            <span>{vehicleStatus.status}</span>
          </div>
        </div>
      </div>
      
      {/* Main content */}
      <div className="p-4">
        {/* Status section */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          {/* Battery status */}
          <div className="bg-gray-100 p-3 rounded-lg">
            <div className="flex items-center mb-2">
              <Battery className="mr-2 text-blue-600" />
              <span className="font-semibold">Battery</span>
            </div>
            <div className="flex flex-col">
              <span className="text-2xl font-bold">
                {getNumericValue(batteryLevel, '%', 'N/A')}
              </span>
              <span className="text-gray-600 text-sm">
                Range: {getNumericValue(batteryRange, 'km', 'N/A')}
              </span>
            </div>
          </div>
          
          {/* Climate status */}
          <div className="bg-gray-100 p-3 rounded-lg">
            <div className="flex items-center mb-2">
              <Thermometer className="mr-2 text-red-500" />
              <span className="font-semibold">Climate</span>
            </div>
            <div className="flex flex-col">
              <span className="text-2xl font-bold">
                {getNumericValue(cabinTemp, '°C', 'N/A')}
              </span>
              <span className="text-gray-600 text-sm">
                Battery: {getNumericValue(batteryTemp, '°C', 'N/A')}
              </span>
            </div>
          </div>
          
          {/* Charging status */}
          <div className="bg-gray-100 p-3 rounded-lg">
            <div className="flex items-center mb-2">
              <BatteryCharging className="mr-2 text-green-600" />
              <span className="font-semibold">Charging</span>
            </div>
            <div className="flex flex-col">
              <span className="text-2xl font-bold">
                {chargeStatus ? (chargeStatus.state === 'on' ? 'Active' : 'Inactive') : 'N/A'}
              </span>
              <span className="text-gray-600 text-sm">
                {findEntity('charge_mode') ? 
                  `Mode: ${getEntityValue(findEntity('charge_mode'))}` : 
                  findEntity('c_state') ? 
                  `State: ${getEntityValue(findEntity('c_state'))}` : ''}
              </span>
            </div>
          </div>
        </div>
        
        {/* Vehicle visualization */}
        <div className="bg-gray-100 p-4 rounded-lg mb-6">
          <h3 className="text-lg font-semibold mb-3">Vehicle Status</h3>
          <div className="relative w-full" style={{ height: '200px' }}>
            {/* Vehicle outline SVG */}
            <svg 
              viewBox="0 0 400 200" 
              className="w-full h-full"
              style={{ maxHeight: '200px' }}
            >
              {/* Vehicle outline */}
              <path 
                d="M60,120 L100,80 L300,80 L340,120 L340,160 C340,165 335,170 330,170 L70,170 C65,170 60,165 60,160 Z" 
                fill="#f0f0f0" 
                stroke="#333" 
                strokeWidth="2"
              />
              
              {/* Windshield */}
              <path 
                d="M120,85 L280,85 L260,110 L140,110 Z" 
                fill="#d4e6f1" 
                stroke="#333" 
              />
              
              {/* Sunroof - if applicable */}
              <rect 
                x="160" 
                y="92" 
                width="80" 
                height="30" 
                rx="5" 
                fill={findEntity('sunroof') && findEntity('sunroof').state === 'on' ? '#d4e6f1' : '#a9cce3'} 
                stroke="#333" 
              />
              
              {/* Windows */}
              <rect 
                x="90" 
                y="110" 
                width="40" 
                height="20" 
                fill={findEntity('windows') && findEntity('windows').state === 'on' ? '#d4e6f1' : '#a9cce3'} 
                stroke="#333" 
              />
              <rect 
                x="270" 
                y="110" 
                width="40" 
                height="20" 
                fill={findEntity('windows') && findEntity('windows').state === 'on' ? '#d4e6f1' : '#a9cce3'} 
                stroke="#333" 
              />
              
              {/* Doors */}
              <line 
                x1="140" 
                y1="110" 
                x2="140" 
                y2="170" 
                stroke={findEntity('door_fl') && findEntity('door_fl').state === 'on' ? '#e74c3c' : '#333'} 
                strokeWidth={findEntity('door_fl') && findEntity('door_fl').state === 'on' ? '3' : '1'} 
              />
              <line 
                x1="260" 
                y1="110" 
                x2="260" 
                y2="170" 
                stroke={findEntity('door_fr') && findEntity('door_fr').state === 'on' ? '#e74c3c' : '#333'} 
                strokeWidth={findEntity('door_fr') && findEntity('door_fr').state === 'on' ? '3' : '1'} 
              />
              
              {/* Battery level visualization */}
              {batteryLevel && (
                <g>
                  <rect 
                    x="150" 
                    y="130" 
                    width="100" 
                    height="20" 
                    rx="5" 
                    fill="#ecf0f1" 
                    stroke="#333" 
                  />
                  <rect 
                    x="150" 
                    y="130" 
                    width={`${Math.min(parseInt(batteryLevel.state) || 0, 100)}` * 100/100} 
                    height="20" 
                    rx="5" 
                    fill={
                      (parseInt(batteryLevel.state) || 0) > 50 ? '#2ecc71' : 
                      (parseInt(batteryLevel.state) || 0) > 20 ? '#f39c12' : '#e74c3c'
                    }
                  />
                </g>
              )}
              
              {/* Wheels */}
              <circle cx="100" cy="170" r="20" fill="#333" />
              <circle cx="300" cy="170" r="20" fill="#333" />
              <circle cx="100" cy="170" r="10" fill="#666" />
              <circle cx="300" cy="170" r="10" fill="#666" />
            </svg>
          </div>
        </div>
        
        {/* Controls & Additional info */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Vehicle location */}
          <div className="bg-gray-100 p-3 rounded-lg">
            <div className="flex items-center mb-2">
              <MapPin className="mr-2 text-red-600" />
              <span className="font-semibold">Location</span>
            </div>
            <div className="flex flex-col">
              {vehicleLocation ? (
                <span className="text-gray-800">
                  {vehicleLocation.attributes && vehicleLocation.attributes.friendly_name ? 
                    vehicleLocation.attributes.friendly_name : 'Current location'}
                </span>
              ) : (
                findEntity('latitude') && findEntity('longitude') ? (
                  <span className="text-gray-800">
                    {getEntityValue(findEntity('latitude')).slice(0, 8)}, 
                    {getEntityValue(findEntity('longitude')).slice(0, 8)}
                  </span>
                ) : (
                  <span className="text-gray-600">Location not available</span>
                )
              )}
            </div>
          </div>
          
          {/* Trip info */}
          <div className="bg-gray-100 p-3 rounded-lg">
            <div className="flex items-center mb-2">
              <Navigation className="mr-2 text-blue-600" />
              <span className="font-semibold">Trip</span>
            </div>
            <div className="flex flex-col">
              <span className="text-gray-800">
                {findEntity('odometer') ? 
                  `Odometer: ${getNumericValue(findEntity('odometer'), 'km')}` : ''}
              </span>
              <span className="text-gray-800">
                {findEntity('trip') ? 
                  `Trip: ${getNumericValue(findEntity('trip'), 'km')}` : ''}
              </span>
            </div>
          </div>
          
          {/* Speed & Power */}
          <div className="bg-gray-100 p-3 rounded-lg">
            <div className="flex items-center mb-2">
              <Gauge className="mr-2 text-purple-600" />
              <span className="font-semibold">Power</span>
            </div>
            <div className="flex flex-col">
              <span className="text-gray-800">
                {findEntity('power') ? 
                  `Power: ${getNumericValue(findEntity('power'), 'kW')}` : ''}
              </span>
              <span className="text-gray-800">
                {findEntity('speed') ? 
                  `Speed: ${getNumericValue(findEntity('speed'), 'km/h')}` : ''}
              </span>
            </div>
          </div>
          
          {/* System info */}
          <div className="bg-gray-100 p-3 rounded-lg">
            <div className="flex items-center mb-2">
              <Info className="mr-2 text-gray-600" />
              <span className="font-semibold">System</span>
            </div>
            <div className="flex flex-col">
              <span className="text-gray-800">
                {findEntity('version') ? 
                  `Firmware: ${getEntityValue(findEntity('version'))}` : ''}
              </span>
              <span className="text-gray-800">
                {findEntity('status') ? 
                  `Status: ${getEntityValue(findEntity('status'))}` : ''}
              </span>
            </div>
          </div>
        </div>
        
        {/* Status Icons */}
        <div className="mt-6 bg-gray-100 p-4 rounded-lg">
          <h3 className="text-lg font-semibold mb-3">Quick Status</h3>
          <div className="flex flex-wrap gap-4 justify-around">
            {/* Door status */}
            <div className="text-center">
              <div className={`p-3 rounded-full ${findEntity('door_fl') || findEntity('door_fr') || findEntity('door_rl') || findEntity('door_rr') ? 'bg-red-100' : 'bg-green-100'}`}>
                <Car size={24} className={findEntity('door_fl') || findEntity('door_fr') || findEntity('door_rl') || findEntity('door_rr') ? 'text-red-600' : 'text-green-600'} />
              </div>
              <p className="mt-1 text-xs">Doors</p>
            </div>
            
            {/* Lock status */}
            <div className="text-center">
              <div className={`p-3 rounded-full ${doorLockState && doorLockState.state === 'off' ? 'bg-red-100' : 'bg-green-100'}`}>
                {doorLockState && doorLockState.state === 'off' ? 
                  <Unlock size={24} className="text-red-600" /> : 
                  <Lock size={24} className="text-green-600" />
                }
              </div>
              <p className="mt-1 text-xs">Locks</p>
            </div>
            
            {/* Climate status */}
            <div className="text-center">
              <div className={`p-3 rounded-full ${climateControl && climateControl.state === 'on' ? 'bg-blue-100' : 'bg-gray-100'}`}>
                <Fan size={24} className={climateControl && climateControl.state === 'on' ? 'text-blue-600' : 'text-gray-400'} />
              </div>
              <p className="mt-1 text-xs">Climate</p>
            </div>
            
            {/* Charging status */}
            <div className="text-center">
              <div className={`p-3 rounded-full ${chargeStatus && chargeStatus.state === 'on' ? 'bg-green-100' : 'bg-gray-100'}`}>
                <BatteryCharging size={24} className={chargeStatus && chargeStatus.state === 'on' ? 'text-green-600' : 'text-gray-400'} />
              </div>
              <p className="mt-1 text-xs">Charging</p>
            </div>
            
            {/* Windows status */}
            <div className="text-center">
              <div className={`p-3 rounded-full ${findEntity('windows') && findEntity('windows').state === 'on' ? 'bg-blue-100' : 'bg-gray-100'}`}>
                <Droplets size={24} className={findEntity('windows') && findEntity('windows').state === 'on' ? 'text-blue-600' : 'text-gray-400'} />
              </div>
              <p className="mt-1 text-xs">Windows</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default OVMSVehicleDashboard;

[enoch85]

OVMS Dashboard Card

Looking at your screenshot and the extensive OVMS integration code, I'll create a custom dashboard card that displays your vehicle's status and controls in a clean, organized layout.

Here's a React-based dashboard card that will display the critical information from your OVMS integration:

I need to fix a few issues with the component. Let me create an improved version:

How to Use This Dashboard

I've created a comprehensive vehicle dashboard for your OVMS integration. This dashboard provides a clean, organized way to view all your vehicle's vital information in one place. It's vehicle-agnostic and will work with all supported vehicle types in your integration (VW e-UP, Smart ForTwo, MG ZS-EV, Nissan Leaf, etc.).

Features

1. Real-time Status Display:

   • Battery level and range
   • Climate control status and temperatures
   • Charging status and details
   • Door, window, and lock states

2. Vehicle Visualization:

   • Top-down view showing door status
   • Windows and sunroof status
   • Visual battery level indicator
   • Color-coded status indicators

3. Additional Information:

   • Vehicle location coordinates or address
   • Trip data including odometer readings
   • Power and speed information
   • System status and firmware version

4. Quick Status Icons:

   • At-a-glance status indicators for doors, locks, climate, charging, and windows
   • Color-coded for easy interpretation

Setup Instructions

To use this dashboard in Home Assistant:

1. Go to your Home Assistant dashboard configuration
2. Add a new "Custom: React Card" (you'll need to have the React card type enabled)
3. Copy the provided code into the card configuration
4. Save your dashboard

The dashboard will automatically detect your OVMS entities by searching for any entity starting with sensor.ovms_, binary_sensor.ovms_, switch.ovms_, or device_tracker.ovms_.

Automatic Refresh

The dashboard automatically refreshes data every 30 seconds to ensure you're viewing the latest information from your vehicle.

Compatibility

This dashboard is designed to be compatible with all vehicle types supported by your OVMS integration. It dynamically searches for relevant entities based on common naming patterns and will adapt to whatever data is available for your specific vehicle.

Would you like me to make any customizations to this dashboard or would you like me to explain any part of it in more detail?

[enoch85]

Here's a basic YAML card also:

type: vertical-stack
cards:
  # Header card with vehicle status
  - type: entities
    title: OVMS Vehicle Status
    icon: mdi:car-electric
    entities:
      - entity: sensor.ovms_vehicle_status
        name: Status
        icon: mdi:information-outline
      - entity: binary_sensor.ovms_locked
        name: Lock Status
        icon: mdi:lock
      - entity: binary_sensor.ovms_charging
        name: Charging Status
        icon: mdi:battery-charging
    state_color: true

  # Main stats grid
  - type: grid
    columns: 3
    square: false
    cards:
      # Battery card
      - type: gauge
        name: Battery Level
        entity: sensor.ovms_soc
        min: 0
        max: 100
        severity:
          green: 50
          yellow: 20
          red: 0
      
      # Range card
      - type: entity
        name: Range
        entity: sensor.ovms_range_est
        icon: mdi:map-marker-distance
      
      # Climate card
      - type: entity
        name: Cabin Temperature
        entity: sensor.ovms_cabintemp
        icon: mdi:thermometer

  # Vehicle visualization using picture-elements
  - type: picture-elements
    image: /local/images/car_outline.png  # You'll need to upload a car outline image
    elements:
      # Battery percentage overlay
      - type: state-label
        entity: sensor.ovms_soc
        style:
          top: 50%
          left: 50%
          font-size: 24px
          color: white
          text-shadow: 1px 1px 2px black
      
      # Door indicators (these will be colored dots indicating door state)
      - type: state-icon
        entity: binary_sensor.ovms_door_fl
        icon: mdi:circle
        style:
          top: 30%
          left: 30%
          "--paper-item-icon-color": >
            [[[
              return entity.state === 'on' ? 'red' : 'green';
            ]]]
      
      - type: state-icon
        entity: binary_sensor.ovms_door_fr
        icon: mdi:circle
        style:
          top: 30%
          left: 70%
          "--paper-item-icon-color": >
            [[[
              return entity.state === 'on' ? 'red' : 'green';
            ]]]
      
      - type: state-icon
        entity: binary_sensor.ovms_door_rl
        icon: mdi:circle
        style:
          top: 70%
          left: 30%
          "--paper-item-icon-color": >
            [[[
              return entity.state === 'on' ? 'red' : 'green';
            ]]]
      
      - type: state-icon
        entity: binary_sensor.ovms_door_rr
        icon: mdi:circle
        style:
          top: 70%
          left: 70%
          "--paper-item-icon-color": >
            [[[
              return entity.state === 'on' ? 'red' : 'green';
            ]]]

  # System info
  - type: glance
    title: System Information
    columns: 3
    entities:
      - entity: sensor.ovms_version
        name: Firmware
        icon: mdi:package-up
      - entity: sensor.ovms_system
        name: System
        icon: mdi:chip
      - entity: sensor.ovms_status
        name: Connection
        icon: mdi:wifi

  # Trip information
  - type: entities
    title: Trip Information
    icon: mdi:road
    entities:
      - entity: sensor.ovms_odometer
        name: Odometer
        icon: mdi:counter
      - entity: sensor.ovms_trip
        name: Trip
        icon: mdi:map-marker-path
      - entity: sensor.ovms_speed
        name: Speed
        icon: mdi:speedometer
      - entity: sensor.ovms_power
        name: Power
        icon: mdi:flash

  # Location card
  - type: map
    title: Vehicle Location
    aspect_ratio: 16:9
    default_zoom: 15
    entities:
      - entity: device_tracker.ovms_location
    hours_to_show: 24

[enoch85]

Something like this:

@wayne-love I'm sure it can be tuned even better.

[enoch85]

Here are some SVGs for cars: https://www.freepik.com/free-photos-vectors/car-top-svg

[enoch85]

Cleaned it up a bit:

I don't have lock sensors. :/

[enoch85]

type: vertical-stack
cards:
  - type: picture-elements
    image: /api/image/serve/c401146c5ed952d955fb09f3092abc3f/512x512
    elements:
      - type: state-label
        entity: sensor.ovms_reg123_metric_v_b_soc
        style:
          top: 45%
          left: 60%
          font-size: 36px
          font-weight: bold
          color: black
      - type: state-label
        entity: sensor.ovms_reg123_metric_v_b_range_est
        suffix: " "
        style:
          top: 55%
          left: 60%
          font-size: 18px
          color: black
      - type: conditional
        conditions:
          - entity: binary_sensor.ovms_reg123_metric_v_c_charging
            state: "on"
        elements:
          - type: icon
            icon: mdi:battery-charging
            style:
              top: 30%
              left: 50%
              color: green
              "--mdi-icon-size": 24px
      - type: state-label
        entity: sensor.ovms_reg123_metric_xvu_v_t_emgcy
        attribute: cell_1
        suffix: " kPa"
        style:
          top: 5%
          left: 20%
          font-weight: bold
          font-size: 16px
          color: black
      - type: state-label
        entity: sensor.ovms_reg123_metric_xvu_v_t_emgcy
        attribute: cell_3
        suffix: " kPa"
        style:
          top: 5%
          left: 80%
          font-weight: bold
          font-size: 16px
          color: black
      - type: state-label
        entity: sensor.ovms_reg123_metric_xvu_v_t_emgcy
        attribute: cell_2
        suffix: " kPa"
        style:
          top: 96%
          left: 20%
          font-weight: bold
          font-size: 16px
          color: black
      - type: state-label
        entity: sensor.ovms_reg123_metric_xvu_v_t_emgcy
        attribute: cell_4
        suffix: " kPa"
        style:
          top: 96%
          left: 80%
          font-weight: bold
          font-size: 16px
          color: black
      - type: state-icon
        entity: binary_sensor.ovms_reg123_door_fl
        icon: mdi:circle
        style:
          top: 28%
          left: 13%
          "--paper-item-icon-color": |
            [[[
              return entity.state === 'on' ? 'red' : 'green';
            ]]]
      - type: state-icon
        entity: binary_sensor.ovms_reg123_door_fr
        icon: mdi:circle
        style:
          top: 28%
          left: 87%
          "--paper-item-icon-color": |
            [[[
              return entity.state === 'on' ? 'red' : 'green';
            ]]]
      - type: state-icon
        entity: binary_sensor.ovms_reg123_door_rl
        icon: mdi:circle
        style:
          top: 72%
          left: 13%
          "--paper-item-icon-color": |
            [[[
              return entity.state === 'on' ? 'red' : 'green';
            ]]]
      - type: state-icon
        entity: binary_sensor.ovms_reg123_door_rr
        icon: mdi:circle
        style:
          top: 72%
          left: 87%
          "--paper-item-icon-color": |
            [[[
              return entity.state === 'on' ? 'red' : 'green';
            ]]]
      - type: state-icon
        entity: binary_sensor.ovms_reg123_door_trunk
        icon: mdi:circle
        style:
          top: 85%
          left: 50%
          "--paper-item-icon-color": |
            [[[
              return entity.state === 'on' ? 'red' : 'green';
            ]]]