Jibo his Eye disappears and white screen remains after document.write command to show text on screen

As a basis we are using the LookAway-master from The Web Pro for Jibo to move around, which is working fine.
The issue we have is that a ‘document.write’ command to Jibo is showing the necessary information on the screen, however, after the skill finished the ‘eye’ and other programmed animations do not appear anymore on the screen and a white screen remains.
I’m quite sure the issue is with the document.write as the moment I skip this particular script everything is working fine.

The document.write is on line 12. Run the skill and then:
1: enter “hey jibo”
2: enter e.g. “yes”
Then the message appears on screen (but should be removed after a short break line 13).
So basically the issue is shown on the screen (and could also be added to any skill).

Skip line 12 fully or remove the document.write , than the skill works fine

main.bt (9.8 KB)

When you’re using document.write, you’re actually replacing the current document (jibo’s eye) with your new document with the content you specify.

What you should do instead is add to the current document instead of replacing it. Here’s code that will take the same content and place it just above the eye:

var myReturns= "<br>"+"<br>"+"<br>"+"<br>"+"<br>";
var myTXT= "Some text here on screen";
      
var textToDisplay = myReturns.fontsize(50)+myTXT.fontcolor("green").fontsize(50).italics().bold();
      
// Create a new element for this content
var myDiv = document.createElement('div');
myDiv.setAttribute("id","div1");
      
// Insert the content on "top" of Jibo's eye
var jiboFace = document.getElementById("face"); // replace "face" with "eye" for earlier index.html versions
document.body.insertBefore(myDiv, jiboFace); 
document.getElementById("div1").innerHTML = textToDisplay;

Now, this probably isn’t exactly what you’re looking for because the end result pushes down the eye with your content on top, but you could just hide the eye temporarily after inserting the new content.

1 Like

Thank you @michael for this support ! It worked indeed to move the Eye down and show the text above the Eye.
With document.body.style.backgroundColor = “black”; I managed to make the background black which looks better.
Bringing the Eye back in normal position is the new challenge now.

To remove the new content you added and bring the eye back to “normal”, you could just remove the DIV element you added:

var myDiv = document.getElementById("div1");
if(myDiv){ myDiv.parentNode.removeChild(myDiv); }

By the way, you should give jQuery a try if you haven’t already. It makes it super easy to manage DOM elements and works just fine with Jibo via the jQuery node package: npm install jquery.

Using jQuery, you could do all of the same things listed here with much less code. I use it in my simpleTimer skill to show/hide the timer over Jibo’s eye…you can study that skill to see how it works since you’re likely trying to do the very same thing.

1 Like

Great tips for the Jibo community. Thanks a lot @michael! Started working with some Jquery earlier also… Many roads leading to the perfect Jibo. :wink:

1 Like