ThallerIT

Special Character Generator LCD 4x20

Mar 27th, 2018
335
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <title>Special Characters for LCD Display</title>
  5.     <!-- written by Martin Thaller / Vienna / Austria -->
  6.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
  7.     <script>
  8.     <!--
  9.      $(document).ready(function() {
  10.  
  11.        $('td.lcd').on('click', function(){
  12.          $(this).toggleClass('sel');
  13.          calc();
  14.        });
  15.  
  16.        calc();
  17.  
  18.      });
  19.  
  20.      function calc() {
  21.  
  22.        $('tr').each(function(){
  23.          var $id = $(this).prop('id');
  24.          var val=0;
  25.          $('#'+$id+' td.sel').each(function(){
  26.            val+= 1.0*$(this).data('val');
  27.          });
  28.          $('#'+$id+' .calc').html('0x'+(val.toString(16).length<2?'0':'')+val.toString(16));
  29.        });
  30.  
  31.        var code = new Array();
  32.  
  33.        $('.calc').each(function(){ code.push($(this).html()); });
  34.  
  35.        $('code').html(JSON.stringify(code).replace(/"/g,''));
  36.      }
  37.  
  38.     -->
  39.     </script>
  40.     <style>
  41.     <!--
  42.      body { font-family:Arial,Helvetica; font-size: 12px; }
  43.      table { border-collapse:collapse; background-color: #F1F1F1; margin: 0 0 10px 0; font-family:Arial,Helvetica; font-size: 12px; }
  44.      td { padding:0; border:1px solid #fff; }
  45.      .lcd { min-width: 16px; min-height:16px; }
  46.      .sel { background-color: #0000FF; }
  47.      .calc { min-width: 3em; text-align:right; background-color: #fff; }
  48.      fieldset { display:inline-block; }
  49.    -->
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <form>
  54.       <fieldset>
  55.         <legend>Create your character</legend>
  56.         <table>
  57. <?php
  58.  for($row=0; $row < 8; $row++) {
  59.  
  60.    echo "\n<tr id='r".$row."'>";
  61.  
  62.     for($col=4; $col > -1; $col--) {
  63.  
  64.       echo "<td class='lcd' data-val='".pow(2,$col)."'></td>";
  65.     }
  66.  
  67.     echo "<td class='calc'>0</td>";
  68.  
  69.     echo "\n</tr>";
  70.   }
  71. ?>
  72.         </table>
  73.         <input type="reset" onclick="$('.sel').removeClass('sel'); calc();" />
  74.       </fieldset>
  75.     </form>
  76.     <code></code>
  77.   </body>
  78. </html>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×