How to use the Circle Avatar widget
The Circle Avatar widget allows you to easily add avatars to your apps. Here's how you do it.
Drag out the Widget
Set a Photo for the Avatar
Click on the three dots next to "File name" (1). Select a suitable photo from your computer (2). Click Open (3).
Your photo will appear within the widget:
You can easily edit the appearance of your avatar, give it a "disabled" look or even make it invisible. You can display initials or show a photo.
1) Set a tooltip here which will show when the user hovers over the avatar in run mode.
2) Check or uncheck to show or hide the avatar
3) Check "disabled" to have an automatically faded out disabled look applied
4) Set the width of the line round the photo or initials in the circle
5) Set the path to the avatar's photo. If there is no photo the circle will display the initials shown in the Label field
6) Set the label for the avatar to display one initial or two initials. The initials are automatically capitalized for display.
Change the Colors
You can customize the circle fill color and line color, as well as setting blend levels, in the color options tab.
1) Set the blend level. I've set it to 63, which causes the avatar image to fade.
2) Pick a color for the initials. The red I've chosen has been faded by the blend level
3) Pick a background fill color
4) Pick a border color for the line round the avatar.
This is obviously not the most tasteful combination! You might want to pick something prettier for your own apps.
Doing it in Code
Obviously your end user doesn't have access to the LiveCode IDE, so you will want to be able to set all these parameters in code. It's easy. First, lets add a button to our stack called "upload image". Lets have a field for the user to enter their name, and a label for the field.
I've called the button (1) "Upload Image", the field "name" (2) and the label "Enter name" (3). I've set the contents of the label also to "Enter Name". When the user clicks the "Upload Image" button we want it to allow them to upload an image from their computer. To do this, attach this code to the button:
answer file "Select a file"
if the result is not "Cancel" then
put it into tFileName
set the filename of widget "Circle Avatar" to tFileName
-- Use the file path as required
Note that the default name of the widget is "Circle Avatar". If you change the widget name, you need to change the reference in the code.
Set the Users Name
To allow the user to enter their name and have the widget use their initials, right click on the "name" field, open the script editor and enter:
set the label of widget "avatar" to me
Now when there is no image in the filepath, the widget will display the users initials.