Avatar Like Rounded Text with Background

Anvil Q&A
1

Hello,

image

Would you know how to make an Avatar like but not image, instead text like the image above.

Thank you,
Joey

1 Like
2

We’ve just installed Avinit in the Server Module environment. So you can now do this:

sigourney-avatar
sigourney-avatar.gif807×352 12.6 KB

Here’s the client code:

  def text_box_1_pressed_enter(self, **event_args):
    """This method is called when the user presses Enter in this text box"""
    self.image_1.source = anvil.server.call('get_avatar', self.text_box_1.text)

And here’s the server code:

@anvil.server.callable
def get_avatar(name):
  return avinit.get_avatar_data_url(name)

That returns a data url: a URL that contains the data it refers to.

If you want to use a Media object instead, you can do this:

@anvil.server.callable
def get_avatar_as_media_obj(name):
  return anvil.BlobMedia(
    content_type='image/svg+xml',
    content=avinit.get_svg_avatar(name),
    name='my_avatar'
  )

https://anvil.works/build#clone:5ROG36YNERKEDW52=GG75TOEMJ4FLMABAL2ZRQ2Q4

(If you want to do this all on the client side instead, there’s a JavaScript library called initial.js, you could install it in Native Libraries)

7 Likes
3

Wow! This is super! Thanks @shaun!

1 Like