Improvements to the face API: updating face.visible=false -->true

####1. Describe Your Issue

I’m finally getting around to documenting the face api issues I encountered in particular since there has been some recent posts about dom manipulation of Jibo’s face.
Please see my simple git example at facetest

The issue : After setting _face.visible=false,_and then back to “true” again, I need to reset the dirty flags and perform a face update. Currenlty it is simple to hide the face element by manipulating the dom, I expected it to also to be as simple using the face API.

The example above works fine, however, it is easy to tweak to show how it can fail.

The numbering corresponds to my commented behaviors in the git example.

1a) ExecuteScript: jibo.face.visible = false;
(or possible to set face.eye.visible as well)

1b) PlayAnimation: Now I play an animation without a face as expected.

1c) ExecuteScript: jibo.face.visible = true;
Originally, I expected to see the face with eye again, but it remained black.
Note: I did not overwrite the eye as done in the 21-take photo example - so I didn’t expect to handle the “dirty” flags and do a face update.

To get the face back, I had to either run a new animation after setting visible=true (label #2 see the last bt in my example) ; if no animimation followed, no face .(
or execute (#1d script) the following code again after setting jibo.face.visible = true;

1d) execute script

//redraw each frame
jibo.face.renderOnlyWhenDirty = false;
//force draw
jibo.face.update();
//render only when dof values change
jibo.face.renderOnlyWhenDirty = true;

As said, the test skill works.
So, try to “skip” bt #1d that runs the code (dirty flags, face update) --> result: no face
Then “unskip” the last playanimation (currently skiped) – result : face appears with running #1d

I stayed with the dom manipulation of the face using jquery rather than fuss with the face API - I expected the face API to evolve. However, it would be good to either document this or … provide a fix or helper function to handle how we reset the face visiblity - as you best see fit.

thanks for listening :wink:
Bob

2 Likes

Hey @bmulreni!

Awesome and thorough work! I made the team aware of this issue with the jibo.face.visible and we will make sure to implement a fix for this in future releases of the SDK. In the meantime, you are currently using the best work-arounds at the moment:

ExecuteScript (also included here in our text tutorial, How to take a photo and display it on Jibo’s screen)

() => {}
  //remove the image from the screen
  jibo.face.stage.removeChild(notepad.photo);

  //force draw
  jibo.face.update();

  //render only when dof values are dirty
  jibo.face.renderOnlyWhenDirty = true;
}

.keys animation – such as the zero.keys animation file from our sample code (https://github.com/jiborobot/sample-code) zero.keys (8.9 KB) or with a neutral .key animation file such as this 1 frame reset animation default.keys (4.0 KB)

2 Likes

Thanks @joe.t for referencing the the other key files - these would be a an easy fix and simple to remove later.

Yes…I used the photo example (text tutorial and same code) to learn a bit more - very helpful!

Currently, I know that the stage only accepts pixijs objects. - error with adding html objects.
I know we can do alot with pixijs including user interaction (touch). My only concern is the the staged face objects can be made invisible but also paused (conserve resources). For example, the pixijs based eye (idle animation) or… a pixijs based game loaded by the skill. Perhaps we need an additional method to pause the face animation or that is done automatically by visible=false. Then the developer can unhide their dom element and so forth. I assume you are pausing the underlying face animation when visible=false or not? Though it would be good to have control over whether the animation or game is paused.

So I’m thinking about what the “visible” face flag means ? Not visible - yes, Does it also mean that the underlying processes relating to the animation are paused or stopped?

@bmulreni jibo.face.visible will only impact the visibility of the face animation and the process will still be executing in the background. If you have an animation that has both face and body animations, the face animations will be hidden and the body will continue animating.

If you are looking to pause the face animation, we do have a separate jibo.face.paused API for pausing.

Oh right! thanks …I mixed things up;) Now it masks sense - pause and hide.

Just another quick note. After setting visibility to false, the face DOM element is not hidden.
Before making a separate skill dom element visible, I hide the face using jquery for example. So, the face animation or eye is invisible, but the dom element (black) can partially block a skill dom element that was made visible.
Hope that helps.

Hey @bmulreni,

Hidden DOM elements will still take up space and this is done to preserve the canvas and WebGL context. You may noticed using the dev tools the other elements you add are displayed below the face div element. I recommend using adjusting CSS to set position: absolute; and z-index: ;. This will create a stacking order so other skill DOM elements are displayed above the face div element and the black background.

If you use CSS to set display: none; on the face div element, it can affect the canvas element and WebGL context, which can cause problems redisplaying Jibo’s face.

@joe.t
Thanks, I must look at this. I did experience some problems as you described when directly applying CSS display: none. My use of jquery fadeOut() or hide() seemed ok, however, I’ll have to pay more attention.

So to be clear, you would also advise not to use these jquery functions on the face element?
…I think the jquery functions e.g. fadeOut(), hide() do apply > display:none

This is an important topic obviously for your release documentation.
Thanks again.

@bmulreni

jQuery hide() does restore display values after being used (explanation here), so this should be ok.

fadeOut() will set display: none after reducing opacity to 0, so an alternate solution posted here is to use fadeTo(). You can use this callback for the function to set things like position: absolute; and z-index

1 Like