Widget:Svganimation

From The Document Foundation Wiki
Jump to: navigation, search

This is a widget for terminal recordings rendered to SVG animations with termtosvg. Use it like this:

{{#widget:svganimation|file=/images/7/74/Termtosvg_test.svg|id=test|width=60%}}

The width parameter is optional and defaults to 50%. You can use any web units with it.

Termtosvg records asciinema files. These can be edited using either cirocosta/asciinema-edit or pocc/asciinema-edit.

Render the SVG like so:

termtosvg render input_file --template=window_frame_js

For processing the SVG, so it can be uploaded to MediaWiki, use this Python script:

# Script for processing animated SVGs rendered by termtosvg in order to
# use them in a MediaWiki widget. MW does not allow <script> elements in
# SVGs. The animation data is moved into a comment in the SVG and read
# by the JavaScript in the MW widget.
import sys
import json
import re
import xml.etree.ElementTree as ET

if len(sys.argv) != 3:
    print("Please give arguments for input and output files, example: python widgetify.py input.svg output.svg")

inputfile = sys.argv[1]
outputfile = sys.argv[2]

# for quoting the keys - this is hacky, but works for our data
class identdict(dict):
    def __missing__(self, key):
        return key

# ElementTree normally drops comments
class CommentedTreeBuilder(ET.TreeBuilder):
    def comment(self, data):
        self.start(ET.Comment, {})
        self.data(data)
        self.end(ET.Comment)

ET.register_namespace("","http://www.w3.org/2000/svg")
ET.register_namespace("xlink","http://www.w3.org/1999/xlink")
ET.register_namespace("termtosvg","https://github.com/nbedos/termtosvg")
ns = {'': 'http://www.w3.org/2000/svg', 'termtosvg': 'https://github.com/nbedos/termtosvg'}
parser = ET.XMLParser(target=CommentedTreeBuilder())
parsed = ET.parse(inputfile, parser)
root = parsed.getroot()
scripts = root.findall('script', ns)
scripttext = scripts[0].text
termtosvg_vars = re.sub('\n|\s|;', '', scripttext)
termtosvg_vars = termtosvg_vars.replace('vartermtosvg_vars=', '')
# change animation to not loop
termtosvg_vars = termtosvg_vars.replace('Infinity', '1')
quoted = eval(termtosvg_vars, identdict())
as_json = json.dumps(quoted)
for script in scripts:
    root.remove(script)
defs = root.find('defs', ns)
# this block in the SVG is not needed
tplsettings = defs.find('termtosvg:template_settings', ns)
defs.remove(tplsettings)
root.append(ET.Comment(as_json))
parsed.write(outputfile)