My Lovelace Plugins

rev3r4nt · October 5, 2018, 8:20am

Thanks, it works but i have to move to the correct directory, otherwise lovelace directory will not be found.

shell_command:
  generate_lovelace: 'cd /path/to/hass/config && /path/to/venv/bin/python /path/to/hass/config/lovelace-gen.py'

Bieniu · October 5, 2018, 8:30am

@thomasloven Hi. There is something wrong with the card margins in card-column. They are different than in the case of cards arranged one under the other. Take a look at screenshot. Is it possible to fix this somehow?

margins%20cards%20vs%20column-card

configuration

  - id: home
    icon: mdi:home
    title: 'Test'
    cards:
      - type: entities
        title: 'card 1'
        show_header_toggle: false
        entities:
          - light.lamp_salon
          - light.leds_przedpokoj
      - type: entities
        title: 'card 2'
        show_header_toggle: false
        entities:
          - light.lamp_salon
          - light.leds_przedpokoj
      - type: custom:column-card
        cards:
          - type: entities
            title: 'card 1 in column-card'
            show_header_toggle: false
            entities:
              - light.lamp_salon
              - light.leds_przedpokoj
          - type: entities
            title: 'card 2 in column-card'
            show_header_toggle: false
            entities:
              - light.lamp_salon
              - light.leds_przedpokoj

kevjs1982 · October 5, 2018, 7:42pm

Really neat, especially for display attributes without adding loads of redundant entities.

Is there any way to hide or display alternative text when an entity is null, e.g. when there is, currently, no next event in the calendar?

e.g. the right hand panel here could display “No programmes scheduled”

Abeksis · October 6, 2018, 5:29pm

Is it possible to center it?

my code:

