Search results for:

You don't need to call g.clear(), since you're just going to overwrite the entire screen with the contents of the buffer. If you remove that line the flicker should go away.

Sounds like this issue: https://github.com/espruino/BangleApps/issues/406

Nice, looks like a good solution :)

W and @ would have to be squished a bit, but I think everything else would fit as is. Mostly I just want to make a few things like the parentheses sit a bit higher. In any case, I'll experiment a bit more to see if it seems like a change worth making.

I was also pondering if it might be better in the long run to include all the accented characters directly.

Pros:

• simpler font rendering
  
• more direct control over the appearance of said characters
  
• would make it relatively easy to support custom vector fonts, since all the information required to render a font would be contained in one array + a few parameters
  
  

Cons:

• space usage
  
  

On a related note, would it make sense to store the font in a compressed form? It has a lot of small repeated elements so I think it should compress fairly well, but I guess compression would make it harder to index into it and access individual characters.

I'm afraid I can't make the angled line on the R thicker without making it entirely too thick, due to the limitation of the grid.

The small s was really tricky to design on the grid. I've attached a version that's a bit thinner and arguably more rounded, but I'm not really sure if I like it more... it ends up looking kind of slanted or skewed to me.

I've added ¡¢£¤¥¨©«¬®¯°±´µ·¸»¼½¾¿ÆÇÐ×ØÞßæçð÷øþ. I also added a dotless i to the accent list.

At this point the accent handling code should only have to handle the accents ◌̀◌́◌̂◌̃◌̈.

The only ISO 8859-1 symbols still missing are §ª²³¶¹º.

@Gordon, would it work to give each letter a something like a 14x18 grid instead of the 16x16 grid, and encode the points as x+y*14? After seeing the font in action there's a few symbols that I think would benefit from a bit more vertical space.

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

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

@MaBe I'm just using Inkscape.

@Gordon I'm not sure if I'm the best judge of what's used much... I'll do my best though. I should have some time to work on it more tonight.

I'm a bit confused about code pages, by the way. The Espruino fonts page says it uses ISO8859-1 / the first 255 code points of Unicode, and then mentions the Euro symbol, which neither of those contain. The FontDylex7x13 font appears to be using the Windows-1252 code page - is that where the Euro symbol comes from?

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

I can add those. ß is currently mapped to B, but it should probably be its own character. The same goes for some of the other non-ascii characters, like ash and thorn.

@Gordon - would you like me to go ahead and add the rest of the ISO-8859-1 code page?

Nice! It's great to see this in the emulator :)

What is your feeling about font sizing?

It might be nice to stay visually similar to the old font, so that people don't have to adjust their existing code as much. Is it smaller because you're leaving room for diacretics? (Edit: nevermind, diacritics do not appear to be included in the font height.)

By the way, I notice that there appears to be missing vertices in a lot of characters. Did you by any chance use svg2bangle with default settings for the initial conversion? If so, you should make sure you run it with the error tolerance set to 0 so that it doesn't do any unwanted simplification.

I agree that there is no general rule that will always feel "right".

45 degree edges in particular are ambiguous because the edge will always pass directly through the center of each pixel. Take the first square in the attached image, with two triangles sharing an edge - should the pixels along the edge (marked in yellow) be part of the first triangle, or the second?

One way to remove the ambiguity would be to offset the edge by a fraction of a pixel, as shown in the second square - but that would require fillPoly to accept fractional coordinates.

