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

sasajuric
I’d like to announce a small library called boundaries. This is an experimental project which explores the idea of enforcing boundaries ...
New
mischov
import Meeseeks.CSS html = HTTPoison.get!("https://news.ycombinator.com/").body for story <- Meeseeks.all(html, css("tr.athing")) do...
New
josevalim
Hi everyone, We would like to announce that Plataformatec is working on a new MySQL driver called MyXQL. Our goal is to eventually integ...
New
Crowdhailer
The latest release of Ace (0.10.0) includes serving content over HTTP/2. I have started writing a webserver to teach my self more about...
New
bluzky
You may know https://ui.shadcn.com/, a UI component library for React. I really love it’s design style and components. I’ve built some co...
384 14136 119
New
Crowdhailer
Experimenting with this code. OK.try do user <- fetch_user(1) cart <- fetch_cart(1) order = checkout(cart, user) save_orde...
New
RobertDober
Earmark is a pure-Elixir Markdown converter. It is intended to be used as a library (just call Earmark.as_html), but can also be used as...
239 12645 134
New
ahamez
Hi everyone, I’ve been working on this protobuf library for 3 years. We use it in the company I work for, EasyMile, to communicate with ...
New
mindok
What is ContEx? A pure Elixir server-side data plotting/charting library outputting SVG. It has nice barcharts in particular and works g...
New
michalmuskala
Hello everybody. I have just released Jason - a new JSON library. You might be wondering, why do we need a new library? The primary foc...
New

Other popular topics Top

malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
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
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement