Example of dashboard UI ?

[schumi2309]

Hello, I can't build the card. I copied your example but I only have errors. do I need to change something in your example? Ex: i don't have: binary_sensor.updating_shopping_list_with_grocy Thank you.

[Anrolosia]

Hello @schumi2309 , yes, you have to change things in order to adapt for you own config. For the missing sensor, it's weird, it's a sensor implemented by the module and the integration with MQTT. Are the other sensor working as expected?

[schumi2309]

here are the 3 sensors that I had after installation. it is all I have:

I also see several script, but on your page, there is only one. where to find the others?

I have not yet understood everything about your card, where should I modify and what exactly? Sorry, I'm not an expert yet, just an amateur. 😉

Thank you

[schumi2309]

here is the result of my card for the moment!!!

[Anrolosia]

Hey @schumi2309 , you're on the right path, but it's weird, you should have by default 3 sensors and 1 switch:

For the scripts, they are defined in the module by itself, you can find them going in your developer tools, services:

My advice: Uninstall the module completely, restart your homeassistant, and try again. If you still don't have the same things as my screenshots above, check the logs to see if you have something about "shopping" or "grocy"

About the card, I'm using auto-entities to get all my products in a grid, and for each of them, I use a custom:button-card to display the information I need (name, location, quantity in shopping list, picture) and I define also some actions (on click, double click, long press) Then, on a right column, I'm displaying some buttons to give me some controls (empty the list, refresh, etc.) and then the shopping list by itself, again, using auto-entities. Sometimes, the product I want to buy is out of stock, so I'm playing with the note you can add to a product in your shopping list to define an "out of stock" list, and to be able to quickly identify those.

[schumi2309]

Before deleting and re-installing, is there a possibility of backup? I have already encoded a lot of products, and I don't really want to start encoding again from the beginning, or does it save automatically?

[Anrolosia]

Uninstalling Shopping List with Grocy will not erase all your products, as they're saved in your Grocy's add-on, so you should be safe

[schumi2309]

it does not change anything. Is everything configured correctly like this?

the binary sensor is still not added...

and the config of grocy:

and the log:

[Anrolosia]

The config looks ok to me. It's so weird you still don't have the binary_sensor update tho... Do you have access to your MQTT server? (using MQTT explorer for example) If so, do you have that too?

Anyway, just to be clear, the binary_update sensor is not really required, your integration works like this (I can see you have already 60 products retrieved from Grocy)

[schumi2309]

Ok, no big deal for the binary sensor then...

But for the card, I can't do anything, I don't see what I have to modify in your example. I always stay with this:

I really need a hand to know what to change, and where to change. Thank you and again sorry for your time.

[Anrolosia]

Of course I'll try to help you :) First, do you see your products in MQTT? You should find them in homeassistant > sensor > shopping_list_withgrocy* This will confirm you have a good setup and integration with MQTT. Then for the yaml, please confirm you have Auto Entities Card, Card Mods Card and Custom Button Card well installed and configured Finaly, let's go with a basic card to get all your products:

type: custom:auto-entities
card:
  type: custom:layout-card
  layout_type: grid
  layout_options:
    grid-template-columns: 20% 20% 20% 20% 20%
    mediaquery:
      '(max-width: 600px)':
        grid-template-columns: 50% 50%
      '(max-width: 800px)':
        grid-template-columns: 25% 25% 25% 25%
filter:
  include:
    - entity_id: sensor.shopping_list_with_grocy_.*
      sort:
        method: friendly_name
      options:
        type: custom:button-card
        entity: this.entity_id
        aspect_ratio: 4/3
        show_icon: false
        show_label: true
        show_state: true
        label: |
          [[[
            return `(${entity.attributes.location})`
          ]]]
        tap_action:
          action: call-service
          service: shopping_list_with_grocy.add_product
          service_data:
            product_id: this.entity_id
        double_tap_action:
          action: call-service
          service: shopping_list_with_grocy.remove_product
          service_data:
            product_id: this.entity_id
        hold_action:
          action: call-service
          service: shopping_list_with_grocy.remove_product
          service_data:
            product_id: this.entity_id
        styles:
          label:
            - z-index: 1
            - font-size: small
            - margin-top: 1vh
          name:
            - z-index: 1
            - font-size: large
            - font-weight: bold
            - margin-bottom: 1vh
          card:
            - background-image: |
                [[[
                   return 'url("data:image/jpg;base64,' + `${entity.attributes.product_image}` + '")';
                ]]]
            - background-repeat: no-repeat
            - background-position: center
            - background-size: cover
            - border-width: |
                [[[
                  if (entity.attributes.product_image)
                   return "0";
                  else
                   return "var(--ha-card-border-width, 1px)";
                ]]]
          state:
            - background-color: green
            - border-radius: 50%
            - position: absolute
            - right: 5%
            - top: 5%
            - height: |
                [[[
                  if (entity.state > 0) return '20px';
                  else return '0px';
                ]]]
            - width: |
                [[[
                  if (entity.state > 0) return '20px';
                  else return '0px';
                ]]]
            - font-size: |
                [[[
                  if (entity.state > 0) return '14px';
                  else return '0px';
                ]]]
            - line-height: |
                [[[
                  if (entity.state > 0) return '20px';
                  else return '0px';
                ]]]
          custom_fields:
            gradient:
              - display: |
                  [[[
                    if (entity.attributes.product_image)
                     return "block";
                    else
                     return "none";
                  ]]]
              - height: |
                  [[[
                    if (entity.attributes.product_image)
                     return "100%";
                    else
                     return "0px";
                  ]]]
              - width: |
                  [[[
                    if (entity.attributes.product_image)
                     return "100%";
                    else
                     return "0px";
                  ]]]
              - font-size: |
                  [[[
                    if (entity.attributes.product_image)
                     return "auto";
                    else
                     return "0px";
                  ]]]
              - line-height: |
                  [[[
                    if (entity.attributes.product_image)
                     return "auto";
                    else
                     return "0px";
                  ]]]
        custom_fields:
          gradient: ' '
        card_mod:
          style: |
            ha-card {
              height: 100%;
              height: -moz-available;          /* WebKit-based browsers will ignore this. */
              height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
              height: fill-available;
            }
            ha-card #gradient {
              position: absolute !important;
              top: 0%;
              left: 0;
              z-index: 0;
              background-image: linear-gradient(
                0deg,
                hsla(0, 0%, 0%, 0.8) 0%,
                hsla(0, 0%, 0%, 0.79) 8.3%,
                hsla(0, 0%, 0%, 0.761) 16.3%,
                hsla(0, 0%, 0%, 0.717) 24.1%,
                hsla(0, 0%, 0%, 0.66) 31.7%,
                hsla(0, 0%, 0%, 0.593) 39%,
                hsla(0, 0%, 0%, 0.518) 46.1%,
                hsla(0, 0%, 0%, 0.44) 53%,
                hsla(0, 0%, 0%, 0.36) 59.7%,
                hsla(0, 0%, 0%, 0.282) 66.1%,
                hsla(0, 0%, 0%, 0.207) 72.3%,
                hsla(0, 0%, 0%, 0.14) 78.3%,
                hsla(0, 0%, 0%, 0.083) 84%,
                hsla(0, 0%, 0%, 0.039) 89.6%,
                hsla(0, 0%, 0%, 0.01) 94.9%,
                hsla(0, 0%, 0%, 0) 100%
              );
            }
            ha-card .ellipsis {
              white-space: normal
            }
sort:
  method: attribute
  attribute: location

Do you see your products? Do you see any errors in the logs?

[schumi2309]

I finally managed to connect to mqtt explorer, but here is what I have! not easy to find your way around because no name, only numbers

[Anrolosia]

Hummmm, those are not coming from this module, this is why there is no name... Do you have any shopping_list_withgrocy* sensors in homeassistant > sensor in MQTT? Also, validate your configuration in https://my.home-assistant.io/redirect/supervisor_addon/?addon=core_mosquitto, you're not supposed to use the admin user. Define a real user and password, restart the add-on, try to connect your MQTT Explorer with this new user, then change Shopping List with Grocy configuration to use that user, and restart Home Assistant

[schumi2309]

Ok, I finally got there. thanks to you. A few questions (again): why don't I have my products in alphabetical order?

I have a whole part in alphabetical order, then another series in alphabetical order again

and out of stock, how does it work? I tested a product with a minimum quantity of 1, I have a stock of 0, but nothing on my card saying out of stock?

[Anrolosia]

Ok, great, so it was just due to your MQTT configuration, I'm glad you were able to make it work

I saw in my emails a question about the images and how to upload them, I guess you figured out

For your question about the order, check the yaml code above ^^ the first order is by location in my case: Then, it's alphabetical: I strongly encourage you to read the documentation of the auto-entities module: https://github.com/thomasloven/lovelace-auto-entities

Finaly, about the out of stock, I manage that with a note on the product when it's added to the shopping cart, and then I filter out products with that comment to list them in the out of stock column. For that I will let you read the example I gave in the demo and take your time to understand it, read it carefuly :)

Since you're now able to have your products, I'll close that ticket.