Dodani gumbi, slogovni popravki, poprakvi skript

0_vidi.sh

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

1_mjpeg2rtp.sh

@@ -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

desno.svg

@@ -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>

gor.svg

@@ -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>

index.html

@@ -19,13 +19,26 @@
 
 <body>
   <section id="glavno">
-    <video id="videofeed" class="cakam" muted="" autoplay="" playsinline=""></video>
+    <h1>OBSERVATORIJ</h1>
-    <button id="predvajaj">⏵</button>
+    <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">
+    <section class="zaslon">
-      <button id="levo">←</button>
+        <video id="videofeed" class="cakam" muted="" autoplay="" playsinline=""></video>
-      <button id="desno">→</button>
+        <button id="predvajaj">⏵</button>
-      <button id="ravno">↑</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>
 

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;
+  height: auto;
-  position: relative;
+  box-sizing: border-box;
-}
+  border: 5px solid black;
-
+  border-top-left-radius: 50% 12%;
-.glavno {
+  border-top-right-radius: 50% 12%;
-  position: relative;
+  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: none;
-  border-width: 2rem;
-  border-color: red;
   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;
+  width: 4rem;
-  height: 16rem;
+  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;
+  left: 5rem;
-  bottom: -3rem;
+  bottom: 2rem;
 }
 
 #desno {
-  right: -3rem;
+  right: 5rem;
-  bottom: -3rem;
+  bottom: 2rem;
 }
 
 #ravno {
-  left: calc(50% - 7.5rem);
+  left: calc(50% - 2.5rem);
-  bottom: -3rem;
+  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;
+}