Update to use orientation type instead of orientation index for mockup

mockup_package/mockup/helpers.py

@@ -73,6 +73,7 @@ def get_parse_model(m):
                 get_output_name(m["device_id"], o): {
                     "image": "{}-{}.png".format(m["device_id"], o["name"]),
                     "screen_coord": o["coords"],
+                    "name": o["name"],
                 }
                 for o in m["orientations"]
             },

mockup_package/mockup/image.py

@@ -47,16 +47,19 @@ async def mockup(
     device_id: str,
     original_img_path: str,
     device_info: dict[str, Any],
-    preview_orientation_index: int = 0,
+    orientation_name: str,
 ):
     ig = IG(original_img_path, device_id, device_info)
     ig.create_fit_resolution_image()
-    spec = list(ig.phone_models.get(device_id).get("mockups").values())[
-        preview_orientation_index
-    ]
-    output_img_path = await generate(location, original_img_path, spec, ig)
+    mockups = list(ig.phone_models.get(device_id).get("mockups").values())
 
-    return output_img_path
+    for spec in mockups:
+        if spec.get("name") == orientation_name:
+            output_img_path = await generate(location, original_img_path, spec, ig)
+
+            return output_img_path
+
+    raise Exception("Cannot find orientation", orientation_name)
 
 
 async def download(url: str):

public/scripts/mockup_worker.js

@@ -27,12 +27,12 @@ async function runMockup(pyodide) {
     `
       import mockup
       import image_process
-      from js import locationKey, deviceInfo, deviceId, orientationIndexQueue
+      from js import locationKey, deviceInfo, deviceId, orientationsQueue
       origin_image_path = await image_process.upload_file()
-      orientationIndex = orientationIndexQueue.shift()
+      orientation = orientationsQueue.shift()
       print("start mockup", origin_image_path)
-      print("orientation index", orientationIndex)
-      output_img = await mockup.startMockup(locationKey, deviceId, origin_image_path, deviceInfo, orientationIndex)
+      print("orientation", orientation)
+      output_img = await mockup.startMockup(locationKey, deviceId, origin_image_path, deviceInfo, orientation)
     `,
     { globals: pythonNamespace },
   );
@@ -48,15 +48,15 @@ async function runMockup(pyodide) {
 async function main() {
   let pyodideObject = initiatePyodide();
   self["previewJobQueue"] = [];
-  self["orientationIndexQueue"] = [];
+  self["orientationsQueue"] = [];
   self.onmessage = async (event) => {
     pyodideObject = await pyodideObject;
 
     self["previewJobQueue"].push(event.data.imageUpload);
     self["locationKey"] = event.data.location;
     self["deviceId"] = event.data.deviceId;
     self["deviceInfo"] = event.data.deviceInfo;
-    self["orientationIndexQueue"].push(event.data.orientationIndex ?? 0);
+    self["orientationsQueue"].push(event.data.orientation);
 
     try {
       let results = await runMockup(pyodideObject);

public/scripts/upload.js

@@ -33,15 +33,15 @@ function getMaxWorkers() {
   return navigator.hardwareConcurrency;
 }
 
-function runWorker(worker, imageUpload, orientationIndex, mode) {
+function runWorker(worker, imageUpload, orientation, mode) {
   const imageUploadFile = imageUpload.file;
   worker.worker.postMessage({
     imageUpload: imageUploadFile,
     location: window.location.toString(),
     deviceId: window.workerDeviceId,
     deviceInfo: window.deviceInfo,
     ulid: imageUpload.ulid,
-    orientationIndex: orientationIndex,
+    orientation: orientation,
     mode: mode,
   });
   worker.worker.addEventListener(
@@ -115,10 +115,9 @@ function runWorker(worker, imageUpload, orientationIndex, mode) {
         const ulid = e.data["ulid"];
         const results = e.data["results"];
 
-        window.viewModel.fileList.addGeneratedMockupToImageUploadByULID(
-          ulid,
-          results,
-        );
+        window.viewModel.fileList.addGeneratedMockupToImageUploadByULID(ulid, {
+          [orientation]: results,
+        });
       }
 
       window.viewModel.idleWorker(worker);
@@ -206,10 +205,13 @@ class FileListViewModel {
     });
   }
 
-  addGeneratedMockupToImageUploadByULID(ulid, generatedMockup) {
+  addGeneratedMockupToImageUploadByULID(ulid, newGeneratedMockup) {
     this._imageUploads = this._imageUploads.map((imageUpload) => {
       if (imageUpload.ulid == ulid) {
-        imageUpload.generatedMockups.push(generatedMockup);
+        imageUpload.generatedMockups = {
+          ...imageUpload.generatedMockups,
+          ...newGeneratedMockup,
+        };
       }
       return imageUpload;
     });
@@ -225,7 +227,7 @@ class RootViewModel {
   maxWorkers = 0;
   selectedColorId = null;
   selectedPreviewImageULID = null;
-  orientationsNum = null;
+  orientations = null;
 
   constructor(maxMockupWaitSec, fileListViewModel, selectedColorId) {
     mobx.makeObservable(this, {
@@ -241,9 +243,11 @@ class RootViewModel {
     this.maxMockupWaitSec = maxMockupWaitSec;
     this.fileList = fileListViewModel;
     this.maxWorkers = getMaxWorkers();
-    this.orientationsNum = document.querySelectorAll(
-      ".device-support__orientation-image",
-    ).length;
+    this.orientations = Array.from(
+      document.querySelectorAll(".device-support__orientation-image"),
+    ).map((orientationNode) => {
+      return orientationNode.dataset.orientation;
+    });
 
     for (let i = 0; i < this.maxWorkers; i += 1) {
       const newWorker = new Worker("/scripts/mockup_worker.js");
@@ -269,7 +273,12 @@ class RootViewModel {
     );
 
     // Only support preview first orientation now.
-    runWorker(await this.getWorker(), imageUpload, 0, "preview");
+    runWorker(
+      await this.getWorker(),
+      imageUpload,
+      window.viewModel.orientations[0],
+      "preview",
+    );
   }
 
   async generateMockup() {
@@ -279,10 +288,10 @@ class RootViewModel {
     }
     this._isGeneratingMockup = true;
 
-    this.fileList.imageUploads.forEach(async (imageUpload) => {
-      for (let i = 0; i < this.orientationsNum; i += 1) {
-        runWorker(await this.getWorker(), imageUpload, i, "mockup");
-      }
+    this.orientations.forEach((orientaion) => {
+      this.fileList.imageUploads.forEach(async (imageUpload) => {
+        runWorker(await this.getWorker(), imageUpload, orientaion, "mockup");
+      });
     });
   }
 
@@ -824,21 +833,24 @@ function main() {
     async () => {
       if (viewModel.isGeneratingMockup) {
         const imageUploads = viewModel.fileList.imageUploads;
-        let generatedMockups = [];
+
+        let allGeneratedMockups = [];
         for (let i = 0; i < imageUploads.length; i += 1) {
-          generatedMockups = [
-            ...generatedMockups,
-            ...imageUploads[i].generatedMockups,
+          const generatedMockups = imageUploads[i].generatedMockups;
+
+          allGeneratedMockups = [
+            ...allGeneratedMockups,
+            ...Object.values(generatedMockups),
           ];
           if (
-            imageUploads[i].generatedMockups.length < viewModel.orientationsNum
+            Object.keys(generatedMockups).length < viewModel.orientations.length
           ) {
             return;
           }
         }
 
         window.localforage
-          .setItem("pictureArray", generatedMockups)
+          .setItem("pictureArray", allGeneratedMockups)
           .then(() => {
             window.location.href =
               "/download/?deviceId=" + window.workerDeviceId;

src/pages/model/[model].astro

@@ -302,6 +302,7 @@ if (deviceDetail.imagePath != null && deviceDetail.imagePath.length >= 1) {
                   <img
                     class="device-support__orientation-image"
                     data-image-path-index={index}
+                    data-orientation={deviceDetail.orientations[index].name}
                     src={path[0]}
                     alt={path[1]}
                   />