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

4 comments

/scenic #ui

7 282 4

2024-08-24 14:51:31 UTC

Most Liked

mneumann

Hi Eiji,

Thanks a lot for your valuable input.

A mix “generator” task, right? mix scenic.from_svg.gen …
SMIL - that sounds like a separate project :). Definitively interesting. Are there any open-source editors that produce SMIL animations?
Good point. Will add all HTML color codes.
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
Having separate type for svg makes sense!

Thanks again for you input!

Post #3

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:

github.com

axelson/impression_dash/blob/eb25b09e6b11240156f66bc09d975ba1db5f3cb5/lib/web_color_parser.ex

defmodule Dash.WebColorParser do
  @moduledoc """
  Parses web colors

  iex> Dash.WebColorParser.parse("rgba(0, 200.5, 50, 0.2)")
  {:ok, {:rgba, [0, 200.5, 50, 0.2]}}

  iex> Dash.WebColorParser.parse("rgb(0, 255, 50)")
  {:ok, {:rgb, [0, 255, 50]}}
  """

  import NimbleParsec

  digits = [?0..?9] |> ascii_string(min: 1) |> label("digits")
  whitespace = ascii_char([?\s, ?\t, ?\n]) |> times(min: 1)
  whitespace_or_comma = choice([whitespace, string(",")])
  separator = repeat(whitespace_or_comma)

  int =
    optional(string("-"))

This file has been truncated. show original

github.com

axelson/impression_dash/blob/eb25b09e6b11240156f66bc09d975ba1db5f3cb5/lib/svg_path_parser.ex

defmodule Dash.SvgPathParser do
  @moduledoc """
  Parses svg paths

  Some code based upon exsel https://github.com/slapers/ex_sel and licensed
  Apache 2.0
  """

  import NimbleParsec

  digits = [?0..?9] |> ascii_string(min: 1) |> label("digits")
  whitespace = ascii_char([?\s, ?\t, ?\n]) |> times(min: 1)

  int =
    optional(string("-"))
    |> concat(digits)
    |> reduce(:to_integer)
    |> label("integer")

  defp to_integer(acc), do: acc |> Enum.join() |> String.to_integer(10)

This file has been truncated. show original

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

Post #4

Where Next?

View thread on forum (has 4 responses!)

scenic

Home Libraries & Projects>Libraries

/scenic #ui

7 284 4

Last post

Scenic.FromSVG - Rapid UI prototyping for Scenic

mneumann

Scenic.FromSVG - Rapid UI prototyping for Scenic

Most Liked

mneumann

axelson

Where Next?

Popular in Libraries

Elixml - XML library

Prometheus.ex - Prometheus.io Elixir integrations

Triplex - a complete solution to multi-tenancy with PG schemas

I've forked Arc to Waffle and merged all open PRs

Jason: a blazing fast JSON parser and generator in pure Elixir

Rummage.Ecto - Searching, Sorting and Pagination in Ecto & Phoenix

Kitto: A framework for interactive dashboards

PidFile - create and manage a PID file from the BEAM process

Still - A composable static site builder

Req — A batteries-included HTTP client for Elixir

Other popular topics

** (RuntimeError) could not lookup Ecto repo Repo because it was not started or it does not exist

Elixir apps as systemd services - info & wiki

Enumerables - how does Enum.reduce work with maps

Web scraping tools

IEX in Windows Powershell?

Write while loop equivalent in elixir

Installing elixir via asdf shows zsh: command not found: iex

Surface - A component-based library for Phoenix LiveView

Functional Web Development with Elixir, OTP, and Phoenix (Pragprog)

Configuring VSCode to use with Elixir and Phoenix Templates

Latest in /Scenic

Libraries & Projects>Libraries

Latest on Elixir Forum

Sponsor Spotlight

Our Sponsors

Categories:

Sub Categories:

Forums

Our Sponsors

We're in Beta