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">
7 <title>spritext</title>
9 <style type="text/css">
25 .swatch-container:hover {
27 border: 1px dotted #aabbee;
28 background-color: #f3f4f5;
33 border: 1px solid gray;
38 .swatch-container.current {
40 border: 1px dotted #99aadd;
41 background-color: #e2e3e4;
46 <script type="text/javascript" src="jquery.js"></script>
47 <script type="text/javascript">
49 var fontsizes = [10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70];
51 var fontnames = ["Arial", "Arial Black",
53 "Chandas", "Comic Sans MS", "Courier New",
58 "MgOpen Canonica", "MgOpen Cosmetica", "MgOpen Modata",
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",
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"
71 var cgiUrl = "http://localhost/cgi-bin/spritext.cgi";
75 var fontName = "Verdana";
79 var options = {fontname:null, fontsize:30};
81 var fontImageUrl = "http://localhost/cgi-bin/spritext.cgi";
85 $("#previewInput").keyup(function() {
86 getFontInfoAndUpdate();
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);
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);
103 $(colors).each(function(i) {
104 var swatchContainer = $(document.createElement('div'))
105 .addClass('swatch-container');
107 swatchContainer.css('clear', 'left');
108 var swatch = $(document.createElement('div'))
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, ''));
117 swatchContainer.append(swatch);
118 $("#color").append(swatchContainer);
121 $("#fontSize").change(function() {
122 fontSize = $("#fontSize").val();
123 setOption('fontsize', $("#fontSize").val());
126 $("#fontName").change(function() {
127 setOption('fontname', $("#fontName").val());
132 function setOption(name, value)
134 options[name] = value;
135 var src = cgiUrl + '?t=t';
136 for ( var property in options )
138 if (options[property])
139 src += '&' + property + '=' + options[property];
142 $("#imgCgi").attr('src', fontImageUrl);
143 getFontInfoAndUpdate();
146 function getFontInfoAndUpdate() {
149 $.getJSON("/cgi-bin/spritext.cgi", { fontname: fontName, fontsize: fontSize, format: "json" }, function(json) {
150 alert(json.toString());
156 function updatePreview() {
157 var text = $("#previewInput").val()
158 var letters = $("#letters");
163 for (var i = 0; i < text.length; i++)
168 letters.append($(document.createElement('div'))
169 .css({float: 'left', width: fontSize * 0.5, height: fontSize})
174 var glyphInfo = fontInfo['u' + letter.charCodeAt(0)];
179 letters.append($(document.createElement('div'))
181 width: glyphInfo.w, height: fontSize,
182 'background': (-glyphInfo.x) + 'px ' + (-glyphInfo.y) + 'px'
183 + ' url(' + fontImageUrl + ')'
185 'margin-left': marginLeft, border:'1px solid green'
188 btnWidth += glyphInfo.w + 1;
201 <fieldset style="float:left;width:350px;">
202 <legend>Create Font</legend>
205 <label for="fontSize">Font Size:</label><select id="fontSize"></select>
209 <label for="fontName">Font Face:</label><select id="fontName"></select>
213 <label>Color:</label>
214 <div id="color"></div>
219 <fieldset style="float:left; width:300px;">
220 <legend>Use Font</legend>
222 Enter text: <input type="text" id="previewInput" value="Spritext"></input>
228 <div id="letters"></div>
233 <fieldset style="clear:left;">
234 <legend>Preview Font</legend>
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;" />