home-assistant
Live inline template previews
Proposed change
Not totally sure about this one, just an idea I was exploring, wanted to get some more opinions.
What if we add a button on the template selector to turn on a live template render preview, similar to developer tools. In a lot of situations I could imagine that being pretty useful, though it also has some significant limitations (like dealing with variables).
Or showing template errors:
For the future, we could integrate this more tightly into the automation editor; where if you had an action like weather.get_forecasts in the automation with a response variable, if you run that action in the editor, then the response variable gets automatically added to the context of the template previews. Or if you run a define_variables action, those variables get added to the context of the preview. So you can kind of build up these more complex workflows with a much more rich editing experience, without having to jump all around between several different developer-tool windows and copy/pasting variable data.
I imagine that could get pretty complicated though, like if you have define variables action with templates that references yet other variables.
Didn't add anything like that here yet, but was just an idea for where this might go and be useful. Maybe this is enough on it's own to be worthwhile to start?
This probably needs more work before merging, e.g. it doesn't appear in the fullscreen mode of code editor, but first wanted to see if we like something like this to continue.
Type of change
- [ ] Dependency upgrade
- [ ] Bugfix (non-breaking change which fixes an issue)
- [x] New feature (thank you!)
- [ ] Breaking change (fix/feature causing existing functionality to break)
- [ ] Code quality improvements to existing code or addition of tests
Example configuration
Additional information
- This PR fixes or closes issue: fixes #
- This PR is related to issue or discussion:
- Link to documentation pull request:
Checklist
- [x] The code change is tested and works locally.
- [x] There is no commented out code in this PR.
- [ ] Tests have been added to verify that the new code works.
If user exposed functionality or configuration variables are added/changed:
- [ ] Documentation added/updated for www.home-assistant.io
This will make template entities much easier to understand in the ui when there is more than 1 template involved. This is a very good change IMO
I love this. We already show a preview in some cases though (Template helpers, cards) so maybe it should be opt-in. This could help with the variables issue as well, as it would let us roll it out gradually only where we are confident.
We need to find a good icon for the button.
I love this. We already show a preview in some cases though (Template helpers, cards) so maybe it should be opt-in.
If not already, maybe this could be tied to 'Advanced mode' under Profile settings?
I love this. We already show a preview in some cases though (Template helpers, cards) so maybe it should be opt-in. This could help with the variables issue as well, as it would let us roll it out gradually only where we are confident.
We need to find a good icon for the button.
A calculator. Or an icon that represents results. I have a few from work (that I made) that I can share
We already show a preview in some cases though (Template helpers, cards) so maybe it should be opt-in.
I made this opt out for the markdown card, since it's definitely not needed there, but I can't really think of any other place where we would want to disable this? (devtools/template doesn't use the template selector)
Petro says he wants this for template helpers even with the existing preview, since that's previewing the overall entity result, which is not the same thing as seeing the result of rendering an individual template. (Template entities may be a combination of multiple different individual templates).
We need to find a good icon for the button.
I used the 'test' icon (flask) we already use for testing conditions, but I'm fine with something else as well.
If not already, maybe this could be tied to 'Advanced mode' under Profile settings?
I would say not since this control is on the way out, we are trying to remove it. Anyway it's probably the non-advanced users who could most benefit from the help. The really un-advanced users won't be anywhere near a template selector anyway 😅
I really like this initiative, but want to point out that this will not directly benefit users like myself that exclusively use YAML to configure automations and scripts. Of course, one can experiment via the UI and then transfer the YAML as a workaround.
@silamon IMO, the logic should stay in ha-template-selector because all ha-code-editor are not for template and I would put template specific code and checks into this component. However, we could use a slot to display the preview and then it can be included in fullscreen mode.
Some notes:
- Please use
mdi:flaskandmdi:flask-offfor states (done) - Don't wrap it in an alert, but rather use similar styling as we do have in the Developer tools -> Template view
- Also add it in the fullscreen view: On narrow screens split horizontally, on wide screens split vertically. Fullscreen could maybe reuse wa-splitpane for resizing ?
Also add it in the fullscreen view: On narrow screens split horizontally, on wide screens split vertically. Fullscreen could maybe reuse wa-splitpane for resizing ?
Is this necessary for a first iteration? Sounds pretty complex and I think it could be a followup PR.
Don't wrap it in an alert, but rather use similar styling as we do have in the Developer tools -> Template view
Is this distinguished enough, or should it have a heading w/ more separation? I thought maybe the blue background made it stand out a bit more, this blends into the card background somewhat.
I'm just curious which template parser/renderer (sorry don't know the right terminology) this preview is using. Is it the developer tools version or the one that actually parses templates in the back-end (i.e. for automations) as there were reports that the tow don't play the same game (however, perhaps that's now fixed?)
All templates are parsed in the backend. There is no frontend template parser
I'm just curious which template parser/renderer (sorry don't know the right terminology) this preview is using. Is it the developer tools version or the one that actually parses templates in the back-end (i.e. for automations) as there were reports that the tow don't play the same game (however, perhaps that's now fixed?)
It uses whatever the field is set to. And you're referring to strict rendering verses non strict.
For clarity, if it's showing the sensor state, it would be showing the sensor state rendering.
Don't wrap it in an alert, but rather use similar styling as we do have in the Developer tools -> Template view
Is this distinguished enough, or should it have a heading w/ more separation? I thought maybe the blue background made it stand out a bit more, this blends into the card background somewhat.
Let's just separate it with --space-3. Please use the same border radius that the code editor chrome has --ha-border-radius-sm
- Please use
mdi:flaskandmdi:flask-offfor states (done)
I feel that this icon is too close to the new Labs feature, and doesn't look like a preview icon, rather experimental.
Maybe, these would be better suited? Though there is no state-based icons for these, so you're better off just using state-based colours instead to indicate it's selected.
mdi:card-searchmdi:select-searchormdi:selection-searchmdi:magnifyormdi:magnify-expand- Alternatives, type 'Search' in here: https://pictogrammers.com/library/mdi/
Also, maybe the order should be placed second to last? Just want to keep everything uniformed, if not already. :)
Yes, the flask icon has been used in the HA:Labs after this PR has been created. Let's change it to:
- Turned off: mdiBug
- Turned on: mdiBugOutline Other than that, that's it from my side. Thanks!