Skip to main content
N
nraichura1-Visitor
1-Visitor
January 13, 2020
Solved

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

  • January 13, 2020
  • 1 reply
  • 2883 views

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

Best answer by sdidier

Hello,

 

I corrected my post to include the missing attachment.

 

Best regards,

Samuel

1 reply

S
sdidier17-Peridot
17-Peridot
January 13, 2020

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 Top, Bottom, 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

N
nraichura1-VisitorAuthor
1-Visitor
January 13, 2020

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

S
sdidier17-Peridot
17-Peridot
January 13, 2020

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

Terms & ConditionsCookie settingsAccessibility statement