I am using the GUI.StackPanel with buttons in it and the buttons have images. In my app the canvas is being resized and when that happens the stackPanel is shrinking in width when the canvas is smaller in width.
I have tried the idealsize…width. and nothing works. Is their a solution for this?
Here’s my code:
const toolbar = new GUI.StackPanel()
toolbar.width = ‘60px’ // Set width of the toolbar to match button size
toolbar.isVertical = true // Set the toolbar layout to vertical
toolbar.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT // Align toolbar to the left side
toolbar.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_BOTTOM // Align toolbar to the bottom
toolbar.paddingLeft = ‘18px’ // Set padding from the left side
toolbar.paddingBottom = ‘8px’ // Set padding from the bottom
advancedTexture.addControl(toolbar) // Add toolbar to the UI
// Example button 1 - Measure Tool Button
const measureToolButton = GUI.Button.CreateSimpleButton('measureTool', '') // No text
measureToolButton.width = '40px'
measureToolButton.height = '40px'
const measureToolImage = new GUI.Image('measureToolImage', '/assets/measureTool.png')
measureToolImage.width = '40px'
measureToolImage.height = '40px'
measureToolButton.addControl(measureToolImage) // Add image to button
measureToolButton.onPointerClickObservable.add(() => {
console.log('Measure Tool clicked')
})
toolbar.addControl(measureToolButton)
// Example button 2 - Section Plane Button
const sectionPlaneButton = GUI.Button.CreateSimpleButton('sectionPlane', '') // No text
sectionPlaneButton.width = '40px'
sectionPlaneButton.height = '40px'
const sectionPlaneImage = new GUI.Image('sectionPlaneImage', '/assets/sectionPlane.png')
sectionPlaneImage.width = '40px'
sectionPlaneImage.height = '40px'
sectionPlaneButton.addControl(sectionPlaneImage) // Add image to button
sectionPlaneButton.onPointerClickObservable.add(() => {
console.log('Section Plane clicked')
})
toolbar.addControl(sectionPlaneButton)
// Example button 3 - Settings Button (aligned to the bottom)
const settingsButton = GUI.Button.CreateSimpleButton('settings', '') // No text
settingsButton.width = '40px'
settingsButton.height = '40px'
const settingsImage = new GUI.Image('settingsImage', '/assets/settings.png')
settingsImage.width = '40px'
settingsImage.height = '40px'
settingsButton.addControl(settingsImage) // Add image to button
settingsButton.onPointerClickObservable.add(() => {
console.log('Settings clicked')
})
toolbar.addControl(settingsButton)
Hi,
Possible for you to quickly paste this and share a PG to repro?
Everything seems to be expressed in pixels here, so it shouldn’t resize.
What’s hosting the stackpanel? A grid, a rectangle, anything (expressed in percentage?)?
Sorry for just like that, I can’t really spot anything weird or uncommon from this extract of code. Would need a repro… Can do?
Meanwhile, have a great day
I tested this exact code in my app and when either scaling the browser down or making the canvas change sizes dynamically, they shrink in the width. BUT in the playground it works…
Hum? Sure you don’t have anything special in there that’s not in the PG? Using XR or something.
Something different about the handling of the ADT on resize or hardware scaling or something?
Are you working with NPM? Did you get latest version? Did you check on any errors in the console? Sure it’s the stackpanel that’s resizing and not just the images within? Honestly, I don’t know what to tell you without a repro. All l can do is assumptions… (sorry)
EDIT: Not a solution (because it should work) but I was just thinking… If there’s anything around your resizing, related to res, hardware scaling or whatever… you could try constrain this in a grid. This way you’ll have a fixed container for your stackpanel. If it still resize once constrained in a grid with fixed pixels, then there’s definetely something totally weird going on (around the resize, res or scaling of the adt)
I am changing the canvas programmatically. My babylon canvas is in a vuetify.js component. When v-nav-drawers are opened from the left or right the cnavas needs to decrease in width.
But when resizing the browser it shrinks them as well. Wheich in the playground work as expected.
Yes, I kind of recall something around this part … but since I’m a complete idiot, I already forgot about it … It’s something around the fact that the ADT is not part of the render loop as such… and/or something around using the render width/height of the engine (instead of canvas). Probably something around these parts:
const w = engine.getRenderWidth(true), h = engine.getRenderHeight(true);
Easiest for both of us is I quickly call-in the expert @Evgeni_Popov . I’m sure he’ll have this part fixed for you in less than a minute.
If the dimensions of the controls are given in pixels, I don’t know why their size would change when the canvas is resized. A repro would definitely help, but maybe it has something to do with the vue.js framework, which we don’t use in the Playground…
Well that was unexpected and unfortunate. I’m also no specialist of vue, vite or react
I think we have identified that the problem comes from the part where you say
Does this affect only the GUI or do you see any other changes in the scene?
I think you should may be try two things around these lines:
Either use engine.getRenderWidth / *Height (instead of canvas) or add a resize event listener with the script that’s in this post. I would play all too much around hardwareScaling though.
@Evgeni_Popov That’s what I thought, but yeah it was not acting the way it does in the playground I posted.
@mawa It doesn’t affect anything other than the GUI. I will play with it to get it to work, I will try the things you posted. But for now I reverted to creating the toolbar in vuetify. Until I can get the GUI one working and is stable.
I believe it may be because I am changing the canvas in the render loop when the conditions change. But it is flickering anytime the GUI has focus…so I am not sure.
It looks to me like you are narrowing the issue. From what you tell here, I don’t think the lines of code provided will actually change anything. I’d rather play around with the different states of rendering. May be try to call it at a later or earlier stage in the render loop. I wouldn’t know when just exactly May be @RaananW would know better?