more work on menu display

This commit is contained in:
Sundog Jones 2020-08-02 14:36:52 -07:00
parent bc951e3c5a
commit 53e719e89e
2 changed files with 30 additions and 24 deletions

View File

@ -79,28 +79,37 @@ class SoundslabDisplay:
if self.show_menu and menu_data is not None: if self.show_menu and menu_data is not None:
# we have a menu to display # we have a menu to display
# #
# menu_data is structured as a list of dicts describing the rows to be displayed: # menu_data is structured as a dict describing the menu to be displayed:
# [ # {
# { output: "UP_ARROW" }, # "has_previous": False,
# { output: "Toggle repeat", selected: True }, # "has_next": True,
# { output: "Toggle shuffle" }, # "selected": 0,
# { output: "Show queue" }, # "rows": [ "row zero str", "row one str", "row two str" ]
# { output: "DOWN_ARROW" } # }
# ]
# a translucent red background rectangle for the menu area itself # a translucent red background rectangle for the menu area itself
menu_overlay.rectangle([(21,21), (self.screen_size[0] - 21,self.screen_size[1] - 21)], bg_color) menu_overlay.rectangle([(21,21), (self.screen_size[0] - 21,self.screen_size[1] - 21)], bg_color)
offset_from_top = 21 # start at the 21st row of pixels to draw inside the outer overlay # set up prev indicator row
menu_overlay.rectangle([(21,21), (self.screen_size[0] - 21, 61)], bg_color)
if menu_data["has_previous"]:
menu_overlay.polygon([(floor(self.screen_size[0] / 2) - 20, 59), (floor(self.screen_size[0] / 2), 23), (floor(self.screen_size[0] / 2) + 20, 59)], fill=fg_color)
# set up next indicator row
menu_overlay.rectangle([(21, self.screen_size[1] - 21), (self.screen_size[0] - 21, self.screen_size[1] - 61), bg_color)
if menu_data["has_next"]:
menu_overlay.polygon([(floor(self.screen_size[0] / 2) - 20, self.screen_size[1] - 59), (floor(self.screen_size[0] / 2), self.screen_size[1] - 23), (floor(self.screen_size[0] / 2) + 20, self.screen_size[1] - 59)], bg_color)
# draw three menu rows
offset_from_top = 61 # start at the 21st row of pixels to draw inside the outer overlay, add 40 to account for the "prev" indicator row
font = ImageFont.truetype(font='/usr/share/fonts/truetype/hack/Hack-Bold.ttf', size=14) font = ImageFont.truetype(font='/usr/share/fonts/truetype/hack/Hack-Bold.ttf', size=14)
for row in menu_data:
if row["selected"]: for row, idx in enumerate(menu_data["rows"], start=0):
if menu_data["selected"] == idx:
menu_overlay.rectangle([(21, offset_from_top),(self.screen_size[0] - 21, offset_from_top + 40)], fg_color) # highlight background for selected menu item menu_overlay.rectangle([(21, offset_from_top),(self.screen_size[0] - 21, offset_from_top + 40)], fg_color) # highlight background for selected menu item
output_size = menu_overlay.textsize(row["output"]) # get the size of the text to draw so we can center it in our rectangle for this row output_size = menu_overlay.textsize(row) # get the size of the text to draw so we can center it in our rectangle for this row
print("showing '" + row["output"] + "' at (" + str((self.screen_size[0] / 2) - floor(output_size[0] / 2)) + ", " + str(offset_from_top + 20 - floor(output_size[1])) + ")") print("showing '" + row + "' at (" + str((self.screen_size[0] / 2) - floor(output_size[0] / 2)) + ", " + str(offset_from_top + 20 - floor(output_size[1])) + ")")
menu_overlay.text(((self.screen_size[0] / 2) - floor(output_size[0] / 2) - 10, offset_from_top + (20 - floor(output_size[1]))), row["output"], font=font, fill=bg_color if row["selected"] else fg_color) # draw output text in appropriate color menu_overlay.text(((self.screen_size[0] / 2) - floor(output_size[0] / 2) - 10, offset_from_top + (20 - floor(output_size[1]))), row, font=font, fill=bg_color if menu_data["selected"] == idx else fg_color) # draw output text in appropriate color
offset_from_top += 40 offset_from_top += 40
# finally, set the current_menu image # finally, set the current_menu image

View File

@ -134,15 +134,12 @@ for pin in BUTTONS:
while True: while True:
if display.show_menu is True: if display.show_menu is True:
# test menu # test menu
display.updateMenu( display.updateMenu({
[ "has_previous": True,
{"output": "^", "selected": False}, "has_next": True,
{"output": "Toggle repeat", "selected": True}, "selected": 0,
{"output": "Toggle shuffle", "selected": False}, "rows": ["Turn repeat on", "Turn shuffle on", "View queue >"]
{"output": "View queue", "selected": False}, })
{"output": "v", "selected": False}
]
)
else: else:
display.updateMenu() display.updateMenu()
# test album art # test album art