mirror of
https://github.com/sehugg/8bitworkshop.git
synced 2024-06-04 11:29:28 +00:00
moved fontgen to separate project
This commit is contained in:
parent
b3fa4cb2ba
commit
b6baab7a5c
6
.gitmodules
vendored
6
.gitmodules
vendored
|
@ -16,12 +16,6 @@
|
||||||
[submodule "localForage"]
|
[submodule "localForage"]
|
||||||
path = localForage
|
path = localForage
|
||||||
url = https://github.com/localForage/localForage
|
url = https://github.com/localForage/localForage
|
||||||
[submodule "bitmap-fonts"]
|
|
||||||
path = bitmap-fonts
|
|
||||||
url = https://github.com/Tecate/bitmap-fonts
|
|
||||||
[submodule "ibmfonts"]
|
|
||||||
path = ibmfonts
|
|
||||||
url = https://github.com/farsil/ibmfonts
|
|
||||||
[submodule "jsnes"]
|
[submodule "jsnes"]
|
||||||
path = jsnes
|
path = jsnes
|
||||||
url = https://github.com/sehugg/jsnes
|
url = https://github.com/sehugg/jsnes
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
Subproject commit 6f52a7ca0838967cc57e9a44d76c6e1f60e62842
|
|
1
ibmfonts
1
ibmfonts
|
@ -1 +0,0 @@
|
||||||
Subproject commit 7a9227d43057b6ab6271a2577ecce47fa3360134
|
|
4
jquery/jquery-2.2.3.min.js
vendored
4
jquery/jquery-2.2.3.min.js
vendored
File diff suppressed because one or more lines are too long
3247
lib/w2ui-1.5.rc1.css
3247
lib/w2ui-1.5.rc1.css
File diff suppressed because one or more lines are too long
18953
lib/w2ui-1.5.rc1.js
18953
lib/w2ui-1.5.rc1.js
File diff suppressed because it is too large
Load Diff
2
lib/w2ui-1.5.rc1.min.css
vendored
2
lib/w2ui-1.5.rc1.min.css
vendored
File diff suppressed because one or more lines are too long
14
lib/w2ui-1.5.rc1.min.js
vendored
14
lib/w2ui-1.5.rc1.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -1,452 +0,0 @@
|
||||||
|
|
||||||
import { hex } from "../util";
|
|
||||||
|
|
||||||
// TODO: outline, gradient, pixel colors (>=2 bpp), proportional fonts, select C/ASM output, fine offset
|
|
||||||
|
|
||||||
var font;
|
|
||||||
|
|
||||||
declare var FONTLIST : string;
|
|
||||||
|
|
||||||
var FONT_DEFAULT_PARAMS = {
|
|
||||||
bpp:1,
|
|
||||||
np:1,
|
|
||||||
wbytes:1,
|
|
||||||
width:8,
|
|
||||||
height:8,
|
|
||||||
yoffset:0,
|
|
||||||
lochar:32,
|
|
||||||
hichar:127,
|
|
||||||
rotate:false,
|
|
||||||
xflip:false,
|
|
||||||
yflip:false,
|
|
||||||
msbfirst:false,
|
|
||||||
output:'c_nested',
|
|
||||||
};
|
|
||||||
|
|
||||||
var params;
|
|
||||||
|
|
||||||
var errors;
|
|
||||||
|
|
||||||
var previewCanvas = $("#previewCanvas");
|
|
||||||
var codeTextarea = $("#codeTextarea");
|
|
||||||
var paramsForm = $("#paramsForm");
|
|
||||||
|
|
||||||
var FONT_PRESETS = {
|
|
||||||
_8x8: { },
|
|
||||||
apple2: { width:7 },
|
|
||||||
vcs: { output:'dasm', msbfirst:true },
|
|
||||||
mw8080bw: { rotate:true, flip:true, msbfirst:true },
|
|
||||||
nes: { np:2, msbfirst:true },
|
|
||||||
astrocade: { output:'zmac', msbfirst:true },
|
|
||||||
};
|
|
||||||
|
|
||||||
function loadPreset(preset_id) {
|
|
||||||
params = $.extend({}, FONT_DEFAULT_PARAMS, FONT_PRESETS[preset_id]);
|
|
||||||
refreshToolbar();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateToolbarValue(event, id:string) {
|
|
||||||
event.item = w2ui.toolbar.get(id);
|
|
||||||
event.item.value = event.target.value;
|
|
||||||
refreshToolbar(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
function refreshToolbar(event?) {
|
|
||||||
// update params from toolbar item?
|
|
||||||
console.log(event);
|
|
||||||
if (event && event.item) {
|
|
||||||
switch (event.item.id) {
|
|
||||||
case 'width':
|
|
||||||
case 'height':
|
|
||||||
case 'lochar':
|
|
||||||
case 'hichar':
|
|
||||||
case 'yoffset':
|
|
||||||
params[event.item.id] = parseInt(event.item.value);
|
|
||||||
break;
|
|
||||||
case 'rotate':
|
|
||||||
case 'xflip':
|
|
||||||
case 'yflip':
|
|
||||||
case 'msbfirst':
|
|
||||||
params[event.item.id] = event.item.checked;
|
|
||||||
break;
|
|
||||||
case 'bpp':
|
|
||||||
if (event.subItem)
|
|
||||||
params[event.item.id] = parseInt(event.subItem.text);
|
|
||||||
break;
|
|
||||||
case 'preset':
|
|
||||||
if (event.subItem)
|
|
||||||
loadPreset(event.subItem.id);
|
|
||||||
break;
|
|
||||||
case 'charsel':
|
|
||||||
if (event.subItem)
|
|
||||||
loadCharSel(event.subItem.id);
|
|
||||||
break;
|
|
||||||
case 'output':
|
|
||||||
if (event.subItem)
|
|
||||||
params[event.item.id] = event.subItem.id;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// set derived params
|
|
||||||
params.wbytes = Math.floor((params.width*params.bpp+7)/8);
|
|
||||||
// set toolbar items
|
|
||||||
Object.keys(params).forEach(function(key) {
|
|
||||||
var val = params[key];
|
|
||||||
var item = w2ui.toolbar.get(key);
|
|
||||||
switch (item && item.type) {
|
|
||||||
case 'check': item.checked = val; break;
|
|
||||||
case 'html': item.value = val; break;
|
|
||||||
case 'menu-radio': item.selected = val; break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
w2ui.toolbar.refresh();
|
|
||||||
updateEncoding();
|
|
||||||
previewFont();
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadCharSel(id) {
|
|
||||||
var toks = id.split('-');
|
|
||||||
params.lochar = parseInt(toks[0]);
|
|
||||||
params.hichar = parseInt(toks[1]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseBDF(text) {
|
|
||||||
var chars = {};
|
|
||||||
var chord;
|
|
||||||
var ch;
|
|
||||||
var lines = text.split(/\r?\n/);
|
|
||||||
var bounds = [0,0,0,0];
|
|
||||||
for (var i=0; i<lines.length; i++) {
|
|
||||||
var l = lines[i];
|
|
||||||
var toks = l.split(/\s+/);
|
|
||||||
if (toks.length == 0) continue;
|
|
||||||
switch (toks[0]) {
|
|
||||||
case 'ENCODING':
|
|
||||||
chord = parseInt(toks[1]);
|
|
||||||
ch = {ord:chord};
|
|
||||||
break;
|
|
||||||
case 'BITMAP':
|
|
||||||
ch.bytes = [];
|
|
||||||
break;
|
|
||||||
case 'BBX':
|
|
||||||
if (ch) {
|
|
||||||
ch.bbx = toks.slice(1).map(function(s) { return parseInt(s); });
|
|
||||||
bounds[0] = Math.min(bounds[0], ch.bbx[2]);
|
|
||||||
bounds[1] = Math.min(bounds[1], ch.bbx[3]);
|
|
||||||
bounds[2] = Math.max(bounds[2], ch.bbx[2]+ch.bbx[0]);
|
|
||||||
bounds[3] = Math.max(bounds[3], ch.bbx[3]+ch.bbx[1]);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'ENDCHAR':
|
|
||||||
chars[chord] = ch;
|
|
||||||
ch = null;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
if (ch && ch.bytes && toks.length == 1) {
|
|
||||||
var n = parseInt(toks[0], 16);
|
|
||||||
n <<= (6-toks[0].length) * 4;
|
|
||||||
ch.bytes.push(n);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {chars:chars,bounds:bounds,pixbounds:[0,0,0,0]};
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadFont(rec) {
|
|
||||||
font = {};
|
|
||||||
var path = '../fonts/' + rec.path;
|
|
||||||
$.get(path, function(text) {
|
|
||||||
font = parseBDF(text);
|
|
||||||
font.rec = rec;
|
|
||||||
font.path = path;
|
|
||||||
console.log(font);
|
|
||||||
updateEncoding();
|
|
||||||
previewFont();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateEncoding() {
|
|
||||||
if (font) {
|
|
||||||
codeTextarea.text(encodeFont());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderGlyph(glyph, putPixel) {
|
|
||||||
if (glyph.ord < params.lochar || glyph.ord > params.hichar)
|
|
||||||
return {w:8,h:8};
|
|
||||||
var w = glyph.bbx[0];
|
|
||||||
var h = glyph.bbx[1];
|
|
||||||
var dx = glyph.bbx[2];
|
|
||||||
var dy = glyph.bbx[3];
|
|
||||||
var error_logged = false;
|
|
||||||
for (var y=0; y<glyph.bytes.length; y++) {
|
|
||||||
for (var x=0; x<w; x++) {
|
|
||||||
if (glyph.bytes[glyph.bytes.length-y-1] & (0x800000 >> x)) {
|
|
||||||
var xx = x+dx;
|
|
||||||
var yy = y+dy;
|
|
||||||
yy += params.yoffset || 0;
|
|
||||||
var xoutrange = xx < 0 || x >= params.width;
|
|
||||||
var youtrange = yy < 0 || y >= params.height;
|
|
||||||
if (!xoutrange && !youtrange) {
|
|
||||||
putPixel(xx, yy);
|
|
||||||
} else if (!error_logged) {
|
|
||||||
errors.push((xoutrange?"X":"Y") + " out of range on character " + String.fromCharCode(glyph.ord) + " " + x + "," + y);
|
|
||||||
error_logged = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {w:w+dx,h:h+dy};
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawChar(x0, y0, chord) {
|
|
||||||
var ctx = (previewCanvas[0] as any).getContext('2d');
|
|
||||||
ctx.fillStyle = "black";
|
|
||||||
var glyph = font.chars[chord];
|
|
||||||
if (glyph) {
|
|
||||||
return renderGlyph(glyph, function(x,y) {
|
|
||||||
ctx.fillRect( x0+x, y0-y, 1, 1 );
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return {w:8,h:8}; // TODO: avgwidth, height
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawString(x, y, str) {
|
|
||||||
for (var i=0; i<str.length; i++) {
|
|
||||||
x += drawChar(x, y, str.charCodeAt(i)).w+1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var TEST_SENTENCES = [
|
|
||||||
"0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ",
|
|
||||||
"!@#$%^&*()+ -- == [] {} <>?,./;':\"",
|
|
||||||
"THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG'S BOWL",
|
|
||||||
"the quick brown fox jumps over the lazy dog's bowl",
|
|
||||||
//"Pack my box with five dozen liquor jugs.",
|
|
||||||
];
|
|
||||||
|
|
||||||
function previewFont() {
|
|
||||||
if (!font) return;
|
|
||||||
var ctx = (previewCanvas[0] as any).getContext('2d');
|
|
||||||
ctx.fillStyle = "white";
|
|
||||||
ctx.fillRect( 0, 0, 1024, 1024 );
|
|
||||||
var x = 8;
|
|
||||||
var y = 8;
|
|
||||||
//console.log(font);
|
|
||||||
TEST_SENTENCES.forEach(function(s) {
|
|
||||||
y += font.rec.pixelsize + 1;
|
|
||||||
drawString(x, y, s);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function encodeGlyph(glyph, bytes) {
|
|
||||||
var abort = false;
|
|
||||||
renderGlyph(glyph, function(x,y) {
|
|
||||||
if (params.yflip) { y = params.height-1-y; }
|
|
||||||
if (params.xflip ^ params.rotate) { x = params.width-1-x; }
|
|
||||||
if (params.rotate) {
|
|
||||||
var y2 = x; var x2 = y; x = x2; y = y2;
|
|
||||||
}
|
|
||||||
var xoutrange = (x < 0 || x >= params.width);
|
|
||||||
var youtrange = (y < 0 || y >= params.height);
|
|
||||||
var bpb = 8 / (params.bpp||1);
|
|
||||||
var ofs = Math.floor(x/bpb) + (params.height-1-y)*params.wbytes;
|
|
||||||
var bit = x % bpb;
|
|
||||||
if (params.msbfirst) { bit = 7-bit; }
|
|
||||||
bytes[ofs] |= 1<<bit;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function encodeFont() {
|
|
||||||
var s = '';
|
|
||||||
var c_output = params.output.startsWith('c_');
|
|
||||||
if (c_output) {
|
|
||||||
//s += '/* ' + JSON.stringify(params) + JSON.stringify(font.bounds) + JSON.stringify(font.pixbounds) + ' */\n';
|
|
||||||
s += "#define LOCHAR " + params.lochar + "\n";
|
|
||||||
s += "#define HICHAR " + params.hichar + "\n";
|
|
||||||
s += "#define FONT_BWIDTH " + (params.wbytes*params.np) + "\n";
|
|
||||||
s += "#define FONT_HEIGHT " + params.height + "\n";
|
|
||||||
s += "const char FONT[HICHAR-LOCHAR+1][FONT_HEIGHT*FONT_BWIDTH] = {\n";
|
|
||||||
} else {
|
|
||||||
s += "LOCHAR\t\tequ " + params.lochar + "\n";
|
|
||||||
s += "HICHAR\t\tequ " + params.hichar + "\n";
|
|
||||||
s += "FONT_HEIGHT\tequ " + params.height + "\n";
|
|
||||||
s += "FontData:\n";
|
|
||||||
}
|
|
||||||
errors = [];
|
|
||||||
for (var chord=params.lochar; chord<=params.hichar; chord++) {
|
|
||||||
var glyph = font.chars[chord];
|
|
||||||
var bytes = new Uint8Array(params.wbytes*params.height*params.np);
|
|
||||||
if (glyph) {
|
|
||||||
encodeGlyph(glyph, bytes);
|
|
||||||
if (params.output=='c_nested') s += "{ ";
|
|
||||||
else if (params.output=='dasm') s += "\thex\t";
|
|
||||||
else if (params.output=='zmac') s += "\tdb\t";
|
|
||||||
for (var i=0; i<bytes.length; i++) {
|
|
||||||
if (params.output == 'dasm')
|
|
||||||
s += hex(bytes[i]);
|
|
||||||
else
|
|
||||||
s += "0x" + hex(bytes[i]) + ((i<bytes.length-1)?",":"");
|
|
||||||
}
|
|
||||||
if (params.output=='c_nested') s += " },";
|
|
||||||
if (!c_output || params.newline) s += "\n";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (c_output) s += "};\n";
|
|
||||||
while (errors.length) {
|
|
||||||
if (c_output)
|
|
||||||
s = "/* " + errors.pop() + " */\n" + s;
|
|
||||||
else
|
|
||||||
s = ";; " + errors.pop() + "\n" + s;
|
|
||||||
}
|
|
||||||
return s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/////
|
|
||||||
|
|
||||||
var FONTRECS = [];
|
|
||||||
|
|
||||||
var li = 0;
|
|
||||||
for (var line of FONTLIST.split("\n")) {
|
|
||||||
var ltoks = line.split("|");
|
|
||||||
if (ltoks.length < 2)
|
|
||||||
continue;
|
|
||||||
var ftoks = ltoks[1].split("-");
|
|
||||||
var rec = {
|
|
||||||
recid: ++li,
|
|
||||||
path: ltoks[0],
|
|
||||||
foundry: ftoks[1],
|
|
||||||
family: ftoks[2],
|
|
||||||
weight: ftoks[3].toLowerCase(),
|
|
||||||
slant: ftoks[4].toUpperCase(),
|
|
||||||
setwidth: ftoks[5],
|
|
||||||
addstyle: ftoks[6],
|
|
||||||
pixelsize: parseInt(ftoks[7]),
|
|
||||||
pointsize: parseInt(ftoks[8]),
|
|
||||||
resx: parseInt(ftoks[9]),
|
|
||||||
resy: parseInt(ftoks[10]),
|
|
||||||
spacing: ftoks[11].toUpperCase(),
|
|
||||||
avgwidth: parseFloat(ftoks[12])/10,
|
|
||||||
registry: ftoks[13],
|
|
||||||
encoding: ftoks[14],
|
|
||||||
};
|
|
||||||
FONTRECS.push(rec);
|
|
||||||
}
|
|
||||||
|
|
||||||
function toolbarHTMLItem(id, title, maxchars) {
|
|
||||||
return function(item) {
|
|
||||||
var html = '<div style="padding: 3px 5px;">' + title + ' ' +
|
|
||||||
'<input size=' + maxchars + ' maxlength=' + maxchars +
|
|
||||||
' onchange="updateToolbarValue(event, \'' + id + '\');" '+
|
|
||||||
' value="'+ (item.value || '') + '"/></div>';
|
|
||||||
return html;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
$().w2toolbar({
|
|
||||||
name: 'toolbar',
|
|
||||||
onClick: function(event) {
|
|
||||||
// TODO?
|
|
||||||
setTimeout(function() { refreshToolbar(event); }, 1);
|
|
||||||
},
|
|
||||||
tooltip: 'bottom',
|
|
||||||
items: [
|
|
||||||
{ type: 'menu-radio', id: 'preset', caption: 'Presets', img: 'icon-folder',
|
|
||||||
tooltip: 'Preset encoding options for specific platforms',
|
|
||||||
//text: function(item) { refreshPreset(item); return item.caption; },
|
|
||||||
items: [
|
|
||||||
{ text: 'Generic C 8x8', id: '_8x8' },
|
|
||||||
{ text: 'Atari 2600', id: 'vcs' },
|
|
||||||
{ text: 'Midway 8080', id: 'mw8080bw' },
|
|
||||||
{ text: 'NES', id: 'nes' },
|
|
||||||
{ text: 'Apple ][', id: 'apple2' },
|
|
||||||
{ text: 'Astrocade', id: 'astrocade' },
|
|
||||||
]},
|
|
||||||
{ type: 'check', id: 'rotate', caption: 'Rotate', img: 'fas fa-sync', tooltip: 'Rotate 90 degrees (swap X/Y)' },
|
|
||||||
{ type: 'check', id: 'xflip', caption: 'Mirror', img: 'fas fa-arrows-alt-h', tooltip: 'Flip X axis' },
|
|
||||||
{ type: 'check', id: 'yflip', caption: 'Flip', img: 'fas fa-arrows-alt-v', tooltip: 'Flip Y axis' },
|
|
||||||
{ type: 'check', id: 'msbfirst', caption: 'MSB First', img: 'fas fa-arrow-alt-circle-right', tooltip: 'If selected, MSB (left) to LSB (right)' },
|
|
||||||
{ type: 'menu-radio', id: 'bpp', caption: 'BPP', img: 'fas fa-dice-one', tooltip: 'Bits per pixel',
|
|
||||||
items: [
|
|
||||||
{ text: '1' },
|
|
||||||
{ text: '2' },
|
|
||||||
{ text: '4' },
|
|
||||||
{ text: '8' }
|
|
||||||
]},
|
|
||||||
{ type: 'html', id: 'width', html: toolbarHTMLItem('width','Width:',2) },
|
|
||||||
{ type: 'html', id: 'height', html: toolbarHTMLItem('height','Height:',2) },
|
|
||||||
{ type: 'html', id: 'yoffset', html: toolbarHTMLItem('yoffset','Y Offset:',2) },
|
|
||||||
{ type: 'menu-radio', id: 'output', caption: 'Output', img: 'icon-folder',
|
|
||||||
tooltip: 'Output format',
|
|
||||||
items: [
|
|
||||||
{ text: 'C array (nested)', id: 'c_nested' },
|
|
||||||
{ text: 'C array (flat)', id: 'c_flat' },
|
|
||||||
{ text: 'Assembler (DASM)', id: 'dasm' },
|
|
||||||
{ text: 'Assembler (zmac)', id: 'zmac' },
|
|
||||||
]},
|
|
||||||
{ type: 'break', id: 'break1' },
|
|
||||||
|
|
||||||
{ type: 'menu-radio', id: 'charsel', caption: 'Chars', img: 'icon-folder',
|
|
||||||
tooltip: 'Range of characters to encode, from first to last',
|
|
||||||
items: [
|
|
||||||
//{ text: 'ISO (256 chars)', value:'0-255' },
|
|
||||||
{ text: 'ASCII (upper only)', id:'32-95' },
|
|
||||||
{ text: 'ASCII (upper+lower)', id:'32-127' }
|
|
||||||
]},
|
|
||||||
{ type: 'html', id: 'lochar', html: toolbarHTMLItem('lochar','First:',3) },
|
|
||||||
{ type: 'html', id: 'hichar', html: toolbarHTMLItem('hichar','Last:',3) },
|
|
||||||
/*
|
|
||||||
{ type: 'spacer' },
|
|
||||||
{ type: 'button', id: 'item5', caption: 'Item 5', icon: 'fa-home' }
|
|
||||||
*/
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
$().w2grid({
|
|
||||||
name : 'fontGrid',
|
|
||||||
show : {
|
|
||||||
toolbar : true
|
|
||||||
},
|
|
||||||
multiSearch: true,
|
|
||||||
searches: [
|
|
||||||
{ field: 'weight', caption: 'Weight', type: 'list', options: { items: ['medium','bold','narrow']} },
|
|
||||||
{ field: 'slant', caption: 'Slant', type: 'list', options: { items: ['R','O']} },
|
|
||||||
{ field: 'spacing', caption: 'Spacing', type: 'list', options: { items: ['C','M','P']} },
|
|
||||||
{ field: 'pixelsize', caption: 'Pixel Size', type: 'int' },
|
|
||||||
{ field: 'avgwidth', caption: 'Avg. Width', type: 'int' },
|
|
||||||
],
|
|
||||||
columns: [
|
|
||||||
{ field: 'foundry', caption: 'Foundry', size: '20%', sortable:true },
|
|
||||||
{ field: 'family', caption: 'Family', size: '20%', sortable:true },
|
|
||||||
{ field: 'weight', caption: 'Weight', size: '10%', sortable:true },
|
|
||||||
{ field: 'slant', caption: 'Slant', size: '10%', sortable:true },
|
|
||||||
{ field: 'pixelsize', caption: 'Pixel Size', size: '10%', sortable:true },
|
|
||||||
{ field: 'avgwidth', caption: 'Avg. Width', size: '10%', sortable:true },
|
|
||||||
{ field: 'spacing', caption: 'Spacing', size: '10%', sortable:true },
|
|
||||||
],
|
|
||||||
records: FONTRECS,
|
|
||||||
onClick: function (event) {
|
|
||||||
var record = this.get(event.recid);
|
|
||||||
loadFont(record);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
|
|
||||||
$('#layout').w2layout({
|
|
||||||
name: 'layout',
|
|
||||||
panels: [
|
|
||||||
{ type: 'top', size: 50, resizable: false, style: pstyle, content: 'top' },
|
|
||||||
// { type: 'left', size: 200, resizable: true, style: pstyle, content: paramsForm },
|
|
||||||
{ type: 'main', style: pstyle, content: codeTextarea },
|
|
||||||
{ type: 'preview', size: '50%', resizable: true, style: pstyle, content: previewCanvas },
|
|
||||||
{ type: 'left', size: '25%', resizable: true, style: pstyle, content: $("#instructions") },
|
|
||||||
{ type: 'bottom', size: 200, resizable: true, style: pstyle, content: 'bottom' }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
w2ui['layout'].content('top', w2ui['toolbar']);
|
|
||||||
w2ui['layout'].content('bottom', w2ui['fontGrid']);
|
|
||||||
|
|
||||||
loadPreset('_8x8');
|
|
Loading…
Reference in New Issue
Block a user