Skip to content
Permalink
Browse files

Change termotosvg template

  • Loading branch information...
nmattia committed Sep 8, 2019
1 parent 94905b3 commit c57098815e542b3a345d6f3fa821ea87c75b751d
Showing with 30 additions and 182 deletions.
  1. +1 −1 default.nix
  2. +29 −181 site/niv.svg
@@ -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
@@ -1,21 +1,40 @@
<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[
#screen {
font-family: 'DejaVu Sans Mono', monospace;
font-style: normal;
font-size: 14px;
}
<style type="text/css" id="generated-style"><![CDATA[#screen {
font-family: 'DejaVu Sans Mono', monospace;
font-style: normal;
font-size: 14px;
}

text {
dominant-baseline: text-before-edge;
white-space: pre;
}
]]></style>

: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/) */
.foreground {fill: #c5c5c5;}
@@ -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"/>
<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">
<svg id="screen" width="656" height="442" 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>

0 comments on commit c570988

Please sign in to comment.
You can’t perform that action at this time.