基於 HTML5 的工業組態高爐鍊鐵 3D 大屏視覺化
前言
在大資料盛行的現在,大屏資料視覺化也已經成為了一個熱門的話題。大屏視覺化可以運用在眾多領域中,比如工業網際網路、醫療、交通、工業控制等等。將各項重要指標資料以圖表、各種圖形等形式表現在一個頁面上,各種資料一目瞭然。隨著瀏覽器不斷髮展完善,使用 Web 做大屏展示也已經不是新鮮的事了。市面上已有不少的大屏解決方案,大部分是以放各種圖表的形式呈現,基本是 2D 的呈現。有些是根據投放螢幕的比例設計出來的,並不能自適應於其它的螢幕比例。最近學習了 Hightopo 的 HT for Web 產品,特有的向量,在各種比例下不失真,加上佈局機制,解決了不同螢幕比例下的展示問題,加上 3D 的呈現部分,可以做出別具一格的大屏系統。在這裡與大家分享學習,先來張整體效果圖:
連結:http://www.hightopo.com/demo/large-screen-puddling/
本文主要介紹內容如下,文章中以 HT 作為 HT for Web 的簡稱:
- 頁面搭建
- 資料對接
- 動畫效果實現
- 其他細節優化
一、頁面搭建
在這個系統中,我們需要建立 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 反序列化完成回撥,後面會講到});
二、資料對接
頁面載入出來後,就可以與後臺通訊,請求相關資料對接到對應的元素上了。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 對接資料也是一樣的,這裡就不再贅述。
三、動畫效果實現
- 鐵水罐車動畫
這個案例中最明顯的動畫應該就是鐵水罐車的動畫了,我們先來聊聊它的實現。基本流程是這樣的
如上,我們依然是在反序列化完成後,通過 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);
上料履帶的動畫也是相同的實現方式
四、其他細節優化
在點選 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 呈現資料,向量在各種螢幕下不失真,還可以適應各種螢幕大小進行展示,用來做大屏視覺化再合適不過了。除了在大屏上,電腦上可以展示良好,移動端同樣支援,最後放上一張移動端的效果圖。
相關文章
- 工業綠色發展視覺化管理——高爐鍊鐵廠視覺化系統視覺化
- 基於 HTML5 的 WebGL 3D 地鐵站視覺化系統HTMLWeb3D視覺化
- 基於 HTML5 WebGL 的地鐵站 3D 視覺化系統HTMLWeb3D視覺化
- 基於 HTML5 的工業網際網路 3D 視覺化應用HTML3D視覺化
- ISM Web工業視覺化組態軟體Web視覺化
- 基於 WebGl HTML5 的 3D 視覺化機房WebHTML3D視覺化
- 基於 HTML5 + WebGL 的無人機 3D 視覺化系統HTMLWeb無人機3D視覺化
- 基於HTML5的礦山礦井視覺化2D組態系統HTML視覺化
- 基於 HTML5 WebGL 的 3D 風機視覺化系統HTMLWeb3D視覺化
- 基於 WebGL 的 HTML5 3D 工控隧道視覺化系統WebHTML3D視覺化
- 基於 HTML5 WebGL 的挖掘機 3D 視覺化應用HTMLWeb3D視覺化
- 基於 HTML5 WebGL 的 3D 風機 Web 組態工業網際網路應用HTMLWeb3D
- 3D組合地圖在資料視覺化大屏中的應用3D地圖視覺化
- 基於HTML5 WebGL的工業化3D電子圍欄HTMLWeb3D
- 基於 HTML5 WebGL 的加油站 3D 視覺化監控HTMLWeb3D視覺化
- 基於 HTML5 + WebGL 的太陽系 3D 視覺化系統HTMLWeb3D視覺化
- 基於 HTML5 WebGL 的發動機 3D 視覺化系統HTMLWeb3D視覺化
- 基於 WebGL 的 HTML5 樓宇自控 3D 視覺化監控WebHTML3D視覺化
- 基於 HTML5 的 WebGL 樓宇自控 3D 視覺化監控HTMLWeb3D視覺化
- 基於 HTML5 的 3D 機房視覺化實景監控HTML3D視覺化
- 工業領域Web組態視覺化開發工具軟體Web視覺化
- 3D視覺化|疫情態勢視覺化3D視覺化
- 基於 WebGL 3D 的 HTML5檔案館視覺化管理系統Web3DHTML視覺化
- 基於 HTML5 的 WebGL 3D 檔案館視覺化管理系統HTMLWeb3D視覺化
- 基於HTML5的WebGL呈現A星演算法的3D視覺化HTMLWeb演算法3D視覺化
- 視覺化的工業網際網路 3D 展示視覺化3D
- 基於 HTML5 + WebGL 的 3D 風力發電場視覺化系統HTMLWeb3D視覺化
- 資料視覺化:基於 Echarts + Python 實現的動態實時大屏範例【11】視覺化EchartsPython
- 基於 HTML5 的計量站三維視覺化監控系統 Web 組態工控應用HTML視覺化Web
- 關於大屏視覺化,你想了解的都在這視覺化
- 動態的視覺化大屏怎麼做,哪些可以做資料視覺化軟體視覺化
- 基於 HTML5 和 VR 技術的 3D 機房資料中心視覺化HTMLVR3D視覺化
- 基於 HTML5 WebGL 的計量站三維視覺化監控系統 Web 組態工控應用HTMLWeb視覺化
- 圖撲孿生工廠流水線組態圖視覺化視覺化
- 基於 HTML5 WebGL + WebVR 的 3D 虛實現實視覺化培訓系統HTMLWebVR3D視覺化
- 基於 HTML5 的 3D 工業網際網路展示方案HTML3D
- 基於 HTML5 的工業網際網路 3D 展示方案HTML3D
- 資料大屏視覺化挑戰視覺化