SVG2Bangle converter

Posted on
  • 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/svg2ban­gle
    The tool itself: https://nebbishhacker.github.io/svg2bang­le
    Demo: https://www.espruino.com/ide/emulator.ht­ml?gist=7eda1614a48719190c7823cb10068f40­

  • 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/EspruinoWebT­ools 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??

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

SVG2Bangle converter

Posted by Avatar for NebbishHacker @NebbishHacker

Actions