diff --git a/gallery/src/components/demo-card.js b/gallery/src/components/demo-card.js
index 7afb2ce94f..ed8238da36 100644
--- a/gallery/src/components/demo-card.js
+++ b/gallery/src/components/demo-card.js
@@ -3,7 +3,8 @@ import { PolymerElement } from "@polymer/polymer/polymer-element.js";
import JsYaml from "js-yaml";
import HomeAssistant from "../data/hass.js";
-import demoConfig from "../data/demo_config.js";
+import { demoConfig } from "../data/demo_config.js";
+import { demoServices } from "../data/demo_services";
import demoResources from "../data/demo_resources.js";
import demoStates from "../data/demo_states.js";
import createCardElement from "../../../src/panels/lovelace/common/create-card-element.js";
@@ -73,6 +74,7 @@ class DemoCard extends PolymerElement {
} else {
const hass = new HomeAssistant(demoStates);
hass.config = demoConfig;
+ hass.services = demoServices;
hass.resources = demoResources;
hass.language = "en";
hass.states = demoStates;
diff --git a/gallery/src/data/demo_config.js b/gallery/src/data/demo_config.js
index 43c5916ada..3979f0ea8d 100644
--- a/gallery/src/data/demo_config.js
+++ b/gallery/src/data/demo_config.js
@@ -1,109 +1,11 @@
-export default {
- core: {
- elevation: 300,
- latitude: 51.5287352,
- longitude: -0.381773,
- unit_system: {
- length: "km",
- mass: "kg",
- temperature: "°C",
- volume: "L",
- },
- },
- services: {
- configurator: ["configure"],
- tts: ["demo_say", "clear_cache"],
- cover: [
- "open_cover",
- "close_cover",
- "open_cover_tilt",
- "close_cover_tilt",
- "set_cover_tilt_position",
- "set_cover_position",
- "stop_cover_tilt",
- "stop_cover",
- ],
- group: ["set", "reload", "remove", "set_visibility"],
- alarm_control_panel: [
- "alarm_arm_night",
- "alarm_disarm",
- "alarm_trigger",
- "alarm_arm_home",
- "alarm_arm_away",
- "alarm_arm_custom_bypass",
- ],
- conversation: ["process"],
- notify: ["demo_test_target_name", "notify"],
- lock: ["open", "lock", "unlock"],
- input_select: [
- "select_previous",
- "set_options",
- "select_next",
- "select_option",
- ],
- recorder: ["purge"],
- persistent_notification: ["create", "dismiss"],
- timer: ["pause", "cancel", "finish", "start"],
- input_boolean: ["turn_off", "toggle", "turn_on"],
- fan: [
- "set_speed",
- "turn_on",
- "turn_off",
- "set_direction",
- "oscillate",
- "toggle",
- ],
- climate: [
- "set_humidity",
- "set_operation_mode",
- "set_aux_heat",
- "turn_on",
- "set_hold_mode",
- "set_away_mode",
- "turn_off",
- "set_fan_mode",
- "set_temperature",
- "set_swing_mode",
- ],
- switch: ["turn_off", "toggle", "turn_on"],
- script: ["turn_off", "demo", "reload", "toggle", "turn_on"],
- scene: ["turn_on"],
- system_log: ["clear", "write"],
- camera: ["disable_motion_detection", "enable_motion_detection", "snapshot"],
- image_processing: ["scan"],
- media_player: [
- "media_previous_track",
- "clear_playlist",
- "shuffle_set",
- "media_seek",
- "turn_on",
- "media_play_pause",
- "media_next_track",
- "media_pause",
- "volume_down",
- "volume_set",
- "media_stop",
- "toggle",
- "media_play",
- "play_media",
- "volume_mute",
- "turn_off",
- "select_sound_mode",
- "select_source",
- "volume_up",
- ],
- input_number: ["set_value", "increment", "decrement"],
- device_tracker: ["see"],
- homeassistant: [
- "stop",
- "check_config",
- "reload_core_config",
- "turn_on",
- "turn_off",
- "restart",
- "toggle",
- ],
- light: ["turn_off", "toggle", "turn_on"],
- input_text: ["set_value"],
+export const demoConfig = {
+ elevation: 300,
+ latitude: 51.5287352,
+ longitude: -0.381773,
+ unit_system: {
+ length: "km",
+ mass: "kg",
+ temperature: "°C",
+ volume: "L",
},
};
diff --git a/gallery/src/data/demo_services.ts b/gallery/src/data/demo_services.ts
new file mode 100644
index 0000000000..e35cb16833
--- /dev/null
+++ b/gallery/src/data/demo_services.ts
@@ -0,0 +1,96 @@
+export const demoServices = {
+ configurator: ["configure"],
+ tts: ["demo_say", "clear_cache"],
+ cover: [
+ "open_cover",
+ "close_cover",
+ "open_cover_tilt",
+ "close_cover_tilt",
+ "set_cover_tilt_position",
+ "set_cover_position",
+ "stop_cover_tilt",
+ "stop_cover",
+ ],
+ group: ["set", "reload", "remove", "set_visibility"],
+ alarm_control_panel: [
+ "alarm_arm_night",
+ "alarm_disarm",
+ "alarm_trigger",
+ "alarm_arm_home",
+ "alarm_arm_away",
+ "alarm_arm_custom_bypass",
+ ],
+ conversation: ["process"],
+ notify: ["demo_test_target_name", "notify"],
+ lock: ["open", "lock", "unlock"],
+ input_select: [
+ "select_previous",
+ "set_options",
+ "select_next",
+ "select_option",
+ ],
+ recorder: ["purge"],
+ persistent_notification: ["create", "dismiss"],
+ timer: ["pause", "cancel", "finish", "start"],
+ input_boolean: ["turn_off", "toggle", "turn_on"],
+ fan: [
+ "set_speed",
+ "turn_on",
+ "turn_off",
+ "set_direction",
+ "oscillate",
+ "toggle",
+ ],
+ climate: [
+ "set_humidity",
+ "set_operation_mode",
+ "set_aux_heat",
+ "turn_on",
+ "set_hold_mode",
+ "set_away_mode",
+ "turn_off",
+ "set_fan_mode",
+ "set_temperature",
+ "set_swing_mode",
+ ],
+ switch: ["turn_off", "toggle", "turn_on"],
+ script: ["turn_off", "demo", "reload", "toggle", "turn_on"],
+ scene: ["turn_on"],
+ system_log: ["clear", "write"],
+ camera: ["disable_motion_detection", "enable_motion_detection", "snapshot"],
+ image_processing: ["scan"],
+ media_player: [
+ "media_previous_track",
+ "clear_playlist",
+ "shuffle_set",
+ "media_seek",
+ "turn_on",
+ "media_play_pause",
+ "media_next_track",
+ "media_pause",
+ "volume_down",
+ "volume_set",
+ "media_stop",
+ "toggle",
+ "media_play",
+ "play_media",
+ "volume_mute",
+ "turn_off",
+ "select_sound_mode",
+ "select_source",
+ "volume_up",
+ ],
+ input_number: ["set_value", "increment", "decrement"],
+ device_tracker: ["see"],
+ homeassistant: [
+ "stop",
+ "check_config",
+ "reload_core_config",
+ "turn_on",
+ "turn_off",
+ "restart",
+ "toggle",
+ ],
+ light: ["turn_off", "toggle", "turn_on"],
+ input_text: ["set_value"],
+};
diff --git a/gallery/src/data/provide_hass.js b/gallery/src/data/provide_hass.js
index 1be6c55600..1e59d76223 100644
--- a/gallery/src/data/provide_hass.js
+++ b/gallery/src/data/provide_hass.js
@@ -1,6 +1,7 @@
import { fireEvent } from "../../../src/common/dom/fire_event.js";
-import demoConfig from "./demo_config.js";
+import { demoConfig } from "./demo_config.js";
+import { demoServices } from "./demo_services";
import demoResources from "./demo_resources.js";
const ensureArray = (val) => (Array.isArray(val) ? val : [val]);
@@ -22,9 +23,11 @@ export default (elements, { initialStates = {} } = {}) => {
updateHass({
// Home Assistant properties
config: demoConfig,
+ services: demoServices,
language: "en",
resources: demoResources,
states: initialStates,
+ themes: {},
// Mock properties
mockEntities: entities,
diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js
index ebf5e19361..743ca273be 100644
--- a/gallery/src/demos/demo-hui-entities-card.js
+++ b/gallery/src/demos/demo-hui-entities-card.js
@@ -177,7 +177,6 @@ class DemoEntities extends PolymerElement {
return html`
`;
@@ -189,7 +188,6 @@ class DemoEntities extends PolymerElement {
type: Object,
value: CONFIGS,
},
- hass: Object,
};
}
diff --git a/gallery/src/demos/demo-hui-entity-filter-card.js b/gallery/src/demos/demo-hui-entity-filter-card.js
index 09835e19ec..d3759c6614 100644
--- a/gallery/src/demos/demo-hui-entity-filter-card.js
+++ b/gallery/src/demos/demo-hui-entity-filter-card.js
@@ -1,9 +1,57 @@
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import getEntity from "../data/entity.js";
+import provideHass from "../data/provide_hass.js";
import "../components/demo-cards.js";
+const ENTITIES = [
+ getEntity("device_tracker", "demo_paulus", "work", {
+ source_type: "gps",
+ latitude: 32.877105,
+ longitude: 117.232185,
+ gps_accuracy: 91,
+ battery: 71,
+ friendly_name: "Paulus",
+ }),
+ getEntity("device_tracker", "demo_anne_therese", "school", {
+ source_type: "gps",
+ latitude: 32.877105,
+ longitude: 117.232185,
+ gps_accuracy: 91,
+ battery: 71,
+ friendly_name: "Anne Therese",
+ }),
+ getEntity("device_tracker", "demo_home_boy", "home", {
+ source_type: "gps",
+ latitude: 32.877105,
+ longitude: 117.232185,
+ gps_accuracy: 91,
+ battery: 71,
+ friendly_name: "Home Boy",
+ }),
+ getEntity("light", "bed_light", "on", {
+ friendly_name: "Bed Light",
+ }),
+ getEntity("light", "kitchen_lights", "on", {
+ friendly_name: "Kitchen Lights",
+ }),
+ getEntity("light", "ceiling_lights", "off", {
+ friendly_name: "Ceiling Lights",
+ }),
+];
+
const CONFIGS = [
+ {
+ heading: "Controller",
+ config: `
+- type: entities
+ entities:
+ - light.bed_light
+ - light.ceiling_lights
+ - light.kitchen_lights
+ `,
+ },
{
heading: "Basic",
config: `
@@ -17,7 +65,7 @@ const CONFIGS = [
- light.kitchen_lights
state_filter:
- "on"
- - not_home
+ - home
`,
},
{
@@ -39,25 +87,15 @@ const CONFIGS = [
show_state: false
`,
},
- {
- heading: "Showing single entity conditionally",
- config: `
-- type: entity-filter
- entities:
- - media_player.lounge_room
- state_filter:
- - 'playing'
- card:
- type: media-control
- entity: media_player.lounge_room
- `,
- },
];
class DemoFilter extends PolymerElement {
static get template() {
return html`
-
+
`;
}
@@ -69,6 +107,12 @@ class DemoFilter extends PolymerElement {
},
};
}
+
+ ready() {
+ super.ready();
+ const hass = provideHass(this.$.demos);
+ hass.addEntities(ENTITIES);
+ }
}
customElements.define("demo-hui-entity-filter-card", DemoFilter);
diff --git a/gallery/src/demos/demo-hui-glance-card.js b/gallery/src/demos/demo-hui-glance-card.js
index 86c92e450b..83440e6611 100644
--- a/gallery/src/demos/demo-hui-glance-card.js
+++ b/gallery/src/demos/demo-hui-glance-card.js
@@ -1,8 +1,63 @@
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import getEntity from "../data/entity.js";
+import provideHass from "../data/provide_hass.js";
import "../components/demo-cards.js";
+const ENTITIES = [
+ getEntity("device_tracker", "demo_paulus", "home", {
+ source_type: "gps",
+ latitude: 32.877105,
+ longitude: 117.232185,
+ gps_accuracy: 91,
+ battery: 71,
+ friendly_name: "Paulus",
+ }),
+ getEntity("media_player", "living_room", "playing", {
+ volume_level: 1,
+ is_volume_muted: false,
+ media_content_id: "eyU3bRy2x44",
+ media_content_type: "movie",
+ media_duration: 300,
+ media_position: 45.017773,
+ media_position_updated_at: "2018-07-19T10:44:45.919514+00:00",
+ media_title: "♥♥ The Best Fireplace Video (3 hours)",
+ app_name: "YouTube",
+ sound_mode: "Dummy Music",
+ sound_mode_list: ["Dummy Music", "Dummy Movie"],
+ shuffle: false,
+ friendly_name: "Living Room",
+ entity_picture:
+ "/api/media_player_proxy/media_player.living_room?token=e925f8db7f7bd1f317e4524dcb8333d60f6019219a3799a22604b5787f243567&cache=bc2ffb49c4f67034",
+ supported_features: 115597,
+ }),
+ getEntity("sun", "sun", "below_horizon", {
+ next_dawn: "2018-07-19T20:48:47+00:00",
+ next_dusk: "2018-07-20T11:46:06+00:00",
+ next_midnight: "2018-07-19T16:17:28+00:00",
+ next_noon: "2018-07-20T04:17:26+00:00",
+ next_rising: "2018-07-19T21:16:31+00:00",
+ next_setting: "2018-07-20T11:18:22+00:00",
+ elevation: 67.69,
+ azimuth: 338.55,
+ friendly_name: "Sun",
+ }),
+ getEntity("cover", "kitchen_window", "open", {
+ friendly_name: "Kitchen Window",
+ supported_features: 11,
+ }),
+ getEntity("light", "kitchen_lights", "on", {
+ friendly_name: "Kitchen Lights",
+ }),
+ getEntity("light", "ceiling_lights", "off", {
+ friendly_name: "Ceiling Lights",
+ }),
+ getEntity("lock", "kitchen_door", "locked", {
+ friendly_name: "Kitchen Door",
+ }),
+];
+
const CONFIGS = [
{
heading: "Basic example",
@@ -162,7 +217,10 @@ const CONFIGS = [
class DemoPicEntity extends PolymerElement {
static get template() {
return html`
-
+
`;
}
@@ -174,6 +232,12 @@ class DemoPicEntity extends PolymerElement {
},
};
}
+
+ ready() {
+ super.ready();
+ const hass = provideHass(this.$.demos);
+ hass.addEntities(ENTITIES);
+ }
}
customElements.define("demo-hui-glance-card", DemoPicEntity);
diff --git a/gallery/src/demos/demo-hui-stack-card.js b/gallery/src/demos/demo-hui-stack-card.js
index 3a83a62d53..c06b3ffa30 100644
--- a/gallery/src/demos/demo-hui-stack-card.js
+++ b/gallery/src/demos/demo-hui-stack-card.js
@@ -1,8 +1,40 @@
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import getEntity from "../data/entity.js";
+import provideHass from "../data/provide_hass.js";
import "../components/demo-cards.js";
+const ENTITIES = [
+ getEntity("light", "kitchen_lights", "on", {
+ friendly_name: "Kitchen Lights",
+ }),
+ getEntity("device_tracker", "demo_paulus", "work", {
+ source_type: "gps",
+ latitude: 32.877105,
+ longitude: 117.232185,
+ gps_accuracy: 91,
+ battery: 71,
+ friendly_name: "Paulus",
+ }),
+ getEntity("device_tracker", "demo_anne_therese", "school", {
+ source_type: "gps",
+ latitude: 32.877105,
+ longitude: 117.232185,
+ gps_accuracy: 91,
+ battery: 71,
+ friendly_name: "Anne Therese",
+ }),
+ getEntity("device_tracker", "demo_home_boy", "home", {
+ source_type: "gps",
+ latitude: 32.877105,
+ longitude: 117.232185,
+ gps_accuracy: 91,
+ battery: 71,
+ friendly_name: "Home Boy",
+ }),
+];
+
const CONFIGS = [
{
heading: "Vertical Stack",
@@ -59,7 +91,10 @@ const CONFIGS = [
class DemoStack extends PolymerElement {
static get template() {
return html`
-
+
`;
}
@@ -71,6 +106,12 @@ class DemoStack extends PolymerElement {
},
};
}
+
+ ready() {
+ super.ready();
+ const hass = provideHass(this.$.demos);
+ hass.addEntities(ENTITIES);
+ }
}
customElements.define("demo-hui-stack-card", DemoStack);
diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js
index c9d6818099..e336f6e56f 100644
--- a/gallery/src/ha-gallery.js
+++ b/gallery/src/ha-gallery.js
@@ -152,14 +152,14 @@ class HaGallery extends PolymerElement {
super.ready();
this.addEventListener("show-notification", (ev) =>
- this.$.notifications.showNotification(ev.detail.message)
+ this.$.notifications.showDialog({ message: ev.detail.message })
);
this.addEventListener("hass-more-info", (ev) => {
if (ev.detail.entityId) {
- this.$.notifications.showNotification(
- `Showing more info for ${ev.detail.entityId}`
- );
+ this.$.notifications.showDialog({
+ message: `Showing more info for ${ev.detail.entityId}`,
+ });
}
});