Added laser UI

server/json/LaserUI.json

@@ -0,0 +1,183 @@
+{
+  "Row1": [
+    {
+      "Label": "RP 31",
+      "File": "File1",
+      "Image": "ImageTest.JPG"
+    },
+    {
+      "Label": "RP 36",
+      "File": "File2",
+      "Image": "Image2.jpg"
+    },
+    {
+      "Label": "RP 41",
+      "File": "File3",
+      "Image": "Image3.jpg"
+    },
+    {
+      "Label": "RP 46",
+      "File": "File4",
+      "Image": "Image4.jpg"
+    },
+    {
+      "Label": "RP 51",
+      "File": "File5",
+      "Image": "Image5.jpg"
+    },
+    {
+      "Label": "RP 56",
+      "File": "File6",
+      "Image": "Image6.jpg"
+    },
+    {
+      "Label": "RP 61",
+      "File": "File6",
+      "Image": "Image6.jpg"
+    },
+    {
+      "Label": "RP 66",
+      "File": "File6",
+      "Image": "Image6.jpg"
+    },
+    {
+      "Label": "RP 71",
+      "File": "File6",
+      "Image": "Image6.jpg"
+    },
+    {
+      "Label": "RP 76",
+      "File": "File6",
+      "Image": "Image6.jpg"
+    },
+    {
+      "Label": "RP 81",
+      "File": "File6",
+      "Image": "Image6.jpg"
+    },
+    {
+      "Label": "RP 86",
+      "File": "File6",
+      "Image": "Image6.jpg"
+    },
+    {
+      "Label": "RP 91",
+      "File": "File6",
+      "Image": "Image6.jpg"
+    }
+  ],
+  "Row2": [
+    {
+      "Label": "EP 31",
+      "File": "File8",
+      "Image": "Image8.jpg"
+    },
+    {
+      "Label": "EP 36",
+      "File": "File9",
+      "Image": "Image9.jpg"
+    },
+    {
+      "Label": "EP 41",
+      "File": "File10",
+      "Image": "Image10.jpg"
+    },
+    {
+      "Label": "EP 46",
+      "File": "File11",
+      "Image": "Image11.jpg"
+    },
+    {
+      "Label": "EP 51",
+      "File": "File12",
+      "Image": "Image12.jpg"
+    },
+    {
+      "Label": "EP 56",
+      "File": "File11",
+      "Image": "Image11.jpg"
+    },
+    {
+      "Label": "EP 61",
+      "File": "File11",
+      "Image": "Image11.jpg"
+    },
+    {
+      "Label": "EP 66",
+      "File": "File11",
+      "Image": "Image11.jpg"
+    },
+    {
+      "Label": "EP 71",
+      "File": "File11",
+      "Image": "Image11.jpg"
+    },
+    {
+      "Label": "EP 76",
+      "File": "File11",
+      "Image": "Image11.jpg"
+    },
+    {
+      "Label": "EP 81",
+      "File": "File11",
+      "Image": "Image11.jpg"
+    },
+    {
+      "Label": "EP 86",
+      "File": "File11",
+      "Image": "Image11.jpg"
+    },
+    {
+      "Label": "EP 91",
+      "File": "File11",
+      "Image": "Image11.jpg"
+    }
+  ],
+  "SpecialButtons": [
+    {
+      "Label": "HPM",
+      "File": "File1",
+      "Image": "ImageTest.JPG",
+      "PositionX": 400,
+      "PositionY": 400,
+      "SizeX": 300,
+      "SizeY": 100
+    },
+    {
+      "Label": "MB19",
+      "File": "File1",
+      "Image": "ImageTest.JPG",
+      "PositionX": 400,
+      "PositionY": 525,
+      "SizeX": 150,
+      "SizeY": 50
+    },
+    {
+      "Label": "MB22",
+      "File": "File1",
+      "Image": "ImageTest.JPG",
+      "PositionX": 400,
+      "PositionY": 600,
+      "SizeX": 150,
+      "SizeY": 50
+    },
+    {
+      "Label": "MB27",
+      "File": "File1",
+      "Image": "ImageTest.JPG",
+      "PositionX": 600,
+      "PositionY": 650,
+      "SizeX": 100,
+      "SizeY": 100
+    },
+    {
+      "Label": "SKA-SKI",
+      "File": "File1",
+      "Image": "ImageTest.JPG",
+      "PositionX": 1400,
+      "PositionY": 400,
+      "SizeX": 150,
+      "SizeY": 150
+    }
+  ]
+}

server/json/ProductCode.json

@@ -54,7 +54,13 @@
         "46",
         "51",
         "56",
-        "61"
+        "61",
+        "66",
+        "71",
+        "76",
+        "81",
+        "86",
+        "91"
       ]
     },
     {
@@ -71,6 +77,12 @@
         "51",
         "56",
         "61",
+        "66",
+        "71",
+        "76",
+        "81",
+        "86",
+        "91",
         "K31",
         "K36",
         "K41",
@@ -78,7 +90,12 @@
         "K51",
         "K56",
         "K61",
-        "K66"
+        "K66",
+        "K71",
+        "K76",
+        "K81",
+        "K86",
+        "K91"
       ]
     },
     {

server/json/Rectangle.json

@@ -545,8 +545,401 @@
         }
       ]
     },
-
-{"name":"Station3OnlyRect03and05","rects":[{"id":"3","X":"535","Y":"300","W":"449","H":"180","pattern":{"Ba":true,"Za":true,"Of":true,"Pf":true,"Va":true},"idtext":"03","assignmentsstation":["3"],"assignments":{"Ba":["KZ-S","HZ-S","DZ-S"],"Pf":["FLU","FSR"]}},{"id":"5","X":"1024","Y":"300","W":"440","H":"180","pattern":{"Ba":true,"Zi":true,"Of":true,"Kf":true,"Pf":true},"idtext":"05","assignmentsstation":["3"],"assignments":{"Pf":["FLU","FSR"]}}]}
-
+    {
+      "name": "Station99",
+      "rects": [
+        {
+          "id": "0",
+          "X": "535",
+          "Y": "100",
+          "W": "410",
+          "H": "200",
+          "pattern": {
+            "Ba": true,
+            "Za": true,
+            "Of": true,
+            "Pf": true,
+            "Va": true
+          },
+          "idtext": "00",
+          "assignmentsstation": [
+            "1",
+            "2",
+            "3"
+          ],
+          "assignments": {
+            "Ba": [
+              "KZ-S",
+              "HZ-S",
+              "DZ-S"
+            ],
+            "Za": [
+              "*"
+            ],
+            "Of": [
+              "*"
+            ],
+            "Pf": [
+              "*"
+            ],
+            "Va": [
+              "*"
+            ]
+          }
+        },
+        {
+          "id": "1",
+          "X": "945",
+          "Y": "100",
+          "W": "109",
+          "H": "200",
+          "pattern": {
+            "Ba": true,
+            "Sn": true
+          },
+          "idtext": "01",
+          "assignmentsstation": [
+            "1",
+            "2",
+            "3"
+          ],
+          "assignments": {
+            "Ba": [
+              "KZ-S",
+              "HZ-S",
+              "DZ-S"
+            ],
+            "Sn": [
+              "*"
+            ]
+          }
+        },
+        {
+          "id": "2",
+          "X": "1054",
+          "Y": "100",
+          "W": "411",
+          "H": "200",
+          "pattern": {
+            "Ba": true,
+            "Zi": true,
+            "Of": true,
+            "Kf": true,
+            "Pf": true
+          },
+          "idtext": "02",
+          "assignmentsstation": [
+            "1",
+            "2",
+            "3"
+          ],
+          "assignments": {
+            "Ba": [
+              "KZ-S",
+              "HZ-S",
+              "DZ-S"
+            ],
+            "Zi": [
+              "*"
+            ],
+            "Of": [
+              "*"
+            ],
+            "Kf": [
+              "*"
+            ],
+            "Pf": [
+              "*"
+            ]
+          }
+        },
+        {
+          "id": "3",
+          "X": "535",
+          "Y": "300",
+          "W": "449",
+          "H": "180",
+          "pattern": {
+            "Ba": true,
+            "Za": true,
+            "Of": true,
+            "Pf": true,
+            "Va": true
+          },
+          "idtext": "03",
+          "assignmentsstation": [
+            "3"
+          ],
+          "assignments": {
+            "Ba": [
+              "KZ-S",
+              "HZ-S",
+              "DZ-S"
+            ],
+            "Pf": [
+              "FLU",
+              "FSR"
+            ]
+          }
+        },
+        {
+          "id": "4",
+          "X": "984",
+          "Y": "300",
+          "W": "42",
+          "H": "180",
+          "pattern": {
+            "Ba": true,
+            "Sn": true
+          },
+          "idtext": "04",
+          "assignmentsstation": [
+            "3"
+          ],
+          "assignments": {
+            "Ba": [
+              "KZ-S",
+              "HZ-S",
+              "DZ-S"
+            ]
+          }
+        },
+        {
+          "id": "5",
+          "X": "1024",
+          "Y": "300",
+          "W": "440",
+          "H": "180",
+          "pattern": {
+            "Ba": true,
+            "Zi": true,
+            "Of": true,
+            "Kf": true,
+            "Pf": true
+          },
+          "idtext": "05",
+          "assignmentsstation": [
+            "3"
+          ],
+          "assignments": {
+            "Pf": [
+              "FLU",
+              "FSR"
+            ]
+          }
+        },
+        {
+          "id": "6",
+          "X": "535",
+          "Y": "480",
+          "W": "260",
+          "H": "550",
+          "pattern": {},
+          "idtext": "Le06",
+          "assignmentsstation": [
+            "3"
+          ],
+          "assignments": {}
+        },
+        {
+          "id": "7",
+          "X": "795",
+          "Y": "480",
+          "W": "170",
+          "H": "265",
+          "pattern": {},
+          "idtext": "4Bat",
+          "assignmentsstation": [
+            "1",
+            "2",
+            "3"
+          ],
+          "assignments": {}
+        },
+        {
+          "id": "8",
+          "X": "965",
+          "Y": "480",
+          "W": "500",
+          "H": "265",
+          "pattern": {},
+          "idtext": "Le08",
+          "assignmentsstation": [
+            "3"
+          ],
+          "assignments": {}
+        },
+        {
+          "id": "9",
+          "X": "795",
+          "Y": "745",
+          "W": "180",
+          "H": "90",
+          "pattern": {
+            "Pf": true
+          },
+          "idtext": "09",
+          "assignmentsstation": [
+            "1",
+            "2",
+            "3"
+          ],
+          "assignments": {
+            "Pf": [
+              "FLU",
+              "FSR"
+            ]
+          }
+        },
+        {
+          "id": "10",
+          "X": "795",
+          "Y": "835",
+          "W": "180",
+          "H": "195",
+          "pattern": {
+            "Of": true
+          },
+          "idtext": "10",
+          "assignmentsstation": [
+            "2",
+            "3"
+          ],
+          "assignments": {}
+        },
+        {
+          "id": "11",
+          "X": "975",
+          "Y": "745",
+          "W": "190",
+          "H": "90",
+          "pattern": {
+            "Ba": true,
+            "Pf": true
+          },
+          "idtext": "11",
+          "assignmentsstation": [
+            "1",
+            "2",
+            "3"
+          ],
+          "assignments": {
+            "Ba": [
+              "RDZ-S"
+            ],
+            "Pf": [
+              "FLU",
+              "FSR"
+            ]
+          }
+        },
+        {
+          "id": "12",
+          "X": "975",
+          "Y": "835",
+          "W": "190",
+          "H": "195",
+          "pattern": {
+            "Ba": true,
+            "Of": true
+          },
+          "idtext": "12",
+          "assignmentsstation": [
+            "2",
+            "3"
+          ],
+          "assignments": {
+            "Ba": [
+              "RDZ-S"
+            ]
+          }
+        },
+        {
+          "id": "13",
+          "X": "1165",
+          "Y": "745",
+          "W": "120",
+          "H": "285",
+          "pattern": {},
+          "idtext": "Le13",
+          "assignmentsstation": [
+            "3"
+          ],
+          "assignments": {}
+        },
+        {
+          "id": "14",
+          "X": "1285",
+          "Y": "745",
+          "W": "180",
+          "H": "285",
+          "pattern": {},
+          "idtext": "Le14",
+          "assignmentsstation": [
+            "3"
+          ],
+          "assignments": {}
+        }
+      ]
+    },
+    {
+      "name": "Station3OnlyRect03and05",
+      "rects": [
+        {
+          "id": "3",
+          "X": "535",
+          "Y": "300",
+          "W": "449",
+          "H": "180",
+          "pattern": {
+            "Ba": true,
+            "Za": true,
+            "Of": true,
+            "Pf": true,
+            "Va": true
+          },
+          "idtext": "03",
+          "assignmentsstation": [
+            "3"
+          ],
+          "assignments": {
+            "Ba": [
+              "KZ-S",
+              "HZ-S",
+              "DZ-S"
+            ],
+            "Pf": [
+              "FLU",
+              "FSR"
+            ]
+          }
+        },
+        {
+          "id": "5",
+          "X": "1024",
+          "Y": "300",
+          "W": "440",
+          "H": "180",
+          "pattern": {
+            "Ba": true,
+            "Zi": true,
+            "Of": true,
+            "Kf": true,
+            "Pf": true
+          },
+          "idtext": "05",
+          "assignmentsstation": [
+            "3"
+          ],
+          "assignments": {
+            "Pf": [
+              "FLU",
+              "FSR"
+            ]
+          }
+        }
+      ]
+    },
+{"name":"Station3OnlyRect05","rects":[{"id":"5","X":"1024","Y":"300","W":"440","H":"180","pattern":{"Ba":true,"Zi":true,"Of":true,"Kf":true,"Pf":true},"idtext":"05","assignmentsstation":["3"],"assignments":{"Pf":["FLU","FSR"]}}]}
   ]
 }

