pd4web 2.0.10rc2__tar.gz → 2.1.0.dev5__tar.gz

{pd4web-2.0.10rc2 → pd4web-2.1.0.dev5}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: pd4web
-Version: 2.0.10rc2
+Version: 2.1.0.dev5
 Summary: pd4web compiles PureData patches with external objects for Wasm, allowing to run entire patches in web browsers.
 Home-page: https://charlesneimog.github.io/pd4web
 Author: Charles K. Neimog
@@ -50,7 +50,7 @@ Description-Content-Type: text/markdown
 
 <h3 align="center">Examples</h3>
 
-* Check some examples [here](https://charlesneimog.github.io/pd4web/tests/).
+* Check some examples [here](https://charlesneimog.github.io/pd4web/).
 
 -----
 <h3 align="center">Questions, doubts, help</h3>

{pd4web-2.0.10rc2 → pd4web-2.1.0.dev5}/README.md

@@ -27,7 +27,7 @@
 
 <h3 align="center">Examples</h3>
 
-* Check some examples [here](https://charlesneimog.github.io/pd4web/tests/).
+* Check some examples [here](https://charlesneimog.github.io/pd4web/).
 
 -----
 <h3 align="center">Questions, doubts, help</h3>

{pd4web-2.0.10rc2 → pd4web-2.1.0.dev5}/Sources/Libraries/Libraries.yaml

@@ -23,7 +23,22 @@ Libraries:
     Developer: porres
     Repository: pd-cyclone
     Version: cyclone_0.9-1
-    Unsupported: [active, mousefilter, mousestate, scope~, coll, mtr, capture, hrandfile, prob, funbuff, seq, hrandgrowfile, hrandfile, capture~, table]
+    Unsupported:
+      - active
+      - mousefilter
+      - mousestate
+      - scope~
+      - coll
+      - mtr
+      - capture
+      - hrandfile
+      - prob
+      - funbuff
+      - seq
+      - hrandgrowfile
+      - hrandfile
+      - capture~
+      - table
 
 # ─────────────── o.scofo~ ───────────────
   - Name: ambi~
@@ -51,17 +66,21 @@ Libraries:
     Source: GITHUB
     Developer: porres
     Repository: pd-else
-    Version: faa72218e7290769b689cddc9b66ae0db5c2faaa
+    Version: v.1.0-rc12
     Unsupported:
       # Need implementation
       - sfz~
       - sfont~
+      - play.file~
+      - sfload 
+
+      # Osc is not support on browsers
 
       # Pd GUI Related
       - oscope~
       - midi
       - numbox~
-      - keyboard
+      # - keyboard
       - pic
       - bicoeff
       - function
@@ -79,5 +98,15 @@ Libraries:
       - bl.imp2~
       - slew2~
       - bl.imp~
+
       # Incompatible with Web enviroment
       - osc.format
+      - osc.send
+      - pdlink
+      - pdlink~
+      - keymap
+      - properties
+
+      # need extra objects
+      - pvoc.freeze~
+      - freeze~ 

{pd4web-2.0.10rc2 → pd4web-2.1.0.dev5}/Sources/Libraries/ambi~.cmake

@@ -1,11 +1,7 @@
 cmake_minimum_required(VERSION 3.25)
+project(ambi~) # MUST BE THE SAME NAME AS IS NAME FROM Libraries.yaml
 
-set(PDCMAKE_DIR
-    ${CMAKE_CURRENT_SOURCE_DIR}/Resources/pd.cmake
-    CACHE PATH "Path to pd.cmake")
-
-include(${PDCMAKE_DIR}/pd.cmake)
-set(LIB_DIR ${CMAKE_CURRENT_SOURCE_DIR}/Pd4Web/Externals/ambi~)
+set(LIB_DIR ${PD4WEB_EXTERNAL_DIR}/${PROJECT_NAME})
 
 function(ReplaceLine file line new_line)
     file(READ ${file} FILE_CONTENTS)

{pd4web-2.0.10rc2 → pd4web-2.1.0.dev5}/Sources/Libraries/cyclone.cmake

@@ -1,13 +1,7 @@
 cmake_minimum_required(VERSION 3.25)
 project(cyclone)
 
-set(PDCMAKE_DIR
-    ${CMAKE_CURRENT_SOURCE_DIR}/Resources/pd.cmake
-    CACHE PATH "Path to pd.cmake")
-include(${PDCMAKE_DIR}/pd.cmake)
-
-set(LIB_DIR ${CMAKE_CURRENT_SOURCE_DIR}/Pd4Web/Externals/cyclone)
-set(ENABLE_TILDE_TARGET_WARNING off)
+set(LIB_DIR ${PD4WEB_EXTERNAL_DIR}/${PROJECT_NAME})
 
 include_directories(${LIB_DIR}/shared/)
 
@@ -191,7 +185,7 @@ pd_add_external(rminus~ "${LIB_DIR}/cyclone_objects/binaries/audio/rminus.c")
 pd_add_external(round~ "${LIB_DIR}/cyclone_objects/binaries/audio/round.c")
 pd_add_external(scale~ "${LIB_DIR}/cyclone_objects/binaries/audio/scale.c")
 pd_add_external(thresh~ "${LIB_DIR}/cyclone_objects/binaries/audio/thresh.c")
-pd_add_external(trunc~ "${LIB_DIR}/cyclone_objects/binaries/audio/trunc.c")
+#pd_add_external(trunc~ "${LIB_DIR}/cyclone_objects/binaries/audio/trunc.c")
 
 # ╭──────────────────────────────────────╮
 # │      Classes with Dependencies       │
@@ -251,7 +245,7 @@ pd_add_external(decide "${LIB_DIR}/cyclone_objects/binaries/control/decide.c;${L
 
 # New dependencies for rand~ and pink~
 pd_add_external(rand~ "${LIB_DIR}/cyclone_objects/binaries/audio/rand.c;${LIB_DIR}/shared/common/random.c")
-pd_add_external(pink~ "${LIB_DIR}/cyclone_objects/binaries/audio/pink.c;${LIB_DIR}/shared/common/random.c")
+#pd_add_external(pink~ "${LIB_DIR}/cyclone_objects/binaries/audio/pink.c;${LIB_DIR}/shared/common/random.c")
 
 # New dependencies for frameaccum~ and framedelta~
 pd_add_external(frameaccum~ "${LIB_DIR}/cyclone_objects/binaries/audio/frameaccum.c;${LIB_DIR}/shared/common/grow.c")
@@ -280,7 +274,7 @@ pd_add_external(bitshift~ "${LIB_DIR}/cyclone_objects/binaries/audio/bitshift.c;
 pd_add_external(bitxor~ "${LIB_DIR}/cyclone_objects/binaries/audio/bitxor.c;${LIB_DIR}/shared/common/magicbit.c")
 
 # New dependency for scope~
-pd_add_external(scope~ "${LIB_DIR}/cyclone_objects/binaries/audio/scope.c;${LIB_DIR}/shared/common/magicbit.c")
+#pd_add_external(scope~ "${LIB_DIR}/cyclone_objects/binaries/audio/scope.c;${LIB_DIR}/shared/common/magicbit.c")
 
 # New dependency for comment
 pd_add_external(comment "${LIB_DIR}/cyclone_objects/binaries/control/comment.c;${LIB_DIR}/shared/control/s_cycloneutf8.c")

pd4web-2.1.0.dev5/Sources/Libraries/earplug.cmake

@@ -0,0 +1,6 @@
+cmake_minimum_required(VERSION 3.25)
+project(earplug)
+set(LIB_DIR ${PD4WEB_EXTERNAL_DIR}/${PROJECT_NAME})
+
+pd_add_external(earplug~ "${LIB_DIR}/earplug.c")
+pd_add_datafile(earplug~ "${LIB_DIR}/earplug_data.txt")

{pd4web-2.0.10rc2 → pd4web-2.1.0.dev5}/Sources/Libraries/else.cmake

@@ -1,19 +1,10 @@
 cmake_minimum_required(VERSION 3.25)
-
-set(PDCMAKE_DIR
-    ${CMAKE_CURRENT_SOURCE_DIR}/Resources/pd.cmake
-    CACHE PATH "Path to pd.cmake")
-
-include(${PDCMAKE_DIR}/pd.cmake)
-
-set(LIB_DIR ${CMAKE_CURRENT_SOURCE_DIR}/Pd4Web/Externals/else)
+project(else)
+set(LIB_DIR ${PD4WEB_EXTERNAL_DIR}/${PROJECT_NAME})
 
 include_directories(${LIB_DIR}/Source/Shared/aubio/src)
 include_directories(${LIB_DIR}/Source/Shared)
 
-project(else)
-
-set(ENABLE_TILDE_TARGET_WARNING off)
 
 # ╭──────────────────────────────────────╮
 # │            GUI INTERFACE             │
@@ -238,13 +229,15 @@ pd_add_external(toggleff~ "${LIB_DIR}/Source/Audio/toggleff~.c")
 pd_add_external(trighold~ "${LIB_DIR}/Source/Audio/trighold~.c")
 pd_add_external(unmerge~ "${LIB_DIR}/Source/Audio/unmerge~.c")
 pd_add_external(vu~ "${LIB_DIR}/Source/Audio/vu~.c")
-# pd_add_external(vcf2~ "${LIB_DIR}/Source/Audio/vcf2~.c")
+pd_add_external(vcf2~ "${LIB_DIR}/Source/Audio/vcf2~.c")
 pd_add_external(xmod~ "${LIB_DIR}/Source/Audio/xmod~.c")
 pd_add_external(xmod2~ "${LIB_DIR}/Source/Audio/xmod2~.c")
 pd_add_external(wrap2 "${LIB_DIR}/Source/Control/wrap2.c")
 pd_add_external(wrap2~ "${LIB_DIR}/Source/Audio/wrap2~.c")
 pd_add_external(zerocross~ "${LIB_DIR}/Source/Audio/zerocross~.c")
 
+
+
 # ╭──────────────────────────────────────╮
 # │                AUBIO                 │
 # ╰──────────────────────────────────────╯
@@ -347,6 +340,7 @@ pd_add_external(gendyn~ "${LIB_DIR}/Source/Audio/gendyn~.c;${randbuf}")
 list(APPEND randmagic ${MAGIC_CODE})
 list(APPEND randmagic "${LIB_DIR}/Source/Shared/random.c")
 pd_add_external(brown~ "${LIB_DIR}/Source/Audio/brown~.c;${randmagic}")
+pd_add_external(velvet~ "${LIB_DIR}/Source/Audio/velvet~.c;${randmagic}")
 
 # ╭──────────────────────────────────────╮
 # │                 RAND                 │
@@ -408,7 +402,7 @@ pd_add_external(plaits~ "${PLAITS_SRC}")
 # ╭──────────────────────────────────────╮
 # │                SFONT                 │
 # ╰──────────────────────────────────────╯
-if(NOT PD4WEB)
+if(NOT EMSCRIPTEN)
     set(BUILD_SFONT ON)
     if(BUILD_SFONT)
 
@@ -516,3 +510,8 @@ if(WIN32)
 endif()
 
 add_definitions(-DHAVE_STRUCT_TIMESPEC)
+
+
+#add_subdirectory("${LIB_DIR}/Source/Shared/ffmpeg")
+#pd_add_external(play.file~ "${LIB_DIR}/Source/Audio/play.file~.c")
+#target_link_libraries(play.file_tilde PUBLIC ffmpeg)

{pd4web-2.0.10rc2 → pd4web-2.1.0.dev5}/Sources/Libraries/libpd.cmake

@@ -1,12 +1,13 @@
 cmake_minimum_required(VERSION 3.25)
 project(libpd C)
 
-set(PD_SOURCE_DIR
-    ${CMAKE_CURRENT_SOURCE_DIR}/Pd4Web/pure-data/src/
-    CACHE STRING "PATH where is located PureData Source Code")
-
-message(STATUS "PD_SOURCES: ${PD_SOURCE_DIR}")
+set(ENABLE_TILDE_TARGET_WARNING off)
 
+if (LSP_SUPPORT)
+	set(PD_SOURCE_DIR ${CMAKE_CURRENT_SOURCE_DIR}/build/pure-data/src/)
+else()
+	set(PD_SOURCE_DIR ${CMAKE_CURRENT_SOURCE_DIR}/Pd4Web/pure-data/src/)
+endif()
 set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -pthread -matomics -mbulk-memory")
 
 # ╭──────────────────────────────────────╮

pd4web-2.1.0.dev5/Sources/Libraries/o.scofo~.cmake

@@ -0,0 +1,9 @@
+cmake_minimum_required(VERSION 3.25)
+project(o.scofo~)
+set(LIB_DIR ${PD4WEB_EXTERNAL_DIR}/${PROJECT_NAME})
+
+set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -matomics -mbulk-memory")
+set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -matomics -mbulk-memory")
+
+set(BUILD_PD_OBJECT ON)
+add_subdirectory(${LIB_DIR})

{pd4web-2.0.10rc2 → pd4web-2.1.0.dev5}/Sources/Libraries/pmpd.cmake

@@ -1,17 +1,7 @@
 cmake_minimum_required(VERSION 3.25)
-
-set(PDCMAKE_DIR
-    ${CMAKE_CURRENT_SOURCE_DIR}/Resources/pd.cmake
-    CACHE PATH "Path to pd.cmake")
-include(${PDCMAKE_DIR}/pd.cmake)
-
-set(LIB_DIR ${CMAKE_CURRENT_SOURCE_DIR}/Pd4Web/Externals/pmpd)
-
-# ╭──────────────────────────────────────╮
-# │           PMPD Compilation           │
-# ╰──────────────────────────────────────╯
-
 project(pmpd)
+set(LIB_DIR ${PD4WEB_EXTERNAL_DIR}/${PROJECT_NAME})
+
 configure_file("${LIB_DIR}/pmpd_version.c.in" "${CMAKE_BINARY_DIR}/pmpd_version.c" @ONLY)
 
 include_directories(${CMAKE_BINARY_DIR})

{pd4web-2.0.10rc2 → pd4web-2.1.0.dev5}/Sources/Libraries/timbreIDLib.cmake

@@ -1,16 +1,7 @@
 cmake_minimum_required(VERSION 3.25)
-
-set(PDCMAKE_DIR
-    ${CMAKE_CURRENT_SOURCE_DIR}/Resources/pd.cmake
-    CACHE PATH "Path to pd.cmake")
-
-message(STATUS "PDCMAKE_DIR: ${PDCMAKE_DIR}")
-include(${PDCMAKE_DIR}/pd.cmake)
-
-set(LIB_DIR ${CMAKE_CURRENT_SOURCE_DIR}/Pd4Web/Externals/timbreIDLib)
-
 project(timbreIDLib)
-set(ENABLE_TILDE_TARGET_WARNING off)
+set(LIB_DIR ${PD4WEB_EXTERNAL_DIR}/${PROJECT_NAME})
+
 set(timbreIDLib_Common "${LIB_DIR}/src/tIDLib.c")
 include_directories(${LIB_DIR}/include)
 

pd4web-2.1.0.dev5/Sources/Templates/1/bula.md

@@ -0,0 +1,10 @@
+# by ChatGpt
+
+"Spectral Echoes" is an immersive electroacoustic composition that blends live instruments with pre-recorded electronic sounds and real-time audio processing. To ensure the best experience, follow these setup and performance instructions:
+
+## Equipment Needed
+
+* Audio Interface: A multi-channel audio interface.
+* Speakers: A quadraphonic speaker setup (four speakers positioned in a square around the audience) for spatial audio diffusion.
+* Microphones: One or two condenser microphones for capturing live instruments.
+* Cables: Ensure all necessary audio cables (XLR, TRS, and USB) are available.

pd4web-2.1.0.dev5/Sources/Templates/1/index.html

@@ -0,0 +1,158 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Pd4Web</title>
+    <meta charset="UTF-8" />
+    <!-- pd4web.threads.js can help if you can't active Cross-Origin Resource Sharing (CORS) from server side -->
+    <script src="./pd4web.threads.js"></script>
+    <script src="./pd4web.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+    <style>
+      /* Style for the entire Markdown content container */
+      #Pd4WebText {
+          font-family: Arial, sans-serif;
+          line-height: 1.6;
+          padding: 20px;
+          border-radius: 8px;
+          text-align: center;
+      }
+  
+      /* Style for h1 tags inside #Pd4WebText */
+      #Pd4WebText h1 {
+          font-size: 2em;
+          color: #2c3e50;
+          margin-bottom: 0.5em;
+          padding-bottom: 0.3em;
+          text-align: center;
+          user-select: none;
+      }
+  
+      /* Style for h2 tags inside #Pd4WebText */
+      #Pd4WebText h2 {
+          font-size: 1.75em;
+          color: #34495e;
+          margin-top: 1em;
+          margin-bottom: 0.5em;
+          text-align: center;
+          user-select: none;
+      }
+  
+      /* Style for paragraph tags inside #Pd4WebText */
+      #Pd4WebText p {
+          font-size: 1.5em;
+          color: #000000;
+          margin-bottom: 1em;
+          text-align: justify;
+          user-select: none;
+      }
+  
+      /* Style for lists */
+      #Pd4WebText ul {
+          list-style-type: disc;
+          margin-left: 20px;
+          margin-bottom: 1em;
+          text-align: left;
+      }
+  
+      #Pd4WebText ol {
+          list-style-type: decimal;
+          margin-left: 1px;
+          margin-bottom: 1em;
+          font-size: 1.5em;
+          text-align: left;
+      }   
+
+      #Pd4WebText ul {
+        list-style-type: disc; /* Use a disc (default bullet) */
+        margin-left: 2px;
+        padding-left: 0px;
+        font-size: 1.2em;
+      }
+
+      /* Style for each list item */
+      #Pd4WebText li {
+          font-size: 1.2em;
+          color: #000000; /* Dark gray color */
+          margin-bottom: 0.5em; /* Space between items */
+      }
+      
+      .pd4web-fullscreen {
+        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzIiIHdpZHRoPSIyOCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi42LjAgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBkPSJNMzIgMzJDMTQuMyAzMiAwIDQ2LjMgMCA2NGwwIDk2YzAgMTcuNyAxNC4zIDMyIDMyIDMyczMyLTE0LjMgMzItMzJsMC02NCA2NCAwYzE3LjcgMCAzMi0xNC4zIDMyLTMycy0xNC4zLTMyLTMyLTMyTDMyIDMyek02NCAzNTJjMC0xNy43LTE0LjMtMzItMzItMzJzLTMyIDE0LjMtMzIgMzJsMCA5NmMwIDE3LjcgMTQuMyAzMiAzMiAzMmw5NiAwYzE3LjcgMCAzMi0xNC4zIDMyLTMycy0xNC4zLTMyLTMyLTMybC02NCAwIDAtNjR6TTMyMCAzMmMtMTcuNyAwLTMyIDE0LjMtMzIgMzJzMTQuMyAzMiAzMiAzMmw2NCAwIDAgNjRjMCAxNy43IDE0LjMgMzIgMzIgMzJzMzItMTQuMyAzMi0zMmwwLTk2YzAtMTcuNy0xNC4zLTMyLTMyLTMybC05NiAwek00NDggMzUyYzAtMTcuNy0xNC4zLTMyLTMyLTMycy0zMiAxNC4zLTMyIDMybDAgNjQtNjQgMGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJzMTQuMyAzMiAzMiAzMmw5NiAwYzE3LjcgMCAzMi0xNC4zIDMyLTMybDAtOTZ6Ii8+PC9zdmc+");
+        display: flex;
+        justify-content: center;   
+        align-items: center;       
+        width: 24px;                
+        height: 24px;              
+        margin: 0 auto;  
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- All the styles are in the pd4web.style.css file loaded by pd4web.js -->
+    <div style="display: flex; justify-content: center; width: 100%; height: 100vh; margin-top: 20px;">
+      <div style="width: 30%;">
+        <div style="display: flex; justify-content: center;">
+          <span class="pd4web-sound-switch" id="Pd4WebAudioSwitch"></span>
+          <span class="pd4web-fullscreen" id="Pd4WebFullscreen"></span>
+        </div>
+        <hr>
+        <div id="Pd4WebPatchDiv"class="Pd4WebPatchDiv">
+          <svg id="Pd4WebCanvas"></svg>
+        </div>
+        <div id="Pd4WebText"></div>
+      </div>
+      <div style="width: 70%; margin: 0 auto; text-align: center;">
+        <img id="Pd4WebScore" src="score1.png" style="width: 100%; max-width: 100%;">
+      </div>
+      
+      
+      
+    </div>
+    <script>  
+      async function loadMarkdown() {
+        try {
+            const response = await fetch('bula.md');
+            if (!response.ok) throw new Error('Failed to load file.md');
+            const markdown = await response.text();
+            const html = marked.parse(markdown);
+            document.getElementById('Pd4WebText').innerHTML = html;
+        } catch (error) {
+            console.error('Error loading Markdown:', error);
+            document.getElementById('Pd4WebText').innerText = 'Failed to load content.';
+        }
+    }
+    window.onload = loadMarkdown;
+
+    // when user click pd4web-fullscreen, the patch will be displayed in full screen
+    document.getElementById("Pd4WebFullscreen").addEventListener("click", () => {
+      // check if already in full screen
+      if (document.fullscreenElement) {
+        document.exitFullscreen();
+        return;
+      }
+      document.documentElement.requestFullscreen();
+
+    });
+      
+
+    var Pd4Web = null; // Pd4Web object must be declared in the global scope
+    Pd4WebModule().then((Pd4WebModulePromise) => {
+      Pd4Web = new Pd4WebModulePromise.Pd4Web();
+    });
+
+    document
+      .getElementById("Pd4WebAudioSwitch")
+      .addEventListener("click", async () => {
+        // Pd4Web.init(), when using audio input, must be called after a user gesture
+        Pd4Web.init();
+
+        Pd4Web.onSymbolReceived("pd4web-score", function (symbol) {
+          document.getElementById("Pd4WebScore").src = symbol;
+        });
+
+      });
+    </script>
+  </body>
+</html>

pd4web-2.1.0.dev5/Sources/Templates/2/index.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Pd4Web</title>
+    <meta charset="UTF-8" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.min.js"></script>
+    <script src="https://unpkg.com/ml5@1/dist/ml5.js"></script>
+    <script src="./pd4web.threads.js"></script>
+    <script src="./pd4web.js"></script>
+    <script src="./sketch.js"></script>
+    <style>
+      canvas {
+        border-radius: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <span class="pd4web-sound-switch" id="Pd4WebAudioSwitch"></span>
+    <div id="Pd4WebPatchDiv"class="Pd4WebPatchDiv">
+      <svg id="Pd4WebCanvas"></svg>
+    </div>
+    <hr>
+    <p id="message" style="text-align: center; font-size: 20px">
+      Click on the page to request access to the camera and microphone.
+    </p>
+    <div style="display: flex; justify-content: center; border-radius: 30px">
+      <div id="p5js" style="border-radius: 30px"></div>
+    </div>
+    
+
+    <script>
+      // ╭─────────────────────────────────────╮
+      // │        Gui Bottoms Interface        │
+      // ╰─────────────────────────────────────╯
+      var Pd4Web = null;
+
+      // add window click event to start video
+      document.addEventListener("click", async () => {
+        navigator.mediaDevices.getUserMedia({
+          video: true,
+          audio: true
+        });
+        if (Pd4Web) {
+          return;
+        }
+        Pd4WebModule().then((Pd4WebModulePromise) => {
+          Pd4Web = new Pd4WebModulePromise.Pd4Web();
+          const message = document.getElementById("message");
+          if (message) {
+            message.style.display = "none";
+          }
+        });
+        // remove event listener
+        document.removeEventListener("click", () => {});
+      });
+
+      document
+        .getElementById("Pd4WebAudioSwitch")
+        .addEventListener("click", async () => {
+          startVideo();
+          Pd4Web.init();
+          console.log("Pd4Web", Pd4Web);
+        });
+    </script>
+  </body>
+</html>

pd4web-2.1.0.dev5/Sources/Templates/2/sketch.js

@@ -0,0 +1,55 @@
+let handPose;
+let hands = [];
+var p5jsConfigured = false;
+let video;
+let canvas;
+
+function preload() {
+  handPose = ml5.handPose({ flipped: true });
+}
+
+function mousePressed() {
+  console.log(hands);
+}
+
+function gotHands(results) {
+  hands = results;
+}
+
+function setup() {
+  canvas = createCanvas(640, 480);
+  canvas.parent("p5js");
+  noLoop();
+}
+
+function startVideo() {
+  video = createCapture(VIDEO, { flipped: true });
+  video.hide();
+  handPose.detectStart(video, gotHands);
+  loop(); // Restart draw loop to start rendering video frames
+}
+
+function draw() {
+  // Draw the webcam video
+  image(video, 0, 0, width, height);
+
+  // Draw all the tracked hand points
+  for (let i = 0; i < hands.length; i++) {
+    let hand = hands[i];
+    for (let j = 0; j < hand.keypoints.length; j++) {
+      let keypoint = hand.keypoints[j];
+      let whichHand = hand.handedness;
+      fill(255, 0, 0);
+      noStroke();
+      circle(keypoint.x, keypoint.y, 5);
+      if (Pd4Web){
+        let x = keypoint.x / width;
+        let y = keypoint.y / height;
+        // check if sendList is available
+        if (Pd4Web.sendList){
+          Pd4Web.sendList(whichHand[0] + "-" + j, [x, y]);
+        } 
+      }
+    }
+  }
+}

pd4web-2.1.0.dev5/Sources/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Pd4Web</title>
+    <meta charset="UTF-8" />
+    <!-- pd4web.threads.js can help if you can't active Cross-Origin Resource Sharing (CORS) from server side -->
+    <script src="./pd4web.threads.js"></script>
+    <script src="./pd4web.js"></script>
+  </head>
+  <body>
+    <!-- All the styles are in the pd4web.style.css file loaded by pd4web.js -->
+    <span class="pd4web-sound-switch" id="Pd4WebAudioSwitch"></span>
+    <div id="Pd4WebPatchDiv"class="Pd4WebPatchDiv">
+      <svg id="Pd4WebCanvas"></svg>
+    </div>
+    <script>     
+      var Pd4Web = null; // Pd4Web object must be declared in the global scope
+      Pd4WebModule().then((Pd4WebModulePromise) => {
+        Pd4Web = new Pd4WebModulePromise.Pd4Web();
+      });
+  
+      document
+        .getElementById("Pd4WebAudioSwitch")
+        .addEventListener("click", async () => {
+          // Pd4Web.init(), when using audio input, must be called after a user gesture
+          Pd4Web.init();
+        });
+    </script>
+  </body>
+</html>

pd4web-2.1.0.dev5/Sources/nogui.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>Pd4Web</title>
+        <meta charset="UTF-8" />
+        <!-- pd4web.threads.js can help if you can't active Cross-Origin Resource Sharing (CORS) from server side -->
+        <script src="./pd4web.threads.js"></script>
+        <script src="./pd4web.js"></script>
+    </head>
+    <body>
+        <script>
+            var Pd4Web = null; // Pd4Web object must be declared in the global scope
+            Pd4WebModule().then((Pd4WebModulePromise) => {
+                Pd4Web = new Pd4WebModulePromise.Pd4Web();
+            });
+
+            // If you are using the "-nogui" option, you need to manually call Pd4Web.init()
+            // after a user interaction to enable audio (case you use audio input, from mic). In this example, Pd4Web.init() is
+            // triggered by the first click anywhere on the page.
+            document.addEventListener(
+                "click",
+                async () => {
+                    Pd4Web.init();
+                },
+                { once: true }, // Ensures this only runs once
+            );
+        </script>
+    </body>
+</html>