Merge pull request #27 from ESA-PhiLab/extend-help-menu

Extend help menu

Author: aliFrancis

.gitignore

@@ -123,3 +123,6 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+# Our stuff
+/projects/

TODO.md

@@ -3,7 +3,7 @@
 ### Bugs (please suggest more if found)
 
 - [ ] Time spent is not logged or reported
-- [ ] Contrast/Inversion buttons toggle on but do not toggle off via mouseclick
+- [x] Contrast/Inversion buttons toggle on but do not toggle off via mouseclick
 - [x] User "admin" can revoke their admin status, this should not be possible
 - [x] Prompt to create password for user "admin" accepts blank strings, making it impossible to then log in
 

demo/cloud-segmentation.json

@@ -38,16 +38,11 @@
       "name": "Cloud Shadows",
       "description": "All pixels contaminated by cloud shadows (not terrain shadows).",
       "colour": [255, 0, 0, 70]
-    },
-    {
-      "name": "No data",
-      "description": "Reserved for no data pixels, e.g. pixels outside of the satellite's swath.",
-      "colour": [50, 50, 255, 70]
     }
   ],
   "views": {
       "Cirrus": {
-          "description": "Cirrus and high clouds are red.",
+          "description": "Cirrus band. High clouds are often picked up as red.",
           "type": "image",
           "data": "$Sentinel2.B11**0.8*5",
           "cmap": "jet"
@@ -65,7 +60,7 @@
           "clip": "1"
       },
       "NRGB": {
-          "description": "Near-Infrared RGB image.",
+          "description": "Near-Infrared+GB image.",
           "type": "image",
           "data": ["$Sentinel2.B5*1.5", "$Sentinel2.B3*1.5", "$Sentinel2.B2*1.5"]
       },
@@ -97,7 +92,7 @@
       }
   },
   "view_groups": {
-      "default": ["Cirrus", "RGB", "Snow"],
+      "default": ["RGB", "Snow", "Cirrus"],
       "radar": ["Sentinel-1"]
   }
 }

iris/help/__init__.py

@@ -17,6 +17,4 @@ def index():
     return flask.render_template(
         'help.html',
         hotkeys=data.get('hotkeys', False),
-        page=data.get('page', False),
-        page_content=flask.Markup(flask.render_template(data['page_content']))
     )

iris/help/templates/help.html

@@ -323,8 +323,8 @@ def predict_mask(image_id):
 
     # Select only the masking area:
     mask_area = (
-        slice(config['mask_area'][0], config['mask_area'][2]),
         slice(config['mask_area'][1], config['mask_area'][3]),
+        slice(config['mask_area'][0], config['mask_area'][2]),
         slice(None, None, None)
     )
     mask_size = config['mask_shape'][0] * config['mask_shape'][1]

iris/segmentation/__init__.py

