New vector font

[gfwilliams]

g.fillPoly now supports irregular polys, so there's no need for the regular polygons inside vector_font.h

A new font with irregular polygons should be significantly smaller

[MaBecker]

Do you like to share what’s on you mind?

[gfwilliams]

The existing font generator (which I haven't actually published) leans on a bunch of stuff from another project and just mashes triangles together, so I can't just 'redo' the font.

So either:

• A script to mash the regular polygons in the existing font together
• A script to make a new vector font. I tried to see if I could do something quick, but no luck :) I think right now the best bet would be:
  • a script to make an SVG with all the characters in it
  • Open the SVG in Inkscape, do Object->Path and 'Flatten Beziers'
  • another script to read the flattened SVG and make a font file

[MaBecker]

What about Hershey fonts you named in an earlier chat?

See #1702 (comment)

[gfwilliams]

Hershey test code here: http://forum.espruino.com/conversations/321520/

I guess I could drop the vector font and use hershey fonts instead. My concern is really that I will get complaints if the font changes, but I guess it's not like the vector font is amazing at the moment anyway.

Also, the dumb way of doing wider lines for hershey would be to just draw each line as a separate polygon - but that's going to be really slow so I guess we need to make something that'll output a polygon (with smooth edges) from a standard polyline.

It'd be a neat thing to have, but it's easier said than done :)

[MaBecker]

It'd be a neat thing to have, but it's easier said than done :)

I totally agree, spend a few hours with line thickness and trying to draw some Hershey characters .....

[MaBecker]

Have you thought about using bezier curves for drawing chars?

Any hints why g.fillPoly() is not filling this mirrored C as expected?

function quadraticBezier(x0,y0,x1,y1,x2,y2,drawCircle){
  var x,y,t,t2;
  var pp = [];
  var sn = 3;

if (drawCircle){
  g.drawCircle(x0,y0,3);
  g.drawCircle(x1,y1,3);
  g.drawCircle(x2,y2,3);
}
  pp.push(x0,y0);
  var s = Math.min(sn/Math.abs(x0-x2),sn/Math.abs(y0-y2));
  for( t = s; t <= 1; t += s) {
    t2 = t*t;
    tp2 = (1 - t) * (1 - t);
    x = ( x0 * tp2 +
        x1 * 2 * (1 - t) * t + 
        t2 * x2 + 0.5) | 0;
    y = ( y0 * tp2 +
        y1 * 2 * (1 - t) * t + 
        t2 * y2 + 0.5 ) | 0 ;
    pp.push(x,y);
  }
  pp.push(x2,y2);
  return pp;
}

var pp = [];
b = 20;
// outer-top-left
pp.push.apply(pp,quadraticBezier(20,60, 20,20, 60,20,true));
// outer-top-right
pp.push.apply(pp,quadraticBezier(60,20, 100,20, 100,60,true));
// outer-bottom-right
pp.push.apply(pp,quadraticBezier(100,100, 100,140, 60,140,true));
// outer-bottom-left
pp.push.apply(pp,quadraticBezier(60,140, 20,140, 20,100,true));

// outer-bottom-left
pp.push.apply(pp,quadraticBezier(20+b,100, 20+b,140-b,60,140-b,true));
// outer-bottom-right
pp.push.apply(pp,quadraticBezier(60,140-b, 100-b,140-b,100-b,100 ,true));
// outer-top-right
pp.push.apply(pp,quadraticBezier(100-b,60, 100-b,20+b, 60,20+b,true));
//inner-top-left
pp.push.apply(pp,quadraticBezier(60,20+b, 20+b,20+b,20+b,60 ,true));

g.drawPoly(pp,true);
//g.fillPoly(pp,true);

g.drawPoly(pp,true);

g.fillPoly(pp,true);

[MaBecker]

Ups I missed the warning:

WARNING: Maximum number of points (64) exceeded for fillPoly

this is the content of array pp:

[ 20, 60, 20, 54, 21, 49, 22, 44, 24, 40, 26, 36, 28, 32, 31, 29, 34, 26, 38, 24, 43, 23, 47, 21, 52, 20, 58, 20, 60, 20, 60, 20, 66, 20, 71, 21, 76, 22, 80, 24, 84, 26, 88, 28, 91, 31, 94, 34, 96, 38, 98, 43, 99, 47, 100, 52, 100, 58, 100, 60, 100, 100, 100, 106, 99, 111, 98, 116, 96, 120, 94, 124, 92, 128, 89, 131, 86, 134, 82, 136, 78, 138, 73, 139, 68, 140, 62, 140, 60, 140, 60, 140, 54, 140, 49, 139, 44, 138, 40, 136, 36, 134, 32, 132, 29, 129, 26, 126, 24, 122, 23, 118, 21, 113, 20, 108, 20, 102, 20, 100, 40, 100, 40, 106, 42, 110, 44, 114, 47, 117, 51, 119, 56, 120, 60, 120, 60, 120, 66, 120, 70, 118, 74, 116, 77, 113, 79, 109, 80, 104, 80, 100, 80, 60, 80, 54, 78, 50, 76, 46, 73, 43, 69, 41, 64, 40, 60, 40, 60, 40, 54, 40, 50, 42, 46, 44, 43, 47, 41, 51, 40, 56, 40, 60 ]

pp.length = 184

[MaBecker]

Bumping up the vars and reduced the bezier point helped. So lets draw chars with multi poly lines to keep heap small - right?

[gfwilliams]

Personally I would. I'm not sure the difference in size between a properly simplified curve and the bezier will be that different, and the more points in the poly the slower it renders.

That bezier function looks neat though - that might be something neat to add to Espruino? At the very least as a module.

[MaBecker]

I personally like to add it to the Espruino firmware. Will try to send a pr in the next days.

[gfwilliams]

Thanks! Please can you do it with the SAVE_ON_FLASH ifdef on it though?

[MaBecker]

• a script to make an SVG with all the characters in it
• Open the SVG in Inkscape, do Object->Path and 'Flatten Beziers'
• another script to read the flattened SVG and make a font file

Have you checked opentype.js for this job?

Just checking the glyph-inspector.

[gfwilliams]

Thanks! That looks spot on - it'll make the job way easier. All that's needed it so shove in some of the code from https://github.com/gfwilliams/svgtoeagle and it should be reasonably easy to spit out the right data.

The only gotcha right now is because we don't support polygons with holes, for some chars (like O) we basically have to split the outside poly and add an inner one - but the code for svgtoeagle does that.

I'll take a look at this soon.

[MaBecker]

first try.

• create two function, this one and a internal one that can be user eg for drawing rounded rectangle
  • like graphicsSquaredBezier()
• forced to use array to pass that for vertices, because only 5 are possible, can this be increased?
  • ERROR: getArgumentSpecifier: Too many arguments to fit in type specifier, Use JsVarArray
• missing calculation of s value
• is there a smarter way to access the elements?
• not sure if I got the SAVE_ON_FLASH ifdef correctly
• the JsvIterator looks strange, is a simple way to access the array elements available?
• will run some more tests and like to get some input for optimization, before create a pr

/*JSON{
  "type" : "method",
  "class" : "Graphics",
  "name" : "squaredBezier",
  "#if" : "!defined(SAVE_ON_FLASH) && !defined(ESPRUINOBOARD)",
  "generate" : "jswrap_graphics_squaredBezier",
  "params" : [
    ["arr","JsVar","An array of three vertices, six enties in form of ```[x0,y0,x1,y1,x2,y2]```"]
  ],
  "return" : ["JsVar", "Array with calculated points" ]
}
Calculate points between start and end points, max 10 points without start and end points
*/
JsVar *jswrap_graphics_squaredBezier( JsVar *parent, JsVar *arr ){

  JsVar *result = jsvNewEmptyArray();

  if (jsvGetArrayLength(arr) != 6) 
    return result; 

  float s,t,t2,tp2,tpt;
  int sn = 6;
  int x0,x1,x2,y0,y1,y2;

  JsvIterator it;
  jsvIteratorNew(&it, arr, JSIF_EVERY_ARRAY_ELEMENT);
  x0 = jsvIteratorGetIntegerValue(&it); jsvIteratorNext(&it);
  y0 = jsvIteratorGetIntegerValue(&it); jsvIteratorNext(&it);
  x1 = jsvIteratorGetIntegerValue(&it); jsvIteratorNext(&it);
  y1 = jsvIteratorGetIntegerValue(&it); jsvIteratorNext(&it);
  x2 = jsvIteratorGetIntegerValue(&it); jsvIteratorNext(&it);
  y2 = jsvIteratorGetIntegerValue(&it);
  jsvIteratorFree(&it);

//jsiConsolePrintf("%d,%d,%d,%d,%d,%d\n",x0,y0,x1,y1,x2,y2);

  s = 0.15;

  for ( t = s; t <= 1; t += s ) {
    t2 = t*t;
    tp2 = (1 - t) * (1 - t);
    tpt = 2 * (1 - t) * t;
    JsVar *x = jsvNewFromInteger(
                         x0 * tp2 +
                         x1 * tpt + 
                         x2 * t2 + 0.5);
    JsVar *y = jsvNewFromInteger(
                         y0 * tp2 +
                         y1 * tpt + 
                         y2 * t2 + 0.5 );
    jsvArrayPush(result, x);
    jsvArrayPush(result, y);
    jsvUnLock2(x,y);
  }
  return  result;
}

first test result:

>x = g.squaredBezier([10,10,10,50,50,50]);
=[ 11, 21, 14, 30, 18, 38, 24, 44, 33, 48, 42, 50 ]

[gfwilliams]

Looks good...

I'd add if (!result) return 0; just after result = jsvNewEmptyArray(); in case it can't be allocated

forced to use array to pass that for vertices

Just do what you're doing and use ["arr","JsVarArray","An array... in the JSON. SHould be fine

is there a smarter way to access the elements?

There's jsvGetArrayItem (https://github.com/espruino/Espruino/blob/master/src/jsvar.h#L688) but your method is faster. It seems good. There are shortcuts for getting an array of bytes but getting ints is rare.

not sure if I got the SAVE_ON_FLASH ifdef correctly

looks good to me :)

the JsvIterator looks strange, is a simple way to access the array elements available?

As above. Your method is fine :)

will run some more tests and like to get some input for optimization, before create a pr

Looks good. All I'd suggest is doing:

jsvArrayPushAndUnLock(result, jsvNewFromInteger(...));

To avoid the separate unlock call and variables floating around, but that's pretty minor