diff --git a/gallery/src/data/plants.ts b/gallery/src/data/plants.ts
new file mode 100644
index 0000000000..362afaac78
--- /dev/null
+++ b/gallery/src/data/plants.ts
@@ -0,0 +1,72 @@
+import { getEntity } from "../../../src/fake_data/entity";
+
+export const createPlantEntities = () => [
+ getEntity("plant", "lemon_tree", "ok", {
+ problem: "none",
+ sensors: {
+ moisture: "sensor.lemon_tree_moisture",
+ battery: "sensor.lemon_tree_battery",
+ temperature: "sensor.lemon_tree_temperature",
+ conductivity: "sensor.lemon_tree_conductivity",
+ brightness: "sensor.lemon_tree_brightness",
+ },
+ unit_of_measurement_dict: {
+ temperature: "°C",
+ moisture: "%",
+ brightness: "lx",
+ battery: "%",
+ conductivity: "μS/cm",
+ },
+ moisture: 54,
+ battery: 95,
+ temperature: 15.6,
+ conductivity: 1,
+ brightness: 12,
+ max_brightness: 20,
+ friendly_name: "Lemon Tree",
+ }),
+ getEntity("plant", "apple_tree", "ok", {
+ problem: "brightness",
+ sensors: {
+ moisture: "sensor.apple_tree_moisture",
+ battery: "sensor.apple_tree_battery",
+ temperature: "sensor.apple_tree_temperature",
+ conductivity: "sensor.apple_tree_conductivity",
+ brightness: "sensor.apple_tree_brightness",
+ },
+ unit_of_measurement_dict: {
+ temperature: "°C",
+ moisture: "%",
+ brightness: "lx",
+ battery: "%",
+ conductivity: "μS/cm",
+ },
+ moisture: 54,
+ battery: 2,
+ temperature: 15.6,
+ conductivity: 1,
+ brightness: 25,
+ max_brightness: 20,
+ friendly_name: "Apple Tree",
+ }),
+ getEntity("plant", "sunflowers", "ok", {
+ problem: "moisture, temperature, conductivity",
+ sensors: {
+ moisture: "sensor.sunflowers_moisture",
+ temperature: "sensor.sunflowers_temperature",
+ conductivity: "sensor.sunflowers_conductivity",
+ brightness: "sensor.sunflowers_brightness",
+ },
+ unit_of_measurement_dict: {
+ temperature: "°C",
+ moisture: "%",
+ brightness: "lx",
+ conductivity: "μS/cm",
+ },
+ moisture: 54,
+ temperature: 15.6,
+ conductivity: 1,
+ brightness: 25,
+ entity_picture: "/images/sunflowers.jpg",
+ }),
+];
diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/demo-hui-glance-card.ts
index 5455232a3d..f28c4ef7b4 100644
--- a/gallery/src/demos/demo-hui-glance-card.ts
+++ b/gallery/src/demos/demo-hui-glance-card.ts
@@ -218,7 +218,7 @@ const CONFIGS = [
},
];
-class DemoPicEntity extends PolymerElement {
+class DemoGlanceEntity extends PolymerElement {
static get template() {
return html` `;
}
@@ -240,4 +240,4 @@ class DemoPicEntity extends PolymerElement {
}
}
-customElements.define("demo-hui-glance-card", DemoPicEntity);
+customElements.define("demo-hui-glance-card", DemoGlanceEntity);
diff --git a/gallery/src/demos/demo-hui-plant-card.ts b/gallery/src/demos/demo-hui-plant-card.ts
new file mode 100644
index 0000000000..7df7f1c9f2
--- /dev/null
+++ b/gallery/src/demos/demo-hui-plant-card.ts
@@ -0,0 +1,55 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
+import { createPlantEntities } from "../data/plants";
+
+const CONFIGS = [
+ {
+ heading: "Basic example",
+ config: `
+- type: plant-status
+ entity: plant.lemon_tree
+ `,
+ },
+ {
+ heading: "Problem (too bright) + low battery",
+ config: `
+- type: plant-status
+ entity: plant.apple_tree
+ `,
+ },
+ {
+ heading: "With picture + multiple problems",
+ config: `
+- type: plant-status
+ entity: plant.sunflowers
+ name: Sunflowers Name Overwrite
+ `,
+ },
+];
+
+class DemoPlantEntity extends PolymerElement {
+ static get template() {
+ return html``;
+ }
+
+ static get properties() {
+ return {
+ _configs: {
+ type: Object,
+ value: CONFIGS,
+ },
+ };
+ }
+
+ public ready() {
+ super.ready();
+ const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
+ hass.addEntities(createPlantEntities());
+ }
+}
+
+customElements.define("demo-hui-plant-card", DemoPlantEntity);