import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'span', classNames: ['alarm'], size: 40, value: 0, alarmZones: [], _blinking: false, _blinkState: false, didInsertElement: function() { this._drawAlarm(); }, _drawAlarm: function() { // calculate dimensions var cx = this.size / 2; var radius = this.size / 2 * 0.97; // create body element var body = d3.select('#' + this.elementId).append("svg:svg").attr("width", this.size).attr("height", this.size); this.set('svgBody', body); // add background body.append("svg:circle") .attr("cx", cx) .attr("cy", cx) .attr("r", radius) .style("fill", "#ccc") .style("stroke", "#000") .style("stroke-width", "0.5px"); this._redraw(); }, _redraw: function() { var cx = this.size / 2; var radius = this.size / 2 * 0.97; var litAlarm = this._shouldLitAlarm(); if (litAlarm && this._blinking === false) { // start blinking this._blinkState = true; this._blinking = true; Ember.run.later(this, this._updateBlinkState, 1000); } else if (litAlarm === false && this._blinking === true) { // stop blinking this._blinking = false; } if (litAlarm && (this._blinking === true && this._blinkState === true)) { this.svgBody.append("svg:circle") .attr("cx", cx) .attr("cy", cx) .attr("r", radius * 0.8) .style("fill", "#F00") .style("stroke", "#000") .style("stroke-width", "0.5px"); } else { this.svgBody.append("svg:circle") .attr("cx", cx) .attr("cy", cx) .attr("r", radius * 0.8) .style("fill", "#633") .style("stroke", "#000") .style("stroke-width", "0.5px"); } }.observes('value'), _shouldLitAlarm: function() { for (var zone in this.alarmZones) { // get border for zone var from = this.alarmZones[zone].from; var to = this.alarmZones[zone].to; if (this.value >= from && this.value <= to) { return true; } } return false; }, _updateBlinkState: function() { if (this._blinking === true) { this._blinkState = !this._blinkState; Ember.run.later(this, this._updateBlinkState, 1000); } } });