Improved Shopping List Card

[Hellis81]

I just updated and it looks really great.
The only thing I can’t seem to figure out is how to make it both computer and mobile friendly.
I’m fine with having a separate card/view for mobile, but the issue is that I then need to copy all the yaml from the main card.

Having panel mode and chip position right is great for computer.
But with that setting I can’t see the shopping list on the phone.
Having chips at the bottom is the best for phones, but not for computer.

Perhaps this is out of scope for what you are doing? But what if there was a toggle button between two modes?
Generally, you aren’t writing to the shopping list when you are also shopping.
Or a “mirrored mobile view mode”?
I wish to not use the offline modes since it sometimes does happen that I drive off to the store while my spouse is writing to it. So online is more or less a requirement for us.
But I do like the ideas with offline versions for when abroad and mobile data is expensive.

[Mindreader]

With the offline modes, you have only a backup for places where you know that there is no network. No network, no smarthome and no other connected apps or even phone calls. I can nothing do against this. Your spouse has to inform you before you reach the super market. ^^

I dont know what you mean with a mirrored mobile view, but regarding your question computer/mobile view. I also struggled with this, I turned the phone horizontaly and was able to use it.
But I want to add add an extra Computer/Mobile view for the panel mode. Means this is already on my todo.

[the_armed_programmer (Michelfrancis Bustillos)]

I am getting an odd issue when using this card within a Vertical-Stack with BubbleCard pop-up. The card is blurred out, but other cards in the stack display fine.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#shoppinglist"
  - type: markdown
    text_only: true
    content: "# Shopping List"
  - type: custom:ha-shopping-list-improved
    chips_position: auto
    quantity: end
    acknowledged: hide
    chip_click: single
    chip_merge: standard_first
    local_chips: false
    entity: todo.shopping_list
    show_cat_popup: false
    sub_text: " "

[Hellis81]

@Mindreader

I dont know what you mean with a mirrored mobile view

Think of secrets.
So instead of having all the yaml for the categories, then you just have:

categories: !secrets categories 

That way whatever you have in the secrets can be used in multiple cards, which means you can set up one card for mobile and one for computer.
I don’t know if that is possible or if it’s harder than doing what you have in mind already.

[Mindreader]

There will be a new option in the next version

so you can use it on your PC (in panel mode) and also on the phone with chips at the bottom.

Regarding standard categories for multile cards, there was already a festure request on github

Feature request: Share categories and chips

[Mindreader]

I tried several hours to find the problem.
Bubble popup card is “deeply rewriting” the styling code so that the card can not re-size. If you open the debugger (F12) in your browser, it is possible to see the card due to the resizing.

I am sorry but I have no idea how to solve this issue.

EDIT: I found a workaround
Will release the update tomorrow

[Mindreader]

v1.2.0-BETA-5 has been released

Added an option for Bubble PopUp Card

Enable this option, if you want to use the card in the Bubble PopUp Card.
In the Bubble Card, the following settings must be set for the card to function correctly.

background_update: true
close_by_clicking_outside: false

Renamed the chip sorting options and added a new option Automatic Panel / Bottom (depends on screen size) to automatically switch between panel mode and mobile view

Implemented Global Chips

With this feature, you can save chips in a text file (e.g., via the file editor), and these chips will optionally be available in all cards.
You can also merge the Global Chips with the Standard and Browser Chips.

In the input field, you need to specify the path to the chips file.
Example: /local/chips.txt if the file is named chips.txt and located in the www folder. And yes, local points to the www folder.
Each chip must be placed on a separate line.

You might also need to add the www folder (or your specific folder) to the allowlist_external_dirs in your configuration.yaml and restart Home Assistant afterwards:

# Loads default set of integrations. Do not remove.
default_config:

# add your path to the file here
homeassistant:
  allowlist_external_dirs:
    - "/config/www/"

[Hellis81]

I can confirm the Automatic Panel / Bottom works fine.
Thank you!

This is a really great card/dashboard mod.

[Hellis81]

I’m sorry…
I keep thinking of ideas.

What about another set of chips, perhaps further down, below a line or different color?
But with dishes.
So you can click on “Hamburger”, and it adds x of hamburgers, z of hamburger breads, y of cucumber… and so on…

[Mindreader]

Ideas are always good
I have to thing about this, if you can work with YAML configuration like this:

