How do I restrict the screen scaling done by the virtual-chinrest plugin?

[sophief10]

Hi everyone,

I recently encountered an issue when using the virtual-chinrest plugin: after the plugin scaled my window, my document object would be too large for my screen, causing my computer to add horizontal and vertical scrollbars that I did not want. After thinking about the issue, I came up with a few solutions. I would like to share these solutions here, both for my own reference and in case anyone has experienced the same problem.

Disclaimer: I am still a novice programmer, so I apologize if this discussion thread seems obvious or unnecessary to those of you with more experience. Please feel free to share your own insights on this topic if you want to 🙂

How does the virtual-chinrest plugin work?

After analyzing the code for the virtual-chinrest plugin, I came to the following understanding of how the plugin works (again, remember I am still new to programming, so I may be wrong):

The virtual-chinrest plugin aims to resize items on the user's screen so that they always have the same absolute size (i.e., cm, in, deg) regardless of the pixel density of the user's screen. It does so by finding the screen's pixel density and dividing it by a ratio of pixels to absolute units to obtain a scaling factor. Then, it applies the scaling factor to the document body using the CSS property transform: scale() .

1. The user re-sizes the credit card image to be the size of a real credit card
2. Using getScaledItemWidth(), find the new width of the credit card image in px on the user's screen, item_width_px
3. Using convertPixelsToMM() and accurateRound(), convert the width from px to mm to obtain px2mm
4. Convert the width from mm, px2mm, to cm/in/deg, px2unit_scr
5. scale_factor = px2unit_scr / trial.pixels_per_unit
6. Apply scale_factor to the jspsych-content div using transform:scale()

Now, an item of x pixels on the user's screen will always display as y cm/in/deg.

Potential problem:

We do not know the dimensions and pixel density of the user's screen, so we don't know if the screen is large enough to accommodate the scaled window. For example, what if the user does not have y cm/in/deg available on their screen? In this case, items of x pixels will overflow the screen, creating scrollbars.

Unfortunately, due to the nature of transform:scale(), we cannot stop the screen elements from overflowing their containers. According to this thread, transform:scale() does not respond to min- or max- properties.

Therefore, what can we do to stop screen overflow when using the virtual-chinrest plugin?

[sophief10]

Solution 1: Estimate User Screen Size

According to this article, a computer screen is typically 24 - 30 inches large.
Therefore, ensure that the largest item on the user's screen will not exceed 24 in x 24 in after re-sizing.
Example:
If pixels_per_unit = 100, you should not set your screen elements to be any larger than 2400 px x 2400 px.

[sophief10]

Solution 2: Ask User to Adjust Viewing Distance

If resize_units = "deg", the virtual-chinrest plugin will use view_dist_mm to help calculate scale_factor. (If the user is farther away from the screen, scale_factor will be larger.)
Therefore, run the following code:

    var virtual_chinrest = {
        timeline: [
            {
                type: "virtual_chinrest",
                on_finish: function(data) {
                    node_id = data.internal_node_id;
                }
            },
            {
                timeline: [
                    {
                        type: 'html-keyboard-response',
                        stimulus: 'Adjust your viewing distance.'
                    }
                ],
                conditional_function: function() {
                    var width = jsPsych.data.getDataByTimelineNode(node_id).select('win_width_deg').values[0];
                    var height = jsPsych.data.getDataByTimelineNode(node_id).select('win_height_deg').values[0];
                    /* let cutoff_width = width of largest element in px / pixels_per_unit */
                    /* let cutoff_height = height of largest element in px / pixels_per_unit */
                    if (width < cutoff_width || height < cutoff_height) {
                        /* undo scaling */
                        document.getElementById("jspsych-content").style.transform = "scale(1)";
                        
                        loop = true;
                        return true;
                    } else {
                        loop = false;
                        return false;
                    }

                }
            }
        ],
        loop_function: function(data) {
            if (loop == true) {
                return true;
            } else {
                return false;
            }
        }
    }