JonasJoKuJonas / homeassistant-WebUntis

Custom component to access data from Web Untis in Home Assistant
https://community.home-assistant.io/t/webuntis-timetable-in-ha/568273
MIT License
52 stars 12 forks source link

How do I get a time table like the one displayed in untis itself? #99

Closed Ruebenschus closed 11 months ago

Ruebenschus commented 11 months ago

Dear Jonas, first of all big thanks for the brilliant work! I appreciate it a lot. Being a newbie to HA, I struggled a little bit to get a time-table view work and I am opening this thread to be a reference for others.

First, I created a calendar-card and used the calendar given by the plugin. This showed me that the data is retrieved correctly, but the classes show up as a standard calendar with times assigned and not in a table view corresponding to lesson 1, 2, 3, ... This is not so good because when e.g. lesson 1 is removed, it does not show as entry... I want a table view for the week as shown in untis web or app itself, where each row is one time slot of that school.

You gave the hint and code snippets for a "Template", so I opened a new card with type "manual", entered the JSON code and got the error "missed comma between flow collection entries (1:2)". Then I realised that I can put the JSON code into the Developer Template editor and saw that it was actually evaluated correctly into a string. So I added a "Markdown" card and put the code in, which finally worked. This is obviously equivalent to using manual and adding the following header before the JSON string: type: markdown content: >-

Although I am very happy now to see a list of tomorrow's classes, I would like to resemble the tabular view as in the untis app. Is there something obvious I am missing out? Is it somewhere and I missed it? From your experience: What would be the best way to do it? I am happy to give it a try and post my solution here for everybody else to use.

Thanks and cheers, Joachim

JonasJoKuJonas commented 11 months ago

Hello Joachim,

First of all, what you are referring to as JSON is probably the HA Template based on Jinja2. You can use this in combination with a Markdown card to display a simple list of lessons. Personally, I use the custom:atomic-calendar-revive card, which provides more information about your timetable.

IMG_0039

To display the timetable in a format similar to WebUntis, you may need to find another card that can achieve this.

If you have any other questions feel free to ask, if not please close this issue.

Ruebenschus commented 11 months ago

Dear all, I just want to add my solution: The API way of Jonas' plugin has a very nice feature to extract the lessons as calendar events. Thus you can set alarms and see when the next lesson is due, and so forth. That definitely has nice features. However, I wanted a timetable view like as it is displayed in the units app or website. I want to see the lessons of the day in the grid of time slots 1, 2, 3, 4, 5... and not absolute daytime. Unbenannt

I ended up writing a Javascript for web-scraping with playwright.

`const { chromium } = require("playwright");

(async () => { const browser = await chromium.launch({ headless: true, }); const context = await browser.newContext(); // Open new page const page = await context.newPage(); await page.goto("https://"+process.argv[6]+".webuntis.com/WebUntis/?school="+process.argv[2], (waitUntil = "load"));

await page.getByLabel('Benutzername').fill(process.argv[4]); await page.getByLabel('Passwort').fill(process.argv[5]); await page.getByRole('button', { name: 'Login' }).click(); await new Promise(resolve => setTimeout(resolve, 3000));

page.goto("https://"+process.argv[6]+".webuntis.com/WebUntis/api/public/printpreview/timetable?"+process.argv[3]+"&formatId=1", (waitUntil = "load"));
const content = await page.content(); console.log(content);

page.close() ; process.exit()

})(); `

You can call it with node scraper_untis.js school type=x\&id=xxxx username password untisserver You need to go to the untis web-page and login there. In the URL you will see the short-name of your school. When choosing timetable and then "export", a new window pops up with a nice plain html table. In the URL of this window, you will find the "type=x&id=xxxx" which you need to provide to the script. Of course you could also navigate there with playwright commands but that is a little bit slower for me. Then you are all set to scrape it and write the html code to the stdout. From there you can pipe it into a file and show this as a plain website in homeassistant.

I hope this helps, Cheers, Joachim

evilmumi commented 10 months ago

Hello Joachim,

First of all, what you are referring to as JSON is probably the HA Template based on Jinja2. You can use this in combination with a Markdown card to display a simple list of lessons. Personally, I use the custom:atomic-calendar-revive card, which provides more information about your timetable.

IMG_0039

To display the timetable in a format similar to WebUntis, you may need to find another card that can achieve this.

If you have any other questions feel free to ask, if not please close this issue.

could you share the yaml to display this style

Ruebenschus commented 10 months ago

Hi, I'm not sure whether you refer to Jonas post about the alternative card or my approach. For my approach there is no yaml. The script which extracts the data is a node.js script. So you need to run it from the command line in Linux with the "node" binary as mentioned in the post. Then it will output the html of the table to stdout which you can then save to an .html file. In order to display that in HA, you just use a "webpage" card. I meanwhile ended up saving the table as jpg with the screenshot command of node.js. Then I can display that picture in HA. In order to update that picture, I made a crontab entry for the node command which executes every 5 minutes.

As for Jonas recommendation, I tested the atomic-calendar-revive. It is very powerful and customisable but I did not achieve a display such that the lessons are displayed in the time slots. And some information always was missing, like when a lesson was replaced by an event. So for me it made a much more reliable display to take what untis presents on the webpage as 1:1 copy. Whatever they will add there in future, will always be displayed exactly as on their webpage, no matter whether they change the API or introduce new types of entries and so on.

evilmumi commented 10 months ago

Thanks you are right. Today my son only had 1 90 min lesson and i cant arrange it with all needed information. Your solution looks very good but it is too deep in programming for my skill ;)

Ruebenschus commented 10 months ago

Actually, I run it on the linux host machine and view the data on a pure html page on the bare metal web server. This gave me better control over the layout than HA... But I guess there must be the possibility to run node.js scripts in a HA integration. There you might be able to directly run the code above. But I am not enough HA expert for that, sorry.

evilmumi commented 10 months ago

Sounds difficult