スマートビル管理システムの全体的な効果の実現

序文

情報開発中の製品構築インテリジェント統合システム には 、情報と管理の両方の重要な兆候があります。データベースの情報は、視覚的管理システムによる一連のインターネットインテリジェント最適化ソリューションを示しています。このシリーズの記事は、HT の 2D /を組み合わせたものです。  パネルデータ表示と建物モデリングシーンの視覚的管理を組み合わせた3D視覚化ツールの使用、前のコンテンツでは3Dモデルと2Dパネルの統合について説明しました。このコンテンツでは、スマートな建物管理システム、エレベーターの監視について説明します。 システムと 駐車場管理システム の実現とシステム 全体の共同最適化。

インターフェイスの紹介と効果のプレビュー

スマートビル管理システム最適化効果

主にコールドステーション、ホットステーション、セントラルターミナルのインテリジェントグループコントロールとフロアインテリジェント照明の複合機能が含まれ、クリアなアニメーションは建物全体のインテリジェントな省エネ操作プロセスを反映しています。パネルの詳細なプレゼンテーションでは、各シーンの詳細を紹介できます。直列接続の役割と使用。

動的操作プレビューアドレス/アプリケーションアドレス：https：//www.hightopo.com/demos/index.html

エレベーターと床の監視効果

フロア間のエレベーターの稼働状況をリアルタイムで視覚的に監視し、各エレベーターのリアルタイム監視写真を正確に閲覧することができます。

 

駐車場管理システムのモニタリング効果

駐車場は建物監視に欠かせない要素であり、ここでは主にリアルタイムの駐車スペース監視を反映でき、管理に便利な簡単なアニメーションデモンストレーションで駐車場全体の稼働状況を確認できます。

 

 

コード

1.スマートビル管理システムの最適化効果の実現

スマートビル管理システムのボタンをクリックすると、moveCameraに従ってシーンパースペクティブがビルの正面図に移ります。ビル全体が徐々にぼやけ、建物の内部情報が透過的に表示されます。このアニメーションは、トゥイーンカラーの色の変化による遷移効果をカプセル化しています。視覚的な変化を反映するために、カラーrgba状態のカラー値と透明度を変更します。エフェクトディスプレイでは、建物の内部情報を視覚的かつ没入型で見ることができます。3Dモデルの属性の具体的な変更については、<HTの3Dマニュアル>を参照してください。

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

色変更機能の実現は、ノードの色属性変更値を変更するためのパラメーターを渡すことです。

• node：色が変更されたプリミティブノード。
• startColor：開始色のrgba値。
• endColor：変更された色のrgba値。
• animParams：遷移アニメーションパラメータ。

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

建物が透明になると内部情報が表示されますが、このとき、1階から1階の照明システムが1つずつライトアップされていることがわかります。これもこの方法で実現しています。次に、建物の両側にあるシステム導入パネルは、パネルのズーム属性を変更することにより、拡張効果を実現します。

 

// 面板显示
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.エレベーターとフロアモニタリング効果の実現

エレベーターは建物の日常の管理に欠かせない要素であり、エレベーターの操作は視覚的なシーンを通じてリアルタイムで接続することができます。エレベーターアニメーション効果の実現原理は、現在のエレベーターフロアの位置と次のランダムフロアの位置を判断して階段のアニメーションを実現することです。建物の区分は各フロアで50に設定されているため、エレベーターのみが配置されます。エレベーターのある階を判断するのは簡単で、エレベーターパネルもこの判断で床情報をリアルタイムで表示します。

 

具体的な疑似コードは次のとおりです。

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

 

第三に、駐車場管理システムのモニタリング効果の実現

駐車場の駐車スペース情報は3Dシーンで直感的に管理でき、車両の出入りの視覚的制御もシンプルなパイプラインアニメーションで実現できます。車両の出入りをリアルタイムで監視することで、リアルタイムの駐車場を直感的に反映できます。ハプニング。駐車場の具体的な実装計画は、車両ノードの順方向パイプラインと逆方向パイプラインを介してカプセル化されたパイプラインアニメーションを呼び出し、車両の運転と倉庫への後退のアニメーション効果を実現することです。

 

各車両の駐車アニメーションには、車両の前進ルートと後退ルートにそれぞれ対応する、forwardPathとbackwardPathの2つのルートが含まれています。具体的な運転疑似コードは次のとおりです。

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は、ノードがパスに沿ってスムーズに移動するためのカプセル化関数です。主なパラメーターは次のとおりです。

• ノード：アニメーションノード;
• パス：実行中のパス。
• 方向：ノードは前方|後方を向いています。
• animParams：アニメーションパラメータ;

ルートを実行するパイプラインを描画することにより、ht.Default.getLineCacheInfo（）はこのパイプラインのポイントおよびセグメンテーション情報キャッシュを取得し、パイプライン情報はht.Default.getLineLength（）およびht.Default.getLineOffsetを介してパイプラインの長さを取得します。 （）接続またはパイプラインの指定された比率のオフセット情報を取得して、移動の効果を実現します。ここでは、主にnode.lookAtX（）を介してノードを取得するために、アニメーションノードの方向を指定する方向も設定されていることに注意してください。次の向きの位置情報、このときのノードの位置を設定し、パスに沿ったノードのスムーズな移動効果を実現します。

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

同時に、車両が駐車スペースに出入りする際に、駐車スペースの上の信号が駐車スペースの駐車情報を示していることもわかります。信号灯画像のjsonアイコンを変更することで、車両の状況に応じて駐車スペースの状態をリアルタイムで設定します。そして、手動でキャッシュを更新して達成します。キャッシングメカニズムは、シーン全体をスムーズにするために重要です。リアルタイムで更新する必要のない一部のパネル情報については、キャッシュメソッドを使用してGraph3dView.invalidateShape3dCachedImage（node）を呼び出し、次の更新時にノードを手動で更新できます。 、これにより、シーンのパフォーマンスが大幅に向上します。3Dパネルのプロパティについては、<HTの3Dマニュアルビルボード掲示板>を参照してください。

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

 

総括する

IBMSインテリジェント統合システム管理は、各システムのデータ情報、構築モデル、およびシーンモデルを組み合わせて、一連のシステム間の一連の機能を完全に反映します。建物の機能に関しては、各サブシステムが独自の情報データの管理と運用を担当しますが、インテリジェントな統合管理システムの管理を通じて、サブシステムの各部分のデータ情報を集約して3D / 2Dツールを視覚化できます。上記で完全に具体化されています。将来の科学技術の進歩により、建物全体の日常業務を管理するために現場に出向く必要がなくなる可能性があります。視覚化されたインテリジェントな統合管理システムにより、面倒な日常のメンテナンスを簡単に解決でき、十分なデータで機器や建物をリアルタイムで反映できます。関連情報。