buttoncontrol icons grainy and compressed

[GEONE]

Alternate title: FGU renders semi-transparent icons with a lot of noise

Hello. I'm working on an extension and I noticed that when creating a buttoncontrol with a PNG icon, Fantasy Grounds displays the icon as super noisy and compressed, even when displayed at the image's native resolution. The PNG I'm using in this example is 64x64, and it's displayed in the window at 64x64 size, so there shouldn't be any scaling going on.

Here is an example. The image on the left is how the icon is displayed in Fantasy Grounds, and the image on the right is a mock-up of how it ought to appear when displayed at its native resolution.
https://i.imgur.com/zEvDxKC.png
and here is the PNG file I am using
https://i.imgur.com/k5OtRpH.png
Does anyone know how why this might be happening, and potentially how to fix this issue?

[Trenloe]

Please provide the XML definition for the buttoncontrol you've created.

[GEONE]

Please provide the XML definition for the buttoncontrol you've created.

I can replicate this graininess with any basic button control, but here's the code for this specific scenario. It's a windowlist of buttoncontrols in a grid layout. The buttons themselves are the buttoncontrol named "base" at the bottom



<windowclass name="iconselect">
<script file="ref/scripts/ref_iconselect.lua" />
<frame>utilitybox2</frame>
<placement>
<size width="460" height="300" />
</placement>
<sizelimits>
<dynamic />
</sizelimits>
<sheetdata>
<windowlist name="list">
<script file="ref/scripts/ref_iconselect_list.lua" />
<class>iconselect_entry</class>
<bounds>30,30,-30,-30</bounds>
<columns width="75" fillwidth="true" />
<empty>
<text>No icons available</text>
</empty>
</windowlist>
<scrollbar_list />

<resize_utilitybox2 />
<close_utilitybox2 />
</sheetdata>
</windowclass>

<windowclass name="iconselect_entry">
<sizelimits>
<minimum width="64" height="64" />
<maximum width="64" height="64" />
</sizelimits>
<script>
local _sFolder;
function setData(sFolder)
_sFolder = sFolder;
if type(sFolder) == "string" then
setIcon(sFolder);
elseif type(sFolder) == "table" then
setIcon(sFolder.icon or "", sFolder.label or "");
if sFolder.label then
base.setTooltipText(sFolder.label);
base_label.setTooltipText(sFolder.label);
end
end
end
function setIcon(sIcon)
if (sIcon or "") == "" then
base.setIcons("", "", "");
else
base.setIcons(sIcon, sIcon, sIcon);
end
end
function activate()
windowlist.window.activate(_sFolder, windowlist);
return true;
end
</script>
<sheetdata>
<buttoncontrol name="base">
<bounds>0,0,-1,-1</bounds>
<script>
function onClickDown()
return true;
end
function onClickRelease()
return window.activate();
end
</script>
</buttoncontrol>
</sheetdata>
</windowclass>


It results in the icons looking grainy, especially around areas with transparency (like the shadowed edges), and it's quite noticeable when comparing them to the raw icon files themselves.
https://i.imgur.com/7NkC7am.png
The raw PNG files in Windows Explorer for reference:
https://i.imgur.com/FaqRZ1A.png

[Trenloe]

I don't know if this will fix it, but try specifying the width and height of the "iconselect_entry" windowclass using <placement> instead of <sizelimits>


<placement>
<size width="64" height="64" />
</placement>

