How to build a widget shown below?

I want to creat a widget, which has main menu to open levels(interiors, terrus,etc…), views, floor plans. I am able to toggle between levels using open level node, when it is coming to Floor plans and view I am not able to do. Could any one help in this matter?

What do you mean exactly? You are unable to make the widget or you are unable to get it to function?

I am unable to create functions to open views and floor plans

If you have a floor plan image that you wish to display, you make a new widget. Call this “UI_FloorPlan” or “Window_Floorplan”, whatever you want. In this widget we’ll start off by removing the canvas panel, add a button, then an image. The image is your floor plan. In this case I just took a screenshot of this discussion thread:

Make sure your image is set to horizontal and vertical fill, and its visibility is set to hit test invisible.

Go to the graph (top right, next to designer), select the button from the drop down menu on the left and click the pluss sign at the bottom left of the screen that says “On clicked”. Make this script:

271359-floorplan02.png

Why we’re doing this you’ll see later.

Next step is to create the clickable button that will be displayed on screen that allows you to open this image. Make a new widget blueprint, call this “Main_Slot” or something that makes sense to you. Here we’ll add a size box, a button and a text. I’ve also added a border just to make the button have a slight animation when hovered, but this is not necessary. Set the size box to height override 500, and width override 300.

Set the text to horizontally and vertically aligned center.

Then go into the graph and add the following script:

Now there’s just one more thing left to do and that is to create the main canvas where we can display all this. Create a new widget blueprint, call this one “MainWidget”. Here, leave the canvas panel as it is and you only need to add one thing. Scroll down the left side to “user created”, expand it, and drag in the Main_Slot (the previous widget we created), like so:

You can position it wherever you want on screen by dragging it around or setting the transform values manually. You don’t need any script here.

I need to continue this in a comment since the answerhub doesn’t allow me to add more images.

Last thing wee need to do is add that to the main screen when you hit play. So, go into your character blueprint and on “Event Begin Play” (if you don’t have that node already - create it), you add the following:

Having done all the above steps, this is what you’ll end up with:

Click shift+f1 to enable mouse and just click the widget and it’ll bring up the image. And since we added the initial scrip in the image widget, you can click the image and it disappears.

There’s a lot more you can and will have to do to create reusable widgets etc, but I hope this helps you understand how this all works.

Hey Crowley Caine,

thank you very much…Really its helpful me to create one architectural presentation.This inspired me to work more on Unreal…

best regards.
Arun

No problem. Using unreal for stuff like that could be really cool, not just as a presentation tool, but as for actually visualizing what an apartment for example might look like. Take a look at this:

Just as a visual aid, the absolute gorgeous quality of the lighting in unreal could potentially be used as a marketing tool. Not building apartments or buildings exact to specifications with interior pieces of course, but utilizing some standard interior just to give a view of scales and room sizes and flow. Even to help clients/customers visualize the evening light coming through the windows.

Once you get good at it, you shouldn’t take very long to slap together this sort of visual representation of almost anything. Especially if you use reusable modules.

The image shown is taken from the level creation tutorial by Unreal:

Hi Crowley Caine,

I agree with you 100%.Currently I am working one architectural project having 3 levels fully interactive.you can just have a look on the level interior screen shot ,its just starting stage.

Recently You explained me how to display the floor plan on the screen, which is very help full for me and I am doing it now. And I have question for you.
I want to display 4 floor plans by sequentially with using of next button, and another thing is to play some animation Clip also. please advise me on this…

Hi in this same project has 3 levels of 3d environment, Exterior like the image shown on the top and 1 interior space and podium… starting level will be Main menu having 6 buttons, 3 buttons vl be 3 levels,1 button will be for floor plans,1 button will be for still images and last one will be for animation sequence. I have created blueprints for switching levels and open images and floor plans.