基於 HTML5 的工業組態高爐鍊鐵 3D 大屏可視化

前言

　　在大數據盛行的如今，大屏數據可視化也已經成爲了一個熱門的話題。大屏可視化能夠運用在衆多領域中，好比工業互聯網、醫療、交通、工業控制等等。將各項重要指標數據以圖表、各類圖形等形式表如今一個頁面上，各類數據一目瞭然。隨着瀏覽器不斷髮展完善，使用 Web 作大屏展現也已經不是新鮮的事了。市面上已有很多的大屏解決方案，大部分是以放各類圖表的形式呈現，基本是 2D 的呈現。有些是根據投放屏幕的比例設計出來的，並不能自適應於其它的屏幕比例。最近學習了 Hightopo 的 HT for Web 產品，特有的矢量，在各類比例下不失真，加上佈局機制，解決了不一樣屏幕比例下的展現問題，加上 3D 的呈現部分，能夠作出別具一格的大屏系統。在這裏與你們分享學習，先來張總體效果圖：

連接：www.hightopo.com/demo/large-…

　　本文主要介紹內容以下，文章中以 HT 做爲 HT for Web 的簡稱：

1. 頁面搭建
2. 數據對接
3. 動畫效果實現
4. 其餘細節優化

1、頁面搭建

　　在這個系統中，咱們須要建立 ht.graph.GraphView 和 ht.graph3d.Graph3dView 來呈現 2D 和 3D 的內容。設計師給到的 display.json 是 2D 圖紙的內容，主要是使用矢量繪製呈現，有一些圖表是用了 Echarts，HT 也有機制可讓咱們使用它們。scene.json 是 3D 場景的內容，大部分模型都是經過 3dMax 建模生成的，該建模工具能夠導出 obj 與 mtl 文件，在 HT 中能夠經過解析 obj 與 mtl 文件來生成 3d 場景中的全部複雜模型，簡單的模型也能夠經過 HT 來建模。關鍵代碼以下：

var g2d = new ht.graph.GraphView();
var g3d = new ht.graph3d.Graph3dView();

// 將 3D 組件加入到 body 下
g3d.addToDOM();
// 將 2D 組件加入到 3D 組件的根 div 下，父子 DOM 事件會冒泡，這樣不會影響 3D 場景的交互
g2d.addToDOM(g3d.getView());

g2d.deserialize('display.json', function(json, dm, g2d, datas){
     // TODO 2D 反序列化完成回調，後面會講到
});
g3d.deserialize('scene.json', function(json, dm, g3d, datas) {
     // TODO 3D 反序列化完成回調，後面會講到});複製代碼

2、數據對接

　　頁面加載出來後，就能夠與後臺通信，請求相關數據對接到對應的元素上了。HT 一大強項是做爲 Web 組態，因此有很友好的數據綁定方式，咱們能夠輕鬆將數據展現到各個節點上。咱們這個案例採用隨機數模擬的方式模擬展現數據，在 json 中對相應的節點設置惟一標識 tag，在反序列化完成後，經過 g2d.dm().getDataByTag(tag) 來得到相應節點，再根據這個節點的數據綁定來將數據展現到改節點上。

如下是上面這個表格數據對接的代碼，它的 tag 是 alarmTable

// 模擬數據
var mockData = [
    { "time": "2019-02-17 21:54:31", "warningDesc": "11_15冷卻壁發生渣皮減薄" },
    { "time": "2019-02-17 21:57:49", "warningDesc": "爐缸熱損失正常" },
    { "time": "2019-02-17 22:00:34", "warningDesc": "8_12冷卻壁發生渣皮減薄" },
    { "time": "2019-02-17 22:03:44", "warningDesc": "8_12冷卻壁發生渣皮減薄" },
    { "time": "2019-02-17 22:07:09", "warningDesc": "11_15爐缸熱損失正常" },
    { "time": "2019-02-17 22:11:35", "warningDesc": "8_12冷卻壁發生渣皮減薄" },
    { "time": "2019-02-17 22:16:24", "warningDesc": "11_15局部小氣流" }
];

var dm = g2d.dm();
var table = dm.getDataByTag('alarmTable');
table.a('ht.dataSource', mockData);複製代碼

以上表格是一個用 ht 定義的矢量節點，矢量由一個個組件組成，組件不只能夠預約義的矩形，文本等內容，也能夠引用其它定義好的矢量，甚至能夠自定義繪製邏輯，這個表格就由此而來。矢量不只能夠用在 2D 圖紙裏，還能夠用在 3D 貼圖中，在咱們 3D 場景中，如下截圖的幾個面板也是使用矢量實現，

HT 中數據都由 DataModel 驅動，因此 3D 對接數據也是同樣的，這裏就再也不贅述。

3、動畫效果實現

• 鐵水罐車動畫　　

這個案例中最明顯的動畫應該就是鐵水罐車的動畫了，咱們先來聊聊它的實現。基本流程是這樣的

如上，咱們依然是在反序列化完成後，經過 car = g3d.dm().getDataByTag('car'); 獲得鐵水罐車的節點對象。

經過 car.s('3d.visible', true | false); 就能夠控制它的顯隱。

經過不斷修改節點的 3D 座標就能夠實現位移效果 car.setPosition3d(x, y, z);

至於鐵水罐車上的面板，也是個矢量，將它吸附於鐵水罐車節點，它就會跟隨車移動，不須要單獨控制它的座標來實現動畫。

• 管道中氣體流動動畫

這部分動畫效果，只要不斷修改貼圖的 uv 值就能夠實現，如下是示例代碼，node 仍是由 getDataByTag 得來

var offset1 = 0.03;

setInterval(function () {
    node.s({
        'top.uv.offset': [-offset1, 0],
        'front.uv.offset': [-offset1, 0],
    });
    offset1 += 0.1;
}, 100);複製代碼

上料履帶的動畫也是相同的實現方式

4、其餘細節優化

　　在點擊 2D 有點到圖元像素時，咱們但願不觸發 3D 的交互，好比拖動表格滾動時，3D 場景也會跟着旋轉。能夠經過以下代碼控制：

var handler = function(e) {
    if (gv.getDataAt(e)) { // 若是點擊到的位置有節點信息
        e.preventDefault();
        e.stopPropagation();
    }
}
gv.getView().addEventListener('mousedown', handler);
gv.getView().addEventListener('click', handler);
gv.getView().addEventListener('touchstart', handler);複製代碼

同時，禁用一些交互動做和一些默認選中邊框

// 選中邊框爲0
gv.getSelectWidth = function () { return 0; };
// 禁止鼠標縮放
gv.handleScroll = function () { };
// 禁止 touch 下雙指縮放
gv.handlePinch = function () { };
// 禁止平移
gv.setPannable(false);
// 禁止框選
gv.setRectSelectable(false);
// 隱藏滾動條
gv.setScrollBarVisible(false);
// 2D 中全部節點不可拖動
gv.setMovableFunc(function () { return false; });
// 3D 中全部節點不可拖動
g3d.setMovableFunc(function () { return false; });複製代碼

總結

經過 2D 3D 結合的方式的大屏展現，能夠很是直觀的看到數據呈現，好比在履帶出的上料數據，經過它的位置，不須要太多文字描述就知道這裏是要展現什麼內容。HT 很是輕量，能夠結合 2D 3D 呈現數據，矢量在各類屏幕下不失真，還能夠適應各類屏幕大小進行展現，用來作大屏可視化再合適不過了。除了在大屏上，電腦上能夠展現良好，移動端一樣支持，最後放上一張移動端的效果圖。