Added support for image replacement with transform(matrix(...)) prev. only x and y was supported

server/models/.gitignore

@@ -1 +0,0 @@
-*.xml

server/models/Ce-E-Pord_00.xml.author

@@ -1 +0,0 @@
-Juergen Mangler

server/models/Ce-E-Pord_00.xml.creator

@@ -1 +0,0 @@
-Juergen Mangler

server/models/Copy-Ce-E-Pord_00.xml.author

@@ -1 +0,0 @@
-Juergen Mangler

server/models/Copy-Ce-E-Pord_00.xml.creator

@@ -1 +0,0 @@
-Juergen Mangler

server/models/Die Regel Alternative 2.xml.author

@@ -1 +0,0 @@
-Juergen Mangler

server/models/Die Regel Alternative 2.xml.creator

@@ -1 +0,0 @@
-Juergen Mangler

server/models/testmodel.xml.author

@@ -1 +0,0 @@
-Juergen Mangler

server/models/testmodel.xml.creator

@@ -1 +0,0 @@
-Test Ehrendorfer

server/models/testmodel1.xml.author

@@ -1 +0,0 @@
-Juergen Mangler

server/models/testmodel1.xml.creator

@@ -1 +0,0 @@
-Test Ehrendorfer

ui/imageReplacement.php

@@ -8,6 +8,16 @@
     ini_set('display_startup_errors', 1);
     error_reporting(E_ALL);
   
+//http://www.justin-cook.com/2006/03/31/php-parse-a-string-between-two-strings/
+  function get_string_between($string, $start, $end){
+    $string = " ".$string;
+    $ini = strpos($string,$start);
+    if ($ini == 0) return "";
+    $ini += strlen($start);   
+    $len = strpos($string,$end,$ini) - $ini;
+    return substr($string,$ini,$len);
+  }
+
   
   //header('Content-type: image/svg+xml'); //does not play video
   
@@ -51,18 +61,21 @@
   //Get all Text Nodes
   $style = $xpath->query('//svg:text');
   $keyValueStore=array();
+  $keyValueStore2=array();
   
   //Get all rect nodes before text nodes and store them in key value store to access them for manipulation
   foreach ($style as $result) {
     $style2 = $xpath->query('./preceding-sibling::*[1]', $result);
     //echo $style2[0]->nodeName;
+    //get Rect
     foreach ($style2 as $result3) {
-      //echo $result3->nodeName;
+      //echo $result->nodeValue;
+      //echo $result3->getAttribute('transform') . "<br>";
       $keyValueStore[$result->nodeValue] = $result3;
+      $keyValueStore2[$result->nodeValue] = $result;
     }
   } 
   
-  
   //$keyValueStore["*imga"]->setAttribute("fill", "#FFFFFF");
   
   
@@ -99,8 +112,27 @@
       if($extension == "mp4"){
         
         $element = $doc->createElement('foreignObject');
-        $element->setAttribute("x", $keyValueStore[$node->getElementsByTagName("abbreviation")[0]->nodeValue]->getAttribute('x'));
-        $element->setAttribute("y", $keyValueStore[$node->getElementsByTagName("abbreviation")[0]->nodeValue]->getAttribute('y'));
+        
+        //Notwendig da ab und zu mit transform exportiert wird liegt an der powerpoint version
+        if($result3->getAttribute('transform') != null){
+          $transform = get_string_between($keyValueStore[$node->getElementsByTagName("abbreviation")[0]->nodeValue]->getAttribute('transform'), "matrix(", ")");
+          $matrix = explode(" ", $transform);
+          $videox =$matrix[4];
+          $videoy =$matrix[5];
+          
+          $element->setAttribute("x", $videox);
+          $element->setAttribute("y", $videoy);
+        }else{
+          $element->setAttribute("x", $keyValueStore[$node->getElementsByTagName("abbreviation")[0]->nodeValue]->getAttribute('x'));
+          $element->setAttribute("y", $keyValueStore[$node->getElementsByTagName("abbreviation")[0]->nodeValue]->getAttribute('y'));
+        }
+        
+        
+        
+   //   echo $result->nodeValue;// + result3->getAttribute('x');
+   //   echo $result3->getAttribute('transform') . "<br>";
+        
+        
         $element->setAttribute("width", $keyValueStore[$node->getElementsByTagName("abbreviation")[0]->nodeValue]->getAttribute('width'));
         $element->setAttribute("height", $keyValueStore[$node->getElementsByTagName("abbreviation")[0]->nodeValue]->getAttribute('height'));
         
@@ -118,6 +150,10 @@
         
         $parent = $doc->getElementsByTagName('svg')->item(0);
         $parent->appendChild($element);
+        
+        
+        //override identifier to be empty
+        $keyValueStore2[$node->getElementsByTagName("abbreviation")[0]->nodeValue]->nodeValue = "";
       }
       else{
       
@@ -169,6 +205,10 @@
         $parent = $doc->getElementsByTagName('defs')->item(0);
         $parent->appendChild($element3);      
         $keyValueStore[$node->getElementsByTagName("abbreviation")[0]->nodeValue]->setAttribute("fill", "url(#".$node->getElementsByTagName("abbreviation")[0]->nodeValue.")");
+        
+        
+        //override identifier to be empty
+        $keyValueStore2[$node->getElementsByTagName("abbreviation")[0]->nodeValue]->nodeValue = "";
       }
     }
   }

ui/js/design.js

@@ -7,6 +7,8 @@
 //get = get from DB
 //new = changes HTML
 
+var pictureWidth = 1280;
+var pictureHeight = 720;
 
 function overlayOn(value) {
   
@@ -30,6 +32,7 @@ function overlayOn(value) {
 }
 
 function overlayOnImg(data) {
+  
   var url = new URL("" + data, document.baseURI).href  
   document.getElementById("overlay").style.display = "block";
   const imageext = ["png", "jpg", "svg"]
@@ -37,7 +40,17 @@ function overlayOnImg(data) {
   var ext = url.substr(url.lastIndexOf('.') + 1);
   
   if(imageext.includes(ext)){
-    $('#overlaycontentsize').append("<img id='overlaycontent' src=" + url + "></img>");    
+    $('#overlaycontentsize').load(url, function(){
+    
+      
+        var width = $(this).children("svg").attr("width")
+        var height = $(this).children("svg").attr("height")
+      
+        $(this).children("svg").attr("viewBox","0 0 " + width + " " + height);
+        $(this).children("svg").attr("width",window.innerWidth * 0.7);
+        $(this).children("svg").attr("height",window.innerHeight *0.7);
+      
+    });
   }
   else if(movieext.includes(ext)){
     $('#overlaycontentsize').append("<video id='overlaycontent' controls> <source src=" + url + " type=\"video/mp4\">Your browser does not support the video tag.</video>");
@@ -45,6 +58,7 @@ function overlayOnImg(data) {
   else{
     $('#overlaycontentsize').append("<iframe id='overlaycontent' src=" + url + "></iframe>");
   }
+  
 }
 
 
@@ -380,7 +394,7 @@ function getImages(stationID, patternID){ //Get From DB 2 HTML
   
   
 
-
+  $('#addExternalImageUrl').val("");
   $('#addExternalImage').attr("onclick", "addExternalImage(" + stationID + "," + patternID + ")");
   
   
@@ -406,18 +420,22 @@ function getImages(stationID, patternID){ //Get From DB 2 HTML
             
             //$('[data-class=image]',clone).append('<object class="theImg" id="theImg" data="' + imgsrc +'" onclick="overlayOnImg(\'' +imgsrcsingle + '\')" height="100px" />')
             
-            $('[data-class=image]',clone).load(imgsrc, function(){
             
-              
+            //managing that internal and external pictures look the same
+            $('[data-class=image]',clone).load(imgsrc, function(){
                 var width = $(this).children("svg").attr("width")
                 var height = $(this).children("svg").attr("height")
-              
-                $(this).children("svg").attr("viewBox","0 0 " + width + " " + height);
-                $(this).children("svg").attr("width","100");
+                
+        
+                $(this).children("svg").attr("viewBox","0 0 " + pictureWidth + " " + pictureHeight + "");
+                $(this).children("svg").attr("width","200");
                 $(this).children("svg").attr("height","100");
-              
             });
             
+            $('[data-class=image]',clone).attr("onclick", "overlayOnImg('" + imgsrcsingle + "')" );
+            
+            //$('[data-class=image]',clone).append('<object class="theImg" id="theImg" data="' + imgsrc +'" onclick="overlayOnImg(\'' +imgsrcsingle + '\')" height="100px" />')
+            
             
             //$('[data-class=image]',clone).append('<div style="background-image: url(' + imgsrc+ ')" height="100px" />')