My Lovelace Plugins

hope we’re not spamming here, otherwise make a dedicated thread?

if anything, id advise you to keep things tidy and make a sub folder for images, and keep the main folder for the resources only.

check the path in the folder title to be sure.

Ok, i will organize better my www folder, but now how to create a new thread to try to solve this problem?

Can you tell me how you got this sensor?
I mean how to create a sensor which will show the date like “16 dicembre 2018”

Thats a template sensor I made using the useful-markdown-card:

  vandaag:
    friendly_name: Vandaag
    entity_id: sensor.date
    value_template: >
      {{ now().strftime("%A %d %B %Y") }}

use it in Lovelace:

  - type: custom:useful-markdown-card
    content: >
     Vandaag is het <font color='green'>[[ sensor.vandaag.state ]]</font>.

or

  - type: custom:useful-markdown-card
    content: >
      **Weersverwachting <font color=var(--secondary-text-color)>[[ sensor.vandaag.state ]]</font>**: <font color=var(--primary-text-color)>
                [[ sensor.dark_sky_daily_summary.state ]]</font>
1 Like

Hi @thomasloven,

As usual, thanks for everything you’re doing !
I’ve been using lovelace-gen.py for quite a while now, and I recently switched from running Home assistant on a Pi with hassIo to a new setup, using a NUC and Home assistant only (so, no hassio).

I’m strugling with the usage of lovelace-gen on this new config. In the documentation, you mention that the tool needs “PyYAML, requests and Jinja2” to work properly. Those should be already installed with home assistant … but it seems that I’ve made a mistake, because when running:

./lovelace-gen.py

In my config folder, I get the following:

Traceback (most recent call last):
File “./lovelace-gen.py”, line 31, in
import yaml
ImportError: No module named ‘yaml’

So to me it looks like PyYAML is missing, but before adding it, I’d rather get some advice so I won’t install it twice on my system.

Python 3 is installed:

which python3
/usr/bin/python3

It’s different from the path specified at the beginning of your script though :/.

Env check get me this:

which env
/usr/bin/env

So … to be honest I’m lost ^^.

ps: for anyone getting errors while trying to run the script, try converting the file format to unix and run the script again.

How can I check what version number I need to put into the code after I updated and now use the new GUI Editor?

I clicked “Update all” in my Custom_Updater window, but as stated earlier, it doesn’t update the version number.
It might just me me overlooking it somewhere, but I can’t seem to find where the version number is on the github page?

This is what I have now, after I clicked the update button.

  - type: js
    url: /local/card-tools.js?v=445b68

This looks awesome. One ask, is there a way I could use this with the user_agent? I want to show a more select group of cards when on my mobile.

Thanks for all the cards you contribute.

Here is your code updated to support this feature. It was inspired by the compact-custom-header.

  set hass(hass) {
if (!hass) return;

const lastCard = this.currentCard;
if (this.config.entity === 'user_agent') {
  // Empty agent for main config at start to keep index numbers consistant.
  let user_agent = ',' + this.config.user_agent;
  user_agent = user_agent.split(',');
  let uai = 0;  // user agent index
  let found = 0;
  console.log(navigator.userAgent);
  // Find user agent's index number to grab it's config.
  for (let i = 1; i < user_agent.length; i++) {
    let regex = new RegExp(user_agent[i], 'i');
    if (regex.test(navigator.userAgent)) {
      this.currentCard = this.cards[user_agent[i]];
      found = 1;
    }
  }
  if (found === 0) {
    this.currentCard = this.cards[this.config.default];
  }
}
else if (this.config.entity === 'user') {
  this.currentCard = this.cards[hass.user.name] || this.cards[this.config.default];
} else {
  let state = hass.states[this.config.entity];
  this.currentCard = ((state) ? this.cards[state.state] : null) || this.cards[this.config.default];
}

if (this.currentCard != lastCard) {
  while (this.root.firstChild) this.root.removeChild(this.root.firstChild);
  this.root.appendChild(this.currentCard);
}

for (var k in this.cards)
  this.cards[k].hass = hass;

}

Example Usage:

- type: custom:state-switch-mod
  entity: user_agent
  user_agent: Android, Windows
  default: all_other
  states:
    Android:
        type: map
        default_zoom: 12
        entities:
            - device_tracker.phone_2
            - device_tracker.google_maps_1
            - zone.home
            - zone.work_1
            - zone.parents
    all_other:
        type: map
        default_zoom: 12
        entities:
            - device_tracker.google_maps_2
            - device_tracker.phone_1
            - zone.home

Hiya @thomasloven

I update HA to 0.84.3 and updated card-modder and installed card-tools as well for it, and it now seems that the entity-filter and picture-elements cards aren’t being styled anymore. It was working fine, haven’t changed anything in my lovelace, but now these two card’s aren’t being styled for me.

It could possibly be a user error on my behalf, but didn’t really change anything that should effect it.

Lovelace.yaml

  - url: /local/card-modder.js?v=35eb37
    type: module

  - url: /local/card-tools.js
    type: js 

  - type: custom:card-modder
    card: 
      type: entity-filter
      entities:
        - device_tracker.
      state_filter:
        - home
        - "on"
        - "100"
        - "0"
        - "50.0"
        - "100.0"
      card: 
        type: entities
        title: Device Trackers
        show_header_toggle: false
      style:
        - text-transform: none
    style:
      background-image: url("/local/cardbackK.png")
      background-repeat: no-repeat
      background-color: rgba(50,50,50,0.3)
      background-size: 100% 68px
      border-radius: 20px
      border: solid 1px rgba(100,100,100,0.3)
      box-shadow: 3px 3px rgba(0,0,0,0.4)

This is a great component!

A question - is there a way to specify a group for the fold but still use a label/section at the top level?

For example I would like to make a fold that is simply listed as “Automations” as a section; with the items being group.all_automations

Current if you specify the group in the example you get the first group item as the fold placeholder and not able to set a label/section; or at least I’ve not figured out how to do it…

The problem with picture-elements it because that card has changed how it handles the background.
It’s no longer a background, but a picture that’s inside the card and overlaps the rounded corners.
You can fix it by adding overflow: hidden to the styles of the card.That may mess other things up - such as the long press animation - but I’m not sure.

The problem with entity-filter is harder. Entity-filter loads it’s child card after being loaded itself, and after telling card-modder that it has been loaded, so card-modder can’t know when it’s ok to apply the styling, and tries too early.
Card-modder works well with monster-card though. And that does everything entity-filter does, and more.

1 Like

Hi
I started getting this error message very often aafter upgrading to 0.84. I’m now on 84.3.
I installed the latest version of the layout-card, but that didn’t help.

2018-12-18 23:11:51 ERROR (MainThread) [frontend.js.latest.201812110] http://28b.no:8123/local/layout-card.js:36:19 TypeError: card.setConfig is not a function. (In ‘card.setConfig(config)’, ‘card.setConfig’ is undefined)
The UI seems to work just fine, but all the error messages are very annoying…

Help, please?

Helge

You can’t possibly get that specific error message with the latest version of layout-card. It may be a caching issue.
Make sure you downloaded the latest version of the js file, and then try adding ?0 after the url in your resources: section and doing a hard refresh of the page (ctrl+f5 a few times).

Does card-modder work with the gauge card? I’m unable to style it. I’m not trying to do anything fancy. Just border, border-radius and background, but as soon as I add it, the card is about 2px high. It’s like card-modder affects all elements.

Thank you for taking the time to reply @thomasloven I will start having a play around now to get it all back to normal. Thanks again.

It works for me. I assume you are using the latest version of Home Assistant and card-modder both?

I’m running 0.84.2 and card-modder 35eb37. I used the same code from my other cards. I’ll have another go. It’s just weird that it didn’t work.

UPDATE: I think I worked it out. Needed to add --base-unit: 50px to the style. For some reason without this --base-unit is set to 0px.

Now to work out the 1/2 circle bit inside the arc. Can’t work out how to style that bit… :thinking:

After editing the .storage/LOVELACE file and restarting HA it works!
Thanks!

Same here… same behaviour and i have latest of both card-modder and HA
EDIT: Solved like you did, but what’s the meaning of --base-unit: 50px ?

@maurizio53 I’m not sure what it does, but for some reason like I said above, card-modder is changing it to 0px. Forcing it to 50px stops card-modder changing it.

Sorry. I was testing against the dev branch.

This is a known problem with gauge card that will aparently be fixed for 0.85 at latest.

1 Like