Draw

JavaScript functions for the SVG drawing application. This app allows you to create interactive parametric SVG drawings for monitoring and controlling devices and sensors. For example, to render a clock:

var time = new Date()

for (let i = 0; i < 60; i++) {
  if (i % 5 === 0) {
    width(6)
    rotate(30*i, 100,100)
    line(100,20, 100,0)
  } else {
    width(1)
    rotate(6*i, 100,100)
    line(100,10, 100,0)
  }
}
rotate(0)
width(10)
rotate(time.getMinutes()*6, 100,100)
line(100,120, 100, 20)
rotate(time.getHours()*30 + time.getMinutes()/2, 100, 100)
line(100,120,100,40)
stroke('#aa0000')
circle(100,100,3)

Elements

Line

line(x1: number, y1: number, x2: number, y2: number)

Draw a line between point x1, y1 and x2, y2.

Rectangle

rectangle(x: number, y: number, width: number, height: number, r: number = 0)

Draw a rectangle at position x, y with size width and height. Optionally enter a radius for rounded corners.

Circle

circle(x: number, y: number, r: number)

Draw a circle at position x, y with radius r.

Arc

arc(x: number, y: number, r: number, startAngle: number, endAngle: number)

Draw an arc at position x, y, radius r between startAngle and endAngle.

Text

text(text: string, x: number = 0, y: number = 0, a: number = 0)

Draw text at position x, y with optional rotation a.

Polygon

polygon(points: number[][])

Draw polygon defined by a nested array of points, for example polygon([[0,0], [0,100], [100,100]]). The polygon is automatically closed in case the last point is different from the first point.

Polyline

polyline(points: number[][])

Draw polyline defined by a nested array of points, for example polygon([[0,0], [0,100], [100,100]]). The polygon is not automatically closed.

Transformations

Translate

translate(x: number, y: number)

Translate the next elements in x and y direction.

Rotate

rotate(a: number, x: number = 0, y: number = 0)

Rotate the next elements a degrees. Optionally enter the coordinates of the rotation point.

Scale

scale(x: number, y: number)

Scale the next elements along the x and y axis. A value 1 means no scaling.

Animation

animation(type: string = 'none' | 'rotate' | 'vertical'|'horizontal', duration: number, ...values)

Start an animation on the following elements with a duration in seconds and a list of numbers that specify the intermediate angles or positions. Rotations are applied along the 0,0 origin. To specify a different rotation point you can include the animation in a code block and apply a translate operation to the block.

translate(200,200)
{
   animation("rotate", 2,-45, 45,-45)
   rectangle(-50,-50,100,100)
}

Clip

clip(x?: number, y?: number, width?: number, height?: number) 

Use the following rectangle as a clipping mask for rendering. The parts of elements that are outside the clip mask are not displayed.

Attributes

Stroke

stroke(color: string)

Set the line color. This can be a color name like darkred or a hexadecimal value like #aa0000

Fill

fill(color: string)

Set the fill color. This can be a color name like darkred or a hexadecimal value like #aa0000

Font size

fontSize(size: number | string)

Set the font size for text color. This can be a number or a string like 10pt

Link

link(parameters: string  | object)

Create a clickable link where the parameters define the new value of the parameters part in the URL for this drawing.