Realization of the overall effect of the smart building management system

Preface

The product building intelligent integrated system  under the development of information has  both important manifestations of information and management. Data-based information shows a set of Internet intelligent optimization solutions through a visual management system. This series of articles combines  HT  's  2D/  The use of 3D visualization tools, combined with panel data display and visual management of building modeling scenes, the previous content has explained the integration of 3D models and 2D panels, this content will take you to discuss  smart building management systems, elevator monitoring The realization of the system  and  parking lot management system  and the joint optimization of the overall system.

Interface introduction and effect preview

Smart building management system optimization effect

It mainly includes the combined function of cold station, hot station and central terminal smart group control, as well as floor smart lighting. The clear animation reflects the process of smart energy-saving operation of the entire building, and the detailed presentation of the panel can introduce the details of each scene. Role and the use of series connection.

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

Elevator and floor monitoring effect

Visually monitor the working status of elevators between floors in real time, and can accurately browse the real-time monitoring pictures in each elevator.

 

Monitoring effect of parking lot management system

The parking lot is an indispensable part of building monitoring. Real-time parking space monitoring can be mainly reflected here, and the running status of the entire parking lot can be shown through a simple animation demonstration, which is convenient for management.

 

 

Code

1. Realization of optimization effect of smart building management system

After clicking the button of the smart building management system, the scene perspective will be transferred to the front view of the building according to the moveCamera. The building as a whole shows a gradual blur and transparently displays the internal information of the building. This animation encapsulates a transition effect of tweenColor color change. Change the color value and transparency on a color rgba state to reflect the visual change. In the effect display, there is a visual and immersive experience of viewing the internal information of the building. For the specific changes of 3D model attributes, please refer to <HT's 3D Manual>.

// 通过 moveCamera 改变 eye 和 center 来移动场景视角为大楼的正视面
moveCamera(g3d, [134, 399, 1617], [7, 40, 144], {
    duration: 2000,
    easing: t => t * t,
    finishFunc: () => {
        // 开启场景大楼模型的可透明为 true
        this.building.eachChild(c => {
            c.s({
                'shape3d.transparent': true,
            });
        });
        // 大楼模型线框的颜色变化
        tweenColor(this.building, 'wf.color', 'rgba(72,149,232,1)', 'rgba(56,156,255,0.03)', {
            duration: 2000,
            easing: t => t
        });
        // 大楼模型整体染色的颜色变化
        tweenColor(this.building, 'shape3d.blend', 'rgba(120,180,255,1)', 'rgba(120,180,255,0)', {
            duration: 2000,
            easing: t => t,
            finishFunc: () => {
                // 楼层设置为可见
                this.floor.eachChild(c => {
                    setNodeVisible(c, true);
                });
                this.floorLighting = 1;
                // 显示大楼建筑信息的动画
                this.showBuilding();
            }
        });
    }
});

The realization of the color change function is to pass in parameters to change the color attribute change value of the node:

• node: the primitive node whose color is changed;
• startColor: the rgba value of the start color;
• endColor: the rgba value of the changed color;
• animParams: transition animation parameters;

tweenColor(node, property, startColor, endColor, animParams) {
    animParams = animParams || {};    if (!animParams.frames && !animParams.duration)
        animParams.duration = 5000;
    if (!animParams.easing)
        animParams.easing = t => t;    startColor = ht.Default.toColorData(startColor);
    endColor = ht.Default.toColorData(endColor);
    const dx = endColor[0] - startColor[0];
    const dy = endColor[1] - startColor[1];
    const dz = endColor[2] - startColor[2];
    const da = endColor[3] - startColor[3];
    const postAction = animParams.postAction;
    animParams.action = (v, t) => {        const x = startColor[0] + v * dx;
        const y = startColor[1] + v * dy;
        const z = startColor[2] + v * dz;
        const a = (startColor[3] + v * da) / 255;
        node.s(property, ('rgba(' + ([x, y, z, a]).join(', ')) + ')');
        if (postAction) postAction(('rgba(' + ([x, y, z, a]).join(', ')) + ')');
    }    return ht.Default.startAnim(animParams);
}

After the building is transparent, the internal information is displayed. At this time, we can see that the lighting system of the floors is lit up from the ground floor one by one, which is also achieved by this method. Then the system introduction panels on both sides of the building achieve the extended effect by changing the zoom attributes of the panels:

 

// 面板显示
showPanel(data) {
    ht.Default.startAnim({
        duration: 1000,
        easing: t => t,
        action: (v,t) => {
            data.setScaleX(data.getScaleX() + (1 - data.getScaleX()) * v);
        }
    });
}
// 面板隐藏
hidePanel(data) {
    ht.Default.startAnim({
        duration: 1000,
        easing: t => t,
        action: (v,t) => {
            data.setScaleX(data.getScaleX() + (0 - data.getScaleX()) * v);
        }
    });
}

 

2. Realization of elevator and floor monitoring effect

The elevator is an indispensable part of the daily management of the building, and the operation of the elevator can be connected in real time through the visual scene. The realization principle of the elevator animation effect is to judge the position of the current elevator floor and the position of the next random floor to realize the animation of the stairs. The building division is set to 50 for each floor, so only the elevator is located It is easy to judge the floor where the elevator is located, and the elevator panel also uses this judgment to display the floor information in real time.

 

The specific pseudo code is as follows:

