gui code guidelines

classic Classic list List threaded Threaded
23 messages Options
12
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

gui code guidelines

zigbert
This post was updated on .
I try to set up some guidelines for working with the gui-code?
- Only touch gui-related code
- Take advantages of the recent gtkdialog features
- Allow scaling of all windows
- Keep all windows below 600x800 pixels
- Clean up gui with unified look
- Make gui code more human readable
- Change gtkdialog3/4 to gtkdialog
- Keep interfaxce touch-friendly
- All text should be set by gettext
- Consider gtkdialog over gxmessage/Xdialog
- Use icon on buttons.
- Place cancel/ok/apply buttons to the bottom-right - help button to bottom-left
- Use window-placement="1" instead of --center. This makes scaling work better
- Do not center a window the user has started. This should be used for pop-ups
- use svg instead of xpm


Any thoughts ?

______________________________________________________

EDIT
My project has become a bit more ambitious than the first brainstorming.
The guidelines are still important, but the new puppy-stock-icons (usr/share/pixmaps/puppy) will also give a much more efficient Puppy (imho). I will build icons as I replace gui code in the woof apps.
You might think the reason for a new icon-theme is to simply replace the older. - Think again :)

- The new icons are vector files (svg) so they will look much better than the existing raster files (xmp).
- The new files works for small icons as well as big icons. We get one icon source rather than 2 as today (mini-icons for menu/ppm and midi-icons for desktop)
- We shrink the size of Puppy, since the Puppy-stock-icons will be smaller than the icons today. In addition, the desktop icons are *.png and are already compressed. Svg are pure text and will be much smaller in the compressed Puppy iso.
- Since the icons look good in 60px as well as 16px, we can use the icons for a general facelift. This is seen in the recent uploaded woof-apps like bcrypt, xdelta and pupcamera.
- We can increase the size of the wm menu without getting heavily pixelated icons. This is 'required' if we intend to support touch-screens.
- The default size of the puppy-stock-icons is drawn with 100x100 pixels, but scaled down to 20x20 pixels to have the same size as the gtk-button icons. By rescaling (sed oneliner), we can change size of button-icons in one click.  gtk-button-size has to be set as well. This will be very handy for touch-screen users. Note! My woof-gui-upgrade uses gtk-icons when existing. - this to look the same as apps used in Puppy which not comes from Woof.
- With one unified theme you can drag menu-items (*.desktop files) to the desktop, and get a good looking icon (which is familiar with existing desktop icons). This means we can add the feature; 'add app to desktop'. Well, a woof-maintainer should rename those way-too-long filenames in /usr/share/applications/.
- I focus on a dark theme, but think it would be great if we could include a light one for those who like a darker graphical theme (like myself).
- The Icon-theme-switcher will also switch icons for menu-items and woof-apps using  puppy-stock-icons as well as the desktop icons.
- In the end, the puppy-stock-icons is one of the pieces that fits in a global theme-app.
One click, and you switch from mouse-usage to touch-screens.
One click, and you switch from a bright daylight-theme to the dark evening mode.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

Karl Godt
Administrator
I am not so much a gui man and gtkdialog is pretty difficult to learn .

Googling for gtkdialog tutorial, brings up only your much too long thread at the murga forum .



I still am slightly pissed since Barry's change from #!/bin/sh to #!/bin/ash in gtkdialog-splash made one of my pinstallscripts unworkable .

Why the hell only gtkdialog-splash ? There are so many scripts that could be ash ..



Personally I use xmessage where ever I can .

Coding with <tags> is also not everybody's favor . Xdialog works but it is hackish patched by Dougal .

I for myself would talk about using YAD then instead of Xdialog .


But these are just my thoughts .

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

Karl Godt
Administrator
In reply to this post by zigbert
gtkdialog crap : PPM
http://i40.tinypic.com/21oab0z.jpgppm hangs

Wants to download and nothing happens and the GUI is a concrete plate without any trees and buttons - no possibilities to act further .

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

shinobar
This post was updated on .
In reply to this post by zigbert
Yes, we need a guideline.

zigbert> - Take advantages of the recent gtkdialog features

I do not think so.
Very often, I had to modify recent scripts to make backward compatible.
I think recent gtkdialog features should be used only when the feature is necessary.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

shinobar
In reply to this post by zigbert
zigbert> - All text should be set by gettext
Of course.
And I want to add:
- Not too verbose.
- Icons for all buttons and anywhere it can be a help.
An icon is better than verbose text, I think.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

shinobar
In reply to this post by zigbert
Messages to be classified:
1. Complete
Everything well and going to finish. Nothing to do with the user.
2. Info
Just a information. Nothing to do for the user.
3.Option
The user can change the options.
4.Selection
The user need to select options to proceed.
5.Warning 1
Just a warning. Nothing to do with the user.
6. Waring 2
The user can change the options to continue.
7.Error
The user can do something to continue.
8.Fatal
No way to continue. Nothing to do with the user.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

zigbert
In reply to this post by shinobar
I do some minor syntax changes, but I am not good enough in english to give a better explanation than Barry.
Yes, I agree that Barry has a technical approach. :)

Icons will come


Sigmund
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

zigbert
In reply to this post by zigbert
- Use window-placement="1" instead of --center. This makes scaling work better
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

zigbert
In reply to this post by zigbert
- use svg instead of xpm
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

zigbert
In reply to this post by zigbert
- Do not center a window the user has started. This should be used for pop-ups
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

Volhout
In reply to this post by zigbert
Hello Zigbert,

I have been using puppy over the years with different computers and different screen sizes.
Maybe there is merit in idea's brought up 6 month ago for TLP (Top Left corner Puppy) where everything is aligned to the top left corner. There is a thread on the murga forum about it.

