preface

In recent years, the development of uav is more and more rapid, not only can be used for civilian aerial photography, but also can be used for military reconnaissance, involving a wide range of industries, also known as “flying camera”. However, as military use, uav performance requirements are more stringent and important. This system is a UAV 3D visualization system built by Hightopo’s HT for Web product. It simulates the monitoring of uav status through the panoramic display of UAV and its information.

The system contains four display modes: physical mode, thermal mode, wireframed mode and internal mode, which can be switched by the operation button below the aircraft.

Preview the address: www.hightopo.com/demo/Drones…

The implementation process

  • The loading interface adopts 2D topology components to draw, and fully vectorized ICONS. Compared with traditional PNG and JPG images, they are perfectly adapted to mobile terminal, PC terminal, large screen and other screens of various sizes and resolutions without distortion.
  • The UAV and surrounding information panel adopts 3D engine to build the scene, and users can view the UAV from any position in the scene.
  • In the animation process, the animation function hT.default. startAnim provided by the product is used to drive the change of graphic attribute values. In the application of its time-based method, only the milliseconds of animation duration need to be specified, and the system calculates the number of frames or The Times of action function being called. To ensure a more efficient and smooth animation process.

interface

In the loading interface, the loading progress is displayed by dynamically changing the attribute value of the graph. After the loading, the finishFunc of the animation calls hidden2D method to change the transparency of the graph. After that, the perspective within the scene is pulled closer by moveCamera. This allows for fade-to-fade-in (leaving the loading screen and entering the 3D scene). At the same time, change the position of the graphics in the 3D scene to realize the integration of various forms of UAV and separate the corresponding buttons.

// Load progressfunction loadAnim(){
  ht.Default.startAnim({
    duration: 6000,
    easing: t => {
      return 1 - (--t) * t * t * t;
    },
    action: (v, t) => { 
      loge.s('clip.percentage', v);
      percentText.s('text', Math.floor(v * 100)); }, finishFunc: () = > {hidden2d ()}})} / / hide the 2 d drawingsfunction hidden2d(){
  ht.Default.startAnim({
    duration: 500,
    easing: t => {
      return t;
    },
    action: (v, t) => { 
      dm2d.each(e => {
        e.s('opacity', 1 - v);
      })
    },
    finishFunc: () => {
      dm2d.setBackground(' ');
      g3d.moveCamera(eye, center, {duration: 3000, easing: t => {return1 - (--t) * t * t * t; }}); planeFit(); buttonSeparate(); }})}Copy the code

The production of 2D interface is to draw a drawing, and logo is to make an icon, an icon can be used many times in the drawing, and can show different looks. The four logos on the right in the figure below are the same icon, showing different cutting methods and transparency respectively. The progress bar effect of the logo in the system is to dynamically change the cutting ratio of the icon to achieve, while the fading effect of the interface is to change the transparency. The production of the whole icon is a combination of drawing different graphics, we can also change the color of these graphics to form the logo style on the left.

Uav Form Switch

Uav main form is divided into three types: physical mode, wire frame mode and thermal mode. Click the button below to switch to the corresponding shape of the button. In the process of switching, the target form is displayed, and the target form and the original form are moved up and down respectively. The user can view the target form at the same time for a short time, and then return to the original position and hide the original form. The hidden mode is not used, the wireframe mode is to change the color of the wireframe, the other two modes are to adjust the transparency of the model. The wireframe here is generated according to the contour of the model, which is automatically calculated and depicted by the 3D engine, which is very convenient.

