cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to create user interface like attached screen shot? Make side panels & dynamic ui

SOLVED
Garnet

How to create user interface like attached screen shot? Make side panels & dynamic ui

unnamed (3).jpgAs Shown in snap can any one help me to create such type of ui which is there in gallery experience. 

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to create user interface like attached screen shot? Make side panels & dynamic ui

Hello,

 

I corrected my post to include the missing attachment.

 

Best regards,

Samuel

View solution in original post

6 REPLIES 6

Re: How to create user interface like attached screen shot? Make side panels & dynamic ui

Hello Nraichura,

 

All colors, line style ..etc.. is managed by CSS stylesheets and images.

 

To make Tabs at left, It is possible to create a svg image for each tabs in Inkscape.

In Vuforia Studio, in 2D canvas, use a Tab Widget, with a Tab Orientation set to Vertical.

In each Tab item, in Class field add a custom class specific to the Tab.

In CCS style displayed an image.

 

To make the right panel, it is possible to use a Popup Widget.

Switch off the Centered checkbox.

Enter in TopBottom, left, and Right fields, the dimensions needed to your needs.

 

Again with a custom CSS class, control the background color, the border line thickness and color ...etc...

 

To link the tab to the panel, the solution is to create a custom Javascript function used in the Tab Click Event.

When clicking in tab 1, it will hide all Popup Widgets and display the Popup Widget related to tab 1.

Doing the same when clicking tab 2 ...etc...

 

Is it helping you ?

 

Best regards,

Samuel

Re: How to create user interface like attached screen shot? Make side panels & dynamic ui

information is useful but can help me with same kind of small example than it will be more help full. 

Re: How to create user interface like attached screen shot? Make side panels & dynamic ui

Hello, 

 

Please find attached a small example.

 

I made simpler than the solution described in my first post.

The tab buttons are only Images who size is modified by a CSS style sheet when we are hover.

 

Popup Widget are displayed by a binding on the right Image.

Another bindings close all other popups.

 

Popups have a CSS stylesheet to have the same border color as the tab Image.

 

Best regards,

Samuel

Highlighted

Re: How to create user interface like attached screen shot? Make side panels & dynamic ui

your reply does not include anything 

Tags (1)

Re: How to create user interface like attached screen shot? Make side panels & dynamic ui

Hello,

 

I corrected my post to include the missing attachment.

 

Best regards,

Samuel

View solution in original post

Re: How to create user interface like attached screen shot? Make side panels & dynamic ui

Thank you Samuel for the example. 

 

It's working awesome. 

 

 

Announcements
Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection