From b09e1d680ecfad720d0b33dfe4f39ccaf306cafe Mon Sep 17 00:00:00 2001 From: Daniel Weschke Date: Wed, 7 Apr 2021 15:18:32 +0200 Subject: [PATCH] icon and image for volume buttons --- controldeck.py | 112 ++++++++++++++++++++++++++++----------- example/controldeck.conf | 25 ++++++--- 2 files changed, 98 insertions(+), 39 deletions(-) diff --git a/controldeck.py b/controldeck.py index a251222..4a5b218 100644 --- a/controldeck.py +++ b/controldeck.py @@ -70,13 +70,37 @@ def config_load(): #print(config.sections()) return config +def svg_element(image): + svg = '' + if path.isfile(path.expanduser(image)): + try: + with open(path.expanduser(image)) as f: + svg = f.read() + except Exception as e: + print(f"{e}") + try: # svg with custom tags, as inkscape is using, cannot be interpreted + _svg = parse_html(svg) + #print(dir(tmp_svg)) # add_attribute + #print(tmp2.attributes) + # set width and height to viewBox to update width and height for scaling + w = _svg.width if hasattr(_svg, 'width') else "64" + h = _svg.height if hasattr(_svg, 'height') else "64" + vb = _svg.viewBox if hasattr(_svg, 'viewBox') else '0 0 ' + w + ' ' + h + _svg.viewBox = vb + _svg.width = 64 + _svg.height = 64 + except Exception as e: + print(f"[Error SVG]: {e}") + _svg = None + return _svg + class Button(Div): btype = None command = None color_bg = '' color_fg = '' icon = '' - icon_image = '' + image = '' def __init__(self, **kwargs): super().__init__(**kwargs) #print(dir(self)) @@ -106,29 +130,11 @@ class Button(Div): process(self.command, False) self.on('click', click) - if self.icon_image: + if self.image: self.text = '' - svg = '' - if path.isfile(path.expanduser(self.icon_image)): - try: - with open(path.expanduser(self.icon_image)) as f: - svg = f.read() - except Exception as e: - print(f"{e}") - try: # svg with custom tags, as inkscape is using, cannot be interpreted - _svg = parse_html(svg) - #print(dir(tmp_svg)) # add_attribute - #print(tmp2.attributes) - # set width and height to viewBox to update width and height for scaling - w = _svg.width if hasattr(_svg, 'width') else "64" - h = _svg.height if hasattr(_svg, 'height') else "64" - vb = _svg.viewBox if hasattr(_svg, 'viewBox') else '0 0 ' + w + ' ' + h - _svg.viewBox = vb - _svg.width = 64 - _svg.height = 64 - self.add(_svg) - except Exception as e: - print(f"[Error SVG]: {e}") + tmp = svg_element(self.image) + if tmp is not None: + self.add(tmp) elif self.icon: self.inner_html = f"" @@ -138,17 +144,51 @@ class ButtonSound(Div): name = None description = None volume = None - button_style = None + decrease_icon = '' + decrease_image = '' + increase_icon = '' + increase_image = '' + mute_icon = '' + mute_image = '' def __init__(self, **kwargs): super().__init__(**kwargs) self.classes = "grid-rows-2" self.div = Div(classes="flex") - Button(inner_html='- 5%', click=self.decrease, a=self.div) - Button(inner_html='+ 5%', click=self.increase, a=self.div) - Button(inner_html='toggle mute', click=self.mute, a=self.div) + + if self.decrease_image: + tmp = svg_element(self.decrease_image) + if tmp is not None: + Button(click=self.decrease, a=self.div).add(tmp) + elif self.decrease_icon: + Button(inner_html=f"", + click=self.decrease, a=self.div) + else: + Button(inner_html='- 5%', click=self.decrease, a=self.div) + + if self.increase_image: + tmp = svg_element(self.increase_image) + if tmp is not None: + Button(click=self.increase, a=self.div).add(tmp) + elif self.increase_icon: + Button(inner_html=f"", + click=self.increase, a=self.div) + else: + Button(inner_html='+ 5%', click=self.increase, a=self.div) + + if self.mute_image: + tmp = svg_element(self.mute_image) + if tmp is not None: + Button(click=self.mute, a=self.div).add(tmp) + elif self.mute_icon: + Button(inner_html=f"", + click=self.mute, a=self.div) + else: + Button(inner_html='toggle mute', click=self.mute, a=self.div) + self.add(self.div) - self.volume = Div(text=f"{self.description}: {volume(self.name)}", classes="text-gray-600 text-center -mt-2", a=self) + self.volume = Div(text=f"{self.description}: {volume(self.name)}", + classes="text-gray-600 text-center -mt-2", a=self) async def decrease(self, msg): self.volume.text = f'{self.description}: {volume_decrease(self.name)}' @@ -199,7 +239,11 @@ def application(request): 'color-fg': config.get(i, 'color-fg', fallback=''), 'name': config.get(i, 'name', fallback=None), 'decrease-icon': config.get('default', 'volume-decrease-icon', fallback=''), - 'decrease-icon-image': config.get('default', 'volume-decrease-icon-image', fallback='')}] + 'decrease-image': config.get('default', 'volume-decrease-image', fallback=''), + 'increase-icon': config.get('default', 'volume-increase-icon', fallback=''), + 'increase-image': config.get('default', 'volume-increase-image', fallback=''), + 'mute-icon': config.get('default', 'volume-mute-icon', fallback=''), + 'mute-image': config.get('default', 'volume-mute-image', fallback='')}] try: volume_dict[id] += tmp except KeyError: @@ -213,7 +257,7 @@ def application(request): 'color-fg': config.get(i, 'color-fg', fallback=''), 'command': config.get(i, 'command', fallback=None), 'icon': config.get(i, 'icon', fallback=''), - 'icon-image': config.get(i, 'icon-image', fallback='')}] + 'image': config.get(i, 'image', fallback='')}] try: button_dict[id] += tmp except KeyError: @@ -227,7 +271,11 @@ def application(request): color_bg = f"background-color:{j['color-bg']};" if ishexcolor(j['color-bg']) else '' color_fg = f"color:{j['color-fg']};" if ishexcolor(j['color-fg']) else '' ButtonSound(name=j['name'], description=j['description'], - button_style = color_bg + color_fg, a=eval(var)) + color_bg=j['color-bg'], color_fg=j['color-fg'], + decrease_icon=j['decrease-icon'], decrease_image=j['decrease-image'], + increase_icon=j['increase-icon'], increase_image=j['increase-image'], + mute_icon=j['mute-icon'], mute_image=j['mute-image'], + a=eval(var)) for i in button_dict: var = var_prefix+i for j in button_dict[i]: @@ -235,7 +283,7 @@ def application(request): vars()[var] = Div(classes="flex flex-wrap", a=wp) Button(text=j['text'], btype=j['type'], command=j['command'], color_bg=j['color-bg'], color_fg=j['color-fg'], - icon=j['icon'], icon_image=j['icon-image'], a=eval(var)) + icon=j['icon'], image=j['image'], a=eval(var)) if not wp.components: # config not found or empty, therefore insert an empty div to not get an error diff --git a/example/controldeck.conf b/example/controldeck.conf index c62243f..ca382f1 100644 --- a/example/controldeck.conf +++ b/example/controldeck.conf @@ -22,19 +22,30 @@ # icon = Font Awesome name # icon-image = path to svg file # -# : N. optional group/row specification -# : NAME id, name of the button -# : color-bg background color -# : color-bg forground color -# : command command(s) to run -# : icon use icon instead of NAME (Font Awesome), e.g.: fas fa-play -# : icon-image absolute path to svg file +# : N. optional group/row specification +# : NAME id, name of the button +# : color-bg background color +# : color-bg forground color +# : command command(s) to run +# : icon use icon instead of NAME (Font Awesome), e.g.: fas fa-play +# : image absolute path to svg file # # [N.empty.NAME] # # : N. optional number to specify group/row # : NAME id, name of the button +[default] +# volume-decrease-icon = fas fa-volume-down +# volume-increase-icon = fas fa-volume-up +# volume-mute-icon = fas fa-volume-off +# volume-mute-icon-alt = fas fa-volume-mute +# volume-mute-icon-alt = +# volume-decrease-image = +# volume-increase-image = +# volume-mute-image = +# volume-mute-image-alt = + [gui] width = 800 height = 600