element alignment on the display

[OSB1a]

First of all, thank you very much for this great project. It's the first time that I'm working with a raspberry and linux and it's a lot of fun. With the instructions on hackster and the comments there and here I got it set up really well!

I'm running it on a portrait display with 1200x1600px. My plan is to display the album cover in the top 1200x1200px and below that title, artist and album. Unfortunately I don't understand the alignment very well yet. A few hints would be great, I can't get any further with trial and error.

I have set the screen and thumb variables in display_controller.py as follows.

self.SCREEN_W = 1200
self.SCREEN_H = 1600
self.THUMB_W = 1200
self.THUMB_H = 1200

The album cover should be displayed in the upper 1200x1200px. To do this, I have set overlay_text = False in sonos_settings.py. In display_controller.py I changed following section

self.thumb_image = resize_image(image, self.THUMB_W)
self.label_albumart_detail.place(relx=0.5, y=self.THUMB_H / 2, anchor=tk.CENTER)
self.label_track.place(relx=0.5, y=self.THUMB_H + 10, anchor=tk.N)

to

self.thumb_image = resize_image(image, self.SCREEN_W)
self.label_albumart_detail.place(relx=0.5, rely=0.375, anchor=tk.CENTER)
self.label_track.place(relx=0.5, rely=0.77, anchor=tk.N)

With resize_image(image, self.THUMB_W) the cover was always too small so I used SCREEN_W here. However, I don't understand why. Both variables are set to 1200. It's now as I want it to be, but I am not sure if there would have been a better way.

From here it does not work as desired so far. I don't understand how to align the texts cleanly to the left. When I set relx = 0.1, the text is positioned left, but sometimes a bit outside the screen (left). Does this have to do with the anchor? anchor=tk.LEFT did not work for me. Also the y-position with y=self.THUMB_H + 32 did not work for some reason (1200+32=1232). I used rely=0.77 (1600x0.77=1232) instead which did the job.

I would be happy to have some help with the fundamentals of positioning here.

[ashenshugarRET]

Hello,

This project uses a library called tkinter to position the album art and the different labels, and is very hard to understand (in my opinion). I too have struggled with this to get the results I want. Take a look at this very helpful webpage https://pythonassets.com/posts/placing-widgets-in-tk-tkinter/ which I used to help me. As you want to have the album art at the top with the 1200x1200 size I would stick with having the overlay_text = true as setting it to false will result in the size of the picture being scaled depending on the length of the song title... You then need to alter the script to place the artist and song title at the bottom of the screen (use the relative position method detailed in the link above) I have a fork of this repository and have implemented these changes already (however for the square screen), you might want to look at this and see if you can swap out the display_controller.py file from my repo (change the screen resolutions as you done previously) into your installation and see what happens...

[OSB1a]

Thank you for your helpful answer! Tkinter was the keyword. The different anchors are described here: Tkinter Anchors

With anchor=tk.W (W=West) the left alignment works.

I have also changed to overlay_text = True as you recommended.

I still want artist and album in separate lines. where is self.lable_detail assigned with detail_text? I have already replaced detail_text with detail_prefix in all possible places to get the artist separately. Unfortunately, either nothing is output or detail_text is still output.

your display_controller.py did not work here. TypeError: DisplayController.__init__() missing 1 required positional argument: 'use_font_family'

[ashenshugarRET]

Hello,

Yes, there are changes in go_sonos_highres.py as well, if you copy that across it should work...

Look in sonos_user_data.pyfor the code which assigns all the text for the labels etc.

Hope this helps and you get your implementation working soon.

[OSB1a]

Now it works with your variant! thanks for your support👌. I am really happy with the result.

I was able to force artist and track into separate lines by replacing the dot separator in detail_text with a line feed. In the wrap, justify=“center” must also be changed to "left" to make both lines left-aligned detail_text = " • ".join(filter(None, [detail_prefix, detail_suffix])) detail_text = "\n".join(filter(None, [detail_prefix, detail_suffix]))

[ashenshugarRET]

Great to hear that you've got it working.