Giraffe JSSchema

{ "$schema": "http://json-schema.org/draft-07/schema#", "$id": "https://giraffe.js/schema/graphics.json", "title": "Giraffe.js Graphics Definition Schema", "description": "JSON schema for defining Giraffe.js graphics scenes and objects", "type": "object", "properties": { "canvas": { "$ref": "#/definitions/Canvas" }, "objects": { "type": "array", "items": { "$ref": "#/definitions/GraphicsObject" } }, "animations": { "type": "array", "items": { "$ref": "#/definitions/Animation" } }, "interactions": { "type": "array", "items": { "$ref": "#/definitions/Interaction" } } }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"canvas", "objects""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"canvas", "objects" does not exist. Click to create it.">"canvas", "objects"</a>, "definitions": { "Canvas": { "type": "object", "properties": { "id": { "type": "string", "description": "Canvas element ID" }, "width": { "type": "number", "minimum": 1 }, "height": { "type": "number", "minimum": 1 }, "backgroundColor": { "type": "string", "pattern": "^(#(<a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/0-9A-Fa-f"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/0-9A-Fa-f does not exist. Click to create it.">0-9A-Fa-f</a>{6}|<a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/0-9A-Fa-f"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/0-9A-Fa-f does not exist. Click to create it.">0-9A-Fa-f</a>{3})|rgb ( d+, s* d+, s* d+ )|rgba ( d+, s* d+, s* d+, s*<a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/01"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/01 does not exist. Click to create it.">01</a>? .? d* )|<a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/a-zA-Z"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/a-zA-Z does not exist. Click to create it.">a-zA-Z</a>+)$" }, "interactive": { "type": "boolean", "default": false }, "animated": { "type": "boolean", "default": false }, "frameRate": { "type": "number", "minimum": 1, "maximum": 120, "default": 30 } }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"id", "width", "height""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"id", "width", "height" does not exist. Click to create it.">"id", "width", "height"</a> }, "Point": { "type": "object", "properties": { "x": {"type": "number"}, "y": {"type": "number"} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"x", "y""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"x", "y" does not exist. Click to create it.">"x", "y"</a> }, "Color": { "type": "string", "pattern": "^(#(<a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/0-9A-Fa-f"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/0-9A-Fa-f does not exist. Click to create it.">0-9A-Fa-f</a>{6}|<a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/0-9A-Fa-f"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/0-9A-Fa-f does not exist. Click to create it.">0-9A-Fa-f</a>{3})|rgb ( d+, s* d+, s* d+ )|rgba ( d+, s* d+, s* d+, s*<a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/01"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/01 does not exist. Click to create it.">01</a>? .? d* )|<a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/a-zA-Z"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/a-zA-Z does not exist. Click to create it.">a-zA-Z</a>+)$" }, "LineStyle": { "type": "object", "properties": { "width": { "type": "number", "minimum": 0 }, "cap": { "type": "string", "enum": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"butt", "round", "square""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"butt", "round", "square" does not exist. Click to create it.">"butt", "round", "square"</a> }, "join": { "type": "string", "enum": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"bevel", "round", "miter""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"bevel", "round", "miter" does not exist. Click to create it.">"bevel", "round", "miter"</a> }, "dash": { "type": "array", "items": {"type": "number"} } } }, "Shadow": { "type": "object", "properties": { "color": {"$ref": "#/definitions/Color"}, "blur": {"type": "number", "minimum": 0}, "offsetX": {"type": "number"}, "offsetY": {"type": "number"} } }, "Gradient": { "type": "object", "oneOf": <img src=" { "properties": { "type": {"const": "linear"}, "color1": {"$ref": "#/definitions/Color"}, "color2": {"$ref": "#/definitions/Color"}, "x1": {"type": "number"}, "y1": {"type": "number"}, "x2": {"type": "number"}, "y2": {"type": "number"} }, "required": <a href="/HomeLab/Claude/GiraffeJSSchema/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>"type", "color1", "color2", "x1", "y1", "x2", "y2""/> }, { "properties": { "type": {"const": "radial"}, "color1": {"$ref": "#/definitions/Color"}, "color2": {"$ref": "#/definitions/Color"}, "centerX": {"type": "number"}, "centerY": {"type": "number"}, "radius": {"type": "number", "minimum": 0} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"type", "color1", "color2", "centerX", "centerY", "radius""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"type", "color1", "color2", "centerX", "centerY", "radius" does not exist. Click to create it.">"type", "color1", "color2", "centerX", "centerY", "radius"</a> } ] }, "BaseGraphicsObject": { "type": "object", "properties": { "id": {"type": "string"}, "x": {"type": "number"}, "y": {"type": "number"}, "visible": {"type": "boolean", "default": true}, "rotation": {"type": "number", "default": 0}, "scaleX": {"type": "number", "default": 1}, "scaleY": {"type": "number", "default": 1}, "fillColor": { "oneOf": <a href=" {"$ref": "#/definitions/Color"}, {"$ref": "#/definitions/Gradient"} " target="external_page"> {"$ref": "#/definitions/Color"}, {"$ref": "#/definitions/Gradient"} </a> }, "strokeColor": {"$ref": "#/definitions/Color"}, "lineStyle": {"$ref": "#/definitions/LineStyle"}, "shadow": {"$ref": "#/definitions/Shadow"}, "alpha": {"type": "number", "minimum": 0, "maximum": 1, "default": 1} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"x", "y""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"x", "y" does not exist. Click to create it.">"x", "y"</a> }, "GraphicsObject": { "allOf": <img src=" {"$ref": "#/definitions/BaseGraphicsObject"}, { "type": "object", "properties": { "type": { "type": "string", "enum": <a href="/HomeLab/Claude/GiraffeJSSchema/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a> "circle", "rectangle", "roundedRectangle", "line", "arc", "text", "picture", "polygon", "pixelCanvas", "composite" "/> } }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"type""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"type" does not exist. Click to create it.">"type"</a> } ], "oneOf": <img src=" { "properties": { "type": {"const": "circle"}, "radius": {"type": "number", "minimum": 0} }, "required": <a href="/HomeLab/Claude/GiraffeJSSchema/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>"radius""/> }, { "properties": { "type": {"const": "rectangle"}, "width": {"type": "number", "minimum": 0}, "height": {"type": "number", "minimum": 0} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"width", "height""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"width", "height" does not exist. Click to create it.">"width", "height"</a> }, { "properties": { "type": {"const": "roundedRectangle"}, "width": {"type": "number", "minimum": 0}, "height": {"type": "number", "minimum": 0}, "cornerRadius": {"type": "number", "minimum": 0} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"width", "height", "cornerRadius""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"width", "height", "cornerRadius" does not exist. Click to create it.">"width", "height", "cornerRadius"</a> }, { "properties": { "type": {"const": "line"}, "x2": {"type": "number"}, "y2": {"type": "number"} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"x2", "y2""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"x2", "y2" does not exist. Click to create it.">"x2", "y2"</a> }, { "properties": { "type": {"const": "arc"}, "startAngle": {"type": "number"}, "sweepAngle": {"type": "number"}, "radius": {"type": "number", "minimum": 0} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"startAngle", "sweepAngle", "radius""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"startAngle", "sweepAngle", "radius" does not exist. Click to create it.">"startAngle", "sweepAngle", "radius"</a> }, { "properties": { "type": {"const": "text"}, "text": {"type": "string"}, "fontSize": {"type": "number", "minimum": 1}, "fontFamily": {"type": "string", "default": "Arial"}, "textAlign": { "type": "string", "enum": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"left", "center", "right""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"left", "center", "right" does not exist. Click to create it.">"left", "center", "right"</a>, "default": "left" }, "textBaseline": { "type": "string", "enum": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"top", "middle", "bottom", "alphabetic""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"top", "middle", "bottom", "alphabetic" does not exist. Click to create it.">"top", "middle", "bottom", "alphabetic"</a>, "default": "alphabetic" } }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"text", "fontSize""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"text", "fontSize" does not exist. Click to create it.">"text", "fontSize"</a> }, { "properties": { "type": {"const": "picture"}, "src": {"type": "string"}, "width": {"type": "number", "minimum": 0}, "height": {"type": "number", "minimum": 0} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"src""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"src" does not exist. Click to create it.">"src"</a> }, { "properties": { "type": {"const": "polygon"}, "points": { "type": "array", "items": {"$ref": "#/definitions/Point"}, "minItems": 3 } }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"points""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"points" does not exist. Click to create it.">"points"</a> }, { "properties": { "type": {"const": "pixelCanvas"}, "width": {"type": "number", "minimum": 1}, "height": {"type": "number", "minimum": 1}, "pixelData": { "type": "array", "items": { "type": "array", "items": {"type": "integer", "minimum": 0, "maximum": 255}, "minItems": 3, "maxItems": 4 } } }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"width", "height""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"width", "height" does not exist. Click to create it.">"width", "height"</a> }, { "properties": { "type": {"const": "composite"}, "children": { "type": "array", "items": {"$ref": "#/definitions/GraphicsObject"} } }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"children""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"children" does not exist. Click to create it.">"children"</a> } ] }, "Animation": { "type": "object", "properties": { "id": {"type": "string"}, "targetObjectId": {"type": "string"}, "type": { "type": "string", "enum": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/ "flipOutX", "flipInX", "flipOutY", "flipInY", "moveSequence", "rotationSequence", "explodeSequence", "custom" "target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/ "flipOutX", "flipInX", "flipOutY", "flipInY", "moveSequence", "rotationSequence", "explodeSequence", "custom" does not exist. Click to create it."> "flipOutX", "flipInX", "flipOutY", "flipInY", "moveSequence", "rotationSequence", "explodeSequence", "custom" </a> }, "frames": {"type": "integer", "minimum": 1}, "loop": {"type": "boolean", "default": false}, "autoStart": {"type": "boolean", "default": true} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"targetObjectId", "type", "frames""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"targetObjectId", "type", "frames" does not exist. Click to create it.">"targetObjectId", "type", "frames"</a>, "allOf": <img src=" { "if": {"properties": {"type": {"const": "moveSequence"}}}, "then": { "properties": { "matrix": { "type": "array", "items": {"$ref": "#/definitions/Point"} } }, "required": <a href="/HomeLab/Claude/GiraffeJSSchema/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>"matrix""/> } }, { "if": {"properties": {"type": {"const": "rotationSequence"}}}, "then": { "properties": { "steps": {"type": "number"} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"steps""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"steps" does not exist. Click to create it.">"steps"</a> } }, { "if": {"properties": {"type": {"const": "custom"}}}, "then": { "properties": { "animationFunction": { "type": "string", "description": "JavaScript function body for custom animation" } }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"animationFunction""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"animationFunction" does not exist. Click to create it.">"animationFunction"</a> } } ] }, "Interaction": { "type": "object", "properties": { "id": {"type": "string"}, "targetObjectId": {"type": "string"}, "eventType": { "type": "string", "enum": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/ "click", "mouseDown", "mouseUp", "mouseMove", "mouseEnter", "mouseLeave", "drag", "keyDown", "keyUp" "target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/ "click", "mouseDown", "mouseUp", "mouseMove", "mouseEnter", "mouseLeave", "drag", "keyDown", "keyUp" does not exist. Click to create it."> "click", "mouseDown", "mouseUp", "mouseMove", "mouseEnter", "mouseLeave", "drag", "keyDown", "keyUp" </a> }, "handler": { "type": "string", "description": "JavaScript function body for event handler" }, "draggable": {"type": "boolean", "default": false} }, "required": <a href="/OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"targetObjectId", "eventType", "handler""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/HomeLab/Claude/GiraffeJSSchema/"targetObjectId", "eventType", "handler" does not exist. Click to create it.">"targetObjectId", "eventType", "handler"</a> } }, "examples": <img src=" { "canvas": { "id": "gameCanvas", "width": 800, "height": 600, "backgroundColor": "lightblue", "interactive": true, "animated": true, "frameRate": 60 }, "objects": <a href="/HomeLab/Claude/GiraffeJSSchema/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a> { "id": "background", "type": "rectangle", "x": 0, "y": 0, "width": 800, "height": 600, "fillColor": "lightblue" }, { "id": "bouncingBall", "type": "circle", "x": 100, "y": 100, "radius": 25, "fillColor": "red", "strokeColor": "darkred" }, { "id": "paddle", "type": "roundedRectangle", "x": 350, "y": 550, "width": 100, "height": 20, "cornerRadius": 10, "fillColor": "brown", "strokeColor": "black" }, { "id": "scoreText", "type": "text", "x": 10, "y": 30, "text": "Giraffe.js Demo", "fontSize": 24, "fontFamily": "Arial", "strokeColor": "black" } "/>, "animations": <a href="/HomeLab/Claude/GiraffeJSSchema/" target="newTab"> { "id": "ballBounce", "targetObjectId": "bouncingBall", "type": "custom", "frames": 1000, "loop": true, "animationFunction": "this.x += this.vx <img src='/OpenForum/Images/icons/png/link_go.png' /></a>, "interactions": <a href=" { "id": "paddleDrag", "targetObjectId": "paddle", "eventType": "drag", "handler": "", "draggable": true }, { "id": "ballClick", "targetObjectId": "bouncingBall", "eventType": "click", "handler": "alert('Ball clicked!');" } " target="external_page"> { "id": "paddleDrag", "targetObjectId": "paddle", "eventType": "drag", "handler": "", "draggable": true }, { "id": "ballClick", "targetObjectId": "bouncingBall", "eventType": "click", "handler": "alert('Ball clicked!');" } </a> } ] }