diff options
| -rw-r--r-- | debian/copyright | 4 | ||||
| -rw-r--r-- | debian/missing-sources/gauge-1.3.2.coffee (renamed from debian/missing-sources/gauge-d5260c3.coffee) | 204 |
2 files changed, 141 insertions, 67 deletions
diff --git a/debian/copyright b/debian/copyright index 625a019e..34a9ed5f 100644 --- a/debian/copyright +++ b/debian/copyright @@ -92,8 +92,8 @@ Copyright: 2014 Dan Vanderkam <danvdk@gmail.com> License: Expat Files: - web/lib/gauge-d5260c3.min.js - debian/missing-sources/gauge-d5260c3.coffee + web/lib/gauge-1.3.2.min.js + debian/missing-sources/gauge-1.3.2.coffee Copyright: 2016 Bernard Kobos <bkobos@extensa.pl> License: Expat diff --git a/debian/missing-sources/gauge-d5260c3.coffee b/debian/missing-sources/gauge-1.3.2.coffee index d7366f44..0121446c 100644 --- a/debian/missing-sources/gauge-d5260c3.coffee +++ b/debian/missing-sources/gauge-1.3.2.coffee @@ -60,13 +60,10 @@ secondsToString = (sec) -> hr = if hr then hr + ':' else '' return hr + min + ':' + sec -formatNumber = (num) -> - return addCommas(num.toFixed(0)) - -updateObjectValues = (obj1, obj2) -> - for own key, val of obj2 - obj1[key] = val - return obj1 +formatNumber = (num...) -> + value = num[0] + digits = 0 || num[1] + return addCommas(value.toFixed(digits)) mergeObjects = (obj1, obj2) -> out = {} @@ -115,8 +112,8 @@ class ValueUpdater class BaseGauge extends ValueUpdater displayScale: 1 - setTextField: (textField) -> - @textField = if textField instanceof TextRenderer then textField else new TextRenderer(textField) + setTextField: (textField, fractionDigits) -> + @textField = if textField instanceof TextRenderer then textField else new TextRenderer(textField, fractionDigits) setMinValue: (@minValue, updateStartValue=true) -> if updateStartValue @@ -130,7 +127,7 @@ class BaseGauge extends ValueUpdater @textField.el.style.fontSize = options.fontSize + 'px' if @options.angle > .5 - @gauge.options.angle = .5 + @options.angle = .5 @configDisplayScale() return @ @@ -162,11 +159,11 @@ class BaseGauge extends ValueUpdater return @ class TextRenderer - constructor: (@el) -> + constructor: (@el, @fractionDigits) -> # Default behaviour, override to customize rendering render: (gauge) -> - @el.innerHTML = formatNumber(gauge.displayedValue) + @el.innerHTML = formatNumber(gauge.displayedValue, @fractionDigits) class AnimatedText extends ValueUpdater displayedValue: 0 @@ -208,8 +205,8 @@ class GaugePointer extends ValueUpdater @setOptions() setOptions: (options=null) -> - updateObjectValues(@options, options) - @length = @canvas.height * @options.length + @options = mergeObjects(@options, options) + @length = 2*@gauge.radius * @gauge.options.radiusScale * @options.length @strokeWidth = @canvas.height * @options.strokeWidth @maxValue = @gauge.maxValue @minValue = @gauge.minValue @@ -218,22 +215,20 @@ class GaugePointer extends ValueUpdater render: () -> angle = @gauge.getAngle.call(@, @displayedValue) - centerX = @canvas.width / 2 - centerY = @canvas.height * 0.9 - x = Math.round(centerX + @length * Math.cos(angle)) - y = Math.round(centerY + @length * Math.sin(angle)) + x = Math.round(@length * Math.cos(angle)) + y = Math.round(@length * Math.sin(angle)) - startX = Math.round(centerX + @strokeWidth * Math.cos(angle - Math.PI/2)) - startY = Math.round(centerY + @strokeWidth * Math.sin(angle - Math.PI/2)) + startX = Math.round(@strokeWidth * Math.cos(angle - Math.PI/2)) + startY = Math.round(@strokeWidth * Math.sin(angle - Math.PI/2)) - endX = Math.round(centerX + @strokeWidth * Math.cos(angle + Math.PI/2)) - endY = Math.round(centerY + @strokeWidth * Math.sin(angle + Math.PI/2)) + endX = Math.round(@strokeWidth * Math.cos(angle + Math.PI/2)) + endY = Math.round(@strokeWidth * Math.sin(angle + Math.PI/2)) @ctx.fillStyle = @options.color @ctx.beginPath() - @ctx.arc(centerX, centerY, @strokeWidth, 0, Math.PI*2, true) + @ctx.arc(0, 0, @strokeWidth, 0, Math.PI*2, true) @ctx.fill() @ctx.beginPath() @@ -271,6 +266,7 @@ class Gauge extends BaseGauge displayedAngle: 0 displayedValue: 0 lineWidth: 40 + paddingTop: 0.1 paddingBottom: 0.1 percentColors: null, options: @@ -283,15 +279,23 @@ class Gauge extends BaseGauge strokeWidth: 0.035 angle: 0.15 lineWidth: 0.44 + radiusScale: 1.0 fontSize: 40 limitMax: false + limitMin: false constructor: (@canvas) -> super() @percentColors = null + @forceUpdate = true if typeof G_vmlCanvasManager != 'undefined' @canvas = window.G_vmlCanvasManager.initElement(@canvas) @ctx = @canvas.getContext('2d') + # Set canvas size to parent size + h = @canvas.clientHeight; + w = @canvas.clientWidth; + @canvas.height = h; + @canvas.width = w; @gp = [new GaugePointer(@)] @setOptions() @render() @@ -299,10 +303,15 @@ class Gauge extends BaseGauge setOptions: (options=null) -> super(options) @configPercentColors() - @lineWidth = @canvas.height * (1 - @paddingBottom) * @options.lineWidth # .2 - .7 - @radius = @canvas.height * (1 - @paddingBottom) - @lineWidth + @extraPadding = 0 + if @options.angle < 0 + phi = Math.PI*(1 + @options.angle) + @extraPadding = Math.sin(phi) + @availableHeight = @canvas.height * (1 - @paddingTop - @paddingBottom) + @lineWidth = @availableHeight * @options.lineWidth # .2 - .7 + @radius = (@availableHeight - @lineWidth/2) / (1.0 + @extraPadding) @ctx.clearRect(0, 0, @canvas.width, @canvas.height) - @render() + # @render() for gauge in @gp gauge.setOptions(@options.pointer) gauge.render() @@ -319,32 +328,43 @@ class Gauge extends BaseGauge @percentColors[i] = { pct: @options.percentColors[i][0], color: { r: rval, g: gval, b: bval } } set: (value) -> - if not (value instanceof Array) value = [value] # check if we have enough GaugePointers initialized # lazy initialization if value.length > @gp.length for i in [0...(value.length - @gp.length)] - @gp.push(new GaugePointer(@)) + gp = new GaugePointer(@) + gp.setOptions(@options.pointer) + @gp.push(gp) + else if value.length < @gp.length + # Delete redundant GaugePointers + @gp = @gp.slice(@gp.length-value.length) # get max value and update pointer(s) i = 0 - max_hit = false for val in value + # Limit pointer within min and max? if val > @maxValue - @maxValue = @value * 1.1 - max_hit = true + if @options.limitMax + val = @maxValue + else + @maxValue = val + 1 + + else if val < @minValue + if @options.limitMin + val = @minValue + else + @minValue = val - 1 + @gp[i].value = val - @gp[i++].setOptions({maxValue: @maxValue, angle: @options.angle}) - @value = value[value.length - 1] # TODO: Span maybe?? + @gp[i++].setOptions({minValue: @minValue, maxValue: @maxValue, angle: @options.angle}) + @value = Math.max(Math.min(value[value.length - 1], @maxValue), @minValue) # TODO: Span maybe?? - if max_hit - unless @options.limitMax - AnimationUpdater.run() - else - AnimationUpdater.run() + # Force first .set() + AnimationUpdater.run(@forceUpdate) + @forceUpdate = false getAngle: (value) -> return (1 + @options.angle) * Math.PI + ((value - @minValue) / (@maxValue - @minValue)) * (1 - @options.angle * 2) * Math.PI @@ -358,7 +378,7 @@ class Gauge extends BaseGauge if (pct <= @percentColors[i].pct) if grad == true # Gradually change between colors - startColor = @percentColors[i - 1] + startColor = @percentColors[i - 1] || @percentColors[0] endColor = @percentColors[i] rangePct = (pct - startColor.pct) / (endColor.pct - startColor.pct) # How far between both colors color = { @@ -375,41 +395,94 @@ class Gauge extends BaseGauge pct = (val - @minValue) / (@maxValue - @minValue) return @getColorForPercentage(pct, grad); + renderStaticLabels: (staticLabels, w, h, radius) -> + @ctx.save() + @ctx.translate(w, h) + + # Scale font size the hard way - assuming size comes first. + font = staticLabels.font or "10px Times" + re = /\d+\.?\d?/ + match = font.match(re)[0] + rest = font.slice(match.length); + fontsize = parseFloat(match) * this.displayScale; + @ctx.font = fontsize + rest; + @ctx.fillStyle = staticLabels.color || "#000000"; + + @ctx.textBaseline = "bottom" + @ctx.textAlign = "center" + for value in staticLabels.labels + # Draw labels depending on limitMin/Max + if (not @options.limitMin or value >= @minValue) and (not @options.limitMax or value <= @maxValue) + rotationAngle = @getAngle(value) - 3*Math.PI/2 + @ctx.rotate(rotationAngle) + @ctx.fillText(formatNumber(value, staticLabels.fractionDigits), 0, -radius - @lineWidth/2) + @ctx.rotate(-rotationAngle) + @ctx.restore() + render: () -> # Draw using canvas w = @canvas.width / 2 - h = @canvas.height * (1 - @paddingBottom) + h = @canvas.height*@paddingTop + @availableHeight - (@radius + @lineWidth/2)*@extraPadding displayedAngle = @getAngle(@displayedValue) if @textField @textField.render(@) @ctx.lineCap = "butt" - if @options.customFillStyle != undefined - fillStyle = @options.customFillStyle(@) - else if @percentColors != null - fillStyle = @getColorForValue(@displayedValue, true) - else if @options.colorStop != undefined - if @options.gradientType == 0 - fillStyle = this.ctx.createRadialGradient(w, h, 9, w, h, 70); - else - fillStyle = this.ctx.createLinearGradient(0, 0, w, 0); - fillStyle.addColorStop(0, @options.colorStart) - fillStyle.addColorStop(1, @options.colorStop) - else - fillStyle = @options.colorStart - @ctx.strokeStyle = fillStyle - @ctx.beginPath() - @ctx.arc(w, h, @radius, (1 + @options.angle) * Math.PI, displayedAngle, false) - @ctx.lineWidth = @lineWidth - @ctx.stroke() + radius = @radius * @options.radiusScale + if (@options.staticLabels) + @renderStaticLabels(@options.staticLabels, w, h, radius) + + if (@options.staticZones) + @ctx.save() + @ctx.translate(w, h) + @ctx.lineWidth = @lineWidth + for zone in @options.staticZones + # Draw zones depending on limitMin/Max + min = zone.min + if @options.limitMin and min < @minValue + min = @minValue + max = zone.max + if @options.limitMax and max > @maxValue + max = @maxValue + @ctx.strokeStyle = zone.strokeStyle + @ctx.beginPath() + @ctx.arc(0, 0, radius, @getAngle(min), @getAngle(max), false) + @ctx.stroke() + @ctx.restore() - @ctx.strokeStyle = @options.strokeColor - @ctx.beginPath() - @ctx.arc(w, h, @radius, displayedAngle, (2 - @options.angle) * Math.PI, false) - @ctx.stroke() + else + if @options.customFillStyle != undefined + fillStyle = @options.customFillStyle(@) + else if @percentColors != null + fillStyle = @getColorForValue(@displayedValue, true) + else if @options.colorStop != undefined + if @options.gradientType == 0 + fillStyle = this.ctx.createRadialGradient(w, h, 9, w, h, 70); + else + fillStyle = this.ctx.createLinearGradient(0, 0, w, 0); + fillStyle.addColorStop(0, @options.colorStart) + fillStyle.addColorStop(1, @options.colorStop) + else + fillStyle = @options.colorStart + @ctx.strokeStyle = fillStyle + + @ctx.beginPath() + @ctx.arc(w, h, radius, (1 + @options.angle) * Math.PI, displayedAngle, false) + @ctx.lineWidth = @lineWidth + @ctx.stroke() + + @ctx.strokeStyle = @options.strokeColor + @ctx.beginPath() + @ctx.arc(w, h, radius, displayedAngle, (2 - @options.angle) * Math.PI, false) + @ctx.stroke() + + + # Draw pointers from (w, h) + @ctx.translate(w, h) for gauge in @gp gauge.update(true) + @ctx.translate(-w, -h) class BaseDonut extends BaseGauge @@ -426,6 +499,7 @@ class BaseDonut extends BaseGauge strokeColor: "#eeeeee" shadowColor: "#d5d5d5" angle: 0.35 + radiusScale: 1.0 constructor: (@canvas) -> super() @@ -441,7 +515,7 @@ class BaseDonut extends BaseGauge setOptions: (options=null) -> super(options) @lineWidth = @canvas.height * @options.lineWidth - @radius = @canvas.height / 2 - @lineWidth/2 + @radius = @options.radiusScale * (@canvas.height / 2 - @lineWidth/2) return @ set: (value) -> @@ -508,10 +582,10 @@ window.AnimationUpdater = add: (object) -> AnimationUpdater.elements.push(object) - run: () -> + run: (force=false) -> animationFinished = true for elem in AnimationUpdater.elements - if elem.update() + if elem.update(force is true) animationFinished = false if not animationFinished AnimationUpdater.animId = requestAnimationFrame(AnimationUpdater.run) |