I keep meaning to get into 3D printing! My office has a makerspace with a 3D printer, but nowadays I'm working from home so I can't access it :(

I was finding the cable by itself a bit annoying, so I dug out some old Lego bricks and made a charging stand. It works pretty well - I can stick the watch on top and it just snaps in place thanks to the magnets.

Pics attached.

I think special casing the diacretics makes a lot of sense, especially since I didn't leave enough space above the letters to fit them in properly. 😐

For the width of each character, could you just find the rightmost point and base it on that? Although I guess that would mean hardcoding the width of the space.

The poly rendering is difficult - it seems for most graphics work you fill up to the top left pixels, but then one pixel in on the bottom right (to stop overdraw when two polys touch) but I'm not sure if that's actually what we want, as I'm pretty sure when I tried it the result was pretty bad.

I think that's exactly what you want in this case, where you have shapes you want to be able to scale up and down without affecting their proportions. Including the bottom right pixel effectively makes things a pixel larger than they should be, which can be a big difference at small sizes.

It might help to think of the coordinates as specifying grid locations between the pixels, rather than the pixels themselves.

And for the sake of completeness, here it is rendered in the emulator.

I doubt the 1x scale results are ever going to look quite as good as a handcrafted pixel font, since the rasterization algorithm has to deal with things like pixels that are perfectly subdivided by an edge. That said, I think it'll definitely look better if fillPoly can be improved. Some notable quirks:

• The top bar of letters like E, F, and Z are one pixel thicker than they should be
  
• There should be a 1 pixel gap between the two marks in the double quote, but it comes out looking like a solid block
  
• You get can get notably different results from some shapes just by reversing the order of the points (this is the difference between the two bars of the uppcase K, for instance)
  
  

The 2x and up results look pretty good, though, which I assume is the more important use case.

Here's my go at the full font, covering the ASCII range. I tried to break things up in such a way as to avoid the scanline issue, so there's more individual shapes than would otherwise be necessary.

Let me know if there's any modifications or additions you would like me to make :)

And here's the above characters rendered on the Bangle.js, using my svg2bangle tool. At 2x scale they generally look pretty good, but at 1x scale it gets a bit quirky. Part of the issue is that fillPoly doesn't preserve symmetry - the same pattern of points doesn't produce the same pattern of pixels when mirrored vertically or horizontally.

Here's the emulator link: https://www.espruino.com/ide/emulator.html?gist=c6dcac546c7247108f7c2255251d6c03

I'm a bit on the fence about Hershey - maybe the performance isn't too big a deal. The issue IMO is when you get to the middle-ground of 2px wide lines where it'll look quite rough using a filled polygon. Higher sizes can be made to work well.

On the flipside, with the hershey fonts people can always tweak the line thickness until it looks good to them. With a regular poly font you get no such freedom.

Well, the current vector font averages ~30 points each for the 95 available characters. If we could do that it'd roughly halve the size, but hopefully we could get a bit under.

I made some sample characters in a few different styles. The top two rows are as smooth as I could manage given the limitations of the grid, averaging 20 points per characters. The next two rows are a bit more angular, averaging ~17 points per character. The last two rows are as minimal as I could manage, averaging ~15 points per character.

I'd be personally inclined to go with the first style, since it scales up nicely and still stays significantly under the ~30 points per character of the original font, but I'd be curious to know what other people think.

(This is using the single poly per character method - if I break it up into multiple polys that'll inflate the point count a little bit)

I'd like to take a stab at the font design. Is there an average number of points per character I should try to target?

As an aside, the work MaBecker's been doing on Hershey fonts looks pretty darn nifty. That would definitely be the better looking solution if it can be made performant enough.

As far as I can tell, there's no good way to request a weather report
right now from the bangle.js, seems like we can only passively receive
updates from the gadgetbridge weather app? I think it would be really
great if there was a way to execute any sort of arbitrary API request
from bangle.js apps. Is this possible?

For this specific case you could look into adding a new "requestweather" message to the Bangle.js <-> GadgetBridge protocol, which is documented here and implemented by GadgetBridge here. I don't think there's any way of doing completely arbitrary API requests at the moment, though.

Apologies if I'm mistaken, but I think @rigrig wrote the code to
accept gadgetbridge weather notifications while using @NebbishHacker
hacker's lovely code for displaying the weather itself. Not sure who
wrote the code to persist to storage... I didn't think it was that
important to be so specific in an informal forum post.

This is correct, I only contributed the mock up in the emulator. @rigrig deserves all the credit for making it into an actual app :)

Ah, cool! I'll likely contribute some more changes to this myself when my watch finally arrives, but in the meantime it's great to see this turned into something people can actually use :)

Actually, here's a simpler method: create a new graphics object that uses a 1-bit buffer, use getPixel and setPixel on that, and then draw it to the screen as an image.

// Create the buffer
let b = Graphics.createArrayBuffer(240, 240, 1, {msb: true});

// Get and set pixels
b.setPixel(x, y, 1);
let value = b.getPixel(x, y);

// Draw to screen
g.drawImage({width: 240, height: 240, bpp: 1, buffer: b.buffer});

Were you using a regular JS array? Regular JS arrays and booleans have a lot of space overhead - the most space efficient option would be to use an Uint8Array, and then access the individual bits of each byte using bitwise operations.