CP 2.4.0

added full OSC support
magdesign · Aug 15, 2018 · e7158f3 · e7158f3
1 parent 2659e51
commit e7158f3
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 38 deletions.
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -1,5 +1,9 @@
 # PocketVJ 3.x Control Panel
 
+## CP 2.4.0 15.August 2018<br />
+added full OSC support (only working on PVJ's 3.6 (and newer) released from today on)<br />
+if you bought your PVJ 3.6 before August 15th, you need to: npm install osc-receiver<br />
+
 ## CP 2.3.9b 07.August 2018<br />
 added pre alpha of magmapper to autostart custom1 buttom (only working on image 3.6 and newer)
 

diff --git a/css/webflow.css b/css/webflow.css
@@ -34,6 +34,9 @@
 .w-icon-file-upload-remove:before {
   content: "\e900";
 }
+.w-icon-file-upload-icon:before {
+  content: "\e903";
+}
 * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -413,13 +416,14 @@ textarea.w-select {
   z-index: -100;
 }
 .w-file-upload-default,
-.w-file-upload-uploading {
+.w-file-upload-uploading,
+.w-file-upload-success {
   display: inline-block;
   color: #333333;
 }
-.w-file-upload-error,
-.w-file-upload-success {
-  display: flex;
+.w-file-upload-error {
+  display: block;
+  margin-top: 10px;
 }
 .w-file-upload-default.w-hidden,
 .w-file-upload-uploading.w-hidden,
@@ -428,15 +432,19 @@ textarea.w-select {
   display: none;
 }
 .w-file-upload-uploading-btn {
-  display: inline-block;
+  display: flex;
   font-size: 14px;
   font-weight: normal;
   cursor: pointer;
   margin: 0;
-  padding: 8px 12px 8px 40px;
+  padding: 8px 12px;
   border: 1px solid #cccccc;
   background-color: #fafafa;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjQ0NDIiBkPSJNMTUgMzBhMTUgMTUgMCAxIDEgMC0zMCAxNSAxNSAwIDAgMSAwIDMwem0wLTNhMTIgMTIgMCAxIDAgMC0yNCAxMiAxMiAwIDAgMCAwIDI0eiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik0wIDE1QTE1IDE1IDAgMCAxIDE1IDB2M0ExMiAxMiAwIDAgMCAzIDE1SDB6Ij48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDE1IDE1IiB0bz0iMzYwIDE1IDE1IiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9wYXRoPjwvZz48L3N2Zz4=");
+}
+.w-file-upload-uploading-bg-img {
+  display: inline-block;
+  padding-left: 40px;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIuMiIgZD0iTTE1IDMwYTE1IDE1IDAgMSAxIDAtMzAgMTUgMTUgMCAwIDEgMCAzMHptMC0zYTEyIDEyIDAgMSAwIDAtMjQgMTIgMTIgMCAwIDAgMCAyNHoiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9Ii43NSIgZD0iTTAgMTVBMTUgMTUgMCAwIDEgMTUgMHYzQTEyIDEyIDAgMCAwIDMgMTVIMHoiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYXR0cmlidXRlVHlwZT0iWE1MIiBkdXI9IjAuNnMiIGZyb209IjAgMTUgMTUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB0bz0iMzYwIDE1IDE1IiB0eXBlPSJyb3RhdGUiLz48L3BhdGg+PC9zdmc+");
   background-position: 12px 50%;
   background-size: 20px 20px;
   background-repeat: no-repeat;
@@ -457,18 +465,20 @@ textarea.w-select {
 }
 .w-file-remove-link {
   margin-top: 3px;
-  width: 16px;
-  height: 16px;
-  display: flex;
+  margin-left: 10px;
+  width: auto;
+  height: auto;
+  padding: 3px;
+  display: block;
   cursor: pointer;
 }
 .w-icon-file-upload-remove {
   margin: auto;
   font-size: 10px;
 }
 .w-file-upload-error-msg {
+  display: inline-block;
   color: #ea384c;
-  margin-top: 10px;
   padding: 2px 0;
 }
 .w-file-upload-info {
@@ -482,25 +492,25 @@ textarea.w-select {
   font-weight: normal;
   cursor: pointer;
   margin: 0;
-  padding: 8px 12px 8px 40px;
+  padding: 8px 12px;
   border: 1px solid #cccccc;
   background-color: #fafafa;
+}
+.w-file-upload-label-bg-img {
+  padding-left: 40px;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAxNCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTUuOTIgNS4wMmE0LjUgNC41IDAgMCAxIC4wOCA4Ljk1VjE0SDRhNCA0IDAgMSAxIDAtOCA2IDYgMCAwIDEgMTEuOTItLjk4ek0xMSA5aDNsLTQtNS00IDVoM3YyaDJWOXoiLz48L3N2Zz4=");
   background-position: 12px 50%;
   background-size: 20px 20px;
   background-repeat: no-repeat;
 }
-.w-icon-file-upload {
-  width: 20px;
-  height: 20px;
+.w-icon-file-upload-icon,
+.w-icon-file-upload-uploading {
+  display: inline-block;
   margin-right: 8px;
+  width: 20px;
 }
-.w-icon-file-upload-svg {
-  width: 100%;
-  height: 100%;
-}
-.w-form-recaptcha {
-  margin-bottom: 8px;
+.w-icon-file-upload-uploading {
+  height: 20px;
 }
 .w-container {
   margin-left: auto;

diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!--  This site was created in Webflow. http://www.webflow.com  -->
-<!--  Last Published: Wed Jun 27 2018 09:40:11 GMT+0000 (UTC)  -->
+<!--  Last Published: Wed Aug 15 2018 14:08:49 GMT+0000 (UTC)  -->
 <html data-wf-page="5913869e09b9f23ad6b314ee" data-wf-site="5913869e09b9f23ad6b314ed">
 <head>
   <meta charset="utf-8">
@@ -15,7 +15,8 @@
   <link href="css/webflow.css" rel="stylesheet" type="text/css">
   <link href="css/pocketvj-cp.webflow.css" rel="stylesheet" type="text/css">
   <script src="../js/webfont.js" type="text/javascript"></script>
-    <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
+
+  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
   <link href="images/favicon32.png" rel="shortcut icon" type="image/x-icon">
   <link href="images/istore256.png" rel="apple-touch-icon">
   <!-- 
@@ -30,7 +31,7 @@
       <div class="w-row">
         <div class="w-col w-col-6"><a href="https://pocketvj.com/#Downloads" target="_blank" class="w-inline-block"><img src="images/pocketVJlogoS2.png" class="logo"></a></div>
         <div class="w-col w-col-6">
-          <div class="release">CP 2.3.9b</div>
+          <div class="release">CP 2.4.0</div>
         </div>
       </div>
     </div>
@@ -766,6 +767,12 @@ <h1 class="heading_white_right">Slideshow Resize Options:</h1>
               <div class="w-col w-col-6"><a href="?action=screenshare" class="buttongray action w-button">SCREENSHARING</a></div>
               <div class="w-col w-col-6"><a href="?action=setqlc" class="buttongray action w-button">QLC+   DMX console</a></div>
             </div>
+            <div class="w-row">
+              <div class="w-col w-col-6"><a href="?action=setosc" class="buttongray action w-button">OSC control</a></div>
+              <div class="w-col w-col-6">
+                <div class="regular-text">Control the whole CP over OSC instead of TCP<br>Standard port is: 9876</div>
+              </div>
+            </div>
             <div class="w-row">
               <div class="w-col w-col-6"><a href="?action=setprocessing" class="buttongray action w-button">PROCESSING</a></div>
               <div class="w-col w-col-6"><a href="?action=setsuperpikixpi" class="buttongray action w-button">SUPER PIKIX Pi</a></div>
@@ -841,6 +848,10 @@ <h1 class="heading_white_right">Slideshow Resize Options:</h1>
               <div class="w-col w-col-6"><a href="http://192.168.2.254" target="_blank" class="buttonviolett2 w-button">Projector Control Interface</a></div>
               <div class="w-col w-col-6"></div>
             </div>
+            <div class="w-row">
+              <div class="w-col w-col-6"><a href="?action=oscreceiver" class="buttonviolett2 action w-button">Start OSC listener on Port: 9876</a></div>
+              <div class="w-col w-col-6"></div>
+            </div>
             <div class="w-row">
               <div class="w-col w-col-6">
                 <div class="heading_white">  <br><br>Set Audio Output:</div>
@@ -858,6 +869,12 @@ <h1 class="heading_white_right">Slideshow Resize Options:</h1>
               <div class="w-col w-col-3"><a href="?action=both_out" class="buttonviolett2 action w-button">Audio HDMI+Jack</a></div>
               <div class="w-col w-col-3"><a href="?action=alsa_out" class="buttonviolett2 action w-button">Audio USB Soundcard</a></div>
             </div>
+            <div class="w-row">
+              <div class="w-col w-col-6">
+                <div class="regular-text">If you can not hear the audio of your video, make sure its AAC compressed with a maximum bitrate of 192kps. Higher bitrates are not supported!</div>
+              </div>
+              <div class="w-col w-col-6"></div>
+            </div>
             <div class="w-row">
               <div class="w-col w-col-6">
                 <div class="heading_white">  <br><br>DMX / OLA:</div>
@@ -867,13 +884,13 @@ <h1 class="heading_white_right">Slideshow Resize Options:</h1>
             <div class="w-row">
               <div class="w-col w-col-6"><a href="?action=startola" class="buttonviolett2 action w-button">Start  OLA</a></div>
               <div class="w-col w-col-6">
-                <div class="regular-text">DMX / OLA is implemented since PocketVJ 3.5<br>If you have an earlier version you need to install manually</div>
+                <div class="regular-text">DMX / OLA is implemented since PocketVJ 3.5<br>If you have an earlier version you need to install it manually.</div>
               </div>
             </div>
             <div class="w-row">
-              <div class="w-col w-col-6"><a href="#" onclick="window.open(`//${window.location.hostname}:9090`)" target="_blank" class="buttonviolett2 action w-button">Open  OLA Panel</a></div>
+              <div class="w-col w-col-6"><a href="#" onclick="window.open(`//${window.location.hostname}:9090`)" target="_blank" class="buttonviolett2 action w-button">Open  OLA Panel  (webinterface)</a></div>
               <div class="w-col w-col-6">
-                <div class="regular-text">If this knob does not work, just type :9090 behind the address.  e.g.:  http://2.0.0.101:9090</div>
+                <div class="regular-text"></div>
               </div>
             </div>
             <div class="w-row">
@@ -882,6 +899,12 @@ <h1 class="heading_white_right">Slideshow Resize Options:</h1>
                 <div class="regular-text">Run QLC+ to create Light Shows. <br>When using it, please donate the project: http://www.qlcplus.org</div>
               </div>
             </div>
+            <div class="w-row">
+              <div class="w-col w-col-6"><a href="#" onclick="window.open(`//${window.location.hostname}:9999`)" target="_blank" class="buttonviolett2 action w-button">Open  QLC+ Panel (webinterface)</a></div>
+              <div class="w-col w-col-6">
+                <div class="regular-text">To control your QLC+ from here (headless).</div>
+              </div>
+            </div>
             <div class="w-row">
               <div class="w-col w-col-6">
                 <div class="heading_white">  <br><br>Camera:</div>
@@ -1170,9 +1193,7 @@ <h1 class="heading_white_right">Slideshow Resize Options:</h1>
               <div class="w-col w-col-6"></div>
             </div>
             <div class="w-row">
-              <div class="w-col w-col-6">
-                <div class="regular-text">To access the built in Terminal, type :4200 behind your IP in the browser. e.g.: 192.168.2.100:4200</div>
-              </div>
+              <div class="w-col w-col-6"><a href="#" onclick="window.open(`//${window.location.hostname}:4200`)" target="_blank" class="buttonred2 action w-button">Terminal</a></div>
               <div class="w-col w-col-6">
                 <div class="regular-text">Login: pi<br>Pass: pocketusr</div>
               </div>
@@ -1193,7 +1214,7 @@ <h1 class="heading_white_right">Slideshow Resize Options:</h1>
   </div>
   <script src="../js/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
   <script src="js/webflow.js" type="text/javascript"></script>
-  <!-- [if lte IE 9]><script src="../js/jquery//placeholders.min.js"></script><![endif] -->
+  <!-- [if lte IE 9]><script src="../js/placeholders.min.js"></script><![endif] -->
   <!-- 
 Code below this line checks if user is online
  -->

diff --git a/sync/osc_control.js b/sync/osc_control.js
@@ -38,13 +38,11 @@ console.log('start videoplayer as master');
 exec("/var/www/sync/startmaster");
 });
 
-
 receiver.on('/startmaster01', function () {
 console.log('start seamless video_01 loop');
 exec("/var/www/sync/startmaster01");
 });
 
-
 receiver.on('/startmaster02', function () {
 console.log('start seamless video_02 loop');
 exec("/var/www/sync/startmaster02");
@@ -55,16 +53,25 @@ console.log('start seamless video_03 loop');
 exec("/var/www/sync/startmaster03");
 });
 
-
 receiver.on('/startslave', function () {
 console.log('start player as slave');
 exec("/var/www/sync/startslave");
 });
 
+receiver.on('/pause', function () {
+console.log('pause videoplayer');
+exec("/var/www/sync/dbuscontrol.sh pause > /dev/null 2>&1");
+});
 
-//# Imageplayer
+receiver.on('/fastforward', function () {
+console.log('seek 10s forward videoplayer');
+exec("/var/www/sync/dbuscontrol.sh seek 10000000");
+});
 
 
+
+//# Imageplayer
+
 receiver.on('/image', function () {
 console.log('start imageplayer');
 exec("/var/www/sync/startimage > /dev/null &");
@@ -95,9 +102,6 @@ exec("/var/www/sync/beameroff");
 
 
 
-
-
-
 // this here i do not really know what for its stands..
 receiver.on('message', function() {
   // handle all messages