Difference between revisions of "Testpage"
From Theonomy Wiki
| Line 1: | Line 1: | ||
{{:Contactusname2/{{:UIlang}}}} | {{:Contactusname2/{{:UIlang}}}} | ||
| + | <graph mode=interactive> | ||
| + | |||
| + | { | ||
| + | // We want to use Vega 2, and specify image size | ||
| + | "version": 2, "width": 300, "height": 80, | ||
| + | // Set padding to the same value on all sides | ||
| + | "padding": 12, | ||
| + | // By default the background is transparent | ||
| + | "background": "#edf1f7", | ||
| + | |||
| + | "signals": [ | ||
| + | { | ||
| + | "name": "isDragging", | ||
| + | "init": false, | ||
| + | "streams": [ | ||
| + | {"type": "@handle:mousedown","expr": "true"}, | ||
| + | {"type": "mouseup","expr": "false"} | ||
| + | ] | ||
| + | }, | ||
| + | ], | ||
| + | |||
| + | "marks": [ | ||
| + | { | ||
| + | // Draw a horizontal line | ||
| + | "name": "scrollLine", | ||
| + | "type": "rule", | ||
| + | "properties": { | ||
| + | "enter": { | ||
| + | "x": {"value": 0}, | ||
| + | "y": {"value": 40}, | ||
| + | "x2": {"value": 300}, | ||
| + | "stroke": {"value": "#000"}, | ||
| + | "strokeWidth": {"value": 2} | ||
| + | } | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | // Draw a triangle shape with a hover effect | ||
| + | // naming objects allows us to reference them later | ||
| + | "name": "handle", | ||
| + | "type": "path", | ||
| + | "properties": { | ||
| + | "enter": { | ||
| + | "x": {"value": 200}, | ||
| + | "y": {"value": 40}, | ||
| + | // path syntax is the same as SVG's path tag | ||
| + | "path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"}, | ||
| + | "stroke": {"value": "#880"}, | ||
| + | "strokeWidth": {"value": 2.5} | ||
| + | }, | ||
| + | "update": {"fill": {"value": "#fff"} }, | ||
| + | // Change fill color of the object on mouse hover | ||
| + | "hover": {"fill": {"value": "#f00"} } | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | "name": "debugIsDragging", | ||
| + | "type": "text", | ||
| + | "properties": { | ||
| + | "enter": { | ||
| + | "x": {"value": 250}, | ||
| + | "y": {"value": 0}, | ||
| + | "fill": {"value": "black"} | ||
| + | }, | ||
| + | "update": {"text": {"signal": "isDragging"} } | ||
| + | } | ||
| + | } | ||
| + | ] | ||
| + | } | ||
| + | |||
| + | </graph> | ||
Revision as of 16:14, 29 August 2020
Contact us
