Scaling
In this example, we show how you can apply a scaling transformation to visualize the energy state of a battery in a 3D model. Instead of creating a new model from scratch, we show how you can use a model that has been created in other software and imported as a binary GLTF model.
GLTF
A schematic visualization of an electric vehicle is created in Blender. Blender is free and open source software for rendering, modeling, and animation. The creation of the 3D model is beyond the scope of this documentation but various videos and tutorials can be found online. The electric vehicle model includes a set of 4 wheels and a chassis. The chassis, or body, includes a transparent plate, 4 dampers, and a green battery. It has its own coordinate system named Chassis with a translation of 0.5 meters in z-direction. Linked to the chassis is a battery, modeled by a green block, with its own local coordinate system named Battery. We will show how the transformations of these coordinate systems can be driven by IoT parameters. After the model is completed it is exported to GLTF 2.0 with name ev.glb.
Topics
The file ev.glb is imported via the Files menu or it can be uploaded by creating a new topic vehicle.A_12_BC.geometry. The topics for the state of suspension and charge_level can be obtained in real-time via a connector such as for Tesla integration.
vehicle.A_12_BC.geometry=ev.glb
vehicle.A_12_BC.suspension=0
vehicle.A_12_BC.charge_level=10
vehicle.A_12_BD.geometry=ev.glb
vehicle.A_12_BD.suspension=0
vehicle.A_12_BD.charge_level=10
...
Next, we create two topics to link the charge level and suspension to the transformations of the coordinate systems in the GLTF model created in Blender. The link to the transformation in the GLTF is defined by using the prefix node followed by the name of the node with the transformation. For example, to raise the suspension with 0.2 meter and set the charge level to 80% you can create the following topics:
vehicle.A_12_BC.node.battery.scale.y=0.8
vehicle.A_12_BC.node.chassis.position.z=0.2
Instead of using a fixed number for the node transformations you can also use the value of another topic in combination with any Javascript expression. If the suspension parameter is a range from 0 to 2 you can limit the maximum elevation of the chassis to 20 centimeters by using a Math.min() expression.
vehicle.A_12_BC.node.battery.scale.y=vehicle.A_12_BC.charge_level/100
vehicle.A_12_BC.node.chassis.position.z=Math.min(vehicle.A_12_BC.suspension / 2)*0.1
Model
To show the suspension we create a new model and add the topics for the three different vehicles with topics vehicel.A_12_BC, vehicle.A_12_BD, and vehicle.B_12_CF. The image shows three different GLTF models with transformations that set the scale of the battery and the height of the chassis.
Using GLTF models to visualize IoT parameters opens new ways to create advanced user interface components. Unlike 2D user interface elements created with HTML, CSS, or SVG these components can visualize values in 3D, or even 4D if you slide across the time range for the parameters.