elevatorAnimation(data) {
    const g3d = this.g3d;
    const tag = data.getTag();    const e = data.getElevation();    const label = data.getChildAt(0);
    // 判断现在所处楼层
    let now = Math.ceil(e / 50);
    // 下一层楼层取1~7随机数
    let next = randomNumber(1, 7);
    // 根据现在的楼层和下一个楼层，判断电梯运行的范围
    let range = numBetween(now, next);    this.animationElevatorMap[tag] = ht.Default.startAnim({
        duration: range * 800,
        easing: t => t,        action: (v, t) => {
            // 电梯运行位置设定
            data.setElevation(now < next ? (e + (range * 50) * v) : (e - (range * 50) * v));
            // 设置电梯楼层面板显示并根据电梯位置设定
            if (!label) return;
            const floor = Math.ceil(data.getElevation() / 50);
            if (floor === label.a('text')) return;
            label.a('text', floor);
            // 手动刷新电梯面板信息
            g3d.invalidateShape3dCachedImage(label);
        },
        finishFunc: () => {
            // 销毁电梯间隔动画
            delete this.timeoutElevatorMap[tag];
            // 执行电梯间隔动画后回调电梯运行动画
            this.timeoutElevatorMap[tag] = setTimeout(() => {
                this.elevatorAnimation1(data);
            }, Math.floor(Math.random() * 5000) + 2000);
        }    });}

 

Third, the realization of the monitoring effect of the parking lot management system

The parking space information of the parking lot can be managed intuitively in the 3D scene, and the visual control of the vehicle entry and exit can also be achieved with a simple pipeline animation. Real-time monitoring of the vehicle entering and exiting can intuitively reflect the real-time parking lot. Happening. The specific implementation plan of the parking lot is to call the encapsulated pipeline animation through the forward pipeline and reverse pipeline of the vehicle node to realize the animation effect of vehicle driving and reversing into the warehouse:

 

The parking animation of each vehicle contains two routes, forwardPath and backwardPath, which correspond to the forward route and reverse route of the vehicle. The specific driving pseudo code is as follows:

park(car, key = 'Path', finishFunc) {
    const dm = car.dm();
    const tag = car.getTag();
    const forwardPath = dm.getDataByTag(tag + '_forward' + key);
    const backwardPath = dm.getDataByTag(tag + '_backward' + key);
    this.animationMap[tag] = move(car, forwardPath, 'forward', undefined, 24, {
        pathEndFunc: () => {
            this.animationMap[tag].stop();
            this.animationMap[tag] = move(car, backwardPath, 'backward', undefined, undefined, {
                pathEndFunc: () => {
                    this.animationMap[tag].stop();
                    delete this.animationMap[tag];
                    if (finishFunc) finishFunc();
                    return true;
                }            });            return true;
        }    });}

move is an encapsulation function for nodes to move smoothly along the path. The main parameters are:

• node: animation node;
• path: running path;
• direction: the node is facing forward | backward;
• animParams: animation parameters;

By drawing a running route pipeline, ht.Default.getLineCacheInfo() gets the point and segmentation information cache of this pipeline, and then the pipeline information gets the length of the pipeline through ht.Default.getLineLength() and ht.Default.getLineOffset () to obtain the offset information of the specified proportion of the connection or pipeline, so as to achieve the effect of movement. Note that the direction is also set here to specify the direction of the animation node, mainly to obtain the node through node.lookAtX() The position information of the direction of the next face, and set the position of the node at this time, so as to achieve the effect of smooth movement of the node along the path.

move(node, path, direction, step = 6, interval = 75, animParams) {
    let cache = path.__cache__;
    if (!cache)
        cache = path.__cache__ = ht.Default.getLineCacheInfo(path.getPoints(), path.getSegments());
    const len = ht.Default.getLineLength(cache);
    animParams = animParams || {};    const face = direction === 'forward' ? 'front' : direction === 'backward' ? 'back' : direction;
    let currentLen = 0;
    const pathEndFunc = animParams.pathEndFunc;    const action = animParams.action;    animParams.action = (v, t) => {        if (currentLen >= len) {
            // 档 pathEndFunc 返回 true 是，认为是要结束动画, 不执行后面档 action
            if (pathEndFunc && pathEndFunc())
                return;
        }        currentLen = currentLen % len;
        const offset = ht.Default.getLineOffset(cache, currentLen);        const point = offset.point;        node.lookAtX([point.x, node.getElevation(), point.z], face);        node.p3(point.x, node.getElevation(), point.z);        currentLen = currentLen + step;        if (action) action();
    };    return loop(animParams.action, interval);
}

At the same time, we can also see that when the vehicle reaches or leaves the parking space, the traffic light above the parking space indicates the parking information of the parking space. It sets the status of the parking space in real time according to the situation of the vehicle, by changing the json icon of its signal light image And manually refresh the cache to achieve. The caching mechanism is crucial to the smoothness of the overall scene. For some panel information that does not need to be refreshed in real time, we can take the cache method and call Graph3dView.invalidateShape3dCachedImage(node) to manually refresh the node during the next update. , Thus greatly improving the performance of the scene. For the properties of the 3D panel, please refer to <HT's 3D Manual Billboard Bulletin Board>.

updateLight(view, light, color) {
    light.s('shape3d.image', 'symbols/parking/' + color + 'Light.json');
    view.invalidateShape3dCachedImage(light);
}

 

to sum up

IBMS intelligent integrated system management combines data information, building models, and scene models of each system to fully reflect the series of functions between a set of systems. In terms of the function of a building, each subsystem is responsible for the management and operation of its own information data, but through the management of the intelligent integrated management system, the data information of each part of the subsystem can be aggregated to visualize the 3D/2D tools Fully embodied in the above. With the advancement of science and technology in the future, it may no longer be necessary to visit the site to manage the daily operation of the entire building. A visualized intelligent integrated management system can easily solve the cumbersome routine maintenance, and sufficient data can also reflect the equipment and the building in real time. ’S associated information.