GitHub - ChifiSource/ToolipsSVG.jl: SVG image interface for Toolips.jl

ToolipsSVG provides SVG components, a Component{:path} mutation interface, a multiple dispatch interface for managing and setting size, shape, and positions of different components, and SVG shapes for Toolips and Gattino powered by ToolipsServables.

using ToolipsSVG

window = svg("main", width = 500, height = 500)
squarepath = path("new-square")
M!(squarepath, 50, 50)
L!(squarepath, 100, 50)
L!(squarepath, 100, 100)
L!(squarepath, 50, 100)
L!(squarepath, 50, 50)
Z!(squarepath)

push!(window, squarepath)
display("text/html", window)

st = star("sample", x= 100, y = 150, outer_radius = 15, inner_radius = 40, angle = 20)
style!(st, "fill" => "orange", "stroke" => "green")
push!(window, st)
display("text/html", window)

map

get started

ToolipsSVG may be used with or without a Toolips server, but will require an SVG display output of some kind --for example an IJulia, Olive, Pluto notebook, or Electron window. To show components, call display("text/html", ::AbstractComponent). This will usually be called whenever a Component is shown, or returned, as well.

using ToolipsSVG
new_window::Component{:svg} = svg(width = 500, height = 500)
newcircle::Component{:circle} = circle(cx = 250, cy = 250, r = 20)
style!(newcircle, "fill" => "blue")
push!(new_window, newcircle)

display("text/html", new_window)

adding

ToolipsSVG can be added via Pkg.

using Pkg; Pkg.add("ToolipsSVG")

For the latest updates, which might sometimes be broken, you can also add the Unstable branch.

using Pkg; Pkg.add("ToolipsSVG", rev = "Unstable")

documentation

We are working on a large documentation website for all of these modules (based on Toolips) -- documentation will be available for 0.1.1 -- the first patch of this package. In the mean time, a full list of exports is inside of the ToolipsSVG doc-string.

components

ToolipsSVG builds an SVG interface atop the parametric Component type provided by ToolipsServables. This begins with some base Component types to provide accessible constants for high-level templating in typical Toolips fashion.

                       #     property                property
     # element (svg) ( id, key       value         key    value  )
sample_svg = svg("mysvg", "prop1" => "sixty-five", prop2 = 5)

text
image
circle
rect
path
line
ellipse
polyline
polygon
use
g

All of these are normal components, which are used like any other component. We provide Pair{String, <:Any} alongside key-word arguments to give properties with the first positional argument being the name.

using ToolipsSVG
w, h = 250, 250
window = svg("julia_over", width = w, height = h)
each_w = (w - 10) / 3
each_height = h / 2
circs = [begin
          circ = circle(cx = (each_w * e), cy = each_height, r = 10)
          style!(circ, "fill" => "#$color")
          circ
     end for (e, color) in enumerate(("D5635C", "60AD51", "AA79C1"))]

window[:children] = circs
window

ToolipsSVG also includes two special components, the Component{:star} and Component{:polyshape}. These are two different pre-made shapes with unique arguments that change how the shape is rendered. For example, a star.

newstar = star("newstar", x = 50, y = 50, points = 5, inner_radius = 14, outer_radius = 30)
push!(window, newstar)

shapes

In addition to just the basic components to work with, ToolipsSVG also includes a parametric shape interface. This interface has support for the following shapes:

:circle
:rect
:square
:polyshape
:star

The shape interface consists of

get_position
set_position!
size(::Component{<:Any})
set_size!
set_shape
get_shape

This interface provides us with an easy way to consistently get and set the position of different shapes and also translate shapes between eachother with set_shape.

window[:children] = window[:children][1:3]
window[:children] = [set_shape(comp, :star) for comp in window[:children]]

paths

The last noteworthy feature in ToolipsSVG is an interface for drawing d data in paths. This is a rather small interface, but can be quite effective. Each argument will be provided to d with a space; beyond this, it is simply knowing how to use SVG.

using ToolipsSVG
squarepath = path("new-square")
M!(squarepath, 50, 50)
L!(squarepath, 100, 50)
L!(squarepath, 100, 100)
L!(squarepath, 50, 100)
L!(squarepath, 50, 50)
Z!(squarepath)

window = svg("main", width = 200, height = 200, children = [squarepath])
cont = div("holder", children = [window])
style!(cont, "padding" => 10px)
cont

Let's try a more advanced example ...

cuteheart = path("heart")
M!(cuteheart, 12, "21.593c-5.63-5.539-11-10.297-11-14.402", 
"0-3.791 3.068-5.191 5.281-5.191 1.312", 0, "4.151.501", 
5.719, 4.457, "1.59-3.968", "4.464-4.447",
 "5.726-4.447", 2.54, 0, 5.274, 1.621, 5.274, 5.181, 0,
 "4.069-5.136 8.625-11", "14.402m5.726-20.583c-2.203", "0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183",
  "0-6.281", "2.187-6.281", 6.191, 0, 4.661, 5.571, 9.429, 12, 15.809, "6.43-6.38 12-11.148 12-15.809",
   "0-4.011-3.095-6.181-6.274-6.181")

neww = svg(width = 25, height = 25, children = [cuteheart])

contributing

Thank you for lending a helping hand in the development of this package, and others like it. There are a myriad of different ways to contribute to this project.

submitting issues
creating packages which use ToolipsSVG
forking and pull-requesting your changes to this code
trying other chifi projects.
contributing to other chifi projects (gives more attention here).

guidelines

If there is no issue for what you want to do, create an issue.
If you have multiple issues, submit multiple issues rather than typing each issue into one issue.
Make sure the issue you are solving or feature you want to implement is still feasible on Unstable -- this is the top-level development branch which represents the latest unstable changes.
Please format your documentation using the technique presented in the rest of the file.
Make sure Pkg.test("ToolipsSVG") works with your version of ToolipsSVG before making a pull-request.