bramkragten / custom-ui Goto Github PK

My Home Assistant version: 0.101.1

My lovelace configuration method (GUI or yaml):
yaml

im using swipe card with lovelace-popup-card

its possibility to add new option to the parameters list that would allow me to set the width of the slider? It could help in the case of dynamic content which is a popup window, thereby reducing the effect of unloaded js. Or maybe you have an idea how to solve the problem differently?

I cannot re-open the issue, see closed issue #14 for more info.

Hi, a little confused on how to remove the air pressure, humidity, wind speed, etc.

It should be possible to add a summary at the bottom of the card?

Thanks

I'm using weather-card with Dark Sky, and all is working correctly except the day names are one day behind (for example, on Friday, the first entry on the card is "THU").

According to the docs for Date.parse here,
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse),

Differences in assumed time zone

Given a date string of "March 7, 2014", parse() assumes a local time zone, but given an ISO format such as "2014-03-07" it will assume a time zone of UTC. Therefore Date objects produced using those strings will represent different moments in time unless the system is set with a local time zone of UTC. This means that two date strings that appear equivalent may result in two different values depending on the format of the string that is being converted (this behavior is changed in ECMAScript ed 6 so that both will be treated as local).

In your code you have this:

                              new Date(daily.datetime).toLocaleDateString(
                                lang,
                                {
                                  weekday: "short"
                                }
                              )

I changed it to:

                              new Date(daily.datetime).toLocaleDateString(
                                lang,
                                {
                                  timeZone: "UTC",
                                  weekday: "short"
                                }
                              )

And now the card displays the correct day. The daily.datetime fields are showing values like 2019-02-22T00:00:00, which seems to be correct. Is this issue specific to me or have others had this issue as well?

Hi,
Unfortunately the rainfall in mm does not work for me (dark sky problem). I can't see it in the screenshots. Is it somehow possible to remove/hide that?

Hi there,

thanks for the great card!

I followed your documentation and get the following error with the newest version of home assistant (0.86.1):

Custom element doesn't exist: weather-card.

{ "type": "custom:weather-card", "entity": "weather.yourweatherentity", "icons": "/local/custom-lovelace/weather-card/icons/" }

Browser: Firefox 64.0.2 (64-Bit)

Hello, i'm sorry but since the last update the card seems to be broken.

Before it was working fine, i really like your card.

Thanks.

When casting using Home Assistant Cast, it shows "Custom element doesn't exist: weather-card".

From reading the FAQ page of Home Assistant Card and reading the code of weather card, it's likely related to the way how LiteElement was retrieved with weather card.

const LitElement = Object.getPrototypeOf(
  customElements.get("ha-panel-lovelace")
);

FAQ page of Home Assistant Card:
https://cast.home-assistant.io/faq.html

Hi,

Thank you very much for creating this beautiful weather-card!

But, in my opinion, if you don't mind me saying, it is not "finished". It is missing the name of the city/station and optionally the name of the service-provider in/on the card. Would you consider adding at least the city name?

This is how it look on my system:

