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:


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, {})

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:
defs = root.find('defs', ns)
# this block in the SVG is not needed
tplsettings = defs.find('termtosvg:template_settings', ns)