Realización del efecto general del sistema de gestión de edificios inteligente

Prefacio

El producto edificio inteligente sistema integrado  en el marco del desarrollo de la información tiene  dos manifestaciones importantes de información y gestión. Shows de información basados en datos de un conjunto de soluciones inteligentes de optimización de Internet a través de un sistema de gestión visual. Esta serie de artículos se combina  HT  's  2D /  El uso de herramientas de visualización 3D , combinado con la visualización de datos del panel y la gestión visual de las escenas de modelado de edificios, el contenido anterior ha explicado la integración de modelos 3D y paneles 2D, este contenido lo llevará a discutir  los sistemas inteligentes de gestión de edificios, monitoreo de ascensores La realización del sistema y  el sistema de  gestión de aparcamientos  y la optimización conjunta del sistema global.

Introducción a la interfaz y vista previa del efecto

Efecto de optimización del sistema de gestión de edificios inteligente

Incluye principalmente la función combinada de la estación fría, la estación caliente y el control de grupo inteligente de la terminal central, así como la iluminación inteligente del piso. La animación clara refleja el proceso de operación inteligente de ahorro de energía de todo el edificio, y la presentación detallada del panel puede introducir los detalles de cada escena. Papel y uso de la conexión en serie.

Dirección de vista previa de operación dinámica / dirección de aplicación: https://www.hightopo.com/demos/index.html

Efecto de monitorización de ascensores y suelos

Supervise visualmente el estado de funcionamiento de los ascensores entre plantas en tiempo real y puede examinar con precisión las imágenes de supervisión en tiempo real de cada ascensor.

 

Efecto de supervisión del sistema de gestión de aparcamientos

El estacionamiento es una parte indispensable del monitoreo del edificio. El monitoreo del espacio de estacionamiento en tiempo real se puede reflejar principalmente aquí, y el estado de funcionamiento de todo el estacionamiento se puede mostrar a través de una demostración de animación simple, que es conveniente para la administración.

 

 

Código

1. Realización del efecto de optimización del sistema de gestión de edificios inteligente

Después de hacer clic en el botón del sistema de gestión inteligente de edificios, la perspectiva de la escena se transferirá a la vista frontal del edificio según moveCamera. El edificio en su conjunto muestra un desenfoque gradual y muestra de forma transparente la información interna del edificio. Esta animación encapsula un efecto de transición del cambio de color de tweenColor. Cambie el valor del color y la transparencia en un estado rgba de color para reflejar el cambio visual. En la pantalla de efectos, hay una experiencia visual e inmersiva de ver la información interna del edificio. Para los cambios específicos de los atributos del modelo 3D, consulte el <Manual 3D de HT>.

// 通过 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();
            }
        });
    }
});

La realización de la función de cambio de color es pasar parámetros para cambiar el valor de cambio de atributo de color del nodo:

• nodo: el nodo primitivo cuyo color cambia;
• startColor: el valor rgba del color inicial;
• endColor: el valor rgba del color cambiado;
• animParams: parámetros de animación de transición;

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);
}

Una vez que el edificio es transparente, se muestra la información interna, en este momento podemos ver que el sistema de iluminación de las plantas se ilumina desde la planta baja una a una, lo que también se consigue con este método. Luego, los paneles de introducción del sistema en ambos lados del edificio logran el efecto extendido al cambiar las propiedades de zoom de los paneles:

 

// 面板显示
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. Realización del efecto de supervisión del suelo y del ascensor

El ascensor es una parte indispensable de la gestión diaria del edificio, y el funcionamiento del ascensor se puede conectar en tiempo real a través de la escena visual. El principio de realización del efecto de animación del ascensor es juzgar la posición del piso del ascensor actual y la posición del siguiente piso aleatorio para realizar la animación de las escaleras. La división del edificio se establece en 50 para cada piso, por lo que solo se ubica el ascensor. Es fácil juzgar el piso donde se encuentra el ascensor, y el panel del ascensor también usa este juicio para mostrar la información del piso en tiempo real.

 