// Select the display modelfunction select(data){
  const name = data.getDisplayName();
  const moveData = dm3d.getDataByTag(name);
  const normalP = normalPlane.p3();

  ht.Default.startAnim({
    duration: 1000,
    easing: t => {
      return 1 - (--t) * t * t * t;
    },
    action: (v, t) => {
      if(name === 'linePlane'){
        moveData.s('wf.color'.'rgba (64173152,' + v + ') ');
      }
      else{
        moveData.s('shape3d.opacity', v);
      }
      moveData.p3(normalP[0], normalP[1] + (4500 - normalP[1]) * v, normalP[2]);
      isShow.p3(normalP[0], normalP[1] + (2500 - normalP[1]) * v, normalP[2]);

      hiddenRing(v);
    },
    finishFunc: () => {
      isShow.s('shape3d.transparent'.true);

      ht.Default.startAnim({
        duration: 1000,
        easing: t => {
          return 1 - (--t) * t * t * t;
        },
        action: (v, t) => { 
          if(isShow.getTag() === 'linePlane'){
            isShow.s('wf.color'.'rgba (64173152,' + (1 - v) + ') ');
          }
          else{
            isShow.s('shape3d.opacity', 1 - v);
          }
          moveData.p3(normalP[0], 4500 + (normalP[1] - 4500) * v, normalP[2]);
          isShow.p3(normalP[0], 2500 + (normalP[1] - 2500) * v, normalP[2]);

          showRing(v);
        },
        finishFunc: () => {
          isShow = moveData;
          if(moveData.getTag() === 'normalPlane'){
            moveData.s('shape3d.transparent'.false);
          }
          isAnim = false; }}); }}); }Copy the code

Through 3 d engine, we can generate three-dimensional graphics, can also add the imported model, the location of the graphics by the x, y, z three directions to confirm, the coordinates of the axis of the origin is the anchor graphics, unmanned aerial vehicle (uav) the front rotary ring is adjust anchor point into the center of circle, the attributes of the manipulation of the rotation. The drone in the wireframe state in the system is generated like the sphere on the left in the picture. If we set the transparency of the graph to 0, only the style of the wireframe will be displayed.

The internal structure

In wireframe mode, you will find a small button above the button, click it to enter another state of the UAV, where we can not only see the wireframe, but also access the internal structure of the UAV and view every part of it. The entry process hides other graphics in the scene and reveals the internal structure.

// Internal modefunction moveToInternal(){ const width = background.getWidth(); Const beginLeft = -(width / 2-960); Const beginRight = width / 2 + 960; ht.Default.startAnim({ duration: 2000, easing: t => {return t;
    },
    action: (v, t) => { 
      linePlane.s('wf.color'.'rgba (64173152,' + (1 - v) + ') ');
      hiddenRing(v);
    },
    finishFunc: () => {
      dm3d.each(e => {
          e.s('3d.visible'.false)
      })

      linePlane_internal.each(e => {
        e.s('3d.visible'.true);
      })

      ht.Default.startAnim({
        duration: 1000,
        easing: t => {
          return 1 - (--t) * t * t * t;
        },
        action: (v, t) => { 
          title.setY(-50 + (70 + 50) * v);
          returnButton.setY(1095 + (1020 - 1095) * v); leftShape.setX(beginLeft + 130 * v); rightShape.setX(beginRight - 130 * v); }})}})}Copy the code

Next, let’s explore how graphics move slowly into the window from all sides when entering internal mode

Nowadays, terminals have various screen resolutions, and many Web pages choose responsive layout or adaptive layout at the early stage of development. HT for Web’s 2D topology component not only provides vector rendering, but also provides a set of suitable layout methods. As you can see from the image above, the part in the red box is the initial loading screen, while the part around the red box is the part moved in from the internal mode. The loading page in the system is different because of the added layout.

First, we selected the background image in the red box as the root node of the whole page, changed its fullscreen property to fill, and added the mode of full-screen lock for it. Secondly, set the root node as the adsorption node of the other nodes, and modify the appropriate layout for the other nodes. The background image will fill the screen, while the surrounding nodes will remain outside the background image and will not be shown in the loading screen. In the internal mode, the surrounding nodes are moved to the interface by changing their positions. However, because the full-screen lock mode is set to vertical, the width of the background is changed, and the moving position of the nodes on the left and right needs to be calculated after obtaining the display width of the current interface.

conclusion

Nowadays, with the rapid development of information technology, intelligent tools have become a new productive force in our life. At the same time, the concept of industrial Internet was born, connecting people, data and equipment together, and the visual interface can be a good display of data and equipment, convenient management at the same time, but also more secure and efficient.

HT for Web provides 2D and 3D visualization modes. It is powerful and easy to learn and use. Interested students can also experience it.