{"id":473,"date":"2021-03-25T23:42:09","date_gmt":"2021-03-25T23:42:09","guid":{"rendered":"https:\/\/lucyestela.com\/dev\/?p=473"},"modified":"2021-03-26T02:59:39","modified_gmt":"2021-03-26T02:59:39","slug":"unreal-and-hololens-2-step-7-ux-tools","status":"publish","type":"post","link":"https:\/\/lucyestela.com\/dev\/uncategorized\/unreal-and-hololens-2-step-7-ux-tools\/","title":{"rendered":"Unreal and Hololens 2 \u2013 Step 7 UX Tools"},"content":{"rendered":"
\n
\n
\n
<\/div>\n
\n

So in your Hololens app you can add UX buttons pretty easily. I’m going to do something super simple and set up 4 buttons that are going to change the colour of an interactive cube.<\/p>\n

 <\/p>\n

STEP 1 CREATE CUBE BLUEPRINT WITH FUNCTIONS<\/h3>\n

 <\/p>\n

In your Content Window select Add\/Import<\/strong> >> Blueprint Class<\/strong> >> Actor<\/strong> and call it something generic like CubeBaseClass<\/strong>. Double click to open it.<\/p>\n

In the components panel select Add Component<\/strong> >> Cube<\/strong><\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

In the Functions panel select the + to Add Function and name that function funcChangeColor<\/strong><\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now we’re going to pass through the new material that we want to assign to the cube, so lets go to the FunctionChangeColor<\/strong> graph editor and add that in. So go to the Details<\/strong> panel and go down to the Inputs<\/strong> section and click on the + to Add Parameter.<\/strong><\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Call the new param Material<\/strong> and in the search box type Material<\/strong> and select the blue object reference option.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Tick the Pass by Reference<\/strong> checkbox and check that your Inputs looks exactly the same as this pic.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now it’s time to go into the function event graph. Left click off the pin and create a new Set Material(cube)<\/strong> node.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now we need to create a reference to the cube so the function can assign the material to it. In the My Blueprint panel, scroll down to components and click and drag the Cube<\/strong> into the event graph and choose Get Cube<\/strong><\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now click and drag the cube<\/strong> pin to the set material Target<\/strong> Pin to assign the cube as the target to change the material of.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now click and drag to link up the Func Change Color Material<\/strong> Pin to the Set Material Material<\/strong> Pin<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

VERY IMPORTANT – Compile and save<\/strong><\/p>\n

 <\/p>\n

STEP 2 CREATE 4 NEW MATERIALS<\/h3>\n

 <\/p>\n

Since you have the UX Tools installed you can go to the Materials folder and duplicate M_SimpleLit_Color<\/strong> 4 times, rename them with the colour you want to change it to. eg MaterialBlue, MaterialOrange, MaterialPink, MaterialGreen.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Double click to open each material and then click on Base Color node<\/strong> to bring up the colour wheel to change the color. Save and shut each new material<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

STEP 3 CREATE UX BUTTON<\/h3>\n

 <\/p>\n

Down in your Content Window select Add New > Blueprint Class<\/strong>, expand the All Classes<\/strong> section and search for UxtPressableButtonActor<\/strong>. Call it BtnUpdateCube<\/strong> and double click to open.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Make sure BtnUpdateCube(self)<\/strong> is selected in the Components<\/strong> panel and in the Details<\/strong> panel scroll down to the Uxt Pressable Button<\/strong> section and expand the Icon Brush<\/strong> section. You can scroll through and choose any icon you like.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now go back to the Components<\/strong> panel and click ButtonComponent(UtxPressableButton)(inherited)<\/strong> and scroll down the Details<\/strong> panel to the Events<\/strong> section. Click the green + button<\/strong> next to On Button Pressed.<\/strong> This will bring up the event graph.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now we need to set up the variables we will use which is a node to hold the reference to the cube, and a node to hold the material variable to send through to the cube.<\/p>\n

Go to the MyBlueprint panel and scroll down to  the Variables<\/strong> section. Click the + to Add Variable<\/strong>. Name it Material<\/strong> and then go to the Details<\/strong> panel of your Material node<\/strong> and click the Variable Type<\/strong> dropdown and search for Material<\/strong> and select the blue Object Reference option. <\/p>\n

Check the Instance Editable<\/strong> and Expose on Spawn<\/strong> boxes.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now create your cube variable – this is pretty similar. Back in the My Blueprint panel, Variables<\/strong> section click + to add a new variable<\/strong> and call it CubeBaseClass<\/strong>. Go to the details<\/strong> panel for the CubeBaseClass and click the dropdown next to Variable Type<\/strong> and search for CubeBaseClass<\/strong> and choose the blue object reference option. Check the Instance Editable<\/strong> and Expose on Spawn<\/strong> boxes.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Drag the Material<\/strong> Variable from the Variables section onto the EventGraph and choose Get Material,<\/strong> do the same with the CubeBaseClass<\/strong>.<\/p>\n

Click on the Cube Base Class<\/strong> pin and drag and release to place a new node. Search for the Func Change Color<\/strong> (which is on our Cube BaseClass) <\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Click on the Material<\/strong> pin and connect it to the FuncChangeColor<\/strong> Material pin<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now click and drag to connect the OnButtonPressed<\/strong> Pin to the Func Change Color<\/strong> pin. Compile and Sav<\/strong>e.<\/strong><\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

CREATE YOUR SCENE<\/h3>\n

 <\/p>\n

Drag and drop you CubeBaseClass<\/strong> to the scene and place it at x:50 y:00 z:-10 and change the scale to x:0.1 y:0.1 z:0.1.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Drag and drop you BtnUpdateCube<\/strong> to the scene and in the Details panel scroll to the Transform section and place it at x:50 y:-20 z:-20 with z rotation 180 and scale x:2 y:2 z:2.<\/p>\n

Scroll to the Uxt Pressable Button<\/strong> section and update the label<\/strong> to be Pink<\/strong>. Scroll to the Default<\/strong> section and drag and drop your pink material onto the square next to Material<\/strong> and from the drop down next to Cube Base Class<\/strong>, choose CubeBaseClass<\/strong>.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now duplicate your button 3 times and move them so you can see them all. Update the labels<\/strong> to be blue, green and orange and drag in the correct materials<\/strong> for each of them and assign the CubeBaseClass<\/strong>. <\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

TEST ON THE HOLOLENS 2<\/h3>\n

 <\/p>\n

Start up your Hololens 2 and open up the Holographic remoting app. I’m assuming here that you have it installed already so if you haven’t, go install it.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Use the IP address given by the app to connect to it from Unreal. Grab the number you see here in the hololens…<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

And go into Unreal Project Settings, search for holographic to bring up the connection panel. Put your IP in where I have shown you and hit connect.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

You’ll see the green connected response when UE is connected to the Hololens. Now go to Play >> VR Preview and you’ll see it load in your headset.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n