Card Picker with Previews of cards

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -24,6 +24,8 @@ import {
 import { AlarmPanelCardConfig } from "./types";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
+import { findEntities } from "../common/find-entites";
+import { LovelaceConfig } from "../../../data/lovelace";
 
 const ICONS = {
   armed_away: "hass:shield-lock",
@@ -46,8 +48,27 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     return document.createElement("hui-alarm-panel-card-editor");
   }
 
-  public static getStubConfig() {
-    return { states: ["arm_home", "arm_away"], entity: "" };
+  public static getStubConfig(
+    hass: HomeAssistant,
+    lovelaceConfig: LovelaceConfig,
+    entities?: string[],
+    entitiesFill?: string[]
+  ) {
+    const includeDomains = ["alarm_control_panel"];
+    const maxEntities = 1;
+    const foundEntities = findEntities(
+      hass,
+      lovelaceConfig,
+      maxEntities,
+      entities,
+      entitiesFill,
+      includeDomains
+    );
+
+    return {
+      states: ["arm_home", "arm_away"],
+      entity: foundEntities[0] || "",
+    };
   }
 
   @property() public hass?: HomeAssistant;

src/panels/lovelace/cards/hui-button-card.ts

@@ -30,9 +30,10 @@ import { ButtonCardConfig } from "./types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { hasAction } from "../common/has-action";
 import { handleAction } from "../common/handle-action";
-import { ActionHandlerEvent } from "../../../data/lovelace";
+import { ActionHandlerEvent, LovelaceConfig } from "../../../data/lovelace";
 import { computeActiveState } from "../../../common/entity/compute_active_state";
 import { iconColorCSS } from "../../../common/style/icon_color_css";
+import { findEntities } from "../common/find-entites";
 
 @customElement("hui-button-card")
 export class HuiButtonCard extends LitElement implements LovelaceCard {
@@ -43,13 +44,28 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     return document.createElement("hui-button-card-editor");
   }
 
-  public static getStubConfig(): object {
+  public static getStubConfig(
+    hass: HomeAssistant,
+    lovelaceConfig: LovelaceConfig,
+    entities?: string[],
+    entitiesFill?: string[]
+  ): object {
+    const maxEntities = 1;
+    const foundEntities = findEntities(
+      hass,
+      lovelaceConfig,
+      maxEntities,
+      entities,
+      entitiesFill
+    );
+
     return {
       tap_action: { action: "toggle" },
       hold_action: { action: "more-info" },
       show_icon: true,
       show_name: true,
       state_color: true,
+      entity: foundEntities[0] || "",
     };
   }
 

src/panels/lovelace/cards/hui-entities-card.ts

@@ -27,6 +27,8 @@ import { createHeaderFooterElement } from "../create-element/create-header-foote
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { LovelaceConfig } from "../../../data/lovelace";
+import { findEntities } from "../common/find-entites";
 
 @customElement("hui-entities-card")
 class HuiEntitiesCard extends LitElement implements LovelaceCard {
@@ -37,8 +39,22 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     return document.createElement("hui-entities-card-editor");
   }
 
-  public static getStubConfig(): object {
-    return { entities: [] };
+  public static getStubConfig(
+    hass: HomeAssistant,
+    lovelaceConfig: LovelaceConfig,
+    entities?: string[],
+    entitiesFill?: string[]
+  ) {
+    const maxEntities = 3;
+    const foundEntities = findEntities(
+      hass,
+      lovelaceConfig,
+      maxEntities,
+      entities,
+      entitiesFill
+    );
+
+    return { entities: foundEntities };
   }
 
   @property() private _config?: EntitiesCardConfig;

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -22,6 +22,9 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { GaugeCardConfig } from "./types";
+import { LovelaceConfig } from "../../../data/lovelace";
+import { findEntities } from "../common/find-entites";
+import { HassEntity } from "home-assistant-js-websocket/dist/types";
 
 export const severityMap = {
   red: "var(--label-badge-red)",
@@ -38,8 +41,30 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     );
     return document.createElement("hui-gauge-card-editor");
   }
-  public static getStubConfig(): object {
-    return { entity: "" };
+
+  public static getStubConfig(
+    hass: HomeAssistant,
+    lovelaceConfig: LovelaceConfig,
+    entities?: string[],
+    entitiesFill?: string[]
+  ): object {
+    const includeDomains = ["sensor"];
+    const maxEntities = 1;
+    const entityFilter = (stateObj: HassEntity): boolean => {
+      return !isNaN(Number(stateObj.state));
+    };
+
+    const foundEntities = findEntities(
+      hass,
+      lovelaceConfig,
+      maxEntities,
+      entities,
+      entitiesFill,
+      includeDomains,
+      entityFilter
+    );
+
+    return { entity: foundEntities[0] || "" };
   }
 
   @property() public hass?: HomeAssistant;

src/panels/lovelace/cards/hui-glance-card.ts

@@ -27,10 +27,11 @@ import { processConfigEntities } from "../common/process-config-entities";
 import { GlanceCardConfig, GlanceConfigEntity } from "./types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { hasAction } from "../common/has-action";
-import { ActionHandlerEvent } from "../../../data/lovelace";
+import { ActionHandlerEvent, LovelaceConfig } from "../../../data/lovelace";
 import { handleAction } from "../common/handle-action";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
+import { findEntities } from "../common/find-entites";
 
 @customElement("hui-glance-card")
 export class HuiGlanceCard extends LitElement implements LovelaceCard {
@@ -41,8 +42,24 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
     return document.createElement("hui-glance-card-editor");
   }
 
-  public static getStubConfig(): object {
-    return { entities: [] };
+  public static getStubConfig(
+    hass: HomeAssistant,
+    lovelaceConfig: LovelaceConfig,
+    entities?: string[],
+    entitiesFill?: string[]
+  ): object {
+    const includeDomains = ["sensor"];
+    const maxEntities = 3;
+    const foundEntities = findEntities(
+      hass,
+      lovelaceConfig,
+      maxEntities,
+      entities,
+      entitiesFill,
+      includeDomains
+    );
+
+    return { entities: foundEntities };
   }
 
   @property() public hass?: HomeAssistant;

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -20,6 +20,8 @@ import { HomeAssistant } from "../../../types";
 import { HistoryGraphCardConfig } from "./types";
 import { LovelaceCard } from "../types";
 import { EntityConfig } from "../entity-rows/types";
+import { LovelaceConfig } from "../../../data/lovelace";
+import { findEntities } from "../common/find-entites";
 
 @customElement("hui-history-graph-card")
 export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
@@ -30,8 +32,24 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     return document.createElement("hui-history-graph-card-editor");
   }
 
-  public static getStubConfig() {
-    return { entities: [] };
+  public static getStubConfig(
+    hass: HomeAssistant,
+    lovelaceConfig: LovelaceConfig,
+    entities?: string[],
+    entitiesFill?: string[]
+  ): object {
+    const includeDomains = ["sensor"];
+    const maxEntities = 1;
+    const foundEntities = findEntities(
+      hass,
+      lovelaceConfig,
+      maxEntities,
+      entities,
+      entitiesFill,
+      includeDomains
+    );
+
+    return { entities: foundEntities };
   }
 
   @property() public hass?: HomeAssistant;

src/panels/lovelace/cards/hui-light-card.ts

@@ -29,6 +29,8 @@ import { toggleEntity } from "../common/entity/toggle-entity";
 import { LightCardConfig } from "./types";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { SUPPORT_BRIGHTNESS } from "../../../data/light";
+import { LovelaceConfig } from "../../../data/lovelace";
+import { findEntities } from "../common/find-entites";
 import { UNAVAILABLE } from "../../../data/entity";
 
 @customElement("hui-light-card")
@@ -39,8 +41,25 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
     );
     return document.createElement("hui-light-card-editor");
   }
-  public static getStubConfig(): object {
-    return { entity: "" };
+
+  public static getStubConfig(
+    hass: HomeAssistant,
+    lovelaceConfig: LovelaceConfig,
+    entities?: string[],
+    entitiesFill?: string[]
+  ): object {
+    const includeDomains = ["light"];
+    const maxEntities = 1;
+    const foundEntities = findEntities(
+      hass,
+      lovelaceConfig,
+      maxEntities,
+      entities,
+      entitiesFill,
+      includeDomains
+    );
+
+    return { entity: foundEntities[0] || "" };
   }
 
   @property() public hass?: HomeAssistant;

src/panels/lovelace/cards/hui-map-card.ts

@@ -30,6 +30,8 @@ import { EntityConfig } from "../entity-rows/types";
 import { processConfigEntities } from "../common/process-config-entities";
 import { MapCardConfig } from "./types";
 import { classMap } from "lit-html/directives/class-map";
+import { LovelaceConfig } from "../../../data/lovelace";
+import { findEntities } from "../common/find-entites";
 
 @customElement("hui-map-card")
 class HuiMapCard extends LitElement implements LovelaceCard {
@@ -40,8 +42,24 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     return document.createElement("hui-map-card-editor");
   }
 
-  public static getStubConfig() {
-    return { entities: [] };
+  public static getStubConfig(
+    hass: HomeAssistant,
+    lovelaceConfig: LovelaceConfig,
+    entities?: string[],
+    entitiesFill?: string[]
+  ): object {
+    const includeDomains = ["device_tracker"];
+    const maxEntities = 2;
+    const foundEntities = findEntities(
+      hass,
+      lovelaceConfig,
+      maxEntities,
+      entities,
+      entitiesFill,
+      includeDomains
+    );
+
+    return { entities: foundEntities };
   }
 
   @property() public hass?: HomeAssistant;

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -34,6 +34,8 @@ import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { MediaControlCardConfig } from "./types";
 import { UNAVAILABLE } from "../../../data/entity";
+import { LovelaceConfig } from "../../../data/lovelace";
+import { findEntities } from "../common/find-entites";
 
 @customElement("hui-media-control-card")
 export class HuiMediaControlCard extends LitElement implements LovelaceCard {
@@ -44,8 +46,24 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     return document.createElement("hui-media-control-card-editor");
   }
 
-  public static getStubConfig(): object {
-    return { entity: "" };
+  public static getStubConfig(
+    hass: HomeAssistant,
+    lovelaceConfig: LovelaceConfig,
+    entities?: string[],
+    entitiesFill?: string[]
+  ): object {
+    const includeDomains = ["media_player"];
+    const maxEntities = 1;
+    const foundEntities = findEntities(
+      hass,
+      lovelaceConfig,
+      maxEntities,
+      entities,
+      entitiesFill,
+      includeDomains
+    );
+
+    return { entity: foundEntities[0] || "" };
   }
 
   @property() public hass?: HomeAssistant;

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -15,9 +15,39 @@ import { HomeAssistant } from "../../../types";
 import { LovelaceElementConfig, LovelaceElement } from "../elements/types";
 import { PictureElementsCardConfig } from "./types";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
+import { LovelaceConfig } from "../../../data/lovelace";
+import { findEntities } from "../common/find-entites";
 
 @customElement("hui-picture-elements-card")
 class HuiPictureElementsCard extends LitElement implements LovelaceCard {
+  public static getStubConfig(
+    hass: HomeAssistant,
+    lovelaceConfig: LovelaceConfig,
+    entities?: string[],
+    entitiesFill?: string[]
+  ): object {
+    const maxEntities = 1;
+    const foundEntities = findEntities(
+      hass,
+      lovelaceConfig,
+      maxEntities,
+      entities,
+      entitiesFill
+    );
+
+    return {
+      elements: [
+        {
+          type: "state-badge",
+          entity: foundEntities[0] || "",
+          style: "position: absolute, transform: translate(-50%, -50%)",
+        },
+      ],
+      image:
+        "https://www.home-assistant.io/images/merchandise/shirt-frontpage.png",
+    };
+  }
+
   @property() private _config?: PictureElementsCardConfig;
 
   private _hass?: HomeAssistant;