dishes:
  - name: McDonalds
    items:
      - Hamburger (2)
      - Cheeseburger (3)
      - BigMac
      - French Fries
  - name: Burger King
    items:
      - French Fries (2)
      - BigKing

its not a big deal

[Hellis81]

That would be my preferred way of doing it.

[Thunderoux]

One feature that would be gold is a local registry (maybe even global?) that allow me to add item through the bar code. Similar to stores. This would greatly reduce number of presses and allow the hole family just to scan the code to add 1 of that item.

[Hellis81]

What are you going to scan with?
Phone? How would that work?

I have tried on and off to build an ESP based barcode scanner, but it’s not easy.

[Thunderoux]

I presume a camera if phone/tablet. I agree it might not be easiest but not impossible.

[Hellis81]

That is possible already, but it requires some work from you then.
You scan the code and share it with Home Assistant.
That creates an event that you can trigger on in an automation.

In the automation you match barcode with product preferably in a list.
Use the action todo.add_item.

I doubt the card can make that process much easier since the hard work (in my opinion) is the scan with phone and share.
The automation setup is a one time thing.

[Mindreader]

v1.2.0-BETA-6 has been released

Have fun with this release

Implemented Global Categories

With this feature, you can save categories in a text file (e.g., via the file editor), and these categories will optionally be available in all cards.
You can also merge the Global Categories with the Standard Categories.

In the input field, you need to specify the path to the categories file.
Example: /local/categories.txt if the file is named categories.txt and located in the www folder. And yes, local points to the www folder.

Text file Format:

[Fruits]
icon = mdi:apple
bgcolor = #247645
items = Apples, Plums, Pears, Bananas

[Beverages]
icon = mdi:bottle-soda
bgcolor = #528B8B
items = Beer, Sparkling Wine, Cola

You might also need to add the www folder (or your specific folder) to the allowlist_external_dirs in your configuration.yaml and restart Home Assistant afterwards:

# Loads default set of integrations. Do not remove.
default_config:

# add your path to the file here
homeassistant:
  allowlist_external_dirs:
    - "/config/www/"

Implemented Dishes

With dishes you can add multiple items at once. Each dish starts with - name: and contains a list of items under ‘items’. Example: - name: McDonalds items: - Cheeseburger - BigMac (2) - Fries - Hamburger (4). Each dish can optionally have a background color (bgcolor, e.g. #247645). Dishes will be always added at the end of the other chips.

- name: McDonalds
  bgcolor: #000000
  items:
    - Hamburger (2)
    - Cheeseburger (3)
    - BigMac
    - French Fries
- name: Burger King
  items:
    - French Fries (2)
    - BigKing

[Hellis81]

Amazing!
I love it.
This will spread up the process of writing the list so much, and make sure we don’t forget stuff.

I have however found a bug.
It doesn’t make sense to me.

If I add “Hamburgerbröd” it doesn’t work, it’s a chip, it’s added in a category (and now a dish), but I can’t add it to the list.
If I change the word to “Hamburgerbrod” at all the positions then it works.
But other words with “ö” works so it’s not a character encoding issue.
Could you try and att that item and see if it works for you?

[Mindreader]

Was Hamburgerbröd added to an other category before ? A category you removed/renamed later ? In this case the item is hidden because custom categories (by users) are not allowed at the moment. You can check this with the normal todo integration.

[Hellis81]

Yes, I believe I have renamed it.
But there are other items that has also been in a renamed category that works.

But I see that there was some leftovers in the normal shopping list.
When those was removed then it works.
Thank you!!

I tested the card for real today.
It works great.
But I need to learn to just do one item at the time.
I’m used to picking up a few then checking them off.
But that was hard with this card since it updates too fast.

[Mindreader]

v1.2.0-BETA-7 has been released

Implemented QR Code Scanner

Allows scanning one or multiple items at once via QR code.

[!IMPORTANT]
You must access Home Assistant via a https:// connection for the QR scanner to work.

QR Button

You have to allow camera access

Scan the code. If the scan was successfully, the scan window will disappear.

Configuration option:

For multiple items, each item must be on a separate line. Quantities can be specified in parentheses, e.g., Bananas (6).

Generate your QR Codes in this format

If you want to add bananes

bananas

If you want to add 6 bananas at once

bananas (6)

if you want to add more items like for a dish

bananas (6)
plums (33)
apples (2)
peach
beer

You can generate QR Codes here:

QR Code Generator – QR Codes kostenlos erstellen (Logo, T-Shirt, vCard, EPS)