New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enhancement for Graphics #1702
Comments
|
|
Use a image and some javascript for rotation, like in this sample http://forum.espruino.com/conversations/344607/#comment15140533 Update: 03/13/2020 |
this would nice to have for poly functions. |
https://banglejs.com/reference#l_Graphics_drawImage Those definitely seem like good things to add. I was considering maybe moving to a better fillPoly (that could do irregular polys) then handling drawLine using that. The real bonus of a line width is you could use the HersheyText line fonts, which scale really nicely |
At the moment I use this workaround, which allows to scale and translate a array with pairs of points..
Updated: Pass a copy of the array using .slice(), otherwise the original array is updated :-( |
|
allObjects has a UI library that looks really promising which just needs adding to the EspruinoDocs repo with all his documentation - I just haven't had the time so far |
Yes this UI is very cool 😎 |
Replace optimized Ellipse with standard Bresenham algorithm to remove the spikes.Eye draw test on Bangle.js Source
Result: |
Hershey FontsStarted with diving into the hershey world. This is extremely cool. And now starting to code in javascript to figure out how simple this can be to implement into Graphics library. implement:
Add a sample
adding circles makes it look smoother. Edit: compare with existing vector font |
Do you have a PR for the new ellipse? ;) |
Yep, just added pr #1720 |
Would like to implement thickness for drawLine. Can you please advise if and how it should be implemented. |
Sounds like a good plan. I'd store lineThickness the same way we do fontAlign/etc in graphics, then check in drawPoly and run a separate bit of code. It should be ifdef'd with SAVE_ON_FLASH though. The easy way to do it would be to draw each line segment as a poly as you've done, but I think that's going to be too slow if we want to replace Vector with Hershey fonts (which I guess is the main goal?) as there'd be loads of overdraw, and really we want to work on the whole polyline The actual integration with graphics would take a while and would be a waste of your time, so if you could come up with an algorithm that would turn a polyline into a filled poly then I could integrate it. Even doing the algorithm in JS would work. Something line this - you'd need to generate the red points: In your code above i notice you're taking the angle and the using sin and cos, but that's very slow and you can actually just use the difference between coordinates:
You can even compare dx/dy with the next dx/dy using a cross product in order to work out which way the line bends (and how much) to figure out if points need adding or removing. |
... only saw your update with the Hershey font you printed while writing this. It looks great - it's hard to see how anyone would complain if the font changed :) |
Great, thanks for you guiding informations. |
Just a short update on testing hershey font using a C-Style Coordinate array for the SIMPLEX character set instead of decoding jhf. Mirrored and move chars to have same height and baseline. Also adjusted some points for a nice shape. Started with numbers 0 - 9, scaling 1.5
function to setLineWith
Not sure about those six rounding lines. |
Maybe add a function like this to handle the style.
|
Before starting to convert hershey font files to header file, some advise for output format would be helpful to create eg hershey_romans_font.h
|
Nice! About the rounding, try changing |
In other fonts I've had one array for character data, one array for # of points. It means you have to iterate through to find each character, but it immediately shaves 100 bytes off the structure because you can use 8 bits rather than 16 for the length. |
Yes, seem to be the easiest way to implement it, like you did for the vector font. |
Got a version javascript version running https://gist.github.com/MaBecker/89a8ec3314f456ccfe397593783ec8b4 What about spacing between chars? |
Are you actually doing what's suggested in #1702 (comment) ? Looks like you might just be producing one polygon per line segment? Doing one big poly would go a long way towards fixing those glitches, but I had considered maybe making the internal poly fill algorithm take coordinates that were 16x bigger (so 16 = 1 pixel, 32 = 2, etc) would help with issues like this |
Yes, just started working on this :)
Good point, will include it. |
Just added this pr #1757 for g.quadraticBezier() |
http://forum.espruino.com/conversations/344773/ Would be easy to add to firmware. |
Here's my attempt at Hershey rendering - creating one big poly rather than one per line: https://www.espruino.com/ide/emulator.html?gist=663f7d6e280e33511881a3dfff2ee30f&upload Still a few edge cases, but reasonably quick and significantly less overdraw. |
Wow, just tested, very nice! Have you thought about about chars > 127 and < 256 ? Edit: Even still quick enough on a Bangle.js |
It'll be much quicker when it's converted to C too :) Potentially we could add them, yes. Euros and degrees at least. One of the reasons for doing this was to reduce flash usage though so I don't want to bump it up too much! I'm not 100% on the characters but it strikes me that for many of them we could maybe hardcode it? So Ü = U + umlaut ? |
Obviously there's still the fillPoly issue. You wouldn't think it'd be so hard to get a reliable polygon fill algorithm! |
Yes they are called Umlaute äöüÄÖÜ plus €ß° ü = u + umlaut I was spending many hours scanning other graphic libs for a smart, short, quick and working algorithm, without success. fillPoly is not as simple as it looks. |
I like the look and feel of the chars with debug flag! |
Ok, change of plan again. A custom-made vector font seems preferable: #1824 |
time to close this ;-) |
This is just a collection of function that came in my mind when working with the excellent library.
For a better readability, will try to write one comment for each enhancement
Updated 05/29/2020
The text was updated successfully, but these errors were encountered: