API tools faq
paste
Advertisement
Guest User

lcdHelper2.html - Designer for 5*8px characters for lcds.

a guest
Aug 22nd, 2013
170
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 22.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. /*
  6. Author: enhzflep
  7. Date: 22nd Aug 2013
  8. License: MIT
  9. ------------------------------------------------------------------------------------------------------------------
  10. Copyright (C) 2013 - enhzflep
  11.  
  12. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  13.  
  14. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  15.  
  16. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  17. ------------------------------------------------------------------------------------------------------------------
  18. */
  19.  
  20. // basic helper functions
  21. function byId(e){return document.getElementById(e);}
  22. function newEl(tag){return document.createElement(tag);}
  23. function newTxt(txt){return document.createTextNode(txt);}
  24. function toggleClass(element, newStr)
  25. {
  26.     index=element.className.indexOf(newStr);
  27.     if ( index == -1)
  28.         element.className += ' '+newStr;
  29.     else
  30.     {
  31.         if (index != 0)
  32.             newStr = ' '+newStr;
  33.         element.className = element.className.replace(newStr, '');
  34.     }
  35. }
  36.  
  37. // attach handler for page-loaded event
  38. window.addEventListener('load', mInit, false);
  39.  
  40. function mInit()
  41. {
  42.     // create the table used to draw the charaters. Attach event handlers to the cells at the same time.
  43.     var cellCallbackObjArray = [ {eventType: 'mousedown', callbackFunc: onCellClick}, {eventType: 'mouseover', callbackFunc: onCellEnter} ];
  44.     byId('charHolder').appendChild( makeTable(5,8,'char',cellCallbackObjArray) );
  45.    
  46.     // add the mouse up/down handlers to the window. Used for drawing when the mouse is moved while the button is down
  47.     window.addEventListener('mousedown', onMouseDown, false);
  48.     window.addEventListener('mouseup', onMouseUp, false);
  49.  
  50.     // add the items to the character selector. 256 items - 1 for each char in font
  51.     var i, n = 256, selectElement = byId('charSelector');
  52.     for (i=0; i<n; i++)
  53.         selectElement.appendChild( new Option('Char #'+i, i) );
  54.        
  55.     // initialize themes select element
  56.     n = themes.length, sel=byId('themeSelector');
  57.     for (i=0; i<n; i++)
  58.     {
  59.         var opt = new Option(themes[i].name, i);
  60.         sel.appendChild(opt);
  61.     }
  62.     sel.addEventListener('change', onThemeChanged, false);
  63.  
  64.     // initialize outputFormat select element
  65.     n = outputTypes.length, sel=byId('outputFormatSelector');
  66.     for (i=0; i<n; i++)
  67.     {
  68.         var opt = new Option(outputTypes[i].name, i);
  69.         sel.appendChild(opt);
  70.     }
  71.     sel.addEventListener('change', onOutputFormatChanged, false);
  72.    
  73.     // dynamically create the css rules, based on the information found in the 'themes' variable
  74.     // this allows for easy extension of the available themes. To add one, just add a new item to the array of themes.
  75.     createThemeCSS();
  76.        
  77.     // set the colour theme for the drawing area and the lcdPanel output area  
  78.     // show text on lcdPanel
  79.     // display code output
  80.     onPreviewInputChanged();
  81.     updateTheme();
  82.     computeOutput();
  83. }
  84.  
  85. var outputFormatIndex = 0, themeIndex=0;
  86. var curCharIndex = 0;
  87. var lcdData = [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];        // 32 bytes - 16 for each row
  88.  
  89. var themes = [
  90.                 { name: 'Orange on red',  className: 'orangeRed', bkCol: '#390b0e',  offCol: '#4b0a0e',   onCol: '#ff7109' },
  91.                 { name: 'White on blue',  className: 'whiteBlue', bkCol: 'rgb(59,120,229)',  offCol: 'rgb(62,95,236)',   onCol: 'rgb(199,204,212)' },
  92.                 { name: 'Black on green',  className: 'blackGreen', bkCol: 'rgb(127,184,55)',  offCol: 'rgb(19,172,92)',   onCol: 'rgb(0,59,7)' },
  93.                 { name: 'Black on yellow',  className: 'blackYellow', bkCol: 'rgb(210,244,36)',  offCol: 'rgb(194,236,30)',   onCol: 'rgb(116,133,39)' },
  94.                 { name: 'Red on red',  className: 'redRed', bkCol: '#78222f',  offCol: '#87233f',   onCol: '#ff3c6a' },
  95.                 { name: 'Lcd calculator', className: 'lcdCalc', bkCol: 'rgb(199,220,203)', offCol: 'rgb(189,210,193)', onCol: 'rgb(14,20,18)' }
  96.             ];
  97.            
  98. var outputTypes = [
  99.                     {name: "Binary", computeMethod: computeBinaryOutput},
  100.                     {name: "Decimal", computeMethod: function(){computeDecimalOutput(false);} },
  101.                     {name: "Hexadecimal", computeMethod: function(){computeDecimalOutput(true);} }             
  102.                 ];
  103.  
  104. // it's actually 5x8. Each char has 5 bytes of data. Each byte applies to a column, rather than a row. Columns are scanned
  105. // left to right
  106. // font data is taken from the 'glcdfont.c' file, as found in the ADAfruit_GFX library for Arduino.
  107. // Example for char #97 - lower case 'a' (glyphs are stored rotated 90° cw)
  108. // 0x20, 0x54, 0x54, 0x78, 0x40
  109. // 00100000,        ..x.....
  110. // 01010100,        .x.x.x..
  111. // 01010100,        .x.x.x..
  112. // 01111000,        .xxxx...
  113. // 01000000     .x......
  114. var font5x7 = Array(
  115.    0x00, 0x00, 0x00, 0x00, 0x00,   0x3E, 0x5B, 0x4F, 0x5B, 0x3E,   0x3E, 0x6B, 0x4F, 0x6B, 0x3E,   0x1C, 0x3E, 0x7C, 0x3E, 0x1C,
  116.    0x18, 0x3C, 0x7E, 0x3C, 0x18,   0x1C, 0x57, 0x7D, 0x57, 0x1C,   0x1C, 0x5E, 0x7F, 0x5E, 0x1C,   0x00, 0x18, 0x3C, 0x18, 0x00,
  117.    0xFF, 0xE7, 0xC3, 0xE7, 0xFF,   0x00, 0x18, 0x24, 0x18, 0x00,   0xFF, 0xE7, 0xDB, 0xE7, 0xFF,   0x30, 0x48, 0x3A, 0x06, 0x0E,
  118.    0x26, 0x29, 0x79, 0x29, 0x26,   0x40, 0x7F, 0x05, 0x05, 0x07,   0x40, 0x7F, 0x05, 0x25, 0x3F,   0x5A, 0x3C, 0xE7, 0x3C, 0x5A,
  119.    0x7F, 0x3E, 0x1C, 0x1C, 0x08,   0x08, 0x1C, 0x1C, 0x3E, 0x7F,   0x14, 0x22, 0x7F, 0x22, 0x14,   0x5F, 0x5F, 0x00, 0x5F, 0x5F,
  120.    0x06, 0x09, 0x7F, 0x01, 0x7F,   0x00, 0x66, 0x89, 0x95, 0x6A,   0x60, 0x60, 0x60, 0x60, 0x60,   0x94, 0xA2, 0xFF, 0xA2, 0x94,
  121.    0x08, 0x04, 0x7E, 0x04, 0x08,   0x10, 0x20, 0x7E, 0x20, 0x10,   0x08, 0x08, 0x2A, 0x1C, 0x08,   0x08, 0x1C, 0x2A, 0x08, 0x08,
  122.    0x1E, 0x10, 0x10, 0x10, 0x10,   0x0C, 0x1E, 0x0C, 0x1E, 0x0C,   0x30, 0x38, 0x3E, 0x38, 0x30,   0x06, 0x0E, 0x3E, 0x0E, 0x06,
  123.    0x00, 0x00, 0x00, 0x00, 0x00,   0x00, 0x00, 0x5F, 0x00, 0x00,   0x00, 0x07, 0x00, 0x07, 0x00,   0x14, 0x7F, 0x14, 0x7F, 0x14,
  124.     0x24, 0x2A, 0x7F, 0x2A, 0x12,   0x23, 0x13, 0x08, 0x64, 0x62,   0x36, 0x49, 0x56, 0x20, 0x50,   0x00, 0x08, 0x07, 0x03, 0x00,
  125.     0x00, 0x1C, 0x22, 0x41, 0x00,   0x00, 0x41, 0x22, 0x1C, 0x00,   0x2A, 0x1C, 0x7F, 0x1C, 0x2A,   0x08, 0x08, 0x3E, 0x08, 0x08,
  126.     0x00, 0x80, 0x70, 0x30, 0x00,   0x08, 0x08, 0x08, 0x08, 0x08,   0x00, 0x00, 0x60, 0x60, 0x00,   0x20, 0x10, 0x08, 0x04, 0x02,
  127.     0x3E, 0x51, 0x49, 0x45, 0x3E,   0x00, 0x42, 0x7F, 0x40, 0x00,   0x72, 0x49, 0x49, 0x49, 0x46,   0x21, 0x41, 0x49, 0x4D, 0x33,
  128.     0x18, 0x14, 0x12, 0x7F, 0x10,   0x27, 0x45, 0x45, 0x45, 0x39,   0x3C, 0x4A, 0x49, 0x49, 0x31,   0x41, 0x21, 0x11, 0x09, 0x07,
  129.     0x36, 0x49, 0x49, 0x49, 0x36,   0x46, 0x49, 0x49, 0x29, 0x1E,   0x00, 0x00, 0x14, 0x00, 0x00,   0x00, 0x40, 0x34, 0x00, 0x00,
  130.     0x00, 0x08, 0x14, 0x22, 0x41,   0x14, 0x14, 0x14, 0x14, 0x14,   0x00, 0x41, 0x22, 0x14, 0x08,   0x02, 0x01, 0x59, 0x09, 0x06,
  131.     0x3E, 0x41, 0x5D, 0x59, 0x4E,   0x7C, 0x12, 0x11, 0x12, 0x7C,   0x7F, 0x49, 0x49, 0x49, 0x36,   0x3E, 0x41, 0x41, 0x41, 0x22,
  132.     0x7F, 0x41, 0x41, 0x41, 0x3E,   0x7F, 0x49, 0x49, 0x49, 0x41,   0x7F, 0x09, 0x09, 0x09, 0x01,   0x3E, 0x41, 0x41, 0x51, 0x73,
  133.     0x7F, 0x08, 0x08, 0x08, 0x7F,   0x00, 0x41, 0x7F, 0x41, 0x00,   0x20, 0x40, 0x41, 0x3F, 0x01,   0x7F, 0x08, 0x14, 0x22, 0x41,
  134.     0x7F, 0x40, 0x40, 0x40, 0x40,   0x7F, 0x02, 0x1C, 0x02, 0x7F,   0x7F, 0x04, 0x08, 0x10, 0x7F,   0x3E, 0x41, 0x41, 0x41, 0x3E,
  135.     0x7F, 0x09, 0x09, 0x09, 0x06,   0x3E, 0x41, 0x51, 0x21, 0x5E,   0x7F, 0x09, 0x19, 0x29, 0x46,   0x26, 0x49, 0x49, 0x49, 0x32,
  136.     0x03, 0x01, 0x7F, 0x01, 0x03,   0x3F, 0x40, 0x40, 0x40, 0x3F,   0x1F, 0x20, 0x40, 0x20, 0x1F,   0x3F, 0x40, 0x38, 0x40, 0x3F,
  137.     0x63, 0x14, 0x08, 0x14, 0x63,   0x03, 0x04, 0x78, 0x04, 0x03,   0x61, 0x59, 0x49, 0x4D, 0x43,   0x00, 0x7F, 0x41, 0x41, 0x41,
  138.     0x02, 0x04, 0x08, 0x10, 0x20,   0x00, 0x41, 0x41, 0x41, 0x7F,   0x04, 0x02, 0x01, 0x02, 0x04,   0x40, 0x40, 0x40, 0x40, 0x40,
  139.     0x00, 0x03, 0x07, 0x08, 0x00,   0x20, 0x54, 0x54, 0x78, 0x40,   0x7F, 0x28, 0x44, 0x44, 0x38,   0x38, 0x44, 0x44, 0x44, 0x28,
  140.     0x38, 0x44, 0x44, 0x28, 0x7F,   0x38, 0x54, 0x54, 0x54, 0x18,   0x00, 0x08, 0x7E, 0x09, 0x02,   0x18, 0xA4, 0xA4, 0x9C, 0x78,
  141.     0x7F, 0x08, 0x04, 0x04, 0x78,   0x00, 0x44, 0x7D, 0x40, 0x00,   0x20, 0x40, 0x40, 0x3D, 0x00,   0x7F, 0x10, 0x28, 0x44, 0x00,
  142.     0x00, 0x41, 0x7F, 0x40, 0x00,   0x7C, 0x04, 0x78, 0x04, 0x78,   0x7C, 0x08, 0x04, 0x04, 0x78,   0x38, 0x44, 0x44, 0x44, 0x38,
  143.     0xFC, 0x18, 0x24, 0x24, 0x18,   0x18, 0x24, 0x24, 0x18, 0xFC,   0x7C, 0x08, 0x04, 0x04, 0x08,   0x48, 0x54, 0x54, 0x54, 0x24,
  144.     0x04, 0x04, 0x3F, 0x44, 0x24,   0x3C, 0x40, 0x40, 0x20, 0x7C,   0x1C, 0x20, 0x40, 0x20, 0x1C,   0x3C, 0x40, 0x30, 0x40, 0x3C,
  145.     0x44, 0x28, 0x10, 0x28, 0x44,   0x4C, 0x90, 0x90, 0x90, 0x7C,   0x44, 0x64, 0x54, 0x4C, 0x44,   0x00, 0x08, 0x36, 0x41, 0x00,
  146.     0x00, 0x00, 0x77, 0x00, 0x00,   0x00, 0x41, 0x36, 0x08, 0x00,   0x02, 0x01, 0x02, 0x04, 0x02,   0x3C, 0x26, 0x23, 0x26, 0x3C,
  147.     0x1E, 0xA1, 0xA1, 0x61, 0x12,   0x3A, 0x40, 0x40, 0x20, 0x7A,   0x38, 0x54, 0x54, 0x55, 0x59,   0x21, 0x55, 0x55, 0x79, 0x41,
  148.     0x21, 0x54, 0x54, 0x78, 0x41,   0x21, 0x55, 0x54, 0x78, 0x40,   0x20, 0x54, 0x55, 0x79, 0x40,   0x0C, 0x1E, 0x52, 0x72, 0x12,
  149.     0x39, 0x55, 0x55, 0x55, 0x59,   0x39, 0x54, 0x54, 0x54, 0x59,   0x39, 0x55, 0x54, 0x54, 0x58,   0x00, 0x00, 0x45, 0x7C, 0x41,
  150.     0x00, 0x02, 0x45, 0x7D, 0x42,   0x00, 0x01, 0x45, 0x7C, 0x40,   0xF0, 0x29, 0x24, 0x29, 0xF0,   0xF0, 0x28, 0x25, 0x28, 0xF0,
  151.     0x7C, 0x54, 0x55, 0x45, 0x00,   0x20, 0x54, 0x54, 0x7C, 0x54,   0x7C, 0x0A, 0x09, 0x7F, 0x49,   0x32, 0x49, 0x49, 0x49, 0x32,
  152.     0x32, 0x48, 0x48, 0x48, 0x32,   0x32, 0x4A, 0x48, 0x48, 0x30,   0x3A, 0x41, 0x41, 0x21, 0x7A,   0x3A, 0x42, 0x40, 0x20, 0x78,
  153.     0x00, 0x9D, 0xA0, 0xA0, 0x7D,   0x39, 0x44, 0x44, 0x44, 0x39,   0x3D, 0x40, 0x40, 0x40, 0x3D,   0x3C, 0x24, 0xFF, 0x24, 0x24,
  154.     0x48, 0x7E, 0x49, 0x43, 0x66,   0x2B, 0x2F, 0xFC, 0x2F, 0x2B,   0xFF, 0x09, 0x29, 0xF6, 0x20,   0xC0, 0x88, 0x7E, 0x09, 0x03,
  155.     0x20, 0x54, 0x54, 0x79, 0x41,   0x00, 0x00, 0x44, 0x7D, 0x41,   0x30, 0x48, 0x48, 0x4A, 0x32,   0x38, 0x40, 0x40, 0x22, 0x7A,
  156.     0x00, 0x7A, 0x0A, 0x0A, 0x72,   0x7D, 0x0D, 0x19, 0x31, 0x7D,   0x26, 0x29, 0x29, 0x2F, 0x28,   0x26, 0x29, 0x29, 0x29, 0x26,
  157.     0x30, 0x48, 0x4D, 0x40, 0x20,   0x38, 0x08, 0x08, 0x08, 0x08,   0x08, 0x08, 0x08, 0x08, 0x38,   0x2F, 0x10, 0xC8, 0xAC, 0xBA,
  158.     0x2F, 0x10, 0x28, 0x34, 0xFA,   0x00, 0x00, 0x7B, 0x00, 0x00,   0x08, 0x14, 0x2A, 0x14, 0x22,   0x22, 0x14, 0x2A, 0x14, 0x08,
  159.     0xAA, 0x00, 0x55, 0x00, 0xAA,   0xAA, 0x55, 0xAA, 0x55, 0xAA,   0x00, 0x00, 0x00, 0xFF, 0x00,   0x10, 0x10, 0x10, 0xFF, 0x00,
  160.     0x14, 0x14, 0x14, 0xFF, 0x00,   0x10, 0x10, 0xFF, 0x00, 0xFF,   0x10, 0x10, 0xF0, 0x10, 0xF0,   0x14, 0x14, 0x14, 0xFC, 0x00,
  161.     0x14, 0x14, 0xF7, 0x00, 0xFF,   0x00, 0x00, 0xFF, 0x00, 0xFF,   0x14, 0x14, 0xF4, 0x04, 0xFC,   0x14, 0x14, 0x17, 0x10, 0x1F,
  162.     0x10, 0x10, 0x1F, 0x10, 0x1F,   0x14, 0x14, 0x14, 0x1F, 0x00,   0x10, 0x10, 0x10, 0xF0, 0x00,   0x00, 0x00, 0x00, 0x1F, 0x10,
  163.     0x10, 0x10, 0x10, 0x1F, 0x10,   0x10, 0x10, 0x10, 0xF0, 0x10,   0x00, 0x00, 0x00, 0xFF, 0x10,   0x10, 0x10, 0x10, 0x10, 0x10,
  164.     0x10, 0x10, 0x10, 0xFF, 0x10,   0x00, 0x00, 0x00, 0xFF, 0x14,   0x00, 0x00, 0xFF, 0x00, 0xFF,   0x00, 0x00, 0x1F, 0x10, 0x17,
  165.     0x00, 0x00, 0xFC, 0x04, 0xF4,   0x14, 0x14, 0x17, 0x10, 0x17,   0x14, 0x14, 0xF4, 0x04, 0xF4,   0x00, 0x00, 0xFF, 0x00, 0xF7,
  166.     0x14, 0x14, 0x14, 0x14, 0x14,   0x14, 0x14, 0xF7, 0x00, 0xF7,   0x14, 0x14, 0x14, 0x17, 0x14,   0x10, 0x10, 0x1F, 0x10, 0x1F,
  167.     0x14, 0x14, 0x14, 0xF4, 0x14,   0x10, 0x10, 0xF0, 0x10, 0xF0,   0x00, 0x00, 0x1F, 0x10, 0x1F,   0x00, 0x00, 0x00, 0x1F, 0x14,
  168.     0x00, 0x00, 0x00, 0xFC, 0x14,   0x00, 0x00, 0xF0, 0x10, 0xF0,   0x10, 0x10, 0xFF, 0x10, 0xFF,   0x14, 0x14, 0x14, 0xFF, 0x14,
  169.     0x10, 0x10, 0x10, 0x1F, 0x00,   0x00, 0x00, 0x00, 0xF0, 0x10,   0xFF, 0xFF, 0xFF, 0xFF, 0xFF,   0xF0, 0xF0, 0xF0, 0xF0, 0xF0,
  170.     0xFF, 0xFF, 0xFF, 0x00, 0x00,   0x00, 0x00, 0x00, 0xFF, 0xFF,   0x0F, 0x0F, 0x0F, 0x0F, 0x0F,   0x38, 0x44, 0x44, 0x38, 0x44,
  171.     0x7C, 0x2A, 0x2A, 0x3E, 0x14,   0x7E, 0x02, 0x02, 0x06, 0x06,   0x02, 0x7E, 0x02, 0x7E, 0x02,   0x63, 0x55, 0x49, 0x41, 0x63,
  172.     0x38, 0x44, 0x44, 0x3C, 0x04,   0x40, 0x7E, 0x20, 0x1E, 0x20,   0x06, 0x02, 0x7E, 0x02, 0x02,   0x99, 0xA5, 0xE7, 0xA5, 0x99,
  173.     0x1C, 0x2A, 0x49, 0x2A, 0x1C,   0x4C, 0x72, 0x01, 0x72, 0x4C,   0x30, 0x4A, 0x4D, 0x4D, 0x30,   0x30, 0x48, 0x78, 0x48, 0x30,
  174.     0xBC, 0x62, 0x5A, 0x46, 0x3D,   0x3E, 0x49, 0x49, 0x49, 0x00,   0x7E, 0x01, 0x01, 0x01, 0x7E,   0x2A, 0x2A, 0x2A, 0x2A, 0x2A,
  175.     0x44, 0x44, 0x5F, 0x44, 0x44,   0x40, 0x51, 0x4A, 0x44, 0x40,   0x40, 0x44, 0x4A, 0x51, 0x40,   0x00, 0x00, 0xFF, 0x01, 0x03,
  176.     0xE0, 0x80, 0xFF, 0x00, 0x00,   0x08, 0x08, 0x6B, 0x6B, 0x08,   0x36, 0x12, 0x36, 0x24, 0x36,   0x06, 0x0F, 0x09, 0x0F, 0x06,
  177.     0x00, 0x00, 0x18, 0x18, 0x00,   0x00, 0x00, 0x10, 0x10, 0x00,   0x30, 0x40, 0xFF, 0x01, 0x01,   0x00, 0x1F, 0x01, 0x01, 0x1E,
  178.     0x00, 0x19, 0x1D, 0x17, 0x12,   0x00, 0x3C, 0x3C, 0x3C, 0x3C,   0x00, 0x00, 0x00, 0x00, 0x00,   0x00, 0x00, 0x00, 0x00, 0x00
  179. );
  180.                
  181. // make a table with the given number of cols, rows and id.
  182. // an example cellCallbackObjArray is
  183. //  [
  184. //      {eventType: 'mousedown', callbackFunc: mouseDownHandlerFuncName },
  185. //      {eventType: 'mouseup', callbackFunc: mouseUpHandlerFuncName }
  186. //  ];
  187. function makeTable(nCols, nRows, idTxt, cellCallbackObjArray)
  188. {
  189.     var x, y, curRow, curCell, tbl = newEl('table');
  190.     tbl.setAttribute('id', idTxt);
  191.     for (y=0; y<nRows; y++)
  192.     {
  193.         curRow = tbl.insertRow();
  194.         for (x=0; x<nCols; x++)
  195.         {
  196.             curCell = curRow.insertCell();
  197.             if (cellCallbackObjArray != undefined)
  198.             {
  199.                 var i, n = cellCallbackObjArray.length;
  200.                 for (i=0; i<n; i++)
  201.                     curCell.addEventListener(cellCallbackObjArray[i].eventType, cellCallbackObjArray[i].callbackFunc, false);
  202.             }
  203.         }
  204.     }
  205.     return tbl;
  206. }
  208. // event handlers and state variable used for drawing
  209. var btnIsDown = false;
  210. function onCellClick(e){toggleClass(this, 'active'); computeOutput();}
  211. function onCellEnter(e){ if (btnIsDown == true) { toggleClass(this, "active");  computeOutput();} }
  212. function onMouseDown(evt) { btnIsDown = true; }
  213. function onMouseUp(evt) { btnIsDown = false; }
  215. // set, clear or toggle all drawing cells
  216. function setCells(setActive)
  217. {
  218.     var cells = document.querySelectorAll('#charHolder td');
  219.     var i, n=cells.length;
  220.     for (i=0;i<n;i++)
  221.     {
  222.         if (setActive == true)
  223.             cells[i].className = " active";
  224.         else
  225.             cells[i].className = cells[i].className.replace(" active", "");
  226.     }
  227.     computeOutput();
  228. }
  230. function onToggleCells()
  231. {
  232.     var cells = document.querySelectorAll('#charHolder td');
  233.     var i, n=cells.length;
  234.     for (i=0;i<n;i++)
  235.         toggleClass(cells[i], 'active');
  236.     computeOutput();
  237. }
  239. // gets the currently drawn glyph and returns 5 bytes in the format of the above font
  240. function encodeToFontFormat()
  241. {
  242.     var x, y, nRows=8, nCols=5;
  243.     var result = [];        // array of 5 bytes as return val
  244.     var tbl = byId('char');
  245.    
  246.     for (x=0; x<nCols; x++)
  247.     {
  248.         curVertLine = 0;
  249.         for (y=0; y<nRows; y++)
  250.         {
  251.             curVertLine >>= 1;
  252.             if (tbl.rows[y].cells[x].className.indexOf('active') != -1)
  253.                 curVertLine |= 0x80;
  254.         }
  255.         result[x] = curVertLine;
  256.     }
  257.     return result;
  258. }
  259.  
  260. // gets the 5 bytes of data for the currently selected character, and 'draws' them to the drawing area.
  261. function decodeToCanvasFormat()
  262. {
  263.     setCells(false);
  264.     var tbl=byId('char');
  265.     var nRows=8, nCols=5, curRow, curCol;
  266.     var curVertLine;
  267.     for (curCol=0; curCol<nCols; curCol++)
  268.     {
  269.         curVertLine = font5x7[ curCharIndex*5 + curCol ];
  270.         for (curRow=0; curRow<nRows; curRow++)
  271.         {
  272.             if (curVertLine & 0x01)
  273.                 tbl.rows[curRow].cells[curCol].className += ' active';
  274.             curVertLine >>= 1;
  275.         }
  276.     }
  277.     computeOutput();
  278. }
  279.  
  280. function saveCurCharToFont()
  281. {
  282.     var newData = encodeToFontFormat();
  283.     var pos = curCharIndex * 5;
  284.     var i, n=5;
  285.     for (i=0; i<n; i++)
  286.         font5x7[pos+i] = newData[i];
  287.     drawCanvasText();
  288. }
  289.  
  290. function onThemeChanged()
  291. {
  292.     themeIndex = this.value;
  293.     updateTheme();
  294. }
  295.  
  296. function updateTheme()
  297. {
  298.     byId('charHolder').className = themes[themeIndex].className;
  299.     byId('lcdPanel').className = themes[themeIndex].className;
  300.     drawCanvasText();
  301. }
  302.  
  303. function onOutputFormatChanged()
  304. {
  305.     outputFormatIndex = parseInt(this.value,10);
  306.     computeOutput();
  307. }
  308.  
  309. function computeOutput()
  310. {
  311.     outputTypes[outputFormatIndex].computeMethod();
  312. }
  313.  
  314. function computeDecimalOutput(wantHex)
  315. {
  316.     var curByte=0, tbl, curRow, curCell, nRows, nCells;
  317.     var curStr = "byte character[8] = {\n\t";
  318.    
  319.     tbl = byId('char');
  320.     nRows = tbl.rows.length;
  321.     for (curRow=0; curRow<nRows; curRow++)
  322.     {
  323.         curByte = 0;
  324.         nCells = tbl.rows[curRow].cells.length;
  325.         for (curCell = 0; curCell<nCells; curCell++)
  326.         {
  327.             curByte <<= 1;
  328.             if (tbl.rows[curRow].cells[curCell].className.indexOf('active') != -1)
  329.                 curByte |= 1;
  330.         }
  331.         if (curRow != 0)
  332.             curStr += ",\n\t";
  333.         if (wantHex == true)
  334.             curStr += "0x" + curByte.toString(16).toUpperCase();
  335.         else
  336.             curStr += curByte;
  337.     }
  338.     curStr += "\n};"
  339.     byId('result').value = curStr;
  340. }
  341.  
  342. function computeBinaryOutput()
  343. {
  344.     var curByte=0, tbl, curRow, curCell, nRows, nCells, curLineStr;
  345.     var curStr = "byte character[8] = {\n";
  346.    
  347.     tbl = byId('char');
  348.     nRows = tbl.rows.length;
  349.     for (curRow=0; curRow<nRows; curRow++)
  350.     {
  351.         curByte = 0;
  352.         nCells = tbl.rows[curRow].cells.length;
  353.         curLineStr = "\t0b";
  354.        
  355.         for (curCell = 0; curCell<nCells; curCell++)
  356.         {
  357.             curByte <<= 1;
  358.             if (tbl.rows[curRow].cells[curCell].className.indexOf('active') != -1)
  359.                 curLineStr += '1';
  360.             else
  361.                 curLineStr += '0';
  362.         }
  363.         if (curRow != nRows-1)
  364.             curLineStr += ",";
  365.         curStr += curLineStr + "\n";
  366.     }
  367.     curStr += "};";
  368.     byId('result').value = curStr;
  369. }
  370.  
  371. function drawCanvasText()
  372. {
  373.     var x;
  374.     for (x=0; x<16; x++)
  375.     {
  376.         drawCharOnCanvas(x, 0, lcdData[x + 0*16], false);
  377.         drawCharOnCanvas(x, 1, lcdData[x + 1*16], false);
  378.     }
  379. }
  380.  
  381. function drawCharOnCanvas(xPosIndex, yPosIndex, targetChar, isNegative)
  382. {
  383.     var m_margin = 8, m_cellSize = 2, m_cellPadding = 1;
  384.     var col, row, vertLine, top, left, xOrigin, yOrigin, curCol, charCode;
  385.     var can = byId('lcdPanel'), ctx=can.getContext('2d');
  386.    
  387.     xOrigin = m_margin + (xPosIndex * ((m_cellPadding+m_cellSize)*5)) + (xPosIndex * m_cellSize);
  388.    yOrigin = m_margin + yPosIndex * (((m_cellPadding+m_cellSize)*9)-1);
  389.    
  390.     charCode = targetChar.charCodeAt(0);
  391.    for (col=0; col<5; col++)
  392.    {
  393.        vertLine = font5x7[charCode*5 + col];
  394.        left = xOrigin + col*(m_cellPadding+m_cellSize);
  395.        for (row=0; row<8; row++)
  396.        {
  397.            top = yOrigin + row*(m_cellPadding+m_cellSize);
  398.             if ((vertLine&0x01) ^ (isNegative))
  399.                 curCol = themes[themeIndex].onCol;
  400.             else
  401.                 curCol = themes[themeIndex].offCol;
  402.             ctx.fillStyle = curCol;
  403.             ctx.strokeStyle = curCol;
  404.             ctx.fillRect(left,top,m_cellSize,m_cellSize);
  405.             vertLine >>= 1;
  406.         }
  407.     }
  408. }
  409.  
  410. // to allow for easy addition of colour themes, all required rules related to theming are created dynamically at page init
  411. // also reduces page size. 6 themes take ~1441 bytes. This routine requires about 970bytes for a more-or-less unlimited # of themes
  412. function createThemeCSS()
  413. {
  414.     var str1 = "#charHolder";
  415.     var str2 = "td";
  416.     var str3 = ".active";
  417.     var str4 = "#lcdPanel."
  418.     var str5 = "{background: ";
  419.     var str6 = "}";
  420.  
  421.     var i, n = themes.length;
  422.     var styleEl = newEl('style'), curThemeRules;
  423.    
  424.     for (i=0; i<n; i++)
  425.     {
  426.         // make comment labelling theme
  427.         curThemeRules = "/* " + themes[i].name + " colour theme */" + "\n";
  428.  
  429.         // make bkColour rule
  430.         curThemeRules += str1 + "." + themes[i].className + str5 + themes[i].bkCol + "}\n";
  431.  
  432.         // make offColour rule
  433.         curThemeRules += str1 + "." + themes[i].className + " " + str2 + str5 + themes[i].offCol + "}\n";
  434.  
  435.         // make onColour rule
  436.         curThemeRules += str1 + "." + themes[i].className + " " + str2 + str3 + str5 + themes[i].onCol + "}\n";
  437.        
  438.         // make lcdPanel bkCol rule
  439.         curThemeRules += str4 + themes[i].className + str5 + themes[i].bkCol + "}\n";
  440.        
  441.         styleEl.innerHTML += curThemeRules;
  442.     }
  443.     document.head.appendChild(styleEl);
  444. }
  445.  
  446. function onPreviewInputChanged()
  447. {
  448.     var i, n, str1 = byId('previewInput').value, str2 = byId('previewInput2').value;
  449.  
  450.     for (i=0; i<32; i++)
  451.         lcdData[i] = ' ';
  452.        
  453.     n = str1.length;
  454.     for (i=0; i<n; i++)
  455.         lcdData[i + 0*16] = str1[i];
  456.  
  457.     n = str2.length;
  458.     for (i=0; i<n; i++)
  459.         lcdData[i + 1*16] = str2[i];
  460.  
  461.     drawCanvasText();
  462. }
  463. </script>
  464. <style>
  465. #pageLayoutContainer{background-color: #888; border:solid 2px #555;}
  466. #charHolder{ padding:12px;}
  467. #char td { height: 1em; width: 1em;}
  468. #lcdPanel{border: solid 1px black; }
  469. #pageLayoutContainer label{ font-weight: bold; font-size: 0.9em; }
  470. </style>
  471. </head>
  472. <body>
  473. <table id='pageLayoutContainer'>
  474.     <tbody align='center'>
  475.         <tr>
  476.             <td>
  477.                 <div id='charHolder'></div>
  478.                 <div>
  479.                     <button onclick='setCells(false)'>Clear</button>
  480.                     <button onclick='setCells(true)'>Fill</button>
  481.                     <button onclick='onToggleCells()'>Invert</button>
  482.                 </div>
  483.                 <select id='charSelector' onchange='curCharIndex = this.value; decodeToCanvasFormat();'></select>
  484.                 <button id='saveBtn' onclick='saveCurCharToFont();'>Save</button>
  485.             </td>
  486.             <td style='vertical-align: top;'><textarea id='result' rows='11' cols='20'></textarea></td>
  487.         </tr>
  488.         <tr>
  489.             <td colspan='2'>
  490.                 <hr>
  491.                 <label>Theme<select id='themeSelector'></select></label>
  492.                 <label>Output Format<select id='outputFormatSelector'></select></label>
  493.                 <hr>
  494.             </td>
  495.         </tr>
  496.         <tr><td colspan='2'><canvas id='lcdPanel'width='285' height='65'></canvas></td></tr>
  497.         <tr>
  498.             <td colspan='2'>
  499.                 <label>Row 0: <input type='text' id='previewInput' maxlength='16' size='16' value='0123456789ABCDEF' oninput='onPreviewInputChanged()'/></label><br>
  500.                 <label>Row 1: <input type='text' id='previewInput2' maxlength='16' size='16' value='0123456789ABCDEF' oninput='onPreviewInputChanged()'/></label>
  501.             </td>
  502.         </tr>
  503.     </tbody>
  504. </table>
  505. </body>
  506. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!