icon and image for volume buttons

This commit is contained in:
2021-04-07 15:18:32 +02:00
parent e5ddc47587
commit b09e1d680e
2 changed files with 98 additions and 39 deletions

View File

@@ -70,13 +70,37 @@ def config_load():
#print(config.sections()) #print(config.sections())
return config 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): class Button(Div):
btype = None btype = None
command = None command = None
color_bg = '' color_bg = ''
color_fg = '' color_fg = ''
icon = '' icon = ''
icon_image = '' image = ''
def __init__(self, **kwargs): def __init__(self, **kwargs):
super().__init__(**kwargs) super().__init__(**kwargs)
#print(dir(self)) #print(dir(self))
@@ -106,29 +130,11 @@ class Button(Div):
process(self.command, False) process(self.command, False)
self.on('click', click) self.on('click', click)
if self.icon_image: if self.image:
self.text = '' self.text = ''
svg = '' tmp = svg_element(self.image)
if path.isfile(path.expanduser(self.icon_image)): if tmp is not None:
try: self.add(tmp)
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}")
elif self.icon: elif self.icon:
self.inner_html = f"<i class='fa-2x {self.icon}'><i>" self.inner_html = f"<i class='fa-2x {self.icon}'><i>"
@@ -138,17 +144,51 @@ class ButtonSound(Div):
name = None name = None
description = None description = None
volume = None volume = None
button_style = None decrease_icon = ''
decrease_image = ''
increase_icon = ''
increase_image = ''
mute_icon = ''
mute_image = ''
def __init__(self, **kwargs): def __init__(self, **kwargs):
super().__init__(**kwargs) super().__init__(**kwargs)
self.classes = "grid-rows-2" self.classes = "grid-rows-2"
self.div = Div(classes="flex") 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) if self.decrease_image:
Button(inner_html='toggle mute', click=self.mute, a=self.div) 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"<i class='fa-2x {self.decrease_icon}'><i>",
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"<i class='fa-2x {self.increase_icon}'><i>",
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"<i class='fa-2x {self.mute_icon}'><i>",
click=self.mute, a=self.div)
else:
Button(inner_html='toggle mute', click=self.mute, a=self.div)
self.add(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): async def decrease(self, msg):
self.volume.text = f'{self.description}: {volume_decrease(self.name)}' 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=''), 'color-fg': config.get(i, 'color-fg', fallback=''),
'name': config.get(i, 'name', fallback=None), 'name': config.get(i, 'name', fallback=None),
'decrease-icon': config.get('default', 'volume-decrease-icon', fallback=''), '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: try:
volume_dict[id] += tmp volume_dict[id] += tmp
except KeyError: except KeyError:
@@ -213,7 +257,7 @@ def application(request):
'color-fg': config.get(i, 'color-fg', fallback=''), 'color-fg': config.get(i, 'color-fg', fallback=''),
'command': config.get(i, 'command', fallback=None), 'command': config.get(i, 'command', fallback=None),
'icon': config.get(i, 'icon', fallback=''), 'icon': config.get(i, 'icon', fallback=''),
'icon-image': config.get(i, 'icon-image', fallback='')}] 'image': config.get(i, 'image', fallback='')}]
try: try:
button_dict[id] += tmp button_dict[id] += tmp
except KeyError: except KeyError:
@@ -227,7 +271,11 @@ def application(request):
color_bg = f"background-color:{j['color-bg']};" if ishexcolor(j['color-bg']) else '' 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 '' color_fg = f"color:{j['color-fg']};" if ishexcolor(j['color-fg']) else ''
ButtonSound(name=j['name'], description=j['description'], 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: for i in button_dict:
var = var_prefix+i var = var_prefix+i
for j in button_dict[i]: for j in button_dict[i]:
@@ -235,7 +283,7 @@ def application(request):
vars()[var] = Div(classes="flex flex-wrap", a=wp) vars()[var] = Div(classes="flex flex-wrap", a=wp)
Button(text=j['text'], btype=j['type'], command=j['command'], Button(text=j['text'], btype=j['type'], command=j['command'],
color_bg=j['color-bg'], color_fg=j['color-fg'], 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: if not wp.components:
# config not found or empty, therefore insert an empty div to not get an error # config not found or empty, therefore insert an empty div to not get an error

View File

@@ -22,19 +22,30 @@
# icon = Font Awesome name # icon = Font Awesome name
# icon-image = path to svg file # icon-image = path to svg file
# #
# : N. optional group/row specification # : N. optional group/row specification
# : NAME id, name of the button # : NAME id, name of the button
# : color-bg background color # : color-bg background color
# : color-bg forground color # : color-bg forground color
# : command command(s) to run # : command command(s) to run
# : icon use icon instead of NAME (Font Awesome), e.g.: fas fa-play # : icon use icon instead of NAME (Font Awesome), e.g.: fas fa-play
# : icon-image absolute path to svg file # : image absolute path to svg file
# #
# [N.empty.NAME] # [N.empty.NAME]
# #
# : N. optional number to specify group/row # : N. optional number to specify group/row
# : NAME id, name of the button # : 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] [gui]
width = 800 width = 800
height = 600 height = 600