OctoPrint Plugin 만들기 #8 (온도 그래프 X축 Log Scale로 변경)

OctoPrint Plugin 만들기 #8 (온도 그래프 X축 Log Scale로 변경)

옥토 프린트 플러그인 만들기 (챔버 매니저)

□ 온도 그래프 X축을 Log Scale로 변경

  : 그래프의 오른쪽으로 갈수록 최신 데이터로 최신 데이터 위주로 표시하도록 Log Scale로 변경

※ 변경된 UI

[chambermanager.js]

        self.Chart = undefined;
        self.ChartConfig = undefined;
        self.ChartUpdateTimer = undefined;
        self.historyTemp = {
            actuals: [],
            targets: [],
            labels: [],
            countMax: 1800
        };
        self.historyTempLogScale = {
            actuals: new Array(200),
            targets: new Array(200),
            labels: new Array(200),
            countMax: 1800
        };
 
        self.updateTemperature = function() {
            var ret = undefined;
 
            try {
                if(self.historyTemp.labels.length==0) {
                    self.getCurrentTemp('HISTORY');
                } else {
                    self.getCurrentTemp('CURRENT');
                }
            }
            catch (e) {
                alert(e);
            }
 
        }
 
        self.getCurrentTemp = function(cmd) {
            var request = { cmd };
            var ret = undefined;
 
            try {
                $.ajax({
                    url: self.buildPluginUrl("/getTemperature"),
                    type: "GET",
                    dataType: "json",
                    data: request,
                    success: function(data) {
                        ret = data;
                        if(ret[0].toUpperCase() == 'HISTORY') {
                            if(ret[3].length>self.historyTemp.countMax) {
                                var pos = ret[3].length - self.historyTemp.countMax;
 
                                self.historyTemp.actuals = ret[1].slice(pos);
                                self.historyTemp.targets = ret[2].slice(pos);
                                self.historyTemp.labels = ret[3].slice(pos);
                            } else {
                                self.historyTemp.actuals = ret[1];
                                self.historyTemp.targets = ret[2];
                                self.historyTemp.labels = ret[3];
                            }
                        } else if(ret[0].toUpperCase() == 'CURRENT') {
                            self.historyTemp.actuals.push(ret[1]);
                            self.historyTemp.targets.push(ret[2]);
                            self.historyTemp.labels.push(ret[3]);
 
                            if(self.historyTemp.labels.length>self.historyTemp.countMax) {
                                self.historyTemp.actuals.shift();
                                self.historyTemp.targets.shift();
                                self.historyTemp.labels.shift();
                            }
                        }
 
                        self.processTemperature();
                    },
                    error: function(textStatus, errorThrown) {
                        new PNotify({
                            title: "Chamber Manager",
                            text: textStatus,
                            type: "error"
                        });
                    }
                });
            }
            catch (e) {
                alert(e);
            }
        }
 
 
        self.processTemperature = function() {
            if(self.historyTemp.labels.length<200) {
                self.ChartConfig.data.labels = self.historyTemp.labels;
                self.ChartConfig.data.datasets[0].data = self.historyTemp.actuals;
                self.ChartConfig.data.datasets[1].data = self.historyTemp.targets;
 
                var last = self.ChartConfig.data.labels.length - 1;
                var dtNow = Date.parse(self.ChartConfig.data.labels[last]);
                for(var i in self.ChartConfig.data.labels) {
                    var diffMin = (dtNow.getTime() - Date.parse(self.ChartConfig.data.labels[i]).getTime())/(1000*60);
                    self.ChartConfig.data.labels[i] = diffMin;
                }
            } else {
                try {
                    for(var i=0; i<200; i++) {
                        //          LastArrayIndex                    -ROUNDUP  (LastArrayIndex                    /9*(   POWER(10,(199-Index)/200)-1),0)
                        var index = (self.historyTemp.labels.length-1)-Math.ceil((self.historyTemp.labels.length-1)/9*(Math.pow(10,(199-i)/200)-1),0);
    
                        self.historyTempLogScale.actuals[i] = self.historyTemp.actuals[index];
                        self.historyTempLogScale.targets[i] = self.historyTemp.targets[index];
                        self.historyTempLogScale.labels[i] = self.historyTemp.labels[index];
                    }
                    self.ChartConfig.data.labels = self.historyTempLogScale.labels;
                    self.ChartConfig.data.datasets[0].data = self.historyTempLogScale.actuals;
                    self.ChartConfig.data.datasets[1].data = self.historyTempLogScale.targets;
 
                    var last = self.ChartConfig.data.labels.length - 1;
                    var dtNow = Date.parse(self.ChartConfig.data.labels[last]);
                    var ticks = 0;
                    for(var i in self.ChartConfig.data.labels) {
                        var diffMin = (dtNow - Date.parse(self.ChartConfig.data.labels[i]))/(1000*60);
 
                        if((ticks++%10)==0) {
                            self.ChartConfig.data.labels[i] = String(-1*parseInt(diffMin*10)/10);
                        } else {
                            self.ChartConfig.data.labels[i] = String(-1*parseInt(diffMin*10)/10);
                        }
                    }
                }
                catch (e) {
                    alert(e);
                }
            }
            self.Chart.update();
        }
 
 
        self.onStartup = function() {
            self.initializeChart();
        }
 
 
        self.onStartupComplete = function() {
            self.ChartUpdateTimer = setInterval(self.updateTemperature, 1000);
 
        };