If you install the latest InMoov2, you should be able to see the Arm UI with the buttons.
After looking at what you can do with CSS, I wonder if I should keep making the buttons with all their options and glowing or if I wait until Grog might integrate those functions.
Ok. What do you think about this?
Simplify the names of buttons for the user's view.
It is already known that this is the sensor screen, I think it is redundant to see the word "sensor" 12 times. And seeing at the top says "Left Hand sensor" I think it is also redundant that it is "left" and "right" in all the fingers.
Again, I don't want to interfere with your design. Take it as an opinion or suggestion, I don't want to look like an annoying person asking for changes and maybe my way of writing in English is misinterpreted.
I'm just seeing it from the outside as one more user, trying to understand the functionality of the UI, its usability and if it is user friendly. If I can help you with something, I will do it with pleasure.
You can do a little red dot and animated the glow in CSS easily.
If you install the latest InMoov2, you should be able to see the Arm UI with the buttons.
Great, I'll try it tonight.
I wonder if I should keep making the buttons with all their options and glowing or if I wait until Grog might integrate those functions.
I would not do anything with glow, or active, disabled color, everything can be done with CSS and change at ease quickly .Well, not everything, but I think it would serve the purposes all that can be achieved.
Just make the normal state button. Unless you want something that cannot be done with CSS filters such as a completely different image like an open and closed eye.
I already made the dots with the location, you can easily change the colors and effects in the code.Having the styles separated in a file for example inmoovui.css you could change them without having to ask Grog to do it, once it is implemented.
For example I have seen a strange behavior in the interface last night, when I press the buttons, there are times when the ghost of another button appears for a second and then changes to the correct image, and I also saw the inMoov figure appear on the Brain buttonfor example and then change to the right one, with CSS that never happened to me. It is much simpler.Grog doesn't need to put anything to change the images with mouseover mouseout, everything is handled by CSS.Grog would only update the style of the button on the click to leave it active.The code is simplified a bit.
Let's give Grog time to do his magic with programming priorities and then he can see the code for this.I can continue to help you with the screens in the meantime if you want.
I have already done the DOTS for the sensors.Grog just has to correct the position a bit because I did it on the example image you made.
Look at the source code and you will see how simple it is to change colors and effects in styles. I tried to get the same glow effect that you have on the "leftHand sensor" button but I didn't achieve the same intensity in "CSS Buttons".That's the closest I could get.
If in the future there is the intention that it may be in another language, it should be this way it seems to me.But I don't know if it's complicating things now.
Below is an image of your button with the glow in CSS.
If you decide that the image should be the way to go, it is better not to have the glow and add it in CSS for the simplicity and functionality of the code as I mentioned before with the "hover" of CSS vs mouseover event.
We would have to wait for Grog to have time to see the code.
You can try the Chrome inspector to change the colors.
Another advantage of using buttons with CSS is that pixelization does not occur when resizing.
I got a big list of stuff to complete, its great to see you both forge ahead.
I'll try to add a code-Fu point of view :
I agree with Astro .. when its possible use text & css - it makes the UI more clean and extensible
Please try to keep in mind that myrobotlab is a collection of "services" - and that is the general "lego block". This concept can help you. For example, avoid designing ui graphics for 2 hands - we don't have a service of 2 hands. We have 1 Hand service InMoov2Hand ... Perhaps I can figure out a way to import the entire InMoov2Hand UI or parts of it somewhere else or even 2 of them .. but the basic building blocks are always going to be services. Same goes for Arms. Each service type potentially gets its own UI. This has lots of potential if you use it.
Found the root cause of the 1000+ errors ... it was in the InMoov2Gui.html controller code - the uib-typeaheads were generating all the errors
<div class="form-group">
<label for="port">port</label>
<input class="form-control ng-pristine ng-valid ng-empty ng-touched" type="text" id="port" ng-model="portName" ng-readonly="isConnected" uib-typeahead="portName for portName in possiblePorts | filter:$viewValue" typeahead-min-length="0" title="Serial port to connect to -
clicking on this box should show a list of possible ports.
Typically Windows list serial ports as COM1,COM2 etc and Linux or Mac will have /dev/ttyS1 .. etc
You may create a virtual port just by typing some arbitrary name and making sure the service is in virtual mode, then pressing the connect button"
I removed the offending parts and pushed a little more cleanup
Where/How should the controller panels be activated ?
avoid designing ui graphics for 2 hands - we don't have a service of 2 hands. We have 1 Hand service
Graphically speaking.
You mean that we should avoid doing both hands on the same screen? or that we should avoid making a screen for each hand separately because is 1 Hand service, therefore the same for both?
Perhaps.
I'm saying there already is a binding between a "service type" and a "ui" - and if possible we should take advantage of it.
Programmatically, your left & right hand are identical. They are 2 instances of a single service type. So, I would recommend designing and working on a generalized InMoov2Hand UI before designing a left and right one. In the code left and right is just a single attribute.
You get the InMoov2HandGui.js InMoov2HandGui.html UI for "free" and there is a possibility I can re use it as modular block or view in another ui (or view 2 instances of it ... a left one and a right one)
I never did HTML before so this was coded mainly to give an intention of how the GUI should be set.
For example the Neopixel has many buttons and options but none of them are connected yet. Same thing withth controllers PIR and Ultrasonic.
@Astro, I have been sleeping over the design of the hand UI and will modify it, I think I know now what to do for to get the side panel. Each finger will have a button linking to a setting for the servo and the sensor. Therefore I can remove the redundant "left" "right" "sensor".
I will also invert the hands image upside down with the buttons behing under instead of above, this way the "right hand" will display on the same side of the image than the image of the arms.
I am totally fine with the idea of making the buttons in CSS, it's just I am much more able to achieve the design I want with Photoshop than with CSS, which I never used before. As long as you can follow and recreate the same design as I provide with the CSS codes, it's great with me.
I also prefer photoshop, I am just learning this from CSS "filters" that I have never used to apply it in this interface.It bothered me that we couldn't achieve good results with the glow in PNGs without interfering with the other buttons.So it costs me a bit to achieve the same results as in photoshop. I found that they can be applied several times for example text-shadow, drop-shadow and box-shadow depending on whether it is text, PNG or a DIV and so I was able to achieve something quite similar that I thought could not be done. I prefer 100% images, it is easier, but I think it is worth the effort to do it in CSS.
I was looking for how to make a button change the style of another div (sensor dots) just with CSS and learned other things. And another thing I didn't know was the possibility of style animations.
You are giving me new challenges and I am learning new techniques.:)
you are able to reproduce the same effects, that's cool. I think you got a little confused with the finger names though, ahaha!
I looked at the CSS code and I see where you worked on the dot glow effect and I kinda a start to understand how things are working. but it would have taken me weeks to achieve what you did in a few hours.
How do you easily define an absolute position? I have been doing it manually and took me ages when I was setting the glowing img body parts.
Is there a way with the mouse to point to get an absolute position or something?
The only thing that worries me with creating all the content with code is on the long term. So many sites get out of function after a few years because codes have changed and are no longer viable in a browser.
With the old swingui, I have not been worried about that because once it is installed, it always works no worry if stuff around are updating (until a certain limit of course)
When I see all the flash contents that as been created and is slowly getting out of date...
text-shadow:
This for glow of text like your menu of the sensors
And there I discovered that you can add various shadows to achieve the glow you wanted.
Text menu
The tricky part was figuring out how to make the texts align to the vertical lines of the sensors and extend the text outward.
I did it using text-align but the important thing was to position the div from the left and the others from the right. So those in "Right hand" use the property left: xxx and "Left hand" use right: xxx. At first I used all from left and there was no way to automatically align the texts if they changed. That took me a long time to figure out the way. That's why I put those crazy names for you to see that it works with words of different length. Thinking about usability if it will be used in the future for multiple languages.
How Surely it can be done with some program like Adobe Dreamweaver, but I am sure it puts unnecessary code so I did not even want to install it for this and I wanted to make it as simple as possible so that it is useful to Grog without wasting time cleaning code.
This is how I do it. First I put a div with "Red Beer" with class
In CSS file, I put the class with for example
left:100 px;
top:100px;
I save it and open it in Chrome.
Press F12 to open the developer panel.
Using the arrow I select the element that I want to move.
I save the file and F5 to see if everything looks good.And I start again with another element.
Works for me.
The only thing that worries me with creating all the content with code is on the long term... When I see all the flash contents that as been created and is slowly getting out of date...
Yes, it's a shame about Flash, but it was proprietary code.Nothing could replace what Flash could do. CSS and HTML are open standards we will not have that problem I suppose.There are some properties that are obsolete, but browsers continue rendering to maintain backward compatibility.In the worst case, that at some point the filters are no longer supported by Chrome, for example "Thumb" will be seen without a glow effect.But it does not mean that the interface will stop working, it could only look different. In that case working with PNG would be an advantage.
Late last night I followed your steps and have been able to reproduce what you did.
I am wondering how to implement when a button is clicked that it changes to the red and glowing state, but I think once I have a bit more time to dig in, I should find out.
you have to know which is currently active id (leftPinkyButton) to be able to deactivate it when clicking on another button, I don't know how you can pass that information on the angular click.
Or maybe it's easier something like looping through all the buttons with a "for next" and an "if" that compares if it's the clicked button, then that puts "sensorButtonsActive " and "dotActive" and if it's not put "sensorButtons" and "dotEnabled ". That way you should pass the information about which was clicked "leftWristButton" instead of which was the previous Active. Something like onclick(leftWristButton).
For English it is perfect. Do not forget that if the texts ever change, an image next to it can be overlapped.
I don't know if you guys noticed it, but instead of a simple blink effect, I wanted it to be more like a heartbeat, so the effect of the DOTS actually has two different blink effects, 1 second outer red and 1 second inner white.That gives a low heart rate, reflecting calm.It is a very small detail, but I think now that you know it, you will see it with a more emotional touch, haha :)
@Astro, yes you are correct about fix arrows images.
I modified that to be more adaptable with CSS. Although changing names would be confusing somehow, because every part in mrl are called and relates under those names, most of them are hardcoded into JMonkey virtual InMoov and InMoov.java
Here are the 4 sub-interfaces which correspond to the 4 buttons on the main InMoov GUI:
Yes, I understand perfectly that internally the programming code has those names and camelCase. I am seeing the graphic interface as an abstraction that is closer to the user who may not know internally how it is everything programmed. Precisely an interface acts as an intermediary between the user and the programming.
I have no problem with this names. I have used MRL since the Kraken version. I only think about usability in this case, if in the future this can be in another language and the graphic interface can help, for example, a Japanese understand that the dot on the forehead is to turn the head. I'm just saying it for you to consider, if arrows or any other images can be located with css, like you did, is better.
He is getting a very professional cool looking, good job.
I didn't know that immoov could have 2 ultrasound meters. It would be great if he could detect at any moment if someone gets too close and watch him detecting his face on that side and tell him:
Great Gael! We are seeing
Great Gael!
We are seeing big and quick progress in myrobotlab.
Are the finger's text, buttons? or the fingers?
Hello Astro, The text are the
Hello Astro,
The text are the buttons, but they also activate a redBlink where there is the little circles at the finger tips.
It also opens a side panel to configure each sensor.
The top rectangles are the buttons to Activate the hand sensor. for example: "leftHand sensor isActivated"
https://github.com/MyRobotLab/InMoov2/blob/master/resource/WebGui/app/img/InMoov2/redBlink_Activ.png
If you install the latest InMoov2, you should be able to see the Arm UI with the buttons.
After looking at what you can do with CSS, I wonder if I should keep making the buttons with all their options and glowing or if I wait until Grog might integrate those functions.
Hello Gael,The text are the
Hello Gael,
The text are the buttons.
Ok. What do you think about this?
Simplify the names of buttons for the user's view.
It is already known that this is the sensor screen, I think it is redundant to see the word "sensor" 12 times. And seeing at the top says "Left Hand sensor" I think it is also redundant that it is "left" and "right" in all the fingers.
Again, I don't want to interfere with your design. Take it as an opinion or suggestion, I don't want to look like an annoying person asking for changes and maybe my way of writing in English is misinterpreted.
I'm just seeing it from the outside as one more user, trying to understand the functionality of the UI, its usability and if it is user friendly. If I can help you with something, I will do it with pleasure.
You can do a little red dot and animated the glow in CSS easily.
If you install the latest InMoov2, you should be able to see the Arm UI with the buttons.
Great, I'll try it tonight.
I wonder if I should keep making the buttons with all their options and glowing or if I wait until Grog might integrate those functions.
I would not do anything with glow, or active, disabled color, everything can be done with CSS and change at ease quickly .Well, not everything, but I think it would serve the purposes all that can be achieved.
Just make the normal state button. Unless you want something that cannot be done with CSS filters such as a completely different image like an open and closed eye.
I already made the dots with the location, you can easily change the colors and effects in the code. Having the styles separated in a file for example inmoovui.css you could change them without having to ask Grog to do it, once it is implemented.
For example I have seen a strange behavior in the interface last night, when I press the buttons, there are times when the ghost of another button appears for a second and then changes to the correct image, and I also saw the inMoov figure appear on the Brain button for example and then change to the right one, with CSS that never happened to me. It is much simpler. Grog doesn't need to put anything to change the images with mouseover mouseout, everything is handled by CSS. Grog would only update the style of the button on the click to leave it active. The code is simplified a bit.
Let's give Grog time to do his magic with programming priorities and then he can see the code for this. I can continue to help you with the screens in the meantime if you want.
I have already done the DOTS for the sensors. Grog just has to correct the position a bit because I did it on the example image you made.
http://181.164.41.3/myrobotlab/hands_sensors_css.htm
Look at the source code and you will see how simple it is to change colors and effects in styles.
I tried to get the same glow effect that you have on the "leftHand sensor" button but I didn't achieve the same intensity in "CSS Buttons". That's the closest I could get.
If in the future there is the intention that it may be in another language, it should be this way it seems to me. But I don't know if it's complicating things now.
Below is an image of your button with the glow in CSS.
If you decide that the image should be the way to go, it is better not to have the glow and add it in CSS for the simplicity and functionality of the code as I mentioned before with the "hover" of CSS vs mouseover event.
We would have to wait for Grog to have time to see the code.
You can try the Chrome inspector to change the colors.
Another advantage of using buttons with CSS is that pixelization does not occur when resizing.
Awesome image Gael, Excellent
Awesome image Gael, Excellent post Astro.
I got a big list of stuff to complete, its great to see you both forge ahead.
I'll try to add a code-Fu point of view :
For example, avoid designing ui graphics for 2 hands - we don't have a service of 2 hands. We have 1 Hand service InMoov2Hand ... Perhaps I can figure out a way to import the entire InMoov2Hand UI or parts of it somewhere else or even 2 of them .. but the basic building blocks are always going to be services. Same goes for Arms. Each service type potentially gets its own UI. This has lots of potential if you use it.
After recent merges there are
After recent merges there are 1000+ errors in the console when InMoov2 web ui loads.
You can look at it by hitting F12 for dev tools in chrome and looking at the console tab.
I will need a little time to re-wire stuff :)
Found the root cause of the
Found the root cause of the 1000+ errors ... it was in the InMoov2Gui.html controller code - the uib-typeaheads were generating all the errors
I don't quite understand
I don't quite understand this.
avoid designing ui graphics for 2 hands - we don't have a service of 2 hands. We have 1 Hand service
Graphically speaking.
You mean that we should avoid doing both hands on the same screen?
or that we should avoid making a screen for each hand separately because is 1 Hand service, therefore the same for both?
Is this wrong?
Perhaps. I'm saying there
Perhaps.
I'm saying there already is a binding between a "service type" and a "ui" - and if possible we should take advantage of it.
Programmatically, your left & right hand are identical. They are 2 instances of a single service type. So, I would recommend designing and working on a generalized InMoov2Hand UI before designing a left and right one. In the code left and right is just a single attribute.
You get the InMoov2HandGui.js InMoov2HandGui.html UI for "free" and there is a possibility I can re use it as modular block or view in another ui (or view 2 instances of it ... a left one and a right one)
make sense ?
Verified checkin of fix
Verified checkin of fix auto-magically started the InMoov2 oven baking
Verified
java -jar myrobotlab.jar --install-dependency fr.inmoov inmoov2 latest zip
downloaded the latest InMoov2 dependencies ... goodtimes ....
@Grog, Oh yeah no doubt this
@Grog, Oh yeah no doubt this is making errors.
I never did HTML before so this was coded mainly to give an intention of how the GUI should be set.
For example the Neopixel has many buttons and options but none of them are connected yet. Same thing withth controllers PIR and Ultrasonic.
@Astro, I have been sleeping over the design of the hand UI and will modify it, I think I know now what to do for to get the side panel. Each finger will have a button linking to a setting for the servo and the sensor. Therefore I can remove the redundant "left" "right" "sensor".
I will also invert the hands image upside down with the buttons behing under instead of above, this way the "right hand" will display on the same side of the image than the image of the arms.
I am totally fine with the idea of making the buttons in CSS, it's just I am much more able to achieve the design I want with Photoshop than with CSS, which I never used before. As long as you can follow and recreate the same design as I provide with the CSS codes, it's great with me.
Modified Ui for the
Modified Ui for the hands.
The buttons here are only to show how they should be set in CSS.
You can find the image in https://github.com/MyRobotLab/InMoov2/tree/master/resource/WebGui/app/img/InMoov2
The top rectangles are not click buttons only indicators, but their border could turn light red, hen one of the finger button gets selected
I understand you GaelI also
I understand you Gael
I also prefer photoshop, I am just learning this from CSS "filters" that I have never used to apply it in this interface. It bothered me that we couldn't achieve good results with the glow in PNGs without interfering with the other buttons. So it costs me a bit to achieve the same results as in photoshop.
I found that they can be applied several times for example text-shadow, drop-shadow and box-shadow depending on whether it is text, PNG or a DIV and so I was able to achieve something quite similar that I thought could not be done.
I prefer 100% images, it is easier, but I think it is worth the effort to do it in CSS.
I was looking for how to make a button change the style of another div (sensor dots) just with CSS and learned other things.
And another thing I didn't know was the possibility of style animations.
You are giving me new challenges and I am learning new techniques. :)
http://181.164.41.3/myrobotlab/hands_sensors_css.htm
Nice! Great job! you are able
Nice! Great job!
you are able to reproduce the same effects, that's cool. I think you got a little confused with the finger names though, ahaha!
I looked at the CSS code and I see where you worked on the dot glow effect and I kinda a start to understand how things are working. but it would have taken me weeks to achieve what you did in a few hours.
How do you easily define an absolute position? I have been doing it manually and took me ages when I was setting the glowing img body parts.
Is there a way with the mouse to point to get an absolute position or something?
The only thing that worries me with creating all the content with code is on the long term. So many sites get out of function after a few years because codes have changed and are no longer viable in a browser.
With the old swingui, I have not been worried about that because once it is installed, it always works no worry if stuff around are updating (until a certain limit of course)
When I see all the flash contents that as been created and is slowly getting out of date...
Hello Gael, I was looking
Hello Gael,
I was looking and on this page you can find all the examples
https://www.w3schools.com/
This is to make the circles
https://www.w3schools.com/howto/howto_css_circles.asp
box-shadow
This for the glow of div element or images
https://www.w3schools.com/css/css3_shadows.asp
This for the internal gradient of the rectangular indicator "Right Hand"
https://www.w3schools.com/css/css3_gradients.asp
text-shadow:
This for glow of text like your menu of the sensors
And there I discovered that you can add various shadows to achieve the glow you wanted.
https://www.w3schools.com/howto/howto_css_glowing_text.asp
filter: drop-shadow
This is for transparent PNG like Brain button.
https://jsfiddle.net/siggysid/x6frwag5/
How to affect other elements when one element is hovered
https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered
Text menu
The tricky part was figuring out how to make the texts align to the vertical lines of the sensors and extend the text outward.
I did it using text-align but the important thing was to position the div from the left and the others from the right. So those in "Right hand" use the property left: xxx and "Left hand" use right: xxx. At first I used all from left and there was no way to automatically align the texts if they changed. That took me a long time to figure out the way. That's why I put those crazy names for you to see that it works with words of different length. Thinking about usability if it will be used in the future for multiple languages.
How
Surely it can be done with some program like Adobe Dreamweaver, but I am sure it puts unnecessary code so I did not even want to install it for this and I wanted to make it as simple as possible so that it is useful to Grog without wasting time cleaning code.
This is how I do it.
First I put a div with "Red Beer" with class
In CSS file, I put the class with for example
left:100 px;
top:100px;
I save it and open it in Chrome.
Press F12 to open the developer panel.
Using the arrow I select the element that I want to move.
I save the file and F5 to see if everything looks good. And I start again with another element.
The only thing that worries me with creating all the content with code is on the long term...
When I see all the flash contents that as been created and is slowly getting out of date...
Yes, it's a shame about Flash, but it was proprietary code. Nothing could replace what Flash could do.
CSS and HTML are open standards we will not have that problem I suppose. There are some properties that are obsolete, but browsers continue rendering to maintain backward compatibility. In the worst case, that at some point the filters are no longer supported by Chrome, for example "Thumb" will be seen without a glow effect. But it does not mean that the interface will stop working, it could only look different. In that case working with PNG would be an advantage.
Oh wow, great
Oh wow, great tutorial!
Thanks very much!
Late last night I followed your steps and have been able to reproduce what you did.
I am wondering how to implement when a button is clicked that it changes to the red and glowing state, but I think once I have a bit more time to dig in, I should find out.
Hi Gael, That must be done
Hi Gael,
That must be done with angular, but I do not know how it is done. I never used angular, I still didn't have time to see that.
Grog says you have to use something like this:
"In the angularjs 1.5 we are using, you can use ng-class to alter class."
The goal is to change everyone's class to normal state and put the active class int the button and the dot that was clicked on.
You have pinky active and want to click wrist
<div id="leftWristButton" class="sensorButtons leftSide preventDragSelect">Wrist</div>
<div id="leftWristSensor" class="dotEnabled preventDragSelect"></div>
<div id="leftPinkyButton" class="sensorButtonsActive leftSide preventDragSelect" googl="true">pinky</div>
<div id="leftPinkySensor" class="dotActive preventDragSelect"></div>
You click in wrist and you need to get this
<div id="leftWristButton" class="sensorButtonsActive leftSide preventDragSelect">Wrist</div>
<div id="leftWristSensor" class="dotActive preventDragSelect"></div>
<div id="leftPinkyButton" class="sensorButtons leftSide preventDragSelect" googl="true">pinky</div>
<div id="leftPinkySensor" class="dotEnabled preventDragSelect"></div>
you have to know which is currently active id (leftPinkyButton) to be able to deactivate it when clicking on another button, I don't know how you can pass that information on the angular click.
Or maybe it's easier something like looping through all the buttons with a "for next" and an "if" that compares if it's the clicked button, then that puts "sensorButtonsActive " and "dotActive" and if it's not put "sensorButtons" and "dotEnabled ". That way you should pass the information about which was clicked "leftWristButton" instead of which was the previous Active. Something like onclick(leftWristButton).
Great information Astro! I
Great information Astro!
I have done the InMoovHeadGui with CSS:
http://www.inmoov.fr/InMoovWebGui/css/InMoovHeadGui.html
Woow!!! Perfect! You got
Woow!!!
Perfect!
For English it is perfect.
Do not forget that if the texts ever change, an image next to it can be overlapped.
I don't know if you guys noticed it, but instead of a simple blink effect, I wanted it to be more like a heartbeat, so the effect of the DOTS actually has two different blink effects, 1 second outer red and 1 second inner white . That gives a low heart rate, reflecting calm. It is a very small detail, but I think now that you know it, you will see it with a more emotional touch,
haha :)
new hands
just wondering when the new hands come out so i dont have to reprint
Looks great ! I'm excited
Looks great !
I'm excited it was done with text too.
@Astro, yes you are correct
@Astro, yes you are correct about fix arrows images.
I modified that to be more adaptable with CSS. Although changing names would be confusing somehow, because every part in mrl are called and relates under those names, most of them are hardcoded into JMonkey virtual InMoov and InMoov.java
Here are the 4 sub-interfaces which correspond to the 4 buttons on the main InMoov GUI:
http://inmoov.fr/InMoovWebGui/css/InMoovArmGui.html
http://inmoov.fr/InMoovWebGui/css/InMoovHandGui.html
http://inmoov.fr/InMoovWebGui/css/InMoovHeadGui.html
http://inmoov.fr/InMoovWebGui/css/InMoovTorsoGui.html
http://inmoov.fr/InMoovWebGui/css/InMoovHandGui.html
http://inmoov.fr/InMoovWebGui/css/InMoovHeadGui.html
http://inmoov.fr/InMoovWebGui/css/InMoovTorsoGui.html
Hi Gael, Yes, I understand
Hi Gael,
Yes, I understand perfectly that internally the programming code has those names and camelCase. I am seeing the graphic interface as an abstraction that is closer to the user who may not know internally how it is everything programmed. Precisely an interface acts as an intermediary between the user and the programming.
I have no problem with this names. I have used MRL since the Kraken version. I only think about usability in this case, if in the future this can be in another language and the graphic interface can help, for example, a Japanese understand that the dot on the forehead is to turn the head.
I'm just saying it for you to consider, if arrows or any other images can be located with css, like you did, is better.
He is getting a very professional cool looking, good job.
I didn't know that immoov could have 2 ultrasound meters. It would be great if he could detect at any moment if someone gets too close and watch him detecting his face on that side and tell him: