Add of example before beginning experiment

expe/config.py

@@ -34,6 +34,19 @@ expes_configuration            = {
             'question': "Do you see one image or a composition of more than one?",
             'indication': "press left if you see one image, right if not",
             'end_text': "Experience is finished. Thanks for your participation",
+            'examples': {
+                'sentence': "This images is cropped {0} with {1}%",
+                'crop_params': [
+                    [0.3, 0, 0],
+                    [0.3, 0, 0],
+                    [0.7, 1, 0]
+                ],
+                'images': [
+                    [2, -1],
+                    [-3, -1],
+                    [7, -1]
+                ]
+            }
         },
         'params':{
             'iterations': 10

expe/templates/base.html

@@ -37,6 +37,7 @@
         if (BASE !== '') baseUrl += BASE + '/'
 
         const expeUrl  = baseUrl + 'expe'  
+        const indicationsUrl  = baseUrl + 'indications'  
 
         // EXPE variables parts
         // get access to django variables

expe/templates/expe/expe_indications.html

@@ -12,25 +12,32 @@
     <br />
     <h5>{{indication}}</h5>
 
-    <br />
-    <br />
-
-    <div class="row">
-        <div class="col-md-4 offset-md-4">
-            <form method="GET" action="/expe">
-                <div class="form-group">
-                    <input type="hidden" name="scene" value="{{scene_name}}"/>
-                    <input type="hidden" name="expe" value="{{expe_name}}"/>
-                    <input type="hidden" name="iteration" value="0"/>
-
-                    <label for="experimentId">Select experiment identifier:</label>
-                    <input type="text" class="form-control" name="experimentId" placeholder="Enter your experiment identifier"/>
-                </div>
-            </form>
+    {% if start %}
+        <br />
+        <br />
+
+        <div class="row">
+            <div class="col-md-4 offset-md-4">
+                <form method="GET" action="/expe">
+                    <div class="form-group">
+                        <input type="hidden" name="scene" value="{{scene_name}}"/>
+                        <input type="hidden" name="expe" value="{{expe_name}}"/>
+                        <input type="hidden" name="iteration" value="0"/>
+
+                        <label for="experimentId">Select experiment identifier:</label>
+                        <input type="text" class="form-control" name="experimentId" placeholder="Enter your experiment identifier"/>
+                    </div>
+                </form>
+            </div>
         </div>
-    </div>
 
-    <p id="expeIndication"><strong>Press enter to begin experiments</strong></p>
+        <p id="expeIndication"><strong>Press enter to begin experiments</strong></p>
+    {% else %}
+        <br/>
+        <h5>{{example_sentence}}</h5>
+        <br/>
+        <img src="{{example}}" />
+    {% endif %}
 
 {% endblock %}
 

expe/templates/expe/expe_list.html

@@ -14,6 +14,8 @@
 
             <form action="/indications" id="expeChoice">
 
+                <input type="hidden" name="example" value="0"/>
+
                 <div class="form-group">
                     <label for="scene">Select scene:</label>
                     <select class="form-control" name="scene">

expe/utils/processing.py

@@ -11,7 +11,7 @@ def crop_images(img1, img2, per=None, orien=None, swap_img=None):
     crop and gather reference image and a noisy one randomly
     '''
     if per is None:
-        per = random.choice([0.25, 0.5, 0.75])
+        per = random.random() * 0.7 + 0.15
     if orien is None:
         orien = random.choice([0, 1])
     if swap_img is None:

expe/views.py

@@ -58,6 +58,7 @@ def expe_list(request):
 
     # get list of experimentss
     expes = cfg.expe_name_list
+    data = get_base_data()
 
     # by default user restart expe
     request.session['expe_started'] = False
@@ -76,6 +77,9 @@ def indications(request):
     # get param 
     expe_name = request.GET.get('expe')
     scene_name = request.GET.get('scene')
+    example_number = request.GET.get('example')
+
+    print(example_number)
 
     # get base data
     data = get_base_data()
@@ -85,6 +89,59 @@ def indications(request):
     data['question']   = cfg.expes_configuration[expe_name]['text']['question']
     data['indication'] = cfg.expes_configuration[expe_name]['text']['indication']
 
+    number_of_examples = len(cfg.expes_configuration[expe_name]['text']['examples']['images'])
+
+    start_experiment = False
+    if (int(example_number) >= number_of_examples):
+        start_experiment = True
+    else:
+        # get expected image qualities indices (load noisy and ref image)
+        params_image = cfg.expes_configuration[expe_name]['text']['examples']['images'][int(example_number)]
+        qualities = api.get_scene_qualities(scene_name)
+
+        noisy_quality = qualities[params_image[0]]
+        ref_quality = qualities[params_image[1]]
+
+        noisy_image = api.get_image(scene_name, noisy_quality)
+        ref_image = api.get_image(scene_name, ref_quality)
+
+        # get crop params from configuration
+        crop_params = cfg.expes_configuration[expe_name]['text']['examples']['crop_params'][int(example_number)]
+
+        img_merge, percentage, orientation, position = crop_images(noisy_image,     
+                                                                    ref_image, 
+                                                                    per=crop_params[0], 
+                                                                    orien=crop_params[1], 
+                                                                    swap_img=crop_params[2])
+
+        example_sentence = cfg.expes_configuration[expe_name]['text']['examples']['sentence']
+
+        if orientation == 0:
+            example_sentence = example_sentence.format('vertically', str(percentage*100))
+        else:
+            example_sentence = example_sentence.format('horizontally', str(percentage*100))
+
+        data['example_sentence'] = example_sentence
+
+
+        # Temporary save of image
+        tmp_folder = os.path.join(settings.MEDIA_ROOT, cfg.output_tmp_folder)
+
+        if not os.path.exists(tmp_folder):
+            os.makedirs(tmp_folder)
+
+        # generate tmp merged image (pass as BytesIO was complicated..)
+        filepath_img = os.path.join(tmp_folder, 'example_' + scene_name + '' + expe_name + '.png')
+        
+        # replace img_merge if necessary (new iteration of expe)
+        if img_merge is not None:
+            img_merge.save(filepath_img)
+
+        print(filepath_img)
+        data['example'] = filepath_img
+
+    data['start'] = start_experiment
+
     return render(request, 'expe/expe_indications.html', data)
 
 

static/js/indications.js

@@ -1,11 +1,18 @@
 // Utils informations
 const KEYCODE_Q     = 81
 const KEYCODE_ENTER = 13
+const KEYCODE_LEFT_ARROW  = 37
+const KEYCODE_RIGHT_ARROW = 39
 
 urlParams = new URLSearchParams(window.location.search)
 
-const scene = urlParams.get('scene')
-const expe  = urlParams.get('expe')
+const scene    = urlParams.get('scene')
+const expe     = urlParams.get('expe')
+var example    = urlParams.get('example')
+
+if (example === null || example === ''){
+     example = 0
+}
 
 const checkKey = e => {
      if (e.keyCode === KEYCODE_Q) {
@@ -20,7 +27,18 @@ const checkKey = e => {
           console.log(expeUrl + params)
           window.location = expeUrl + params
      }
+     else if (e.keyCode === KEYCODE_LEFT_ARROW || e.keyCode === KEYCODE_RIGHT_ARROW) {
+          
+          // increment number of example
+          example = parseInt(example) + 1
+
+          console.log("I'm here")
+          // construct url with params for experiments
+          const params = `?scene=${scene}&expe=${expe}&example=${example}`
+          window.location = indicationsUrl + params
+     }
 }
 
 // implement `key` events
 document.addEventListener('keydown', checkKey)
+