Button component shown as huge blob in JavaScript

Builder
1

If this template helps then use it. If not then just delete and start from scratch.

OS (e.g. Win10):WIN11
PsychoPy version (e.g. 2024.2.4 Py 3.8) 2025.2.3
Standard Standalone Installation? (y/n) :y
Do you want it to also run online? (y/n) y
What are you trying to achieve?: Show a button

What did you try to make it work?: Used the builder

Link to the most relevant existing thread you have found:

What specifically went wrong when you tried that?:
It is shown as a blob in Java Script

This is probably the same as Button component issue online

3

(post deleted by author)

4

Please could you delete your other two messages and just post your button related code (or screenshots of your button component and what it looks like locally and online)?

Maybe it’s a size/units issue?

5

This is how the button is defined in JS:

GreetingButton = new visual.ButtonStim({
win: psychoJS.window,
name: ‘GreetingButton’,
text: ‘Continue’,
font: ‘David’,
pos: [0, (- 0.6)],
size: [0.4, 0.2],
padding: null,
anchor: ‘center’,
ori: 0.0,
units: ‘norm’,
color: (-1.0000, -1.0000, -1.0000),
fillColor: (1.0000, 1.0000, 1.0000),
borderColor: (-0.6078, 0.6078, -0.6078),
colorSpace: ‘rgb’,
borderWidth: 8.0,
opacity: null,
depth: -1,
letterHeight: 0.075,
bold: true,
italic: false,
});

6

And this is the same button in Python:

GreetingButton = visual.ButtonStim(win,
text=‘Continue’, font=‘David’,
pos=(0, -0.6),units=‘norm’,
letterHeight=0.075,
size=(0.4, 0.2),
ori=0.0
,borderWidth=8.0,
fillColor=(1.0000, 1.0000, 1.0000), borderColor=(-0.6078, 0.6078, -0.6078),
color=(-1.0000, -1.0000, -1.0000), colorSpace=‘rgb’,
opacity=None,
bold=True, italic=False,
padding=None,
anchor=‘center’,
name=‘GreetingButton’,
depth=-1
)

7

And here is a snapshot of what I see in my local browser when I run the JavaScript:

image
image807×650 55.6 KB

8

This is what I see when I run as Python on my desktop:

image
image803×605 61.6 KB

9

I’ve just done some investigating and the main cause of the issue is that the border of a button in PsychoJS is now in the component’s units, rather than pixels. Have a look at this demo:

There also seems to be a separate issue about using numeric colours (which can be fixed if you remove the $) and a further issue related to using norm units. I’ll share this with the dev team.

Button component issue online