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)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)
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")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.
?ToolipsSVGToolipsSVG 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
gAll 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)
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_positionset_position!size(::Component{<:Any})set_size!set_shapeget_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]]
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])
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).
- 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.