server/json/SlicerConfig.json

@@ -1,6 +1,7 @@
 {
   "saveLocation": [
     "../../universal-storage/storage/Stationsbilder/Einzelbilder/Station3/",
+    "../../universal-storage/storage/Stationsbilder/Einzelbilder/Stationtmp/",
     "../../universal-storage/storage/Stationsbilder/Einzelbilder/Station99/"
   ],
   "SlicerRectForm": true

ui/LaserUI/css/button.css

@@ -0,0 +1,240 @@
+
+.centered {
+  margin:50px auto;
+  text-align:center;
+}
+
+.button::-moz-focus-inner{
+  border: 0;
+  padding: 0;
+}
+
+.button{
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  padding: 6px 20px;
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid #bbb;
+  overflow: visible;
+  font: bold 13px arial, helvetica, sans-serif;
+  text-decoration: none;
+  white-space: nowrap;
+  color: #555;
+  
+  background-color: #ddd;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
+  background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+  background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+  background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+  background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+  background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+  
+  -webkit-transition: background-color .2s ease-out;
+  -moz-transition: background-color .2s ease-out;
+  -ms-transition: background-color .2s ease-out;
+  -o-transition: background-color .2s ease-out;
+  transition: background-color .2s ease-out;
+  background-clip: padding-box; /* Fix bleeding */
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
+  text-shadow: 0 1px 0 rgba(255,255,255, .9);
+  
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.button:hover{
+  background-color: #eee;
+  color: #555;
+}
+
+.button:active{
+  background: #e9e9e9;
+  position: relative;
+  top: 1px;
+  text-shadow: none;
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
+}
+
+.button[disabled], .button[disabled]:hover, .button[disabled]:active{
+  border-color: #eaeaea;
+  background: #fafafa;
+  cursor: default;
+  position: static;
+  color: #999;
+  /* Usually, !important should be avoided but here it's really needed :) */
+  -moz-box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+}
+
+/* Smaller buttons styles */
+
+.button.small{
+  padding: 4px 12px;
+}
+
+/* Larger buttons styles */
+
+.button.large{
+  padding: 12px 30px;
+  text-transform: uppercase;
+}
+
+.button.large:active{
+  top: 2px;
+}
+
+/* Colored buttons styles */
+
+.button.green, .button.red, .button.blue {
+  color: #fff;
+  text-shadow: 0 1px 0 rgba(0,0,0,.2);
+  
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
+  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+  background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+  background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+  background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+  background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+}
+
+/* */
+
+.button.green{
+  background-color: #57a957;
+  border-color: #57a957;
+}
+
+.button.green:hover{
+  background-color: #62c462;
+}
+
+.button.green:active{
+  background: #57a957;
+}
+
+/* */
+
+.button.red{
+  background-color: #ca3535;
+  border-color: #c43c35;
+}
+
+.button.red:hover{
+  background-color: #ee5f5b;
+}
+
+.button.red:active{
+  background: #c43c35;
+}
+
+/* */
+
+.button.blue{
+  background-color: #269CE9;
+  border-color: #269CE9;
+}
+
+.button.blue:hover{
+  background-color: #70B9E8;
+}
+
+.button.blue:active{
+  background: #269CE9;
+}
+
+/* */
+
+.green[disabled], .green[disabled]:hover, .green[disabled]:active{
+  border-color: #57A957;
+  background: #57A957;
+  color: #D2FFD2;
+}
+
+.red[disabled], .red[disabled]:hover, .red[disabled]:active{
+  border-color: #C43C35;
+  background: #C43C35;
+  color: #FFD3D3;
+}
+
+.blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{
+  border-color: #269CE9;
+  background: #269CE9;
+  color: #93D5FF;
+}
+
+/* Group buttons */
+
+.button-group,
+.button-group li{
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+}
+
+.button-group{
+  font-size: 0; /* Inline block elements gap - fix */
+  margin: 0;
+  padding: 0;
+  background: rgba(0, 0, 0, .1);
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  padding: 7px;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7px;
+  border-radius: 7px;
+}
+
+.button-group li{
+  margin-right: -1px; /* Overlap each right button border */
+}
+
+.button-group .button{
+  font-size: 13px; /* Set the font size, different from inherited 0 */
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+}
+
+.button-group .button:active{
+  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
+  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
+  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
+}
+
+.button-group li:first-child .button{
+  -moz-border-radius: 3px 0 0 3px;
+  -webkit-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+}
+
+.button-group li:first-child .button:active{
+  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
+  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
+  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
+}
+
+.button-group li:last-child .button{
+  -moz-border-radius: 0 3px 3px 0;
+  -webkit-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
+}
+
+.button-group li:last-child .button:active{
+  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset;
+  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset;
+  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset;
+}

ui/LaserUI/css/evva.css

@@ -0,0 +1,134 @@
+body{
+  margin: 0px;
+  margin-bottom:50px;
+}
+
+#LogoTop{
+  background-color:#fae800;
+  width: 100%;
+  height: 5em;
+  background-image:url("../images/EVVA-Logo.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: right;
+  position:fixed;
+}
+
+#Footer {
+  position:fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height:50px;
+  background-color: red;
+  color: white;
+  text-align: center;
+}
+
+
+
+#MenuLinks {
+  position:fixed;
+  margin-top: 5em;
+  background-color:lightgrey;
+  height: 100%;
+  width: 10em;
+}
+
+#MenuLinks + #Content{
+  margin-left: 10em;
+}
+
+#MenuLinks a:link, #MenuLinks a:visited, #MenuLinks a:hover, #MenuLinks a:active{
+  color: black;
+  text-decoration: none;
+}
+
+#Content{
+  padding-top: 6em;
+}
+
+.MenuItem{
+	border: 1px solid;
+	border-color: black;
+	margin: 0.5em;
+	padding: 0.2em;
+}
+
+.row {
+  display: flex;
+  flex-wrap:wrap;
+}
+
+.column2 {
+  flex: 50%;
+}
+.column3 {
+  flex: 33%;
+}
+.column4 {
+  flex: 25%;
+}
+.column5{
+  flex: 20%;
+}
+
+.center{
+  text-align:center;
+}
+
+.lightgrey{
+  background-color: lightgrey;
+}
+.grey{
+  background-color: grey;
+}
+
+.adaptive_img{
+  width: 100%;
+}
+
+.round_border1{
+  border-radius: 1em;
+}
+
+.round_border2{
+  border-radius: 2em;
+}
+
+.round_border3{
+  border-radius: 3em;
+}
+
+.round_border4{
+  border-radius: 4em;
+}
+
+.round_border5{
+  border-radius: 4em;
+}
+
+.paddingtop1{
+  padding-top: 1em;
+}
+
+.paddingtop2{
+  padding-top: 2em;
+}
+
+.paddingtop3{
+  padding-top: 3em;
+}
+
+.paddingtop4{
+  padding-top: 4em;
+}
+.paddingtop5{
+  padding-top: 5em;
+}
+
+
+
+.paddingleft3{
+  padding-left: 3em;
+}

ui/LaserUI/index.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EVVA</title>
+    <link rel="stylesheet" href="css/evva.css">
+    <link rel="stylesheet" href="css/button.css">
+  </head>
+  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+<script>
+
+
+$(function() {
+  
+
+  $("#buttonImage").hide();
+
+  updateloadfiledropdown();  
+  
+  $.getJSON( "../../server/json/LaserUI.json", function( data ) {
+    $.each( data["Row1"], createButtons);
+    $('#ButtonRows').append("<div style='flex-basis: 100%; height: 0;'></div>");
+    $.each( data["Row2"], createButtons);
+    $.each( data["SpecialButtons"], createSpecialButtons);
+  });
+
+});
+
+function createButtons(i, item){
+  var clone = document.importNode(document.querySelector('#Buttonentry').content,true);
+  $('[data-class=entryitem]',clone).text(item["Label"]);
+  $('[data-class=entryitem]',clone).attr('onclick', "buttonclick('" + item["File"] + "','" + item["Image"] + "','" + item["Label"] + "')");
+  
+  $('#ButtonRows').append(clone);
+}
+
+
+function createSpecialButtons(i, item){
+  var clone = document.importNode(document.querySelector('#Buttonentryspecial').content,true);
+  
+  
+  $('[data-class=entryitem]',clone).text(item["Label"]);
+  $('[data-class=entryitem]',clone).attr('onclick', "buttonclick('" + item["File"] + "','" + item["Image"] + "','" + item["Label"] + "')");
+  
+  
+  
+  $('[data-class=entrydiv]',clone).css({"left": item["PositionX"], "top": item["PositionY"] });
+  $('[data-class=entryitem]',clone).css({"width": item["SizeX"], "height": item["SizeY"]});
+  
+   
+  
+  
+  $('#ButtonRows').append(clone);
+}
+
+function buttonclick(imgfile, imgimg, buttontext){
+  //alert(imgimg);
+  $("#actualbuttonImage").attr("src","https://centurio.work/customers/evva/universal-storage/storage/Laser/VorschauBilder/" + imgimg)
+  
+  $("#currentFile").text("Current Selection: " + buttontext);
+  
+  $("#ButtonRows").hide(); 
+  $("#buttonImage").show();
+  
+}
+
+function showallbuttons(){
+  $("#buttonImage").hide();
+  $("#ButtonRows").show();
+}
+
+function updateloadfiledropdown(){
+  $('#loadfiledropdown')
+    .find('option')
+    .remove()
+  $.ajax({
+    type: "GET",
+    url: "/listfiles",
+    datatype: "json",
+    success: function(data){
+      $(data).each(function(item, val){
+    	var $dropdown = $("#loadfiledropdown");
+	    $dropdown.append($("<option />").val(val).text(val));
+      });
+    }
+  });
+}
+
+function ListFiles() {
+  updateloadfiledropdown()
+  $.ajax({
+    type: "GET",
+    url: "/listfiles",
+    datatype: "json",
+    success: function(data){
+      $("#loadedfiles").text(JSON.stringify(data, undefined, 2))
+    }
+  });
+}
+
+
+function LoadNewFile() {
+  $.ajax({
+    type: "GET",
+    url: "/setfile?filename=" + $("#loadfiledropdown :selected").text(),
+    datatype: "json",
+    success: function(data){
+    
+    }
+  
+  });
+}
+
+function ShowLoadedFile() {
+  $.ajax({
+    type: "GET",
+    url: "/getfile",
+    datatype: "json",
+    success: function(data){
+      $("#loadedfile").text(JSON.stringify(data, undefined, 2))
+    }
+  });
+}
+
+function ShowStats() {
+  $.ajax({
+    type: "GET",
+    url: "/statistics",
+    datatype: "json",
+    success: function(data){
+    	$("#stats").text(JSON.stringify(data, undefined, 2))
+    }
+  });
+}
+
+function ShowInputstates() {
+  $.ajax({
+    type: "GET",
+    url: "/getinputstate",
+    datatype: "json",
+    success: function(data){
+    	$("#inputstates").text(JSON.stringify(data, undefined, 2))
+    }
+  });
+}
+
+function SetText() {
+  $.ajax({
+    type: "GET",
+    url: "/settext?t=0&val=" + $("#seriennummber").val(),
+    datatype: "json",
+    success: function(data){
+    	$("#inputstates").text(JSON.stringify(data, undefined, 2))
+    }
+  });
+}
+
+
+function SetSlot(slot) {
+  $.ajax({
+    type: "GET",
+    url: "/setslot?t=" + slot +"&val=" + $("#slotvalue").val(),
+    datatype: "json",
+    success: function(data){
+      $("#laserwrite").text("Seriennummer: " + $("#slotvalue").val() + " geschrieben.")    
+    }
+  });
+}
+
+
+function GetSlot(slot) {
+  $.ajax({
+    type: "GET",
+    url: "/getslot?t=" + slot,
+    datatype: "json",
+    success: function(data){
+      $("#getSlot").text(JSON.stringify(data, undefined, 2))
+    }
+  });
+}
+
+function ShowOutputStates() {
+  alert("Not yet implemented");
+}
+
+
+function StartLaser() {
+  $.ajax({
+    type: "GET",
+    url: "/startlaser",
+    datatype: "json",
+    success: function(data){
+      $("#startlaser").text("Laser gestartet.")
+    }
+  });
+}
+
+</script>
+  <body>
+    <div id="LogoTop">
+      
+    </div>
+
+
+    <template id="Buttonentry">      
+      <div class="" style="width: 8em;">
+        <button data-class='entryitem' onclick="openimg()" class="small blue button" <!--- style="margin-top:3em; height:8em; padding:1.5em; width:7.5em" -->>ButtonText</button>
+      </div>
+    </template>
+    
+    
+    <template id="Buttonentryspecial">      
+      <div data-class='entrydiv' style="position: absolute;" >
+        <button data-class='entryitem' onclick="openimg()" class="small green button" <!--- style="margin-top:3em; height:8em; padding:1.5em; width:7.5em" -->>ButtonText</button>
+      </div>
+    </template>
+        
+    <div id="Content">
+      <div class="row paddingleft3" id="ButtonRows"  >
+      
+      </div>
+      
+      
+      <div id="buttonImage" class="paddingleft3" >
+        <img id="actualbuttonImage" style="max-height:700px" src="" alt=""><br>
+			  <button onclick="showallbuttons()" style="margin-top:3em; padding:2em;">Zurück zur File auswahl</button>
+        <span id="currentFile"></span>
+        <br>
+        
+      </div>
+
+
+
+    <div id="Footer">
+      Footer Content
+    </div>
+  </body>
+</html>