The reason I mention this is that the default size may not be set correctly in the current code if it's not specifically set, as there's an update in a future release (https://www.fantasygrounds.com/forums/showthread.php?79136-Fantasy-Grounds-Beta-Release-v4-4-4&p=698093&viewfull=1#post698093) that sets the default size to the minimum size if there isn't a default size set. I'm not sure what the current FG code will use.

[GEONE]

I don't know if this will fix it, but try specifying the width and height of the "iconselect_entry" windowclass using <placement> instead of <sizelimits>


<placement>
<size width="64" height="64" />
</placement>

The reason I mention this is that the default size may not be set correctly in the current code if it's not specifically set, as there's an update in a future release (https://www.fantasygrounds.com/forums/showthread.php?79136-Fantasy-Grounds-Beta-Release-v4-4-4&p=698093&viewfull=1#post698093) that sets the default size to the minimum size if there isn't a default size set. I'm not sure what the current FG code will use.

That didn't seem to have changed the graininess of the icons unfortunately. I don't think sizing is the issue because the icons are being displayed at the correct size (64x64px, you can measure them in the screenshots to confirm if you wish). I'd assume if they weren't set to the correct size they wouldn't be getting drawn as 64x64.

[Trenloe]

I was thinking that because you're using <bounds> to set the initial size of the buttoncontrol, which relies on the size of the window - and if the initial default size of the window wasn't being set to 64x64, that the initial size may be set to lower than 64x64 and then FG resizes the window and the buttoncontrol resizes as the windowclass resizes. Basically, I haven't had any issues like what you show, and things like this usually occur when a smaller graphic is resized larger - and if the initial icon size was set to less than 64x64, this could explain the issue. So I'm trying to work out if the buttoncontrol is initially smaller than 64x64.

One thing you might try is to reset the size of the buttoncontrol before setting the icon in the setIcon function - use setStaticBounds (https://fantasygroundsunity.atlassian.net/wiki/spaces/FGCP/pages/996644833/windowcontrol#setStaticBounds)

[Trenloe]

Additionally, are you using any /scaleui setting other than 100%?

[GEONE]

One thing you might try is to reset the size of the buttoncontrol before setting the icon in the setIcon function - use setStaticBounds (https://fantasygroundsunity.atlassian.net/wiki/spaces/FGCP/pages/996644833/windowcontrol#setStaticBounds)
I'll try fiddling with that. Right now, it's making the icons vanish but I'm probably just doing something wrong with the x, y positioning in setStaticBounds.


Additionally, are you using any /scaleui setting other than 100%?
UI scale is set to 100.

[Moon Wizard]

Try this instead:



<windowclass name="iconselect_entry">
<script>
local _sFolder;
function setData(sFolder)
_sFolder = sFolder;
if type(sFolder) == "string" then
setIcon(sFolder);
elseif type(sFolder) == "table" then
setIcon(sFolder.icon or "", sFolder.label or "");
if sFolder.label then
base.setTooltipText(sFolder.label);
base_label.setTooltipText(sFolder.label);
end
end
end
function setIcon(sIcon)
if (sIcon or "") == "" then
base.setIcons("", "", "");
else
base.setIcons(sIcon, sIcon, sIcon);
end
end
function activate()
windowlist.window.activate(_sFolder, windowlist);
return true;
end
</script>
<sheetdata>
<buttoncontrol name="base">
<bounds>0,0,64,64</bounds>
<script>
function onClickDown()
return true;
end
function onClickRelease()
return window.activate();
end
</script>
</buttoncontrol>
</sheetdata>
</windowclass>


With the way you are doing it, the icon is actually being scaled to 63x63 (i.e. <bounds>0,0,-1,-1</bounds>)

Regards,
JPG

[GEONE]

Ok so I made a completely clean slate, no windowlist or anything, just a windowclass with a buttoncontrol in it with the icon already set in the XML file. I tried both with no size defined, and also when defining the size using placement or sizelimits. Regardless, it's still just as grainy.



<windowclass name="iconselect">
<sheetdata>
<buttoncontrol name="testicon">
<bounds>0,0,-1,-1</bounds>
<icon normal="Spell_Evocation_GuidingBolt" />
</buttoncontrol>
</sheetdata>
</windowclass>

[GEONE]

Try this instead:
With the way you are doing it, the icon is actually being scaled to 63x63 (i.e. <bounds>0,0,-1,-1</bounds>)


Oh I didn't know that. I'll give it a try

[GEONE]

Try this instead:



<windowclass name="iconselect_entry">
<script>
local _sFolder;
function setData(sFolder)
_sFolder = sFolder;
if type(sFolder) == "string" then
setIcon(sFolder);
elseif type(sFolder) == "table" then
setIcon(sFolder.icon or "", sFolder.label or "");
if sFolder.label then
base.setTooltipText(sFolder.label);
base_label.setTooltipText(sFolder.label);
end
end
end
function setIcon(sIcon)
if (sIcon or "") == "" then
base.setIcons("", "", "");
else
base.setIcons(sIcon, sIcon, sIcon);
end
end
function activate()
windowlist.window.activate(_sFolder, windowlist);
return true;
end
</script>
<sheetdata>
<buttoncontrol name="base">
<bounds>0,0,64,64</bounds>
<script>
function onClickDown()
return true;
end
function onClickRelease()
return window.activate();
end
</script>
</buttoncontrol>
</sheetdata>
</windowclass>


With the way you are doing it, the icon is actually being scaled to 63x63 (i.e. <bounds>0,0,-1,-1</bounds>)

Regards,
JPG

This seems to have made the graininess considerably worse for some reason

https://i.imgur.com/V54zDeG.png

https://i.imgur.com/fOPcLM8.png

I assume maybe because it was always being rendered this noisy, but it being downscaled to 63x63 was hiding most of the grain. The question remains why it's being rendered with this much noise. I suspect the transparency has something to do with it, since icons that don't have much semi-transparency look flawless. But these icons have a lot of parts that are semi-transparent, and those happen to be the grainiest parts

[GEONE]

Just an update, the graininess also appears when icons are sent in chat. And since it's not possible as far as I know to manually change the size of a chat icon (chat icons always display at their native resolution) then it must not be an issue with icon scaling.

https://i.imgur.com/cjJcpF4.png



msgLong.icon = "Spell_Evocation_GuidingBolt";
msgShort.icon = "Spell_Evocation_GuidingBolt";
ActionsManager.outputResult(rRoll.bSecret, rSource, rTarget, msgLong, msgShort);


https://i.imgur.com/VO4XDNA.png

[Moon Wizard]

My suspicion is that the icons have a lot of semi-transparent pixels that end up interacting with the background (which has built in graininess) that makes it look like an issue. Have you tried these on a flat background to see if you see the same image?

Regards,
JPG

[GEONE]

My suspicion is that the icons have a lot of semi-transparent pixels that end up interacting with the background (which has built in graininess) that makes it look like an issue. Have you tried these on a flat background to see if you see the same image?

Regards,
JPG

Here it is on the "FG Simple Gray" theme which has a solid gray background (added overlay in the corner to show how the original image looks on the same background):

https://i.imgur.com/4vUipaK.png

As you can see, the graininess is still there. If it was just a case of perceiving it as grainy due to the background, then the mock-up shown in the original post would have also looked grainy, as it's on the same background.

[pindercarl]

I'm not able to reproduce this with the PNG provided. It could be different GPU image compression based on platform. Are you running Windows, Mac, or Linux?

[EDIT]: Never mind, I am able to reproduce this.

It is GPU compression. I'll have a chat with John about how we might address this. In the meantime, if you change the dimensions of the image to be Non-Power-Of-Two, you can trick the GPU into not compressing it. In this case, changing the dimensions to 65x65 would do the trick.

[GEONE]

I'm not able to reproduce this with the PNG provided. It could be different GPU image compression based on platform. Are you running Windows, Mac, or Linux?

[EDIT]: Never mind, I am able to reproduce this.

It is GPU compression. I'll have a chat with John about how we might address this. In the meantime, if you change the dimensions of the image to be Non-Power-Of-Two, you can trick the GPU into not compressing it. In this case, changing the dimensions to 65x65 would do the trick.

Thanks so much for looking into this! For the record I'm on Windows 10 with a RX 5600 XT

EDIT: I cropped the image to 65x65, adding 1 pixel to each dimension, and the graininess hasn't changed when displayed both in chat and on a buttoncontrol. It's still just as grainy as before. But at least I know it's out of my control now, I'll wait patiently for any future fixes.

[pindercarl]

Thanks so much for looking into this! For the record I'm on Windows 10 with a RX 5600 XT

EDIT: I cropped the image to 65x65, adding 1 pixel to each dimension, and the graininess hasn't changed when displayed both in chat and on a buttoncontrol. It's still just as grainy as before. But at least I know it's out of my control now, I'll wait patiently for any future fixes.

Can you provide a copy of the extension with accompanying graphics? Thanks.

[GEONE]

Can you provide a copy of the extension with accompanying graphics? Thanks.

Sure, here you go. It should work with any ruleset, but I test on 5E. It should display both a 64x64 icon and a 65x65 icon in chat as the extension announcement message.

https://i.imgur.com/uEbj8BG.png

[GEONE]

Update: Please disregard the above two messages I sent! I was not testing on an up-to-date version of FGU. After updating to 4.4.3, the 65x65 icon is smooth

https://i.imgur.com/Qy8YVr4.png

[pindercarl]

Update: Please disregard the above two messages I sent! I was not testing on an up-to-date version of FGU. After updating to 4.4.3, the 65x65 icon is smooth

https://i.imgur.com/Qy8YVr4.png

Good to hear.