Change termotosvg template

default.nix

@@ -169,7 +169,7 @@ rec
 
       pushd $(mktemp -d)
       ${pkgs.termtosvg}/bin/termtosvg \
-          -g 82x26 -M 500 -m 500 -t window_frame_js \
+          -g 82x26 -M 2000 -m 2000 -t gjm8 \
           -c '${niv-svg-cmds}' $site/niv.svg
 
       echo done rendering

site/niv.svg

@@ -1,11 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="terminal" baseProfile="full" viewBox="0 0 703 588" width="703" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="terminal" baseProfile="full" viewBox="0 0 656 444" width="656" version="1.1">
     <defs>
         <termtosvg:template_settings xmlns:termtosvg="https://github.com/nbedos/termtosvg">
             <termtosvg:screen_geometry columns="82" rows="26"/>
-            <termtosvg:animation type="waapi"/>
+            <termtosvg:animation type="css"/>
         </termtosvg:template_settings>
-        <style type="text/css" id="generated-style"><![CDATA[
+        <style type="text/css" id="generated-style"><![CDATA[#screen {
-        #screen {
                 font-family: 'DejaVu Sans Mono', monospace;
                 font-style: normal;
                 font-size: 14px;
@@ -15,6 +14,26 @@
             dominant-baseline: text-before-edge;
             white-space: pre;
         }
+    
+            :root {
+                --animation-duration: 7000ms;
+            }
+
+            @keyframes roll {
+                0.000%{transform:translateY(0px)}
+28.571%{transform:translateY(-442px)}
+57.143%{transform:translateY(-884px)}
+85.714%{transform:translateY(-1326px)}
+100.000%{transform:translateY(-1326px)}
+            }
+
+            #screen_view {
+                animation-duration: var(--animation-duration);
+                animation-iteration-count:infinite;
+                animation-name:roll;
+                animation-timing-function: steps(1,end);
+                animation-fill-mode: forwards;
+            }
         ]]></style>
         <style type="text/css" id="user-style">
             /* gjm8 color theme (source: https://terminal.sexy/) */
@@ -36,179 +55,8 @@
             .color13 {fill: #833c9f;}
             .color14 {fill: #0ac1cd;}
             .color15 {fill: #e5e5e5;}
-            #play-button {
-                transform: translate(30px, calc(100% - 45px));
-            }
-            #pause-button {
-                transform: translate(30px, calc(100% - 45px));
-            }
-            #wide_track {
-                transform: translate(150px, calc(100% - 45px));
-            }
-            #track {
-                transform: translate(150px, calc(100% - 33px));
-            }
-            #slider_button {
-                transform: translate(0px, calc(100% - 30px));
-            }
-            #timer {
-                transform: translate(60px, calc(100% - 38px));
-                font-family: 'DejaVu Sans Mono', monospace;
-                font-style: normal;
-                font-size: 14px;
-            }
         </style>
-        <rect id="slider_wide_track" height="30px" width="65%"/>
-        <rect id="slider_track" height="6px" width="65%"/>
-        <circle id="slider_button" r="10px" class="color1"/>
-        <g id="icon-play">
-            <rect x="-5" y="0" width="25" height="30" class="background"/>
-            <path d="M0 4l14 11-14 11z"/>
-        </g>
-        <g id="icon-pause">
-            <rect x="-5" y="0" width="25" height="30" class="background"/>
-            <rect x="0" y="5" width="5" height="20"/>
-            <rect x="10" y="5" width="5" height="20"/>
-        </g>
     </defs>
-    <rect id="terminalui" class="background" width="100%" height="100%" ry="4.5826941"/>
+    <svg id="screen" width="656" height="442" viewBox="0 0 656 442" preserveAspectRatio="xMidYMin slice">
-    <circle cx="24" cy="23" r="7" class="color1"/>
-    <circle cx="44" cy="23" r="7" class="color3"/>
-    <circle cx="64" cy="23" r="7" class="color2"/>
-    <svg id="screen" width="656" height="442" x="23" y="50" viewBox="0 0 656 442" preserveAspectRatio="xMidYMin slice">
         <rect class="background" height="100%" width="100%" x="0" y="0"/><defs><g id="g1"><text class="foreground" textLength="80" x="0">$ niv init</text></g><g id="g2"><text class="color15" font-weight="bold" textLength="96" x="0">Initializing</text></g><g id="g3"><text class="foreground" textLength="208" x="0">  Creating nix/sources.nix</text></g><g id="g4"><text class="foreground" textLength="216" x="0">  Creating nix/sources.json</text></g><g id="g5"><text class="foreground" textLength="168" x="0">  Importing 'niv' ...</text></g><g id="g6"><text class="foreground" textLength="16" x="0">  </text><text class="color15" font-weight="bold" textLength="208" x="16">Adding package nmattia/niv</text></g><g id="g7"><text class="foreground" textLength="192" x="0">    Reading sources file</text></g><g id="g8"><text class="background" textLength="8" x="0"> </text></g><g id="g9"><text class="foreground" textLength="224" x="0">    Writing new sources file</text></g><g id="g10"><text class="foreground" textLength="16" x="0">  </text><text class="color10" font-weight="bold" textLength="32" x="16">Done</text><text class="foreground" textLength="224" x="48">: Adding package nmattia/niv</text></g><g id="g11"><text class="foreground" textLength="200" x="0">  Importing 'nixpkgs' ...</text></g><g id="g12"><text class="foreground" textLength="16" x="0">  </text><text class="color15" font-weight="bold" textLength="296" x="16">Adding package NixOS/nixpkgs-channels</text></g><g id="g13"><text class="foreground" textLength="16" x="0">  </text><text class="color10" font-weight="bold" textLength="32" x="16">Done</text><text class="foreground" textLength="312" x="48">: Adding package NixOS/nixpkgs-channels</text></g><g id="g14"><text class="color10" font-weight="bold" textLength="32" x="0">Done</text><text class="foreground" textLength="112" x="32">: Initializing</text></g><g id="g15"><text class="foreground" textLength="168" x="0">$ niv add stedolan/jq</text></g><g id="g16"><text class="color15" font-weight="bold" textLength="208" x="0">Adding package stedolan/jq</text></g><g id="g17"><text class="foreground" textLength="176" x="0">  Reading sources file</text></g><g id="g18"><text class="foreground" textLength="208" x="0">  Writing new sources file</text></g><g id="g19"><text class="color10" font-weight="bold" textLength="32" x="0">Done</text><text class="foreground" textLength="224" x="32">: Adding package stedolan/jq</text></g></defs><g id="screen_view"><g><use y="0" xlink:href="#g1"/><use y="17" xlink:href="#g2"/><use y="34" xlink:href="#g3"/><use y="51" xlink:href="#g4"/><use y="68" xlink:href="#g5"/><use y="85" xlink:href="#g6"/><use y="102" xlink:href="#g7"/><rect class="foreground" height="17" width="8" x="0" y="119"/><use y="119" xlink:href="#g8"/></g><g><use y="442" xlink:href="#g1"/><use y="459" xlink:href="#g2"/><use y="476" xlink:href="#g3"/><use y="493" xlink:href="#g4"/><use y="510" xlink:href="#g5"/><use y="527" xlink:href="#g6"/><use y="544" xlink:href="#g7"/><use y="561" xlink:href="#g9"/><use y="578" xlink:href="#g10"/><use y="595" xlink:href="#g11"/><use y="612" xlink:href="#g12"/><use y="629" xlink:href="#g7"/><rect class="foreground" height="17" width="8" x="0" y="646"/><use y="646" xlink:href="#g8"/></g><g><use y="884" xlink:href="#g1"/><use y="901" xlink:href="#g2"/><use y="918" xlink:href="#g3"/><use y="935" xlink:href="#g4"/><use y="952" xlink:href="#g5"/><use y="969" xlink:href="#g6"/><use y="986" xlink:href="#g7"/><use y="1003" xlink:href="#g9"/><use y="1020" xlink:href="#g10"/><use y="1037" xlink:href="#g11"/><use y="1054" xlink:href="#g12"/><use y="1071" xlink:href="#g7"/><use y="1088" xlink:href="#g9"/><use y="1105" xlink:href="#g13"/><use y="1122" xlink:href="#g14"/><use y="1156" xlink:href="#g15"/><use y="1173" xlink:href="#g16"/><use y="1190" xlink:href="#g17"/><rect class="foreground" height="17" width="8" x="0" y="1207"/><use y="1207" xlink:href="#g8"/></g><g><use y="1326" xlink:href="#g1"/><use y="1343" xlink:href="#g2"/><use y="1360" xlink:href="#g3"/><use y="1377" xlink:href="#g4"/><use y="1394" xlink:href="#g5"/><use y="1411" xlink:href="#g6"/><use y="1428" xlink:href="#g7"/><use y="1445" xlink:href="#g9"/><use y="1462" xlink:href="#g10"/><use y="1479" xlink:href="#g11"/><use y="1496" xlink:href="#g12"/><use y="1513" xlink:href="#g7"/><use y="1530" xlink:href="#g9"/><use y="1547" xlink:href="#g13"/><use y="1564" xlink:href="#g14"/><use y="1598" xlink:href="#g15"/><use y="1615" xlink:href="#g16"/><use y="1632" xlink:href="#g17"/><use y="1649" xlink:href="#g18"/><use y="1666" xlink:href="#g19"/><rect class="foreground" height="17" width="8" x="0" y="1683"/><use y="1683" xlink:href="#g8"/></g></g></svg>
-    <text id="timer" class="foreground">0:00/0:00</text>
-    <!-- Invisible, wider track to make frame seeking easier -->
-    <use xlink:href="#slider_wide_track" id="wide_track" class="background"/>
-    <!-- Visible track -->
-    <use xlink:href="#slider_track" id="track" class="foreground"/>
-    <use xlink:href="#slider_button" id="slider_1"/>
-    <use xlink:href="#icon-play" id="play-button" class="foreground"/>
-    <use xlink:href="#icon-pause" id="pause-button" class="foreground"/>
-    <script type="text/javascript" id="generated-js"><![CDATA[
-        var termtosvg_vars = {
-            transforms: [
-                {transform: 'translate3D(0, 0px, 0)', easing: 'steps(1, end)'},
-{transform: 'translate3D(0, -442px, 0)', easing: 'steps(1, end)', offset: 0.200},
-{transform: 'translate3D(0, -884px, 0)', easing: 'steps(1, end)', offset: 0.400},
-{transform: 'translate3D(0, -1326px, 0)', easing: 'steps(1, end)', offset: 0.600},
-{transform: 'translate3D(0, -1326px, 0)', easing: 'steps(1, end)'}
-            ],
-            timings: {
-                duration: 2500,
-                iterations: Infinity
-            }
-        };]]></script>
-<script type="text/javascript">
-var animation = document.getElementById("screen_view").animate(
-    termtosvg_vars.transforms,
-    termtosvg_vars.timings
-)
-var terminal   = document.getElementById('terminal')
-var play_button = terminal.getElementById('play-button');
-var pause_button = terminal.getElementById('pause-button');
-var is_playing = true;
-
-animation.onfinish = function() {
-  play_button.setAttribute('display', 'inline')
-  pause_button.setAttribute('display', 'none')
-  is_playing = false;
-};
-
-function togglePlayPause() {
-    if (is_playing) {
-      animation.pause()
-      play_button.setAttribute('display', 'inline')
-      pause_button.setAttribute('display', 'none')
-      is_playing = false
-    } else {
-      animation.play()
-      play_button.setAttribute('display', 'none')
-      pause_button.setAttribute('display', 'inline')
-      is_playing = true
-    }
-};
-
-play_button.addEventListener('click', togglePlayPause, false)
-pause_button.addEventListener('click', togglePlayPause, false)
-
-
-var style = getComputedStyle(terminal);
-var animation_duration = termtosvg_vars.timings.duration / 1000
-var timer = terminal.getElementById('timer')
-
-function timer_from_seconds(t) {
-    minutes = Math.floor(t / 60);
-    seconds = Math.floor(t % 60);
-    return minutes + ':' + ("0" + seconds).slice(-2)
-}
-function update_timer() {
-    var current_time = (animation.currentTime / 1000) % animation_duration
-    timer.textContent =  timer_from_seconds(current_time) + "/" + timer_from_seconds(animation_duration)
-}
-setInterval(update_timer, "100ms")
-
-
-
-
-var slider_1  = terminal.getElementById('slider_1');
-function getTranslateX(elem) {
-  var style = window.getComputedStyle(elem);
-  var matrix = new WebKitCSSMatrix(style.webkitTransform);
-  return parseInt(matrix.m41)
-}
-
-var limitLower = parseInt(getTranslateX(terminal.getElementById('track')));
-var limitUpper = limitLower + parseInt(terminal.getElementById('track').getBoundingClientRect().width) - 8
-
-// Return X position for an event
-function mx(evt){
-    var pt = terminal.createSVGPoint();
-    pt.x = evt.clientX;
-    return pt.matrixTransform(terminal.getScreenCTM().inverse());
-}
-
-// Set the current time of the animation to get the slider button under the cursor
-var move = function(evt){
-    var cursor_position = mx(evt);
-    if ( cursor_position.x &lt; limitLower || cursor_position.x &gt; limitUpper ) {
-        return;
-    }
-    animation.currentTime = animation_duration * 1000 * (cursor_position.x - limitLower) / (limitUpper - limitLower)
-};
-
-// Move the slider button to the cursor position when a click happens on the track of the slider
-terminal.getElementById('wide_track').addEventListener('click', move, false);
-terminal.getElementById('track').addEventListener('click', move, false);
-
-// Enable slider button dragging along the track
-var dragging = false;
-slider_1.addEventListener('mousedown',function(evt){
-        if (is_playing) {
-            animation.pause()
-            play_button.setAttribute('display', 'inline')
-            pause_button.setAttribute('display', 'none')
-        }
-
-        dragging = true;
-        terminal.addEventListener('mousemove', move, false);
-        document.documentElement.addEventListener('mouseup', function(){
-                dragging = false;
-                if (is_playing) {
-                    animation.play()
-                    play_button.setAttribute('display', 'none')
-                    pause_button.setAttribute('display', 'inline')
-                }
-                terminal.removeEventListener('mousemove', move, false);
-        }, false);
-}, false);
-
-function update_slider_button() {
-    var current_time = (animation.currentTime / 1000) % animation_duration
-    var current_position = limitLower + (limitUpper - limitLower) * current_time / animation_duration
-    slider_1.setAttribute('x', parseInt(current_position)+'px')
-}
-
-setInterval(update_slider_button, "100ms")
-</script>
 </svg>