Most recent activity
-
I just bodged something up
Fabulous, thanks Gordon! Your bodges look like finely honed works of art next to mine!
At first glance these look promising, some of the characters have gone a bit wonky, but very readable in the emulator and on a JS2.
Using an existing font has got to be easier than designing a new one (or multiple for different sizes) from scratch, question is are we happy to do that?
Also, is it possible to adjust the spacing between letters? When I made the mockup above I thought it was much more readable with just an extra pixel of space between each letter.
-
I like the sound of new fonts, particularly a nice range of sizes. typically I use the Vector font, it's easy to use for large sizes though not as good for small text. It would be nice to have the option for Bold text too.
Just for reference, here is the font that the Pebble watches used, and the reason they used it:Raster Gothic Condensed is the font used throughout the Pebble system, largely because it is optimized for monochromatic displays. Pebble selected this font because it allows a relatively large number of characters to be displayed on a single line, also because the font has an excellent readability vs. size ratio.
This is a paid for font, but the Rebble team has had a go at making a similar font and releasing it on Github: https://github.com/pebble-dev/renaissance
Unfortunately the fonts are only in pbf format, which I would try, but can't get to convert using the Espruino Font Converter. Does anyone know how I could get these fonts into the Bangle?
EDIT: Manually pasted the letters as Gordon did above, the bottom 2 rows are Renaissance 24 and Renaissance 18. -
Thanks for your suggestions Gordon, I tried them all, but in the end redrawing the entire screen was too slow to look good. Your
g.scrollandg.drawImagessolution was the best, but moved the widgets as well which wasn't ideal.
I've abandoned the idea of a general function to wipe to a different screen, and opened https://github.com/espruino/BangleApps/pull/2547 with the much simpler solution of just clearing the screen and redrawing the text for this clock. I'll have to come up with some more imaginative animations for my other clocks! -
I'm going to jump to the BangleJS2 defence :-)
It all depends what you want, and what you expect from a smartwatch. I've had several, and while the Pebble Time Steel was by far the best, the BangleJS2 comes a close second, and thanks to the efforts of Gordon and the community keeps improving.
I won't argue every point, but recent improvements, with fastloading, hiding widgets, speed improvements, etc. have made such a big difference it's now a very usable watch, for me.
One thing that's made a huge difference with the usability of the touchscreen, new in 2v16, is the touchscreen calibration in the settings menu. If you haven't done it yet I highly recommend it! No more stabbing around, it's now precise and reliable.
-
So now I've got colours working correctly (thanks again Hal and Gordon), I need to work on speed. See code below, but in the emulator, doing a full screen wipe takes ~6ms/frame. Exactly the same on the actual B2 takes ~228ms/frame, i.e. very very slow.
Is there anything I can do to speed this up, or is that just how long it takes to draw the whole screen? Doing only part of the screen definitely speeds things up, but not enough to look smooth.
let colormap={ 0: 0, 31: 1, 2016: 2, 2047: 3, 63488: 4, 63519: 5, 65504: 6, 65535: 7 }; let palette = new Uint16Array([ g.toColor("#000"), g.toColor("#00f"), g.toColor("#0f0"), g.toColor("#0ff"), g.toColor("#f00"), g.toColor("#f0f"), g.toColor("#ff0"), g.toColor("#fff"), 0,0,0,0,0,0,0,0 ]); let animInterval; let time_array = [] let animate = function(step) { if (animInterval) clearInterval(animInterval); slideX = -R.w; animInterval = setInterval(function() { let time_start = getTime() slideX += step; let stop = false; if (slideX>=0) { slideX=0; stop = true; } g.drawImage(g2img, slideX, R.y); if (stop) { clearInterval(animInterval); animInterval=undefined; print(time_array) print(time_array.reduce((a, b) => a + b, 0) / time_array.length) } time_array.push(Math.round((getTime() - time_start)*1000)) }, 20); }; Bangle.loadWidgets(); Bangle.drawWidgets(); let R = Bangle.appRect; // R.h = 50 let g2 = Graphics.createArrayBuffer(R.w * 2, R.h, 4, {msb:true}); let g2img = { width:g2.getWidth(), height:g2.getHeight(), bpp:4, buffer:g2.buffer, palette: palette }; g2.setBgColor(colormap[g.theme.bg]); g2.setColor(colormap[g.theme.fg]); g.setBgColor("#F00").clearRect(R); g.setColor("#0F0").setFont('Vector:15').setFontAlign(0, 0).drawString("OLD SCREEN", R.w/2, R.h/2); let screengrab = g.asImage(); g2.drawImage(screengrab, R.w - R.x, -R.y); g2.clearRect(R); g2.setFont('Vector:15').setFontAlign(0, 0).drawString("NEW SCREEN", R.w/2, R.h/2); animate(4); -
Thanks for explaining that Gordon, I think I understand better now. The new color mapping will be helpful to make sure no one else trips up on this in the future, but you're right, I'll do it with a palette so it works more broadly.
-
Thanks for your help @halemmerich, that does work, but I agree it feels like there could be a simpler solution.
Searching for 'BPP' in the forum (should have done that before I posted, sorry), shows quite a few people have had a similar problem.
It all seems to stem fromg.asImage()giving a 3 bpp buffer, but if I try tocreateArrayBufferwith 3 bpp it says:Uncaught Error: Invalid BPP. -
Hi All,
I'm hoping someone can help me understand BPP better. I'm testing out a simple animation, based on the Slope Clock, to slide the current contents of the screen off, and show a new screen. I've had this running in the emulator, but some of the colours are wrong.It should show BLACK text (wibble) on GREEN, then replace it with WHITE text (flibble) on RED.
When I take a screenshot of the screen withg.asImage, and put it in the image buffer withdrawImage, the colour changes from GREEN to BLUE.I'm sure it's a simple fix somewhere, but I'm stuck!
This is the code I've been trying:
let g2 = Graphics.createArrayBuffer(g.getWidth() * 2, g.getHeight(), 8, {msb:true}); let g2img = { width:g2.getWidth(), height:g2.getHeight(), bpp:8, buffer:g2.buffer }; let R = Bangle.appRect; let x = R.w / 2; let y = R.y + R.h / 2; let animInterval; let animate = function(step) { if (animInterval) clearInterval(animInterval); slideX = -g2.getWidth()/2; animInterval = setInterval(function() { slideX += step; let stop = false; if (slideX>=0) { slideX=0; stop = true; } g.drawImage(g2img, slideX, 0); if (stop) { clearInterval(animInterval); animInterval=undefined; } }, 50); }; g.reset().setBgColor("#0f0").clearRect(R); // clear whole background g.setFontAlign(0, 0).setFont("Vector:30").drawString("WIBBLE", g.getWidth()/2, g.getHeight()/2); let screengrab = g.asImage(); // Draw to offscreen buffer g2.setColor("#f00").fillRect(0,0,g2.getWidth(),g2.getHeight()); g2.setColor("#fff").setFontAlign(0, 0).setFont("Vector:30").drawString("FLIBBLE", g2.getWidth()/4, g2.getHeight()/2); g2.drawImage(screengrab, g2.getWidth()/2, 0); animate(3);
Great news that the font is available with a 'very permissive' license (having read the license I see why you didn't spell it out here!) Very glad to see that others also think Renaissance would be a suitable font.
I don't know enough about how Espruino works with fonts to comment on a new font renderer, or packaging. Since some of the Renaissance fonts are bold though it would be nice to be able to use that. Since they're already packaged up as PBF files could we use them directly? Would people be able to make new fonts in the same format?
In terms of how we use the fonts, I'd be happy specifying the font and size directly, especially if there was a wiki page or tutorial with examples of the different fonts and sizes. Alternatively listing them as
tiny,small,mediumandlargewould be quite user friendly, but I think having the size in the name is more useful.I really like Gordon's idea of working out the best size of font to fit the text in a space, I agree it would be great for messages. I'm actually less keen on letting the Bangle pick the 'best' font size in other situations though, I already find it slightly odd that menu items can have 2 sizes of font, I can imagine some very strange looking screens with multiple different sized bits of text looking very messy.