i get this error :(
do you know why?

2019-03-22 18:31:45 ERROR (MainThread) [homeassistant.core] Error doing job: Task exception was never retrieved
Traceback (most recent call last):
File "/usr/local/lib/python3.7/site-packages/homeassistant/helpers/entity.py", line 225, in async_update_ha_state
self._async_write_ha_state()
File "/usr/local/lib/python3.7/site-packages/homeassistant/helpers/entity.py", line 255, in _async_write_ha_state
attr = self.state_attributes or {}
File "/usr/local/lib/python3.7/site-packages/homeassistant/components/weather/init.py", line 121, in state_attributes
self.hass, self.temperature, self.temperature_unit,
File "/usr/local/lib/python3.7/site-packages/homeassistant/components/weather/darksky.py", line 108, in temperature_unit
return TEMP_FAHRENHEIT if 'us' in self._dark_sky.units
File "/usr/local/lib/python3.7/site-packages/homeassistant/components/weather/darksky.py", line 235, in units
return self.data.json.get('flags').get('units')
AttributeError: 'NoneType' object has no attribute 'json'

Hi,

as the title says custom_updater is depricated. The developer startet a new project called:
Home Assistant Community Store (HACS).

https://custom-components.github.io/hacs/#hacs-home-assistant-community-store

Could you please add this component to HACS?

thanks,
h4nc

is there anyway to have time show up if darksky is set to hourly instead of daily?

I'm getting this error when trying to put a picture-elements card in the swipe-card. Is this a known issue?
Works great with sensors though...

22af5b1c2d5fbf8c18791.chunk.js:3767
Uncaught (in promise) TypeError: Cannot read property 'states' of undefined

             - type: vertical-stack
                cards:
                  - id: 5164373434
                    type: custom:swipe-card
                    parameters:
                      spaceBetween: 8
                      scrollbar:
                        hide: false
                        draggable: true
                        snapOnRelease: true
                    cards:
                      - type: picture-elements
                        title: First Floor Vacuum
                        image: /local/images/xiaomi_vacuum.jpg?v=29
                        elements: 
                          - type: image
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                            entity: vacuum.vaccum_2nd_floor
                            image: /local/images/xiaomi_vacuum.png?v=7
                            style:
                              left: 43%
                              top: 38%
                      - type: picture-elements
                        title: Second Floor Vacuum
                        image: /local/images/xiaomi_vacuum.jpg?v=29
                        elements: 
                          - type: image
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                            entity: vacuum.vaccum_2nd_floor
                            image: /local/images/xiaomi_vacuum.png?v=7
                            style:
                              left: 43%
                              top: 38%

Everything works when changing "type: custom:swipe-card" to something else such as "type: horizontal-stack" so it seems it doesn't handle the picture-elements.

Weird issue, swiper card will work great after a frech cache-clean, but once its loaded i just displays the second card right below the top card

this is my config

title: My Awesome Home

resources:
- url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.1.2
  type: js
- url: /local/custom_ui/card-modder.js
  type: module
- url: /local/custom_ui/weather-card.js
  type: js
- url: /local/custom_ui/layout-card.js
  type: js
- url: /local/mini-media-player-bundle.js?v=0.9.8
  type: module
- url: https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/swipe-card/swipe-card.min.js
  type: module
- url: /local/custom-lovelace/swipe-card/swipe-card.js?v=1.1.0
  type: module
  
views:
  - id: 0
    name: Home
    panel: true
    cards:
      - type: custom:layout-card
        layout: vertical
        cards:
          - type: entities
            title: Whose Home
            show_header_toggle: false
            entities:
              - input_boolean.david_occupancy
          - type: horizontal-stack
            cards:
             - type: light
               entity: light.23460a
             - type: light
               entity: light.2349a5
             - type: light
               entity: light.dining_room
          - type: horizontal-stack
            cards:
              - type: sensor
                entity: sensor.thermostat_temperature
                name: Home Temperature
              - type: sensor
                entity: sensor.thermostat_humidity
          - type: horizontal-stack
            cards:
              - type: sensor
                entity:  sensor.tautulli
                name: Streams from Plex
              - type: sensor
                entity:  sensor.tautulli.lan_bandwidth
            name: Home Humidity
          - break
          - type: horizontal-stack
            cards:
             - type: custom:swipe-card
               path: '/local/custom-lovelace/swipe-card'
               cards:
                 - type: custom:upcoming-media-card
                   entity: sensor.plex_recently_added
                   image_style: fanart
                   title: Movies Onboard
                 - type: custom:upcoming-media-card
                   entity: sensor.sonarr_upcoming_media
                   image_style: fanart
                   title: Upcoming TV

this is the only related error i get, Sun Jan 20 2019 12:10:29 GMT-0800 (Pacific Standard Time)

http://192.168.1.214:8123/lovelace/0:0:0 Uncaught

Hi.
Unfortunatelly, swipe-card and weather-card not working in 0.86 HA version.
Here is what I have on log:
https://XXX/local/custom-lovelace/swipe-card/swipe-card.js?v=2.0.0:115:32 SyntaxError: expected dot, got '('
and
https://XXX/local/custom-lovelace/weather-card/weather-card.js?v=1.2.0:92:16 SyntaxError: expected dot, got '('

The following takes 30-60 sec to show. Without swiper-card it shows immediately.

• type: 'custom:swipe-card'
  cards:
  • unit: µS/cm
    detail: 2
    entity: sensor.front_garden_conductivity
    type: sensor
    graph: line
  • details: 2
    graph: line
    entity: sensor.front_garden_temperature
    type: sensor
    labels: true
    unit: C
  • details: 2
    graph: line
    entity: sensor.front_garden_moisture
    type: sensor
    unit: '%'

Currently the weather card doesn't work at all. I followed the installation steps as explained in the guide, however in the UI I am prompted with the following error message:

I am using Firefox 66.0.5 (64-bit) and I tried the fixes suggested in the other issues such as setting javascript.options.dynamicImport to true in the about:config.
This didn't fix the problem.
I also tried the same thing in Chrome, the problem is the same.

How can I fix this? I would really love to use this card, but currently its unusable.

When adding the custom weather-card to my lovelace configuration, the log outputs the following

2019-02-17 15:22:48 ERROR (MainThread) [frontend.js.latest.201902030] https://xxx/local/custom_lovelace/weather-card/weather-card.js:92:45 SyntaxError: dynamic module import is not implemented

Hi,
How can I change for sunrise and sunset time to be in 24-HR format.
Currently I have AM/PM format.
My HA interface is in Slovenian language.

Hi

First of all, thanks for the great works !
Custom updater will be stopped soon, HACS will replace it. it will be great if this plugin could be added to HACS (https://github.com/custom-components/hacs)

Thanks !

I have configured this according to the documentation and placed the icons in various locations but am not able to view these.

          - type: custom:weather-card
            entity: weather.thermostat
            icons: "/local/img/"

Is there something I am missing or a module that needs to be added that is not documented?

Using the UK Met Office as a weather service seems not to work correctly. There are two integrations in HA for Met Office, one as a Weather service and the other is a Sensor. Only the Weather service works and to use it the entity is as below:

• type: custom:weather-card
  entity: weather.met_office_guildford
  name: Weather

Don't know where the "guildford" component comes from but that is the nearest town so that may be generated by the Met Office api as it requires to know location for registration. The entity was determined by looking at lovelace unused entities.

The displayed card is missing a lot of the data which I'm not sure how to fix or what I need to do to understand what the card requires.

Ignore sun rise and set times as this screen capture is from a different time zone to that set in HA.

The other version of the Met Office service is to use the Sensor binding which shows nothing on the card but does not throw an error.

• type: custom:weather-card
  entity: sensor.met_office_weather
  name: Weather

Any suggestions welcome.

It would be great if I could override current readings using my weather station (more accurate then darkysky predictions). Something like:

- type: custom:weather-card
  entity: weather.yourweatherentity
  humidity: sensor.humidity
  pressure: sensor.pressure
  temperature: sensor.temperature
  ...

It would be extremely nice to be able to use custom_updater to track and update this card. TO do so would require publishing releases instead of just pushing code to the repo, but this would allow people to upgrade this card easier and would assist non-power users. You can either work with those devs to get this card added to their central repo, or publish your own 5 line json file that can be manually added by the users at the time they install the module to allow tracking. Let me know if this is planned/ if any assistance is required. Shouldn't require any code changes.

Hi,

I have a problem with your custom weather card. Chrome gives me this errors:

`Failed to load resource: the server responded with a status of 404 (Not Found)
animatedcloudy.svg
Failed to load resource: the server responded with a status of 404 (Not Found)
animatedsnowy-6.svg
Failed to load resource: the server responded with a status of 404 (Not Found)
animatedcloudy-day-3.svg
Failed to load resource: the server responded with a status of 404 (Not Found)
animatedrainy-5.svg
Failed to load resource: the server responded with a status of 404 (Not Found)
09ec5360c92942c51c70.chunk.js:1032

Unable to find icon for domain weather (sunny)
domainIcon @ 09ec5360c92942c51c70.chunk.js:1032
workbox-core.prod.js:1 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
at Object. (workbox-core.prod.js:1)
at Generator.next ()
at n (workbox-core.prod.js:1)
at workbox-core.prod.js:1
at
workbox-core.prod.js:1

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
at Object. (workbox-core.prod.js:1)
at Generator.next ()
at n (workbox-core.prod.js:1)
at workbox-core.prod.js:1
at `

Actually the card doesn't have the aspetc it should.
Thanks for your help.

Would it be an idea to display as the main icon, the correct moon phase, after the sun has set?

Hi,
On firefox i've this error:

Custom element doesn't exist: weather-card.

{
"type": "custom:weather-card",
"entity": "weather.weather",
"icons": "/local/weather-card/icons/"
}

On Safari works fine.
Thanks.

I have a problem where randomly it looks like the cards inside my swiper don’t work. None of the cards inside my swiper are custom cards (just entities or gauge cards). It honestly seems to happen 50% of the time and I haven’t been able to find a pattern. It happens on both chrome on mobile and ff and chrome on desktop. I have some pics of what happens on mobile. http://imgur.com/a/f57kfkS

Nothing is popping up in the Dev Tools console. I did though find out that any adjustment of the browser window fixes the problem momentarily. Though if I refresh the page it goes back to being incorrect. And it seems to always jump to the last card when it “fixes” itself.

I'm running HassOS. I've had this problem for a while it seems, but my version is 0.88.2

Hi,
weather-card is working fine for me, updated to 0.86.1 and it is still running.
Sadly the current day (FRI) is repeated for the next days in the forecast. Thanks for your work!

card is not working
i have this error in my lovelace and log

Hello. When comparing the resoltion of the svg icons in animated card vs the original HA card, it's clear that in the animated card the icons lose resolution (it seems the rendering is not vectorial)

path to icons should be 'local/blah/blah/icons' not '/config/www/blah/blah/icons'

With config/www it tries loading the icons from url/config/www/blah/icons as opposed to url/blah/icons