the great reshuffle and new theatre

assets/template.html

@@ -568,7 +568,13 @@
  <!-- EXPORT BEGIN -->
   <script id="ffmpeg.min.js" type="application/javascript" src="/web/ffmpeg_modules/ffmpeg.min.js"></script>
   <!-- EXPORT END -->
-
+    <script> const process = {
+            env: {
+                NODE_ENV: 'production'
+            }
+        };
+    </script>
+  <!--<script id="core-and-studio.min.js" type="application/javascript" src="/web/theatre_modules/core-and-studio.js"></script>-->
     <script type="module" src="/web/js/main.js"> </script>
   </body>
 </html>

bin/em/variabletime/web/js/audio.js

@@ -659,7 +659,6 @@ const Audio = function(tp, record) {
     };
 
     const injectPanel = (layer) => {
-        console.log('injecting panel');
         const flatValues = clone(layer.theatreObject.value);
         flattenObject(flatValues, ['color']);
         const layerType = layer.id().split('-')[0];
@@ -838,7 +837,6 @@ const Audio = function(tp, record) {
 
             // Main block for doing the audio recording
             if (navigator.mediaDevices.getUserMedia) {
-                console.log("getUserMedia supported.");
                 const constraints = {
                     audio: true
                 };

bin/em/variabletime/web/js/layer.js

@@ -376,11 +376,13 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
     };
     this.init = (initialValues = false) => {
         return new Promise((resolve) => {
+            console.log('this is happening','layer init');
             const promises = [];
             promises.push(this.findInjectHierarchyPanelPromise());
             const doUpdateTheatre = false;
             this.updateFonts(doUpdateTheatre)
                 .then(() => {
+                console.log('this is happening','layer init update fonts');
                     this.theatreObject = tp.addObject(this.id(), this.props, this.onValuesChange);
                     if (typeof initialValues === 'object') {
                         this.theatreObject.initialValue = initialValues;
@@ -388,14 +390,19 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                     window.layerOrder.add(this.id());
                     setTimeout(() => {
                         const values = JSON.parse(JSON.stringify(this.theatreObject.value));
+                console.log('this is happening','doing the transaction');
                         tp.studio.transaction(({
                             set
                         }) => {
                             set(this.theatreObject.props, values);
                         });
+                console.log('this is happening','has have been doing the transaction');
                         setTimeout(() => {
-                            promises.push(this.findInjectPanelPromise);
+                            console.log('this is happening');
+                            promises.push(this.findInjectPanelPromise());
+                            console.log(promises);
                             Promise.allSettled(promises).then(() => {
+                                console.log('this is happening');
                                 resolve();
                                 if (config.autoSave && window.isInitialized) {
                                     tp.saveProject();
@@ -461,6 +468,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
         }
         if (doItAgain) {
             hierarchyPanelFinderTimeout = setTimeout(() => {
+                console.log('hierachrypanelfinder');
                 this.findInjectHierarchyPanel(resolve);
             }, 30);
             window.hierarchyPanelFinderTimeout = hierarchyPanelFinderTimeout;
@@ -512,11 +520,19 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
     let panelFinderTimeout = false;
     this.findInjectPanelPromise = () => {
         return new Promise((resolve) => {
+            console.log('this is happening', 'finInjectPanelPRomisE');
             this.findInjectPanel(resolve);
         });
     };
     this.findInjectPanel = (resolve = false) => {
         if (tp.studio.selection.length === 0 || (tp.studio.selection.length > 0 && tp.studio.selection[0].address.objectKey !== this.id())) {
+            console.log('this is happening', 'finInjectPanel DOES NOT RESOLVE HAHAHAHA');
+            if (typeof resolve === 'function') {
+                console.log('this is happening', 'resolver');
+                resolve();
+            }
+            console.log('this is happening', 'was resolved?');
+
             return;
         } else {
             const panel = tp.getPanel();
@@ -788,7 +804,6 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                             bottomButtonsContainer.append(addFontButton);
                         }
 
-
                         doItAgain = false;
                         clearTimeout(panelFinderTimeout);
                         panelFinderTimeout = false;

bin/em/variabletime/web/js/main.js

@@ -323,16 +323,20 @@ const resize = () => {
 };
 
 const postModuleInitialized = () => {
+            console.log('this is happening');
     window.setLoadingTask('setting up animation', 80);
     moduleFS.init()
         .then(() => {
+            console.log('this is happening');
             artboard = new Artboard(tp, content);
             initPanels();
             // NOTE: we know that our TheatrePlay is initialized
             tp.connectModuleCallbacks();
             exporter.init();
             getFontsAndAxes();
+            console.log('this is happening');
             tp.loadProject().then(() => {
+            console.log('this is happening');
                 interactor.init();
                 resize();
                 adjustPanel();
@@ -344,6 +348,7 @@ const postModuleInitialized = () => {
                         tp.saveProject();
                     }
                 }, 1000);
+            console.log('this is happening');
             });
 			//midiController.init();
         });
@@ -456,7 +461,9 @@ const addExistingLayer = (layerID, values) => {
         layer.valuesCorrector(values);
         const cppProps = layer.values2cppProps(values);
         const checkID = Module.addExistingLayer(cppProps, layerID);
+            console.log('this is happening');
         layer.init().then(() => {
+            console.log('this is happening');
             layers.push(layer);
             layersById[layerID] = layer;
             resolve(layer);

bin/em/variabletime/web/js/theatre-play.js

@@ -1228,13 +1228,17 @@ const TheatrePlay = function(autoInit = false) {
         console.log('TheatrePlay::loadProject');
         this.isProjectLoaded = false;
         return new Promise((resolve) => {
+            console.log('this is happening');
             if (projectId === false) {
                 projectId = this.sheet.project.address.projectId;
+            console.log('this is happening');
             }
             if (project === false) {
                 project = this.getProject(projectId, true);
+            console.log('this is happening');
             }
             if (project !== false) { // if project is not saved yet, create new
+            console.log('this is happening');
                 // get all objects
                 const objects = project
                     .theatre
@@ -1278,13 +1282,17 @@ const TheatrePlay = function(autoInit = false) {
                     .filter((e) => e.indexOf('layer-') === 0)
                     .forEach((layerId) => {
                         window.project_fontsHashMap = project.fontsHashMap;
+                        console.log(layerId, objects[layerId]);
                         layerPromises.push(window.addExistingLayer(layerId, objects[layerId]));
                     });
-
+            console.log('this is happening');
+            console.log({layerPromises});
                 Promise.all(layerPromises).then(() => {
+            console.log('this is happening');
                     window.layerOrder.set(project.layerOrder);
                     this.duration = this.core.val(this.sheet.sequence.pointer.length);
                     if (project.layerOrder.length > 0) {
+            console.log('this is happening');
                         getLayers().forEach((layer) => {
                             if (layer.id() === project.layerOrder[project.layerOrder.length - 1]) {
                                 layer.select();
@@ -1300,29 +1308,37 @@ const TheatrePlay = function(autoInit = false) {
                         });
                     }
                     resolve();
+            console.log('RESOLVED');
                     this.isProjectLoaded = true;
                 });
             } else {
+            console.log('this is happening');
                 if (getLayers().length === 0 && config.layer.autoCreateFirstLayer) {
+            console.log('this is happening');
                     getFontsAndAxes().then((newFontsAndAxes) => {
+            console.log('this is happening');
                         const autoInitLayer = false;
                         const layer = addLayer(autoInitLayer);
                         layer.init().then(() => {
                             layer.select();
                             this.duration = this.core.val(this.sheet.sequence.pointer.length);
                             resolve();
+            console.log('RESOLVED');
                             this.isProjectLoaded = true;
                         });
                     });
                 } else {
+            console.log('this is happening');
                     const layers = getLayers();
                     if (layers.length > 0) {
                     }
                     this.duration = this.core.val(this.sheet.sequence.pointer.length);
                     resolve();
+            console.log('RESOLVED');
                     this.isProjectLoaded = true;
                 }
             }
+            console.log('this is happening and there was no resolve?');
         });
     };
     this.startNewProject = () => {

bin/em/variabletime/web/theatre_modules/core-and-studio.js

@@ -38466,6 +38466,7 @@ Instead found: ${devStringify(butFoundInstead)}` : "";
           callback: () => {
             getStudio().transaction(({ stateEditors: stateEditors2 }) => {
               const propAddress = __spreadProps(__spreadValues({}, obj.address), { pathToProp });
+              console.log({ propConfig, propAddress });
               stateEditors2.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced(propAddress, propConfig);
             });
           }
@@ -38828,7 +38829,7 @@ Instead found: ${devStringify(butFoundInstead)}` : "";
   padding: 0 0px 0 0px;
   box-sizing: border-box;
   height: 100%;
-  width: 42%;
+  width: 50%;
   flex-shrink: 0;
   flex-grow: 0;
   padding-bottom: 4px;
@@ -44630,7 +44631,7 @@ ${content}</tr>
   right: 0px;
   top: 0px;
   // Temporary, see comment about CSS grid in SingleRowPropEditor.
-  width: 305px;
+  width: 280px;
   height: 100vh;
   z-index: ${panelZIndexes.propsPanel};
   backdrop-filter: blur(2px);
@@ -61770,6 +61771,7 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
                 detail: toVT
               });
               window.dispatchEvent(event);
+              console.log({ toVT, p: p3 });
             }
             sequence2.setPrimitivePropAsSequenced = setPrimitivePropAsSequenced;
             function setPrimitivePropAsStatic(p3) {
@@ -61808,8 +61810,52 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
                 }
               }
               stateEditors2.coreByProject.historic.sheetsById.staticOverrides.byObject.setValueOfCompoundProp(p3);
+              const toVT = {
+                sequenced: false,
+                panelID: p3.objectKey,
+                prop: p3.pathToProp,
+                origin: "stateEditors.ts"
+              };
+              const event = new CustomEvent("sequenceEvent", {
+                bubbles: false,
+                detail: toVT
+              });
+              window.dispatchEvent(event);
             }
             sequence2.setCompoundPropAsStatic = setCompoundPropAsStatic;
+            function setCompoundPropAsSequenced(p3) {
+              const tracks = _ensureTracksOfObject(p3);
+              for (const encodedPropPath of Object.keys(tracks.trackIdByPropPath)) {
+                const propPath = JSON.parse(encodedPropPath);
+                const isSubOfTargetPath = p3.pathToProp.every((key, i3) => propPath[i3] === key);
+                if (isSubOfTargetPath) {
+                  const possibleTrackId = tracks.trackIdByPropPath[encodedPropPath];
+                  if (typeof possibleTrackId === "string")
+                    return;
+                  const trackId = generateSequenceTrackId();
+                  const track = {
+                    type: "BasicKeyframedTrack",
+                    __debugName: `${p3.objectKey}:${encodedPropPath}`,
+                    keyframes: []
+                  };
+                  tracks.trackData[trackId] = track;
+                  tracks.trackIdByPropPath[encodedPropPath] = trackId;
+                  console.log({ trackId, encodedPropPath });
+                }
+              }
+              const toVT = {
+                sequenced: false,
+                panelID: p3.objectKey,
+                prop: p3.pathToProp,
+                origin: "stateEditors.ts"
+              };
+              const event = new CustomEvent("sequenceEvent", {
+                bubbles: false,
+                detail: toVT
+              });
+              window.dispatchEvent(event);
+            }
+            sequence2.setCompoundPropAsSequenced = setCompoundPropAsSequenced;
             function _getTrack(p3) {
               return _ensureTracksOfObject(p3).trackData[p3.trackId];
             }
@@ -61933,6 +61979,51 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
               }
             }
             sequence2.setHandlesForKeyframe = setHandlesForKeyframe;
+            function addKeyframes(p3, override = true) {
+              const track = _getTrack(p3);
+              if (!track)
+                return;
+              if (p3.keyframes.length < 1)
+                throw new Error("holy shit, you are trying to add non-existing keyframes");
+              if (!override)
+                throw new Error("whoopsie, not overriding is not implemented");
+              const oldKeyframes = track.keyframes;
+              track.keyframes = [];
+              oldKeyframes.forEach((kf) => {
+                if (p3.keyframes[0].position > kf.position) {
+                  track.keyframes.push(kf);
+                }
+              });
+              p3.keyframes.forEach((pkf) => {
+                track.keyframes.push({
+                  id: generateKeyframeId(),
+                  position: pkf.position,
+                  connectedRight: true,
+                  handles: pkf.handles || [0.5, 1, 0.5, 0],
+                  type: pkf.type || "bezier",
+                  value: pkf.value
+                });
+              });
+              oldKeyframes.forEach((kf) => {
+                if (p3.keyframes[p3.keyframes.length - 1].position < kf.position) {
+                  track.keyframes.push(kf);
+                }
+              });
+            }
+            sequence2.addKeyframes = addKeyframes;
+            function keepKeyframes(p3) {
+              const track = _getTrack(p3);
+              if (!track)
+                return;
+              const keyframes = track.keyframes;
+              track.keyframes = [];
+              keyframes.forEach((kf) => {
+                if (p3.keyframeIds.indexOf(kf.id) >= 0) {
+                  track.keyframes.push(kf);
+                }
+              });
+            }
+            sequence2.keepKeyframes = keepKeyframes;
             function deleteKeyframes(p3) {
               const track = _getTrack(p3);
               if (!track)
@@ -62525,7 +62616,12 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
   };
 
   // ../../theatre/studio/src/TheatreStudio.ts
+  init_get();
   init_src();
+  init_utils2();
+  init_pointerDeep();
+  init_forEachDeep();
+  init_getDeep();
   init_instanceTypes();
   init_selectors();
   init_getStudio();
@@ -62560,6 +62656,61 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
         },
         __experimental_createContentOfSaveFileTyped(projectId) {
           return getStudio().createContentOfSaveFile(projectId);
+        },
+        __experimental_setPropAsSequenced(prop) {
+          const { path, root: root3 } = getPointerParts(prop);
+          if (!isSheetObject(root3)) {
+            throw new Error("Argument prop must be a pointer to a SheetObject property");
+          }
+          const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path });
+          const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+          if (typeof propConfig !== "undefined")
+            getStudio().transaction(({ stateEditors: stateEditors2 }) => {
+              stateEditors2.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced(propAddress, propConfig);
+              console.log("inner setPropAsSequenced", performance.now());
+            });
+        },
+        __experimental_setPropAsStatic(prop) {
+          const { path, root: root3 } = getPointerParts(prop);
+          if (!isSheetObject(root3)) {
+            throw new Error("Argument prop must be a pointer to a SheetObject property");
+          }
+          const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path });
+          const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+          if (typeof propConfig !== "undefined") {
+            for (const { path: subPath, conf } of iteratePropType(propConfig, [])) {
+              if (isPropConfigComposite(conf))
+                continue;
+              getStudio().transaction(({ stateEditors: stateEditors2 }) => {
+                const pointerToSub = pointerDeep(prop, subPath);
+                stateEditors2.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsStatic(__spreadProps(__spreadValues({}, propAddress), {
+                  value: root3.getValueByPointer(pointerToSub)
+                }));
+              });
+            }
+          }
+        },
+        __experimental_isPropSequenced(prop) {
+          const { path, root: root3 } = getPointerParts(prop);
+          if (!isSheetObject(root3)) {
+            throw new Error("Argument prop must be a pointer to a SheetObject property");
+          }
+          const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path });
+          const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+          const validTracks = root3.template.getArrayOfValidSequenceTracks().getValue();
+          tf:
+            for (let t4 = 0; t4 < validTracks.length; t4++) {
+              const otherPath = validTracks[t4].pathToProp;
+              if (otherPath.length === path.length) {
+                for (let p3 = 0; p3 < path.length; p3++) {
+                  if (path[p3] !== otherPath[p3]) {
+                    continue tf;
+                  }
+                }
+                return true;
+              }
+            }
+          return false;
         }
       });
     }
@@ -62584,11 +62735,132 @@ Note that it **is okay** to import '@theatre/core' multiple times. But those imp
           }
           stateEditors2.coreByProject.historic.sheetsById.forgetSheet(sheet.address);
         };
+        const __experimental_sequenceProp = (prop) => {
+          const { path, root: root3 } = getPointerParts(prop);
+          if (!isSheetObject(root3)) {
+            throw new Error("Argument prop must be a pointer to a SheetObject property");
+          }
+          const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path });
+          const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+          if (propConfig === void 0) {
+            throw new Error("propConfig is undefined. so, yeah.");
+          }
+          console.log({ propConfig, propAddress });
+          stateEditors2.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced(propAddress, propConfig);
+        };
+        const __experimental_staticProp = (prop) => {
+          const { path, root: root3 } = getPointerParts(prop);
+          if (!isSheetObject(root3)) {
+            throw new Error("Argument prop must be a pointer to a SheetObject property");
+          }
+          const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path });
+          const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+          if (propConfig === void 0) {
+            throw new Error("propConfig is undefined. so, yeah.");
+          }
+          for (const { path: subPath, conf } of iteratePropType(propConfig, [])) {
+            if (isPropConfigComposite(conf))
+              continue;
+            const pointerToSub = pointerDeep(prop, subPath);
+            stateEditors2.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsStatic(__spreadProps(__spreadValues({}, propAddress), {
+              value: root3.getValueByPointer(pointerToSub)
+            }));
+          }
+        };
+        const __experimental_deleteKeyframes = (prop, from = 0, to = 0) => {
+          const { root: root3, path } = getPointerParts(prop);
+          if (isSheetObject(root3)) {
+            const sequenceTracksTree = root3.template.getMapOfValidSequenceTracks_forStudio().getValue();
+            const defaultValue = getDeep(root3.template.getDefaultValues().getValue(), path);
+            const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+            const unsetStaticOrKeyframeProp = (value, path2) => {
+              const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path2 });
+              const trackId = get_default(sequenceTracksTree, path2);
+              const sequence = root3.sheet.getSequence();
+              const trackP = val(sequence._project.pointers.historic.sheetsById[sequence._sheet.address.sheetId].sequence.tracksByObject[root3.address.objectKey]);
+              if (!trackP) {
+                throw new Error("whatever, man");
+              }
+              const { trackData, trackIdByPropPath } = trackP;
+              if (typeof trackId === "string" && typeof trackData !== "undefined") {
+                const track = trackData[trackId];
+                if (!track) {
+                  throw new Error("whatever, man");
+                }
+                const keyframeIds = [];
+                if (to > from) {
+                  track.keyframes.forEach((kf) => {
+                    if (kf.position >= from && kf.position <= to) {
+                    } else {
+                      keyframeIds.push(kf.id);
+                    }
+                  });
+                }
+                const objectKey = propAddress.objectKey;
+                stateEditors2.coreByProject.historic.sheetsById.sequence.keepKeyframes(__spreadProps(__spreadValues({}, root3.address), {
+                  objectKey,
+                  trackId,
+                  keyframeIds
+                }));
+              } else if (propConfig !== void 0) {
+                stateEditors2.coreByProject.historic.sheetsById.staticOverrides.byObject.unsetValueOfPrimitiveProp(propAddress);
+              }
+            };
+            if (propConfig.type === "compound") {
+              forEachPropDeep(defaultValue, (v6, pathToProp) => {
+                unsetStaticOrKeyframeProp(v6, pathToProp);
+              }, getPointerParts(prop).path);
+            } else {
+              unsetStaticOrKeyframeProp(defaultValue, path);
+            }
+          } else {
+            throw new Error("Only setting props of SheetObject-s is supported in a transaction so far");
+          }
+        };
+        const __experimental_addKeyframes = (prop, keyframes) => {
+          const { root: root3, path } = getPointerParts(prop);
+          if (isSheetObject(root3)) {
+            let sequenceTracksTree = root3.template.getMapOfValidSequenceTracks_forStudio().getValue();
+            const defaultValue = getDeep(root3.template.getDefaultValues().getValue(), path);
+            const propConfig = getPropConfigByPath(root3.template.staticConfig, path);
+            console.log(path, propConfig);
+            const addStaticOrKeyframeProp = (value, path2) => {
+              const propAddress = __spreadProps(__spreadValues({}, root3.address), { pathToProp: path2 });
+              let trackId = get_default(sequenceTracksTree, path2);
+              if (typeof trackId !== "string" && propConfig !== void 0) {
+                throw Error("can only add keyframes to sequenced prop");
+              }
+              if (typeof trackId === "string") {
+                const objectKey = propAddress.objectKey;
+                stateEditors2.coreByProject.historic.sheetsById.sequence.addKeyframes(__spreadProps(__spreadValues({}, root3.address), {
+                  objectKey,
+                  trackId,
+                  keyframes
+                }));
+              } else if (propConfig !== void 0) {
+                throw Error("hmmm");
+              }
+            };
+            if (propConfig.type === "compound") {
+              forEachPropDeep(defaultValue, (v6, pathToProp) => {
+                addStaticOrKeyframeProp(v6, pathToProp);
+              }, getPointerParts(prop).path);
+            } else {
+              addStaticOrKeyframeProp(defaultValue, path);
+            }
+          } else {
+            throw new Error("Only setting props of SheetObject-s is supported in a transaction so far");
+          }
+        };
         return fn2({
           set: set3,
           unset: unset2,
           __experimental_forgetObject,
-          __experimental_forgetSheet
+          __experimental_forgetSheet,
+          __experimental_sequenceProp,
+          __experimental_staticProp,
+          __experimental_deleteKeyframes,
+          __experimental_addKeyframes
         });
       });
     }

browser.sh

@@ -8,5 +8,5 @@ fly ()
 
 #echo $(fly /usr/bin/chromium --incognito --screen=1 $@)
 #/usr/bin/chromium --incognito --screen=1 $@ &
-/usr/bin/chromium --screen=1 --disk-cache-dir=/dev/null --disk-cache-size=1 --enable-logging --password-store=basic --v=1 $@ &
+fly flatpak run com.github.Eloston.UngoogledChromium --screen=1 --disk-cache-dir=/dev/null --disk-cache-size=1 --enable-logging --password-store=basic --v=1 $@ &
 echo $!

clean.sh

@@ -5,7 +5,7 @@ PREVIOUS_DIR=$(pwd)
 
 cd $DIR
 
-make clean && rm -rf obj && rm -rf ../../../addons/obj
+emmake make clean && make clean && rm -rf obj && rm -rf ../../../addons/obj
 rm -rf ../../../libs/openFrameworksCompiled/lib/linux64/obj
 rm -rf ../../../libs/openFrameworksCompiled/lib/linux64/libopenFrameworks.a
 rm -rf ../../../libs/openFrameworksCompiled/lib/emscripten/obj

serve.py

@@ -10,6 +10,8 @@ import ssl
 
 # openssl req -new -x509 -keyout ssl/key.pem -out ssl/server.pem -days 365 -nodes
 
