Example of dashboard UI ?
Closed this issue · 14 comments
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.
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?
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
here is the result of my card for the moment!!!
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.
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?
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
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:
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)
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.
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_with_grocy_*
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?
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
Hummmm, those are not coming from this module, this is why there is no name...
Do you have any shopping_list_with_grocy_* 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
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?
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.