signalgraph.js

"use strict"
define(function () {
  return function (canvas, min, max) {
    var i = 0
    var graphWidth
    var last = 0

    var signals = []

    var ctx = canvas.getContext("2d")

    resize()

    window.addEventListener("resize", resize, false)
    window.requestAnimationFrame(step)

    function step(timestamp) {
      var delta = timestamp - last

      if (delta > 40) {
        draw()
        last = timestamp
      }

      window.requestAnimationFrame(step)
    }

    function drawGrid() {
      var gridctx = ctx
      var nLines = Math.floor(canvas.height / 40)
      gridctx.save()
      gridctx.lineWidth = 0.5
      gridctx.strokeStyle = "rgba(0, 0, 0, 0.25)"
      gridctx.fillStyle = "rgba(0, 0, 0, 0.5)"
      gridctx.textAlign = "end"
      gridctx.textBaseline = "bottom"

      gridctx.beginPath()

      for (var i = 0; i < nLines; i++) {
        var y = canvas.height - i * 40
        gridctx.moveTo(0, y - 0.5)
        gridctx.lineTo(canvas.width, y - 0.5)
        var dBm = Math.round(scaleInverse(y, min, max, canvas.height)) + " dBm"

        gridctx.save()
        gridctx.strokeStyle = "rgba(255, 255, 255, 0.9)"
        gridctx.lineWidth = 4
        gridctx.miterLimit = 2
        gridctx.strokeText(dBm, canvas.width - 5, y - 2.5)
        gridctx.fillText(dBm, canvas.width - 5, y - 2.5)
        gridctx.restore()
      }

      gridctx.stroke()

      gridctx.strokeStyle = "rgba(0, 0, 0, 0.83)"
      gridctx.lineWidth = 1.5
      gridctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1)

      gridctx.restore()
    }

    function draw() {
      var anyHighlight = signals.some( function (d) { return d.getHighlight() })

      signals.forEach( function (d) {
        d.draw(i, function (v) {
          return scale(v, min, max, canvas.height)
        })