The digital twin visualizations built into ThingJS are housed in 3D “containers” that provide both 3D and 2D interface capabilities. The last article briefly analyzed 3D spatial interface, now I continue to learn how to connect 2D interface with 3D interface. Div2d and Div3D elements are built into ThingJS, and you need to insert elements into Div2D to create a 2D interface.

Create UIAnchor

UIAnchor can connect 2D HTML interface to 3D object and follow 3D object to move. Note that after deletion, its 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] }); // UIAnchor // UIAnchor. Destroy (); // control display // uiAnchor. Visible = true;Copy the code

You can use template strings to create a 2D interface and add it to the page.

Click on the object in the digital Twin visual scene, and the text on the page will show the name of the digital twin visual object. Click the button in the page to enter the level of the corresponding object, right click after entering the level 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)); } 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); }}Copy the code

Shortcut interface library

Even if it’s a 2D interface, you can attach it to a 3D object and follow it around. ThingJS offers a “shortcut interface library” for creating interfaces quickly. From the shortcut interface library, you can create a Panel that connects to a digital twin visual object 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(); 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;" > <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; float: left; width: 70px; background-color: #2480E3;" > 0.14mpa </span> <div > <div class="point-top" 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; }}Copy the code

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 add text, numbers, checkboxes, checkboxes, and other components to the Panel. There are a lot of panel effects that ThingJS supports, but I’m not going to list them all, so you can try them out

— — — — — — — — –