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