Code Monkey home page Code Monkey logo

frontend's Introduction

Home Assistant Frontend

This is the repository for the official Home Assistant frontend.

Screenshot of the frontend

Development

  • Initial setup: script/setup
  • Development: Instructions
  • Production build: script/build_frontend
  • Gallery: cd gallery && script/develop_gallery
  • Supervisor: Instructions

Frontend development

Classic environment

A complete guide can be found at the following link. It describes a short guide for the build of project.

License

Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.

We use BrowserStack to test Home Assistant on a large variety of devices.

frontend's People

Contributors

allenporter avatar andrey-git avatar awarecan avatar balloob avatar bdraco avatar bramkragten avatar c727 avatar cgarwood avatar dependabot[bot] avatar dmulcahey avatar donkawechico avatar emlove avatar emontnemery avatar frenck avatar homeassistant avatar iantrich avatar jeradm avatar joshmcrty avatar karwosts avatar ludeeus avatar novapax avatar piitaya avatar raman325 avatar renovate[bot] avatar silamon avatar spacegaier avatar steverep avatar thomasloven avatar yosilevy avatar zsarnett avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

frontend's Issues

Names and other fields are capitalised by css

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

polymer build

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 ?

Migrate Map panel to use pure LeafletJS

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.

Hide charts

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

Toggles are hard to tap on mobile device

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?

ha-cards.html strange html closure

On line 74 there is the following element

<ha-card-chooser card-data='[[computeCardDataOfCard(cards, card)]]' ></ha-entities-card>

Is this a mistake?

ios7

Do not start the web interface on ios 7.1.1 (iphone 4s)
img_5970

Format date/time and numbers with browser locale

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)

paper-dropdown-menu more-info-media_player to small

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

inconsistent dialog width

Version
0.30.0-dev

this happens with any dialog. for example i chose humidity. opening and closing the dialog gives different width each time. to be more precise it can be one of 2, narrow or wider. so each time it's one of the two.

wider
screenshot_4

narrow
screenshot_5

Why use require and not import

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.

Add support for localization of UI strings

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.

Camera detailed view is smaller than group view (iPhone)

When clicking on the camera component to get a live view, the image is smaller than the group level view.

Sample photo (not taken on iPhone, just resized): screen shot 2016-03-28 at 8 47 05 am

I'm not familiar with this codebase yet. But do you have recommendations on how to fix this, I'd be happy to contribute the code.

Allow linebreaks in the template editor

Linebreaks are not accepted in the HASS template editor for a while. This seems to be isolated to Firefox, tried it with Chrome and Safaric on iOS and it works fine.

The default template editor screen displays the following:

20161009-000447-home assistant

[Enter] is never accepted

Remove the label "attribution" from cards

After the PR #3719 , the sensor cards have a redundant label "attribution", which does not look pretty (see cards below).

image

We can leave the attribution, but remove the label "attribution" from the cards.

Bug: Rollershutter arrows disabled reversed test

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".

GUI does not load in Tesla web browser

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.

Sonos album art when using Line-In needs to be fixed

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:

image

When I pause the audio, I get a similar card:

image

I am guessing, the problem is only when using line-in as the audio source.

Feature Request: Floorplan view

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.

Subpar color picker

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.

Dialogs appear and then move up ~10 pixels

Windows 10, Chrome and Edge.
HA 0.36.1 back to 0.34.0 (maybe earlier).

Position when first opening a Dialog:
image

Position a second after a Dialog opens (it moves up):
image

It appears and then moves up several pixels.
Reloading the same dialog opens it to the higher position, no movement.

Home-assistant doesn't work in Kiosk Browser - WebView app

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

Firefox does not save login password

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.

Upgrade to Polymer 1.7

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:

  • Upgrade bower.json to install Polymer 1.7
  • Verify all things still work
  • Migrate our uses of <content> to use <slot> (see release notes for instructions)
  • Migrate away from using :root in custom CSS. (see release notes for instructions)

Don't reset the developer tool views when switching between them

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

Garage Door

Can we get a front-end view like the rollershutter(up and down arrows) for the garage door component?

Specifying Entity Picture does not disable Icon

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.

Examples:
image

image

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.

Problem with decimal comma

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.
untitled-1
untitled-2
I just wanted to add that this is an awesome project, thank you, you rule!

Friendly Names as numbers are not handled

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"
    }

Alarm status on badge incorrect during trigger

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.

local images for icon isn't working

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.

Allow basic formatting for templates of UI elements

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:

  • persistent_notifications for invalid config [see PR HA #3738]
    20161009-000448-home assistant
  • Device attributes could benefit from having links (e.g. pointing at source data / attribution)
    20161009-000449-home assistant

Increase size of line charts, maybe add some options

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.

Input Slider heat temp disappears at lowest setting

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.
image

I'll tag @justweb1 because I know he has worked with the slider.

Wrong case on sensor units

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).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.