Had space(more than 1px) between letters with custom font

[espruino-discuss3]

Posted at 2017-03-25 by Mrbbp

Hello,
I'm newb with espruino (i love using javascript for produce string... So gorgeous in front arduino...)
Sorry for the stupid question.
I've customized DennisFont8 to produce a DennisFont16, it works, but there is only 1 px (one pixel) between each letter, is there a way to had one more?
To have 2 pix in fact.
Best regards

éric

---

Attachments:

• 2017-03-18 11.37.20.jpg

[espruino-discuss3]

Posted at 2017-03-27 by @gfwilliams

Looks really nice! There's no 'padding' in drawString - I'm pretty sure it puts each character one after the other. I guess you have 2 options:

• Change your font to add another column or 2 of pixels after each character
• Override drawString - you should be able to do something like:

g._ds = g.drawString;
g.drawString = function(s,x,y) {
  s=s.toString();
  for (var i=0;i<s.length;i++)
    g._ds(s[i],x+i*10,y);
}

---

Posted at 2017-03-27 by Mrbbp

thanks @gfwilliams, and if i follow, the "10" is the step for letter width + kerning?

The other way:
i've used the online tool to convert and check the autoWidth, i should try with a fixed width with a double pixel as kerning...

---

Posted at 2017-03-27 by Mrbbp

I've try to compile with static width but the font doesnot seems to work, i've got an error with setDennisFont16() fonction...
works with the js with automatic width, not with the fixed width...
i'll try to ovewrite the default drawString().

---

Posted at 2017-03-27 by Mrbbp

@gordon, it works, BUT, the DennisFont has no fixed width. there is less width for an "i" or "l" than a "e"... and there is a gap...
i've tried that

g._ds = g.drawString;
  g.drawString = function(s,x,y) {
  s=s.toString();
  for (var i=0;i<s.length;i++)
    g._ds(s[i],x+=(g.stringWidth(s[i])+2),y);
  };

it does not work for fine letter as i, l

any idea?
regards

---

Posted at 2017-03-27 by @gfwilliams

I guess the font tool adds just 1px of padding, and it isn't configurable. Unfortunately it looks like it's server-side so you can't easily fix that. You could use the command-line tool that i originally made, and could modify the place where that adds an extra column? https://github.com/espruino/Espruino/blob/master/scripts/create_custom_font.js#L58

I guess what you could do is use Espruino to re-encode the fonts yourself. I'll see if I can come up with an example.

Your use of g.stringWidth looks like it should work fine - could you maybe print the values you're getting from it and see if they are changing?

---

Posted at 2017-03-27 by @gfwilliams

Ok, so this is more for your interest than anything else. Using an Espruino Pico with a PCD8544 display, this code actually creates a new double-size font (with spaces) on the Espruino itself:

A5.write(0); // GND
A7.write(1); // VCC

var charFrom = 32;
var charTo = 126;
var charHeight;
var charWidths, charData;

function doFont() {
  var height = 6;
  var gbig;
  var gsmall = Graphics.createArrayBuffer(height*2, height, 1);
  var totalWidth = 0;
  for (var i=charFrom;i<=charTo;i++)
    totalWidth += gsmall.stringWidth(String.fromCharCode(i)*2);
  charWidths = "";
  charHeight = height*2;
  charData = "";
  for (i=charFrom;i<=charTo;i++) {
    console.log("Char "+i);
    var ch = String.fromCharCode(i);
    gsmall.clear();
    gsmall.drawString(ch);
    var w = gsmall.stringWidth(ch);
    gbig = Graphics.createArrayBuffer(charHeight, w*2, 1,{msb:true});
    gbig.setRotation(3,true);
    for (var y=0;y<height;y++)
      for (var x=0;x<w;x++)
        if (gsmall.getPixel(x,y))
          gbig.fillRect(x*2,y*2,x*2+1,y*2+1);
    charWidths+=String.fromCharCode(gbig.getWidth());
    charData += E.toString(gbig.buffer);
  }  
}


// Setup SPI
var spi = new SPI();
spi.setup({ sck:B1, mosi:B10 });
// Initialise the LCD
var g = require("PCD8544").connect(spi,B13,B14,B15, function() {
  // When it's initialised, clear it and write some text
  g.clear();
  doFont();
  g.setFontCustom(charData, charFrom, charWidths, charHeight);
  g.drawString("Hello",0,0);
  g.flip();
});

