Double click on the widget to bring up its Inspector:

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.

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.

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:

on mouseup
     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
     end if
end mouseup

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.

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:

on keyup
     set the label of widget "avatar" to me
end keyup

Now when there is no image in the filepath, the widget will display the users initials.

To open the documentation for the widget, right click on it, then choose "Show Documentation". You can now see what parameters can be used with this widget in code.