pMusic and Gtk3 - Githubissues

zigbert commented 2 years ago

Knowledge needed! @dimkr @01micko @anyone

I have done some initial work to get pMusic run on Gtk3. The screeny shows an extremely rough, but working gui. The main issue so far is the icons. Since Gtk3 doesn't support stock-icons, I have recoded the gui to use the icon-model instead. Gtk2 also supports this. BUT, to get this going, I had to place all pMusic-icons in /usr/share/pixmaps. I have not been able to setup an extra icon folder for gtkdialog.

Why does /usr/share/pixmaps works as an icon-folder? Is it possible to define another folder for pMusic icons?
What is the 'right' way to set up unique icons for a gtkdialog gui?

screeny

dimkr commented 2 years ago

What is the 'right' way to set up unique icons for a gtkdialog gui?

Why don't you use symbolic icons, like pan-start-symbolic? That's what "normal" GTK+ 3 applications do, and that makes them visually consistent with each other.

zigbert commented 2 years ago

Why don't you use symbolic icons, like pan-start-symbolic? That's what "normal" GTK+ 3 applications do, and that makes them visually consistent with each other.

Sounds like a good idea, but I haven't figured out how to set it up with Gtkdialog and Bash.

dimkr commented 2 years ago

Sounds like a good idea, but I haven't figured out how to set it up with Gtkdialog and Bash.

You use them like normal icons, and the icon theme should provide them, or inherit from an icon theme that has them. Vanilla Dpup has a tiny selection of symbolic icons from the (huge) Adwaita theme, otherwise some GTK+ 3 applications are broken. If you need extra icons, it's easy to add them to the list of Adwaita icons that don't get deleted during 2createpackages.

zigbert commented 2 years ago

You use them like normal icons, and the icon theme should provide them, or inherit from an icon theme that has them. Vanilla Dpup has a tiny selection of symbolic icons from the (huge) Adwaita theme, otherwise some GTK+ 3 applications are broken. If you need extra icons, it's easy to add them to the list of Adwaita icons that don't get deleted during 2createpackages.

That means the icons are hardcoded to the theme used by Dpup. pMusic should work also when the user switches to another icon-theme. In addition, pMusic has its own theming where icons might differ between themes.

dimkr commented 2 years ago

That's the idea behind symbolic icons. They stay the same, and they don't need to change between themes, because they're symbolic.

zigbert commented 2 years ago

Using icons from the Adwaita theme could be part of the solution, but pMusic still require many unique icons. The base icon-set (not any theming) is around 60 icons and we need to include to some of them to get pMusic running properly.

screeny(13)

dimkr commented 2 years ago

The vast majority of these have a "symbolic icon" equivalent, or something close enough - see https://packages.ubuntu.com/jammy/all/adwaita-icon-theme/filelist. volume can be replaced with multimedia-volume-control-symbolic, play with media-playback-start-symbolic and so on.

