Idea: a few preset layouts for users to choose from

[mendhak]

I noticed that many users like to edit the SVG file and remove some elements. The most common example is to remove the calendar icon, and have more calendar entries visible.

The difficulty becomes when I push out an update, if they want the updated code, they have to re-add their changes. But to counter that - how often does this codebase change? Not often! Most of the work is done, and things are working.

The idea is, what if there were multiple SVGs to choose from. Based on a starting environment variable, the Python code picks the corresponding layout SVG. Process it and do the string substitutions for weather, then for calendar. Finally, generate the output PNG.

Risk: if there are some UI changes I have to make, I have to do it for each layout SVG. The probabily and effort is low, it's not a huge concern. It should all be manageable as long as the SVGs expect the same data.

I might have to increase the number of calendar entries fetched, right now it's just 4 I could make it 10.

[feh123]

I would really appreciate this @mendhak , if the workload was not too great for you. My SVG is, in effect, two panels. The LHS panel being about 1/3rd of the screen. In this panel I have Day, Date, (maybe Alert - I have never seen one!), weather icon with min/max T and weather phrase. The RHS panel is my diary entry - subject date and time. I manage 8 but if you can do 10 that's great. I am sure you will get many suggestions for presets. Maybe there is one I would prefer to my current design!

[mendhak]

If you share your SVG here, I could see what I can do with it.

As for the alerts - you have to set the Met Office feed for your region in the env.sh file, like this example:

https://github.com/mendhak/waveshare-epaper-display/blob/b65f50709d1d65d0b9314a040767e148b49942ef/env.sh.sample#L37-L38

I was getting a red warning every day during Storm Eunice!

I hadn't put instructions in the README yet because it's hard to find alert providers. I will look for more soon, since summer is coming and I struggle with hot weather.

[feh123]

Hi @mendhak - I am not sure how to send a file but I think this is my up to date svg. Hope this works!

[feh123]

Is this okay? The file itself has a lot of lines!

[mendhak]

Yes that seems OK I think, I'm able to see the XML when I go to:

view-source:https://user-images.githubusercontent.com/31826354/156723931-7d9a9df0-2c3f-4011-86cb-c4acaefb4dc6.svg

Zipping it just to be sure: 156723931-7d9a9df0-2c3f-4011-86cb-c4acaefb4dc6.zip

I'll hope to find some time in next few weeks to play with this.

[feh123]

Glad it worked! Good luck with the presets. Interested to see what designs you think of.

[jmason]

Great idea! At least it should give me a way to easily and more cleanly add my extensions (I have hacked up support for getting state-of-charge data from my EV car via HomeAssistant as well.)

[mendhak]

I've started playing with this concept in a branch. I first had to refactor the SVG template and move the weather icons out into its own folder of icons. Doing so has made the template so much simpler, less than 50 lines: https://github.com/mendhak/waveshare-epaper-display/blob/layout_refactor/screen-template.svg?short_path=bbe3a26#L6

It means anyone can create or modify the template easily, and not be overwhelmed.

I tried out @feh123 template. But I'm seeing overlapping text, is this what it normally looks like for you?

I also experimented with @jmason template. That looks fine.

There's more thinking/tinkering I'm doing, especially around how to specify a template, and if there's a way to easily let people add custom data to display via some custom script or custom include.

[feh123]

Hi @mendhak thanks for all this work (including all the latest mods)! To answer your question - it looks right but the font/size is too large for the date, time, temp., and weather phrase. On mine these are very much smaller and then fit beside the entries. I have not updated for sometime so my entries only list start time. Also my entries fit the page - so again a font size issue I think but not that so far away. I have noticed that the font library in my Inkscape are just the ones downloaded when I installed the software so maybe different from yours. I have migrated from a PC to a Mac now and need to add back Mac versions - what drawing software are you using now? Also when I did update (in Apr 2021!) I just kept my modified files on my hard drive and copied them back when I had installed your latest version. Will that still work now you have modified the program? I was thinking of updating soon but maybe I should wait? Apologises for all the questions!

[mendhak]

I was able to adjust your template a bit. It's really hard doing more than 8 calendar entries, the screen just gets really cramped and unreadable. See what you think of this, will it work:

To adjust SVG templates for this project, you really don't need a full blown editor, just a normal text editor. Because it's mostly just editing the SVG file by hand, and rerunning ./run.sh to see the output. It's the simplest way, because most of the adjustments are font sizes, and x/y coordinates. Occasionally when I do need to edit a shape I use Inkscape on Ubuntu.