Another thing I would like to bring up is a "grid" on the desktop. In PUPPY the desktop icons are aligned per default, but if you ever tried re-arranging them you know what I talk about. Additionally: the drive icons are not on that same "imaginary" grid that puppy uses default. They are aligned toward the bottom of the screen.

If you ever tried dual screen with different sizes you know what this post is about.

If this is beyond the scope of woof-CE then ignore the proposals.

Volhout
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

Karl Godt
Administrator
That is not part of a general (gtkdialog4/gtkdialog-8.0)GUI thread,
this is part of the internal structures of the various xorgwizards, pup_event_frontend_d and /usr/sbin/eventmanager (/etc/eventmanager) .

Volhout, please give a link to Top Left corner Puppy .

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

Volhout
TLC (Top Left Corner Puppy):

http://www.murga-linux.com/puppy/viewtopic.php?search_id=1200062337&t=84275

Sorry that I interrupted your thread. I am very curious how this project works out....
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

mavrothal
In reply to this post by Volhout
> Another thing I would like to bring up is a "grid" on the desktop. In PUPPY the desktop icons are aligned per default, but if you ever tried re-arranging them you know what I talk about.

I believe this to be ROX-filer option as described here http://murga-linux.com/puppy/viewtopic.php?p=236387#236387
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

Karl Godt
Administrator
In reply to this post by Volhout
Thanks for the link ! It's actually pupNgo, which is for hardware like Pentium-I till Pentium-III me guesses .
I don't own much such hardware and it's rotting n some corner (P-II 266MHz and P-III 650Mhz - even cannot easily get RAM for these) , because loud and noisy and for current internet not usable any more (advertising,flash) .
Would have not read that project then .

But anyway, if you want the tray on top, you can either set the ~/.jwmrc-tray file line like this :
<Tray  autohide="false" insert="right" x="0" y="0" border="1" height="28" >
mainly set y="0" instead of "-1"

and the drive icons position is set in /etc/eventmanager :
#left, right, bottom, or top of screen...
ICON_PLACE_ORIENTATION='top'

jwmconfig GUI should also be able to sed into jwmrc-tray the top or bottom value in one of it's sub-menus,
and my private eventmanger GUI has a notebook-tab for selecting the drive-icon position .
 eventmanager icon placement


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

zigbert
In reply to this post by zigbert
My project has become a bit more ambitious than the first brainstorming.
The gui-lines is still important, but the new puppy-stock-icons (usr/share/pixmaps/puppy) will also give a much more efficient Puppy (imho). I will build icons as I replace gui code in the woof apps.
You might think the reason for a new icon-theme is to simply replace the older. - Think again :)

- The new icons are vector files (svg) so they will look much better than the existing raster files (xmp).
- The new files works for small icons as well as big icons. We get one icon source rather than 2 as today (mini-icons for menu/ppm and midi-icons for desktop)
- We shrink the size of Puppy, since the Puppy-stock-icons will be smaller than the icons today. In addition, the desktop icons are *.png and are already compressed. Svg are pure text and will be much smaller in the compressed Puppy iso.
- Since the icons look good in 60px as well as 16px, we can use the icons for a general facelift. This is seen in the recent uploaded woof-apps like bcrypt, xdelta and pupcamera.
- We can increase the size of the wm menu without getting heavily pixelated icons. This is 'required' if we intend to support touch-screens.
- The default size of the puppy-stock-icons is drawn with 100x100 pixels, but scaled down to 20x20 pixels to have the same size as the gtk-button icons. By rescaling (sed oneliner), we can change size of button-icons in one click.  gtk-button-size has to be set as well. This will be very handy for touch-screen users. Note! My woof-gui-upgrade uses gtk-icons when existing. - this to look the same as apps used in Puppy which not comes from Woof.
- With one unified theme you can drag menu-items (*.desktop files) to the desktop, and get a good looking icon (which is familiar with existing desktop icons). This means we can add the feature; 'add app to desktop'. Well, a woof-maintainer should rename those way-too-long filenames in /usr/share/applications/.
- I focus on a dark theme, but think it would be great if we could include a light one for those who like a darker graphical theme (like myself).
- The Icon-theme-switcher will also switch icons for menu-items and woof-apps using  puppy-stock-icons as well as the desktop icons.
- In the end, the puppy-stock-icons is one of the pieces that fits in a global theme-app.
One click, and you switch from mouse-usage to touch-screens.
One click, and you switch from a bright daylight-theme to the dark evening mode.

This text is added to the first post
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

mavrothal
Administrator
All these are very valid but what I find also very interesting in your admirable effort is that is going to give puppy a unique distinct look too!
Way to go!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

01micko
Administrator
In reply to this post by zigbert
Until further notice....

GUI enhancements that are well tested and bullet proof ( ..well close enough) should be requested to be pulled in to master. I'll reconcile those commits with testing as from now on there will be some kernel/firmware tinkering going on.

I built a reasonably sane squeeze puppy from the current master branch, so woof-CE as it is can build a distro on par stability wise with woof2-BK.

GUI enhancements that present a risk and need wider testing, please send the pull request to testing. Hopefully, when we get somewhere near with the new kernel firmware loading mechanism I'll build a slacko and upload.

Cheers!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

mavrothal
Administrator
In reply to this post by zigbert
Zigbert,
in case you miss it take a look at this
https://github.com/puppylinux-woof-CE/woof-CE/issues/83
It happens to me and took few minutes to realize :-)
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: gui code guidelines

zigbert
I don't think I have changed anything from the original fontwizard else than pure gui - no values. Would be great if we knew how fontwizard acts.
12
Loading...