(And you don't have to use the symbolic icons - you can just use the icon theme - most of these icons are included in the Puppy Standard icon theme under some other name.)

01micko commented 2 years ago

Hi @zigbert

In GTK3 you can set a custom icon theme per application. It's a little convoluted but is achievable.

## current dir is $HOME
mkdir icons
## PMaterial is the current icon theme system wide
ln -sf /usr/share/icons/"Puppy Standard" $HOME/icons/PMaterial
XDG_DATA_DIRS=$HOME:$XDG_DATA_DIRS geany

This starts Geany with "Puppy Standard" icon theme.

~You could create your own PMusic custom icon theme where ever you want (just the scalable/apps icons should be enough) and .. oh forget it! I've another much simpler idea~

Simple idea

Add all your icons to /usr/share/icons/hicolor/scalable/apps and every theme picks up hicolor. Just ensure they have unique names and in PMusic just call them with input file icon="image" (no extension, some widgets have different syntax, as I'm sure you are aware) in a similar way you call stock icons. I'm reasonably sure all gtkdialog widgets that support images should work.

zigbert commented 2 years ago

Hi @01micko Thank you for the reply. You point to two possible solutions. Thanks for the real-life examples!

I am testing different approaches to see where they fall short. Using hicolor is simple and works great, but has the disadvantage that icon-name can't be the same as in the global theme. It requires unique names for the icons to 'reach' hicolor. Therefor it won't be flexible how many of the icons each pMusic-theme can overwrite. The GTK theme would like to overwrite as few as possible, while NAD wants to have full control. While hicolor is like a bottom layer - the stock icons was the top-layer, and the global theme filled the gap.

The XDG_DATA_DIRS solution might be the final answer, and I am glad you showed me how it actually works. The downside here is of course when the user changes theme...But it should be doable to make a quick check at startup and change the dirname and the inherits in index.theme .... thinking...

Icons are fixable - I just haven't decided how

Worse could be the Gtk3 support of Gtkdialog. It is obvious not 100%. At the moment I am struggling to control vbox/hbox. They don't seem to respond to several options when running in Gtk3.

It won't turn off scrollbars. Neither of these options does work.

hscrollbar-policy="2"
vscrollbar-policy="2"
scrollable="false"

Not able to hide border shadow-type="4"

The border can be fixed in the css file pointing to a blank/non-existing image. I have not found any workaround for the scrollbars.

01micko commented 2 years ago

Borders can be hidden in CSS
I dunno why scrollbars don't work for you as you want, investigation required - can you post a demo?
IMHO a combination of my suggestions might be a decent solution
I'm fairly sure icon-name="some-icon" is backward compatible with gtk2 (instead of gtk-stock)

Another solution instead of using symbolic icons is to use the icon font.

Here is a demo + screenshots

#/bin/sh

# icon font demo
# in this case the font is 'pupmoon' - which must be on the system
# 

cat > /tmp/demo.css <<EOF
box#red {
    background-color: #AC3535;
    color: #AC9435;
}
box#dark {
    background-color: #580000;
    color: #5BAC35;
    font-size: 28px;
}
box#gray {
    background-color: #939E8E;
}
EOF
export DEMO='<window title="demo " icon-name="gtk-info">
  <vbox space-expand="false" space-fill="false">
     <hbox space-expand="true" space-fill="true" name="red">
     <text use-markup="true">
        <label>"<big><big>This is the Pup Moon Icon Font</big></big> <small>   </small>"</label>
      </text>
    </hbox>
    <hbox space-expand="true" space-fill="true" name="dark">
      <text>
        <label>"Multimedia Font Icons:             "</label>
      </text>
    </hbox>
    <hbox space-expand="false" space-fill="false" name="gray"><button ok></button></hbox>
  </vbox>
</window>'
gtkdialog -p DEMO --styles="/tmp/demo.css"

Of course the font isn't available on github so blocks render in the browser.

shot of code

20220703_08h34m11s_grim

shot of GUI

20220703_08h29m42s_grim

HTH :smiley:

zigbert commented 2 years ago

@01micko Thank you for the introduction to PupMoon. I didn't know. Icons are going well. I've set up a basic structure that works for both Gtk2 and Gtk3. We'll get back to that later...

Scrollbars. I think this script should explain some scrollbar issues. Gtk3 troubles with height/width when scrollbar is not present. It does not make any difference if you set scrollbar="false" or vscrollbar-policy="2". For Gtk2, this is ok.

export S='<vbox height-request="200" width-request="500" space-expand="false" space-fill="false">
  <text><label>GTK2 scrollbar activated</label></text>
  <hbox scrollable="true" vscrollbar-policy="0" height="100">
   <text><input>ls -l /</input></text>
  </hbox>
  <button ok></button>
 </vbox>'
gtk2dialog -p S &

export S='<vbox height-request="200" width-request="500" space-expand="false" space-fill="false">
  <text><label>GTK2 scrollbar deactivated</label></text>
  <hbox scrollable="true" vscrollbar-policy="2" height="100">
   <text><input>ls -l /</input></text>
  </hbox>
  <button ok></button>
 </vbox>'
gtk2dialog -p S &

export S='<vbox height-request="200" width-request="500" space-expand="false" space-fill="false">
  <text><label>GTK3 scrollbar activated</label></text>
  <hbox scrollable="true" vscrollbar-policy="0" height="100">
   <text><input>ls -l /</input></text>
  </hbox>
  <button ok></button>
 </vbox>'
gtkdialog -p S &

export S='<vbox height-request="200" width-request="500" space-expand="false" space-fill="false">
  <text><label>GTK3 scrollbar deactivated</label></text>
  <hbox scrollable="true" vscrollbar-policy="2" height="100">
   <text><input>ls -l /</input></text>
  </hbox>
  <button ok></button>
 </vbox>'
gtkdialog -p S &

zigbert commented 2 years ago

This is how I set up a pMusic icon-theme in a layer above the global icon-theme. I am not sure if this is the best solution, so suggestions are still welcome. But it works... no stock icons.

GTK2

Link the pMusic icon theme (Nad5) to _$HOME/.icons/pMusicNad5. This directory is read by Gtk.
Add this line in the pMusic gtkrc gtk-icon-theme-name = "pMusic_Nad5"
Include the pMusic gtkrc file export GTK2_RC_FILES="$HOME/.gtkrc-2.0:/usr/local/pmusic/themes/Nad5/gtk-2.0/gtkrc
Start Gtkdialog

GTK3

Link the pMusic icon theme (Nad5) to _$HOME/.pmusic/tmp/icons/
Rename the directory to the active global theme. Eg. $HOME/.pmusic/tmp/icons/PMaterial
Link the file icon-theme.cache, Copy the file index.theme
Edit the file index.theme Inherits=PMaterial so it will search further into the actual PMaterial theme.
Settings.ini needs icon-theme definition. If missing: echo "gtk-icon-theme-name = $GTK_ICON_THEME" >> "$HOME/.config/gtk-3.0/settings.ini"
Start Gtkdialog XDG_DATA_DIRS=$HOME/.pmusic/tmp/:$XDG_DATA_DIRS gtkdialog -s --styles=/usr/local/pmusic//themes/Nad5/gtk-3.0/gtk.css

Both will now check for icon in the pMusic theme before looking in the global theme. In this process, I am cleaning the naming of the pMusic icons to match the Adwaita theme. Also trimming the minimal pMusic theme "Gtk" to add only the very required theming. Doesn't look good, but follows the global theme as much as possible.

There is still a lot work to do, but things aren't looking too bad. Still troubles with the gtkdialog issue mentioned in the previous post. I will upload a development release on the forum when code is working okish.

zigbert commented 2 years ago

Things are shaping up. I have uploaded pMusic 6.9.1 on the forum with working support of both Gtk2 and Gtk3. Including the 2 standard themes - GTK and NAD5.

Still some unsolved mysteries... I will dig into them when more time comes my way, but if you know something or like to help out, I am very thankful!

1.) Comboxentry has a fixed size. Should be much narrower... (see image below, left ring) _Code in /usr/local/pmusic/guiadd - line 190

2.) Comboboxtext has a vertical separator which I am not able to theme in the Nad5 gtk.css. (see image below, mid ring) Code in /usr/local/pmusic/themes/Nad5/gtk-3.0/gtk.css

screeny gtk3

3.) Moving a track in the playqueue is not showing destination when hovering, as in Gtk2 (The thin red line in the image below). This is critical because the drag'n'drop feature is a huge workaround. If user drops track on top of another, nothing is moved. Only if user is dropping the track between tree-items, the move will work. Therefor we need an indication of dropping is happening on the correct place.

screeny3 gtk3

4.) The active notebook tab are getting out of sight when placed at left. (see image below, left ring) _Code in /usr/local/pmusic/funcconfig - line 562

5.) The frame around notebooks lack a line at top. (see image below, right ring) Code in /usr/local/pmusic/themes/Nad5/gtk-3.0/gtk.css - line 245

screeny2 gtk3

Thanks for any help!

dimkr commented 2 years ago

@zigbert Why not just use the system theme? GTK+ 3/4 themes are very delicate and small changes can easily break a specific UI element in one application. Maintaining a GTK+ theme is no fun.

zigbert commented 2 years ago

@dimkr Absolutely! pMusic uses the system theme by default, and that will work for most users. - pMusic is a simple player meant for simple tasks. But it is also a rather complex piece of code for those who wants more music options. The shown theme in my post above is a unique pMusic outfit to clean up the more complex user interface. But it's optional!

Another thing is that pMusic is made to be a showcase of Gtkdialog, and I felt it right to solve also this challenge... - Advanced theming for both Gtk2 and Gtk3 within a unified code.

This is how pMusic COULD look with the system theme ZXP in Slacko 7. I strive for a clean and simple UI, but sometimes I need help from a theme.

screeny(9)

zigbert commented 1 year ago

Done - just minor issues left https://github.com/puppylinux-woof-CE/woof-CE/commit/77af3af1cd10c3102f0329ee3f607b7a551db41f

puppylinux-woof-CE / woof-CE

pMusic and Gtk3 #3158

Simple idea

shot of code

shot of GUI