For the fonts, I think there has been a change, but it might be related to the Raspberry Pi OS itself - I'm using the Nimbus font and it comes with Raspberry Pi OS, latest version at least. But I think you can get it otherwise using sudo apt install gsfonts on the Raspberry Pi.

[mendhak]

Yes I think it'll be better to wait to update. I've got the 'friendly dates' change coming in soon (see above screenshot), and if this template works out for you, then you don't need to do any custom changes, or minimal custom changes.

[feh123]

Thanks @mendhak. I will wait. The svg looks good.

[mendhak]

@jmason I've added your layout to the pull request and also a black&white variant with the full time.

I've also added the ability to add custom data, such as the car charger stuff. Hopefully this is done in a way so that it involves less hacking in the main file and is limited to the 'custom' files. That way there are fewer files to back up and keep track of. See if the instructions make sense to you:

---

I've added the ability to add custom data to the screen. For example this could be API calls, data from Home Assistant, or something external.

Rename screen-custom-get.py.sample to screen-custom-get.py and set the value of custom_value_1 to the value you want to display. Run ./run.sh and it'll appear on screen.

Modify screen-custom.svg and change the x, y, font size values to adjust its appearance and position. You can add more values by adding more SVG elements for custom_value_2 and so on, and set its value in the output_dict in screen-custom.get.py.

[mendhak]

At last, the layouts branch has been merged! There's a total of 4 layouts, 1 by feh123, 1 by jmason, 1 derived from jmason's, and 1 default. I've also separated the icons out into a folder. That means some crappy icons can be updated individually and easily. For example this one looks like poo :hankey: from far away.

@feh123 the latest changes including layout and friendly dates are now available. You should be able to use this project without any of your custom changes now. But take a backup juuuuust in case.

Instructions on picking a layout are part of the README here: https://github.com/mendhak/waveshare-epaper-display#pick-a-layout

[feh123]

Hi @mendhak lots of kudos to you for all this - it's great. I will try the installation in the next few days - I have a raspikey from uugear coming and I wondered if it could help with the screen update speed?

[mendhak]

OK do let us know how it goes, or if you run into issues.

I don't think the Raspikey itself will help with speeds, however in the past few months, there has been an improvement in the waveshare library's code which did improve the screen update speed. For me it went down from 30s to about 8s. This is on a weak Raspberry Pi Zero.

[feh123]

Hi @mendhak I have updated! It's running too - thanks to your very nice installation procedure. I abandoned the raspikey - they seem quite fragile and I have a very fast sd card that seems fine. I have a few thoughts for you re my experience: 1 RPI OS Bullseye doesn't use the ssh password raspberry any more. Why they have done this I do not know because what was a simple procedure is now a pain - I had to use their own imager in the end to get through the password issue! 2 Otherwise everything was fine - I kept my credentials.json, token.pickle so getting the calendar was easy. I just altered the env.sh as you described. 3 I noticed a few things with the screen. It is certainly faster. I had a way to drop entries past their end time (although the end time was not displayed). Now I am not sure how to re-implement this - currently the screen is still showing entires for today that I would a made "stale" and hence would a gone and been replaced by the next new entry. Can I re-introduce this? Also I would like mess around a bit with the font sizes and maybe font style. What do you use to do this? Thanks a lot for all this - really looking forward to the met office alerts! (And apologies for asking for more help).

[mendhak]

Cool good to hear! Yes they removed the pi user just a few days ago. I think it's to do a bit with security and a bit with legislations about devices not having default credentials. I'll need to update the setup instructions to make user of their imager exclusively now.

OK so a few things have changed since you last updated, I've been adding notes as I go to the changelog. Now the start and end time is displayed. But if it's an all day event, only the start day is displayed. I also changed the logic to show events from today even if they have already ended, as it can help with short reminders that you were too busy to attend to, if you see what I mean, having today's past entries can be useful. They will disappear at midnight if that helps?

But if you're really sure you want to change the behaviour, I think you can change this line to use datetime.datetime.now().isoformat() instead of today_midnight.isoformat().

The simplest way to mess about with the fonts is to do it directly on the Raspberry Pi. Use an editor like nano or vi whichever you are comfortable with. If you are not familiar with either, then nano is simple and has very few things to learn. Edit the screen-template.2.svg file. Try changing the font style or size here and let the cron job run automatically, and watch the screen. Or if you are impatient, disable the cron job and run ./run.sh yourself. It's slow and tedious but the least error prone and the way with the least amount of troubleshooting/setup required.

When you're done with your changes if you feel it's worth contributing back, you can open a pull request. Or you can paste another SVG here and I'll grab it and decide. Of course, if it's stuff specific to yourself then no worries!

[feh123]

Thanks @mendhak I will it a try and let you know how it goes.

[feh123]

Hi @mendhak the change to datetime.datetime.now worked and I have hacked the screen template a bit - mainly just decreasing the font size of the diary entries. Thanks for the help. In doing this I found two things that I could not understand - I wanted to move the weather icon to the column centre away from left aligned but I couldn't find the code. And secondly the weather descriptor text lines - there are two lines - how are they used? I thought I could increase the font size and the text would wrap but that does not happen. I have the space to wrap but if Accuweather has a long description - would that still work?

[mendhak]

I wanted to move the weather icon to the column centre away from left aligned but I couldn't find the code.

The weather icon is slightly different, try changing its translate values, see below it's 25 165.

https://github.com/mendhak/waveshare-epaper-display/blob/d22459e905fa88e6ced4e291dfc178d6148684ef/screen-template.2.svg?short_path=713c1bc#L5-L7

And secondly the weather descriptor text lines - there are two lines - how are they used?

Aaah man in SVG, text wrapping is hard. So the two lines are there if the weather description is too long. In the code I'm checking if the description is long and splitting it. It's a programmatic 'wrap'.

https://github.com/mendhak/waveshare-epaper-display/blob/d22459e905fa88e6ced4e291dfc178d6148684ef/screen-weather-get.py#L17-L25

Then it is assigned to the two lines

https://github.com/mendhak/waveshare-epaper-display/blob/d22459e905fa88e6ced4e291dfc178d6148684ef/screen-weather-get.py#L157-L158

[feh123]

Hi @mendhak thanks for all this info. I moved the icon. Accuweather did have quite a wordy description this morning and the two lines worked fine - my font size change was not a problem. So no need to wrap. Now after a few days I see the friendly names change and it does look really nice. A great update. Now I just wait for the met office weather alert for a tornado in South Cambridgeshire! All I have done to the template is to alter font styles, sizes and text/icon positions. Happy to send you a copy of the file if you wish. Thanks for all your work. Best Regards Fred

[jmason]

I also changed the logic to show events from today even if they have already ended, as it can help with short reminders that you were too busy to attend to, if you see what I mean, having today's past entries can be useful. They will disappear at midnight if that helps?

oh yeah I had been meaning to ask about that, could that be made configurable? I'd prefer not to see them too. :)

[feh123]

Hi @jmason the hack to change to datetime.datetime.now().isoformat() instead of today_midnight.isoformat() described above worked for me - but I guess you want an option to pick during installation?

[mendhak]

Yes I think it could be made configurable.

Some env var like... CALENDAR_INCLUDE_PAST_EVENTS_FOR_TODAY =1 and based on that I either assign datetime now vs midnight. I'll set it to not include past events by default since 2 out of 3 people polled prefer not to see it 😅

[mendhak]

Done - the default will now be to remove past events.

CALENDAR_INCLUDE_PAST_EVENTS_FOR_TODAY=1 will cause events from 00:00 this morning to be included.

[jmason]

thanks!

[feh123]

Hi @mendhak I just got my first weather alert message for south cambridgeshire! But the font is rather large and so I don't see it all. I have tried altering the font size in screen-template.svg from 39px to 24px but that does not change the font on the png. I think I am missing something really obvious but cannot think what. Thanks!

[mendhak]

@feh123 Are you seeing something like "Yellow warning of thunderstorm affecting XX" and then it gets cut off? Sadly that's how the Met Office displays their warnings, and because SVG text wrapping is very hard. I have a thunderstorm warning and I see it in the first part of the message.

You might consider leaving it at that size, because if you try to fit everything and make it visible, it won't be very readable. If you still want to try it, you can try editing screen-template.2.svg - now that there are multiple layouts there are multiple template files to choose from.

The alert is right at the bottom, the line that goes

<text id="text3141" x="20" y="470" font-size="xxpx" style="font-weight:bolder;font-size:xxpx

Not sure which one of the two to edit, but you can play around

[feh123]

Hi @mendhak I changed the second font size in the line from 30px to 20px and that worked fine. The XX was East of England and at 20px I can see the complete line and it's readable. Thanks for the help.