Read XML File

Raphael97 · ‎Nov 15, 2019

Hey,

I have some trouble reading an XML File with Vuforia Studio.

The first way is the XML DOM. I have downloaded the library from here and Imported the .js files like: $scope.app.fn.loadResourceScript("Uploaded/dom-parser.js"); Do I have to create an Object from the class dom-parser in my Home.js to call the methods?
Another way was to read the XML File with the XMLHttpRequest() and save the content in a variable. This is working fine. In the XML File I have the Elements SopItemTitleText (Title), ItemText (Text, like a description) and Filename (name of an image). The ItemText contains sometimes line brakes. I was reading the string of the XML File with e.g. string.match(/<SopItemTitleText>(.*?)</g); and save its content in an Array. I delated <SopItemTitleText> and < from every entry of the Array. Unfortunately string.match(...) doesn't work, when the <SopItemTitleText> contains linebreaks.

Is there a way to import a library in the trial version of Vuforia Studio? Or reading the complete String between <SopItemTitleText> and < with the line breaks?

Another problem I had was with the CSS script. How can a textarea dynamically change the height in the context of the content in the textarea? The StudioID is textAreaWI. I was trying the following script:

textArea{
margin-top: 10px;
resize: none !important;

background-color: rgba(255,255,255,0.4) !important;
overflow: hidden !important;
font-size: 14px !important

max-height: 100% !important;
height: auto !important;
}

Is there also a way to mark only the text with the same background-color?

Thank you so much for your help!

RolandRaytchev · ‎Nov 15, 2019

Hi @Raphael97 ,

when you load the script it should be available inside the current environment ( if the java script requires no additional references)

There is no difference for the Studio installation if you use trial or other license model. The Studio client installation is the same - an reading some file form the local direction is not affected by your current license model - is an issue for the used server and if Thingworx functionality is available in Vuforia Studio.

I do not understand what the issue with the line brakes is

I uploaded the following xml file to Studio Upload folder:

<breakfast_menu>
   <food>
       <name>Belgian Waffles</name>
       <price>$5.95</price>
       <description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
       <calories>650</calories> </food>
   <food>
       <name>Strawberry Belgian Waffles</name>
       <price>$7.95</price>
       <description>Light Belgian waffles covered with strawberries and whipped cream</description>
       <calories>900</calories> </food>
   <food>
       <name>Berry-Berry Belgian Waffles</name>
       <price>$8.95</price>
       <description>Light Belgian waffles 
	    covered with an assortment of fresh 
		berries and whipped cream</description>
       <calories>900</calories> </food>
   <food>
       <name>French Toast</name>
       <price>$4.50</price>
       <description>Thick slices made from 
	       our homemade sourdough bread</description>
       <calories>600</calories> </food>
   <food>
       <name>Homestyle Breakfast</name>
       <price>$6.95</price>
       <description>Two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
       <calories>950</calories> </food>
</breakfast_menu>

And then used some code like this:

var parser = new DOMParser();
var stringContainingXMLSource = '<?xml version="1.0" encoding="UTF-8"?><note><to>Tove</to> <from>Jani</from><heading>Reminder</heading><body>Dont forget me this weekend!</body></note>'
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
console.warn(doc)

function loadXMLDoc(fileName) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "app/resources/Uploaded/"+fileName+".xml" , true);
  xmlhttp.send();
}

var myJsonArray=[]


function myFunction(xml) {
  var x, i, xmlDoc, table;
  
  var my_obj= {}
  
  xmlDoc = xml.responseXML;
    
  x = xmlDoc.getElementsByTagName("breakfast_menu")
  for (i = 0; i < x.length; i++) { 
   console.warn(x[i])
   my_obj['name'] = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
  
    my_obj['description'] = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue
     
    
    my_obj['price'] = x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue
    
    
   my_obj['calories'] = x[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue
  
  myJsonArray.push(my_obj)
  }
  //document.getElementById("demo").innerHTML = table;
  
  console.warn(JSON.stringify(myJsonArray))
}
////////////////////
$scope.testFunc=function() { loadXMLDoc('example1')
                             loadXMLDoc('exampleLineBrake') 
                           }

where the example1.xml has the same content as exampoleLineBrake.xml but it does not have any line brakes

But I did not face any problems there. So my question is , what is actually the issue here?

Raphael97 · ‎Nov 17, 2019

Hey,

thank you for repling.

I had some troubles using

getElementsByTagName("name")[0].childNodes[0].nodeValue

I will try to apply your code tomorrow.

Do you have a solution for the other Problem? (Auto height TextArea or mark the text in a TextArea)

Thank you

RolandRaytchev · ‎Nov 20, 2019

I do not know such possibility (regarding the CSS question) you can set CSS style for the text. Also possible to set /replace dynamically the style by script:

angular.element(document.querySelector("[widget-id=textArea-1] textarea")).removeClass("textAreaInput").addClass("TextAreaAccepted");

To replace the used class textAreaInput by TextAreaAccepted

Another option , I think , is to have a Image widget which point to a svg file. The svg file could contains some text with different formating. So when you click the picture you can open a popup with textArea where you will edit the text and later it will be written with some format attributes to the svg.

Please refere to About SVG and the topic Display SVG as 3D Image on Hololens

whity · ‎Dec 02, 2019

Hi everybody,

thanks @RolandRaytchev for sharing your code, this helped a lot. One thing I discovered is, that it worked better for me if I used

x= xmlDoc.getElementsByTagName("food") instead of:

x = xmlDoc.getElementsByTagName("breakfast_menu")

So now the loop for (i = 0; i < x.length; i++) ... will work with a length of 4 instead of just 1.

I tried to scipt a search funktion that throws the properties of a value if it was found in the list. Unfortunately it doesn't work jet. Any suggestions? 🙂

$scope.checkIfIncluded= function() {
var name2search = 'Belgian Waffles';
var obj ={};
obj = $scope.app.params.APObjekt1;
var found=false;
var objectLength = Object.keys(obj).length;
for(var i = 0; i < objectLength; i++) {
console.log("inLooping!");
console.log(obj);
if (obj[i].name == name2search) {
found = true;
console.log("found: "+found);
if (found==true){
console.log("found it!");
// $scope.printOutcome(name2search,obj);
}
//break;
}

}
if (found==false){
console.log("not found");
}

}