UI in a UI

This is a "hacked-up" WebGui service ui with an embedded Runtime ui.  It worky !
MaVo did most of the framework for putting together the current AngularJS.  I just suggested some designs, and he coded it up.  Only now am I starting to understand how it all works (or at least beginning to understand).

It's taken a while to figure out how to do this, but it should be helpful whenever we want to show "parts" or pieces, or full UIs from one service inside another. Composite services like InMoov2 should benefit.  

I still have work to do to figure out the best way to hide or show parts and pieces of the embedded UIs, but this is progress !

Here is an example.  The WebKitSpeechRecognition has a lot of logic on wether its mute or not, I would had to see the code replicated again to show this button ...  that would be a mess, and very difficult to maintain.
Instead it "will be" the WebKitSpeechRecognition actual button showing the "actual" state of being stopped or recording.  Additionally, any improvement or fix to WebKitSpeechRecognition automagically fixes this button, because they are the same, same goes for the dropdown.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
hairygael's picture

Wow that sounds like

Wow that sounds like magic!

The fact that we can use just a piece of the original UI and it still communicates wth the original UI.

Also it sounds good that fixing the original, fixes the piece used somewhere else.

hairygael's picture

Hello Grog, Is this already

Hello Grog,

Is this already implemented somewhere in the .js ?

Can I already start working with it?

I noticed that now when I start a InMoov service, the main UI disappears to give a blank page, I am guessing it's related to this update and if possible I would like to make the links between InMoov UI's.


GroG's picture

Hi Gael, It's not optimal,

Hi Gael,
It's not optimal, there are some problems with it, but I can show you how to get a UI in UI with the understanding that it will probably need to be refactored.

in the js file these 2 lines need to be added near the top :

    $scope.mrl = mrl
    $scope.panel = mrl.getPanel('runtime')
in the html file this is needed where you want it in the page .. you can add ng-show=true/false variable when you want it turned on or off
<div class="tab-content" service-body panel="mrl.getPanel('runtime')"></div>
one of the biggest problems is the panel part .. can only be one panel, so you can only include one service
I'll be looking into how to solve this issue.
previously this did not work at all, then I got it to work with a whole bunch of code, now it doesn't take too much, but I want to simplify it further, and make it so it supports more than one sub-ui
hairygael's picture

Thanks a lot, I will test it

Thanks a lot, I will test it now.

Can you call another service like this:

<div class="tab-content" service-body panel="mrl.getPanel('i01.rightHand.wrist')"></div>

Edit update: ok I just tested and it works great!

I have a question is it possible to use this also to travel from main UI to a sub-UI ?


GroG's picture

Can you call another service

Can you call another service like this:

<div class="tab-content" service-body panel="mrl.getPanel('i01.rightHand.wrist')"></div>

yes you need to change the js part that does this $scope.panel = mrl.getPanel('i01.rightHand.wrist')

I have a question is it possible to use this also to travel from main UI to a sub-UI ? 

there was .. but it never worked well .. I can see that this is very important .. .I'll look into it

hairygael's picture

hello Grog, You wrote in the

hello Grog,

You wrote in the shoutbox that you implemented UI to UI using: ng-click="changeTab(name)"

So if I make write this below it should work:

<a  ng-click="changeTab('i01')">Back</a>

GroG's picture

Initially the method was only

Initially the method was only available in nav.html ... but now its available anywhere

The syntax is :

<button ng-click="mrl.changeTab('runtime')">runtime</button>

where ng-click can be put into almost any element (link, button, div, etc...)

Yes, any name can be put into the function, however, hardcoded text is not preferred.  'runtime' and 'security' are the only two services that are guarenteed to have those names.

Preferred to peers would be <a ng-click="changeTab(service.name + '.leftHand')">Left Hand</a>

This means InMoov2 could be "bob" and the link would still work ;)

I understand this doesn't work for 

<a  ng-click="mrl.changeTab('i01')">Back</a>

because peers don't have references to their parents.  (Hmm, that would be useful)

Go ahead and do it, I'll fix it later.

mrl.changeTab is in pr 

hairygael's picture

Without arefresh of the

Without arefresh of the browser or manually resizing the browser page the sliders are going outside the UI.

And slider buttons are all stucked/collapsed on the left side. We also have an issue because the buttons are for the input mappings which is not what we want for configuration. Inmput mappings are default (although we should have an advanced access to change them if necessary.

We want the output mappings for user to configure their robots servos.