mirror of
https://github.com/nmattia/niv.git
synced 2024-11-25 09:56:49 +03:00
Change termotosvg template
This commit is contained in:
Nicolas Mattia
parent
94905b3999
commit
c57098815e
@ -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
|
||||
|
||||
200
site/niv.svg
200
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[
|
||||
#screen {
|
||||
<style type="text/css" id="generated-style"><![CDATA[#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"/>
|
||||
<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 < limitLower || cursor_position.x > 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>
|
||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 6.9 KiB |
Loading…
Reference in New Issue
Block a user