You could then re-encode it with btoa and make your own custom font again.

It'll only work if width*height of each character in the new font is a multiple of 8, but for your case that should be fine.

You should be able to modify that to just print your existing font (not doubling the size) while also adding a blank column.

Honestly though - I'd just use the code I linked above and change the number for padding :)

---

Posted at 2017-03-27 by Mrbbp

Many Thanks @gfwilliams, it works great!
I use it with DennisFont (cause i'm writing in french, have to had more chars, count until 255) with a height of height (arf)
i keep line 4 to 34 and modifying as follow after

require("FontDennis8").add(Graphics);

function centre(text, y) {
  g.drawString(text, (g.getWidth() - g.stringWidth(text))/2, y);
}

function init() {
  g.clear();
  g.setFontDennis8();
  centre("en attendant",22);
  g.flip();
  doFont();
  g.clear();
  g.setColor(1);
  g.setFontDennis8();
  centre("en short",22);
  g.fillRect(10,0, g.getWidth()-20, 18);
  g.setColor(0);
  g.setFontCustom(charData, charFrom, charWidths, charHeight);
  centre("Ta m\xe8re",2);
  // affiche
  g.flip();
}

var g;
function onInit() {
  // initialise l'écran oled
  I2C1.setup({scl:B6,sda:B7});
  g = require("SSD1306").connect(I2C1, init, { height : 32 });
}

regards

éric

---

Attachments:

• 2017-03-27 23.38.25.jpg

---

Posted at 2017-03-28 by @gfwilliams

Looks great!

I quite like the pixellated look, but if you did want to do your own font it should be possible to find/make some tool that created a higher resolution font tile that you could then import.

---

Posted at 2017-04-14 by @MaBecker

Hi @mrbbp,

like the small oleds you are using, can you please share where you ordered them?

@gfwilliams this is what I was thinking about for #978 - thanks for sharing!

---

Posted at 2017-04-14 by Mrbbp

Hi @MaBecker,
They come from ebay, hongkong
0,98" 128x32 i2c oled display they are in white and blue. Be aware in the description
Regards

---

Posted at 2017-04-14 by Mrbbp

And i discovered that the é was 1pix larger. I redesign minus with 1 pix larger.
The fontDennisAlternate

/* Copyright (c) 2015 Dennis Bemmann. See the file LICENSE for copying permission. */
/*
FontDennis8Alt.js
==============

from fontDennis8
Redesign mrbbp

Usage:

require("FontDennis8Alt").add(Graphics);
g.setFontDennis8Alt();
g.drawString("\x90 \x91\x92\x93\x94\x95\x96\x97 Dennis8 \x9f \x8c \x8d \x89",0,0);
g.drawString("ça ¿sí? \xbc\xa3 \xbd\xb5\xa6 \x82\x83\x84\x85 \xac\xad\x86",0,12);
g.drawString("\xa0 Bäh böse Ärzte in Küche\xaf",0,24);

*/
var font = atob("AAAAAPoAwADAAFhw2HDQAGSS/5JMAGCW+DzSDAxSolIMEsAAPEKBAIFCPABIMOAwSAAQEHwQEAABBgAQEBAQAAIAAwwwwAB8ipKifABA/gBChoqSYgCEkrLSjAAYKEj+CADkoqKinAA8UpKSDACAgI6wwABskpKSbABgkpKUeAAiAAEmABAoRAAoKCgoKABEKBAAQIqQYAA8WqW9RDgOOMg4DgD+kpKSbAB8goKCRAD+goJEOAD+kpKCAP6QkIAAfIKCklwA/hAQEP4A/gAMAgIC/AD+EChEggD+AgICAP5AIED+AP7AMAz+AHyCgoJ8AP6QkJBgAHyChoN8AP6QmJRiAGSSkpJMAICA/oCAAPwCAgL8AOAYBhjgAPAOMA7wAMYoECjGAMAgHiDAAI6SosIA/4EAwDAMAwCB/wBAgEAAAQEBAQEBEn6SggQABCoqKh4A/iIiIhwAHCIiIhQAHCIiIv4AHCoqKhgAEH6QkIAAGCUlJR4A/iAgIB4AvgACAQG+AP4ICBQiAPwCAgA+IB4gHgA+ICAgHgAcIiIiHAA/JCQkGAAYJCQkPwA+ECAgEAASKioqJAAg/CIiADwCAgI+ACAYBhggADgGCAY4ACIUCBQiACEZBhggACImKjIiABBugQDnAIFuEABAgMBAgAA8WqWlQjxw+Hz4cABwOHAAIGD+YCAACAz+DAgAEDh8EBAAEBB8OBAAfERERHwAfET0JFwAfFRsVHwA/nw4EAAQOHz+AAIAAgACAHx8fHx8AP7+AP7+AAKKUiICAAIiUooCAD5i7mI+AAICAgICAAYGBgYGAA4ODg4OAB4eHh4eAD4+Pj4+AH5+fn5+AP7+/v7+AP7+/v7+AAAAAAD+AP7+AP7+/gD+/v7+AP7+/v7+ADg4fP7+AAwM8EAgAJ4AOET+RAgAEnySggQARDgoOEQAqGg+aKgAKHyqqoIABFKqlEAAkKSopJAA/oK6kv4AEqqqqnoAEChUKEQAOHx8fDgAOFRsVDgA/oKmiv4AEBgcGBAAYJCQYAAiIvoiIgBImKhIAIioqFAAIECAAH8EBAh8AGCQ/oD+ADAwAAAAAABI+AgAOUVFRTkARChUKBAA6BYqX4IA6BApU40AqPgGCh8ABglRAgAOlGQUDgAOFGSUDgAOVJRUDgBOlJRUjgCOOMg4jgAOVLRUDgA+SP6SkgB4hIWHSAA+qmoqIgA+aqoqIgA+aqpqIgA+qiqqIgCifiIAIn6iAGK+YgBiPmIAEH5SQjwAfpCIRL4AHKJiIhwAHCJiohwADFKSUgwATJKSUowAvEJCQrwAIhQIFCIAPkNdYT4APIJCAjwAPAJCgjwAHEKCQhwAvAICArwAIBBOkCAAgf8lJBgAf5KSbAAEKqpqHgAEKipqngAEKmqqXgAEaqqqXoAEqioqngAEKmqqXgBMUjxSNAAYJSckCAAcqmoqGAAcKmqqGAAcaqpqGAAcqiqqGACifgIAIn6CAGK+QgBiPkIApEqqGgwAXpCQToAADJJSEgwADBJSkgwADFKSUgwATJJSkgwAnCIinAAQEFQQEAA6TFRkuAAcAoJCHgAcAkKCHgAcQoJCHgAcQgICXgAwCkqKPACB/xUIADCKCoo8AA==");
var widths = atob("BAIEBgYGBgIEBAYGAwUCBQYDBgYGBgYGBgYCAwQGBAUGBgYGBgUFBgYCBgYFBgYGBgYGBgYGBgYGBgUDBQMEBgYGBgYGBgYGBgIFBgQGBgYGBgYGBQYGBgYGBgQCBAYGBgQGBgYGBgYGBQUGBgYGBgYGBgYGBgYGBgQCAwQFBgYGAgYGBgYGBgYGBgYGBgYGBQYFBQQGBgMEBAYGBgYGBQYGBgYGBgYGBgYGBgQEBAQGBgYGBgYGBgYGBgYGBgYFBgYGBgYGBgYGBgYGBAQEBAYGBgYGBgUGBgYGBgYGBQY=");

exports.add = function(graphics) {
  graphics.prototype.setFontDennis8Alt = function() {
    this.setFontCustom(font, 32, widths, 8);
  }
}

---

Posted at 2017-04-14 by @MaBecker

Thanks, can you please share a link, because the last one I ordered did not work(ebay.de/itm/201537040004).

---

Posted at 2017-04-15 by Mrbbp

http://www.ebay.fr/itm/172435137027?_trksid=p2057872.m2749.l2649&ssPageName=STRK%3AMEBIDX%3AIT
from sensmart

---

Posted at 2017-04-16 by @MaBecker

Thanks

---

Posted at 2017-04-18 by @gfwilliams

Yes, I know what you mean about #978, but I think it's a pretty rare use case when the vector fonts are available - and it's pretty easy to work around with the font that @mrbbp has just posted.

@mrbbp do you want to add this as a new font library on the Espruino site?

---

Posted at 2017-04-18 by Mrbbp

@gfwilliams Yes, but i'm not the original designer, i just modified the minus and accents... You have to ask to DennisFont designer...

Regards

---

Posted at 2017-04-18 by Mrbbp

By the way @gfwilliams, does the ide use a cache when compile with a new module?
When update the font, i have to rename the module at each iteration to use the updated version in the espruino board.
Is there a better/easier way to disable cache?

Regards

---

Posted at 2017-04-18 by @gfwilliams

The IDE shouldn't cache the module... Are you serving it from a website somewhere? It could be that the website doesn't transfer it with the no-cache headers so something along the line (maybe even just Chrome) is cacheing it for you.

---

Posted at 2020-05-20 by Mrbbp

Hello,

I go back up and update this post with a question about kerning again! (yes i'm graphic designer with graphic design concerns)

I asked my students to draw a ** slanted ** font on an LED matrix to be able to work on the graphics of the texts displayed. (of course if the work is successful we will share the drawn fonts)

This time I need to decrease the space between the letters (i think, not sure)

Perhaps I am wrong on the mode of operation, but if the text algorithm, detects the last drawn pixel of a letter then adds a space of 1 pixels, on a slanted font, the kerning will be too large.

I wish I could chain the letters a pixel or two kerning, like the example provided. (for my point of view, the kerning is too short)

@gfwilliams, Do you think DrawString is able to draw font as in the picture?
 
regards

---

Attachments:

• test mot.jpg

---

Posted at 2020-05-20 by Mrbbp

some other test

The first pic is with a kerning of 2 px (as it should be)
The second pic is with a 1 px space between letters (as it should not)

---

Attachments:

• test mot_2px.jpg
  
• test mot_large.jpg

---

Posted at 2020-05-20 by @gfwilliams

Hi - I'm afraid right now drawString won't handle any kind of overlap at all :( What I'd suggest is maybe drawImage? There's a neat function called createImage: http://www.espruino.com/Reference#l_Graphics_createImage

So you could do:

var font = { 
  A: {width:2,img:Graphics.createImage(...)},
  B: {width:2,Graphics.createImage(...)},
  ...
}

Then create your own drawString function?

---

Posted at 2020-05-20 by Mrbbp

ok!
is there a simplier way to draw?
can i draw with drawString only one letter in an image?
i prefer the way you use a font with a picture than use x, space and carrier return...to draw my font... it look like in Arduino.

well and after using drawImage i suppose i have to paste the drawing with g.drawImage(img,0,0)?
can i overlapping ?
0+1 = 1
1+1 = 0
1+0 = 1
?

in Photoshop it's call "product" mode. black is transparent (0), white is opaque (1)

é.

---

Posted at 2020-05-21 by NebbishHacker

Here's a method to draw some text with whatever adjustment to the spacing you want:

function drawStringWithSpacing(text, x, y, spacing) {
  for (var char of text) {
    g.drawString(char, x, y);
    x += g.stringWidth(char) + spacing;
  }
}

---

Posted at 2020-05-22 by Mrbbp

thanks @nebbishhacker, but the question is now to overlap on previous drawn letter.
Cause with a slanted font the width's letter is not the place for the next letter as in comment #21

---

Posted at 2020-05-22 by NebbishHacker

You can make the letters overlap by passing a negative spacing into the function I posted:

drawStringWithSpacing("foo", 0, 0, -1);

---

Posted at 2020-05-23 by Mrbbp

Thanks @nebbishhacker for the code.
the slanted font need a different width to have a good kerning.
I use a fixed size font of 9x8 px.
i had an array to specify the with of each letter for a correct kerning

//                    a b c d e f g h i j k l m n o p q r s t u v w x y z
var largeurLettres = [3,0,0,0,6,5,4,0,3,5,5,3,8,0,0,0,5,5,0,4,0];
function drawStringSlanted(text, x, y) {
  var largeur = 0;
  for (var char of text) {
    g.drawString(char, x, y);
    index = char.charCodeAt(0);
// 65 is my offset in the array for lowercase (i do  not draw all the font) and 32 for my first char (space)
    x += (largeurLettres[index-(65-32)]+ 2);
  }
}

---

Attachments:

• Test gratte floriane.mp4
  
• Font8x8_modele_Floriane.png

---

Posted at 2020-05-24 by NebbishHacker

Nice, looks like a good solution :)