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