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

   1 <html>
   2 <head>
   3 <title>Dynamic Web 2.0 Button using jQuery</title>
   4
   5 <script type="text/javascript" src="jquery.js"></script>
   6 <script type="text/javascript" src="jquery.corner.js"></script>
   7
   8 <script type="text/javascript">
   9
  10 var fontInfo = {};
  11
  12 var fontName = "Verdana";
  13 var fontSize = 12;
  14
  15 function getFontImageUrl() {
  16   return '/cgi-bin/spritext.cgi?format=png'
  17     + '&fontname=' + fontName
  18     + '&fontsize=' + fontSize;
  19 }
  20
  21 function getFontImage() {
  22   var newImg = new Image();
  23   newImg.src = getFontImageUrl();
  24 }
  25
  26 function getFontInfoAndUpdate() {
  27   $.getJSON("/cgi-bin/spritext.cgi", { fontname: fontName, fontsize: fontSize, format: "json" }, function(json) {
  28     fontInfo = json;
  29     updateButton($("#input").val());
  30   });
  31 }
  32
  33 $(function(){
  34
  35   $("#fontsize").change(function() {
  36     fontSize = $("#fontsize").val();
  37     getFontImage();
  38     getFontInfoAndUpdate();
  39   }).change();
  40
  41 //  $("#button").corner("15px");
  42
  43   $("#input").keyup(function() {
  44     updateButton($(this).val());
  45   });
  46
  47 });
  48
  49 var SPACE_WIDTH = 25;
  50 var LETTER_SPACING = 60;
  51 var widthMap = {A:31,B:32,C:33,D:35,E:32,F:30,G:34,H:35,I:18,J:15,K:32,L:30,M:39,N:35,O:36,P:30,Q:35,R:34,S:31,T:30,U:34,V:31,W:43,X:31,Y:29,Z:31};
  52
  53 function getLetterWidth(letter, fontSize) {
  54   return widthMap[letter.toUpperCase()] * 1.5;
  55 }
  56
  57 function updateButton(text) {
  58   var letters = $("#letters");
  59   letters.empty();
  60   var btnWidth = 0;
  61   var letter = 'A';
  62   var previous = 'A';
  63   for (var i = 0; i < text.length; i++)
  64   {
  65     letter = text[i];
  66     if (letter == ' ')
  67     {
  68       letters.append($(document.createElement('div'))
  69         .css({float: 'left', width: fontSize * 0.5, height: fontSize})
  70       );
  71     }
  72     else
  73     {
  74 //      var className = 'Verdana60';
  75       var glyphInfo = fontInfo['u' + letter.charCodeAt(0)];
  76 //      var xPos = -((letterUC.charCodeAt(0) - "A".charCodeAt(0)) * LETTER_SPACING);
  77 //      var yPos = -2;
  78 //      var lWidth = getLetterWidth(letter, 60);
  79       var marginLeft = 0;
  80       if (letter == 'O')
  81         marginLeft = -10;
  82       letters.append($(document.createElement('div'))
  83         .css({float: 'left',
  84               width: glyphInfo.w, height: fontSize,
  85              'background': (-glyphInfo.x) + 'px ' + (-glyphInfo.y) + 'px'
  86                + ' url(' + getFontImageUrl() + ')'
  87                + ' no-repeat',
  88              'margin-left': marginLeft
  89         })
  90       );
  91       btnWidth += glyphInfo.w + 1;
  92     }
  93     previous = letter;
  94   }
  95
  96 //  $("#button").width(btnWidth);
  97 }
  98
  99 </script>
 100
 101 <style type="text/css">
 102
 103 #letters difev {
 104   float: left;
 105   height: 100px;
 106   background: transparent  no-repeat;
 107 }
 108
 109 #letters .Verdanavds60 {
 110   background: url(http://localhost/cgi-bin/spritext.cgi?fontname=Verdana&fontsize=60);
 111 }
 112
 113 #letters {
 114   width: 600px;
 115 }
 116
 117 .space {
 118   width: 25px;
 119 }
 120
 121 </style>
 122
 123 </head>
 124 <body>
 125
 126 Font Size: <input type="text" id="fontsize" name="fontsize" value="12" />
 127
 128 <div>
 129 Floor text: <input type="text" id="input" value="Sh"></input>
 130 </div>
 131
 132 <br>
 133
 134 <div id="letters"></div>
 135
 136 </body>
 137 </html>
 138