Difference between revisions of "Dynamic Content Playground"
Jump to navigation
Jump to search
| (5 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}} | ||
| + | Truely dynamic and interactive content can be created with the Graph extension. "Graphs" are programmed in [https://github.com/vega/vega/wiki VEGA2] | ||
<graph mode=interactive> | <graph mode=interactive> | ||
{ | { | ||
// We want to use Vega 2, and specify image size | // We want to use Vega 2, and specify image size | ||
| − | "version": 2, "width": 300, "height": 80, | + | "version": 2, |
| + | "width": 300, "height": 80, | ||
// Set padding to the same value on all sides | // Set padding to the same value on all sides | ||
"padding": 12, | "padding": 12, | ||
| Line 23: | Line 29: | ||
] | ] | ||
}, | }, | ||
| + | { | ||
| + | "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": [ | "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 | // Draw a horizontal line | ||
| Line 47: | Line 93: | ||
"properties": { | "properties": { | ||
"enter": { | "enter": { | ||
| − | |||
"y": {"value": 40}, | "y": {"value": 40}, | ||
// path syntax is the same as SVG's path tag | // path syntax is the same as SVG's path tag | ||
| Line 54: | Line 99: | ||
"strokeWidth": {"value": 2.5} | "strokeWidth": {"value": 2.5} | ||
}, | }, | ||
| − | "update": {"fill": {"value": "#fff"} }, | + | "update": { |
| + | "x": {"scale": "yearsScale","signal": "currentYear"}, | ||
| + | "fill": {"value": "#fff"} | ||
| + | }, | ||
// Change fill color of the object on mouse hover | // Change fill color of the object on mouse hover | ||
"hover": {"fill": {"value": "#f00"} } | "hover": {"fill": {"value": "#f00"} } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
} | } | ||
] | ] | ||
| − | } | + | } |
</graph> | </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:
- 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
