Can termtosvg generate 2 svgs?

1. A screenshot svg with a play button (or something like that) in the center
2. The actual animation svg that is already generated

Rationale 1

When these svg's are embedded in blog posts, we don't want the browser to load the huge svg animation until user clicks on them. By "huge", I mean that the page would be 20KB in total (HTML+CSS), but a small animation svg would be 2MB!

With a "play button screenshot svg", I can have this in my blog post:

[![](https://example.com/link/to/screenshot.svg)](https://example.com/link/to/animation.svg)

This would allow the page loads to be snappy and the animation will be downloaded only when the user clicks on the play-button-screenshot-svg.

Rationale 2

This will also allow svg's to not be always running in a loop (which I don't prefer personally). Many other users might also appreciate this.

The title itself explains it.

I'm currently fiddling around with the SVG file in order to understand it better and to be able to manually save some space that I do not need (e.g. with detailed progress bars that can be accelerated).

Is there a way to tweak the "smoothness" of the details of e.g. a curl progress bar? I guess my SVG files get so big (> 2MB) because of those, as they seem to be in there with each sub-sub-percentage as a separate <text> element.

Hi, I've attempted to package termtosvg with the following versions in play:

• python 3.6.5
• python-svgwrite 1.1.12 (mozman/svgwrite@5ce5ed5)
• python-pyte 0.8.0
• python-xlib 0.23

However when attempting to run the command I am experiencing this error:

% termtosvg
Recording started, enter "exit" command or Control-D to end
Traceback (most recent call last):
  File "/usr/bin/termtosvg", line 11, in <module>
    load_entry_point('termtosvg==0.2.1', 'console_scripts', 'termtosvg')()
  File "/usr/lib/python3.6/site-packages/termtosvg/__main__.py", line 134, in main
    columns, lines, theme = term.get_configuration(output_fileno)
  File "/usr/lib/python3.6/site-packages/termtosvg/term.py", line 340, in get_configuration
    xresources_str = _get_xresources()
  File "/usr/lib/python3.6/site-packages/termtosvg/term.py", line 360, in _get_xresources
    return data.value.decode('utf-8')
AttributeError: 'NoneType' object has no attribute 'value'

• pip install -e .
• python3.6

Recording started, enter "exit" command or Control-D to end
Traceback (most recent call last):
  File "/home/jimmy/.pyenv/versions/anaconda3-5.0.1/envs/devel/bin/termtosvg", line 11, in <module>
    load_entry_point('termtosvg', 'console_scripts', 'termtosvg')()
  File "/home/jimmy/workspace/git/termtosvg/termtosvg/__main__.py", line 172, in main
    columns, lines, system_theme = term.get_configuration(output_fileno)
  File "/home/jimmy/workspace/git/termtosvg/termtosvg/term.py", line 340, in get_configuration
    xresources_str = _get_xresources()
  File "/home/jimmy/workspace/git/termtosvg/termtosvg/term.py", line 367, in _get_xresources
    return data.value.decode('utf-8')
AttributeError: 'str' object has no attribute 'decode'

It maybe happen to me only. And I try to fix this for myself by removing .decode('utf-8')

File "/home/jimmy/workspace/git/termtosvg/termtosvg/term.py", line 367, in _get_xresources
return data.value # now, works ok.

Currently, bold characters are correctly rendered. But bright colored characters are also rendered as bold, even when they should not be bold.

I think this happens because pyte makes bright colored characters bold; this should probably be overridden.

Hi,

I am using ubuntu 18.04 with python3.6.5 and I have installed the requirement for termtosvg. Great tool when reading the description but I am not able to view the animation. When I try to view the animation, a windows appears with the name of the animation but nothing is displayed, just a frozen page.You can see the frozen page in the

attached file

I'm on Ubuntu 18.04 and just installed pip 2.7 and installed termtosvg with pip install termtosvg.

However termtosvg is not in the correct path or my path is not set. What is it that I am not doing correctly here? I can see that ~/.local/lib/python2.7/site-packages/termtosvg exists.

I just recorded a ~100 kb svg animation with termtosvg.

Showing it in html bumps the Chrome or Firefox CPU usage straight to 100%.

It seems like it's a browser issue but apparently it doesn't always happen either. 😕 Since I know nothing about SVG Animations and browsers I thought posting here might start a discussion –perhaps there's an improvement termtosvg can do (something like reducing draw rate/fps).

error info:
You are using pip version 10.0.1, however version 18.0 is available.
You should consider upgrading via the 'pip install --upgrade pip' command.

hey! congrats on launching in HN!

the install went fine but i get this when i run it:

 ✝  ~/OpenSource/OpenSourceApps   master  termtosvg
Traceback (most recent call last):
  File "/usr/local/bin/termtosvg", line 7, in <module>
    from termtosvg.__main__ import main
  File "/Library/Python/2.7/site-packages/termtosvg/__main__.py", line 144
    print(record.to_json_line(), file=cast_file)
                                     ^
SyntaxError: invalid syntax

is python 2.7 not supported?

[user@web ~]$ termtosvg
Traceback (most recent call last):
File "/home/user/.local/bin/termtosvg", line 7, in
from termtosvg.main import main
File "/home/user/.local/lib/python3.4/site-packages/termtosvg/main.py", line 8, in
import termtosvg.anim as anim
File "/home/user/.local/lib/python3.4/site-packages/termtosvg/anim.py", line 27, in
_CharacterCell.text.doc = 'Text content of the cell'
AttributeError: readonly attribute

Command used for installation: sudo pip install termtosvg

Error when doing termtosvg:

  File "/usr/bin/termtosvg", line 11, in <module>
    load_entry_point('termtosvg==0.3.0', 'console_scripts', 'termtosvg')()
  File "/usr/lib/python2.7/site-packages/pkg_resources/__init__.py", line 476, in load_entry_point
    return get_distribution(dist).load_entry_point(group, name)
  File "/usr/lib/python2.7/site-packages/pkg_resources/__init__.py", line 2700, in load_entry_point
    return ep.load()
  File "/usr/lib/python2.7/site-packages/pkg_resources/__init__.py", line 2318, in load
    return self.resolve()
  File "/usr/lib/python2.7/site-packages/pkg_resources/__init__.py", line 2324, in resolve
    module = __import__(self.module_name, fromlist=['__name__'], level=0)
  File "/usr/lib/python2.7/site-packages/termtosvg/__main__.py", line 144
    print(record.to_json_line(), file=cast_file)
                                     ^
SyntaxError: invalid syntax

Things i have tried to solve it:

• sudo termtosvg (same error)
• sudo pip uninstall termtosvg && sudo pip3 install termtosvg (bash: /usr/bin/termtosvg: No such file or directory)

System details:

• uname -r = 4.17.3-200.fc28.x86_64
• type $shell = bash is /usr/bin/bash
• Fedora version = 28
• display server = wayland

First off, this project looks really solid. Just curious if there are any differences or advantages over using this program versus asciinema + svg-term-cli?

I've used this approach in the past very successfully and have found that most people don't even know what "animated svg" really means. I also wrote about it here.

Would love to hear your thoughts on the two approaches & thanks again for this project!

When you use the --verbose, termtosvg happily writes to /tmp/termtosvg.log, even when it already exists and is owned by someone else.

Please refuse the temptation to use /tmp for things that are not actually temporary files.

Hello,

My OS is RHEL 6.6.

pip3 install --user termtosvg worked fine, but when I ran the application using termtosvg, I got this exception:

km²~/.local/:bin> termtosvg                                                                                                                   06/28 1:18pm
Recording started, enter "exit" command or Control-D to end
Traceback (most recent call last):
  File "/home/kmodi/.local/lib/python3.7/site-packages/Xlib/display.py", line 224, in __getattr__
    function = self.display_extension_methods[attr]
KeyError: 'ge_add_event_data'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/home/kmodi/.local/bin/termtosvg", line 11, in <module>
    sys.exit(main())
  File "/home/kmodi/.local/lib/python3.7/site-packages/termtosvg/__main__.py", line 172, in main
    columns, lines, system_theme = term.get_configuration(output_fileno)
  File "/home/kmodi/.local/lib/python3.7/site-packages/termtosvg/term.py", line 340, in get_configuration
    xresources_str = _get_xresources()
  File "/home/kmodi/.local/lib/python3.7/site-packages/termtosvg/term.py", line 361, in _get_xresources
    d = display.Display()
  File "/home/kmodi/.local/lib/python3.7/site-packages/Xlib/display.py", line 127, in __init__
    mod.init(self, info)
  File "/home/kmodi/.local/lib/python3.7/site-packages/Xlib/ext/xinput.py", line 652, in init
    disp.ge_add_event_data(info.major_opcode, device_event, DeviceEventData)
  File "/home/kmodi/.local/lib/python3.7/site-packages/Xlib/display.py", line 227, in __getattr__
    raise AttributeError(attr)
AttributeError: ge_add_event_data

Probably my OS is too old?

When I finished recording, SVG was saved in the following path:
Recording ended, SVG animation is /var/folders/ww/6_z6xr151l17_y651jtp6p4h0000gn/T/termtosvg_dw3wpt5c.svg

The font size isn't taking effect on the rendered animation even after adding custom font-size in the template. Added to the style element with id "user-style":

<style element with id "user-style" >
...
  font-family: 'DejaVu Sans Mono', monospace;
  font-style: normal;
  font-size: 18px;
...
</style>

Maybe I'm missing something; do I've to explicitly specify an increased geometry while running the command?

Thank you.

Thank you for the awesome project！
How about add a progress bar to the recorded svg? It will show length of the animation.

adb_show.svg.zip

The attachment above is just a example, we manually add the progress bar to svg file.(sorry, I don't know how to attach svg file directly)

import fcntl
ModuleNotFoundError: No module named 'fcntl'

I have python3 insalled and after installing termtosvg and trunning 'termtosvg,' I run into this syntax error. Any clues?

Traceback (most recent call last):
File "/usr/local/bin/termtosvg", line 7, in
from termtosvg.main import main
File "/usr/local/lib/python2.7/site-packages/termtosvg/main.py", line 144
print(record.to_json_line(), file=cast_file)
^
SyntaxError: invalid syntax

Hi again, after updating to 464f5ea I'm experiencing a new issue whenever I attempt to display any coloured output:

teapot earnest %i earnest ~ termtosvg -v foo.svg
Logging to /tmp/termtosvg_m7uxm9kd.log
Recording started, enter "exit" command or Control-D to end
teapot earnest %i earnest ~ ls -d study
study/
Traceback (most recent call last):
  File "/usr/bin/termtosvg", line 11, in <module>
    load_entry_point('termtosvg==0.4.0', 'console_scripts', 'termtosvg')()
  File "/usr/lib/python3.6/site-packages/termtosvg/__main__.py", line 194, in main
    anim.render_animation(replayed_records, svg_filename, font)
  File "/usr/lib/python3.6/site-packages/termtosvg/anim.py", line 213, in render_animation
    for event_record in record_group:
  File "/usr/lib/python3.6/site-packages/termtosvg/term.py", line 264, in replay
    redraw_buffer[row][column] = from_pyte_char(screen.buffer[row][column], palette)
  File "/usr/lib/python3.6/site-packages/termtosvg/anim.py", line 58, in from_pyte
    text_color = palette[color_numbers[char.fg]]
KeyError: 12

Am I right if I say that the terminal size is taken into account when recording? If so, would it be possible to change that so it is not taken into account? I was very glad that asciinema don't do this, and that you can resize it later with svg-term-cli. It would help with automation, as we would not need to resize the terminal before starting to record.

Hi,

Whenever termtosvg is started the .bashrc is reloaded.
Can this be avoided ?

• Thanks

ERROR

hellojukay@A011056-NC01:~/Desktop$ termtosvg
Traceback (most recent call last):
  File "/home/hellojukay/.local/bin/termtosvg", line 7, in <module>
    from termtosvg.__main__ import main
  File "/home/hellojukay/.local/lib/python2.7/site-packages/termtosvg/__main__.py", line 144
    print(record.to_json_line(), file=cast_file)
                                     ^
SyntaxError: invalid syntax
hellojukay@A011056-NC01:~/Desktop$

ENV

python: Python 2.7.15rc1
linux: Linux A011056-NC01 4.4.0-43-Microsoft #1-Microsoft Wed Dec 31 14:42:53 PST 2014 x86_64 x86_64 x86_64 GNU/Linux

The color of the prompt is always like this no matter what theme I choose.

System specs
NAME="Ubuntu"
VERSION="18.04 LTS (Bionic Beaver)"
FLAVOUR="Kubuntu"

Hello,
Whenever i run termtosvg, bash aliases and bashrc config are reset.
However, configs are restored at exit.
Is this the expected behaviour ?

Trying this on termux v0.63

Cheers for the program and effort.

For all recordings except really simple ones, I think a pause button will be useful. It will let users copy text etc. I expect that this would require embedded JS, though.

Combined with a progress bar for seeking etc., this feature would be even better.

I'm currently adding support for SVG templates. Basically a template is a skeleton SVG file where termtosvg will embed the animation it produces. Templates make it possible to add a window frame to the animation, or to add custom Javascript code to control the animation (think play, pause, seek...).

Here's an example of an animation rendered with a template : https://cdn.rawgit.com/nbedos/termtosvg/43a7d461fa7eef86207759515cfe7d8f8897b48a/examples/awesome_js.svg

Usage is as simple as termtosvg --template my_template where my_template refers to a SVG file located in ~/.config/termtosvg/templates.

I have a question and a request:
Question: What templates would you like to see included in termtosvg? Right now I'm thinking:

1. A plain template. No decoration, no JS, nothing. With this template termtosvg will produce the same animations as it does today without template.
2. Pure SVG to add a window frame terminal (see here)
3. Same as 2. but with animation controls written in Javascript (play, pause, timeline). That's the example I've linked to just before.

Any other ideas? Maybe some neat terminal UI you'd like to see included?

Request: I suck at Javascript, so I'd be grateful if someone could review the script portion of this file.

Thanks!

Pinging @ylmrx @styfle @marcelo477 @leonklingele @knktc @vuuv @kaushalmodi @andyone @Earnestly @PetterS @zac-garby @bjd2385 @stevepeak

~ $ termtosvg 
Recording started, enter "exit" command or Control-D to end
bash: parse_git_branch: command not found

I've got a function that is executed in my prompt.

# for prompt later
parse_git_branch() {
    git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

export PS1="\\[\\033[1;31m\\]\\W\\[\\033[1;33m\\]\$(parse_git_branch) \\[\\033[1;34m\\]λ\\[\\033[0m\\] "

Is there a way to define this in termtosvg

Hey, really cool project you've got there. Unfortunately for me, it crashes every time I try running it with the following traceback:

 Traceback (most recent call last):
  File "/home/icy/.local/bin/termtosvg", line 11, in <module>
    sys.exit(main())
  File "/home/icy/.local/lib/python3.6/site-packages/termtosvg/__main__.py", line 186, in main
    anim.render_animation(replayed_records, svg_filename)
  File "/home/icy/.local/lib/python3.6/site-packages/termtosvg/anim.py", line 208, in render_animation
    for event_record in record_group:
  File "/home/icy/.local/lib/python3.6/site-packages/termtosvg/term.py", line 268, in replay
    redraw_buffer[row][column] = from_pyte_char(screen.buffer[row][column], palette)
  File "/home/icy/.local/lib/python3.6/site-packages/termtosvg/anim.py", line 58, in from_pyte
    raise ValueError('Invalid foreground color: {}'.format(char.fg))
ValueError: Invalid foreground color: red

It happens just when I start typing something into the prompt, after running termtosvg.

Hi,

From within a tmux window, termtosvg won't capture new panes that are created during recording. Is it feasible to have it record new panes as well?

Thanks.

It'd be awesome to have support for:

https://en.wikipedia.org/wiki/Box-drawing_character#Unix,_CP/M,_BBS

So that we could export output such as:

https://github.com/chjj/blessed

Attempting to run termtosvg under python 2 will result in:

Traceback (most recent call last):
  File "/home/lars/src/termtosvg/.venv/bin/termtosvg", line 11, in <module>
    load_entry_point('termtosvg', 'console_scripts', 'termtosvg')()
  File "/home/lars/src/termtosvg/.venv/lib/python2.7/site-packages/pkg_resources/__init__.py", line 479, in load_entry_point
    return get_distribution(dist).load_entry_point(group, name)
  File "/home/lars/src/termtosvg/.venv/lib/python2.7/site-packages/pkg_resources/__init__.py", line 2703, in load_entry_point
    return ep.load()
  File "/home/lars/src/termtosvg/.venv/lib/python2.7/site-packages/pkg_resources/__init__.py", line 2321, in load
    return self.resolve()
  File "/home/lars/src/termtosvg/.venv/lib/python2.7/site-packages/pkg_resources/__init__.py", line 2327, in resolve
    module = __import__(self.module_name, fromlist=['__name__'], level=0)
  File "/home/lars/src/termtosvg/termtosvg/__main__.py", line 143
    print(record.to_json_line(), file=cast_file)
                                     ^
SyntaxError: invalid syntax

I have the following in my README.md

<div align="center">
  <img src="./readme/update-host-file.svg" />
</div>

If I load that file in the browser it works just fine. If I replace the source with the source you have in your readme I see it. I am wondering if maybe Github wants it to be linked to some external source?

As the title, I currently encounter the problem of not finding the command after installation, the installation process did not report an error, the screenshot is as follows：


This is working great so far. My only request is to not have exiting the recording itself be recorded. It just seems like extraneous information that could potentially confuse someone (non-technical) who you are sending a recording to.

It would be amazing to have a pretty-printed variant of the SVG file when it is initially rendered. By pretty-printed I mean all <text> sections at least line-separated.

Why? That way it would be possible to track the SVG animations via git! Imagine the possibilities ... when new releases come out, you could even see the differences in the SVG animation files.

Such an amazing tool needs a brew formula. Anyone?

on ubuntu 16.04, firefox 60.0.2, a recorded session shows mangled powerline fonts in my oh-too-blingy zsh config.

compare static png:

attached SVG:

rendered.zip

Not sure what's going on...

[aat@cavern:~/Projects/kong]termtosvg foo.svg
Recording started, enter "exit" command or Control-D to end
[aat@cavern:~/Projects/kong]ls
README.md            guesswidth.go        kong_test.go         resolver_test.go
_examples/           guesswidth_unix.go   levenshtein.go       scanner.go
build.go             help.go              mapper.go            scanner_test.go
camelcase.go         help_test.go         mapper_test.go       tag.go
context.go           interpolate.go       model.go             tag_test.go
doc.go               interpolate_test.go  model_test.go        tokentype_string.go
error.go             kong.go              options.go
global.go            kong.png             options_test.go
global_test.go       kong.sketch          resolver.go
[aat@cavern:~/Projects/kong]
Traceback (most recent call last):
  File "/usr/local/bin/termtosvg", line 11, in <module>
    sys.exit(main())
  File "/usr/local/lib/python3.6/site-packages/termtosvg/__main__.py", line 199, in main
    anim.render_animation(replayed_records, svg_filename, font)
  File "/usr/local/lib/python3.6/site-packages/termtosvg/anim.py", line 213, in render_animation
    for event_record in record_group:
  File "/usr/local/lib/python3.6/site-packages/termtosvg/term.py", line 248, in replay
    for event_record in _group_by_time(records, min_frame_duration, last_frame_duration):
  File "/usr/local/lib/python3.6/site-packages/termtosvg/term.py", line 163, in _group_by_time
    for event_record in event_records:
  File "/usr/local/lib/python3.6/site-packages/termtosvg/term.py", line 53, in record
    for data, time in _record(columns, lines, input_fileno, output_fileno):
  File "/usr/local/lib/python3.6/site-packages/termtosvg/term.py", line 101, in _record
    for data, time in _capture_data(input_fileno, output_fileno, master_fd):
  File "/usr/local/lib/python3.6/site-packages/termtosvg/term.py", line 144, in _capture_data
    n = os.write(write_fileno, data)
OSError: [Errno 5] Input/output error

Hi guys,

i get following error on Centos 7. Could you please tell my why?

Traceback (most recent call last):
  File "/home/xxxxxx/.local/bin/termtosvg", line 11, in <module>
    load_entry_point('termtosvg==0.4.0', 'console_scripts', 'termtosvg')()
  File "/usr/lib/python2.7/site-packages/pkg_resources/__init__.py", line 479, in load_entry_point
    return get_distribution(dist).load_entry_point(group, name)
  File "/usr/lib/python2.7/site-packages/pkg_resources/__init__.py", line 2703, in load_entry_point
    return ep.load()
  File "/usr/lib/python2.7/site-packages/pkg_resources/__init__.py", line 2321, in load
    return self.resolve()
  File "/usr/lib/python2.7/site-packages/pkg_resources/__init__.py", line 2327, in resolve
    module = __import__(self.module_name, fromlist=['__name__'], level=0)
  File "/home/xxxxxx/.local/lib/python2.7/site-packages/termtosvg/__main__.py", line 143
    print(record.to_json_line(), file=cast_file)
                                     ^
SyntaxError: invalid syntax

THANKS

Greets

Harry

It looks like the SVG in the README of termtosvg uses github.io to host the SVG.

When the ![](./img/foo.svg) syntax used, the rendered GitHub HTML does not actually animate the SVG. :(

It seems like Github is restricting this ––but not when you do <p><img src='//example.com/foo.svg'></p>?

It would be great if this was added to homebrew for easy package management / upgrades / portability etc...

https://docs.brew.sh/Formula-Cookbook

• Edit, also this is one of the most useful applications I've found recently, so thank you for creating something that's a) not written in javascript b) outputs to svg and c) doesn't upload your recordings to some cloud service. 🍺

Would be useful to be able to apply this as a transform to all asciinemas. that way we could embed asciinemas as svgs in github readmes, etc. Asciinema provides a bunch of other useful things (playback controls and so on) for various contexts.

I havent used it too much, but how does the svg compression compare to other formats like gif? Im talking about ~5s or 30s clips. Not really an issue, just want to start a discussion

Fantastic project 👍

Would be really great to have the ability to trim frames out of the animation.

Raw recording

| ..startup.. | ..content.. | ..loading .. |  ..content.. | ..shutdown.. |

After trim and slice

| ..content.. | ..content.. |

Perhaps it could be handled by removing one frame a time or a range of frames. If a product exists already to do this I suggest adding it to the docs 😃