In short, the text of the instruction images is blurry and it seems to be, because Pavlovia streches images unnecessarily.
Longer explanation:
The instructions shall be presented as image files. The images are set to be displayed in the center of screen, with a size of 1280 x 720 pixels and we test it on a 1920 x 1080 pixel screen. The original images are much larger than that (3306 x 1859), but have a very similar aspect ratio.
I drew a white frame at the edge of the first instruction image to check itโs size and I noticed that the images are displayed too big when starting the experiment locally in my browser or on Pavlovia, but not in PsychoPy.
Here is how a unstreched 1280 x 720 image inside a 1920 x 1080 screen should look like (made in GIMP). Sorry if it doesnโt show well with the white background of the forum site.
As you can see, the white frame is way closer to the edge of the screen. And the text looks more blurry (atleast if you display the image fullscreen). But since the original image is way bigger than even 1920 x 1080 it shouldnโt be blurry, even at 1080p. I get the idea that Pavlovia takes the original image, โreducesโ that to 720p and then streches the smaller image to a bigger size than it should, thus making the text blurry.
But nontheless. I have no clue what Pavlovia is actually doing and how to make it stop. All I want is sharp text in my instructions without having to format text elements.
The way I do this for instructions is make them in Microsoft Powerpoint, that way the images will be easily to format for psychopy/pavlovia. The other thing is to use units other than pixels, as this may look crisp on your screen, but participants with different screen sizes and resolutions will see something completely different. I would recommend maybe using something that @wakecarter made on their crib sheet (PsychoPy Python to Javascript crib sheet - Google Docs).
Issac
All our instructions are made in PowerPoint, exported as a JPG and then displayed via an Image element. Maybe we should switch to PNG.
I tried doing it with norm instead. If I get norm units right, they go from -1 to +1 on the X- and Y-axis.
When I set my image to have the size (2, 2) it should cover the entire screen. If it is (1, 1) it should cover half the x and half the y axis, which is a quarter of the screen. That checks out, screenshots at the end.
But (1.5, 1.5) doesnโt seem to be right, unless I make a mistake in thinking about it. With a screen resolution of 1920 by 1080, 1.5 by 1.5 norm units should be equivalent to 1280 by 720 pixels.
Yet the image I get is around 1440 by 800. Itโs way closer to how it should look. But still doesnโt seem quite right.
EDIT: Maybe it is. If I divide 1920 by 1,5 I get 1280. But if I divide 1920 by 2 to get the number of pixels in the range of 0 to 1 in norm units (960) and then multiply that by 1,5 I get 1440. Doing the same on the Y-Axis I get 810 pixels. So 1440 by 810, close to my measurements.
Following that logic in reverse I would need 1.33333โฆ norm units on both axis to get 1280 by 720 pixels. And doing that it looks right, atleat regarding the size. Itโs still blurrier than it is in PsychoPy.
The bluriness comes from the scaling process. Pixel are not a good choice for online experiments because the size of a pixel depends on the screen resolution (1920 x 720 vs 2560 x 1440). You need information about the screen size in pixel to set properly the size of your image across various devices.
Is there any reason why you want to use an image to display the instruction? It is text and could be easily displayed by a text-component. You have two phrases underlined, one bold. You could use an online utf-8 encoder to add font weight.
