Viewer Widget

use the viewer widget api to include the viewer widget in your 3d viewer instance the widget is useful for basic embedded viewer functionality for more advanced usage make use of the viewer apis installation follow the same installation steps when using using jquery docid 18q6qater8drakqldyxsl with the following changes to include the viewer widget in your project in step 4, provide the viewer ui option to include the viewer widget bimsync load(\["viewer ui"]); in step 6, after loading a model initialize the viewer widget by invoking the viewerui method on the jquery object for the div where the 3d viewer instance is attached $("#viewer 3d") viewer("loadmodelsfromtoken", tokenurl3d) then(() => { $("#viewer 3d") viewerui(); }); usage options adjust the default behavior of the viewer widget by providing an options object when creating a viewer widget instance properties name type default description enablecontextmenu boolean false enable context menu features enablejoystick boolean true enable joystick widget enablekeyboard boolean false enable keyboard shortcuts and navigation enableviewer2dintegration boolean false enable viewer2d integration joystickborderoffset string '20px' joystick border offset joystickcolor string 'blue' valid rgb value for color ofjoystick wdiget joystickhidden boolean true hide joystick widget joystickposition string 'bottom center' position of joystick widget joystickrotationclamp number 2 joystick rotation clamp joysticksize number 100 size of joystick widget lockstoreymode boolean false lock storey mode showviewer2dlockednavigationtoggle boolean false show viewer2d locked navigation toggle showviewer2dstoreyselect boolean false show viewer2d storey select spacesvisible boolean false show spaces viewer2did string null dom element id of 2d viewer instance translations object {} translations for the viewer widget joystickposition valid values are 'middle left' 'bottom left' 'bottom center' 'bottom right' 'middle right' translations translations for the viewer widget name default description addclippingplane add clipping plane add a clipping plane defaultbuildingname (unknown building) default building name defaultmodelname (unknown model) default model name hide hide hide selected models hideothers hide others hide all models except selected isolate isolate isolate selected models loading loading loading models lookat look at look at selected models maketranslucent make translucent make selected models translucent nomodelsloaded no models loaded no models loaded removeclippingplanes remove clipping planes remove all clipping planes sectiontopandbottom section top and bottom section top and bottom showall show all show all models methods hidejoystick hides the joystick usage $("#viewer 3d") viewerui("hidejoystick"); joystickposition sets the joystick position usage const position = "bottom center"; $("#viewer 3d") viewerui("joystickposition", position); parameters position position of the joystick type required string yes valid values are 'middle left' 'bottom left' 'bottom center' 'bottom right' 'middle right' set2dlockednavigationmode set the 2d locked navigation mode when enabled, the cursor will be in the center of the 2d scene usage const islocked = true; $("#viewer 3d") viewerui("set2dlockednavigationmode", islocked); parameters islocked positions the cursor in the center of the 2d scene type required boolean yes set2dlockstoreymode set the 2d lock storey mode when disabled, the 2d viewer storey selection will follow the 3d viewer usage const islocked = false; $("#viewer 3d") viewerui("set2dlockstoreymode", islocked); parameters islocked is the 2d lock storey mode enabled type required boolean yes setspaces set the space ids to be considered when spacesvisible option is false usage const spaceids = \["space 1", "space 2"]; $("#viewer 3d") viewerui("setspaces", spaceids); parameters spaceids list of spaceids type required array\[string] yes setspacesvisible set spaces visibility usage const arespacesvisible = true; $("#viewer 3d") viewerui("setspacesvisible", arespacesvisible); parameters arespacesvisible are spaces visible type required boolean yes showjoystick displays the joystick if enabled usage $("#viewer 3d") viewerui("showjoystick"); updatejoystickoptions sets the joystick options usage const options = { joystickborderoffset "20px", joystickcolor "blue", joystickhidden false, joystickposition "bottom center", joystickrotationclamp 0 5, joysticksize 200, }; $("#viewer 3d") viewerui("updatejoystickoptions", options); parameters options options for the joystick type required object yes properties name type description joystickborderoffset string margin from edge of viewport joystickcolor string color of the joystick joystickhidden boolean is the joystick hidden joystickposition string position of the joystick joystickrotationclamp number speed of scene navigation, valid value between 0 and 1 joysticksize number size of the joystick in pixels joystickposition valid values are 'middle left' 'bottom left' 'bottom center' 'bottom right' 'middle right'