2024 facelift (#6)

* Remove outdated nav items, first bunch of cleanup operations

* First steps into facelift, switch to dark color and stuff

* Finish cooler landing page and start improved playground

* Finish skeleton layout for new playground

* Add live mode to new playground

* Memorize database data to return to it after live mode, code cleanup

* Add missing features in new playground and migrate examples

* Add export mode and help menu

* Add more examples, add heavy model, manual

* Gpu driven fluid example, fullscreen button

mounts/zoperepo/__root__/choreo/choreo_table_pt/__source-utf8__.html

@@ -1,4 +1,4 @@
-<table class="table table-hover">
+<table class="table table-dark table-hover">
   <thead>
     <tr>
       <th scope="col" data-tour="step: 5; title: Choreo ID; content: Primary key used in database to identify each record">ID</th>

mounts/zoperepo/__root__/tf_live_demo/index_html/__meta__ → mounts/zoperepo/__root__/choreo/fetch_playground/__meta__

@@ -1,11 +1,12 @@
 [
-    ('args', ''),
+    ('args', 'choreo_id'),
     ('bindings', [
         ('name_container', 'container'),
         ('name_context', 'context'),
         ('name_m_self', 'script'),
         ('name_subpath', 'traverse_subpath'),
     ]),
+    ('owner', (['acl_users'], 'dockerzope')),
     ('proxy_roles', [
     ]),
     ('title', ''),

mounts/zoperepo/__root__/choreo/fetch_playground/__source__.py

@@ -0,0 +1,19 @@
+import json
+
+res = context.fetch(
+    mode='python',
+    choreo_id=choreo_id,
+    include_rawdata=True,
+)['choreos'][0]
+
+choreo_json = res['rawdata_json']
+
+result = {
+    'choreo_json': choreo_json,
+    'choreo_name': res['choreo_name'],
+    'choreo_author': res['choreo_author'],
+    'choreo_id': choreo_id,
+}
+
+context.REQUEST.response.setHeader('Content-Type', 'application/json')
+return json.dumps(result)

mounts/zoperepo/__root__/choreo/index_html/__source-utf8__.html

@@ -1,25 +1,40 @@
 <p metal:use-macro="context/master_pt/macros/std_page">
     <div metal:fill-slot="std_body">
         <script src="custom_js"></script>
-        <h1>Interfaces DB</h1>
 
-        <nav aria-label="breadcrumb">
-          <ol class="breadcrumb">
-            <li class="breadcrumb-item"><a href="../index_html">Home</a></li>
-            <li class="breadcrumb-item active" aria-current="page">Choreo</li>
-          </ol>
-        </nav>
+        <header>
+
+            <nav class="navbar navbar-expand-lg navbar-dark bg-dark p-0">
+              <div class="container-fluid">
+
+                <a class="navbar-brand" href="/index_html">
+                  <img src="lib/assets/img/logo" width="50px" height="50px" class="d-inline-block align-text-top"></img>
+                </a>
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+                  <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+                  <div class="navbar-nav">
+                    <a class="nav-link active fs-1" aria-current="page" href="#">Interfaces DB</a>
+                  </div>
+                </div>
+              </div>
+            </nav>
+
+        </header>
 
         <div class="d-grid gap-2 d-md-block">
             <button type="button" class="btn btn-success" onclick="start_tut(event)">
                 <i class="fa-solid fa-graduation-cap"></i>
                 Tutorial
             </button>
-            <button class="btn btn-primary" id="start_upload" type="button" data-tour="step: 2; title: Upload JSON file; content: Open dialogue to upload prepared JSON files. This can be useful when migrating data between Interfaces instances">
+            <a class="btn btn-secondary" href="/playground/index_html">Playground</a>
+            <button class="btn btn-secondary" id="start_upload" type="button" data-tour="step: 2; title: Upload JSON file; content: Open dialogue to upload prepared JSON files. This can be useful when migrating data between Interfaces instances">
                 <i class="fa-solid fa-file-import"></i>
                 Upload JSON file
             </button>
-            <button class="btn btn-primary" id="start_video_upload" type="button" data-tour="step: 3; title: Server side video processing; content: Upload a video file ( mp4 ) and call server side scanner on it. Make sure to read dialogue infos and best practices to avoid wasting time on broken scans">
+            <button class="btn btn-secondary" id="start_video_upload" type="button" data-tour="step: 3; title: Server side video processing; content: Upload a video file ( mp4 ) and call server side scanner on it. Make sure to read dialogue infos and best practices to avoid wasting time on broken scans">
                 <i class="fa-solid fa-file-import"></i>
                 Upload video file
             </button>
@@ -29,7 +44,8 @@ <h1>Interfaces DB</h1>
             </button>
         </div>
 
-        <div id="table_stage" data-tour="step: 1; title: Choreo Database; content: Overview table for choreo records. If you don't see a table here, make sure to initialize the database!">
+        <div id="table_stage"
+             data-tour="step: 1; title: Choreo Database; content: Overview table for choreo records. If you don't see a table here, make sure to initialize the database!">
         </div>
 
 

mounts/zoperepo/__root__/index_html/__source-utf8__.html

@@ -1,37 +1,70 @@
 <p metal:use-macro="context/master_pt/macros/std_page">
   <div data-tour="step: 1; title: Welcome!; content: Welcome to Interfaces Webapp!" metal:fill-slot="std_body">
-    <h1>Interfaces</h1>
-
-    <nav aria-label="breadcrumb">
-      <ol class="breadcrumb">
-        <li class="breadcrumb-item active" aria-current="page">Home</li>
-      </ol>
-    </nav>
-
-    <button type="button" class="btn btn-success" onclick="start_tut(event)">
-        <i class="fa-solid fa-graduation-cap"></i>
-        Start Tour
-    </button>
-
-    <a href="tf_live_demo/index_html" class="btn btn-primary" data-tour="step: 2; title: TensorflowJS live processing; content: Record motion capturing data directly and live via Webcam">
-        Tensorflow-JS local live processing
-    </a>
-    <a href="tf_upload_demo/index_html" class="btn btn-primary" data-tour="step: 3; title: TensorflowJS local video processing; content: Process videos locally in browser without video upload">
-        Tensorflow-JS local video processing
-    </a>
-    <a href="choreo/index_html" class="btn btn-primary" data-tour="step: 4; title: Choreo database; content: Access database functions and server side video processing here">
-        Database
-    </a>
-    <a href="p5_playground/index_html" class="btn btn-primary" data-tour="step: 6; title: p5js playground; content: Run a p5 sketch against records from database">
-        p5js playground
-    </a>
-    <a href="mp_live_scan/index_html" class="btn btn-primary" data-tour="step: 7; title: mediapipe live scan; content: Live scan from webcam input via mediapipe JS pipeline">
-        MediaPipe live scan
-    </a>
-
-    <a href="mediapipe_upload/index_html" class="btn btn-primary" data-tour="step: 8; title: MediaPipe upload scan; content: Upload video for server sided scan">
-        MediaPipe upload scan
-    </a>
+
+    <script src="landingpage_js"></script>
+
+    <header>
+
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark p-0">
+          <div class="container-fluid">
+
+            <a class="navbar-brand" href="/index_html">
+              <img src="lib/assets/img/logo" width="50px" height="50px" class="d-inline-block align-text-top"></img>
+            </a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+              <div class="navbar-nav">
+                <a class="nav-link active fs-1" aria-current="page" href="#">Interfaces</a>
+              </div>
+            </div>
+          </div>
+        </nav>
+
+    </header>
+
+    <main>
+        <!-- Masthead -->
+        <section class="container-fluid">
+          <div id="masthead" class="container"></div>
+        </section>
+        <!-- Primary Content Area -->
+        <section id="mainContent" class="container-fluid">
+          <div class="container">
+            <div class="row">
+              <!-- Sidebar -->
+              <aside id="sidebar" class="col-md-3 order-2"></aside>
+              <!-- article/content -->
+              <article id="content" class="col-md-9 order-1">
+
+                <p>“Interfaces” is the bridge between dance and computer art. We capture the dynamics and expression of dance and transport them into the world of code generated art.</p>
+                <p>“Interfaces” wants to trigger, push and moderate a dialog between generative artists and choreographers.</p>
+                <p>"Interfaces" is a data and knowledge base loaded with data from choreographies, workflow documentation, sample code, converters, scanners and other open source tools that aim to help creators to run their respective part of collaborations between dance and code art.</p>
+                <p>Be part of “Interfaces” by either providing Your movements as a scan on our servers, or by creating generative art using the json files with the movement data from choreographers in Your code.</p>
+                <p>"Interfaces" is about sharing and remixing. We respect the idea of open source and fair share. So tag the creators of the content You're using and share the profits - fame, coins or just the fun.</p>
+
+                <a href="playground/index_html" class="btn btn-success w-100">
+                    Start Playground
+                </a>
+
+              </article>
+
+            </div>
+          </div>
+        </section>
+    </main>
+
+    <footer class="container-fluid">
+      <!-- footer menu area -->
+      <div id="footerPrimary" class="container">
+      </div>
+      <!-- subfooter menu area -->
+      <div id="subFooter" class="container">
+      </div>
+    </footer>
+
 
   </div>
 </p>

mounts/zoperepo/__root__/landingpage_js/__meta__

@@ -0,0 +1,8 @@
+[
+    ('owner', (['acl_users'], 'dockerzope')),
+    ('props', [
+        [('id', 'content_type'), ('type', 'string'), ('value', 'text/javascript')],
+    ]),
+    ('title', ''),
+    ('type', 'File'),
+]

mounts/zoperepo/__root__/landingpage_js/__source__.js

@@ -0,0 +1,108 @@
+const background_color = '#212529';
+const FPS = 30;
+const line_map = {
+  0 : [1, 4],
+  1 : [2],
+  2 : [3],
+  3 : [7],
+  4 : [5],
+  5 : [6],
+  6 : [8],
+  9 : [10],
+  11: [12, 13, 23],
+  12: [14, 24],
+  13: [15],
+  14: [16],
+  15: [17, 19, 21],
+  16: [18, 20, 22],
+  17: [19],
+  18: [20],
+  23: [24, 25],
+  24: [26],
+  25: [27],
+  26: [28],
+  27: [29, 31],
+  28: [30, 32],
+}
+
+// basic function to find a joint by index from given frame
+// use this as a template to create a function to return joints u desire to use
+function find_by_bpindex(frame, bpindex, joint_type) {
+  for (let joint_index in frame) {
+    let joint = frame[joint_index]
+    if ((joint.index == bpindex) && (joint.type == joint_type)) {
+      return joint
+    }
+  }
+}
+
+function create_sketch(data) {
+    let sketch = function(p) {
+        var index = 0;
+        let canvas;
+
+        p.windowResized = function() {
+            p.resizeCanvas(p.windowWidth, p.windowHeight);
+        }
+
+        p.setup = function() { 
+            // Feel free to alter setup method HERE!
+            canvas = p.createCanvas(p.windowWidth, p.windowHeight);
+            canvas.position(0, 0);
+            canvas.style('z-index', '-1')
+            p.background(background_color);
+            p.frameRate(FPS);
+        }
+
+        p.draw = function() {
+            p.clear();
+            p.background(background_color);
+            // fetch current data_chunk aka frame
+            let data_chunk = data[index];
+
+            // early exit data check
+            if (!data_chunk || data_chunk.keypoints) {
+                return
+            }
+
+            // loop to create stickman body from line_map
+            for (let first_bpindex in line_map) {
+              let point_list = line_map[first_bpindex]
+              for (let pindex in point_list) {
+                let second_bpindex = point_list[pindex]
+                let first_point = find_by_bpindex(data_chunk, first_bpindex, "body")
+                let second_point = find_by_bpindex(data_chunk, second_bpindex, "body")
+
+                // make sure we've found useful data, skip if not found
+                if (!first_point || !second_point) {
+                  continue
+                }
+
+                // make sure to multiply normalized coordinates to get correct coordinates p.windowWidth, p.windowHeight
+                let x1 = first_point.x * p.windowWidth * 2 - ( p.windowWidth / 2 )
+                let x2 = second_point.x * p.windowWidth * 2 - ( p.windowWidth / 2 )
+                let y1 = first_point.y * p.windowHeight * 2 - ( p.windowHeight / 2 )
+                let y2 = second_point.y * p.windowHeight * 2 - ( p.windowHeight / 2 )
+                p.stroke('white')
+                p.line(x1, y1, x2, y2)
+
+              }
+            }
+
+            if (index >= data.length - 1) {
+                index = 0;
+            } else {
+                index++
+            }
+
+        }
+    }
+    let stage = new p5(sketch, 'body');
+}
+
+$(function() {
+    $.getJSON(
+        'lib/assets/demo/kpop_short',
+        create_sketch
+    )
+});

mounts/zoperepo/__root__/tf_upload_demo/tflw-pose-detection_upload.js/__meta__ → mounts/zoperepo/__root__/lib/assets/demo/kpop_short/__meta__

@@ -1,6 +1,6 @@
 [
     ('props', [
-        [('id', 'content_type'), ('type', 'string'), ('value', 'application/javascript')],
+        [('id', 'content_type'), ('type', 'string'), ('value', 'application/json')],
     ]),
     ('title', ''),
     ('type', 'File'),

mounts/zoperepo/__root__/tf_upload_demo/tflw-pose-detection_upload.js.map/__meta__ → mounts/zoperepo/__root__/lib/assets/fonts/Disclaimer-Plain.otf/__meta__

@@ -2,6 +2,6 @@
     ('props', [
         [('id', 'content_type'), ('type', 'string'), ('value', 'application/octet-stream')],
     ]),
-    ('title', ''),
+    ('title', 'Disclaimer-Plain.otf'),
     ('type', 'File'),
 ]

mounts/zoperepo/__root__/tf_upload_demo/__meta__ → mounts/zoperepo/__root__/lib/assets/fonts/__meta__

@@ -1,4 +1,5 @@
 [
+    ('owner', (['acl_users'], 'dockerzope')),
     ('title', ''),
     ('type', 'Folder'),
 ]