ui/imageReplacement.php

@@ -20,6 +20,12 @@
     return substr($string,$ini,$len);
   }
   
+  function startsWith ($string, $startString)
+  {
+    $len = strlen($startString);
+    return (substr($string, 0, $len) === $startString);
+  }
+  
   //header('Content-type: image/svg+xml'); //does not play video
   
   $svg_file = file_get_contents(dirname(__DIR__, 1) . "/images/uploads/" . $_GET["___image___"]);
@@ -98,6 +104,14 @@
     $key = substr($key, 1); 
     $keyarray = str_split($key, 2);
     
+    
+    if (startsWith($key, 'URL')) {
+      echo "<iframe src='" . substr($key, 4) . "'style='position: absolute; left: " . $value->getAttribute('x')/12.80 ."%; top: " . $value->getAttribute('y')/7.20 ."%; width: " . $value->getAttribute('width')/12.80 . "%; height: " . $value->getAttribute('height')/7.20 . "%;'>";
+      echo "</iframe>";
+      
+    }
+
+    
     $fullfilename = "";
     $textentry = "";
     foreach($keyarray as $keypart){

ui/js/PatternForm.js

@@ -0,0 +1,47 @@
+abk = [];
+fullpattern = [];
+
+function createPatternForm(){
+  /* Load pattern config */
+  //Create form for WAS/Stations/Pattern and WAS/Slicer
+
+  var populate = ["FormPattern","FormPattern2", "FormPattern3", "FormPatternAssignment"]
+  
+  var first = true;
+  populate.forEach(function(populate2){
+    $.getJSON( "../server/json/ProductCode.json", function( data ) {
+      fullpattern = data;
+      $.each( data["pattern"], function(i, item){
+        var clone = document.importNode(document.querySelector('#PatternFormInit').content,true);
+        $('[data-class=Name]',clone).text(item["name"]);
+        $('[data-class=Abkürzung]',clone).text(item["abk"]);
+        if(first)
+          abk.push(item["abk"])
+        $('[data-class=Optionen]',clone).attr("name",item["abk"])
+        $.each( item["types"], function(i, item){        
+          $('[data-class=Optionen]',clone).append('<option value="' + item +'">' + item +'</option>');
+        });
+        $('[data-class=Optionen]',clone).attr("id", populate2 + "_Form_" + item["abk"]);
+        
+        $('#' + populate2).append(clone);
+      });
+      //Add "Text" to abk to show it within rects
+      first = false;
+      
+      //on Patternform2 change trigger assignment default reset
+      if(populate2 == "FormPattern2"){
+        abk.forEach(function(localabk){
+          $("#FormPattern2_Form_" + localabk).change(refreshassignments);
+        });
+      }
+    });
+  });
+  abk.length = 0;
+  
+  //get Save locations
+  $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
+    $.each( data["saveLocation"], function(i, item){
+      $("#savelocation").append('<option value="' + item +'">' + item +'</option>');
+    });
+  });
+}