El pseudocódigo específico es el siguiente:

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);
        }    });}

 

En tercer lugar, la realización del efecto de supervisión del sistema de gestión del estacionamiento.

La información del espacio de estacionamiento del estacionamiento se puede administrar de manera intuitiva en la escena 3D, y el control visual de la entrada y salida del vehículo también se puede lograr con una animación de canalización simple. El monitoreo en tiempo real del vehículo que ingresa y sale puede reflejar intuitivamente el estacionamiento en tiempo real. Sucediendo. El plan de implementación específico del estacionamiento es llamar a la animación de la tubería encapsulada a través de la tubería hacia adelante y la tubería hacia atrás del nodo del vehículo para realizar el efecto de animación de la conducción y marcha atrás del vehículo en el almacén:

 

La animación de estacionamiento de cada vehículo contiene dos rutas, forwardPath y backwardPath, que corresponden a la ruta hacia adelante y la ruta hacia atrás del vehículo. El pseudocódigo de conducción específico es el siguiente:

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 es una función de encapsulación para que los nodos se muevan suavemente a lo largo de la ruta. Los parámetros principales son:

• nodo: nodo de animación;
• ruta: ruta de ejecución;
• dirección: el nodo mira hacia adelante | hacia atrás;
• animParams: parámetros de animación;

Al dibujar una tubería de ruta en ejecución, ht.Default.getLineCacheInfo () obtiene el caché de información de segmentación y puntos de esta tubería, y luego la información de la tubería obtiene la longitud de la tubería a través de ht.Default.getLineLength () y ht.Default.getLineOffset () para obtener la información de desplazamiento de la proporción especificada de la conexión o tubería, a fin de lograr el efecto de movimiento. Tenga en cuenta que la dirección también se establece aquí para especificar la dirección del nodo de animación, principalmente para obtener el nodo a través de node.lookAtX () La información de posición de la siguiente dirección de orientación, y establecer la posición del nodo en este momento, para lograr el efecto de movimiento suave del nodo a lo largo de la trayectoria.

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);
}

Al mismo tiempo, también podemos ver que cuando el vehículo llega o sale de la plaza de aparcamiento, el semáforo encima de la plaza de aparcamiento indica la información de aparcamiento de la plaza de aparcamiento. Establece el estado de la plaza de aparcamiento en tiempo real según la situación del vehículo, cambiando el icono json de su imagen de luz de señalización. Y actualice manualmente la caché para lograrlo. El mecanismo de almacenamiento en caché es crucial para la fluidez de la escena general. Para cierta información del panel que no necesita actualizarse en tiempo real, podemos tomar el método de caché y llamar a Graph3dView.invalidateShape3dCachedImage (nodo) para actualizar manualmente el nodo durante la próxima actualización. , Mejorando enormemente el rendimiento de la escena Para conocer las propiedades del panel 3D, consulte el <Tablero de anuncios de cartelera manual 3D de HT>.

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

 

para resumir

La gestión inteligente del sistema integrado IBMS combina información de datos, modelos de construcción y modelos de escena de cada sistema para reflejar completamente la serie de funciones entre un conjunto de sistemas. En términos de la función de un edificio, cada subsistema es responsable de la gestión y operación de sus propios datos de información, pero a través de la gestión del sistema de gestión integrado inteligente, la información de datos de cada parte del subsistema se puede agregar para visualizar las herramientas 3D / 2D. Totalmente incorporado en lo anterior. Con el avance de la ciencia y la tecnología en el futuro, es posible que ya no sea necesario visitar el sitio para administrar el funcionamiento diario de todo el edificio. Un sistema de gestión integrado inteligente visualizado puede resolver fácilmente el engorroso mantenimiento de rutina, y los datos suficientes también pueden reflejar el equipo y el edificio en tiempo real. Información asociada.