mneumann

mneumann

Scenic.FromSVG - Rapid UI prototyping for Scenic

TLDR; Prototype your Scenic UI scenes in Inkscape or other SVG editors, then quickly fire it up in Scenic for display or generate code representing Scenic primitives that you can then hand-modify to your needs.

While it can display SVG already pretty well, by translating SVG to Scenic drawing primitives, either at runtime or compile-time, it’s not intended to be a general purpose SVG viewer.

More information, sources and packages:

hex.pm

https://github.com/mneumann/scenic_from_svg

Most Liked

Eiji

Eiji

That’s very interesting! If you don’t mind here are some ideas:

  1. It’s fine that it converts SVG code like it does now, but another interesting feature would be to generate the full Scene page, so the generated code could be easy to modify.

  2. It would be amazing if you could support also SMIL especially together with 1st point would allow to convert automatically generated SVG images and import them in scenic-based project, see example SVG+SMIL generator: https://loaders.holasvg.com/

  3. I believe that parse_color/1 should support all HTML color names + they should be lowercased before matching on them, see: Color Names – HTML Color Codes

  4. Functions in module Scenic.FromSVG.Path does not have any documentation and specification. I would also consider to add at least one example to each function since not everyone interested in library may known well scenic.

  5. Consider using String.t() instead of binary. I would even write a svg type, so in specification users would firstly see svg instead of binary. If you do not want to introduce a new type you can always write svg :: binary in the function specification.

mneumann

mneumann

Hi Eiji,

Thanks a lot for your valuable input.

  1. A mix “generator” task, right? mix scenic.from_svg.gen …
  2. SMIL - that sounds like a separate project :). Definitively interesting. Are there any open-source editors that produce SMIL animations?
  3. Good point. Will add all HTML color codes.
  4. I will simplify the interface and only expose one public function, and document it. The Scenic.FromSVG.Path was actually intended to be a private module… bu that’s something that Elixir doesn’t have, I guess :slight_smile:
  5. Having separate type for svg makes sense!

Thanks again for you input!

axelson

axelson

Scenic Core Team

Nice library!

In the past for fun I’ve experimented with SVG parsing for scenic by using nimble parsec. I’m not sure if any of the details will be especially interesting to you but here is the code:

https://github.com/axelson/impression_dash/blob/eb25b09e6b11240156f66bc09d975ba1db5f3cb5/lib/web_color_parser.ex

https://github.com/axelson/impression_dash/blob/eb25b09e6b11240156f66bc09d975ba1db5f3cb5/lib/svg_path_parser.ex

Although I guess I don’t parsed named web colors.

Where Next?

Popular in Announcing Top

mathieuprog
Hello :waving_hand: Allow me to introduce you to Tz, an alternative time zone database support to Tzdata. Why another library? First a...
New
jakub-zawislak
Hi everyone, I’m coming from the Symfony (PHP) framework. I like Phoenix, but it has a one thing that was build much better in the Symfo...
New
brainlid
LangChain is short for Language Chain. An LLM, or Large Language Model, is the “Language” part. This library makes it easier for Elixir a...
New
zorbash
I created Kitto a framework for dashboards inspired by Dashing. The distributed characteristics of Elixir and the low memory footprint...
New
type1fool
WebAuthnLiveComponent WebAuthnComponents See this post about renaming the package. Passwordless authentication for Phoenix LiveView app...
New
Crowdhailer
Raxx is an alternative to Plug and is inspired by projects such as Rack(Ruby) and Ring(Clojure). 1.0-rc.1 is now available. To use it re...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36352 110
New
michalmuskala
Another small library today. PersistentEts Hex: persistent_ets | Hex GitHub: GitHub - michalmuskala/persistent_ets · GitHub Ets table ...
New
archan937
It is a well-know topic within the Elixir community: “To mock or not to mock? :)” Every alchemist probably has his / her own opinion con...
New
scohen
Lexical Lexical is a next-generation language server for the Elixir programming language. Features Context aware code completion As-you...
New

Other popular topics Top

New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 43487 311
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52673 488
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement