I made a tool to convert SVG files into a format that's easier to render on a Bangle.js. Just feed the SVG through the converter, paste it in your source file, slap in some rendering code, and away you go!
The converter itself is moderately limited, but it should work for simple graphics. It basically converts all the shapes in the SVG into lists of points that can be fed to drawPoly or fillPoly.
I won't be able to test this outside the emulator until my smart watch arrives, so I would love to hear reports as to how well it works :)
GitHub repo (including the code for rendering the final output): https://github.com/nebbishhacker/svg2bangle
The tool itself: https://nebbishhacker.github.io/svg2bangle
Wow, this look really great!
On the watch it is more like a stop motion animation where you can see all the elements appear one by one. But otherwise it is working correctly, displays fine.
This is awesome, thank you! I'd hacked something up a while back for loading SVGs into PCBs (https://github.com/gfwilliams/svgtoeagle) and I'm going to have to change it now to use your method of getting SVG points out :)
Do you think it'd make sense to have an option to output the data as a series of draw calls as well?
Is it something you'd consider adding to https://github.com/espruino/EspruinoWebTools and maybe letting me a page to espruino.com along the lines of http://www.espruino.com/Image+Converter for?
@NebbishHacker, you rocks!!!
This is a super cool tool that is a good candidate to add in Esprunio web use tool chain.
I drew some inspiration from svgtoeagle when I was putting this together ☺️
Adding an option to output draw calls directly would be easy enough. The only downside is that the draw calls wouldn't allow for convenient on-the-fly translation/rotation/scaling.
Having a page for this on espruino.com would be great ☺️. I'll see about adding it to the EspruinoWebTools repo when I find the time.
Great work, thanks for sharing it!
Hi @NebbishHacker, How about compress the output using heatshrink??
Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.
For a full reference visit the Markdown syntax.
© Espruino, powered by microcosm.
Report a problem