Create custom slides for Geometry Stash by writing your own slides files.

A slide file is a JSON file with key value dictionary at its root. A barebones slide file is shown below. All code examples can be found in the #Shape Element Drawing Demo slide preloaded in Geometry Stash.

#Shape Element Drawing Demo

{
  "elements": [
    /* PUT ELEMENTS HERE */
  ],
  "bgcolor": "#FFFFFF",
  "title": "#Shape Element Drawing Demo",
  "author": "anson",
  "description": "A sample file."
}

Base File

Key elements contains a dictonary of elements that are drawn. Types of elements:
* Line
* Rectangle
* Circle
* Arc
* Ellipse
* Bézier Curve (Quadratic & Cubic)
* Chain
* Text

Key bgcolor contains a string value that is a hex RGB color. The background of the slide is set to this color.
Key title contains a string value of the slide display title. This is the name of the slide shown in the table view in the app.
Key author contains a string value of the slide author.
Key description contains a string description of the slide.

Coordinate System

The coordinate system of slides is similar to HTML Canvas. It is in the fourth quardrant of the Cartesian Plane. The X axis increase to the right and Y axis increases downwards.
Angular measurements are in degrees, start at the 0 at the three’oclock postion and increase clock wise.

Geometry Stash currently renders slides in a 4:3 aspect ratio that is 4000px × 3000px. The rendered slide is scaled down from this resolution to fit device screens.
You may set a custom canvas size by specifying integer values for the canvasWidth and canvasHeight keys in the root dictionary. Both keys must be set for a custom canvas size to take effect.

Please contact me if you have any questions about making your own slides.

Line

A line element draws a line from origin to end.

{
  "comment": "a sample line"
  "shapeType": "line",
  "originx": 100,
  "originy": 100,
  "thickness": 20,
  "endx": 1000,
  "endy": 600,
  "strokeColor": "#333333"
}

Rectangle

A rectangle element draws a rectangle at origin of width and height.

{
  "shapeType": "rectangle",
  "originx": 1200,
  "originy": 100,
  "thickness": 50,
  "width": 800,
  "height": 800,
  "strokeColor": "#357EC7",
  "fillColor": "#FFA62F"
}

Circle

A circle element draws a circle at origin of radius radius.
The radius is scaled the canvas height (default is 3000px).

{
  "shapeType": "circle",
  "originx": 2500,
  "originy": 550,
  "thickness": 50,
  "radius": 100,
  "strokeColor": "#437C17",
  "fillColor": "#800000"
}

Arc

An arc element draws an arc at origin of radius radius from startAngle to endAngle. Arc draws counter-clockwise while the angular measurement increases clockwise.
The radius is scaled the canvas height (default is 3000px).

{
  "shapeType": "arc",
  "originx": 450,
  "originy": 1750,
  "thickness": 30,
  "radius": 300,
  "startAngle": 0,
  "endAngle": 160,
  "strokeColor": "#FF0000",
  "fillColor": "#56A5EC"
}

Ellipse

An ellipse element draws an ellipse at origin of width and height.

{
  "shapeType": "ellipse",
  "originx": 100,
  "originy": 1000,
  "width": 500,
  "height": 200,
  "thickness":20,
  "strokeColor": "#AF9B60",
  "fillColor": "#F3E5AB"
},

Bézier Curve

A curve element draws a bézier curve from origin to end. It uses controlPoint1 and controlPoint2 to create the curve. Absence of controlPoint2 results in a Quadratic bézier curve.

{
  "comment": "Quadratic bézier curve",
  "shapeType": "curve",
  "originx": 1050,
  "originy": 1950,
  "thickness": 20,
  "endx": 1950,
  "endy": 1950,
  "controlPoint1x": 1500,
  "controlPoint1y": 2650,
  "strokeColor": "#FDD017",
  "fillColor": "#FF4400"
},
{
  "comment": "Cubic bézier curve",
  "shapeType": "curve",
  "originx": 1050,
  "originy": 1950,
  "thickness": 20,
  "endx": 1950,
  "endy": 1950,
  "controlPoint1x": 1250,
  "controlPoint1y": 1550,
  "controlPoint2x": 1650,
  "controlPoint2y": 2350,
  "strokeColor": "#FF4400",
  "fillColor": "#FF4400"
}

Chain

A chain element starts at origin and contains an array of elements. These elements start at the end of the preceding element in the chain array. All elements in the chain array can omit the origin keys.

{
  "shapeType": "chain",
  "originx": 2400,
  "originy": 1700,
  "elements": [
    /* PUT ELEMENTS HERE */
  ]
}

Text

A text element draws a textbox at origin of width and height. It can be made interactive by setting the interactive key to true. Textboxs are non-interactive by default.
Text height is scaled to the canvas height.

{
  "shapeType": "text",
  "originx": 1500,
  "originy": 2400,
  "width": 1200,
  "height": 500,
  "fontHeight": 100,
  "fillColor": "#EEEEEE",
  "bgcolor": "#222222",
  "interactive": true,
  "alignment" : "justified",
  "text": "Lorem ipsum dolor sit amet."
}

Putting it all together

The preloaded sample file

{
  "elements": [
    {
      "comment": "line description",
      "shapeType": "text",
      "originx": 400,
      "originy": 50,
      "width": 500,
      "height": 200,
      "fontHeight": 150,
      "fillColor": "#000000",
      "interactive": false,
      "text": "Lines"
    },
    {
      "shapeType": "line",
      "originx": 100,
      "originy": 100,
      "thickness": 20,
      "endx": 1000,
      "endy": 600,
      "strokeColor": "#333333"
    },
    {
      "shapeType": "line",
      "originx": 100,
      "originy": 100,
      "thickness": 20,
      "endx": 900,
      "endy": 650,
      "strokeColor": "#FF0000"
    },
    {
      "shapeType": "line",
      "originx": 100,
      "originy": 100,
      "thickness": 20,
      "endx": 850,
      "endy": 700,
      "strokeColor": "#FBB917"
    },
    {
      "shapeType": "line",
      "originx": 100,
      "originy": 100,
      "thickness": 20,
      "endx": 800,
      "endy": 750,
      "strokeColor": "#FFD801"
    },
    {
      "shapeType": "line",
      "originx": 100,
      "originy": 100,
      "thickness": 20,
      "endx": 750,
      "endy": 800,
      "strokeColor": "#6AA121"
    },
    {
      "shapeType": "line",
      "originx": 100,
      "originy": 100,
      "thickness": 20,
      "endx": 700,
      "endy": 850,
      "strokeColor": "#0000A0"
    },
    {
      "comment": "rectangle description",
      "shapeType": "text",
      "originx": 1450,
      "originy": 250,
      "width": 800,
      "height": 700,
      "fontHeight": 100,
      "fillColor": "#FFFFFF",
      "interactive": true,
      "text": "Rectangles"
    },
    {
      "shapeType": "rectangle",
      "originx": 1200,
      "originy": 100,
      "thickness": 50,
      "width": 800,
      "height": 800,
      "strokeColor": "#357EC7",
      "fillColor": "#FFA62F"
    },
    {
      "shapeType": "rectangle",
      "originx": 1300,
      "originy": 350,
      "thickness": 50,
      "width": 800,
      "height": 800,
      "strokeColor": "#2B65EC"
    },
    {
      "shapeType": "rectangle",
      "originx": 1450,
      "originy": 200,
      "thickness": 50,
      "width": 800,
      "height": 800,
      "fillColor": "#56A5EC"
    },
    {
      "comment": "arc description",
      "shapeType": "text",
      "originx": 550,
      "originy": 1800,
      "width": 800,
      "height": 200,
      "fontHeight": 150,
      "fillColor": "#000000",
      "text": "Arcs"
    },
    {
      "shapeType": "arc",
      "originx": 450,
      "originy": 1750,
      "thickness": 30,
      "radius": 300,
      "startAngle": 0,
      "endAngle": 160,
      "strokeColor": "#FF0000",
      "fillColor": "#56A5EC"
    },
    {
      "shapeType": "arc",
      "originx": 700,
      "originy": 1750,
      "thickness": 30,
      "radius": 300,
      "startAngle": 230,
      "endAngle": 45,
      "strokeColor": "#FF0000"
    },
    {
      "comment": "circle description",
      "shapeType": "text",
      "originx": 3050,
      "originy": 400,
      "width": 700,
      "height": 200,
      "fontHeight": 150,
      "fillColor": "#FF0000",
      "interactive": false,
      "text": "Circles"
    },
    {
      "shapeType": "circle",
      "originx": 2500,
      "originy": 550,
      "thickness": 50,
      "radius": 100,
      "strokeColor": "#437C17",
      "fillColor": "#800000"
    },
    {
      "comment": "ellipse description",
      "shapeType": "text",
      "originx": 100,
      "originy": 800,
      "width": 700,
      "height": 200,
      "fontHeight": 150,
      "fillColor": "#000000",
      "interactive": false,
      "text": "Ellipse"
    },
    {
      "shapeType": "circle",
      "originx": 2800,
      "originy": 550,
      "thickness": 20,
      "radius": 300,
      "fillColor": "#657383"
    },
    {
      "shapeType": "circle",
      "originx": 3250,
      "originy": 550,
      "thickness": 20,
      "radius": 400,
      "strokeColor": "#A1C935"
    },
    {
      "shapeType": "ellipse",
      "originx": 100,
      "originy": 1000,
      "width": 500,
      "height": 200,
      "thickness":20,
      "strokeColor": "#AF9B60",
      "fillColor": "#F3E5AB"
    },
    {
      "shapeType": "ellipse",
      "originx": 100,
      "originy": 1100,
      "width": 500,
      "height": 200,
      "thickness":20,
      "fillColor": "#667C26"
    },
    {
      "shapeType": "ellipse",
      "originx": 100,
      "originy": 1200,
      "width": 500,
      "height": 200,
      "thickness":20,
      "strokeColor": "#AF9B60"
    },
    {
      "comment": "curve description",
      "shapeType": "text",
      "originx": 1000,
      "originy": 1300,
      "width": 1000,
      "height": 500,
      "fontHeight": 150,
      "fillColor": "#000000",
      "interactive": true,
      "text": "↓ Bézier Curves\nQuadratic & Cubic curves"
    },
    {
      "comment": "Cubic bézier curve",
      "shapeType": "curve",
      "originx": 1050,
      "originy": 1950,
      "thickness": 20,
      "endx": 1950,
      "endy": 1950,
      "controlPoint1x": 1250,
      "controlPoint1y": 1550,
      "controlPoint2x": 1650,
      "controlPoint2y": 2350,
      "strokeColor": "#FF4400"
    },
    {
      "comment": "Cubic bézier curve",
      "shapeType": "curve",
      "originx": 950,
      "originy": 1800,
      "thickness": 20,
      "endx": 1850,
      "endy": 1800,
      "controlPoint1x": 1150,
      "controlPoint1y": 1400,
      "controlPoint2x": 1550,
      "controlPoint2y": 2200,
      "fillColor": "#FF4400"
    },
    {
      "comment": "Quadratic bézier curve",
      "shapeType": "curve",
      "originx": 1050,
      "originy": 1950,
      "thickness": 20,
      "endx": 1950,
      "endy": 1950,
      "controlPoint1x": 1500,
      "controlPoint1y": 2650,
      "strokeColor": "#FDD017"
    },
    {
      "comment": "Cubic bézier curve",
      "shapeType": "curve",
      "originx": 1300,
      "originy": 2100,
      "thickness": 40,
      "endx": 950,
      "endy": 1950,
      "controlPoint1x": 1300,
      "controlPoint1y": 2850,
      "strokeColor": "#FDD017",
      "fillColor": "#9E7BFF"
    },
    {
      "comment": "chain description",
      "shapeType": "text",
      "originx": 2200,
      "originy": 1000,
      "width": 1700,
      "height": 700,
      "fontHeight": 150,
      "fillColor": "#000000",
      "interactive": true,
      "text": "↓ Chain of elements"
    },
    {
      "shapeType": "chain",
      "originx": 2400,
      "originy": 1700,
      "elements": [
        {
          "shapeType": "line",
          "thickness": 40,
          "endx": 2400,
          "endy": 2000,
          "strokeColor": "#0000AA"
        },
        {
          "shapeType": "curve",
          "thickness": 30,
          "endx": 3400,
          "endy": 2000,
          "controlPoint1x": 2600,
          "controlPoint1y": 2500,
          "controlPoint2x": 2900,
          "controlPoint2y": 1500,
          "strokeColor": "#FF8040",
          "fillColor": "#AA33AA"
        },
        {
          "shapeType": "line",
          "thickness": 40,
          "endx": 3500,
          "endy": 1800,
          "strokeColor": "#0000AA"
        }
      ]
    },
    {
      "shapeType": "text",
      "originx": 1500,
      "originy": 2400,
      "width": 1200,
      "height": 500,
      "fontHeight": 100,
      "fillColor": "#EEEEEE",
      "bgcolor": "#222222",
      "interactive": true,
      "alignment" : "justified",
      "text": "↓ Some interactive text."
    },
    {
      "shapeType": "text",
      "originx": 2700,
      "originy": 2400,
      "width": 1200,
      "height": 500,
      "fontHeight": 100,
      "fillColor": "#000000",
      "interactive": false,
      "alignment" : "center",
      "text": "Text is non-interactive by default."
    },
    {
      "shapeType": "text",
      "originx": 100,
      "originy": 2050,
      "width": 1350,
      "height": 950,
      "fontHeight": 125,
      "fillColor": "#000000",
      "interactive": true,
      "alignment" : "left",
      "text": "↓ Documentation 📖 online at GeometryStash.com"
    }
  ],
  "bgcolor": "#FFFFFF",
  "title": "#Shape Element Drawing Demo",
  "author": "anson",
  "description": "A sample file."
}

Experimental SLIDE editor web app

Wow, you are still reading this. Congrats! :D

I created a web app to help with previewing and editting slides when I did not have access to normal development tools and edit/preview workflow in the 2015 summer (basically in Windows with a text editor).

Sample File

This web app is especially useful for translating elements up, down, left, right. In case you are wondering why there are red rectangles around the text elements, they represent the estimated visible area of the rendered text. No support is provided for the web app. The web app can be used here and the source is available on github if you dare to look.