Low-resolution assets in Puppy GTK+ 3 themes

[dimkr]

The various bitmap images in the GTK+ 3 themes (https://github.com/puppylinux-woof-CE?q=gtk3_&) are tiny and must be stretched if the scaling factor is > 1.

[01micko]

The answer is to convert to vector images.

[01micko]

Wow! 59 assets in all themes except polished_blue which has 19. I'll start there :sweat_smile:

[dimkr]

I tried several path tracers and the results are not amazing. They stretch or blur the image and the result is not 1:1 as the .png at scale factor 1. I think we should start by manually converting every .png image to an equivalent .svg of the same dimensions, where every pixel is represented by a 1x1 square filled with the same color, i.e. SVG pixel art.

[01micko]

svg does make some difference, mainly check/radio button.

[01micko]

I think we should start by manually converting every .png image to an equivalent .svg of the same dimensions, where every pixel is represented by a 1x1 square filled with the same color, i.e. SVG pixel art.

Not necessary and possibly not ideal. In the image above here is the checkbox

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(187,191,231);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(122,163,201);stop-opacity:1" />
    </linearGradient>
  </defs>
  <path style="fill:url(#grad1);fill-opacity:0.9;stroke:#929295;stroke-width:3;" d="m 6,6 36,0 0,36 -36,0 z"/>
  <path style="fill:none;stroke:#2C2C2C;stroke-width:4" d="m 14,25.5 7,7 14,-14 "/>
</svg>

At 16 it was too blurry. Gtk scales the images well enough so the higher the 'res' in the svg (up to a certain point which to me is unknown) the better the result. Like said, mainly check and radio are affected. They are an easy fix, PRs soon.

[dimkr]

2x the current resolution should be good enough and blur-free, as long as the scale factor is <=2.

[dimkr]

I started working on Flat-grey-rounded at https://github.com/puppylinux-woof-CE/gtk3_flat_grey_rounded/commits/hidpi. All other themes, except Polished-Blue, are very close to the theme they were forked from.

Indeed, some historical accuracy is lost when the 90's-style "fake 3D" is replaced with scalable, solid 1px borders.

EDIT: it's pretty close to the original, using CSS shadows!

[dimkr]

Once this one is fixed, #2957 should be much easier.

[01micko]

Probably just the check/radio buttons need fixing in polished blue. The png assets are ok for the rest.

[01micko]

Concerning gtk4, I am updating to slackware64-current because the deps are getting too old to chase wlroots in slackware64-15.0. I have a petbuild for celluloid(gtk4) and mpv (because slackware still ships mplayer. :roll_eyes: ). There are no recent frontends for mplayer and I'm not keen on the default gui, and surely it wouldn't run in pure wayland, so mpv/celluloid is my best option. Have them building ok, yet to test.

[dimkr]

The GTK+ 3 themes mostly work as-is when gtk-3.0 is copied to gtk-4.0. The main issues are 1) dotted borders around widgets (easy to fix) 2) pretty much all images are stretched and blurry (this issue) and 3) messed up colors in new widgets like popover menus and headerbars.

[dimkr]

Good progress at https://github.com/dimkr/raleigh-reloaded/commits/hidpi! Most of the theme is 2x scaled in pixel-perfect manner. I'm fixing small issues here and there (mostly tab-related stuff), but it looks mostly OK.

Luckily, Flat-grey-rounded uses CSS to draw tabs, so it's easier to upscale compared to raleigh-reloaded. I tried to merge my raleigh-reloaded branch into Flat-grey-rounded and everything seemed fine with scaling factor 2.

[dimkr]

https://github.com/puppylinux-woof-CE/gtk3_flat_grey_rounded/tree/hidpi-v3 seems to work pretty well 😸

[dimkr]

@01micko I stole some of your SVG assets, added others and created https://github.com/dimkr/2d-grey-rounded. I'm trying to see if I can port it to GTK+ 4 easily, it's a very simple theme now.

[01micko]

Sounds good :+1: