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

Community Tip - If community subscription notifications are filling up your inbox you can set up a daily digest and get all your notifications in a single email. X

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

nraichura
12-Amethyst

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. 

1 ACCEPTED SOLUTION

Accepted Solutions
sdidier
17-Peridot
(To:nraichura)

Hello,

 

I corrected my post to include the missing attachment.

 

Best regards,

Samuel

View solution in original post

6 REPLIES 6
sdidier
17-Peridot
(To:nraichura)

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

nraichura
12-Amethyst
(To:sdidier)

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

sdidier
17-Peridot
(To:nraichura)

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

nraichura
12-Amethyst
(To:sdidier)

your reply does not include anything 

sdidier
17-Peridot
(To:nraichura)

Hello,

 

I corrected my post to include the missing attachment.

 

Best regards,

Samuel

nraichura
12-Amethyst
(To:sdidier)

Thank you Samuel for the example. 

 

It's working awesome. 

 

 

Top Tags