git.cworth.org Git - spritext/blob - spritext.html

   1 <!DOCTYPE html
   2      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   3      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   5
   6 <head>
   7 <title>spritext</title>
   8
   9 <style type="text/css">
  10
  11 label {
  12   margin-right: 10px;
  13 }
  14
  15 #color {
  16   float: left;
  17 }
  18
  19 .swatch-container {
  20   float: left;
  21   margin: 4px;
  22   padding: 4px;
  23 }
  24
  25 .swatch-container:hover {
  26   margin: 3px;
  27   border: 1px dotted #aabbee;
  28   background-color: #f3f4f5;
  29 }
  30
  31 .swatch {
  32   cursor: pointer;
  33   border: 1px solid gray;
  34   width: 25px;
  35   height: 25px;
  36 }
  37
  38 .swatch-container.current {
  39   margin: 3px;
  40   border: 1px dotted #99aadd;
  41   background-color: #e2e3e4;
  42 }
  43
  44 </style>
  45
  46 <script type="text/javascript" src="jquery.js"></script>
  47 <script type="text/javascript">
  48
  49 var fontsizes = [10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70];
  50
  51 var fontnames = ["Arial", "Arial Black",
  52 "Bitstream Charter",
  53 "Chandas", "Comic Sans MS", "Courier New",
  54 "Gentium", "Georgia",
  55 "Impact",
  56 "Jamrul",
  57 "Kochi Gothic",
  58 "MgOpen Canonica", "MgOpen Cosmetica", "MgOpen Modata",
  59 "Nimbus Roman No9 L",
  60 "Rekha",
  61 "Samanata", "Sans", "Serif",
  62 "Times New Roman", "TlwgTypewriter", "Trebuchet MS", "TSCu_Comic", "TSCu_Paranar",
  63 "URW Bookman L", "URW Chancery L", "URW Gothic L", "URW Palladio L",
  64 "Verdana"];
  65
  66 var colors = ["#EEEEEE", "#FFFFFF", "#F9F7ED", "#FFFF88", "#CDEB8B", "#C3D9FF", "#36393D",
  67 "#FF1A00", "#CC0000", "#FF7400", "#008C00", "#006E2E", "#4096EE", "#FF0084",
  68 "#D15600", "#C79810", "#73880A", "#6BBA70", "#3F4C6B", "#356AA0", "#D01F3C"
  69 ];
  70
  71 var cgiUrl = "http://localhost/cgi-bin/spritext.cgi";
  72
  73 var fontInfo = {};
  74
  75 var fontName = "Verdana";
  76
  77 var fontSize = 12;
  78
  79 var options = {fontname:null, fontsize:30};
  80
  81 var fontImageUrl = "http://localhost/cgi-bin/spritext.cgi";
  82
  83 $(function(){
  84
  85   $("#previewInput").keyup(function() {
  86     getFontInfoAndUpdate();
  87   }).keyup();
  88
  89   $(fontsizes).each(function(i) {
  90     var option = $(document.createElement('option'));
  91     option.val(fontsizes[i]);
  92     option.text(fontsizes[i].toString());
  93     $("#fontSize").append(option);
  94   });
  95
  96   $(fontnames).each(function(i) {
  97     var option = $(document.createElement('option'));
  98     option.val(fontnames[i]);
  99     option.text(fontnames[i]);
 100     $("#fontName").append(option);
 101   });
 102
 103   $(colors).each(function(i) {
 104     var swatchContainer = $(document.createElement('div'))
 105       .addClass('swatch-container');
 106     if (!(i % 7))
 107       swatchContainer.css('clear', 'left');
 108     var swatch = $(document.createElement('div'))
 109       .addClass('swatch')
 110       .css({'background-color':colors[i]});
 111     swatch.click(function() {
 112       $('.current').removeClass('current');
 113       var swatch = $(this);
 114       swatch.parent().addClass('current');
 115       setOption('fillcolor', swatch.css('background-color').replace(/\s/g, ''));
 116     });
 117     swatchContainer.append(swatch);
 118     $("#color").append(swatchContainer);
 119   });
 120
 121   $("#fontSize").change(function() {
 122     fontSize = $("#fontSize").val();
 123     setOption('fontsize', $("#fontSize").val());
 124   });
 125
 126   $("#fontName").change(function() {
 127     setOption('fontname', $("#fontName").val());
 128   });
 129
 130 });
 131
 132 function setOption(name, value)
 133 {
 134   options[name] = value;
 135   var src = cgiUrl + '?t=t';
 136   for ( var property in options )
 137   {
 138     if (options[property])
 139       src += '&' + property + '=' + options[property];
 140   }
 141   fontImageUrl = src;
 142   $("#imgCgi").attr('src', fontImageUrl);
 143   getFontInfoAndUpdate();
 144 }
 145
 146 function getFontInfoAndUpdate() {
 147   alert(fontName);
 148   alert(fontSize);
 149   $.getJSON("/cgi-bin/spritext.cgi", { fontname: fontName, fontsize: fontSize, format: "json" }, function(json) {
 150     alert(json.toString());
 151     fontInfo = json;
 152     updatePreview();
 153   });
 154 }
 155
 156 function updatePreview() {
 157   var text = $("#previewInput").val()
 158   var letters = $("#letters");
 159   letters.empty();
 160   var btnWidth = 0;
 161   var letter = 'A';
 162   var previous = 'A';
 163   for (var i = 0; i < text.length; i++)
 164   {
 165     letter = text[i];
 166     if (letter == ' ')
 167     {
 168       letters.append($(document.createElement('div'))
 169         .css({float: 'left', width: fontSize * 0.5, height: fontSize})
 170       );
 171     }
 172     else
 173     {
 174       var glyphInfo = fontInfo['u' + letter.charCodeAt(0)];
 175       if (glyphInfo) {
 176         var marginLeft = 0;
 177         if (letter == 'O')
 178           marginLeft = -10;
 179         letters.append($(document.createElement('div'))
 180           .css({float: 'left',
 181                 width: glyphInfo.w, height: fontSize,
 182                'background': (-glyphInfo.x) + 'px ' + (-glyphInfo.y) + 'px'
 183                  + ' url(' + fontImageUrl + ')'
 184                  + ' no-repeat',
 185                'margin-left': marginLeft, border:'1px solid green'
 186           })
 187         );
 188         btnWidth += glyphInfo.w + 1;
 189       }
 190     }
 191     previous = letter;
 192   }
 193 }
 194
 195 </script>
 196
 197 </head>
 198
 199 <body>
 200
 201 <fieldset style="float:left;width:350px;">
 202 <legend>Create Font</legend>
 203
 204 <div>
 205 <label for="fontSize">Font Size:</label><select id="fontSize"></select>
 206 </div>
 207
 208 <div>
 209 <label for="fontName">Font Face:</label><select id="fontName"></select>
 210 </div>
 211
 212 <div>
 213 <label>Color:</label>
 214 <div id="color"></div>
 215 </div>
 216
 217 </fieldset>
 218
 219 <fieldset style="float:left; width:300px;">
 220 <legend>Use Font</legend>
 221 <div>
 222 Enter text: <input type="text" id="previewInput" value="Spritext"></input>
 223 </div>
 224
 225 <br>
 226
 227 <div id="preview">
 228 <div id="letters"></div>
 229 </div>
 230
 231 </fieldset>
 232
 233 <fieldset style="clear:left;">
 234 <legend>Preview Font</legend>
 235
 236 <div style="clear:left;">
 237 <img id="imgCgi" src="http://localhost/cgi-bin/spritext.cgi&fontsize=30" style="padding:1px;border:1px solid black;" />
 238 </div>
 239
 240 </fieldset>
 241
 242 </body>
 243
 244 </html>
 245