Merge pull request #30 from ESA-PhiLab/persistent-mask-visibility

Persistent mask visibility

Author: aliFrancis

iris/segmentation/static/javascripts/segmentation.js

@@ -51,7 +51,7 @@ let commands = {
         "key": "A",
         "description": "Use the AI to help you filling out the mask"
     },
-    "toogle_mask": {
+    "toggle_mask": {
         "key": "Space",
         "description": "Toggle mask on/off"
     },
@@ -100,7 +100,7 @@ let commands = {
     },
     "show_view_controls": {
         "key": "V",
-        "description":"Toogle display of view controls on/off"
+        "description":"Toggle display of view controls on/off"
     },
     "next_view_group": {
         "key": "B",
@@ -269,7 +269,7 @@ function key_down(event){
     } else if (key == "KeyN"){
         dialogue_reset_mask();
     } else if (key == "KeyV"){
-        vars.vm.toogleControls();
+        vars.vm.toggleControls();
     } else if (key == "KeyB"){
         vars.vm.showNextGroup();
     } else if (event.shiftKey){
@@ -898,9 +898,9 @@ function show_mask(visible){
     }
 
     if (vars.show_mask){
-        get_object("tb_toogle_mask").classList.add("checked");
+        get_object("tb_toggle_mask").classList.add("checked");
     } else {
-        get_object("tb_toogle_mask").classList.remove("checked");
+        get_object("tb_toggle_mask").classList.remove("checked");
     }
 }
 

iris/segmentation/templates/segmentation.html

@@ -110,7 +110,7 @@
             <img src={{url_for('segmentation.static', filename='icons/ai.png')}} class="icon" />
         </li>
         <li class="toolbar_separator"></li>
-        <li class="toolbutton icon_button" id='tb_toogle_mask' onclick="show_mask(!vars.show_mask);">
+        <li class="toolbutton icon_button" id='tb_toggle_mask' onclick="show_mask(!vars.show_mask);">
             <img src={{url_for('segmentation.static', filename='icons/show_mask.png')}} class="icon" />
         </li>
         <li class="toolbutton icon_button" id='tb_mask_final' onclick="set_mask_type('final');">

iris/static/javascripts/utils.js

@@ -220,7 +220,7 @@ function open_tab(tab_button, tabs_class, tab_id) {
     tab_button.classList.add("checked");
 }
 
-function toogle_display(button) {
+function toggle_display(button) {
     /* Toggle between adding and removing the "active" class,
     to highlight the button that controls the panel */
     button.classList.toggle("checked");

iris/static/javascripts/views.js

@@ -210,7 +210,7 @@ class ViewManager{
         }
         this.show_controls = show;
     }
-    toogleControls(){
+    toggleControls(){
         this.showControls(!vars.vm.show_controls);
     }
 }
@@ -419,6 +419,9 @@ class RGBLayer extends CanvasLayer{
         ctx.drawImage(
             image, 0, 0, image.width, image.height
         );
+
+        // Set mask visibility based on current vars.show_mask
+        show_mask(vars.show_mask);
     }
 }
 

iris/user/templates/user/config.html

@@ -4,7 +4,7 @@
 </div>
 
 <div id='config-segmentation-ai' class='iris-tabs-config tabcontent' style='display: block;'>
-    <div class="accordion checked" onclick="toogle_display(this);">Model Parameters</div>
+    <div class="accordion checked" onclick="toggle_display(this);">Model Parameters</div>
     <div class="panel" style="display: block;">
         <table>
             <tr>
@@ -77,7 +77,7 @@
             </tr>
         </table>
     </div>
-    <div class="accordion checked" onclick="toogle_display(this);">Model Inputs</div>
+    <div class="accordion checked" onclick="toggle_display(this);">Model Inputs</div>
     <div class="panel" style="display: block;">
         <table>
             <tr>
@@ -139,7 +139,7 @@
             </tr>
         </table>
     </div>
-    <div class="accordion checked" onclick="toogle_display(this);">Postprocessing</div>
+    <div class="accordion checked" onclick="toggle_display(this);">Postprocessing</div>
     <div class="panel" style="display: block;">
         <table>
             <tr>

iris/user/templates/user/show.html

@@ -22,7 +22,7 @@ <h2 style="margin-bottom: -20px;">{{user.name}}<h2>
         <span class="tag red">not tested</span>
     {% endif %}
     <p></p>
-    <div class="accordion checked" onclick="toogle_display(this);">Segmentation</div>
+    <div class="accordion checked" onclick="toggle_display(this);">Segmentation</div>
     <div class="panel" style="display: block;">
         <h3>Stats</h3>
         <table style="width:40%">