-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #23 from sanzoghenzo/add-headers
Major refactor + graphical config
- Loading branch information
Showing
4 changed files
with
389 additions
and
214 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,94 +1,102 @@ | ||
| # Refreshable Picture card # | ||
|
|
||
|
|
||
| <img src="https://github.com/dimagoltsman/refreshable-picture-card/raw/master/example1.png" height="400"> | ||
|
|
||
| <img src="https://github.com/dimagoltsman/refreshable-picture-card/raw/master/example2.png" height="400"> | ||
|
|
||
| ``` | ||
| ```yaml | ||
| resources: | ||
| - url: /hacsfiles/refreshable-picture-card/refreshable-picture-card.js | ||
| type: module | ||
| ``` | ||
| Configuration is very easy, and can be done graphically. | ||
| configuration is very easy. you can set a picture from a URL or a picture from an entity attribute | ||
| You can set a picture from a URL or a picture from an entity attribute. | ||
| attribute picture example: | ||
| | Name | Description | Required | | ||
| | ------------------ | --------------------------------------------------------- | -------------------------------- | | ||
| | `title` | Cart title | no | | ||
| | `refresh_interval` | Time in seconds between refreshes. Defaults to 30 seconds | yes | | ||
| | `url` | URL of the picture. Can be a local path. | mutually exclusive with `entity` | | ||
| | `entity` | Picture entity | mutually exclusive with `url` | | ||
| | `attribute` | Entity attribute | no | | ||
| | `tap_action` | Action on tap | no | | ||
| | `noMargin` | Whether to disable the margin around the picture. | no | | ||
|
|
||
| ``` | ||
| Attribute picture example: | ||
|
|
||
| ```yaml | ||
| type: 'custom:refreshable-picture-card' | ||
| title: My Mibox | ||
| update_interval: 3 # default is 30 | ||
| entity_picture: media_player.livingroom_mibox | ||
| refresh_interval: 3 | ||
| entity: media_player.livingroom_mibox | ||
| attribute: entity_picture | ||
| ``` | ||
|
|
||
| url image example: | ||
| ``` | ||
|
|
||
| ```yaml | ||
| type: 'custom:refreshable-picture-card' | ||
| title: My Mibox | ||
| update_interval: 3 # default is 30 | ||
| static_picture: /api/media_player_proxy/media_player.livingroom_mibox?token=11111111111111222222222233333333&cache=1589898123.724253 | ||
| refresh_interval: 3 | ||
| url: /api/media_player_proxy/media_player.livingroom_mibox?token=11111111111111222222222233333333&cache=1589898123.724253 | ||
| ``` | ||
|
|
||
| reolink camera snap url example: | ||
| Reolink camera snap url example: | ||
|
|
||
| ``` | ||
| ```yaml | ||
| type: 'custom:refreshable-picture-card' | ||
| title: Reolink Camera | ||
| update_interval: 1 | ||
| static_picture: http://192.168.1.174/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=someString&user=username&password=password | ||
| refresh_interval: 1 | ||
| url: http://192.168.1.174/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=someString&user=username&password=password | ||
| ``` | ||
|
|
||
| tap action example: | ||
| Tap action example: | ||
|
|
||
| ``` | ||
| ```yaml | ||
| type: 'custom:refreshable-picture-card' | ||
| title: Reolink Camera | ||
| update_interval: 1 | ||
| static_picture: http://192.168.1.174/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=someString&user=username&password=password | ||
| refresh_interval: 1 | ||
| url: http://192.168.1.174/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=someString&user=username&password=password | ||
| tap_action: | ||
| call: remote.send_command | ||
| action: call-service | ||
| service: remote.send_command | ||
| data: | ||
| entity_id: remote.living_room_remote | ||
| command: b64:JgCgAJSSEg8QEBIPERAPMhEyDxERDxAxEDESLxAyEREPEREQEBAQlBARDxIQEBAREi8PMhEvEhAQMRExDzIREBARDhISDhAyEBEQEQ8REi8RAAdclJMRDxAREREPEREwEi8SEBARDzIQMhAwDzESEBARERAQEBKSEg8QEBAREREPMREyDjESDhIwETESLxEQEBEREBAQETAPERERERAQMRAADQUAAAAAAAAAAA== | ||
| ``` | ||
|
|
||
| no margin (full card picture) example: | ||
|
|
||
| ``` | ||
| ```yaml | ||
| type: 'custom:refreshable-picture-card' | ||
| static_picture: http://192.168.1.174/weatherForecast/weather.jpg | ||
| url: http://192.168.1.174/weatherForecast/weather.jpg | ||
| noMargin: true | ||
| ``` | ||
|
|
||
| navigate example (onclick, open url in new tab): | ||
| navigate example (onclick, open url in new tab): | ||
|
|
||
| ``` | ||
| ```yaml | ||
| type: 'custom:refreshable-picture-card' | ||
| title: Reolink Camera | ||
| update_interval: 1 | ||
| static_picture: http://192.168.1.174/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=someString&user=username&password=password | ||
| navigate: https://github.com/dimagoltsman/refreshable-picture-card/ | ||
| refresh_interval: 1 | ||
| url: http://192.168.1.174/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=someString&user=username&password=password | ||
| tap_action: | ||
| action: url | ||
| url_path: https://github.com/dimagoltsman/refreshable-picture-card/ | ||
| ``` | ||
| navigate_local example (onclick, change local/lovelace tab): | ||
|
|
||
| ``` | ||
| navigate_local example (onclick, change local/lovelace tab): | ||
|
|
||
| ```yaml | ||
| type: 'custom:refreshable-picture-card' | ||
| title: Reolink Camera | ||
| update_interval: 1 | ||
| static_picture: http://192.168.1.174/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=someString&user=username&password=password | ||
| navigate_local: camera | ||
| refresh_interval: 1 | ||
| url: http://192.168.1.174/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=someString&user=username&password=password | ||
| tap_action: | ||
| action: navigate | ||
| navigation_path: camera | ||
| ``` | ||
|
|
||
|
|
||
| # you are also welcome to contribute # | ||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| import { | ||
| LitElement, | ||
| html, | ||
| css, | ||
| } from "https://unpkg.com/[email protected]/lit-element.js?module"; | ||
| import { fireEvent } from "./utils.js"; | ||
|
|
||
| const SCHEMA = [ | ||
| { name: "title", selector: { text: {} } }, | ||
| { name: "url", selector: { text: {} } }, | ||
| { | ||
| name: "", | ||
| type: "grid", | ||
| schema: [ | ||
| { name: "entity", selector: { entity: {} } }, | ||
| { | ||
| name: "attribute", | ||
| selector: { attribute: { entity_id: "" } }, | ||
| context: { filter_entity: "entity" }, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| name: "", | ||
| type: "grid", | ||
| schema: [{ name: "tap_action", selector: { "ui-action": {} } }], | ||
| }, | ||
| { | ||
| name: "refresh_interval", | ||
| required: true, | ||
| selector: { number: { min: 1 } }, | ||
| }, | ||
| { name: "noMargin", selector: { boolean: {} } }, | ||
| ]; | ||
|
|
||
| class ResfeshablePictureCardEditor extends LitElement { | ||
| static properties = { | ||
| hass: {}, | ||
| _config: {}, | ||
| }; | ||
|
|
||
| setConfig(config) { | ||
| this._config = config; | ||
| } | ||
|
|
||
| render() { | ||
| if (!this.hass || !this._config) { | ||
| return html``; | ||
| } | ||
|
|
||
| return html` | ||
| <ha-form | ||
| .hass=${this.hass} | ||
| .data=${this._config} | ||
| .schema=${SCHEMA} | ||
| .computeLabel=${this._computeLabelCallback} | ||
| @value-changed=${this._valueChanged} | ||
| /> | ||
| `; | ||
| } | ||
|
|
||
| _valueChanged = (ev) => | ||
| fireEvent(this, "config-changed", { config: ev.detail.value }); | ||
|
|
||
| _computeLabelCallback = (schema) => { | ||
| const { name } = schema; | ||
| switch (name) { | ||
| case "noMargin": | ||
| return "Remove margin"; | ||
| // return this.hass.localize( | ||
| // `refreshable-picture-card.${name}` | ||
| // ); | ||
| case "refresh_interval": | ||
| return this.hass.localize( | ||
| `ui.panel.lovelace.editor.card.generic.${name}` | ||
| ); | ||
| default: | ||
| return `${this.hass.localize( | ||
| `ui.panel.lovelace.editor.card.generic.${name}` | ||
| )} (${this.hass.localize( | ||
| "ui.panel.lovelace.editor.card.config.optional" | ||
| )})`; | ||
| } | ||
| }; | ||
|
|
||
| static styles = css` | ||
| .card-config { | ||
| /* Cancels overlapping Margins for HAForm + Card Config options */ | ||
| overflow: auto; | ||
| } | ||
| ha-switch { | ||
| padding: 16px 6px; | ||
| } | ||
| .side-by-side { | ||
| display: flex; | ||
| align-items: flex-end; | ||
| } | ||
| .side-by-side > * { | ||
| flex: 1; | ||
| padding-right: 8px; | ||
| } | ||
| .side-by-side > *:last-child { | ||
| flex: 1; | ||
| padding-right: 0; | ||
| } | ||
| .suffix { | ||
| margin: 0 8px; | ||
| } | ||
| hui-action-editor, | ||
| ha-select, | ||
| ha-textfield, | ||
| ha-icon-picker { | ||
| margin-top: 8px; | ||
| display: block; | ||
| } | ||
| `; | ||
| } | ||
|
|
||
| customElements.define( | ||
| "refreshable-picture-card-editor", | ||
| ResfeshablePictureCardEditor | ||
| ); |
Oops, something went wrong.