type: vertical-stack
icon: mdi:car
panel: true
cards:
- type: custom:card-modder
  card:
  type: “custom:content-card-ituran”
  entity: ituran.skodakodiak
  style:
  “–paper-card-background-color”: “red”
  
  “–paper-item-icon-color”: “yellow”
  “color”: “white”
  “background”: “url(http://3.bp.blogspot.com/-tGNwK4MI4pU/T5pItz_GCvI/AAAAAAAACNs/fqXqJfWTJWo/s1600/Proton+Prevé+Wallpaper+1920x1080+dash+board+2.jpg”
  height: 750px

myle · October 7, 2018, 2:05am

How did you get sky data

hfrancis · October 7, 2018, 9:54am

Hi. The F1 page looks awasome, please share how you sourced the data?

kevjs1982 · October 7, 2018, 8:34pm

@hfrancis @myle - the F1 / FE data is sourced from multiple sources, but all go via Google Calendar

The main calendars are .ics files from
F1 : https://www.f1calendar.com/
FE: http://www.rmotorsportscalendar.com/

For the “Live on TV” I have a script that parses the EPG Data from TVHeadend (I’m not able to watch Sky Sports F1 HD on that, so have a channel I can’t watch via TVHeadend but appears in the listings, but then watch on Now TV)… This script runs on my media centre and writes a ics file to my web space which is subscribed in Google Calendar.

It’s a bit of a naïve script that needs tweaking every year when the channels change / wording is amended.

https://gist.github.com/kevjs1982/ce9075bd102225719f38f77c82dab5b9 has most of the code f1fe.php simply does a file_post_contents to a file based on the sport variable with a body of the ICS file generated.

emilp333 · October 8, 2018, 7:36am

Hi Thomas,

Great work on all your cards! I´ve been missing a card that reads the entities of a group like the old UI. I think the group feature makes the UI more dynamic then specify them individually.
Would it be possible to add feature to this card to set folding as an option? This means that the card also could be a simple group entity card like the old UI.

Thanks!

benm7 · October 9, 2018, 1:05am

Love the new cards! is there any way to change the color-glance card to a specific color rather than the primary colour of the theme? Which line(s) do I need to change in the .js file?

thomasloven · October 9, 2018, 7:06pm

Line 6. Replace var(--primary-color) with whatever you want.

benm7 · October 9, 2018, 11:22pm

Thanks for this. Strangely it isn;t changing the colour for me, and I also get a different colour on my iphone compared to every other device. Any ideas what might be causing this? I have cleared the cache a few times.

Martin_Granger · October 10, 2018, 6:59am

Hi there,

Just trying to do some styling using the card-modder and I’m running into a few problems.

I managed to mod some ‘custom-button’ cards, but it fails when i try to mod a ‘folding-group-entity-row’ card.

The UI will load, but no cards display (just a blanc screen).

Any ideas?

reckless · October 10, 2018, 7:08am

This is amazing stuff!

Just tried the slider-entity-row on my Hue light group (so all the lights in one room, controlled with a slider, eg light.livingroom) and while it works great on my computer browser in Chrome, it does not show up on Android (using Samsung Internet default app). This is the error I see in the logs:

http://myip:8123/static/custom-elements-es5-adapter.js:13:615 Uncaught TypeError: Class constructor SliderEntityRow cannot be invoked without ‘new’

I did test it on Chrome on my Android and it works just fine. Maybe something to do with Samsung Internet app? I do prefer that over Chrome so hopefully this is something that can be fixed?

Martin_Granger · October 10, 2018, 8:59am

My bad - formatting error!

It’s actually starting to look like a useable UI now! As I’ve said in other posts - It’s a shame you can’t just edit a CSS file. It’d cut out on loads of complication in the ui-lovelace.yaml At the moment each and every card has to have style applied. It’d be much better if this could be done on a block level in the way you would style a website!

I’ve had a play trying to do this by adding a CSS file via a .js file, but with no luck.

My lovelace code:

title: My House
resources:
  - url: /local/no-card.js
    type: module
  - url: /local/button-card.js
    type: module
#  - url: /local/monster-card.js
#    type: js
  - url: /local/guage-card.js
    type: js
#  - url: /local/styles.js
#    type: js
#  - url: /local/kiosk.js
#    type: js
#  - url: /local/group-card.js
#    type: js
  - url: /local/folding-group-entity-row.js
    type: js
  - url: /local/card-modder.js
    type: js
views:
  - title: Home
    icon: mdi:home
    theme: midnight
    background: center / cover no-repeat url("/local/bg3.jpg") fixed
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                card:
                  type: "custom:button-card"
                  entity: script.good_morning
                  icon: mdi:weather-sunset-up
                  name: "Good Morning"
                  show_state: false
                  style:
                    - text-transform: none
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
                  height: 90px
              - type: custom:card-modder
                card:
                  type: "custom:button-card"
                  entity: script.home_mode__day
                  icon: mdi:weather-sunset-down
                  name: "Dusk Lighting"
                  show_state: false
                  style:
                    - text-transform: none
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
                  height: 90px
              - type: custom:card-modder
                card:
                  type: "custom:button-card"
                  entity: script.night_night
                  icon: mdi:bed-empty
                  name: "Night Night"
                  show_state: false
                  style:
                    - text-transform: none
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
                  height: 90px
              - type: custom:card-modder
                card:
                  type: "custom:button-card"
                  entity: script.wifi_away_day_all_lights_off
                  icon: mdi:power
                  name: "All Off"
                  show_state: false
                  style:
                    - text-transform: none
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
                  height: 90px






          - type: vertical-stack
            cards:
              - type: custom:card-modder
                card:
                  type: entities
                  entities:
                    - entity: group.upstairs
                      type: "custom:folding-group-entity-row"
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
              - type: custom:card-modder
                card:
                  type: entities
                  entities:
                    - entity: group.downstairs
                      type: "custom:folding-group-entity-row"
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
              - type: custom:card-modder
                card:
                  type: entities
                  entities:
                    - entity: group.lounge
                      type: "custom:folding-group-entity-row"
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
              - type: custom:card-modder
                card:
                  type: entities
                  entities:
                    - entity: group.kitchen
                      type: "custom:folding-group-entity-row"
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white







      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                card:
                  type: "custom:button-card"
                  entity: switch.hall_downstairs_little_lamp
                  icon: mdi:cloud-question
                  name: "..."
                  show_state: false
                  style:
                    - text-transform: none
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
                  height: 90px

              - type: custom:card-modder
                card:
                  type: "custom:button-card"
                  entity: switch.hall_downstairs_little_lamp
                  icon: mdi:cloud-question
                  name: "..."
                  show_state: false
                  style:
                    - text-transform: none
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
                  height: 90px
              - type: custom:card-modder
                card:
                  type: "custom:button-card"
                  entity: switch.hall_downstairs_little_lamp
                  icon: mdi:cloud-question
                  name: "..."
                  show_state: false
                  style:
                    - text-transform: none
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
                  height: 90px
              - type: custom:card-modder
                card:
                  type: "custom:button-card"
                  entity: switch.hall_downstairs_little_lamp
                  icon: mdi:cloud-question
                  name: "..."
                  show_state: false
                  style:
                    - text-transform: none
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
                  height: 90px
          - type: vertical-stack
            cards:
              - type: custom:card-modder
                card:
                  type: entities
                  entities:
                    - entity: group.hall
                      type: "custom:folding-group-entity-row"
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
              - type: custom:card-modder
                card:
                  type: entities
                  entities:
                    - entity: group.outside
                      type: "custom:folding-group-entity-row"
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
              - type: custom:card-modder
                card:
                  type: entities
                  entities:
                    - entity: group.erins_bedroom
                      type: "custom:folding-group-entity-row"
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
              - type: custom:card-modder
                card:
                  type: entities
                  entities:
                    - entity: group.master_bedroom
                      type: "custom:folding-group-entity-row"
                style:
                  "background": "#2b2d3199"
                  border-radius: 12px
                  color: white
  - title: media
    icon: mdi:headphones
    background: center / cover no-repeat url("/local/bg3.jpg") fixed
    cards:
      - type: "custom:button-card"
        entity: script.good_morning
        icon: mdi:weather-sunset-up
        name: "Good Morning"
        show_state: false
        style:
          - border-radius: 12px
      - type: custom:card-modder
        card:
          type: "custom:button-card"
          entity: script.good_morning
          icon: mdi:weather-sunset-up
          name: "Good Morning"
          show_state: false
        style:
          "background": "#2b2d313d"
          border-radius: 12px


      - type: media-control
        entity: media_player.bedroom_apple_tv
      - type: media-control
        entity: media_player.living_room_apple_tv
  - title: Settings
    theme: midnight
    background: center / cover no-repeat url("/local/kitchen.jpg") fixed
    icon: mdi:settings
    cards:
      - type: custom:gauge-card
        title: Hall Temperature
        entity: sensor.hall_temperature
        min: -5
        max: 50
        scale: 60px
        severity:
          blue: 14
          yellow: 18
          amber: 22
          red: 28
      - type: custom:monster-card
        card:
          type: entities
          title: Monster
        filter:
          include:
            - domain: light
              state: 'off'
      - type: entities
        title: hue
        show_header_toggle: true
        entities:
          - sensor.hall_motion_sensor
          - sensor.hall_temperature
          - sensor.hall_light_level
      - type: entities
        entities:
        - entity: group.all_scripts
          type: custom:folding-group-entity-row
      - type: entities
        entities:
        - entity: group.all_automations
          type: custom:folding-group-entity-row
  - title: Weather
    icon: mdi:weather-partlycloudy
    theme: midnight
    background: center / cover no-repeat url("/local/bg3.jpg") fixed
    panel:
    cards:
      - type: vertical-stack
        cards:
          - type: weather-forecast
            entity: weather.yweather

max5962 · October 10, 2018, 11:11am

Can you share “bg_3.jpg” url please ?
And the theme used
thnaks

Martin_Granger · October 10, 2018, 11:48am

Hi, sorry the image is probably not to be shared! I have now replaced this with something else.

Just do a Google image search for hd background images. There are loads out there!

Martin_Granger · October 10, 2018, 11:49am

Also - the theme is midnight. - but heavily modded cards using the card-modder - see the start of this post.

Martin_Granger · October 10, 2018, 1:44pm

@thomasloven

I am getting this error when I load my page. If I click on to another hassio window, it goes away.

Any ideas?

wrenchse · October 10, 2018, 2:34pm

Check the info log to make sure you are using the latest version of the frontend as some Lovelace cards might otherwise load incorrectly. Otherwise force that in configuration.yaml

frontend: 
   javascript_version: latest

Martin_Granger · October 10, 2018, 4:47pm

Added that but nothing seems to have changed.

My Lovelace Plugins

“–paper-card-background-color”: “red”

“–paper-item-icon-color”: “yellow”