Merge branch 'remain_canvas'

kurokida · Dec 3, 2022 · b02ed07 · b02ed07
2 parents 9b7c2e8 + 2f9a706
commit b02ed07
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 20 deletions.
diff --git a/docs/_pages/pluginParams.md b/docs/_pages/pluginParams.md
@@ -28,6 +28,7 @@ Only the 'stimuli' parameter is required; Other parameters can be left unspecifi
 |canvas_offsetX|numeric|0|This value is subtracted from the width of the canvas in full-screen mode. However, since the default value is 0, it basically has no effect on the window size.|
 |canvas_offsetY|numeric|8|This value is subtracted from the height of the canvas in full-screen mode to prevent the vertical scroll bar from being displayed.|
 |clear_canvas|boolean|true|If true, the canvas is cleared every frame. There are not many cases where this should be false, but if you want to draw the trajectory of the mouse, for example, you need to set it false. Note that in that case, the show_end_time property can not be used.  See the [mouse drawing.html](https://www.hes.kyushu-u.ac.jp/~kurokid/jspsychophysics/demos/mouse_drawing.html)|
+|remain_canvas|boolean|false|If true, the main canvas remains for the next trial. This is useful to present complex stimuli using multiple psychophysics objects. Note that this property doesn't work with the Pixi mode.|
 
 # Parameters related to a key response
 

diff --git a/jspsych-psychophysics.js b/jspsych-psychophysics.js
@@ -270,6 +270,13 @@
         default: false,
         description: 'If true, this plugin will use PixiJS'
       },
+      remain_canvas: {
+        type: jspsych.ParameterType.BOOL,
+        pretty_name: 'Remain canvas',
+        default: false,
+        description: 'If true, the main canvas remains for the next trial.'
+      },
+
       choices: {
         type: jspsych.ParameterType.KEYS,
         array: true,
@@ -1558,18 +1565,21 @@
 
       let pixi_app
       let new_html = ''
-      if (trial.pixi) {
-        pixi_app = new PIXI.Application({
-          width: trial.canvas_width,
-          height: trial.canvas_height, 
-          backgroundColor: getColorNum(trial.background_color), 
-          // antialias: true,
-          // resolution: window.devicePixelRatio || 1,
-        });
-
-        display_element.appendChild(pixi_app.view);
-      } else {
-        new_html = '<canvas id="myCanvas" class="jspsych-canvas" width=' + trial.canvas_width + ' height=' + trial.canvas_height + ' style="background-color:' + trial.background_color + ';"></canvas>';
+      const canvas_exist = document.getElementById('myCanvas') === null ? false : true;
+      if (!canvas_exist){
+        if (trial.pixi) {
+          pixi_app = new PIXI.Application({
+            width: trial.canvas_width,
+            height: trial.canvas_height, 
+            backgroundColor: getColorNum(trial.background_color), 
+            // antialias: true,
+            // resolution: window.devicePixelRatio || 1,
+          });
+
+          display_element.appendChild(pixi_app.view);
+        } else {
+            new_html = '<canvas id="myCanvas" class="jspsych-canvas" width=' + trial.canvas_width + ' height=' + trial.canvas_height + ' style="background-color:' + trial.background_color + ';"></canvas>';
+        }
       }
 
       const motion_rt_method = 'performance'; // 'date' or 'performance'. 'performance' is better.
@@ -1617,7 +1627,7 @@
       }, trial.response_start_time);
 
       //display buttons
