# SmartLocker - Scene Composer Step-by-Step Guide **URL:** \ **Category:** Candera Showcase\ **Created:** [June 29, 2026, 7:29am UTC](https://community.candera.eu/t/smartlocker-scene-composer-step-by-step-guide/105 "2026-06-29T07:29:41Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![rchikk](https://community.candera.eu/user_avatar/community.candera.eu/rchikk/32/164_2.png) [@rchikk](https://community.candera.eu/u/rchikk)\ **Post date:** [June 29, 2026, 7:29am UTC](https://community.candera.eu/t/smartlocker-scene-composer-step-by-step-guide/105/1 "2026-06-29T07:29:41Z")
## Summary The Smart Locker system provides a secure and user-friendly solution for storing and retrieving personal belongings through a structured workflow implemented in Scene Composer. The application starts on the **Home Screen** , which offers two main options: **Get New Locker** and **Access My Locker**. Three utility icons are also available: **Language** , **Help** , and **Info**. The Language icon allows users to switch between English and German, the Info icon provides information about Candera CGI Studio, and the Help icon displays FAQs, usage guidance, and customer support information. Selecting **Get New Locker** opens the **Locker Selection Screen** , where users can choose from three lockers. Available lockers can be selected, while occupied lockers are disabled and greyed out. After selecting a locker, users create a secure four-digit password, which must be confirmed on the following screen. If the passwords do not match, an error message is displayed and the user must try again. Once confirmed, the **Locker Confirmation Screen** summarizes the selected locker and provides instructions for secure usage. To retrieve stored belongings, users select **Access My Locker** from the Home Screen. They then choose their assigned locker and enter the previously created four-digit password. A valid password unlocks the locker, while an incorrect password triggers an error message and another authentication attempt. Overall, the workflow provides secure access control, multilingual support, user assistance, and an intuitive experience for both locker allocation and retrieval. ![SmartLocker|690x460; 10%](https://community.candera.eu/uploads/default/original/1X/38facae1ec12fc259de1ee31b94636be6ee0ee3d.jpeg) > **Part 1: Solution Setup** > > ## Smart Locker Part 1: Solution Setup > > To provide you with a good basis to re-create the solution on your own, we provide an empty solution. Based on this you can create the solution by following the step-by-step guide below. This empty solution includes all bitmap images used in the final solution as well. > In particular, the empty solution includes: > > - Basic solution setup with 1280 × 720 resolution > - All used Custom Controls > - All bitmap images used in the final solution > - All used text styles > - Organized resource structure > - Ready-to-use bitmap resources > You can find all pre-imported bitmap images under Resources → Bitmap in the Solution Explorer. These resources can be used while creating scenes, controls, and application functionality. > ![image_2](https://community.candera.eu/uploads/default/original/1X/2f01e464db3a256e1ad8fc616e784d4f79bb671b.png) > **Part 2: Background** > > ## Smart Locker Part 2: Background > > - The background scene is common for all scenes and contains Back, Lang, Info and Help buttons. > - Add DigitalClock (Time): > 1. Drag and drop Digital clock from Toolbox into scene tree and rename it as Time. > 2. Then in the control properties, Set the value as 7200 and click the link icon next to Time to attach databinding. > 3. Go to PredefinedBindingSource4 and select Item1 then click **OK**. > 4. Enable Show Full 24 Hours and disable Show Seconds. > 5. Add text styles for Hours Text Style, Minutes Colon Text Style and Minutes Text Style as Inter SemiBold\_40. > ![Picture1](https://community.candera.eu/uploads/default/original/1X/df4100dc6bc133b1488f454f994e2c2f7cd2123a.jpeg) > 6. Refer to the images below for the placement of the buttons and also the scene tree. > ![image](https://community.candera.eu/uploads/default/original/1X/574c643bd55a56eeac352fc3b2a3a4597551959a.png) > **Part 3: Language** > > ## Smart Locker Part 3: Language > > - This scene is the popup scene, so we need to change the camera properties so that it is displayed on the centre of the screen. Click the camera and in the properties change the values for Viewport: Left = 380, Top = 185, Width = 445, Height = 425 and disable Clear Color Buffer. > - Add Button: > 1. Click Event Handler behavior of EnglishButton and disable ConsumeEvent. > 2. Drag and drop Set Culture Action into the behaviors of the button and o the properties of set culture add 00 to Locale. > ![image1](https://community.candera.eu/uploads/default/original/1X/98784c19a010596cf156c6978ce6dd57aafe31a3.png) > 3. Follow the same steps for adding GermanButton under the German group, but add Locale as de-DE. > ![image](https://community.candera.eu/uploads/default/original/1X/176018d835081fecfbd70948844e2ce23c730fcb.png) > > - Add Text node from toolbox under English group node as English, > Properties: > - Render Order Rank = 1. > > - Similarly, add the text and flag for German Group node. > ![image](https://community.candera.eu/uploads/default/original/1X/93d09d5a8e287746e2fbaf1291eb467c3287dda8.png) > - Refer the above images for the placement and also the scene tree. > **Part 4: Info** > > ## Smart Locker Part 4: Info > > - Scene Info provides the information about the tool that is used to create Smart Locker solution. > ![image](https://community.candera.eu/uploads/default/original/1X/a01fcf389a6403bc6642ab98b9c77d74e0ac7882.png) > **Part 5: Help** > > ## Smart Locker Part 5: Help > > - As this solution supports the German language, follow the steps below to add German Language or translations for any other preferred language. > 1. Click the Globe Icon on the top. > 2. Click “+” icon. > 3. Search for preferred language, here for example it is German(de-DE). > 4. Click OK. > ![image3](https://community.candera.eu/uploads/default/original/1X/b414d788b1826164b0c8652f3baf7da4c5842c68.png) > 5. Click Select template for item (browser icon) next to Text Q/A Support. > 6. On the Language Table Selection popup click Add. > 7. Add the Text “Q/A Support”. > 8. Click the drop down near Master [00] select German. > ![image](https://community.candera.eu/uploads/default/original/1X/bc6c423de4d6d7db97a03c9cd64bc67fa5a5e9c9.png) > 9. Translate the text “Q/A Support” to German “Fragen/Antworten-Unterstützung” and add it under same Text ID. > 10. Click OK > ![image](https://community.candera.eu/uploads/default/original/1X/12cb2f7acfc8a37b73724ec4141e25804d0b2f50.png) > > - In the same way add German translated text for all the texts present in the solution. > - Refer to the image below for the text that needs to be added into the scene. > ![image](https://community.candera.eu/uploads/default/original/1X/97456f7c040a8a437a98d6a72c5984636724285c.png) > **Part 6: Home Screen** > > ## Smart Locker Part 6: Home Screen > > - HomeScreen scene is the main entry point where the user can either get a new locker or access the used locker by clicking on the Buttons. > ![image](https://community.candera.eu/uploads/default/original/1X/d960676c38d18421dafe4f781155451828aa87aa.png) > **Part 7: Pin Error** > > ## Smart Locker Part 7: Pin Error > > - Click the camera in the scene tree and in the properties change the viewport values Left = 400, Top = 229, Width = 400 and Height = 300.Disable Clear Color Buffer. > - Refer to the image below for position of text and button. > ![image](https://community.candera.eu/uploads/default/original/1X/28709ac9e5be876a9328138fe8b5f01d4f8d1db7.png) > **Part 8: Get Locker** > > ## Smart Locker Part 8: Get Locker > > **1. LockerGrp: (Render order rank = 2)** > > - This scene allows the user to select locker from the available lockers and the selected locker is displayed in the active selection part which is done by the SelectedLocker control. > - Drag and drop this SelectedLocker control to ActiveSelection group, > Properties: > - Click the link icon next to Number and go to PredefinedBindingSource3 and select Item2, then click **OK**. > - State = 2. > > - Drag and drop the Value behavior from toolbox to Locker group, > Properties: > - Name = Value\_SelectedLocker. > - Variant = UInt8 and 0. > - To attach Data binding = Click the link icon next to the Variant property go to PredefinedBindingSource3 and select Item2 and click **OK**. > ![image4](https://community.candera.eu/uploads/default/original/1X/e9f57e1977f6cbcd64865bab3f6d9da49ce35b47.png) > > - Drag and drop Arithmetic Operation from toolbox to receivers of Value\_SelectedLocker. > Properties: > \* Operand = UInt8, 1. > \* OutputType = UInt8Value, > \* Click “+” icon of Receivers and add the render child nodes path of the ProceedBtn group and click **OK**. > ![image](https://community.candera.eu/uploads/default/original/1X/5cc46d12ffcb1edc58fdf09d32acd14aa942a07b.png) > - Add behaviors to Grid group(Contains all 3 lockers): > - Drag and drop Handle control state. > - Drag and drop OnClick from toolbox and to the Actions add Enable Rendering. > - In the properties of Enable rendering, select the SelectedLocker path for TargetNode and enable Visible property. > ![image](https://community.candera.eu/uploads/default/original/1X/4fd0ec74cd964030281597c288ea64da07bb3128.png) > > - Add behaviors to all 3 Lockers: > - Add OnLockerButtonClick from controls to the locker control under Grid group. > 1. Change the Locker Number to 1 and to the Dedicated Behavior property add the Value\_SelectedLocker path of the Locker group. > ![image](https://community.candera.eu/uploads/default/original/1X/db1ccfee0be325d0d51a333a02ec0df1792b3419.jpeg) > > - Now change the properties of Locker\_1: > Properties: > - Number = 1, > - State = 2. > - Click the link icon next to State property and go to PredefinedBindingSource1 and select Item1. > > - Click Locker\_2, > Properties: > - Number = 2, > - State = 2. > - Click the link icon next to State property and go to PredefinedBindingSource1 and select Item2. > > - Click Locker\_3, > Properties: > - Number = 3, > - State = 2. > - Click the link icon next to State property and go to PredefinedBindingSource1 and select Item3. > > - Refer to the image below to for the positions of buttons and texts. > ![image](https://community.candera.eu/uploads/default/original/1X/a9bfd5f90e1d8bece8c502437a7b125d670b1085.png) > > **2. EnterPinGrp:** (Create a group and render order rank = 1) > > - Add ActiveSelection control to EnterPinGrp. In the properties, > - Pin Entry Index = Double and 1.00, > - Number = UInt8 and 2, > - Enable Touch = Disable. > > - Create PinEntry group under Code group. > - PinEntryControl contains the filled and empty images which changes the password to filled image when the user enters the password. > - Drag and drop PinEntryControl to this group. > Properties: > - Variant (attach databinding) = PredefinedBindingSource3, Item7. > - Clone the PinEntryControl 3 more times as PinEntryControl\_1, PinEntryControl\_2 and PinEntryControl\_3. > - For PinEntryControl\_1, > Properties: > - Variant (attach databinding) = PredefinedBindingSource3, Item8. > > - For PinEntryControl\_2, > Properties: > - Variant (attach databinding) = PredefinedBindingSource3, Item9. > > - For PinEntryControl\_3 > Properties: > - Variant (attach databinding) = PredefinedBindingSource3, Item10. > - Create HiddenPinEntry group node under Code group, > > 1. Drag and drop the InputField under this group from Controls and rename it as InputField\_pin1. > Properties: > - Attach databinding to the Default Text = PredefinedBindingSource3, Item3. > - Placeholder Text = keep it empty, > - Set Value On Each Change = Enable, > - Max Text Length = 4, > - Just Digits = Enable, > - Keyboard Node = Path of the NumberKeyboard. > > 2. Clone this input field once and rename it as InputField\_pinConfirmed. > Properties: > - Attach databinding to the Default Text = PredefinedBindingSource3, Item4. > > 3. Adding behaviors to HiddenPinEntry group, Drag and drop Value behavior. > Properties: > - Name = Value\_RequestPin, > - DispatchStrategy = Bubble, > - Variant = Bool and attach databinding (PredefinedBindingSource3, Item1) > > 4. Add Map Value to the receivers of Value\_RequestPin > Properties: > - InputMin = Enable, Bool > - InputMax = Enable, Bool = Enable > - OutputMin = 1.00, > - OutputMax = 2.00, > - OutputType = FloatValue. > > 5. Add Render Child Nodes to the receivers of Map Value and change the OperationMode to Single. > > - Refer to the image below for position > ![image](https://community.candera.eu/uploads/default/original/1X/2af86032563aaffa879cc8d45d736c546c5d199d.png) > **Part 9: Access Locker** > > ## Smart Locker Part 9: Access Locker > > - LockerGrp: > - Render Order Rank for EnterPinGrp is 1 and for LockerGrp it is 2. > - Click SelectedLocker control and go to properties, click the link icon next to the Number and select Unbind to unbind databinding. > - For Lockers under Grid group unbind the State property. > - For all 3 lockers change the state to 3. > - Refer to the image below for positions of LockerGrp. > ![image](https://community.candera.eu/uploads/default/original/1X/f025ad68a98474c3b7af78a17ad7e45973bfa339.png) > - EnterPinGrp: > - Add behaviors to Right group, drag and drop Value behavior. > Properties: > - Name = REQUEST\_TO\_UNLOCK, > - DispatchStrategy = Bubble, > - Variant = UInt8 and 0, attach databinding (PredefinedBindingSource3, Item1) > > - Add behavior to Proceed button, drag and drop OnClick to behaviors. > - To the actions of OnClick add Send Value As Event, > Properties: > - Value = UInt8 and 2, > - EventDispatchStrategy = DedicatedBehavior. > > - Drag and drop Value behavior to DedicatedBehavior of Send Value As Event. > Properties: > - Variant = Attach databinding (PredefinedBindingSource3, Item1). > > - Drag and drop SelectedLocker control to Left group, > - Refer to the image below for positions of EnterPinGrp. > ![image](https://community.candera.eu/uploads/default/original/1X/c80d096047b4cc9b7ec4a5d0abb5b7752bd9e745.png) > **Part 10: Get Locker Success** > > ## Smart Locker Part 10: Get Locker Success > > - Add behaviors to Finish button: > > 1. Drag and drop Value behavior from toolbox to the Finish button behaviors, > Properties: > - Name = Value\_LockerClosed, > - Variant = Attach databinding (PredefinedBindingSource3, Item1) > 2.To the receivers, add Action On Value and add Check Processed Value to the condition of Action On Value. > > 2. In the properties of Check Processed Value change ConditionOperator to Equal and ConditionValue as 4. > 3. Add Set Control State to Actions of Action On Value rename it as Set Enabled and enable ChangeTo. > 4. Add Action On Value to receivers of Value\_LockerClosed and add Check Not Condition to condition of Action On Value. > 5. Add Check Processed Value to condition of Check Not Condition and change the ConditionOperator to Equal and ConditionValue as 4. > 6. Add Set Control State to Actions of Action On Value rename it as Set Disable and change the State property to Enable. > ![image](https://community.candera.eu/uploads/default/original/1X/05945580c63e2f7f9f1fae71d1c2dc880f870b83.png) > **Part 11: Access Locker Success** > > ## Smart Locker Part 11: Access Locker Success > > - Clone Scene\_GetLockerSuccess in the Solution Explorer and rename it as Scene\_AccessLockesSuccess. > - In the finish button change the condition value property of Check processed value of both the action on value to 0. > - Refer to the image below for text. > ![image](https://community.candera.eu/uploads/default/original/1X/b1757b9cca79ffa7175c40b66d4e37fb86ed7719.png) > **Part 12: State Machine** > > ## Smart Locker Part 12: State Machine > > - To the HomeScreen state drag and drop Set Control State from toolbox to On Entry Actions. > > - Add Send Value as Event to On Entry Actions, > Properties: > > - Add Render Child Nodes to On Entry Actions, > Properties: > > - Add Render Child Nodes to On Exit Actions, > Properties: > > - Add another states inside background state as State\_Info and Help state, then add transitions. > > - Create a SubChart state and rename it as GetLockers, > > - On Entry Actions > > - Add a state inside background state as GetLockerSuccess > > - To the Actions add Render Child Node > Properties: > > - Create another SubChart state and rename it as Access Locker, > > - On Entry Actions > > 1. Add Transition Request from Toolbox > Properties: > - Request Type = Active. > - Identifier = Scene\_AccessLocker path. > > 2. Add Set Control State > Properties: > - TargetNode =ProceedButton path from LockerGrp of Scene\_AccessLocker > - State = Enable. > - ChangeTo = Enable. > > - On Exit Actions > > - Add a State outside the State\_Background state and rename it as State\_Language and add transitions. > > - Add a State as State\_LockerSelection and add transition from initial state to State\_LockerSelection state. > > - To the On Entry Actions > > - Add another State as State\_EnterPin > > - Add another State as State\_Error > > - Add another State as State\_ConfirmPin > > - To the On Entry Actions > > - Add transitions > > - From State\_ConfirmPin to State\_Error, rename as Error add Check Changed Value to the Condition > Properties > > - Add Exit Ponit to the Substate and add transition from State\_ConfirmPin to Exit Point as ProceedBTN. > > - To the condition of the transition ProceedBTN add Check Changed Value. > Properties > > - Refer to the image below for SubState of GetLockers amd to go back to main statemachine click back highlighted in the image below. > > - Add a transition from this exit point to GetLockerSuccess > Properties > > - Refer to the image below for placement of the states and transitions > > - Add a State as State\_AccessLocker and add transition from initial state to State\_AccessLocker state. > > - Add another State as State\_ErrorPin > > - Add another State as State\_AccessLockerSuccess > > - Refer to the image below for substate > > - Add transitions > > - Refer Below image for State placement in StateMachine