The digital twin visualizations built in ThingJS are housed in 3D “containers” that provide both 3D and 2D interface display capabilities. In the last article, I briefly analyzed the 3D spatial interface. Now I will continue to learn how to connect the 2D interface with the 3D interface. ThingJS comes with div2D and div3D elements, and you need to insert them into div2D to create a 2D interface.
Create UIAnchor
UIAnchor can connect a 2D HTML interface to a 3D object and move with it. It should be noted that after deleting, the corresponding panel will also be deleted.
var uiAnchor = app.create({ type: "UIAnchor", parent: app.query("car02")[0], element: document.getElementById("XXXX"), localPosition: [0, 2, 0], pivotPixel: [-16, 109] }); // Remove UIAnchor // UIAnchor. Destroy (); // Control display // UIAnchor. Visible = true;You can create a 2D interface from a template string and add it to the page.
Click on the object in the digital twin visual scene, and the text in the page will display the name of the clicked digital twin visual object. Click the button on the page to enter the hierarchy of the corresponding object. After entering the hierarchy, right-click to return to the previous level.
The specific code is as follows:
var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse' }); app.on('load', function (ev) { app.level.change(ev.campus); }) create_html(); Function create_html() {var template =' <div style='position:absolute; left:20px; top:20px; padding: 8px; width:100px; text-align: center; Background: rgba (0,0,0,0.5); '> <p id="p1" style='color:white'>Hello World! </p> <button style='margin:4px; padding:4px' onclick='changeLevel()'>Into Level</button> </div>`; $('# div2D ').append($(template)); // Insert it into the ThingJS built-in 2D div. } app.on(THING.EventType.SingleClick, function (ev) { if (ev.picked && ev.object) { var obj = ev.object; var name = obj.name; changeText(name); } }) function changeText(value) { document.getElementById("p1").innerHTML = value; } function changeLevel() { var value = document.getElementById("p1").innerHTML; var obj = app.query(value)[0]; if (obj) { app.level.change(obj); }}The headlines
Shortcut interface library
Even with a 2D interface, you can still connect it to a 3D object and follow the 3D object. ThingJS offers a “shortcut interface library” for quickly creating interfaces. Using the shortcut interface library, you can create a Panel that connects to a digital twin visualization as a UIAnchor. Click the button to create and delete UIAnchor.
The specific code is as follows:
var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse' }); Function createUI() {new Thing.Widget.button (' Object interface ', test_create_ui); New Thing. Widget. Button(' position interface ', test_create_ui_at_point); New Thing. Widget. Button(' delete interface ', test_destroy_ui); } createUI(); // add HTML function create_html() {var sign = '<div class="sign" id="board" style="font-size: 12px; width: 120px; text-align: center; background-color: rgba(0, 0, 0, .6); border: 3px solid #eeeeee; border-radius: 8px; color: #eee; position: absolute; top: 0; left: 0; z-index: 10; display: none;" > <div class="s1" style="margin: 5px 0px 5px 0px; line-height: 32px; overflow: hidden;" > <span class="span-l icon" style="float: left; width: 30px; height: 30px; background:url(https://www.thingjs.com/static/images/example/hydrant.png) no-repeat center; margin: 1px 1px 1px 5px;" ></span> <span class="span-l font" style="float: left; margin: 0px 0px 0px 3px;" > object </span> <span class="span-r point" style="float: right; width: 12px; height: 12px; background-color: #18EB20; border-radius: 50%; margin: 10px 5px 10px 0px;" ></span> </div> <div class="s2" style="margin: 5px 0px 10px 0px; line-height: 18px; font-size: 10px; overflow: hidden;" > <span class="span-l font1" style="float: left; margin: 0px 10px 0px 10px;" > </span> <span class="span-l font2" style="float: left; width: 70px; background-color: #2480E3;" < p class="point-top" style="position: absolute; "style="position: absolute; top: -7px; right: -7px; background-color: #3F6781; width: 10px; height: 10px; border: 3px solid #eee; border-radius: 50%;" ></div> </div>` $('#div3d').append($(sign)); } create_html(); Function create_element() {var srcElem = document.getElementById('board'); var newElem = srcElem.cloneNode(true); newElem.style.display = "block"; app.domElement.insertBefore(newElem, srcElem); return newElem; } var UI = null; function test_create_ui() { ui = app.create({ type: 'UIAnchor', parent: app.query('car02')[0], element: Create_element (), localPosition: [0, 2, 0], pivot: [0.5, 1] // [0,0] } var ui2 = null; function test_create_ui_at_point() { ui2 = app.create({ type: 'UIAnchor', element: create_element(), position: [0, 1, 0]}); Function test_destroy_ui() {if (UI) {ui.destroy(); ui = null; } if (ui2) { ui2.destroy(); ui2 = null; }}Thing. Widget is a lightweight interface library that supports dynamic data binding. You can create a Panel from the Panel component in the interface library, and you can add text, numbers, check boxes, check boxes, and other components to the Panel. ThingJS supports many panel effects, so I won’t list them all here. If you’re interested, try it out for yourself. ————————————————— Digital Twin Visualization:”