change sticker to round

groupTasks/groups/old-shx-product-label/index.js

@@ -0,0 +1,141 @@
+const PRODUCT_NAME = "{{PRODUCT_NAME}}", // Gizmo die Eidechse
+  PRODUCT_COLOR = "{{PRODUCT_COLOR}}", // Farbe Grün/Blau/Orange
+  PRODUCT_COLOR_CHARACTERISTICS = "{{PRODUCT_COLOR_CHARACTERISTICS}}", // (Glänzend)
+  PRODUCT_ID = "{{PRODUCT_ID}}"; // #32420
+
+window.onload = () => {
+  for (let i = 0; i < 10; i++) {
+    let labels = document.getElementById("labels");
+
+    /* CONTAINER */
+
+    const container = document.createElement("div");
+    container.className = "container";
+
+    /* FIRST */
+
+    const div = document.createElement("div");
+
+    const background = document.createElement("div");
+    background.className = "background";
+
+    const content = document.createElement("div");
+    content.className = "content";
+
+    const productName = document.createElement("h1");
+    productName.innerHTML = PRODUCT_NAME;
+
+    const productColor = document.createElement("p");
+    productColor.innerHTML = PRODUCT_COLOR;
+    productColor.className = "product-color";
+
+    const productColorCharacteristics = document.createElement("p");
+    productColorCharacteristics.innerHTML = PRODUCT_COLOR_CHARACTERISTICS;
+    productColorCharacteristics.className = "product-color";
+
+    const productId = document.createElement("p");
+    productId.innerHTML = PRODUCT_ID;
+    productId.className = "product-id";
+
+    const contentDiv = document.createElement("div");
+
+    contentDiv.appendChild(productName);
+    contentDiv.appendChild(productColor);
+    contentDiv.appendChild(productColorCharacteristics);
+    contentDiv.appendChild(productId);
+
+    content.appendChild(contentDiv);
+
+    div.appendChild(background);
+    div.appendChild(content);
+
+    container.appendChild(div);
+
+    /* SECOND */
+
+    const div2 = document.createElement("div");
+
+    const manufacturerInfo = document.createElement("div");
+    manufacturerInfo.className = "manufacturer-info";
+
+    const manufacturer = document.createElement("p");
+    manufacturer.innerHTML = "Hersteller: Jan Umbach";
+
+    const address = document.createElement("p");
+    address.innerHTML = "Tannenwäldchen 20";
+
+    const zipCity = document.createElement("p");
+    zipCity.innerHTML = "D-34212 Melsungen";
+
+    manufacturerInfo.appendChild(manufacturer);
+    manufacturerInfo.appendChild(address);
+    manufacturerInfo.appendChild(zipCity);
+
+    div2.appendChild(manufacturerInfo);
+
+    const additionalInfo = document.createElement("div");
+    additionalInfo.className = "additional-info";
+
+    const additionalInfoText = document.createElement("p");
+    additionalInfoText.innerHTML = "Made in Germany";
+
+    const imgContainer = document.createElement("div");
+    imgContainer.className = "img-container";
+
+    const childrenImg = document.createElement("img");
+    childrenImg.src = "../../groupsData/shx-product-label/children.jpg";
+    childrenImg.alt = "children";
+    childrenImg.className = "children";
+
+    const ceImg = document.createElement("img");
+    ceImg.src = "../../groupsData/shx-product-label/ce.svg";
+    ceImg.alt = "ce";
+    ceImg.className = "ce";
+
+    imgContainer.appendChild(childrenImg);
+    imgContainer.appendChild(ceImg);
+
+    additionalInfo.appendChild(additionalInfoText);
+    additionalInfo.appendChild(imgContainer);
+
+    div2.appendChild(additionalInfo);
+
+    container.appendChild(div2);
+
+    labels.appendChild(container);
+  }
+};
+
+/*
+ <div class="container">
+      <div>
+        <div class="background"></div>
+
+        <div class="content">
+          <div>
+            <h1>Gizmo die Eidechse</h1>
+            <p class="product-color">Farbe Grün/Blau/Orange</p>
+            <p class="product-color">(Glänzend)</p>
+            <p class="product-id">#32420</p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div class="manufacturer-info">
+          <p>Hersteller: Jan Umbach</p>
+          <p>Tannenwäldchen 20</p>
+          <p>D-34212 Melsungen</p>
+        </div>
+
+        <div class="additional-info">
+          <p>Made in Germany</p>
+
+          <div class="img-container">
+            <img class="children" src="children.jpg" />
+            <img class="ce" src="ce.svg" />
+          </div>
+        </div>
+      </div>
+    </div>
+*/

