Skip to main content
D
DF_97037951-Visitor
1-Visitor
February 1, 2021
Solved

infoboard (gauge); label - line break

  • February 1, 2021
  • 1 reply
  • 3103 views

Hi everyone, 

i want to make kind of a infoboard (see attached picture), where i see the step names of my sequence and below an additional info-text.

I started to make a gauge with this image

Rahmen.png

and added the step-names of my sequence to this gauge by this code:

 

var labelId = "gauge_steps";
$scope.$on('newStep', function(evt, arg) {
      $scope.setWidgetProp( labelId, "text", arg); 
});

This works fine and my stepnames are shown in the top-left of my gauge-image.

 

Now i want to add some additional info text under the stepnames. I was thinking about just placing a 3D-label and controlling the text with the steps of my sequence. 

 

How do I make a line break in a label to add more infotext and how do I align the text to the left?

The reason I added so much information for this simple question was, because I am also wondering if there is another (more elegant) way to make such an "infoboard".

 

Thanks for any kind of help!

Best answer by RolandRaytchev

Hello @DF_9703795 ,

so far I know a 3Dlabel will not work for  a multiline text. So, it will ignore and write it into one line.

possible is:

- to create a customer widget- this is advance option - requires some deep experience

- more simple way (requires some programming work) is to have for each line a 3Dlabel widget and to split the text via javascrpt the text in different lines and then set the line to the 3D label widgets. For all line where the widget does not contain text thy could be set to invisible.

- another option I already used is to use instead a 3DImage and to generate a dynamic SVG file and to set to the 3DImage widget. You can see this  post:"Display SVG as 3D Image on Hololens"

 

Here is an existing post for related issue "3DLabel Wrap Text"

1 reply

R
RolandRaytchev21-Topaz IAnswer
21-Topaz I
February 1, 2021

Hello @DF_9703795 ,

so far I know a 3Dlabel will not work for  a multiline text. So, it will ignore and write it into one line.

possible is:

- to create a customer widget- this is advance option - requires some deep experience

- more simple way (requires some programming work) is to have for each line a 3Dlabel widget and to split the text via javascrpt the text in different lines and then set the line to the 3D label widgets. For all line where the widget does not contain text thy could be set to invisible.

- another option I already used is to use instead a 3DImage and to generate a dynamic SVG file and to set to the 3DImage widget. You can see this  post:"Display SVG as 3D Image on Hololens"

 

Here is an existing post for related issue "3DLabel Wrap Text"

D
dsgnrClarK16-Pearl
16-Pearl
February 2, 2021

In order to simplify the usage, background image is removed.

Home.js

$scope.svg_ret = function(imgWidget) {
 var xmlsrc='<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n'
 xmlsrc=xmlsrc+'<svg xmlns="http://www.w3.org/2000/svg" height="1000" width="600">\n'
 xmlsrc=xmlsrc+'<rect x="50" y="300" width="200" height="100" style="fill:red"/>\n'
 xmlsrc=xmlsrc+'<circle cx="350" cy="300" r="40" stroke="black" stroke-width="3" fill="red" margin-top="300px" />\n'
 xmlsrc=xmlsrc+'<text x="10" y="20" style="fill:red;">Several lines:\n'
 xmlsrc=xmlsrc+'<tspan x="10" y="45">First line.</tspan>\n'
 xmlsrc=xmlsrc+'<tspan x="10" y="70">Second line.</tspan>\n'
 xmlsrc=xmlsrc+'</text>\n'
 xmlsrc=xmlsrc+'</svg>'
 console.warn('data&colon;image/svg+xml;base64,'+xmlsrc)//some warning to check the string 
 $scope.view.wdg[imgWidget].src='data&colon;image/svg+xml;base64,' + btoa(xmlsrc);
}

 

Then call svg_ret('3DImage-1') with a Button.

Nothing shows for there should be rectangular, circle and text.

What I have done wrong?

 

Thanks in advance.

 

 

R
RolandRaytchev21-Topaz I
21-Topaz I
February 2, 2021

Hi @dsgnrClarK ,

I changed the js to:

$scope.svg_ret = function(imgWidget) {
 var xmlsrc='<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n'
 xmlsrc=xmlsrc+'<svg xmlns="http://www.w3.org/2000/svg" height="1000" width="600">\n'
 xmlsrc=xmlsrc+'<rect x="50" y="300" width="200" height="100" style="fill:red"/>\n'
 xmlsrc=xmlsrc+'<circle cx="350" cy="300" r="40" stroke="black" stroke-width="3" fill="red" margin-top="300px" />\n'
 xmlsrc=xmlsrc+'<text x="10" y="20" style="fill:red;">Several lines:\n'
 xmlsrc=xmlsrc+'<tspan x="10" y="45">First line.</tspan>\n'
 xmlsrc=xmlsrc+'<tspan x="10" y="70">Second line.</tspan>\n'
 xmlsrc=xmlsrc+'</text>\n'
 xmlsrc=xmlsrc+'</svg>'
 console.warn('data&colon;image/svg+xml;base64,'+xmlsrc)//some warning to check the string 
 $scope.view.wdg[imgWidget].src='data&colon;image/svg+xml;base64,'+btoa(xmlsrc);
 $scope.$applyAsync()
}

And then the project was working - means the generated svg was displayed.

2 differences to your code:

- used $scope.$applyAsync() after setting of the image property

-and removed the data&colon; from the src value

Terms & ConditionsCookie settingsAccessibility statement