Add configurable filter and state_filter to hui-image.#1423
Conversation
ghost
added
the
| } | ||
|
|
||
| const stateImg = !unavailable ? this.stateImage[state.state] : this.stateImage.unavailable; | ||
| _updateStateFilter(state, unavailable) { |
There was a problem hiding this comment.
we should call it stateObj. Isn't it redundant to have both, stateObj and unavailable? If it's unav. stateObj should be undefined?
There was a problem hiding this comment.
Yeah it's a little redundant, but I already checked that it was an object in _hassChanged() so I figured I would just pass that to the method as well to avoid checking it again before trying to access .state. I can just check it in _updateStateFilter() too if you prefer it that way
There was a problem hiding this comment.
I suggest we get rid of the unavailable variable 👍
| @@ -108,18 +110,35 @@ class HuiImage extends LocalizeMixin(PolymerElement) { | |||
|
|
|||
| const state = hass.states[this.entity]; | |||
| _imageSrc: null, | ||
| _error: true | ||
| }); | ||
| this.$.image.classList.add('hidden'); |
There was a problem hiding this comment.
Should we hide it or render a broken image?
We could have a CSS like this:
background: grey url(https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2018/06/Broken-image-icon-in-Chrome.gif) center/30px no-repeat
height: 100px;(we should obviously include the image in our repo)
There was a problem hiding this comment.
Also, height should be the height of the last loaded image if available.
There was a problem hiding this comment.
👍 I like this. I'm at work, but I'll try to get an update in this morning
| _imageSrc: stateImg || this.image | ||
| }); | ||
| const isOff = !stateObj || STATES_OFF.includes(stateObj.state); | ||
| this.$.image.style.filter = filter || (isOff && this._imageFallback && DEFAULT_FILTER) || ''; |
There was a problem hiding this comment.
This shit is getting so crazy, I feel like we need to add tests to make sure that all use cases are getting covered.
(out of scope for this PR)
|
The latest commit should fix home-assistant/ui-schema#89 as well. I'm not sure how to test turning off a camera, but it handles camera fetch promise rejection now |
|
Just turn Home Assistant off while you keep the frontend open 😉 |
| } | ||
|
|
||
| #brokenImage { | ||
| background: grey url('/static/images/broken_image.gif') center/30px no-repeat; |
There was a problem hiding this comment.
Don't include a 250px image if we are only rendering it at 30px. Resize it.
|
Updated image with one from material design icons:
|
4 participants
Doesn't change any current cards, but will allow for more customization of images on picture-elements cards.
fix home-assistant/ui-schema#89