@@ -4,82 +4,107 @@ reasons, i.e. array_2d[y][x] is going to be array_1d[y*row_length+x]*/
 
 let commands = {
     "previous_image": {
-        "key": "Backspace", "description": "Save this image and open previous one",
+        "key": "Backspace",
+        "description": "Save this image and open previous one"
     },
     "next_image": {
-        "key": "Return", "description": "Save this image and open next one",
+        "key": "Return",
+        "description": "Save this image and open next one"
     },
     "save_mask": {
-        "key": "S", "description": "Save this mask",
+        "key": "S",
+        "description": "Save this mask"
     },
     "undo": {
-        "key": "U", "description": "Undo last modification",
+        "key": "U",
+        "description": "Undo last modification"
     },
     "redo": {
-        "key": "R", "description": "Redo modification",
+        "key": "R",
+        "description": "Redo modification"
     },
-    'select_class': {
-        "key": "1 .. 9", "description": "Select class for drawing",
+    "select_class": {
+        "key": "1 .. 9",
+        "description": "Select class for drawing"
     },
-    'tool_move': {
-        "key": "W", "description": "Pan your current view by dragging and moving the cursor",
+    "tool_move": {
+        "key": "W",
+        "description": "Pan your current view by dragging and moving the cursor"
     },
-    'tool_reset_views': {
-        "key": "Z", "description": "Reset the view in the canvases",
+    "tool_reset_views": {
+        "key": "Z",
+        "description": "Reset the view in the canvases"
     },
-    'tool_draw': {
-        "key": "D", "description": "Draw pixels on the mask",
+    "tool_draw": {
+        "key": "D",
+        "description": "Draw pixels on the mask"
     },
-    'tool_eraser': {
-        "key": "E", "description": "Erase previously drawn pixels",
+    "tool_eraser": {
+        "key": "E",
+        "description": "Erase previously drawn pixels"
     },
     "reset_mask": {
-        "key": "N", "description": "Clear the whole mask",
+        "key": "N",
+        "description": "Clear the whole mask"
     },
     "predict_mask": {
-        "key": "A", "description": "Use the AI to help you filling out the mask",
+        "key": "A",
+        "description": "Use the AI to help you filling out the mask"
     },
     "toogle_mask": {
-        "key": "Space", "description": "Toggle mask on/off",
+        "key": "Space",
+        "description": "Toggle mask on/off"
     },
     "mask_final": {
-        "key": "F", "description": "Show the final mask combined from your pixels and the predictions by the AI",
+        "key": "F",
+        "description": "Show the final mask combined from your pixels and the predictions by the AI"
     },
     "mask_user": {
-        "key": "G", "description": "Show your drawn pixels only",
+        "key": "G",
+        "description": "Show your drawn pixels only"
     },
     "mask_errors": {
-        "key": "H", "description": "Show where the AI failed to predict correctly",
+        "key": "H",
+        "description": "Show where the AI failed to predict correctly"
     },
     // "mask_highlight_edges": {
     //     "key": "B", "description": "Highlight edges on the masks",
     // },
     "toggle_contrast": {
-        "key": "C", "description": "Toggle contrast on/off",
+        "key": "C", 
+        "description": "Toggle contrast on/off"
     },
     "toggle_invert": {
-        "key": "I", "description": "Toggle inversion on/off",
+        "key": "I", 
+        "description": "Toggle inversion on/off"
     },
     "brightness_up": {
-        "key": "Arrow-Up", "description": "Increase brightness (+10%)",
+        "key": "Arrow-Up", 
+        "description": "Increase brightness (+10%)"
     },
     "brightness_down": {
-        "key": "Arrow-Down", "description": "Decrease brightness (-10%)",
+        "key": "Arrow-Down", 
+        "description": "Decrease brightness (-10%)"
     },
     "saturation_up": {
-        "key": "Arrow-Right", "description": "Increase saturation (+50%)",
+        "key": "Arrow-Right",
+        "description": "Increase saturation (+50%)"
     },
     "saturation_down": {
-        "key": "Arrow-Left", "description": "Decrease saturation (-50%)",
+        "key": "Arrow-Left",
+        "description": "Decrease saturation (-50%)"
     },
     "reset_filters": {
-        "key": "X", "description": "Reset all image filters",
+        "key": "X",
+        "description": "Reset all image filters"
     },
     "show_view_controls": {
-        "key": "V", "description": "Toogle display of view controls on/off"
+        "key": "V",
+        "description":"Toogle display of view controls on/off"
     },
     "next_view_group": {
-        "key": "B", "description": "Switch to next group view"
+        "key": "B",
+        "description": "Switch to next group view"
     }
 };
 
@@ -91,23 +116,32 @@ function init_segmentation(){
     fetch_server_update(update_config=true);
 }
 
-async function init_views(){
+function newuser_help_popup(){
+    // Open the help menu if the user is new (no saved masks):
+    if (vars.user.segmentation.n_masks == 0 && vars.just_logged_in == true){
+        dialogue_help();
+        vars.just_logged_in = false;
+    }
+}
+
+function init_views(){
     show_loader("Loading views...");
     vars.vm = new ViewManager(
         get_object('views-container'),
         vars.config.views, vars.config.view_groups,
-        vars.url.main+"image/"
+        vars.url.main+"image/",
+        image_aspect_ratio=vars.image_shape[0]/vars.image_shape[1]
     );
 
     // Add standard layers to all view ports if the view type is not "bingmap":
     vars.vm.addStandardLayer(
         MaskLayer,
         (view) => view.type != "bingmap"
-    )
+    );
     vars.vm.addStandardLayer(
         PreviewLayer,
         (view) => view.type != "bingmap"
-    )
+    );
 
     // It much faster to change some pixel values on a sprite and draw it then
     // to the canvas once than redrawing each pixel to the canvas directly.
@@ -138,6 +172,7 @@ async function init_views(){
 
     get_object("toolbar").style.visibility = "visible";
     get_object("statusbar").style.visibility = "visible";
+    newuser_help_popup();
 }
 
 function init_events(){
@@ -428,7 +463,7 @@ function constrain_view(ctx, scale, dx, dy){
         // it to the default view
 
         transforms.a = ctx.canvas.width / vars.image_shape[0];
-        transforms.d = ctx.canvas.width / vars.image_shape[0];
+        transforms.d = ctx.canvas.height / vars.image_shape[1];
         transforms.b = 0;
         transforms.c = 0;
         transforms.e = 0;
@@ -882,6 +917,7 @@ async function fetch_server_update(update_config=true){
     let response = await fetch(vars.url.user+"get/current");
     if (response.status == 403) {
         dialogue_login();
+        vars.just_logged_in=true;
         return;
     }
     let user = await response.json();
@@ -1069,9 +1105,7 @@ async function dialogue_help(){
         vars.url.help, {
             method: "POST",
             body: JSON.stringify({
-                "hotkeys": hotkeys,
-                "page": "Segmentation",
-                "page_content": "segmentation/help.html"
+                "hotkeys": hotkeys
             })
         }
     );
@@ -1318,6 +1352,7 @@ async function predict_mask(){
     // We need to keep track of how many pixels we already have sampled.
     // Furthermore, we keep also a ratio of pixels as testing dataset:
     let n_samples = {};
+    let test_n_samples = {};
     for (let user_class of user_classes){
         // Set the current number of samples (0) and the maximum
         n_samples[user_class] = {
@@ -1327,22 +1362,30 @@ async function predict_mask(){
                 vars.config.segmentation.ai_model.max_train_pixels
             )
         };
+        test_n_samples[user_class] = {
+            "current": 0,
+            "max": Infinity
+        };
     }
 
     // Here we decide whether we send a pixel for training to the server or keep
     // it here as testing dataset:
     let test_indices = new Array();
     let train_user_pixels = new Array();
     let train_user_labels = new Array();
+    let test_user_pixels = new Array();
+    let test_user_labels = new Array();
     for (let i of all_indices){
         let class_id = all_user_labels[i];
         if (n_samples[class_id].current < n_samples[class_id].max){
             train_user_pixels.push(all_user_pixels[i]);
             train_user_labels.push(class_id);
             n_samples[class_id].current += 1;
         } else {
-            // We will remember that we need these pixels later for testing:
             test_indices.push(i);
+            test_user_pixels.push(all_user_pixels[i]);
+            test_user_labels.push(class_id);
+            test_n_samples[class_id].current += 1;
         }
     }
 
@@ -1353,7 +1396,7 @@ async function predict_mask(){
                 method: "POST",
                 body: JSON.stringify({
                     "user_pixels": train_user_pixels,
-                    "user_labels": train_user_labels,
+                    "user_labels": train_user_labels
                 })
             }
         );
@@ -1380,15 +1423,15 @@ async function predict_mask(){
     for (let user_class of user_classes){
         tp[user_class] = 0;
     }
-    for (let i of all_indices){
+    
+    for (let i of test_indices){
         let mask_index = all_user_pixels[i];
         cm[all_user_labels[i]][results.data[mask_index]] += 1;
-
         if (all_user_labels[i] == results.data[mask_index]){
             tp[all_user_labels[i]] += 1;
 
             // Correct:
-            // vars.errors_mask[mask_index] = 1;
+            vars.errors_mask[mask_index] = 1;
         } else {
             // Incorrect:
             vars.errors_mask[mask_index] = 2;
@@ -1397,7 +1440,7 @@ async function predict_mask(){
     let acc_prod = user_classes.length;
     let acc_sum = 0;
     for (let label of user_classes){
-        let acc = tp[label] / (vars.n_user_pixels[label]);
+        let acc = tp[label] / test_n_samples[label].current;
         acc_prod *= acc;
         acc_sum += acc;
     }

iris/segmentation/static/javascripts/segmentation.js

@@ -138,10 +138,10 @@
         <li class="toolbutton icon_button" id='tb_saturation_down' onclick="change_saturation(up=false);">
             <img src={{url_for('segmentation.static', filename='icons/saturation_down.png')}} class="icon" />
         </li>
-        <li class="toolbutton icon_button" id='tb_toggle_contrast' onclick="set_contrast(!vars.contrast);">
+        <li class="toolbutton icon_button" id='tb_toggle_contrast' onclick="set_contrast(!vars.vm.filters.contrast);">
             <img src={{url_for('segmentation.static', filename='icons/contrast.png')}} class="icon" />
         </li>
-        <li class="toolbutton icon_button" id='tb_toggle_invert' onclick="set_invert(!vars.invert);">
+        <li class="toolbutton icon_button" id='tb_toggle_invert' onclick="set_invert(!vars.vm.filters.invert);">
             <img src={{url_for('segmentation.static', filename='icons/invert.png')}} class="icon" />
         </li>
         <li class="toolbutton icon_button" id="tb_reset_filters" onclick='reset_filters();'>