基於 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 機房場景到擁有了能夠展現溫度變化的溫度雲圖，讓整個場景動了起來，還有更多有趣的東西能夠加進來，讓整個場景變得更加豐富，期待咱們一塊兒創造新的改變。