옥토 프린트 플러그인 만들기 (챔버 매니저)
□ 온도 그래프 추가
Chart.js 활용
□ 변경된 UI
1. Chart.js 설치
① https://www.chartjs.org/docs/latest/에서 Chart.js를 다운 받는다. ② 플러그인 js 폴더에 「Chart.js」와 「Chart.min.js」를 복사한다. |
2. 플러그인 asset으로 등록
1 2 3 4 5 6 | def get_assets(self): return dict( js=["js/chambermanager.js", "js/Chart.js", "js/Chart.min.js"], css=["css/chambermanager.css"], less=["less/chambermanager.less"] ) | cs |
3. jinja2 template에 차트 등록
1 | <canvas id="AmbientTempChart" width="600vw" height="300vw"></canvas> | cs |
4. ViewModel에서 차트 설정
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | self.Chart = undefined; self.ChartConfig = undefined; self.ChartUpdateTimer = undefined; self.tempAmbient = []; self.tempTarget = []; self.tempLabel = []; self.tempMaxCount = 200; self.initializeChart = function() { try { self.ChartConfig = { type: 'line', data: { labels: [], datasets: [{ label: 'Target', backgroundColor: 'rgba(255,0,0,0.4)', borderColor: 'rgba(255,0,0,0.4)', data: [], fill: false, pointRadius: 0, pointHoverRadius: 0, }, { label: 'Actual', fill: false, backgroundColor: 'rgba(255,0,0,0.8)', borderColor: 'rgba(255,0,0,0.8)', data: [], fill: false, pointRadius: 0, pointHoverRadius: 0, }] }, options: { animation: { duration: 0, // general animation time }, hover: { animationDuration: 0, // duration of animations when hovering an item enabled: false, }, responsiveAnimationDuration: 0, // animation duration after a resize elements: { line: { tension: 0, // disables bezier curves } }, title: { display: true, text: 'Ambient Temperature' }, legend: { display: false, }, tooltips: { enabled: false, }, scales: { xAxes: [{ display: true, scaleLabel: { display: false, labelString: 'Time' } }], yAxes: [{ display: true, scaleLabel: { display: false, labelString: 'Temperature' }, ticks: { suggestedMin: 10, suggestedMax: 50 } }] } } }; self.Chart = new Chart($("#AmbientTempChart"), self.ChartConfig ); } catch (e) { alert(e); } } self.updateTemperature = function() { var ret = undefined; try { if(self.ChartConfig.data.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') { self.ChartConfig.data.datasets[0].data = ret[1]; self.ChartConfig.data.datasets[1].data = ret[2]; self.ChartConfig.data.labels = ret[3]; self.Chart.update(); } else if(ret[0].toUpperCase() == 'CURRENT') { self.ChartConfig.data.datasets[0].data.push(ret[1]); self.ChartConfig.data.datasets[1].data.push(ret[2]); self.ChartConfig.data.labels.push('1'); self.ChartConfig.data.datasets[0].data.shift(); self.ChartConfig.data.datasets[1].data.shift(); self.ChartConfig.data.labels.shift(); self.Chart.update(); } }, error: function(textStatus, errorThrown) { new PNotify({ title: "Chamber Manager", text: textStatus, type: "error" }); } }); } catch (e) { alert(e); } } self.onStartup = function() { self.initializeChart(); } self.onStartupComplete = function() { self.ChartUpdateTimer = setInterval(self.updateTemperature, 1000); }; | cs |
