home-assistant / frontend Goto Github PK
View Code? Open in Web Editor NEW:lollipop: Frontend for Home Assistant
Home Page: https://demo.home-assistant.io
License: Other
:lollipop: Frontend for Home Assistant
Home Page: https://demo.home-assistant.io
License: Other
We are currently using LeafletJS web components for the map panel. However these seem to not work correctly when enabling native ShadowDOM instead of the ShadyDOM polyfill.
On top of that, the Leaflet web component development seems to have stagnated.
Since we do not use much functionality anyway, we should upgrade to a pure JS implementation using LeafletJS 1.0 instead of the LeafletJS web components.
I have my min and max temp set to between 60F and 85F in my config, linked below.
https://github.com/sgauche/homeassistant-config/blob/master/customize.yaml#L77-L78
When I slide the slider all the way to the left, the blue drag bubble disappears.
https://i.gyazo.com/8892c944562ce1b5ae206fe512fecf53.gif
This also seems to be present on mobile. Note that it doesn't happen for the high slider.
I'll tag @justweb1 because I know he has worked with the slider.
The first letter of measurement units for sensors seems to get transformed to uppercase at some point, I'm not sure where. The unit of measurement should be exactly as set in the component code.
For example, the code of the speedtest sensor correctly specifies the unit of measurement for ping in "ms" (miliseconds). The interface displays "Ms" (megaseconds).
After script/fingerprint_frontend.py the panels Disappears other than state panel
It appears as if Friendly Names with no letters are converted to numbers. This causes a crash at
https://github.com/balloob/home-assistant-polymer/blob/master/src/components/ha-zone-cards.js#L30
@russellgoldstein reported this problem in Gitter. Below is the offending API entry for his states.
{
"attributes": {
"friendly_name": 149182031255
},
"entity_id": "device_tracker.149182031255",
"last_changed": "23:09:29 16-01-2016",
"last_updated": "23:09:29 16-01-2016",
"state": "home"
}
On line 74 there is the following element
<ha-card-chooser card-data='[[computeCardDataOfCard(cards, card)]]' ></ha-entities-card>
Is this a mistake?
When specifying an entity_picture for something it just layers it on-top of the icon and I would expect that entity_picture would disable the icon.
You can see here that the regular bulb icon is behind the image that I have specified. It seems specifying icon: false or icon: ' ' in the customize file gets rid of it because its then not a valid icon name but that seems pretty hack-y.
Not sure what the vision is but I will put together a pull request where the picture disables the icon if that is the direction that you want to go.
After the PR #3719 , the sensor cards have a redundant label "attribution", which does not look pretty (see cards below).
We can leave the attribution, but remove the label "attribution" from the cards.
Issue to track frontend changes relevant to home-assistant/core#1949
I'm using chromium with german locale. Date and time formating is mixed 12/24h german/english.
Example "Sunrise" Info-Popup with timechart:
Caption: "3 hours ago" (english)
Chart X-Asis: 10:00, 18:00, ... (24h format as used in germany)
Text "Setting in 5 hours 16:25" ("hours" english, time in 24h Format)
Text "Elevation 19.59" (english number format)
Mouseover-Popup on Timeline:
Sun: 4:27 nachm. - 7:24 vorm. ("nachm." is german for PM, "vorm." is german for "AM", Time is in 12h Format which is alomst never used in germany. It should be "16:27 - 7:24")
Dauer: 14.95 hours ("Dauer" label is german but the number ist in english format)
For tracking home-assistant/core#2327
This app https://play.google.com/store/apps/details?id=com.procoit.kioskbrowser&hl=en fails to run Home-Assistant:
WebView in com.procoit.kioskbrowser (Version/4.0 Chrome/30.0.0.0)
Uncaught ReferenceError: Promise is not defined core-db0bb387f4d3bcace002d62b94baa348.js:1
z core-db0bb387f4d3bcace002d62b94baa348.js:1
Z core-db0bb387f4d3bcace002d62b94baa348.js:1
at core-db0bb387f4d3bcace002d62b94baa348.js:1
window.validateAuth core-db0bb387f4d3bcace002d62b94baa348.js:4
(anonymous function) core-db0bb387f4d3bcace002d62b94baa348.js:4
a.value core-db0bb387f4d3bcace002d62b94baa348.js:3
(anonymous function) core-db0bb387f4d3bcace002d62b94baa348.js:4
e core-db0bb387f4d3bcace002d62b94baa348.js:1
(anonymous function) core-db0bb387f4d3bcace002d62b94baa348.js:1
(anonymous function) core-db0bb387f4d3bcace002d62b94baa348.js:1
Uncaught Error: No hass property found on HOME-ASSISTANT frontend-5b306b7e7d36799b7b67f592cbe94703.html-7.js:1
window.hassBehavior.attached frontend-5b306b7e7d36799b7b67f592cbe94703.html-7.js:1
Polymer.Base._addFeature._invokeBehavior frontend-5b306b7e7d36799b7b67f592cbe94703.html.js:1
Polymer.Base._addFeature._doBehavior frontend-5b306b7e7d36799b7b67f592cbe94703.html.js:1
(anonymous function) frontend-5b306b7e7d36799b7b67f592cbe94703.html.js:1
Polymer.RenderStatus._makeReady frontend-5b306b7e7d36799b7b67f592cbe94703.html.js:1
(anonymous function) frontend-5b306b7e7d36799b7b67f592cbe94703.html.js:1
(anonymous function) frontend-5b306b7e7d36799b7b67f592cbe94703.html-56.js:2
(anonymous function) frontend-5b306b7e7d36799b7b67f592cbe94703.html-56.js:1
n frontend-5b306b7e7d36799b7b67f592cbe94703.html-56.js:1
When looking at the more-info-media_player view and trying to use the input select paper-dropdown-menu, the with of that list is determined by the length of the names. If you have short names, the list becomes to narrow to be able to use on a touch device. I'd suggest to bound it to the same with as the whole source select div.
This might be a issue with paper-dropdown-menu itself
Hi all,
I would like Firefox to save my login password in its internal keyring. However, that popup is never triggered.
I am not talking about the "remember" checkbox in the frontend login form; that works fine.
Basic formatting for UI elements like persistent_notifications and device attributes could improve the information significantly.
This could include: linebreaks as a minimum, links, and lastly bold or italics.
Examples of current UI displays that could be improved:
Can we get a front-end view like the rollershutter(up and down arrows) for the garage door component?
In src/state-summary/state-card-rollershutter.html
line 28 should be:
disabled='[[computeIsFullyOpen(stateObj)]]'>
which reads as "The up button is disabled when fully open"
and line 31:
disabled='[[computeIsFullyClosed(stateObj)]]'>
which reads as "The down button is disabled when fully closed".
Since the web optimization, if you switch developer tab tools, the complete view gets re-built.
It would be nice if data entered in these views are not lost when switching between them.
During testing there is a lot of switching between "Templates", "Entities", "Services", "Events" and copying data between them. If they reset it slows down this process significantly
Polymer 1.7 was released 4 days ago: https://github.com/Polymer/polymer/releases/tag/v1.7.0
This release includes future compatibility with Polymer 2.0 which will follow the ShadowDOM v1 spec.
We should:
<content>
to use <slot>
(see release notes for instructions):root
in custom CSS. (see release notes for instructions)When browsing a HA server from the Tesla browser, the request comes through to the server but it never gets to authentication or into the app itself. Server logs show a request coming through, but nothing more and no errors. I wish I could give more useful information, but Tesla does not have any client-side tools for debugging. I wrote them asking if they have a spec of what is and is not supported; they don't.
I figured I'd log this issue, unhelpful as it is, and if I can deduce any more info I will add it here.
Most strings are hardcoded. Strings should come from a centralized source to allow localization. Locale should be determined by browser locale.
Examples: "Sun", "Rising", "Setting".
IMO localization would improve uasbility for non-english users a lot with only little work. As soon as we have localization implemented, the community will usually provide translations within a short time.
This is not a real issue but rather an enhancement proposal. The current color picker for light colors is not a perfect choice.. Especially on mobile devices, it is a bit flimsy and sometimes more hit-and-miss. Also, the color palette makes not sense for lights. I'm not familiar with Polymer, but there seems to be a project over here that appears like a great solution. It offers a round color picker (demo) as well, which would make a lot of sense since it reflects the color palette you can archive with lights.
As I mentioned, I don't have experiences with polymer but at least I could give it a try, if there is interest.
What is the reason you use both import
and require
in the js files? For example, in home-assistant-main.js you use import
to bring in Polymer, nuclearObserver, and a few others but use require
to bring in things like partial-cards and partial-logbook.
I read the readme. Does this architect you using still allow you to do a polymer build using the polymer cli and get the bundles ?
If the Serive Data
field has a spare linefeed / Enter
in it the data fails to post.
Expected behavior: Whitespace (and linefeeds) should be trimmed before validating the user input
Removes the following state-cards and more infos for the following components:
Related Code PR: home-assistant/core#4037
When the alarm_control_panel is triggered the badge in frontend says 'disarm' instead of 'trigger/triggered'. The icon does change to a filled-in bell (which I assume denotes trigger) so it's just the text that is wrong.
The status in the popup is correct.
I have the following customization:
switch.digibox:
friendly_name: 'Telenet Digibox'
icon: /local/telenet.png
The switch is a template_switch as follows:
- platform: template
switches:
digibox:
friendly_name: 'Digibox'
value_template: '{{ states.binary_sensor.digibox.state }}'
entity_id: binary_sensor.digibox
turn_on:
service: shell_command.telenet_powertoggle
turn_off:
service: mqtt.publish
data:
topic: "cec/off"
payload: "3"
In my configuration folder, I have folder www
, with the file telenet.png
. I get the file correctly when I go to localhost:8123/local/telenet.png
In the interface, there is no icon. When I specify icon: mdi:television
or something like that, it works correctly.
The line charts are too small considering that once you click on them you can't do anything else in the frontend. A lot of information is lost because of the tiny size. This feature is easy to fix.
It would be nice if some of the chart options could be editable (height, width, colors, data point labels etc.).
Thanks.
Climate controls set in auto mode need to set 2 values, a value to start cooling and a value to start heating. Currently the slider sets a target temperature and pads it with 2 values for heating and cooling.
Instead, the <paper-interval-slider>
could be implemented to allow the users to set their own min/max values for heating and cooling.
http://ewgenius.github.io/paper-interval-slider/components/paper-interval-slider/
After authentication times out from the proxy, the home assistant UI layer presents a home assistant login which doesn't do anything.
The polymer toggles are quite hard to tap when used on a mobile. I'm never able to tap them the first time, and the popup always opens.
Is it possible to add some padding around them so it's easier to tap with your fingers?
Please add the ability to hide the chart view on the more info dialogs. This could be done through the customize:
component in the configuration.yaml.
customize:
sensor.anything:
friendly_name: "Something"
icon: mdi:transparent
hideChart: true
I've noticed that when HA is stopped, started or restarted, there is a space needed in the log entry display.
Please see home-assistant/core#312 for more info.
When running Home Assistant in different languages, the automatic capitalisation of every word of a entity name can be annoying since it's not commonly written like that. Home Assistant actually ignores the case you've defined in the friendly_name
of an entity.
It does make sense to capitalize "playing" to "Playing", but not so much in capitalising "Living room lights" to "Living Room Lights".
What's the consensus regarding this? I think it makes sense to keep the text as it is configured in friendly_name
, and drop all the text-transform: capitalize
lines for entity names.
This has been reported and assumed fixed before in home-assistant/core#2055
Hi,
instead of the current page wise location of different units, I am wondering if it would be possible to have a "floorplan" view.
That is an image in the background and as an overlay, users can determine location, font formats on top for different units (Actors, Sensors ,etc.). I find this much more intuitive rather then reading columns or rows of node-names to look for the right one.
E.g. a red or green dot on a floor plan close to a window could indicate the window is open or closed. It would take a second to check whether all windows are closed.
Some text e.g. in the center of the room could indicate the room temperature and humidity.
Colour changes of the rooms floor (redrawn by an overlaid polygone) could indicate the presence of a person.
Thus, what would be needed is the ability to select an image as floorplan and a small set of indicators (circles, rectangles, polygons, text, bar) which could be changed by various parameters (colours, transparency, size, text colour, etc.).
Maybe SVG is a good start. It can be programmatically modified.
Following the Sonos recent album art fixes by @bjarniivarsson, which I love, there is one unintended side-effect. The album art when Sonos is using Line-IN (on Play:5) is messed up:
When I pause the audio, I get a similar card:
I am guessing, the problem is only when using line-in as the audio source.
Home assistant: 0.25.2
Python: 3.5.2
Browser: Chrome
Platform: Windows 10 x64
I'm using MQTT (Mosquitto) and am sending the temperature data to the broker as text (number only) with decimal commas instead of full-stops (decimal full-stops are incorrect in my country). When I configure sensors (MQTT sensor) to display the temperature, I get correct display with the icon, but the trend graph is rounded up to integer values. Please look at the pictures for more clarity. If the numbers are written with decimal full-stops, everything works correctly.
I just wanted to add that this is an awesome project, thank you, you rule!
To support some older browsers, let's conditionally include a promise polyfill.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.