joric / qle Goto Github PK
View Code? Open in Web Editor NEWQMK Logo Editor
Home Page: https://joric.github.io/qle
License: The Unlicense
QMK Logo Editor
Home Page: https://joric.github.io/qle
License: The Unlicense
As far as I can tell, there is no reason an imported image can't be bigger than 256 pixels in one dimension since the image's ratio has no influence on the outputted bytes. The bytes simply correspond with 1x8 pixel sections that freely wrap around at the end of an image row to produce the one-dimensional byte array output.
I was trying to parse the bytes for an image of size 270x32, namely this one:
In this font, each character is 4 qmk-font-rows high and I arranged all the characters in one single row on the image so it's easier to find the matching sections of characters when displaying them (e.g. to display a 1
I write bytes 4 and 5 in the first OLED row, bytes 34 and 35 in the second and so on).
To use this tool as it is, it was necessary to rearrange the image like this
to avoid the hard 256 pixel limit on the width and still get the same arrangement for easy displaying. The same exact byte output can also be achieved by simply removing the code snippet that limits the image's dimensions and using the first image that would otherwise be too wide.
Steps to reproduce:
static const char PROGMEM font[] = {
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF,
};
Other images work just fine.
When editing font or raw, the byte array is updated immediately. However when editing logo, it doesn't seem to ever update the byte array. There are no errors thrown to the JS console.
Specifically, for the RAW mode. So that you can use a rotated image?
Namely, don't parse comments in files.
Instead of having a set size based on the keyboard, it would be nice to have a number of options, or even a "custom" option. Eg:
This will allow a lot more customization of the OLED screen and the possibility of doing animations that are not full screen.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.