Change profile picture
A custom profile picture can be uploaded and assigned per user account to personalize the appearance of the client in sessions for this user.
In the user area above the menu bar (see Working with the graphical user interface), the default 'Avatar' symbol for the logged-in user is the first character of the string resulting from a concatenation of the fields Name 1 (Name1), Name 2 (Name2) and Name 3 (Name3) of the address specified for a user account. The whole concatenation is also indicated next to the symbol to identify the user. In the following example, a smiley ASCII-character (☺) was entered as a prefix to the first name in the field 'Name 1' to demonstrate the effect. Of course, this is not a valid profile picture.
A profile picture for the current user account can be assigned by the Profile picture function from the Preferences context menu if the role of the session grants the permission 'Change profile picture' (Administration/Accounts/Profile/Change profile picture). Whether or not a profile picture is currently assigned to the user account does not matter. The function always opens the following dialog, which can be used to assign a new or remove an existing profile picture. An existing assignment cannot be edited:
As a first step, the profile image to be assigned must be uploaded, either by drag & drop from a folder of the file system or – as shown in the image – by selection via a dialog.
The selected image is shown in the preview area of the dialog, where the section to display in the client can be defined by the following methods:
The slider element (1) adjusts the zoom rate for the image as a whole, either by dragging & dropping the 'red button' or by rolling the mouse wheel when the mouse pointer is in the preview area.
The arrow buttons (2) rotate the picture in steps of 90 degrees clockwise or counter-clockwise.
The circular area in the center of the preview indicates the section of the picture to reproduce in the client (see the note below). The entire picture can be positioned by drag & drop 'below' this marker, to focus another section.
After defining the section to use as a profile picture, this selection can be committed by clicking the Set (3) button.
The Unset (4) button restores the default setting (no profile picture), which not only removes the existing assignment for the user account but also deletes the image file from the server.
If the dialog window is closed (5) without clicking a button, 'Change profile picture' is cancelled and the previous settings remain valid.
►NOTE◄ The Styles property avatarBorderRadius defines the radius for rounding the corners of the square image section saved as a profile picture. The default value of 50% (radius : diagonal ratio) defines a full circle. A value of 0% shows the total square. This is not an individual setting per profile picture. The following screenshot shows a sample output with a ratio of 25%. The marker in the preview window is always displayed as a circle shape.
Accessing uploaded profile pictures
When a profile picture is assigned, only the square section selected within the uploaded picture is stored on the server. Although a profile picture typically only appears in the client when the respective user account is used for a session, all profile pictures in use are available in the sub-folder 'avatar' of the 'web' folder (see the following screenshot) and may be viewed, deleted and possibly replaced by any user with access to the File manager.
Furthermore, even without a client login, these pictures can be downloaded by addressing the 'avatar' sub-folder as an extension to the standard Lobster Data Platform / Orchestration-URL by the following pattern: ... /avatar/user_avatar_{username}.png
Using a relative path with the same pattern profile pictures can also be referenced e.g. in input forms. However, to show a certain profile picture for a specific context, the source of the Image/Icon element must be 'adjusted' (typically at runtime).
An input form defining a user's details could feature the profile picture as shown in the screenshot below: