<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Számok nagyítása</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-10-12" />
      <meta name="revised" content="Tóth Péter, 12/10/2012" />
      <meta name="description" content="HTML5 - Számok nagyítása" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css">
         line{
            fill:white;
            stroke:black;
            stroke-width:2;
            }
      </style>
      <script type="text/javascript">
         <!--
         // Karakterek kódolása 7 szegmenses kijelzőre vetítve
         //   0       -
         // 3   5   |   |
         //   1       -
         // 4   6   |   |
         //   2       -
         // Amelyik helyre ki kell rajzolni a vonalat, oda 1-et írunk
         // Kiíratáskor ahová 1-et írtunk, oda rajzolunk vonalat SVG-vel
         aSzamokKod=new Array();
         aSzamokKod[0]="1011111"; // 0
         aSzamokKod[1]="0000011"; // 1
         aSzamokKod[2]="1110110"; // 2
         aSzamokKod[3]="1110011"; // 3
         aSzamokKod[4]="0101011"; // 4
         aSzamokKod[5]="1111001"; // 5
         aSzamokKod[6]="1111101"; // 6
         aSzamokKod[7]="1000011"; // 7
         aSzamokKod[8]="1111111"; // 8
         aSzamokKod[9]="1111011"; // 9

         function funcSzovegAtatlakito(){
            var iHeight=new Number(document.getElementById("idMagassag").value); // Számok megjelenített egységes magassága (számmá alakítása)
            var iWidth=new Number(document.getElementById("idSzelesseg").value); // Számok megjelenített egységes szélessége (számmá alakítása)
            var sSzoveg=document.getElementById("idSzoveg").value;             // Beolvassuk az átalakítandó szöveget
            var iLeft=5;                                                         // Megmutatja az aktuálisan kiirandó karakter bal szélének pozicióját
            var iTop=5;                                                          // Megmutatja az aktuálisan kiirandó karakter felső szélének pozicióját
            var sKiir="";                                                        // A teljes kiirás anyagának összeállítása
            for(var i=0;i<sSzoveg.length;i++)                                  // Ciklus a feldolgozandó szövegen karakterenként
               if(aSzamokKod[sSzoveg.charCodeAt(i)-48]){                       // Ellenőrzés, van-e ilyen karakter a mátrixban
                  sKod=aSzamokKod[sSzoveg.charCodeAt(i)-48];                   // Kódtábla kiolvasása és bontása
                  for(var j=0;j<sKod.length;j++)                                 // Kódtábla végigellenőrzése
                     if(sKod.charAt(j)=="1")                                     // Ha ki kell irni a szegmenst, akkor megjelenítés
                        switch(j){
                           case 0:                                               // felső viszintes vonal
                              sKiir+="<line x1="+(iLeft+4)+" y1="+iTop+" x2="+(iLeft+iWidth-4)+" y2="+iTop+"></line>";
                              break;
                           case 1:                                               // középső viszintes vonal
                              sKiir+="<line x1="+(iLeft+4)+" y1="+Math.round(iTop+iHeight/2)+" x2="+(iLeft+iWidth-4)+" y2="+Math.round(iTop+iHeight/2)+"></line>";
                              break;
                           case 2:                                               // alsó viszintes vonal
                              sKiir+="<line x1="+(iLeft+4)+" y1="+(iTop+iHeight)+" x2="+(iLeft+iWidth-4)+" y2="+(iTop+iHeight)+"></line>";
                              break;
                            case 3:                                              // bal felső függöleges vonal
                              sKiir+="<line x1="+(iLeft+2)+" y1="+(iTop+2)+" x2="+(iLeft+2)+" y2="+Math.round(iTop+iHeight/2-2)+"></line>";
                              break;
                           case 4:                                               // bal alsó függöleges vonal
                              sKiir+="<line x1="+(iLeft+2)+" y1="+Math.round(iTop+iHeight/2+2)+" x2="+(iLeft+2)+" y2="+(iTop+iHeight-2)+"></line>";
                              break;
                           case 5:                                               // jobb felső függőleges vonal
                              sKiir+="<line x1="+(iLeft+iWidth-2)+" y1="+(iTop+2)+" x2="+(iLeft+iWidth-2)+" y2="+Math.round(iTop+iHeight/2-2)+"></line>";
                              break;
                           case 6:                                               // jobb alsó függőleges vonal
                              sKiir+="<line x1="+(iLeft+iWidth-2)+" y1="+Math.round(iTop+iHeight/2+2)+" x2="+(iLeft+iWidth-2)+" y2="+(iTop+iHeight-2)+"></line>";
                              break;
                           }
                  iLeft+=iWidth;                                                 // A karakter szélességének megfelelően áthelyezzük a poziciót
                  }
            // Az elkészül kép kiirása
            document.getElementById("idKiirSzoveg").innerHTML="<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width="+(iLeft+5)+" height="+(iHeight+2*iTop)+">"+sKiir+"</svg>";
            }
         -->
      </script>
   </head>
   <body>
      <table>
         <tbody>
            <tr><td>Nagyított szám magassága:</td><td><input id="idMagassag" type="text" size="3" value="40"/> px</td></tr>
            <tr><td>Nagyított szám szélessége:</td><td><input id="idSzelesseg" type="text" size="3" value="20"/> px</td></tr>
            <tr><td>Átalakítandó számsor:</td><td><input id="idSzoveg" type="text" size="50"/></td></tr>
            <tr><td align="center" colspan="2"><input type="button" value="Szám nagyítása" onclick="funcSzovegAtatlakito()"/></td></tr>
         </tbody>
      </table>
      <div id="idKiirSzoveg"></div>
   </body>
</html>