-      if (trial.response_type === 'button'){
+      if (!canvas_exist && trial.response_type === 'button'){
         let buttons = [];
         if (Array.isArray(trial.button_html)) {
           if (trial.button_html.length == trial.button_choices.length) {
@@ -1641,7 +1651,7 @@
 
 
       // add prompt
-      if(trial.prompt !== null){
+      if (!canvas_exist && trial.prompt !== null){
         new_html += trial.prompt;
       }
       display_element.insertAdjacentHTML('beforeend', new_html)
@@ -1657,15 +1667,19 @@
       let ctx
 
       function set_canvas(canvas, ratio, width, height){
+        const ctx = canvas.getContext('2d');
         const canvas_scale = ratio; // This will be 2 in a retina display, and 1.5 in a microsoft surface laptop.
         canvas.style.width = width + "px";
         canvas.style.height = height + "px";
-        canvas.width = width * canvas_scale;
-        canvas.height = height * canvas_scale;
+
+        if (!canvas_exist){
+          canvas.width = width * canvas_scale;
+          canvas.height = height * canvas_scale;
+          ctx.scale(canvas_scale, canvas_scale)  
+        }
         const centerX = canvas.width/2/canvas_scale;
         const centerY = canvas.height/2/canvas_scale;  
-        const ctx = canvas.getContext('2d');
-        ctx.scale(canvas_scale, canvas_scale)  
+
         return {
           ctx,
           centerX,
@@ -1904,7 +1918,7 @@
           }
         }
 
-        if (trial.pixi) pixi_app.destroy(true, {children: true, texture: true, baseTexture: true})
+        if (!trial.remain_canvas && trial.pixi) pixi_app.destroy(true, {children: true, texture: true, baseTexture: true})
 
         // kill any remaining setTimeout handlers
         this.jsPsych.pluginAPI.clearAllTimeouts();
@@ -1938,7 +1952,7 @@
         }
 
         // clear the display
-        display_element.innerHTML = '';
+        if (!trial.remain_canvas) display_element.innerHTML = '';
 
         // move on to the next trial
         this.jsPsych.finishTrial(trial_data);

diff --git a/psychophysics-demos/remain_canvas.html b/psychophysics-demos/remain_canvas.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="../jspsych-dist/dist/jspsych.js"></script>
+    <script src="../jspsych-dist/dist/plugin-html-button-response.js"></script>
+    <script src="../jspsych-psychophysics.js"></script>
+    <script src="https://pixijs.download/release/pixi.js"></script>
+    <link rel="stylesheet" href="../jspsych-dist/dist/jspsych.css"></link>
+</head>
+<body></body>
+<script>
+    // This file demonstrates how to remain the main canvas even after the trials finishes.
+    // This method will be useful when there is a flash between trials.
+
+    const jsPsych = initJsPsych({
+        on_finish: function() {
+            jsPsych.data.displayData();
+        }
+    })
+    console.log(`jsPsych Version ${jsPsych.version()}`)
+
+    const pixi_flag = jsPsych.data.getURLVariable('pixi_flag') === '1' ? true : false;
+
+    const instruction = {
+        type: jsPsychHtmlButtonResponse,
+        stimulus: 'Click on the Start button.',
+        choices: ['Start'],
+        prompt: "This is a sample program for the jspsych-psychophysics plugin.",
+    }
+
+    const circle_object1 = {
+        obj_type: 'circle',
+        startX: 200, // location in the canvas
+        startY: 400,
+        radius: 50,
+        line_color: 'black', // You can use the HTML color name instead of the HEX color.
+        fill_color: 'black',
+    }
+
+    const circle_object2 = {
+        obj_type: 'circle',
+        startX: 200, // location in the canvas
+        startY: 400,
+        endX: 600,
+        endY: 400,
+        radius: 50,
+        line_color: 'black', // You can use the HTML color name instead of the HEX color.
+        fill_color: 'black',
+        motion_start_time: 0,
+        motion_end_time: 3000,
+    }
+
+    const before_key_press = {
+        type: jsPsychPsychophysics,
+        pixi: pixi_flag,
+        stimuli: [circle_object1],
+        canvas_height: 600,
+        prompt: "Press the space key to start the black cirle moving.",
+        remain_canvas: true, // If true, the main canvas remains for the next trial.'
+    }
+
+    const after_key_press = {
+        type: jsPsychPsychophysics,
+        pixi: pixi_flag,
+        stimuli: [circle_object2],
+        canvas_height: 600,
+        prompt: "The black cricle stops after 3 secs.",
+    }
+
+    jsPsych.run([instruction, before_key_press, after_key_press])
+
+</script>
+
+</html>