libraries/RGraph.led.js

   1     /**
   2     * o------------------------------------------------------------------------------o
   3     * | This file is part of the RGraph package - you can learn more at:             |
   4     * |                                                                              |
   5     * |                          http://www.rgraph.net                               |
   6     * |                                                                              |
   7     * | This package is licensed under the RGraph license. For all kinds of business |
   8     * | purposes there is a small one-time licensing fee to pay and for non          |
   9     * | commercial  purposes it is free to use. You can read the full license here:  |
  10     * |                                                                              |
  11     * |                      http://www.rgraph.net/LICENSE.txt                       |
  12     * o------------------------------------------------------------------------------o
  13     */
  14
  15     if (typeof(RGraph) == 'undefined') RGraph = {};
  16
  17     /**
  18     * The LED lights constructor
  19     *
  20     * @param object canvas The canvas object
  21     * @param array  data   The chart data
  22     */
  23     RGraph.LED = function (id, text)
  24     {
  25         // Get the canvas and context objects
  26         this.id                = id;
  27         this.canvas            = document.getElementById(id);
  28         this.context           = this.canvas.getContext ? this.canvas.getContext("2d") : null;
  29         this.canvas.__object__ = this;
  30         this.type              = 'led';
  31         this.isRGraph          = true;
  32
  33
  34         /**
  35         * Compatibility with older browsers
  36         */
  37         RGraph.OldBrowserCompat(this.context);
  38
  39
  40         /**
  41         * Set the string that is to be displayed
  42         */
  43         this.text = text;
  44
  45         /**
  46         * The letters and numbers
  47         */
  48         this.lights = {
  49             'a': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]],
  50             'b': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0]],
  51             'c': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,1],[0,1,1,0]],
  52             'd': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,0]],
  53             'e': [[1,1,1,1],[1,0,0,0],[1,0,0,0],[1,1,1,0],[1,0,0,0],[1,0,0,0],[1,1,1,1]],
  54             'f': [[1,1,1,1],[1,0,0,0],[1,0,0,0],[1,1,1,0],[1,0,0,0],[1,0,0,0],[1,0,0,0]],
  55             'g': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[1,0,1,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
  56             'h': [[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]],
  57             'i': [[0,1,1,1],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,1,1,1]],
  58             'j': [[0,1,1,1],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,1,0,0]],
  59             'k': [[1,0,0,1],[1,0,0,1],[1,0,1,0],[1,1,0,0],[1,0,1,0],[1,0,0,1],[1,0,0,1]],
  60             'l': [[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,1,1,1]],
  61             'm': [[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]],
  62             'n': [[1,0,0,1],[1,1,0,1],[1,0,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]],
  63             'o': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
  64             'p': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0],[1,0,0,0],[1,0,0,0],[1,0,0,0]],
  65             'q': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,1,1],[0,1,1,1]],
  66             'r': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0],[1,0,1,0],[1,0,0,1],[1,0,0,1]],
  67             's': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[0,1,1,0],[0,0,0,1],[1,0,0,1],[0,1,1,0]],
  68             't': [[1,1,1,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]],
  69             'u': [[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
  70             'v': [[1,0,1],[1,0,1],[1,0,1],[1,0,1],[1,0,1],[0,1,0],[0,1,0]],
  71             'w': [[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,1],[0,1,1,0]],
  72             'x': [[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,0,1,0],[0,1,0,1],[0,1,0,1],[0,1,0,1]],
  73             'y': [[0,1,0,1],[0,1,0,1],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0]],
  74             'z': [[1,1,1,1],[0,0,0,1],[0,0,1,0],[0,0,1,0],[0,1,0,0],[1,0,0,0],[1,1,1,1]],
  75             ' ': [[],[],[],[],[], [], []],
  76             '0': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
  77             '1': [[0,0,1,0],[0,1,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,1,1,1]],
  78             '2': [[0,1,1,0],[1,0,0,1],[0,0,0,1],[0,0,1,0],[0,1,,0],[1,0,0,0],[1,1,1,1]],
  79             '3': [[0,1,1,0],[1,0,0,1],[0,0,0,1],[0,1,1,0],[0,0,0,1],[1,0,0,1],[0,1,1,0]],
  80             '4': [[1,0,0,0],[1,0,0,0],[1,0,1,0],[1,0,1,0],[1,1,1,1],[0,0,1,0],[0,0,1,0]],
  81             '5': [[1,1,1,1],[1,0,0,0],[1,0,0,0],[1,1,1,0],[0,0,0,1],[1,0,0,1],[0,1,1,0]],
  82             '6': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[1,1,1,0],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
  83             '7': [[1,1,1,1],[0,0,0,1],[0,0,0,1],[0,0,1,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]],
  84             '8': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[0,1,1,0],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
  85             '9': [[0,1,1,1],[1,0,0,1],[1,0,0,1],[0,1,1,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]]
  86         }
  87
  88         // Various config type stuff
  89         this.properties = {
  90             'chart.background':    'white',
  91             'chart.dark':          '#eee',
  92             'chart.light':         '#f66',
  93             'chart.zoom.factor':   1.5,
  94             'chart.zoom.fade.in':  true,
  95             'chart.zoom.fade.out': true,
  96             'chart.zoom.hdir':     'right',
  97             'chart.zoom.vdir':     'down',
  98             'chart.zoom.frames':   10,
  99             'chart.zoom.delay':    50,
 100             'chart.zoom.shadow':   true,
 101             'chart.zoom.background': true,
 102             'chart.zoom.action':     'zoom',
 103             'chart.resizable':       false
 104         }
 105
 106         // Check for support
 107         if (!this.canvas) {
 108             alert('[LED] No canvas support');
 109             return;
 110         }
 111
 112         // Check the canvasText library has been included
 113         if (typeof(RGraph) == 'undefined') {
 114             alert('[LED] Fatal error: The common library does not appear to have been included');
 115         }
 116     }
 117
 118
 119     /**
 120     * A setter
 121     *
 122     * @param name  string The name of the property to set
 123     * @param value mixed  The value of the property
 124     */
 125     RGraph.LED.prototype.Set = function (name, value)
 126     {
 127         this.properties[name.toLowerCase()] = value;
 128     }
 129
 130
 131     /**
 132     * A getter
 133     *
 134     * @param name  string The name of the property to get
 135     */
 136     RGraph.LED.prototype.Get = function (name)
 137     {
 138         return this.properties[name.toLowerCase()];
 139     }
 140
 141
 142     /**
 143     * This draws the LEDs
 144     */
 145     RGraph.LED.prototype.Draw = function ()
 146     {
 147         /**
 148         * Fire the onbeforedraw event
 149         */
 150         RGraph.FireCustomEvent(this, 'onbeforedraw');
 151
 152
 153         // First clear the canvas, using the background colour
 154         RGraph.Clear(this.canvas, this.Get('chart.background'));
 155
 156         for (var l=0; l<this.text.length; l++) {
 157             this.DrawLetter(this.text.charAt(l), l);
 158         }
 159
 160         /**
 161         * Set the title attribute on the canvas
 162         */
 163         this.canvas.title = RGraph.rtrim(this.text);
 164
 165         /**
 166         * Setup the context menu if required
 167         */
 168         if (this.Get('chart.contextmenu')) {
 169             RGraph.ShowContext(this);
 170         }
 171
 172         /**
 173         * This bit shows the mini zoom window if requested
 174         */
 175         if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
 176             RGraph.ShowZoomWindow(this);
 177         }
 178
 179
 180         /**
 181         * This function enables resizing
 182         */
 183         if (this.Get('chart.resizable')) {
 184             RGraph.AllowResizing(this);
 185         }
 186
 187         /**
 188         * Fire the RGraph ondraw event
 189         */
 190         RGraph.FireCustomEvent(this, 'ondraw');
 191     }
 192
 193
 194     /**
 195     * Draws a single letter
 196     *
 197     * @param string lights The lights to draw to draw
 198     * @param int    index  The position of the letter
 199     */
 200     RGraph.LED.prototype.DrawLetter = function (letter, index)
 201     {
 202         var light    = this.Get('chart.light');
 203         var dark     = this.Get('chart.dark');
 204         var lights   = (this.lights[letter] ? this.lights[letter] : [[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0]]);
 205         var lwidth   = this.canvas.width / this.text.length;
 206         var diameter = lwidth / 5;
 207         var radius   = diameter / 2;
 208
 209         for (var i=0; i<7; i++) {
 210             for (var j=0; j<5; j++) {
 211
 212                 var x = (j * diameter) + (index * lwidth) + radius;
 213                 var y = (this.canvas.height / 2) + ((i * diameter) + 2) - (7 * radius);
 214
 215                 // Draw a circle
 216                 this.context.fillStyle   = (lights[i][j] ? light : dark);
 217                 this.context.strokeStyle = (lights[i][j] ? '#ccc' : 'rgba(0,0,0,0)');
 218                 this.context.beginPath();
 219                 this.context.arc(x, y, radius, 0, 6.28, 0);
 220
 221                 this.context.stroke();
 222                 this.context.fill();
 223             }
 224         }
 225     }