Comments (8)
Hi @mwittig !
This is a great question.
There's been no tool to create fonts, which makes things really limiting. As a result, after you opened this issue I put together a little tool to do this (with monospaced fonts only for now). Could you please test it out for me and let me know if it works for you? It works pretty well on my end with a 128x64 OLED screen:
Try it here: http://noopkat.github.io/oled-js-font-foundry/
Before you do anything though, please also update your version of oled-js to 4.0.0 - I just released it to support larger fonts, which is crucial to get these new fonts working.
Require and use the resulting javascript file as you normally would when following the documentation for writeString
. Let me know if this is unclear or if you run into problems!
Thanks 😁
from oled-js.
quick example gist https://gist.github.com/noopkat/a7735be51ed167534254
from oled-js.
HI @noopkat,
Thank you so much for considering my question so quickly and the sollution you have provided. I am impressed by the sollution you have come up with!
I have followed your instructions and I was able to produce usable results with "Courier" and "LucidaConsole", however, "Monaco" produced garbled output on the OLED dsiplay. May be the results also depend on the Browser used. So far, I have been using Chrome M46. See my results here: https://gist.github.com/mwittig/e42a4ff001e9f60418d9
I also noticed that the resulting characters for LucidaConsole have some strange artefacts (see digits 6 and 8 in particular). May be anti aliasing is causing this. I have found the following article which is suggesting that anti aliasing can be switched off for the canvas, but I have not tried this yet. See: http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element
PS: Monaco12pt.JPEG actually shows the results for Monaco 14pt, however, Monaco 12pt will also produce garbled output.
from oled-js.
Hi, thanks for your reply!
Yeah, those artefacts are totally the anti-aliasing at work there, which seems impossible to turn off 😞 .
I had a go at turning the smoothing off when first writing this, but it didn't seem to work. This morning I added it back in on your suggestion, and also set the canvas to translate 0.5px each way (which Stack Overflow says sometimes fixes it), but it appears that canvas still doesn't have any API methods to turn it off for real for text. I believe it's at the mercy of the browser upon a little research I did today. This is a real annoying thing, huh! 😁
I think a robust solution might be to have a list of common fonts to choose from, and some ImageMagick processing on the server-side to get it going without antialiasing. I haven't given up yet haha.
To address your Monaco issue - I am hypothesizing that perhaps the Monaco font is named something slightly different on your computer? The app just uses fonts available on your computer only. For example, I don't have LucidaConsole (I'm on OSX El Capitan) and as a fallback the app uses your browser's default sans-serif font, which is probably not monospaced. Variable width fonts will definitely cause the weird garble you shared in your photos (which were immensely helpful to debugging, thank you!)
Do let me know if this is not it and we can dig further.
from oled-js.
also I forgot to mention - you can change the linespacing of your text too (the last arg in writeString
), which also accepts negative numbers. I found with the custom fonts that a value of around -4 can produce a nicer look.
from oled-js.
Hi,
thank you very much for the swift reply! It's a pity disabling anti-aliasing does not work for the web canvas as expected. I'll also try MacOSX / Safari which might produce better results than Win10 / Chrome what I am normally using. It may also be that some fonts are not supported on Win 10 and that "Monaco" is mapped to some default font - most likely a variable width font as you say. Btw, the latter can be avoided by setting the "generic-family" to "Monospace" as part of the font setting - see http://www.w3schools.com/cssref/pr_font_font-family.asp
I also thought about investigating the ImageMagick processing you suggested. I think this is by far more complex to implement. So, I think I'll stick to using the "Coruier" font which produces good results.
from oled-js.
ah - I forgot monospace
is a valid font-family
default, thanks!
from oled-js.
Oled-js font foundry
is now documented in the oled-js README, closing this issue.
from oled-js.
Related Issues (20)
- ssd1322 and othe chip support HOT 1
- transfer chunks of data HOT 15
- Scroll Size
- Cannot read property 'send' of undefined [IO plugins support] HOT 1
- `opts` need to be passed through to i2cConfig HOT 4
- ES6/ES7? HOT 2
- Change SDL and SCL pins for Arduino? HOT 1
- Unable to utilise oled-js HOT 1
- use .npmignore to cut down package size HOT 3
- Color arg for writeString not working HOT 1
- How to position a bitmap or png picture on the screen if not taking all the size of the screen HOT 3
- OLED SSD1306 - Layouts and mixing text and logo with auto size
- Using the display with a raspberry Pi HOT 1
- SPI resources HOT 3
- What is the expected refreshrate for I2C OLED screens? HOT 1
- SPI screen slow drawing question
- export types for use in typescript
- catch all errors possible with helpful Error() reponse
- Set contrast manually
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from oled-js.