diff --git a/gallery/src/components/demo-cards.js b/gallery/src/components/demo-cards.js
index ef628f1aef..e71c2cf8e2 100644
--- a/gallery/src/components/demo-cards.js
+++ b/gallery/src/components/demo-cards.js
@@ -15,7 +15,6 @@ class DemoCards extends PolymerElement {
justify-content: center;
}
demo-card {
- display: block;
margin: 16px 16px 32px;
}
app-toolbar {
@@ -36,7 +35,6 @@ class DemoCards extends PolymerElement {
@@ -46,9 +44,7 @@ class DemoCards extends PolymerElement {
static get properties() {
return {
- configs: {
- type: Object,
- },
+ configs: Object,
showConfig: {
type: Boolean,
value: false,
diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js
new file mode 100644
index 0000000000..d4c9b3e3fb
--- /dev/null
+++ b/gallery/src/demos/demo-hui-entities-card.js
@@ -0,0 +1,96 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../components/demo-cards.js';
+
+const CONFIGS = [
+ {
+ heading: 'Basic',
+ config: `
+- type: entities
+ entities:
+ - scene.romantic_lights
+ - device_tracker.demo_paulus
+ - cover.kitchen_window
+ - group.kitchen
+ - lock.kitchen_door
+ - light.bed_light
+ - light.non_existing
+ `
+ },
+ {
+ heading: 'With title, toggle-able',
+ config: `
+- type: entities
+ entities:
+ - scene.romantic_lights
+ - device_tracker.demo_paulus
+ - cover.kitchen_window
+ - group.kitchen
+ - lock.kitchen_door
+ - light.bed_light
+ title: Random group
+ `
+ },
+ {
+ heading: 'With title, toggle = false',
+ config: `
+- type: entities
+ entities:
+ - scene.romantic_lights
+ - device_tracker.demo_paulus
+ - cover.kitchen_window
+ - group.kitchen
+ - lock.kitchen_door
+ - light.bed_light
+ title: Random group
+ show_header_toggle: false
+ `
+ },
+ {
+ heading: 'With title, cant\'t toggle',
+ config: `
+- type: entities
+ entities:
+ - device_tracker.demo_paulus
+ title: Random group
+ `
+ },
+ {
+ heading: 'Custom name, secondary info',
+ config: `
+- type: entities
+ entities:
+ - entity: scene.romantic_lights
+ name: ¯\\_(ツ)_/¯
+ - entity: device_tracker.demo_paulus
+ secondary_info: entity-id
+ - entity: cover.kitchen_window
+ secondary_info: last-changed
+ - group.kitchen
+ - lock.kitchen_door
+ - light.bed_light
+ title: Random group
+ show_header_toggle: false
+ `
+ },
+];
+
+class DemoEntities extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+
+ static get properties() {
+ return {
+ _configs: {
+ type: Object,
+ value: CONFIGS
+ }
+ };
+ }
+}
+
+customElements.define('demo-hui-entities-card', DemoEntities);
diff --git a/gallery/src/demos/demo-hui-entity-filter-card.js b/gallery/src/demos/demo-hui-entity-filter-card.js
new file mode 100644
index 0000000000..b49bf6070c
--- /dev/null
+++ b/gallery/src/demos/demo-hui-entity-filter-card.js
@@ -0,0 +1,61 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../components/demo-cards.js';
+
+const CONFIGS = [
+ {
+ heading: 'Basic',
+ config: `
+- type: entity-filter
+ entities:
+ - device_tracker.demo_anne_therese
+ - device_tracker.demo_home_boy
+ - device_tracker.demo_paulus
+ - light.bed_light
+ - light.ceiling_lights
+ - light.kitchen_lights
+ state_filter:
+ - "on"
+ - not_home
+ `
+ },
+ {
+ heading: 'With card config',
+ config: `
+- type: entity-filter
+ entities:
+ - device_tracker.demo_anne_therese
+ - device_tracker.demo_home_boy
+ - device_tracker.demo_paulus
+ - light.bed_light
+ - light.ceiling_lights
+ - light.kitchen_lights
+ state_filter:
+ - "on"
+ - not_home
+ card:
+ type: glance
+ show_state: false
+ `
+ },
+];
+
+class DemoFilter extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+
+ static get properties() {
+ return {
+ _configs: {
+ type: Object,
+ value: CONFIGS
+ }
+ };
+ }
+}
+
+customElements.define('demo-hui-entity-filter-card', DemoFilter);
diff --git a/gallery/src/demos/demo-hui-iframe-card.js b/gallery/src/demos/demo-hui-iframe-card.js
new file mode 100644
index 0000000000..e6799470ea
--- /dev/null
+++ b/gallery/src/demos/demo-hui-iframe-card.js
@@ -0,0 +1,57 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../components/demo-cards.js';
+
+const CONFIGS = [
+ {
+ heading: 'Without title',
+ config: `
+- type: iframe
+ url: https://embed.windy.com/embed2.html
+ `
+ },
+ {
+ heading: 'With title',
+ config: `
+- type: iframe
+ url: https://embed.windy.com/embed2.html
+ title: Weather radar
+ `
+ },
+ {
+ heading: 'Height-Width 3:4',
+ config: `
+- type: iframe
+ url: https://embed.windy.com/embed2.html
+ aspect_ratio: 75%
+ `
+ },
+ {
+ heading: 'Height-Width 1:1',
+ config: `
+- type: iframe
+ url: https://embed.windy.com/embed2.html
+ aspect_ratio: 100%
+ `
+ },
+];
+
+class DemoIframe extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+
+ static get properties() {
+ return {
+ _configs: {
+ type: Object,
+ value: CONFIGS
+ }
+ };
+ }
+}
+
+customElements.define('demo-hui-iframe-card', DemoIframe);
diff --git a/gallery/src/demos/demo-hui-map-card.js b/gallery/src/demos/demo-hui-map-card.js
new file mode 100644
index 0000000000..35efd0ae51
--- /dev/null
+++ b/gallery/src/demos/demo-hui-map-card.js
@@ -0,0 +1,55 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../components/demo-cards.js';
+
+const CONFIGS = [
+ {
+ heading: 'Without title',
+ config: `
+- type: map
+ entities:
+ - entity: device_tracker.demo_paulus
+ - zone.home
+ `
+ },
+ {
+ heading: 'With title',
+ config: `
+- type: map
+ entities:
+ - entity: device_tracker.demo_paulus
+ - zone.home
+ title: Where is Paulus?
+ `
+ },
+ {
+ heading: 'Height-Width 1:2',
+ config: `
+- type: map
+ entities:
+ - entity: device_tracker.demo_paulus
+ - zone.home
+ aspect_ratio: 50%
+ `
+ },
+];
+
+class DemoMap extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+
+ static get properties() {
+ return {
+ _configs: {
+ type: Object,
+ value: CONFIGS
+ }
+ };
+ }
+}
+
+customElements.define('demo-hui-map-card', DemoMap);
diff --git a/gallery/src/demos/demo-hui-markdown-card.js b/gallery/src/demos/demo-hui-markdown-card.js
new file mode 100644
index 0000000000..8d2eb15ca7
--- /dev/null
+++ b/gallery/src/demos/demo-hui-markdown-card.js
@@ -0,0 +1,272 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../components/demo-cards.js';
+
+const CONFIGS = [
+ {
+ heading: 'markdown-it demo',
+ config: `
+- type: markdown
+ content: >
+ # h1 Heading 8-)
+
+ ## h2 Heading
+
+ ### h3 Heading
+
+ #### h4 Heading
+
+ ##### h5 Heading
+
+ ###### h6 Heading
+
+
+ ## Horizontal Rules
+
+ ___
+
+ ---
+
+ ***
+
+
+ ## Typographic replacements
+
+ Enable typographer option to see result.
+
+ (c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+ test.. test... test..... test?..... test!....
+
+ !!!!!! ???? ,, -- ---
+
+ "Smartypants, double quotes" and 'single quotes'
+
+
+ ## Emphasis
+
+ **This is bold text**
+
+ __This is bold text__
+
+ *This is italic text*
+
+ _This is italic text_
+
+ ~~Strikethrough~~
+
+
+ ## Blockquotes
+
+
+ > Blockquotes can also be nested...
+ >> ...by using additional greater-than signs right next to each other...
+ > > > ...or with spaces between arrows.
+
+
+ ## Lists
+
+ Unordered
+
+ + Create a list by starting a line with \`+\`, \`-\`, or \`*\`
+ + Sub-lists are made by indenting 2 spaces:
+ - Marker character change forces new list start:
+ * Ac tristique libero volutpat at
+ + Facilisis in pretium nisl aliquet
+ - Nulla volutpat aliquam velit
+ + Very easy!
+
+
+ Ordered
+
+ 1. Lorem ipsum dolor sit amet
+ 2. Consectetur adipiscing elit
+ 3. Integer molestie lorem at massa
+
+
+ 1. You can use sequential numbers...
+ 1. ...or keep all the numbers as \`1.\`
+
+ Start numbering with offset:
+
+ 57. foo
+ 1. bar
+
+
+ ## Code
+
+ Inline \`code\`
+
+ Indented code
+
+ // Some comments
+ line 1 of code
+ line 2 of code
+ line 3 of code
+
+
+ Block code "fences"
+
+ \`\`\`
+ Sample text here...
+ \`\`\`
+
+ Syntax highlighting
+
+ \`\`\` js
+ var foo = function (bar) {
+ return bar++;
+ };
+
+ console.log(foo(5));
+ \`\`\`
+
+ ## Tables
+
+ | Option | Description |
+ | ------ | ----------- |
+ | data | path to data files to supply the data that will be passed into templates. |
+ | engine | engine to be used for processing templates. Handlebars is the default. |
+ | ext | extension to be used for dest files. |
+
+ Right aligned columns
+
+ | Option | Description |
+ | ------:| -----------:|
+ | data | path to data files to supply the data that will be passed into templates. |
+ | engine | engine to be used for processing templates. Handlebars is the default. |
+ | ext | extension to be used for dest files. |
+
+
+ ## Links
+
+ [link text](http://dev.nodeca.com)
+
+ [link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+
+ ## Images
+
+ 
+ 
+
+ Like links, Images also have a footnote style syntax
+
+ ![Alt text][id]
+
+ With a reference later in the document defining the URL location:
+
+ [id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
+
+
+ ## Plugins
+
+ The killer feature of \`markdown-it\` is very effective support of
+ [syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
+
+
+ ### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
+
+ > Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
+ >
+ > Shortcuts (emoticons): :-) :-( 8-) ;)
+
+ see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
+
+
+ ### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
+
+ - 19^th^
+ - H~2~O
+
+
+ ### [
](https://github.com/markdown-it/markdown-it-ins)
+
+ ++Inserted text++
+
+
+ ### [](https://github.com/markdown-it/markdown-it-mark)
+
+ ==Marked text==
+
+
+ ### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
+
+ Footnote 1 link[^first].
+
+ Footnote 2 link[^second].
+
+ Inline footnote^[Text of inline footnote] definition.
+
+ Duplicated footnote reference[^second].
+
+ [^first]: Footnote **can have markup**
+
+ and multiple paragraphs.
+
+ [^second]: Footnote text.
+
+
+ ### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
+
+ Term 1
+
+ : Definition 1
+ with lazy continuation.
+
+ Term 2 with *inline markup*
+
+ : Definition 2
+
+ { some code, part of Definition 2 }
+
+ Third paragraph of definition 2.
+
+ _Compact style:_
+
+ Term 1
+ ~ Definition 1
+
+ Term 2
+ ~ Definition 2a
+ ~ Definition 2b
+
+
+ ### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
+
+ This is HTML abbreviation example.
+
+ It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+ *[HTML]: Hyper Text Markup Language
+
+ ### [Custom containers](https://github.com/markdown-it/markdown-it-container)
+
+ ::: warning
+ *here be dragons*
+ :::
+ `
+ },
+];
+
+class DemoMarkdown extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+
+ static get properties() {
+ return {
+ _configs: {
+ type: Object,
+ value: CONFIGS
+ }
+ };
+ }
+}
+
+customElements.define('demo-hui-markdown-card', DemoMarkdown);
diff --git a/gallery/src/demos/demo-hui-picture-entity-card.js b/gallery/src/demos/demo-hui-picture-entity-card.js
index fa75cca207..7d2d414a93 100644
--- a/gallery/src/demos/demo-hui-picture-entity-card.js
+++ b/gallery/src/demos/demo-hui-picture-entity-card.js
@@ -1,60 +1,65 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-import '../../../src/panels/lovelace/cards/hui-picture-entity-card.js';
-
-import HomeAssistant from '../data/hass.js';
-import demoStates from '../data/demo_dump.js';
+import '../components/demo-cards.js';
const CONFIGS = [
{
- type: 'picture-entity',
- image: 'https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490',
- entity: 'light.bed_light',
+ heading: 'State on',
+ config: `
+- type: picture-entity
+ image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg
+ entity: light.kitchen_lights
+ `
},
{
- type: 'picture-entity',
- image: 'https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490',
- entity: 'light.kitchen_lights',
+ heading: 'State off',
+ config: `
+- type: picture-entity
+ image: https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg
+ entity: light.bed_light
+ `
},
{
- type: 'picture-glance',
- image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
- entity: 'light.non_existing'
+ heading: 'Entity unavailable',
+ config: `
+- type: picture-entity
+ image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
+ entity: light.non_existing
+ `
+ },
+ {
+ heading: 'Camera entity',
+ config: `
+- type: picture-entity
+ entity: camera.demo_camera
+ `
+ },
+ {
+ heading: 'Hidden info',
+ config: `
+- type: picture-entity
+ image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg
+ entity: light.kitchen_lights
+ show_info: false
+ `
},
];
class DemoPicEntity extends PolymerElement {
static get template() {
return html`
-
-
-
+
`;
}
- ready() {
- super.ready();
-
- const root = this.$.root;
- const hass = new HomeAssistant();
- hass.states = demoStates;
- console.log(demoStates);
- CONFIGS.forEach((config) => {
- const el = document.createElement('hui-picture-entity-card');
- el.setConfig(config);
- el.hass = hass;
- root.appendChild(el);
- });
+ static get properties() {
+ return {
+ _configs: {
+ type: Object,
+ value: CONFIGS
+ }
+ };
}
}
diff --git a/gallery/src/demos/demo-hui-picture-glance-card.js b/gallery/src/demos/demo-hui-picture-glance-card.js
index 62c415ad2f..2990334d6c 100644
--- a/gallery/src/demos/demo-hui-picture-glance-card.js
+++ b/gallery/src/demos/demo-hui-picture-glance-card.js
@@ -1,91 +1,92 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-import '../../../src/panels/lovelace/cards/hui-picture-glance-card.js';
-
-import HomeAssistant from '../data/hass.js';
-import demoStates from '../data/demo_dump.js';
+import '../components/demo-cards.js';
const CONFIGS = [
{
- type: 'picture-glance',
- image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
- title: 'Picture glance',
- entities: [
- 'switch.decorative_lights',
- 'light.ceiling_lights',
- 'binary_sensor.movement_backyard',
- 'binary_sensor.basement_floor_wet',
- ]
+ heading: 'Title, dialog, toggle',
+ config: `
+- type: picture-glance
+ image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
+ title: Living room
+ entities:
+ - switch.decorative_lights
+ - light.ceiling_lights
+ - binary_sensor.movement_backyard
+ - binary_sensor.basement_floor_wet
+ `
},
{
- type: 'picture-glance',
- image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
- entities: [
- 'switch.decorative_lights',
- 'light.ceiling_lights',
- 'binary_sensor.movement_backyard',
- 'binary_sensor.basement_floor_wet',
- ]
+ heading: 'Title, dialog, no toggle',
+ config: `
+- type: picture-glance
+ image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
+ title: Living room
+ entities:
+ - binary_sensor.movement_backyard
+ - binary_sensor.basement_floor_wet
+ `
},
{
- type: 'picture-glance',
- image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
- title: 'Picture glance',
- entities: [
- 'switch.decorative_lights',
- 'light.ceiling_lights',
- ]
+ heading: 'Title, no dialog, toggle',
+ config: `
+- type: picture-glance
+ image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
+ title: Living room
+ entities:
+ - switch.decorative_lights
+ - light.ceiling_lights
+ `
},
{
- type: 'picture-glance',
- image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
- entities: [
- 'switch.decorative_lights',
- 'light.ceiling_lights',
- ]
+ heading: 'No title, dialog, toggle',
+ config: `
+- type: picture-glance
+ image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
+ entities:
+ - switch.decorative_lights
+ - light.ceiling_lights
+ - binary_sensor.movement_backyard
+ - binary_sensor.basement_floor_wet
+ `
},
{
- type: 'picture-glance',
- image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
- entities: [
- 'binary_sensor.movement_backyard',
- 'binary_sensor.basement_floor_wet',
- ]
+ heading: 'No title, dialog, no toggle',
+ config: `
+- type: picture-glance
+ image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
+ entities:
+ - binary_sensor.movement_backyard
+ - binary_sensor.basement_floor_wet
+ `
+ },
+ {
+ heading: 'No title, no dialog, toggle',
+ config: `
+- type: picture-glance
+ image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
+ entities:
+ - switch.decorative_lights
+ - light.ceiling_lights
+ `
},
];
class DemoPicGlance extends PolymerElement {
static get template() {
return html`
-
-
-
+
`;
}
- ready() {
- super.ready();
-
- const root = this.$.root;
- const hass = new HomeAssistant();
- hass.states = demoStates;
- console.log(demoStates);
- CONFIGS.forEach((config) => {
- const el = document.createElement('hui-picture-glance-card');
- el.setConfig(config);
- el.hass = hass;
- root.appendChild(el);
- });
+ static get properties() {
+ return {
+ _configs: {
+ type: Object,
+ value: CONFIGS
+ }
+ };
}
}
diff --git a/gallery/src/demos/demo-hui-stack-card.js b/gallery/src/demos/demo-hui-stack-card.js
new file mode 100644
index 0000000000..7762a3818c
--- /dev/null
+++ b/gallery/src/demos/demo-hui-stack-card.js
@@ -0,0 +1,76 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../components/demo-cards.js';
+
+const CONFIGS = [
+ {
+ heading: 'Vertical Stack',
+ config: `
+- type: vertical-stack
+ cards:
+ - type: picture-entity
+ image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg
+ entity: light.kitchen_lights
+ - type: glance
+ entities:
+ - device_tracker.demo_anne_therese
+ - device_tracker.demo_home_boy
+ - device_tracker.demo_paulus
+ `
+ },
+ {
+ heading: 'Horizontal Stack',
+ config: `
+- type: horizontal-stack
+ cards:
+ - type: picture-entity
+ image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg
+ entity: light.kitchen_lights
+ - type: glance
+ entities:
+ - device_tracker.demo_anne_therese
+ - device_tracker.demo_home_boy
+ - device_tracker.demo_paulus
+ `
+ },
+ {
+ heading: 'Combination of both',
+ config: `
+- type: vertical-stack
+ cards:
+ - type: horizontal-stack
+ cards:
+ - type: picture-entity
+ image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg
+ entity: light.kitchen_lights
+ - type: glance
+ entities:
+ - device_tracker.demo_anne_therese
+ - device_tracker.demo_home_boy
+ - device_tracker.demo_paulus
+ - type: picture-entity
+ image: https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg
+ entity: light.bed_light
+ `
+ },
+];
+
+class DemoStack extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+
+ static get properties() {
+ return {
+ _configs: {
+ type: Object,
+ value: CONFIGS
+ }
+ };
+ }
+}
+
+customElements.define('demo-hui-stack-card', DemoStack);