If you like you can support my work.

Welcome to my Home Assistant custom football page.

Before we start you need to install some 3rd party tools from Hacs.

So what we need is :

• Card Mod: https://github.com/thomasloven/lovelace-card-mod
• Layout Card: https://github.com/thomasloven/lovelace-layout-card
• Banner Card: https://github.com/nervetattoo/banner-card
• Stack in Card - https://github.com/custom-cards/stack-in-card
• Mushroom Cards: https://github.com/piitaya/lovelace-mushroom
• Atomic Calendar Revive: https://github.com/totaldebug/atomic-calendar-revive
• List Card: https://github.com/iantrich/list-card
• Feedparser: https://github.com/custom-components/feedparser

You will also need some integrations:

• Google Calendar Integration: https://www.home-assistant.io/integrations/google/
• Schedules for football teams: https://fixtur.es/en/premier-league

After installing lets start and go step by step....

1. Remember!... You have to download and install all the necessary github add-ons listed above and also Google Calendar integration should be ready too. Below are two videos about how to install hacs and Google Calendars to HA, from youtube.

Hacs

Google Calendars

Installation details for above github add-ons are specified on their page.

2. If you are to go now surf to https://fixtur.es/en/premier-league and pickup your favorite teams. Add them and check from calendar.google.com to see if the match schedules has been added to your calendar or not. If they appear on your calendar you are good to go.

You can also use other subscribed calendar sources for google calendar such as Sched Joules. Sched have apps on both Playstore and Appstore. You can install the app and enroll to the calendar of any team you like within the app. One of the advantages of Sched Joules is, besides the schedules it is also updating the match with details of scores, lineups, etc.. right after the event.

3. Assuming you have selected your favorite teams and already installed Feedparser and List card, now we can go to the next step. First of all, we need to find rss feed for our chosen teams. You can search online for that. You can also filter rss data from an rss source. It is very easy.

Lets give an example of Cnet. It has an rss page listed into categories.

https://www.cnet.com/rss/

Lets say you want to track "News" but you only want updates regarding iPhone. All you have to do is to use this site:

https://siftrss.com/

Press enter and the new link will be your rss feed for iphone news from Cnet content.

4. So we have our rss ready for the teams we want to display in our page. Now go back to Home Assistant. Go to the file editor. Choose configuration.yaml (or sensor.yaml if you have separated it). Copy and paste the below code and save. Restart Home Assistant.

https://github.com/berkansezer77/home-assistant/blob/71d7099564a0e05ae7bdc41c11e681250229aa89/pages/football/template-sensor.yaml

This code contains the news for Turkish football team Beşiktaş. It is taking the rss feed from "Ahaber" web site. The design is customised for the list-card. Scan interval is set to 10 minutes which means it will update the news in every 10 minutes.

So now we are ready for our rss feed. Remember, I have 4 teams listed on my page and 1 general news. So you need 5 rss feeds. Just like the one we created with the above code, create 4 more into configuration.yaml or sensor.yaml file then save and restart home Assistant.

Remember while writing to the configuration.yaml (or sensor.yaml if you have separated) I named it as "Besiktas1" on the second line. When Home Assistant restarts you can now see a new sensor created with the name "sensor.besiktas1", in HA developer settings. To make sure that it was created go to the developer tools and go to states, press Ctrl + F and search for sensor.besiktas1(This is the manual name I have given to the sensor. If you want a different one just name it as you wish, maybe like : sensor.acmilan)

If you see the sensor details shown like in the above picture you are ready to go. This means that the sensor is picking up the details from the rss and bringing it up to HA succesfully.

5. Now we have to create input booleans to make the page dynamic and fully automatic.

Create 10 input booleans.

• input_boolean.besiktas
• input_boolean.fenerbahce
• input_boolean.galatasaray
• input_boolean.trabzonspor
• input_boolean.futbol_haber
• input_boolean.news_chip_haber
• input_boolean.news_chip_besiktas
• input_boolean.news_chip_fenerbahce
• input_boolean.news_chip_galatasaray
• input_boolean.news_chip_trabzonspor

To create Booleans go to settings> devices and services> helpers. Then press "Create Helper" and choose toggle. Name it anything you like. If you follow my code and want it to work straight, copy and paste the boolean names I created above.

6. Now the page should start to function. Copy and paste below code into an empty page.

Football.yaml

7. The code has some Turkish names. You can rename those with anything you like.

8. If you have carefully followed recent steps and done the procedures correctly now the page should appear and the chips should navigate to the related parts. But for now it is not dynamic. To make it dynamic we neeed to add some automations. But before that I would like to give a brief explanation to the code that I created.

V2 now can show more logos at the top if more then 1 team has a schedule.

Becoming active means it will end the dynamic structure and everything will now be listed manually. When chips ara pressed It highlights and colorise the corresponding data. The pictures here are dynamic as well. The picture data comes from the last published rss feed.

When any of these chips are pressed it displays the corresponding team news for 1 minute. After the 1-minute period is completed, the news of the team that has a match schedule that day will re appear on the screen.

This structure is basically maintained with automations.

Automations and all the necessary codes can be found here: Just copy and paste them.

Codes

Tips & Tricks:

• With the latest Home Assistant iOS update you can now remove statusbar. To do that go to companion settings of the iOS app, go to general and activate "Full Screen". I also advise you to install "Kiosk Mode". This mode disables the sidebar and topbar of Home Assistant. You can activate it with a single boolean. With Full screen mode and Kiosk used together, your football page can look like a complete full screen seperate app.

Kiosk Mode

• One nice cool trick is to open the links within Home Assistant and turning them to a clean readable format. Safari on iOS has a "Reader View" mode which turns complex web pages into a perfectly organized, ad-free readable format. You can use that mode to read your RSS feed without leaving Home Assistant.

1. Open your iOS companion app. Go to settings>companion app>general. From there click on "Open Links" and choose "Apple Safari (within app)". Now all the links will open a new window without leaving Home Assistant.

2. Click any link on your Football Page a new window will open within HA. Press the reader icon on the upper right corner of the screen as shown in the picture.

The outcome will be an easy mode to read page contents without adds. Much better then reading a website.