Difference between revisions of "Dynamic Content Playground"

From Training Technology Lab Wiki
Jump to navigation Jump to search
(Created page with "Playground for creating dynamic content on MediaWiki 1.34+ Module:Playground {{#invoke:Playground|functions}} {{Graph:Chart | width = 400 | height = 150 | type = lin...")
 
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
Playground for creating dynamic content on MediaWiki 1.34+
 
Playground for creating dynamic content on MediaWiki 1.34+
 +
 +
Programmatically generated static output for wiki pages in written in LUA. The Lua script resides in a Wiki Module, and functions can be called with #invoke:
 +
 +
[https://en.wikiversity.org/wiki/Lua Tutorial]
  
 
[[Module:Playground]]
 
[[Module:Playground]]
Line 5: Line 9:
 
{{#invoke:Playground|functions}}
 
{{#invoke:Playground|functions}}
  
−
{{Graph:Chart
+
Truely dynamic and interactive content can be created with the Graph extension. "Graphs" are programmed in [https://github.com/vega/vega/wiki VEGA2]
−
| width = 400
+
<graph mode=interactive>
−
| height = 150
+
{
−
| type = line
+
  // We want to use Vega 2, and specify image size
−
| x = 1,2,3,4,5,6,7,8
+
  "version": 2,
−
| y = 10,12,6,14,2,10,7,9
+
  "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"}
 +
      ]
 +
    },
 +
    {
 +
      "name": "scaledHandlePosition",
 +
      "streams": [
 +
        {
 +
          "type": "mousemove[isDragging]",
 +
          "expr": "eventX()",
 +
          "scale": {"name": "yearsScale","invert": true}
 +
        }
 +
      ]
 +
    },
 +
    {
 +
      "name": "currentYear",
 +
      "init": 2000,
 +
      "expr": "clamp(parseInt(scaledHandlePosition),1960,2013)"
 +
    }
 +
  ],
 +
 
 +
  "scales": [
 +
    {
 +
      "name": "yearsScale",
 +
      "type": "linear",
 +
      "zero": false,
 +
      "domain": [1960, 2013],
 +
      "range": "width"
 +
    }
 +
  ],
 +
 
 +
  "marks": [
 +
    {
 +
      // draw the year label in the upper left corner
 +
      "name": "yearLabel",
 +
      "type": "text",
 +
      "properties": {
 +
        "enter": {
 +
          "x": {"value": 0},
 +
          "y": {"value": 25},
 +
          "fontSize": {"value": 32},
 +
          "fontWeight": {"value": "bold"},
 +
          "fill": {"value": "steelblue"}
 +
        },
 +
        "update": {"text": {"signal": "currentYear"} }
 +
      }
 +
    },
 +
    {
 +
      // 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": {
 +
          "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": {
 +
          "x": {"scale": "yearsScale","signal": "currentYear"},
 +
          "fill": {"value": "#fff"}
 +
        },
 +
        // Change fill color of the object on mouse hover
 +
        "hover": {"fill": {"value": "#f00"} }
 +
      }
 +
    }
 +
  ]
 +
}
 +
</graph>

Latest revision as of 09:11, 9 March 2020

Playground for creating dynamic content on MediaWiki 1.34+

Programmatically generated static output for wiki pages in written in LUA. The Lua script resides in a Wiki Module, and functions can be called with #invoke:

Tutorial

Module:Playground

Fahrenheit to Celsius
0 °F is -17.8 °C
10 °F is -12.2 °C
20 °F is -6.7 °C
30 °F is -1.1 °C
40 °F is 4.4 °C
50 °F is 10.0 °C
60 °F is 15.6 °C
70 °F is 21.1 °C
80 °F is 26.7 °C
90 °F is 32.2 °C
100 °F is 37.8 °C
Celsius to Fahrenheit
0 °C is 32.0 °F
10 °C is 50.0 °F
20 °C is 68.0 °F
30 °C is 86.0 °F
40 °C is 104.0 °F
50 °C is 122.0 °F
60 °C is 140.0 °F
70 °C is 158.0 °F
80 °C is 176.0 °F
90 °C is 194.0 °F
100 °C is 212.0 °F


Truely dynamic and interactive content can be created with the Graph extension. "Graphs" are programmed in VEGA2

Retrieved from "http://ttl.tek.sdu.dk/wiki/index.php?title=Dynamic_Content_Playground&oldid=668"