Dodani gumbi, slogovni popravki, poprakvi skript
parent
545daa1e77
commit
925e2bbae4
|
|
@ -2,4 +2,9 @@
|
|||
|
||||
source .env
|
||||
|
||||
# Inicializiraj kamero
|
||||
url="$VIR/cm?cmnd=WcInit"
|
||||
curl "$url"
|
||||
|
||||
# Kazi sliko!
|
||||
ffplay $VIR:81
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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 |
25
index.html
25
index.html
|
|
@ -19,13 +19,26 @@
|
|||
|
||||
<body>
|
||||
<section id="glavno">
|
||||
<video id="videofeed" class="cakam" muted="" autoplay="" playsinline=""></video>
|
||||
<button id="predvajaj">⏵</button>
|
||||
<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="gumbi">
|
||||
<button id="levo">←</button>
|
||||
<button id="desno">→</button>
|
||||
<button id="ravno">↑</button>
|
||||
|
||||
<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>
|
||||
</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
126
stil.css
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue