HTML content in widgets

[mneufeld]

Is there any way to put HTML tags into for example Label widget? For instance i need to:

- put a label like "H2O" but more like chemical style (water symbol), in HTML I would use "H₂O" but when I put it into into label Text attribute HTML is not interpretted

- put some text with fragments in bold like: "This is a very <b>long</b> text"

The only what somehow "worked" is to put many labels one to each other ant assign different CSS to it, but it is pain. 

Thanks in advance for any hints,

Michal 

[ClayHelberg · Accepted solution]

You can do this, but it will probably need to use some scripting. It also kind of breaks the Angular model, so you may run into some funny results if you do anything that affects the label in other parts of the experience.

Set up your label as normal with some dummy content. Then, in your Home.js, add the following:

$scope.init = function() {
  // set content of label-2 with HTML
  var labeldiv = document.querySelector("*[widget-id='label-2'] div");
  labeldiv.innerHTML = "H<sub>2</sub>O";
}

angular.element(document).ready($scope.init);

This assumes static content. If you need to update content in reaction to something else happening in the experience, you could make a function to set the content, and then call the function from the appropriate event, something like this:

$scope.setHTML = function(labelid, html) {
    var labeldiv = document.querySelector("*[widget-id='" + labelid + "'] div");
    labeldiv.innerHTML = html;
}

[mneufeld]

Thanks @ClayHelberg, it works to some extent.

For Labels it is fine.

I also tried it with button. I used:

$scope.init = function() {
var buttonText = document.querySelector("*[widget-id='button-7'] button");
buttonText.innerHTML = "H₂SO₄";
}

and I use:

angular.element(document).ready($scope.init);

When I navigate to such view my button remains empty. When I navigate to next view and go back, it is in place.

I put additional: $timeout(function(){$scope.init();}, 800); and it helps. But i put 800 based on some tests... For 200 it still remains empty, so it does not seem to be stable solution. Any hint for that?

[ClayHelberg]

Hmm. My guess is that Angular is doing some kind of dynamic formatting on the button widget that interferes with replacing its content if you do it too early. I'm not sure I have any better ideas than adding the timeout as you've done.

[mziemniewicz]

Hello, I have copied your example code, set up everything as you wrote and I get Uncaught TypeError: Cannot set property 'innerHTML' of null in line with .innerHTML = ...

It looks like JS can't reach anything by var labeldiv = document.querySelector("*[widget-id='testLBL'] div"); query.

Is there any other way to set up HTML on 3D Label? Or just to point div of 3dLabel differently?

[ClayHelberg]

It's hard to say what might be going wrong in your experience. I did test the code and it worked in my test project.

It's possible that it's a timing issue, where the target div doesn't exist yet when the code executes. You could try either a) wrapping the init function in a $timeout with a delay of several seconds to ensure that the entire page has time to load and render before the code gets called; or b) you could leave out the last line (angular.element(...)), and instead add a temporary UI button to call the $scope.init function on click. Wait until everything loads, then click the button and see if the label content updates. If either of those works, then it's a timing issue, and you just need to make sure the code waits until everything is rendered before it tries to modify the content of the label.