Custom UI
The photo mode screen is built in code and works as it is. There are three ways to make it your own, from a few colours to a completely different screen.
1. Restyle it
Section titled “1. Restyle it”Make a Widget Blueprint with TALensman Widget as its parent class and set it as the profile’s Widget Class. In its Style you can change:
| Style | Default |
|---|---|
| Accent | Unreal blue |
| Panel, Card, Card Border | Dark, translucent |
| Row Selected | The accent at 22 % |
| Key Outline | White at 55 % |
| Success | Green |
| Warning | Amber (a share code from another game) |
| Error | Red (a typo in a share code) |
| Recording | Red (the recording dot and bar) |
| Text, Dim Text | Near white, grey |
| Bar Back | White at 12 % |
| Letterbox | Black at 72 % |
| Guides | White at 35 % |
| Font Size | 15 |
| Panel Width | 720 |
| Tab Width | 160 (the tab list on the left of the panel) |
The widget also has Row Class and Tab Class (the widgets for one row and one tab), the Gallery Icon and Saved Icon, and Tab Icons: a picture per tab id (Camera, Looks, Lens, Look, Character, Lights, Scene, Frame, Stickers, Clip) instead of the built-in line icon.
2. Design your own layout
Section titled “2. Design your own layout”Design the Widget Blueprint yourself. Widgets with these names are picked up and filled in; any you leave out are simply not used:
| Parent class | Widget names |
|---|---|
| TALensman Widget | Viewfinder, ControlsPanel, TabList, TabTitle, RowList, RowScroll, HintText, PromptBar, Flash, ToastBox, ToastTitle, ToastText, ToastImage, SuccessBox, SuccessText, MessageText, RecordingBox, RecordingText, RecordingBar, SavingBox, SavingText, SavingBar, TripodBadge, TextBox, TextBoxTitle, TextBoxField, TextBoxSummary, TextBoxProblem, TextBoxProblemIcon, TextBoxPaste, TextBoxApply, TextBoxCancel, GalleryPanel, GalleryImage, GalleryStrip, GalleryInfo, GalleryEmpty, GalleryPromptBar, GalleryPrevious, GalleryNext, GalleryPlayBar, GalleryPlayIcon, GalleryProgress, GalleryTime, GalleryOpenFile |
| TALensman Row Widget (Row Class) | Background, LabelText, ValueGroup, LeftArrow, ValueText, Badge, BadgeText, RightArrow, ValueArea, Bar, BarFill, BarRest, KnobBefore, Knob, KnobAfter, SwitchTrack, SwitchKnob, InfoText, GridTitle, GridPanel, CodeText, CopyButton |
| TALensman Tab Button (Tab Class) | Background, LabelText, Marker, Icon, IconImage |
The Viewfinder draws the letterbox, frame, stickers, logo, guides and focus marker, and handles the mouse on the picture (focus, placing and dragging stickers). Keep it in your layout unless you draw the picture yourself.
Bars (RecordingBar, SavingBar, GalleryProgress) are horizontal boxes with two children, the filled part and the rest.
Lensman Icon is a widget that draws the built-in line icons at any size: Camera, Looks, Lens, Filter, Character, Lights, Scene, Frame, Stickers, Clip, Gallery, Info, Warning, Error, Check, Tripod, Play, Pause, Folder, Copy, Paste, Plus, Rec, Spinner and more.
Override these events for your own feedback:
| Event | When |
|---|---|
| Play Shutter | A photo is taken: flash and sound. |
| Show Photo Saved | A photo or clip is written, with its thumbnail. |
| Show Message | A short message, such as “Photo deleted.” |
| Show Success | A message that something worked, such as “Look saved: Look 1”. |
| Refresh Controls | The rows changed. |
| Refresh Page | The page changed (menu, gallery, hidden). |
| Get Key Brush | Your own icon for a key in the button prompts. |
Open Text Box, Set Text Box Text, Press Text Box Button and Close Text Box drive the share code and rename box from your own layout.
Rows have On Control Set and tabs On Tab Set for your own row and tab widgets. Get Prompt Texts gives the current prompts as pairs of key and action labels.
3. Build a new screen
Section titled “3. Build a new screen”Ignore the widget and use the subsystem: the menu is plain data. Get Tabs returns every tab with its rows (id, label, type, value, range, options, display text, hint, badge), and Set Control Value, Step Control and Activate Control change rows by id. On Controls Changed and On Page Changed tell your screen when to refresh. See Blueprint & C++.