Active buttons inside of images

Anvil Q&A
1

trying to create buttons inside an image:

buttons seem to only want to go on the outside of images:

Client code below:

import anvil
import anvil.server
from ._anvil_designer import MainTemplate

class Main(MainTemplate):
def init(self, **properties):
self.init_components(**properties)

def download_button_click(self, **event_args):
    result = anvil.server.call("get_midi")
    anvil.media.download(result)

def outlined_button_1_click(self, **event_args):
  """This method is called when the button is clicked"""
  pass

def outlined_button_2_click(self, **event_args):
    result = anvil.server.call("create_midi_file")
    anvil.media.download(result)

def link_1_click(self, **event_args):
  """This method is called when the link is clicked"""
  pass

server code below:

import anvil
import anvil.server
import io
import mido

@anvil.server.callable
def get_midi():
ionian_scale = [60, 62, 64, 65, 67, 69, 71, 72]

buffer = io.BytesIO()
file = mido.MidiFile()
track = mido.MidiTrack()
file.tracks.append(track)

for note in ionian_scale:
    track.append(mido.Message('note_on', note=note, velocity=64, time=0))
    track.append(mido.Message('note_off', note=note, velocity=64, time=240))

file.save(file=buffer)
buffer.seek(0)
return anvil.BlobMedia(content=buffer.read(), content_type="audio/midi", name="demo.mid")
3

Here is a clone link with a minimal example of how to get the button on the image with CSS:

The css is at the bottom of the theme.css file.

N.B., if you do decide to go the custom component path and you want to make this work for multiple components, you will need to shadow the events and properties you need from the image and button.

2 Likes
4

This is great. thank you very much. This will be perfect for me to analyze.

1 Like