基於 HTML5 Canvas 的機房溫度雲圖展示

前言

在物聯網的大趨勢下,機房的設備信息以及一些環境信息變成了數據擺在了人們面前。在這個大數據的時代，數據的可視化不僅體現在數據值本身，更應該通過數據的變化來獲取一些信息。我們今天的主題，機房溫度雲圖，它通過不同的顏色來展示機房機櫃溫度的高低及變化，將之形象化出來，讓人們更加直觀的觀察溫度值的變化。

下圖是我借助 heatmap.js 熱力圖和 HTML5 Canvas 實現的機房溫度雲圖，這里只是模擬的一個溫度值，相信有了更加真實的數據，它會變得更加炫麗。

http://www.hightopo.com/demo/rackHeatmap/index.html ← 戳我看 Demo

實現過程

現在讓我們來一層一層揭開它的實現過程。

可以看到溫度雲圖有個動態的改變，這里只是加了一個定時器來隨機的改變溫度值。

var values = [50, 60, 70, 80, 90, 100];
var timer1 = setInterval(function() {
    var points = [];
    // 獲取場景中 3 個溫度傳感器的位置，設置模擬的溫度值
    for(var i = 1; i < 4; i++) {
        var tag = 'at' + i;
        data = dataModel.getDataByTag(tag);
        var index = Math.floor(Math.random() * 6);
        if (data) {
            // 設置溫度點位置
            points.push({
                x: data.p3()[0] - floor1Position[0],
                y: data.p3()[2] - floor1Position[2],
                value: values[index]
            });
        }
    }
    // 通過設置溫度點信息，來繪制溫度雲圖
    heatmap1.setData({ data: points, max: 100, min: 0 });
    g3d.invalidateData(floor1);
}, 2000);

溫度傳感器放置在機櫃間的隔層中，通過獲取他們在場景中的位置點坐標和相對應的溫度雲圖六面體（下邊會講到）的位置點坐標，用后者減去前者即得到溫度點在平面雲圖中的坐標點位置。

我們取消定時器后再看下效果。

現在只是一個靜態的溫度雲圖，一個固定的溫度值，沒有了變化，我們來看一下是怎么加溫度雲圖的。

// 創建一張溫度雲圖
heatmap1 = createHeatMap(930, 820);
ht.Default.setImage('hm-floor1', heatmap1._renderer.canvas);
var floor1 = dataModel.getDataByTag('floor1');
floor1Position = floor1.p3();
floor1.s({
    'top.image': 'hm-floor1'
});

// 溫度雲圖的生成函數
function createHeatMap(width, height) {
    heatmap = h337.create({
        width: width,
        height: height,
        radius: 450,
        maxOpacity: 1,
        minOpacity: 0
    });
    heatmap._renderer.canvas.dynamic = true;
    return heatmap;
}

通過 heatmap._renderer.canvas 我們取得溫度雲圖的 canvas，並使用 HT for Web 的 ht.Default.setImage('hm-floor1', heatmap1._renderer.canvas) 將其注冊成矢量圖片。
現在溫度雲圖有了，我們要怎么將其部署到機櫃下邊呢？看下面一張圖片。

紅框選的就是一個用來展示溫度雲圖的面，它其實是一個六面體模型的頂面，將它放置在機櫃下邊，再通過 floor1.s({ 'top.image': 'hm-floor1' }) 為其設置貼圖，就成了我們上邊看到的樣式。
現在，讓我們來看一下機房原型吧。

總結

從一個簡單的 3D 機房場景到擁有了可以展示溫度變化的溫度雲圖，讓整個場景動了起來，還有更多有趣的東西可以加進來，讓整個場景變得更加豐富，期待我們一起創造新的改變。