+browser_cmd = "/usr/bin/chromium --screen=1 --disk-cache-dir=/dev/null --disk-cache-size=1 --enable-logging --password-store=basic --v=1"
+
 class CORSRequestHandler(SimpleHTTPRequestHandler):
     def end_headers(self):
         self.send_header("Cross-Origin-Opener-Policy", "same-origin")
@@ -47,17 +49,18 @@ def serve(root, port, run_browser):
         keyfile = "ssl/key.pem"
     
     if os.path.exists(certfile) and os.path.exists(keyfile):
-        httpd.socket = ssl.wrap_socket(httpd.socket,
-                                       server_side=True,
-                                       certfile=certfile,
-                                       keyfile=keyfile,
-                                       ssl_version=ssl.PROTOCOL_TLS)
+        context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
+        context.load_cert_chain(certfile, keyfile)
+        httpd.socket = context.wrap_socket(httpd.socket,
+                                       server_side=True)
+
         protocol = 'https'
 
     if run_browser:
         # Open the served page in the user's default browser.
         print("Opening the served URL in the default browser (use `--no-browser` or `-n` to disable this).")
-        subprocess.call([f"../browser.sh", f"{protocol}://{open_host}:{port}/variabletime.html"])
+        subprocess.call(["pwd"])
+        subprocess.call([f"../../../browser.sh", f"{protocol}://{open_host}:{port}/index.html"])
 
     print(f"serving on port {port}")
     httpd.serve_forever()
@@ -67,7 +70,7 @@ if __name__ == "__main__":
     parser = argparse.ArgumentParser()
     parser.add_argument("-p", "--port", help="port to listen on", default=8060, type=int)
     parser.add_argument(
-        "-r", "--root", help="path to serve as root (relative to `platform/web/`)", default="./bin", type=Path
+        "-r", "--root", help="path to serve as root (relative to `platform/web/`)", default="./bin/em/variabletime", type=Path
     )
     browser_parser = parser.add_mutually_exclusive_group(required=False)
     browser_parser.add_argument(

src/ofApp.h

@@ -34,8 +34,8 @@ struct AppSettings {
                                              212 / 255.0,
                                              212 / 255.0,
                                              1}; // check data/appSettings.json
-    string tmpExportDir = "data/export";
-    string tmpImportDir = "data/import";
+    std::string tmpExportDir = "data/export";
+    std::string tmpImportDir = "data/import";
 
     NLOHMANN_DEFINE_TYPE_NON_INTRUSIVE(AppSettings,
                                        backgroundColor,
@@ -43,7 +43,8 @@ struct AppSettings {
 
 };
 
-class ZipProjectSaver : public ofThread {
+class ZipProjectSaver :
+    public ofThread {
     public:
         void setup(string projectName,
                    string projectJsonString){
@@ -127,12 +128,12 @@ class ZipProjectSaver : public ofThread {
         void exit(){
             free(buffer);
         }
-        string projectName;
-        string projectJsonString;
-        string userFontsPath;
-        string userAudioPath;
-        string timestamp;
-        string filename;
+        std::string projectName;
+        std::string projectJsonString;
+        std::string userFontsPath;
+        std::string userAudioPath;
+        std::string timestamp;
+        std::string filename;
         char * buffer;
         size_t buffer_size;
         std::atomic <bool> freshDownload{false};