Dodani gumbi, slogovni popravki, poprakvi skript

sbc
Jurij Podgoršek 2023-05-10 18:40:06 +02:00
parent 545daa1e77
commit 925e2bbae4
6 changed files with 201 additions and 27 deletions

View File

@ -2,4 +2,9 @@
source .env
# Inicializiraj kamero
url="$VIR/cm?cmnd=WcInit"
curl "$url"
# Kazi sliko!
ffplay $VIR:81

View File

@ -2,6 +2,11 @@
source .env
# Inicializiraj kamero
url="$VIR/cm?cmnd=WcInit"
curl "$url"
# Pretvori MJPEG v VP8 RTP stream
#ffmpeg -re -stream_loop -1 -i $VIR -c:v libx264 -tune zerolatency -profile:v baseline -b:v 1M -an -f rtp $CILJ
ffmpeg -re -stream_loop -1 -i "$VIR:81" -c:v libvpx -b:v 1M -an -f rtp $CILJ
ffmpeg -threads 3 -re -fflags +genpts -stream_loop -1 -i "$VIR:81" -c:v libvpx -crf 10 -b:v 1M -an -f rtp $CILJ

43
desno.svg 100644
View File

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="259.26196mm"
height="166.1273mm"
viewBox="0 0 259.26196 166.1273"
version="1.1"
id="svg5"
xml:space="preserve"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="desno.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.66101291"
inkscape:cx="257.18106"
inkscape:cy="270.04011"
inkscape:window-width="1920"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" /><defs
id="defs2" /><g
inkscape:label="Plast 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(41.933135,-78.172251)"><path
style="fill:#000000;stroke-width:0.264583"
d="m -38.642685,243.82712 c -1.303156,-0.59201 -2.609494,-2.03724 -3.051192,-3.3756 -0.619779,-1.87795 0.02719,-12.01381 1.220592,-19.12257 6.256999,-37.27129 33.6067655,-65.71185 79.933716,-83.12174 14.228027,-5.34696 32.611716,-10.09698 47.236755,-12.20515 l 4.158437,-0.59943 0.0749,-21.56968 0.0749,-21.569679 0.661458,-1.178876 c 1.275003,-2.272362 3.927102,-3.396868 6.400612,-2.713899 1.291352,0.35656 116.479207,77.852994 117.750707,79.220674 2.02068,2.17355 2.0134,5.27456 -0.0173,7.35946 -1.18905,1.2208 -116.233226,78.6381 -117.492797,79.06506 -2.558306,0.86721 -5.473075,-0.32471 -6.627928,-2.71032 -0.534194,-1.10351 -0.542481,-1.47275 -0.542481,-24.17252 0,-12.67854 -0.0893,-23.09783 -0.198437,-23.15397 -0.109141,-0.0561 -4.441693,-0.0121 -9.627894,0.0978 -37.607959,0.79731 -58.486533,4.60749 -77.5251056,14.14773 -9.4472626,4.73403 -16.8580114,10.10293 -23.8052494,17.24629 -4.850999,4.98794 -8.337441,9.71255 -10.893142,14.76172 -0.511999,1.01153 -1.269695,2.16025 -1.683767,2.55271 -1.609894,1.52588 -4.054361,1.94709 -6.046796,1.04195 z"
id="path2671" /></g></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

22
gor.svg 100644
View File

@ -0,0 +1,22 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1280.000000pt" height="1280.000000pt" viewBox="0 0 1280.000000 1280.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M6238 12785 c-140 -27 -278 -90 -388 -178 -30 -24 -242 -224 -470
-443 -229 -220 -1466 -1406 -2750 -2637 -1284 -1231 -2367 -2274 -2406 -2318
-83 -94 -151 -217 -190 -344 -25 -81 -27 -105 -27 -240 0 -134 2 -159 26 -238
94 -307 304 -517 614 -614 l88 -28 1472 -3 1473 -2 2 -2513 3 -2512 28 -85
c114 -341 383 -571 724 -620 56 -8 628 -10 2013 -8 2061 4 1936 1 2075 46 231
75 445 280 535 514 64 165 60 -7 60 2704 l0 2474 1473 2 1472 3 88 28 c308 96
521 309 613 612 25 81 27 105 27 240 0 134 -2 159 -26 238 -46 148 -119 275
-219 379 -29 30 -766 739 -1638 1574 -872 836 -2107 2021 -2745 2633 -638 612
-1187 1135 -1220 1162 -78 63 -219 133 -320 160 -106 27 -283 34 -387 14z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -19,13 +19,26 @@
<body>
<section id="glavno">
<h1>OBSERVATORIJ</h1>
<h2>je umetniška instalacija, ki je del razstave nevidni sopotnik v mestni galeriji nova gorica. spodnja konzola vam omogoča uporavljanje tamkajšnjega lebdečega objekta.</h2>
<section class="zaslon">
<video id="videofeed" class="cakam" muted="" autoplay="" playsinline=""></video>
<button id="predvajaj"></button>
<section class="gumbi">
<button id="levo"></button>
<button id="desno"></button>
<button id="ravno"></button>
<button id="levo"></button>
<button id="desno"></button>
<button id="ravno"></button>
</section>
</section>
<section class="info">
<p>Avtor: BOŠTJAN DRINOVEC</p>
<p>programiranje: JURIJ PODGORŠEK</p>
<p>elektronika: BORUT SAVSKI</p>
<p>produkcija: Mestna Galerija Nova Gorica in Boštjan Drinovec, 2023</p>
</section>
</section>

126
stil.css
View File

@ -1,17 +1,45 @@
body {
padding: 0;
margin: 0;
line-height: 0;
font-family: sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
}
h1, h2 {
text-transform: uppercase;
display: inline;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: .9rem;
font-weight: normal;
}
.zaslon {
position: relative;
width: 100%;
margin: 2rem 0;
height: auto;
}
video {
width: 100%;
height: 100vh;
position: relative;
}
.glavno {
position: relative;
height: auto;
box-sizing: border-box;
border: 5px solid black;
border-top-left-radius: 50% 12%;
border-top-right-radius: 50% 12%;
border-bottom-left-radius: 50% 12%;
border-bottom-right-radius: 50% 12%;
}
#predvajaj {
@ -28,14 +56,12 @@ video {
border-radius: 100%;
cursor: pointer;
border-style: groove;
border-width: 2rem;
border-color: red;
border: none;
background-color: white;
}
.gumbi {
position: fixed;
position: absolute;
bottom: 0;
width: 100%;
display: none;
@ -44,34 +70,94 @@ video {
.gumbi button {
position: absolute;
display: flex;
width: 16rem;
height: 16rem;
width: 4rem;
height: 4rem;
border-radius: 100%;
font-size: 10rem;
font-size: 6rem;
font-weight: bold;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
background-size: contain;
background-repeat: no-repeat;
}
#levo {
left: -3rem;
bottom: -3rem;
left: 5rem;
bottom: 2rem;
}
#desno {
right: -3rem;
bottom: -3rem;
right: 5rem;
bottom: 2rem;
}
#ravno {
left: calc(50% - 7.5rem);
bottom: -3rem;
left: calc(50% - 2.5rem);
bottom: 1rem;
width: 5rem;
height: 5rem;
}
#levo:before,
#desno:before,
#ravno:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: contain;
background-repeat: no-repeat;
}
#levo:before,
#desno:before,
#ravno:before {
width: 80%;
height: 80%;
left: 10%;
top: 10%;
}
#levo:before,
#desno:before {
top: 20%;
}
#ravno:before {
background-image: url(gor.svg);
width: 65%;
height: 65%;
top: 17.5%;
left: 17.5%;
}
#levo:before {
background-image: url(desno.svg);
transform: scaleX(-1);
}
#desno:before {
background-image: url(desno.svg);
}
.predvajam .gumbi {
display: block;
}
#glavno {
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding: 1rem;
}
.info {
font-size: .9rem;
}
.info p {
margin: 0;
}