¶ Custom menus
Custom menus can be associated to avatar classes in Thingin viewers.
For this you need to provide the customClassMenus to the viewer.
Custom menus are made of widgets, so the custom menu description is a widget tree.
If a custom menu widget tree contains buttons, the viewer will be able to send a customAction message to the hosting page when the user clicks on a button (see visualization_framework_messaging_system for more details).
¶ Exemples
¶ No interaction menu
In this exemple, the custom menu will be used to just show information, an image.
Appearence:
Code:
{
'type': 'container',
'backgroundColor': 'blue',
'margin': '0',
'padding' :'10px',
'style': 'cs_rounded_10',
'child': {
'type': 'image',
'src': 'https://www.cigref.fr/archives/entreprise2020/wp-content/uploads/2017/09/OrangeGardens.png'
}
¶ Menu with custom actions
In this exemple, the custom menu contains widget buttons, so the user can interact with the hosting page through the viewer.
Appearence:
Code:
{
'type': 'container',
'backgroundColor': 'white',
'maxWidth': '200px',
'margin': '0',
'child': {
'type': 'column',
'children': [
{
'type': 'row',
'children': [
{
'type': 'text',
'style': 'cs_title',
'value': 'Floor: '
},{
'type': 'text',
'style': 'cs_title',
'value': '',
'valueField': 'http://orange-labs.fr/fog/ont/building.owl#name',
'valueTransform': ['upperCase'],
}
],
},
{
'type': 'sizedBox',
'height': '10px',
},
{
'type': 'row',
'children': [
{
'type': 'button',
'style': 'cs_button cs_rounded',
'label': 'Show rooms',
'actionId': 11,
},
{
'type': 'button',
'label': 'Cancel',
'style': 'cs_button cs_rounded',
'actionId': 0,
'closeOnClick': true
},
],
},
],
},
}
The widget tree is composed of a container to set the background color, containing a column with two rows.
The first row contains two texts: the first is a fixed text and the second is taken from one avatar's property.
The second row contains two buttons. The first button fires a customAction message with code 11 when clicked, but do not close the menu.
The second button fires a customAction message with code 0 (convention for no action but nevertheless sent to the hosting page) when clicked, and close the menu (closeOnCick parameter).
Many of the widgets in this widget tree are using custom CSS classes