Smart buildings have become a new trend in urban development. How "smart" is it?

Preface

This issue mainly introduces the animation effects of 2D drawing panels and the embedding of panel videos. Through the 2D/3D fusion experience, the intuitive embodiment of scene data visualization and the comfortable experience of interactive panel animation experience are achieved.

2D panel zoom animation switching transition effect

This effect is mainly achieved by zooming the animation display panel after loading the drawing, and switching between the cold station scene and the hot station scene, and the animation switching transition effect of the 2D panel zooming.

Zoom animation display panel effect after loading the drawing:

Dynamic operation preview address: https://www.hightopo.com/demos/index.html

Switching effect between cold station scene and hot station scene:

Progress bar display effect

In the interactive experience, there is a smooth animation effect on the visual effects of the progress bar.

 

Video embedding effect

After clicking the camera interaction in the smart terminal device scene, the monitoring information screen of the device scene pops up.

Code

Panel switching transition effect realization

The animation switching transition effect of panel zooming is mainly by setting the anchor point of the primitive to be fixed to the side to be zoomed, and then by controlling the zoom value of the primitive to achieve the zooming effect, and the font in the primitive is achieved by changing the transparency The effect of gradient rendering. The following explains the method of implementation through the zoom animation of the title.

First, set the title anchor point to the center, that is, both the horizontal anchor point and the vertical anchor point are 0:

tittle.setAnchor(x, y | {x:0.5,y:0.5})

At this time, the title element will achieve the effect of centering the anchor point:

At this time, we only need to set the horizontal zoom value of the title to 0, and then use the HT animation to animate the zoom value of the title, and then change the transparency of the title name through the animation to achieve a panel zoom animation switch transition. effect.

tittle.scaleX(0);

The realization of the animation is mainly through  the ht.Default.startAnim animation function that comes with  HT , which supports frame-based and time-based animation. The implementation here adopts the Time-Based animation method. The esting parameter is used to allow users to define functions and control the animation through mathematical formulas, such as uniform speed change, slow first and then fast effects, please refer to http://easings.net /, This case adopts a slow first and then fast implementation method.

The specific implementation pseudo code is as follows:

// 标题动画
tittleAnim() {
    const self = this;
    const g2d = self.g2d;
    const g2dDm = g2d.dm();
    // 获取标题图元的横缩放值
    let tittle_index = this.tittle.getScaleX();
    // 缩放值动画执行入口
    ht.Default.startAnim({
        // 动画时间
        duration: 300,
        // 调用 Easing.js 里面 swing 的动画效果
        easing: Easing.swing,
        // 动画执行内容
        action: (v, t) => {
            // 通过修改标题横缩放值来实现动画效果
            this.tittle.setScaleX(tittle_index + (1 - tittle_index) * v);
        },
        finishFunc: () => {
            // 缩放值动画结束后执行标题名字透明度渐变显示动画
            ht.Default.startAnim({
                duration: 1000,
                easing: Easing.swing,
                action: (v, t) => {
                    // 通过修改标题名字透明度来实现动画效果
                    this.tittleName.eachChild(c => {
                        c.s('opacity', c.s('opacity') + (1 - c.s('opacity')) * v);
                    });
                },
                finishFunc: () => {
                // 结束后调用执行下一个缩放值动画以及字体透明度动画
                }
            });
        }
    });
}

Easing.js is an animation effect encapsulated by itself, for example, swing is a swing animation effect from slow to fast:

const Easing = {
    swing: function (t) {
        return ( -Math.cos(t * PI) / 2 ) + 0.5;
    }
}

Realization of progress bar display effect

By encapsulating a setValueWithAnimation progress bar animation, mainly through parameters (node, name, value, format):

• node: is the progress bar graph element node;
• name: The incoming parameter is the attribute name of the progress bar primitive node, generally the progress value precent that needs to be changed, and the value range is 0~1;
• value: According to the passed name, to change the corresponding value;
• format: If there is a format, you can change the format of the new value;

The main implementation method is to use  HT  's ht.Default.startAnim animation function to realize the animation of the difference range between the new value newValue and the old value oldValue.

setValueWithAnimation(node, name, value, format) {
    let oldValue = node.a(name);
    value *= 1;
    let range = value - oldValue;

    ht.Default.startAnim({
        duration: 1000,
        easing: Easing.easeOutStrong,
        action: (v, t) => {
            let newValue = oldValue + range * v;
            if (format) {
                newValue = format(newValue);
            }
            node.a(name, newValue);
        }
    });
}

Similarly, the animation effect here also refers to the gradually accelerated effect of easeOutStrong in Easy.js:

const Easing = {
    easeOutStrong: function (t) {
        return 1 - (--t) * t * t * t;
    }
}

Realization of video embedding effect

In the real-time monitoring system, the main commonly used streaming media transmission protocols are: RTMP , RTSP , HLS  and  HTTP-FLV .

• RTMP  (Real Time Messaging Protocol): Real Time Messaging Protocol. In RTMP protocol, video must be H264 encoding, audio must be AAC or MP3 encoding, and most of them are packaged in flv format. Because what the RTMP protocol transmits is basically a stream file in FLV format, you must use a flash player to play it.
• RTSP  (Real-Time Stream Protocol): RTSP has very good real-time effects, suitable for video chat, video surveillance and other directions.
• HLS (Http Live Streaming): An HTTP-based real-time streaming media transmission protocol defined by Apple. The transmission content includes two parts: 1.M3U8 description file, 2.TS media file. The video in the TS media file must be H264 encoded, and the audio must be AAC or MP3 encoded. The data is transmitted through the HTTP protocol. Currently the video.js library supports the playback of files in this format.
• HTTP-FLV : This protocol is http+flv. The audio and video data is encapsulated into FLV format, and then transmitted to the client through the http protocol. This protocol greatly facilitates the browser client to play live video streams. Currently the flv.js library supports this Format file playback.

The implementation in this example is mainly to double-click the camera in the 3D scene, pop up the monitoring pop-up window and then load the video file of the local resource. In the actual application project scene, we can flexibly and reasonably use the above commonly used streaming media transmission protocol to achieve The effect of real-time monitoring. In order to handle the interaction of the click event, the event interaction listener mi is the abbreviation of addInteractorListener to understand   the implementation of HT interaction listener.

g3d.mi(e => {
    const kind = e.kind;
    // 双击结点的事件处理
    if (kind === 'doubleClickData') {
        // 双击的结点
        let data = e.data;
        // 获取双击结点的标签
        let tag = data.getTag();
        if (!tag) return;
        // 如果结点标签为监控器
        if (tag === 'monitor') {
            // 监控面板显示
            this.intelligentMonitoring.s('2d.visible', true);
            // 载入本地资源视频流
            this.video.a('videoURL', './storage/assets/media/video.mp4');
        }
    }
});

to sum up

The IBMS intelligent integrated system management makes the whole system content structure more intuitive and realistic through the linkage interaction of the 2D panel and the 3D scene. Through the event monitoring processing of the 2D panel, the 3D scene correspondingly performs surround view roaming, patrol roaming and scene switching, making it more user-friendly operations. Coupled with various interesting animations in 3D scenes and panel zoom animations and progress bar animations in 2D panels, it enriches the characteristics of visual operation, which is also an essential part of the industrial Internet.

After presentation 2D / 3D intuitive features of IBMS intelligent integration system integration scenarios and the panel, the two most important points in this system: the wisdom of building management systems, elevator control systems  and  parking management system  will be in  the next issue  of content Give you a detailed interpretation.