{"type":"doc","content":[{"type":"paragraph","content":[{"text":"This module introduces the steps involved in creating a custom vehicle HMI in Vortex® Studio, by using ","type":"text"},{"text":"QtDesigner","type":"text","marks":[{"type":"em"}]},{"text":". This HMI can be used within the Editor, or be deployed to a simulator and used on a touchscreen for human-in-the-loop testing.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Prerequisites","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Before starting this tutorial, we recommend that you have the","type":"text"},{"text":" ","type":"text"},{"text":"Basics","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#2a5db0"}},{"type":"link","attrs":{"href":"https://cm-labs.atlassian.net/wiki/display/VSD20B/Getting+Started+Tutorials"}}]},{"text":" ","type":"text","marks":[{"type":"link","attrs":{"href":"https://cm-labs.atlassian.net/wiki/display/VSD20B/Getting+Started+Tutorials"}}]},{"text":"of Vortex Studio covered first.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"You must have Vortex Studio, Vortex Studio Samples and Vortex Studio Demo Scenes installed to be able to complete this tutorial.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"What is the QtDesigner Page?","type":"text"}]},{"type":"paragraph","content":[{"text":"The QtDesigner Page provides the base for creating a user interface page that connects to the simulation. Such user interfaces are necessary to allow user interaction with the simulation;","type":"text"},{"text":" ","type":"text"},{"text":"for a particular device or machine, like","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]},{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]},{"text":"clicking a button to start the engine, or for manipulating the scene setup, like dragging a slider to change a weather setting. The Qt pages in the user interface comprise an ","type":"text"},{"text":"interactive UI ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]},{"text":"that ","type":"text"},{"text":"adds an additional layer of realism to the simulation and allows users to interact with and receive feedback from the simulation.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]},{"type":"paragraph","content":[{"text":"QtDesigner Page is added as part of the simulation content and is a role feature that can be added to a specific role in the simulation.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Usage of QtDesigner Page","type":"text"}]},{"type":"paragraph","content":[{"text":"There are several steps involved in the setup and configuration of","type":"text"},{"text":" ","type":"text"},{"text":"an interactive UI that can be summarized as follows:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create a Qt UI file and populate it with Vortex custom widgets","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add QtDesigner Page to the simulation content and populate input and output fields from the UI file","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Connect page fields for controls to the simulation content","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Creating the UI File","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Under the default file path ","type":"text"},{"text":"C:\\CM Labs\\Vortex Studio 2020b\\bin","type":"text","marks":[{"type":"em"}]},{"text":", open","type":"text"},{"text":" designer.exe","type":"text","marks":[{"type":"strong"}]},{"text":" . This is the software used alongside Vortex to build graphical interfaces for use with Vortex software.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Upon opening the software, a \"","type":"text"},{"text":"New Form","type":"text","marks":[{"type":"em"}]},{"text":"\" dialog box will appear. Ensure that ","type":"text"},{"text":"Main Window","type":"text","marks":[{"type":"em"}]},{"text":" is selected, and the ","type":"text"},{"text":"Screen Size","type":"text","marks":[{"type":"strong"}]},{"text":" is set to \"","type":"text"},{"text":"Default size","type":"text","marks":[{"type":"em"}]},{"text":"\". Press the ","type":"text"},{"text":"Create","type":"text","marks":[{"type":"strong"}]},{"text":" button.","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":541,"id":"7686d0f7-9fee-4a05-bae9-b55e5db51909","collection":"contentId-3690431243","type":"file","height":514}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"After pressing ","type":"text"},{"text":"Create","type":"text","marks":[{"type":"strong"}]},{"text":", a white box will appear in the center viewport. This is the blank slate that will be used to create the UI. The layout of this software is as follows:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"On the left, the ","type":"text"},{"text":"Widget Box","type":"text","marks":[{"type":"em"}]},{"text":" is where pre-made UI elements can be selected and added to the UI in the center of the screen. Here you can choose from default widgets as well as our ","type":"text"},{"text":"custom Vortex related widgets","type":"text","marks":[{"type":"link","attrs":{"href":"https://vortexstudio.atlassian.net/wiki/spaces/VSD2407/pages/3690444693"}}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"On the right, the ","type":"text"},{"text":"Object Inspector","type":"text","marks":[{"type":"em"}]},{"text":" shows what UI elements are present in the design.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Below the ","type":"text"},{"text":"Object Inspector","type":"text","marks":[{"type":"em"}]},{"text":", the Properties menu allows precise modifications of each detail of the UI being created.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Below the ","type":"text"},{"text":"Properties","type":"text","marks":[{"type":"em"}]},{"text":" menu, the ","type":"text"},{"text":"Resource Browser","type":"text","marks":[{"type":"em"}]},{"text":" shows relevant directories where important resources may be located.","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":93.0},"content":[{"type":"media","attrs":{"width":1280,"id":"7c603bd9-ea6e-4143-ab56-65970b840080","collection":"contentId-3690431243","type":"file","height":689}}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"First, if not set already, in the ","type":"text"},{"text":"Properties","type":"text","marks":[{"type":"em"}]},{"text":" panel, expand the \"","type":"text"},{"text":"geometry","type":"text","marks":[{"type":"em"}]},{"text":"\" section and modify ","type":"text"},{"text":"Width","type":"text","marks":[{"type":"strong"}]},{"text":" to 800, and the ","type":"text"},{"text":"Height","type":"text","marks":[{"type":"strong"}]},{"text":" to 600.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Right-click anywhere in the ","type":"text"},{"text":"MainWindow","type":"text","marks":[{"type":"em"}]},{"text":" window, and select \"","type":"text"},{"text":"Change styleSheet","type":"text","marks":[{"type":"em"}]},{"text":"\".","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":667,"id":"cf5346ba-580b-424d-8885-406a64c110f3","collection":"contentId-3690431243","type":"file","height":518}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the dialog box, select the drop down arrow to the right of \"","type":"text"},{"text":"Add Color","type":"text","marks":[{"type":"em"}]},{"text":"\" and select \"","type":"text"},{"text":"background-color","type":"text","marks":[{"type":"em"}]},{"text":"\".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Adjust the vertical slider on the right side of the dialog box to make the background light grey. Press \"","type":"text"},{"text":"OK","type":"text","marks":[{"type":"strong"}]},{"text":"\" in both open dialog boxes.","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":36.0},"content":[{"type":"media","attrs":{"width":533,"id":"58435470-ec7e-418b-8805-e0bf20a5c73b","collection":"contentId-3690431243","type":"file","height":459}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the top left corner, under File, click ","type":"text"},{"text":"Save As...","type":"text","marks":[{"type":"strong"}]},{"text":" and save the UI file to your working directory, naming it \"","type":"text"},{"text":"UITutorial.ui","type":"text","marks":[{"type":"em"}]},{"text":"\".","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Adding Interactivity to the UI","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"From the ","type":"text"},{"text":"Widget Box","type":"text","marks":[{"type":"em"}]},{"text":" on the left-hand side of the screen, drag and drop from the \"","type":"text"},{"text":"ConsoleWidgets","type":"text","marks":[{"type":"em"}]},{"text":"\" section, a \"","type":"text"},{"text":"Console::CustomDial","type":"text","marks":[{"type":"strong"}]},{"text":"\" onto the MainWindow.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Notice that this dial does not have any graphics associated with it. While it does exist and would work, it would render as invisible in the UI.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the Properties of the Custom Dial, scroll down to the last section named \"","type":"text"},{"text":"Console::CustomDial","type":"text","marks":[{"type":"em"}]},{"text":"\".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Under \"","type":"text"},{"text":"mPixmap","type":"text","marks":[{"type":"em"}]},{"text":"\" click on the down arrow to the right of the tab and select \"","type":"text"},{"text":"Choose File...","type":"text","marks":[{"type":"strong"}]},{"text":"\".","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":38.0},"content":[{"type":"media","attrs":{"width":499,"id":"d2f3d99e-fde7-4da5-b4e0-3e08f63b610a","collection":"contentId-3690431243","type":"file","height":118}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Under the default file path C","type":"text"},{"text":":\\CM Labs\\Vortex Studio Content 2020b\\Demo Scenes\\Equipment\\Excavator\\UI\\VX_HMI_Images\\Toggle","type":"text","marks":[{"type":"em"}]},{"text":", select Toggle.png","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":55.0},"content":[{"type":"media","attrs":{"width":941,"id":"6157c996-f9d0-4cc0-a481-8fae258096f8","collection":"contentId-3690431243","type":"file","height":526}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the same section of Properties, change the ","type":"text"},{"text":"mStops","type":"text","marks":[{"type":"strong"}]},{"text":" value to ","type":"text"},{"text":"10","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"At the top, under the ","type":"text"},{"text":"QWidget","type":"text","marks":[{"type":"em"}]},{"text":" section in the ","type":"text"},{"text":"Property Editor","type":"text","marks":[{"type":"em"}]},{"text":", set the ","type":"text"},{"text":"Width","type":"text","marks":[{"type":"strong"}]},{"text":" and ","type":"text"},{"text":"Height","type":"text","marks":[{"type":"strong"}]},{"text":" values to ","type":"text"},{"text":"150","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":40.0},"content":[{"type":"media","attrs":{"width":817,"id":"8cedea56-588c-45ce-833a-2b575a49fe14","collection":"contentId-3690431243","type":"file","height":635}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the toolbar at the top left of the screen, select ","type":"text"},{"text":"Form","type":"text","marks":[{"type":"strong"}]},{"text":" and click on ","type":"text"},{"text":"Preview","type":"text","marks":[{"type":"strong"}]},{"text":" (","type":"text"},{"text":"Ctrl+R","type":"text","marks":[{"type":"strong"}]},{"text":") to preview how the UI will work in practice.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click and drag the dial and watch how it rotates.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Change the ","type":"text"},{"text":"mStops","type":"text","marks":[{"type":"em"}]},{"text":" value to ","type":"text"},{"text":"60","type":"text","marks":[{"type":"strong"}]},{"text":" and see how each increment of rotation becomes smaller as you increase the mStops value.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Change the ","type":"text"},{"text":"mTotalAngle","type":"text","marks":[{"type":"em"}]},{"text":" value to ","type":"text"},{"text":"270","type":"text","marks":[{"type":"strong"}]},{"text":" (deg) and preview (","type":"text"},{"text":"Ctrl+R","type":"text","marks":[{"type":"strong"}]},{"text":") the UI. Notice how the maximum angle of rotation that the dial can turn to, is now 270 degrees.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Drag the dial to the bottom right corner of the MainWindow UI window.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"From the Widget Box, drag and drop a \"","type":"text"},{"text":"Console::LampButton","type":"text","marks":[{"type":"strong"}]},{"text":"\" to the Main Window. This will add the functionality of a basic ON/OFF button.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Once again, this will not have any visuals by default; we will add them now.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the ","type":"text"},{"text":"Properties","type":"text","marks":[{"type":"strong"}]},{"text":" of the Lamp Button, scroll to the bottom, to the \"Console::LampButton\" section.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In \"","type":"text"},{"text":"mNotPressedNotLitPixmap","type":"text","marks":[{"type":"em"}]},{"text":"\", click on the down arrow to the right and click \"","type":"text"},{"text":"Select File...","type":"text","marks":[{"type":"strong"}]},{"text":"\" and from the default directory ","type":"text"},{"text":"C:\\CM Labs\\Vortex Studio Content 2020b\\Demo Scenes\\Equipment\\Excavator\\UI\\VX_HMI_Images\\POV","type":"text","marks":[{"type":"em"}]},{"text":", select ","type":"text"},{"text":"POV_1_Off.png","type":"text","marks":[{"type":"strong"}]},{"text":". Match the following procedure for the other properties below:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mNotPressedNotLitPixmap : POV_1_Off.png","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mPressedNotLitPixmap : POV_1_Off.png","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mNotPressedLitPixmap : POV_1_On.png","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mPressedLitPixmap : POV_1_On.png","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":35.0},"content":[{"type":"media","attrs":{"width":494,"id":"6d0d3f67-3714-4bcf-9fc5-acc511133d48","collection":"contentId-3690431243","type":"file","height":268}}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"At the top of the Properties menu, change the ","type":"text"},{"text":"Width","type":"text","marks":[{"type":"strong"}]},{"text":" and ","type":"text"},{"text":"Height","type":"text","marks":[{"type":"strong"}]},{"text":" of the Lamp Button to ","type":"text"},{"text":"100","type":"text","marks":[{"type":"strong"}]},{"text":" and ","type":"text"},{"text":"75","type":"text","marks":[{"type":"strong"}]},{"text":", respectively.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Copy the Lamp Button by pressing (","type":"text"},{"text":"Ctrl+C","type":"text","marks":[{"type":"strong"}]},{"text":") and paste (","type":"text"},{"text":"Ctrl+V","type":"text","marks":[{"type":"strong"}]},{"text":") into the Main Window.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":26.0},"content":[{"type":"media","attrs":{"width":870,"id":"fffe07a0-2a58-4a34-863e-07e010184916","collection":"contentId-3690431243","type":"file","height":626}}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the ","type":"text"},{"text":"Properties","type":"text","marks":[{"type":"em"}]},{"text":" of the new button, change the ","type":"text"},{"text":"texture","type":"text","marks":[{"type":"strong"}]},{"text":" of the button as follows:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mNotPressedNotLitPixmap : POV_2_Off.png","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mPressedNotLitPixmap : POV_2_Off.png","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mNotPressedLitPixmap : POV_2_On.png","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mPressedLitPixmap : POV_2_On.png","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":26.0},"content":[{"type":"media","attrs":{"width":871,"id":"4a4412c8-1470-4cb5-9c8c-d975a9e8ab87","collection":"contentId-3690431243","type":"file","height":630}}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Save","type":"text","marks":[{"type":"strong"}]},{"text":" the UI file.","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"__confluenceADFMigrationUnsupportedContentInternalExtension__","text":"","parameters":{"cxhtml":"Note

If you preview the UI (Ctrl+R), the buttons will appear to not change when you click on them; do not panic. They are actually transmitting data that they've been clicked (0 when not clicked, 1 when clicked), but they are not animated yet. We will animate them when we import the UI to the Vortex Editor.

","block-inline":true,"nestedContent":{"type":"doc","content":[{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"Note","type":"text"}]},{"type":"paragraph","content":[{"text":"If you preview the UI (Ctrl+R), the buttons will appear to not change when you click on them; do not panic. They are actually transmitting data that they've been clicked (0 when not clicked, 1 when clicked), but they are not animated yet. We will animate them when we import the UI to the Vortex Editor.","type":"text"}]}]}],"version":1},"reason":"A note macro in a list item can't be created or edited in the new editor."}}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Next, drag and drop a ","type":"text"},{"text":"Check Box","type":"text","marks":[{"type":"strong"}]},{"text":" from the Widget Box into the main window.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the ","type":"text"},{"text":"QWidget","type":"text","marks":[{"type":"em"}]},{"text":" section of the Properties, change the ","type":"text"},{"text":"Width","type":"text","marks":[{"type":"strong"}]},{"text":" and ","type":"text"},{"text":"Height","type":"text","marks":[{"type":"strong"}]},{"text":" of the Check Box to ","type":"text"},{"text":"275","type":"text","marks":[{"type":"strong"}]},{"text":" and ","type":"text"},{"text":"100","type":"text","marks":[{"type":"strong"}]},{"text":", respectively.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the same ","type":"text"},{"text":"Properties","type":"text","marks":[{"type":"em"}]},{"text":" section, scroll down to the \"","type":"text"},{"text":"font","type":"text","marks":[{"type":"strong"}]},{"text":"\" section and change the ","type":"text"},{"text":"Point Size","type":"text","marks":[{"type":"strong"}]},{"text":" to ","type":"text"},{"text":"25","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Additionally, change the font from it's default of \"MS Shell Dlg 2\" to \"","type":"text"},{"text":"Consolas","type":"text","marks":[{"type":"strong"}]},{"text":"\" by clicking on the three dots next to the font property.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Make the text Bold by clicking the ","type":"text"},{"text":"Bold","type":"text","marks":[{"type":"strong"}]},{"text":" property underneath ","type":"text"},{"text":"Point Size","type":"text","marks":[{"type":"em"}]},{"text":".","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":38.0},"content":[{"type":"media","attrs":{"width":494,"id":"8251961d-1dc9-4e4d-88e4-214d6a6a2210","collection":"contentId-3690431243","type":"file","height":155}}]},{"type":"mediaSingle","attrs":{"layout":"center","width":28.0},"content":[{"type":"media","attrs":{"width":851,"id":"6294c7cf-613f-4be7-87d6-b6f78d75c3bc","collection":"contentId-3690431243","type":"file","height":579}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Double-click on the check box in the main window, and change the text to \"","type":"text"},{"text":"Headlights","type":"text","marks":[{"type":"strong"}]},{"text":"\".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Now, we will add one final component to the UI. Drag a ","type":"text"},{"text":"Horizontal Slider","type":"text","marks":[{"type":"strong"}]},{"text":" into the main window.","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the ","type":"text"},{"text":"QAbstractSlider","type":"text","marks":[{"type":"em"}]},{"text":" section of the Horizontal Sliders properties, change the ","type":"text"},{"text":"minimum","type":"text","marks":[{"type":"strong"}]},{"text":" and ","type":"text"},{"text":"maximum","type":"text","marks":[{"type":"strong"}]},{"text":" values to ","type":"text"},{"text":"-1","type":"text","marks":[{"type":"strong"}]},{"text":" and ","type":"text"},{"text":"1","type":"text","marks":[{"type":"strong"}]},{"text":", respectively.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Lastly, drag a \"","type":"text"},{"text":"Text Edit","type":"text","marks":[{"type":"strong"}]},{"text":"\" box from the Widget Box and place it ","type":"text"},{"text":"above","type":"text","marks":[{"type":"em"}]},{"text":" the Horizontal Slider.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Set the ","type":"text"},{"text":"Width","type":"text","marks":[{"type":"strong"}]},{"text":" to ","type":"text"},{"text":"180","type":"text","marks":[{"type":"strong"}]},{"text":" and the ","type":"text"},{"text":"Height","type":"text","marks":[{"type":"strong"}]},{"text":" to ","type":"text"},{"text":"70","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Double click on the Text Edit Box, and copy & paste (","type":"text"},{"text":"Ctrl+C","type":"text","marks":[{"type":"strong"}]},{"text":", ","type":"text"},{"text":"Ctrl+V","type":"text","marks":[{"type":"strong"}]},{"text":") the following:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"R N F","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Then, set the font size to ","type":"text"},{"text":"28","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"d52b6355-a1fb-45b8-a892-8582edc18fd9","collection":"contentId-3690431243","height":"250"}}}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"__confluenceADFMigrationUnsupportedContentInternalExtension__","text":"","parameters":{"cxhtml":"Note

You may have noticed that a dial and a slider have similar functionality. They both offer the ability to move the position of a UI element between maximum and minimum values.

","block-inline":true,"nestedContent":{"type":"doc","content":[{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"Note","type":"text"}]},{"type":"paragraph","content":[{"text":"You may have noticed that a dial and a slider have similar functionality. They both offer the ability to move the position of a UI element between maximum and minimum values.","type":"text"}]}]}],"version":1},"reason":"A note macro in a list item can't be created or edited in the new editor."}}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Since the Dial and the Horizontal Slider offer similar functionality, we will ","type":"text"},{"text":"delete","type":"text","marks":[{"type":"strong"}]},{"text":" the Dial.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Select the ","type":"text"},{"text":"Dial","type":"text","marks":[{"type":"strong"}]},{"text":" in the Main Window and press the ","type":"text"},{"text":"Delete","type":"text","marks":[{"type":"strong"}]},{"text":" key.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Save","type":"text","marks":[{"type":"strong"}]},{"text":" the UI file.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Importing the UI to Vortex","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Open","type":"text","marks":[{"type":"strong"}]},{"text":" the Vortex Studio Editor.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"From the default path ","type":"text"},{"text":"C:\\CM Labs\\Vortex Studio Content 2020b\\Demo Scenes\\Equipment\\Forklift_Medium\\Dynamic\\Design","type":"text","marks":[{"type":"em"}]},{"text":", open ","type":"text"},{"text":"Forklift.vxmechanism","type":"text","marks":[{"type":"em"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Save","type":"text","marks":[{"type":"strong"}]},{"text":" this mechanism as a copy in your working directory, as to not overwrite these files since they are needed in other tutorials.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"From the ","type":"text"},{"text":"Basics","type":"text","marks":[{"type":"em"}]},{"text":" section of the Toolbox, create a ","type":"text"},{"text":"Folder","type":"text","marks":[{"type":"strong"}]},{"text":" and rename to it \"","type":"text"},{"text":"HMI","type":"text","marks":[{"type":"em"}]},{"text":"\".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"From the ","type":"text"},{"text":"Basics","type":"text","marks":[{"type":"em"}]},{"text":" section of the Toolbox, create a new ","type":"text"},{"text":"Connection Container","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"From the ","type":"text"},{"text":"Console Pages","type":"text","marks":[{"type":"em"}]},{"text":" section of the Toolbox, create a new QtDesigner Page.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Drag and drop the newly created Connection Container and QtDesigner Page to the HMI folder.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the Properties of the QtDesignerPage, under Parameters, click on the three dots to the right of \"Ui File\" and select the UI file saved from the last section of the tutorial.","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":50.0},"content":[{"type":"media","attrs":{"width":1280,"id":"62258af5-c86e-410b-aee9-85aa86d61afa","collection":"contentId-3690431243","type":"file","height":797}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Now, switch tabs to the Connection Container, while keeping the Properties of the QtDesigner Page open.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Drag and Drop all of the inputs and the outputs of the QtDesigner Page into the Connection Container.","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":17.0},"content":[{"type":"media","attrs":{"width":307,"id":"05041116-259e-43a3-ba2d-16edad5908c8","collection":"contentId-3690431243","type":"file","height":334}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the Explorer, open the Scripts folder and select the Forklift_Controller.py script.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Drag and drop the following Properties of the script to the Connection Container:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Speed Selector","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Shift_Apron_Left_IN","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Shift_Apron_Left_OUT","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Shift_Apron_Right_IN","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Shift_Apron_Right_OUT","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":22.0},"content":[{"type":"media","attrs":{"width":330,"id":"df291975-174d-4c4c-9261-aa98a3c66397","collection":"contentId-3690431243","type":"file","height":281}}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the Explorer, in the Forward Spotlights folder, drag and drop the Visible property from each spotlight into the Connection Container.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Connect the modules according to the table below:","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"__confluenceADFMigrationUnsupportedContentInternalExtension__","text":"","parameters":{"cxhtml":"

Input	Output
Visible (Spotlight_R)	checkBox
Visible (Spotlight_L)	checkBox
Speed Selector	horizontalSlider
Shift_Apron_Left_IN	lampButton
Shift_Apron_Left_OUT	lampButton_2
Shift_Apron_Right_IN	lampButton
Shift_Apron_Right_OUT	lampButton_2
Lamp_lampButton	lampButton
Lamp_lampButton_2	lampButton_2

","block-inline":true,"nestedContent":{"type":"doc","content":[{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#e0f0ff","rowspan":1},"content":[{"type":"paragraph","marks":[{"type":"alignment","attrs":{"align":"center"}}],"content":[{"text":"Input","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"background":"#e0f0ff","rowspan":1},"content":[{"type":"paragraph","marks":[{"type":"alignment","attrs":{"align":"center"}}],"content":[{"text":"Output","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Visible (Spotlight_R)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"checkBox","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Visible (Spotlight_L)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"checkBox","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Speed Selector","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"horizontalSlider","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Shift_Apron_Left_IN","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"lampButton","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Shift_Apron_Left_OUT","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"lampButton_2","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Shift_Apron_Right_IN","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"lampButton","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Shift_Apron_Right_OUT","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"lampButton_2","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Lamp_lampButton","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"lampButton","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Lamp_lampButton_2","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"lampButton_2","type":"text"}]}]}]}]}],"version":1},"reason":"A table in list item can't be created or edited in the new editor."}}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"__confluenceADFMigrationUnsupportedContentInternalExtension__","text":"","parameters":{"cxhtml":"false

","block-inline":true,"nestedContent":{"type":"doc","content":[{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"mediaSingle","attrs":{"layout":"align-start","width":47.0},"content":[{"type":"media","attrs":{"width":874,"id":"372c6619-8adf-481b-b064-63ec32628eb5","collection":"contentId-3690431243","type":"file","height":578}}]}]}],"version":1},"reason":"A note macro in a list item can't be created or edited in the new editor."}}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"__confluenceADFMigrationUnsupportedContentInternalExtension__","text":"","parameters":{"cxhtml":"Note

Yes, the both lamp buttons output to three inputs. Each button will do three things at once; shift the left and right aprons in/out, and light up. The reason why the lamp button is an output for itself is to tell the button to light up once it is pressed.