Skip to main content
B
BAR38871-Visitor
1-Visitor
September 29, 2020
Question

3DLabel Wrap Text

  • September 29, 2020
  • 2 replies
  • 4555 views

I would like to be able to wrap text for a 3DLabel. My use case is if I can take a data field within a work instruction program to be able to be linked to a 3DLabel. This way it will show the most up to date work instructions that could could range from a couple sentences to a couple of paragraphs. Right now if I use a 3DLabel, it will take that text and keep it in the same line.

 

The workaround that I am using is putting the text into a 3D image so that way it is showing in the size and format fit best for the experience. But this does not allow that text to be configurable to latest instructions.

 

Thank you,

Brian

2 replies

S
sdidier17-Peridot
17-Peridot
September 30, 2020

Hello,

 

Sadly, this is limitation in behavior of 3D Label Widget.

Please see this article :

https://www.ptc.com/en/support/article/CS307920

 

I can give you another workaround :

  1. In inkscape, create a SVG file with a text element and give a name id to it
  2. Install open source extensions of Vuforia Studio. Please see this article : https://www.ptc.com/en/support/article?n=CS321903
  3. In a Project, in 3D Canvas, add a 3D SVG Widget
  4. Please have a look to these articles and Projects attached to modify with JavaScript the text element in SVG file directly :

https://www.ptc.com/en/support/article/CS320480

https://www.ptc.com/en/support/article/CS321955

 

              As updated can take some times, I would recommand to do update of 3D SVG when opening the View or with a progress bar displayed during some seconds when clicking a button, for example.

 

Best regards,

Samuel

    R
    RolandRaytchev21-Topaz I
    21-Topaz I
    September 30, 2020

    Hi @BAR3887 ,

     

    so far I know , there is no functionality to do this directly with 3Dlabel widget because they do not understand any formatting characters e.g. new line etc. and 3Dlabel widget could not contain more lines text.

    Possible options could be split the text to many 3DLabel as different text blocks,  which are aligned in rows and columns where different properties are applied e.g. / size /css style etc.

    Another option to use a 3dImage widget instead. You can use a svg file format / also this could be generated by code dynamically and allows to use multiline text. Pease, see the post ā€œDisplay SVG as 3D Image on Hololensā€

    Here is also a general info to the SVG format

    J
    JG_97700754-Participant
    4-Participant
    April 6, 2022

    Thanks for the help.

    Based on your comments (and others), here's my attempt at dynamically creating an SVG for text. It works in "Preview" and on the HoloLens2. 

     

    First, I added a "3D Image" to my Canvas named "3DImage-1". I set the source to a random SVG file that I found. 

    Next I added the following functions to Home.js:

     

     

    // This function accepts an image widget name (imgWidget, ex: '3DImage-1') 
// and some text/HTML (imgText) to render as an SVG image on the widget. 
// There are optional arguments for basic features like background color, 
// font color, font size, etc.
$scope.renderSVG = function(imgWidget, imgText, bgColor='#414141', fontColor='#FCFCFC', fontSize='xx-large') {
 // Simple 600x400 SVG image template with a foreignobject section to embed HTML (text). 
 let svgData = `<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg 
 id="svg1" 
 crossorigin="anonymous"
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 xmlns:xhtml="http://www.w3.org/1999/xhtml"
 width="600" height="400" >
 <foreignObject x="0" y="0" width="600" height="400">
 <xhtml:div 
 id='svgcontainer' 
 style="margin:5px;padding:5px;height:380px;display:flex;justify-content:center;align-content:center;flex-direction:column;font-family:Tahoma,sans-serif;font-size:${fontSize};text-align:center;background-color:${bgColor};color:${fontColor};">
 <xhtml:p 
 id='svgtext'>
 ${imgText}
 </xhtml:p>
 </xhtml:div>
 </foreignObject>
 </svg>`;
 // Base64 encode the SVG template defined above and create the SVG URL
 let svgURL = "data&colon;image/svg+xml;base64," + btoa(svgData);
 // Set the image widget to the SVG URL
 $scope.view.wdg[imgWidget].src=svgURL;
}


// Verify the renderSVG function works by setting a 3DImage widget to text. 
$scope.sampleSVG = function() {
 // Name of image widget to edit
 let sampleImgWidget = '3DImage-1';
 // Text to render on 3DImage widget
 let sampleText = 'Here is some <xhtml:b>TEXT</xhtml:b> that we can render inside an SVG and it should be centered and word-wrapped if everything worked out ok';
 // Render sample
 $scope.renderSVG(imgWidget=sampleImgWidget, imgText=sampleText);
}

// After the document has loaded, change the image to the sample SVG
angular.element(document).ready($scope.sampleSVG);

     

     

     

    Preview OutputPreview Output

     

     

      A
      AndreaT14-Alexandrite
      14-Alexandrite
      October 18, 2022

      Hi @JG_9770075 I'm using your code but I don't get the expected result.

      My widget is called 3DImage-1 and the rest is exactly the same but I get nothing.

      Of course I see it's trying to do something because It doesn't show the sampe svg.

      Any clue? Do you need to see anything from my project?

       

      Thanks

      BR

      Terms & ConditionsCookie settingsAccessibility statement