Shopping List item pictures

Share your Projects! Dashboards & Frontend
1

This is how I configured my shopping card:

image
image1063×747 186 KB

I liked idea of not writing items in card manually, but picking form premade list of items we usually buy.
I started with this: https://unloadbrain.com/tech/2021/03/07/how-to-manage-grocery-list-in-home-assistant.html

After implementing this solution I discovered that manually filling in items to this premade list is to boring for me.
So…

I went to web shop of grocery store we use and start to add items we usually buy to a cart.
Open cart. Right click on list div, inspect and edit as html. Copy html and save it to a file.

image
image1587×828 106 KB

Lucky coincidence this webstore has items arranged in categories already.

Next step was to write python script that takes file in witch html was saved, takes out names of items and use them to create yaml for home assistant card. But wait. What is that… Image links? We can use that too.

here is the python script:

from bs4 import BeautifulSoup
import urllib.request


html = open("chart.html", "r", encoding='utf-8')
soup = BeautifulSoup(html, 'html.parser')
#elem = soup.findAll('table', {'id': 'shopping-cart-table'})

user_agent = 'Mozilla/5.0 (Windows NT 6.1; Win64; x64)'

headers = {'User-Agent': user_agent}


items = open('items.yaml', 'w', encoding='utf-8')

categories = soup.findAll('h4')
cartItems =  soup.findAll('ul', {'class': 'cartEntries'})
index = 0

itemscategories = {}

for i in categories:
    #print(i.text)
    kat = i.text.split("(")[0]
    if kat not in itemscategories:
      itemscategories[kat]=[]
      #print('dodana kategorija: '+kat)

    for j in  cartItems[index].findAll('div', {'class': 'cartEntryImg'}) :
        img = j.find('img')
        opis = img['title'].split(", ")[0]
        slika = img['src'] 
        
        if {'opis': opis, 'slika': slika  } not in itemscategories[kat]:
          itemscategories[kat].append({'opis': opis, 'slika': slika  })
            
    index = index + 1



items.write(''' 
type: custom:layout-card
layout_type: custom:horizontal-layout
cards:
    ''')

for kategorija in itemscategories:
    items.write(''' 
  - type: custom:mushroom-title-card
    title: "'''+kategorija+'''"
    subtitle: 
  - type: custom:mushroom-chips-card
    card_mod:
    style: |
        ha-card{
        --chip-height: 80px !important;
        }
    chips:
    ''')

    for item in itemscategories[kategorija]:


        print (item['opis'], item['slika'])
        
        f = open('images/'+item['slika'].split("/")[-2]+".jpg",'wb')
        #print(img['src'])
        req = urllib.request.Request(item['slika'], headers=headers)
        f.write(urllib.request.urlopen(req).read())
        f.close()

        items.write(''' 
      - type: template
        content: ''
        tap_action:
            action: call-service
            service: shopping_list.add_item
            service_data:
                name: '''+item['opis'].split(", ")[0]+'''
        picture: /local/shopping_list/images/'''+item['slika'].split("/")[-2]+".jpg")

items.write(''' 
layout:
  max_cols: 1
  max_width: 1000
card_mod:
  style: |
    layout-card{
      background: none !important;
      border: none !important;
      max-height: 730px !important;
      overflow-y: scroll;
      width: 100% !important;
    }
    layout-card::-webkit-scrollbar {
      display: none;
    }

    ''')
   

items.close()

I created account for the store so my shopping cart stays filed. This way I can edit items any time I want, form anywhere I want.

2 Likes