-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-min.html
5 lines (5 loc) · 9.97 KB
/
index-min.html
1
2
3
4
5
<!DOCTYPE html><html lang='EN'><html><head><title>LCD test view</title><meta name="viewport" content="width=device-width,initial-scale=0.7,user-scalable=no"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel='stylesheet' href='css/styles-min.css'><link rel='stylesheet' href='css/ohsnap-min.css'><link rel='stylesheet' href='css/prism.css'><script src="javascript/char-lcd-min.js"></script><script src="javascript/prism-min.js"></script><script src="javascript/test-min.js"></script><link rel="shortcut icon" type="image/icon" href="img/favicon.ico" id="favicon" /></head><body><div id="ohsnap"></div><h1>LCD test view</h1><div class='menu c-flex' id='menu'><input type='radio' name='m_about' checked><label for='m_about' class='button' onclick="selMenu('about')">About</label><input type='radio' name='m_cps'><label for='m_cps' class='button' onclick="selMenu('cps')">CPs</label><input type='radio' name='m_custom_symbol'><label for='m_custom_symbol' class='button' onclick="selMenu('custom_symbol')">Custom</label><input type='radio' name='m_config'><label for='m_config' class='button' onclick="selMenu('config')">Config</label><input type='radio' name='m_tests'><label for='m_tests' class='button' onclick="selMenu('tests')">Test</label></div><div id="content"><div id="about" class="c_cont"><div style="display:flex;padding:6px"><span class="r"><h2>About this tool site</h2></span></div><div class="card" style="padding:6px;text-align: left;"><div>The HD44780 is a controller for character-based liquid crystal displays (LCDs). In addition to the standard pre-programmed characters, it allows you to define up to eight of your own graphic patterns on a 5x8 (or sometimes 5x7 - not released on it) grid. This page lets you experiment with various patterns in symbols generator and shows the code that need to be programmed into the controller to get those patterns on to the display. Also you can emulate views of LCD panels with different size, colors and code pages.</div><div>Source code is open under MIT license. See on <a href="https://github.com/drovosekov/" target="_blank">GitHub</a></div><div>Some <a href="https://github.com/drovosekov/LCD-test-views/wiki" target="_blank">Wiki and how-to info about HD44780</a> controllers. </div></div></div><div id="cps" style="display:none;" class="c_cont"><div style="display:flex;padding:6px"><span class="r"><h2>Full LCD codepage</h2></span><div><select id="full_view_cp" onchange="selFullViewCP();"><option value="eu">English</option><option value="jp">Japan</option><option value="ru">Russian</option><option value="patterns">Patterns</option></select></div> <div><button onclick='pastPanelConfig("global")' title="Past panel config">▼</button><button onclick='copyPanelConfig("global")' title="Copy panel config">▲</button></div></div><div class="card"><div style="display: flex;"><span id='lcd0'></span><span id='lcd1'></span></div><div style="display: flex;"><span id='lcdv'></span><span id='full_view_lcd' onclick="selSymbol('cps')"></span></div></div></div><div id="custom_symbol" style="display:none;" class="c_cont"><div style="display:flex;padding:6px"><span class="r"><h3>Custom symbol generator</h3></span></div><div class="card"><div><span class="r"><div id="custom_symbols_panel" onclick="selSymbol('custom_sym')"></div></span><span><button onclick='clearCustomPanel()' title="Clear all custom symbols">X</button></span><span class="l">Selected: <select id="currentSymbolIndex" onchange="selSymbol('selCustomSymbolIndex')"><option value="0">1</option><option value="1">2</option><option value="2">3</option><option value="3">4</option><option value="4">5</option><option value="5">6</option><option value="6">7</option><option value="7">8</option></select><button onclick='pastPanelConfig("CustomSymbol")' title="Past symbol config">▼</button><button onclick='copyPanelConfig("CustomSymbol")' title="Copy symbol config">▲</button></span></div><div><span class="r"><div id="custom_symb_matrix"></div></span><span class="l"><div><button class="button" onclick='allOffCustomSymb()'>All off</button></div><div><button class="button" onclick='allOnCustomSymb()'>All on</button></div><div><button class="button" onclick='invertCustomSymb()'>Invert</button></div><div><div class='t-cont c-flex'><input type='checkbox' id='lcd_bus' class='ios-toggle' onchange="updateCustomSymb()" /><label for='lcd_bus' class='chb-label' data-off='I2C' data-on='Parallel'></label></div></div><div><div class='t-cont c-flex'><input type='checkbox' id='code_gen' class='ios-toggle' onchange="updateCustomSymb()" /><label for='code_gen' class='chb-label' data-off='Data only' data-on='Full code'></label></div></div><div><select id="symbols_data_type" onchange="updateCustomSymb()"><option value="bin">Binary</option><option value="dec">Decimal</option><option value="hex">Hex</option></select></div></span></div></div><pre class="hidden" id="code_arduino_tempalte">{parallel_bus}#include <LiquidCrystal.h> //parallel bus
const int rs=12, en=11, d4=5, d5=4, d6=3, d7=2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);{/parallel_bus}{I2C_bus}#include <LiquidCrystal_I2C.h> //1-wire bus--------->address LiquidCrystal_I2C lcd(0x3F,{columns},{rows});{/I2C_bus}
const uint8_t char_map[8][8] PROGMEM={{customCharArrays} {{symbol_data}},{/customCharArrays}} void setup(){ {I2C_bus}lcd.init();{/I2C_bus}{parallel_bus}lcd.begin({columns},{rows});{/parallel_bus} for (uint8_t i=0; i < 8; i++){ lcd.createChar(i, (char*)char_map[i]);} lcd.home(); for (uint8_t i=0; i < 8; i++){ lcd.write(i);}} void loop(){}
</pre><div class="card"><pre class="hidden" id="div_code"><code id="custom_sym_code" class="language-cpp"></code></pre></div></div><div id='config' style="display:none;" class="c_cont"><div style="display:flex;padding:6px"><h1>Global LCD panel settings</h1><span><button onclick='pastPanelConfig("global")' title="Past global config">▼</button><button onclick='copyPanelConfig("global")' title="Copy global config">▲</button></span></div><div id="panel_size" class="card"><h3>Panel size</h3><div><span class="l">Standart types:</span><span class="r"><select id="lcd_sizes" onchange="selStndLCDSize(this.value)"><option value="---" disabled selected="selected">Custom</option><option value="1x8x3">1x8</option><option value="2x8x3">2x8</option><option value="1x16x3">1x16</option><option value="2x16x3">2x16</option><option value="4x16x3">4x16</option><option value="1x20x3">1x20</option><option value="2x20x3">2x20</option><option value="4x20x3">4x20</option><option value="2x24x2">2x24</option><option value="2x40x2">2x40</option><option value="4x40x2">4x40</option></select></span></div><div><span class="l">Rows:</span><span class="r"><input type="number" id="rows" value="2" min="1" max="8"></span></div><div><span class="l">Columns:</span><span class="r"><input type="number" id="columns" value="16" min="8" max="40"></span></div><div><div class='t-cont c-flex'><input type='checkbox' id='lcd_border' class='ios-toggle' /><label for='lcd_border' class='chb-label' data-off='Hide border' data-on='Show border'></label></div></div><div><div class='t-cont c-flex'><input type='checkbox' id='lcd_large' class='ios-toggle' /><label for='lcd_large' class='chb-label' data-off='Standart display' data-on='Large display'></label></div></div><div><div class='t-cont c-flex'><input type='checkbox' id='show_hover_grid' class='ios-toggle' onchange="setTimeout(selFullViewCP,550)" /><label for='show_hover_grid' class='chb-label' data-off="Don't show grid" data-on='Show grid on hover'></label></div></div></div><div id="color" class="card"><h3>Colors</h3><div><span class="l">Back light:</span><span class="r"><select id="lcd_bg_color" onchange="selLCDColors()"><option value="#008">blue</option><option value="#cd2">green-yellow</option><option value="#D5D9E0">while</option><option value="#252525">black</option></select></span></div><div><span class="l">Pixels:</span><span class="r"><select id="lcd_pixel_color" onchange="selLCDColors()"><option value="#e1e1e1">white</option><option value="#fe8">yellow</option><option value="#2f17a7">blue</option><option value="#143">dark</option></select></span></div><div class="colors_box"><div class="lcd_border"><div class="lcd_green" id="colors_tmpl"><i></i><i></i><i></i><i></i><i></i></div></div></div></div><div id="pixel_size" class="card"><h3>Pixels and breaks size</h3><div><span class="l">Pixel size:</span><span class="r"><input type="number" id="px_size" value="3" min="2" max="8" onchange="selFullViewCP()">px</span></div><div><span class="l">Break size:</span><span class="r"><input type="number" id="break_size" value="1" min="1" max="5" onchange="selFullViewCP()">px</span></div></div><div class='desc'>Autosave state every 5 sec</div></div><div id='tests' style='display:none;' class="c_cont"><div style="display:flex;padding:6px"><span class="r"><h1>Test views</h1></span><span class="l"><div id="tst_custom_symbols_panel" onclick="selSymbol('tst_custom_sym')"></div></span></div><div id="panels" class="block"></div><button class="button" onclick='addPanel()'>Add panel</button><div class='desc'>Autosave state every 5 sec</div></div></div><div class='desc'>© 2023 <a href='https://github.com/drovosekov/' target='_top'>Alexander Drovosekov</a></body><div id="panel_template" class='hidden'><div><span class="r"><h2 onclick="editPanelName(this)" id="panel_name_{id}">{PanelName}</h2></span><span class="l"><button onclick='pastPanelConfig("panel", this)' title="Past panel config">▼</button><button onclick='copyPanelConfig("panel", this)' title="Copy panel config">▲</button><button onclick='collapsePanel(this)' title="Collapse panel" id="min_panel_{id}">_</button><button onclick='delPanel(this)' title="Delete panel">X</button></span></div><div class="block" id="panel_area_{id}"><div><span class="r"><div class="desc" id="panel_info_{id}">panel info</div></span><span class="rl"><textarea rows="2" cols="16" class="panel_row" id="text_{id}" onkeyup="updatePanel(this)">{text}</textarea></span></div><span class="r"></span><span class="lcd_border"><div id="panel_{id}"></div></span><span class="l"></span></div></div></html>