groupTasks/groups/old-shx-product-label/oldindex.json

@@ -0,0 +1,30 @@
+{
+  "category": "Shinnex",
+  "name": "Produktschilder ausdrucken",
+  "globalInputs": [],
+  "tasks": [
+    {
+      "name": "Produktschilder ausdrucken",
+      "onFinish": "next",
+      "undoPossible": false,
+      "repeatPossible": true,
+      "scriptPath": "script.py",
+      "parameters": [
+        {
+          "parameterName": "product_type_id",
+          "type": "select",
+          "displayName": "Produkttyp auswählen",
+          "options": [
+            "#32420 Gizmo die Eidechse - Grün, Blau, Orange (Glänzend)", 
+            "#92784 Gizmo die Eidechse - Glitzer Grün (Seidenmatt)",
+            "#36521 Charlie das Häschen - Hellbraun (Matt)",
+            "#48273 Charlie das Häschen - Gold (Glänzend)",
+            "#71936 Ruby die Schlange - Feuerrot (Glänzend)",
+            "#58324 Ruby die Schlange - Rot/Blau (Glänzend)"
+          ],
+          "global": false
+        }
+      ]
+    }
+  ]
+}

groupTasks/groups/old-shx-product-label/script.py

@@ -0,0 +1,90 @@
+import json
+import subprocess
+import sys
+import os
+
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '../..')))
+
+from libs.utils import utils
+
+json_object = json.loads(sys.argv[1])
+product_type_id = json_object["product_type_id"]
+
+if product_type_id is None:
+    print("Missing required parameters")
+    sys.exit(1)
+
+product_type_id = product_type_id["value"]
+
+
+product_type_ids = {}
+
+def add_product_type_id(product_type_id, product_name, product_color, product_color_characteristics):
+    product_type_ids[product_type_id] = {
+      "product_id": f"#{product_type_id}",
+      "product_name": product_name,
+      "product_color": f"Farbe {product_color}",
+      "product_color_characteristics": f"({product_color_characteristics})"
+    }
+
+add_product_type_id("32420", "Gizmo die Eidechse", "Grün/Blau/Orange", "Glänzend")
+add_product_type_id("92784", "Gizmo die Eidechse", "Glitzer Grün", "Seidenmatt")
+add_product_type_id("36521", "Charlie das Häschen", "Hellbraun", "Matt")
+add_product_type_id("48273", "Charlie das Häschen", "Gold", "Glänzend")
+add_product_type_id("71936", "Ruby die Schlange", "Feuerrot", "Glänzend")
+add_product_type_id("58324", "Ruby die Schlange", "Rot/Blau", "Glänzend")
+
+
+def createPdf(sourceHtml, outputPdf):
+  command = [
+      "google-chrome-stable",
+      "--headless",
+      "--no-sandbox",
+      "--disable-gpu",
+      "--print-to-pdf=" + outputPdf,
+      "--run-all-compositor-stages-before-draw",
+      "--virtual-time-budget=10000",
+      sourceHtml,
+  ]
+
+  process = subprocess.Popen(command, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
+  _, stderr = process.communicate()
+
+  if process.returncode != 0:
+      print("Error creating PDF")
+      print(stderr)
+      sys.exit(1)
+
+if __name__ == "__main__":
+  utils.move_files_back_from_old_files()
+
+  # replace placeholders in index.js
+  p_type_id = product_type_id.split(" ")[0].split("#")[1]
+
+  if p_type_id not in product_type_ids:
+    print("Product type not found")
+    sys.exit(1)
+
+  print(f"Creating product label for product type #{p_type_id}")
+
+  product = product_type_ids[p_type_id]
+
+  with open("index.js", "r") as file:
+    indexjs = file.read()
+
+  indexjs = indexjs.replace("{{PRODUCT_ID}}", product["product_id"])
+  indexjs = indexjs.replace("{{PRODUCT_NAME}}", product["product_name"])
+  indexjs = indexjs.replace("{{PRODUCT_COLOR}}", product["product_color"])
+  indexjs = indexjs.replace("{{PRODUCT_COLOR_CHARACTERISTICS}}", product["product_color_characteristics"])
+
+  with open("index.js", "w") as file:
+    file.write(indexjs)
+
+  # create front page  
+
+  createPdf("frontPage.html", "frontOutput.pdf")
+  createPdf("backPage.html", "backOutput.pdf")
+
+  utils.merge_pdfs("frontOutput.pdf", "backOutput.pdf", "Produktschilder.pdf")
+
+  utils.clear_workspace(["frontOutput.pdf", "backOutput.pdf", "backPage.html", "frontPage.html", "index.js", "style.css"])

groupTasks/groups/shx-product-label/index.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="index.js"></script>
+    <style>
+      :root {
+        --container-width: 793px;
+        --container-height: 1122px;
+      }
+
+      @page {
+        margin: 0;
+        padding: 0;
+        size: A4;
+      }
+
+      @font-face {
+        font-family: "Outfit";
+        src: url("../../groupsData/static/Outfit-VariableFont_wght.ttf");
+      }
+
+      .label {
+        position: relative;
+        width: 226px;
+        height: 226px;
+        border-radius: 200px;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        border: 1px solid black;
+      }
+
+      .background-image {
+        position: absolute;
+        margin-top: 10px;
+        width: 100%;
+        height: 100%;
+        background-image: url("../../groupsData/shx-product-label/background.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 50%;
+        opacity: 0.1;
+      }
+
+      h1 {
+        font-size: 24px;
+        margin-top: 20px;
+        margin-bottom: 0;
+      }
+
+      p {
+        margin: 0;
+        font-size: 16px;
+      }
+
+      .content {
+        max-width: 180px;
+      }
+
+      .product-color {
+        font-weight: 300;
+      }
+
+      .product-id {
+        margin-top: 10px;
+        font-size: 14px;
+        color: #464646;
+        font-weight: 300;
+      }
+
+      .container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 30px;
+      }
+
+      .children {
+        height: 100%;
+      }
+
+      .ce {
+        height: 70%;
+      }
+
+      .manufacturer-info {
+        padding-top: 40px;
+      }
+
+      .manufacturer-info p {
+        font-size: 7px;
+        font-weight: 350;
+      }
+    </style>
+  </head>
+  <body
+    style="
+      font-family: 'Outfit';
+      font-size: 14px;
+      margin: 0;
+      position: relative;
+      width: var(--container-width);
+      height: var(--container-height);
+    "
+  >
+    <div style="width: var(--container-width); height: var(--container-height)">
+      <div
+        id="labels"
+        style="
+          display: grid;
+          grid-template-columns: auto auto auto;
+          gap: 24px;
+          padding-left: 28px;
+          padding-right: 28px;
+          padding-top: 68px;
+          padding-bottom: 68px;
+        "
+      >
+        <!--
+        <div class="label">
+          <div class="background-image"></div>
+          <div class="content">
+            <h1>Gizmo</h1>
+            <h1 style="margin: 0">die Eidechse</h1>
+            <p class="product-color">Grün/Blau/Orange</p>
+            <p class="product-color">(Glänzend)</p>
+
+            <p class="product-id">#32420</p>
+
+            <div class="container">
+              <img class="children" src="children.png" />
+
+              <div class="manufacturer-info">
+                <p>Hersteller:</p>
+                <p>Jan Umbach</p>
+                <p>Klosterstraße 10</p>
+                <p>D-34286 Spangenberg</p>
+              </div>
+
+              <img class="ce" src="ce.svg" />
+            </div>
+          </div>
+        </div>-->
+      </div>
+    </div>
+  </body>
+</html>

groupTasks/groups/shx-product-label/index.js

@@ -2,28 +2,37 @@ const PRODUCT_NAME = "{{PRODUCT_NAME}}", // Gizmo die Eidechse
   PRODUCT_COLOR = "{{PRODUCT_COLOR}}", // Farbe Grün/Blau/Orange
   PRODUCT_COLOR_CHARACTERISTICS = "{{PRODUCT_COLOR_CHARACTERISTICS}}", // (Glänzend)
   PRODUCT_ID = "{{PRODUCT_ID}}"; // #32420
+/*
+const PRODUCT_NAME = "Gizmo die Eidechse",
+  PRODUCT_COLOR = "Farbe Grün/Blau/Orange",
+  PRODUCT_COLOR_CHARACTERISTICS = "(Glänzend)",
+  PRODUCT_ID = "#32420"; */
 
 window.onload = () => {
-  for (let i = 0; i < 10; i++) {
+  for (let i = 0; i < 12; i++) {
     let labels = document.getElementById("labels");
 
     /* CONTAINER */
 
-    const container = document.createElement("div");
-    container.className = "container";
+    const label = document.createElement("div");
+    label.className = "label";
 
     /* FIRST */
 
-    const div = document.createElement("div");
-
-    const background = document.createElement("div");
-    background.className = "background";
+    const backgroundImage = document.createElement("div");
+    backgroundImage.className = "background-image";
 
     const content = document.createElement("div");
     content.className = "content";
 
-    const productName = document.createElement("h1");
-    productName.innerHTML = PRODUCT_NAME;
+    const productName = PRODUCT_NAME.split(" ");
+
+    const productNameFirst = document.createElement("h1");
+    productNameFirst.innerHTML = productName[0];
+
+    const productNameRemainingPart = document.createElement("h1");
+    productNameRemainingPart.innerHTML = productName.slice(1).join(" ");
+    productNameRemainingPart.style = "margin: 0";
 
     const productColor = document.createElement("p");
     productColor.innerHTML = PRODUCT_COLOR;
@@ -37,105 +46,56 @@ window.onload = () => {
     productId.innerHTML = PRODUCT_ID;
     productId.className = "product-id";
 
-    const contentDiv = document.createElement("div");
+    content.appendChild(productNameFirst);
+    content.appendChild(productNameRemainingPart);
+    content.appendChild(productColor);
+    content.appendChild(productColorCharacteristics);
+    content.appendChild(productId);
 
-    contentDiv.appendChild(productName);
-    contentDiv.appendChild(productColor);
-    contentDiv.appendChild(productColorCharacteristics);
-    contentDiv.appendChild(productId);
+    /* container */
 
-    content.appendChild(contentDiv);
+    const container = document.createElement("div");
+    container.className = "container";
 
-    div.appendChild(background);
-    div.appendChild(content);
-
-    container.appendChild(div);
-
-    /* SECOND */
-
-    const div2 = document.createElement("div");
+    const childrenImg = document.createElement("img");
+    childrenImg.src = "../../groupsData/shx-product-label/children.png";
+    childrenImg.alt = "children";
+    childrenImg.className = "children";
 
     const manufacturerInfo = document.createElement("div");
     manufacturerInfo.className = "manufacturer-info";
 
     const manufacturer = document.createElement("p");
-    manufacturer.innerHTML = "Hersteller: Jan Umbach";
+    manufacturer.innerHTML = "Hersteller:";
 
-    const address = document.createElement("p");
-    address.innerHTML = "Tannenwäldchen 20";
+    const manufacturer2 = document.createElement("p");
+    manufacturer2.innerHTML = "Jan Umbach";
 
-    const zipCity = document.createElement("p");
-    zipCity.innerHTML = "D-34212 Melsungen";
+    const manufacturer3 = document.createElement("p");
+    manufacturer3.innerHTML = "Klosterstraße 10";
+
+    const manufacturer4 = document.createElement("p");
+    manufacturer4.innerHTML = "D-34286 Spangenberg";
 
     manufacturerInfo.appendChild(manufacturer);
-    manufacturerInfo.appendChild(address);
-    manufacturerInfo.appendChild(zipCity);
-
-    div2.appendChild(manufacturerInfo);
-
-    const additionalInfo = document.createElement("div");
-    additionalInfo.className = "additional-info";
-
-    const additionalInfoText = document.createElement("p");
-    additionalInfoText.innerHTML = "Made in Germany";
-
-    const imgContainer = document.createElement("div");
-    imgContainer.className = "img-container";
-
-    const childrenImg = document.createElement("img");
-    childrenImg.src = "../../groupsData/shx-product-label/children.jpg";
-    childrenImg.alt = "children";
-    childrenImg.className = "children";
+    manufacturerInfo.appendChild(manufacturer2);
+    manufacturerInfo.appendChild(manufacturer3);
+    manufacturerInfo.appendChild(manufacturer4);
 
     const ceImg = document.createElement("img");
     ceImg.src = "../../groupsData/shx-product-label/ce.svg";
     ceImg.alt = "ce";
     ceImg.className = "ce";
 
-    imgContainer.appendChild(childrenImg);
-    imgContainer.appendChild(ceImg);
+    container.appendChild(childrenImg);
+    container.appendChild(manufacturerInfo);
+    container.appendChild(ceImg);
 
-    additionalInfo.appendChild(additionalInfoText);
-    additionalInfo.appendChild(imgContainer);
+    content.appendChild(container);
 
-    div2.appendChild(additionalInfo);
+    label.appendChild(backgroundImage);
+    label.appendChild(content);
 
-    container.appendChild(div2);
-
-    labels.appendChild(container);
+    labels.appendChild(label);
   }
 };
-
-/*
- <div class="container">
-      <div>
-        <div class="background"></div>
-
-        <div class="content">
-          <div>
-            <h1>Gizmo die Eidechse</h1>
-            <p class="product-color">Farbe Grün/Blau/Orange</p>
-            <p class="product-color">(Glänzend)</p>
-            <p class="product-id">#32420</p>
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <div class="manufacturer-info">
-          <p>Hersteller: Jan Umbach</p>
-          <p>Tannenwäldchen 20</p>
-          <p>D-34212 Melsungen</p>
-        </div>
-
-        <div class="additional-info">
-          <p>Made in Germany</p>
-
-          <div class="img-container">
-            <img class="children" src="children.jpg" />
-            <img class="ce" src="ce.svg" />
-          </div>
-        </div>
-      </div>
-    </div>
-*/

groupTasks/groups/shx-product-label/index.json

@@ -15,12 +15,15 @@
           "type": "select",
           "displayName": "Produkttyp auswählen",
           "options": [
-            "#32420 Gizmo die Eidechse - Grün, Blau, Orange (Glänzend)", 
-            "#92784 Gizmo die Eidechse - Glitzer Grün (Seidenmatt)",
-            "#36521 Charlie das Häschen - Hellbraun (Matt)",
-            "#48273 Charlie das Häschen - Gold (Glänzend)",
-            "#71936 Ruby die Schlange - Feuerrot (Glänzend)",
-            "#58324 Ruby die Schlange - Rot/Blau (Glänzend)"
+            "#32420; Gizmo die Eidechse; Grün, Blau, Orange; (Glänzend)", 
+            "#92784; Gizmo die Eidechse; Glitzer Grün; (Seidenmatt)",
+            "#36521; Charlie das Häschen; Hellbraun; (Matt)",
+            "#48273; Charlie das Häschen; Gold; (Glänzend)",
+            "#71936; Ruby die Schlange; Feuerrot; (Glänzend)",
+            "#58324; Ruby die Schlange; Rot/Blau; (Glänzend)",
+            "#21433; Bruno der Dino; Grün/Blau/Orange; (Glänzend)",
+            "#57953; Bruno der Dino; Rot/Blau; (Glänzend)",
+            "#90578; Bruno der Dino; Gold; (Glänzend)"
           ],
           "global": false
         }

groupTasks/groups/shx-product-label/script.py

@@ -24,16 +24,19 @@ def add_product_type_id(product_type_id, product_name, product_color, product_co
       "product_id": f"#{product_type_id}",
       "product_name": product_name,
       "product_color": f"Farbe {product_color}",
-      "product_color_characteristics": f"({product_color_characteristics})"
+      "product_color_characteristics": product_color_characteristics
     }
 
-add_product_type_id("32420", "Gizmo die Eidechse", "Grün/Blau/Orange", "Glänzend")
-add_product_type_id("92784", "Gizmo die Eidechse", "Glitzer Grün", "Seidenmatt")
-add_product_type_id("36521", "Charlie das Häschen", "Hellbraun", "Matt")
-add_product_type_id("48273", "Charlie das Häschen", "Gold", "Glänzend")
-add_product_type_id("71936", "Ruby die Schlange", "Feuerrot", "Glänzend")
-add_product_type_id("58324", "Ruby die Schlange", "Rot/Blau", "Glänzend")
+with open("../../groups/shx-product-label/index.json", "r") as file:
+    content = json.load(file)
 
+products = content["tasks"][0]["parameters"][0]["options"]
+
+for product in products:
+    data = product.split("; ")
+
+    # remove the # on the start
+    add_product_type_id(data[0][1:], data[1], data[2], data[3])    
 
 def createPdf(sourceHtml, outputPdf):
   command = [
@@ -58,8 +61,9 @@ def createPdf(sourceHtml, outputPdf):
 if __name__ == "__main__":
   utils.move_files_back_from_old_files()
 
+  # remove the ; on the end of the id
   # replace placeholders in index.js
-  p_type_id = product_type_id.split(" ")[0].split("#")[1]
+  p_type_id = product_type_id.split(" ")[0].split("#")[1][:-1]
 
   if p_type_id not in product_type_ids:
     print("Product type not found")
@@ -82,9 +86,6 @@ if __name__ == "__main__":
 
   # create front page  
 
-  createPdf("frontPage.html", "frontOutput.pdf")
-  createPdf("backPage.html", "backOutput.pdf")
+  createPdf("index.html", "Produktschilder.pdf")
 
-  utils.merge_pdfs("frontOutput.pdf", "backOutput.pdf", "Produktschilder.pdf")
-
-  utils.clear_workspace(["frontOutput.pdf", "backOutput.pdf", "backPage.html", "frontPage.html", "index.js", "style.css"])
+  utils.clear_workspace(["index.html", "index.js"])

groupTasks/groupsData/old-shx-product-label/ce.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="280px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <path d="M110,199.498744A100,100 0 0 1 100,200A100,100 0 0 1 100,0A100,100 0 0 1 110,0.501256L110,30.501256A70,70 0 0 0 100,30A70,70 0 0 0 100,170A70,70 0 0 0 110,169.498744Z" fill="black"/>
+    <path d="M280,199.498744A100,100 0 0 1 270,200A100,100 0 0 1 270,0A100,100 0 0 1 280,0.501256L280,30.501256A70,70 0 0 0 270,30A70,70 0 0 0 201.620283,85L260,85L260,115L201.620283,115A70,70 0 0 0 270,170A70,70 0 0 0 280,169.498744Z" fill="black"/>
+</svg>