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

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

1 Attachment

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);
  }
  

thanks @Gordon, 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...

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().

@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

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?

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 :)

Many Thanks @Gordon, 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

1 Attachment

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.

Hi @Mrbbp,

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

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

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

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);
  }
}

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

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

Thanks

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?

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

Regards

By the way @Gordon, 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

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.

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)

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

1 Attachment

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)

2 Attachments

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?

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)

é.

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;
  }
}

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