Author Topic: Touch Friendly UI  (Read 5421 times)

0 Members and 1 Guest are viewing this topic.

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2592
  • Total likes: 289
  • Helpful: 89
  • D'oh
    • by An_dz
  • Languages: PT, EN, (it, de)
Touch Friendly UI
« on: May 27, 2013, 02:27:52 AM »
So I started messing with the Simutrans code. I'm working on a Touch friendly interface. I've been working on this for some time and it has enough dialogs done. I also translated some German comments to English.

The goal is make Simutrans interface touchable but also enhance it for non-touchable devices. I know ӔO have a surface pro, but his screen is '208dpi' while mine is '101dpi'. He can try disabling High DPI settings in compatibility tab in file properties. (Simutrans will probably look blurry, but buttons will have the right size)

Some features
  • Open main menu buttons only if clicked and released in same button
  • Main menu scrollable with click-drag when window size is smaller than menu
  • Enlarged buttons, checkboxes, title bar and other elements for touch devices.
  • Rearranged windows to be usable from 320x480 (iPhone 1 size/iPhone DPI may be a problem).
  • Depot window is way smaller, giving more area for the map.
  • Changed fixed numbers that represented title bar height to its variable D_TITLEBAR_HEIGHT
  • Translated some German comments to English (Some that I could understand), plus fixed some typos for English
  • Run title bar button (gadget) action only if clicked and released in same button (gadget)
  • Window will rollup (minimize) with double click in title bar too
  • Changed some bottom bar info when screen is smaller to fit the required info and don't overlap text
  • Changed the banner text colors, I think they are more readable and soft.

Somewhat complete dialogs, some are still buggy: (dialogs outside this list are totally incomplete or almost)

Little todo list:
  • IPhone Landscape mode
  • main menu don't move on window resize - werkzeug_waehler
  • break text in halt_info and convoi_info
  • add capacity bars in halt_info

Download
You'll need a new menu skin, place the file menus.WindowSkin.pak in skins folder (will only work for paks without Window Skins in pak folder). For pak96.comic, copy menus.WindowSkin96.pak to pak96.comic folder.
When you go play standard Simutrans, remove the new skin files.

New window skin
Window GDI executable
Patch file
« Last Edit: February 25, 2014, 03:30:03 PM by An_dz »

Offline Dwachs

  • DevTeam, Coder/patcher
  • Administrator
  • *
  • Posts: 4247
  • Total likes: 175
  • Helpful: 149
  • Languages: EN, DE, AT
Re: Touch Friendly UI
« Reply #1 on: May 27, 2013, 05:29:42 AM »
Nice :) Gratulations for making a patch :)

Some comments from the top of my head:

(1) Could create a branch off aburch/master at github? This could make it easier to merge parts of your code, see (2)

(2) These translations can very well be submitted to trunk, if you supply a separate patch for this. Imho header should not be touched, they should be unified for the whole project in one go.

(3) It would be much more convenient and would increase merge chance and maintainability if you could use the constants in gui_frame.* and just increase / double their value. Then you do not have magic multipliers scattered through the code. And one could make this constants configurable by user / pakset without modifying the code.


Parsley, sage, rosemary, and maggikraut.

Offline Markohs

  • DevTeam, Coder/patcher
  • Devotee
  • *
  • Posts: 1559
  • Total likes: 2
  • Helpful: 86
  • Languages: EN,ES,CAT
Re: Touch Friendly UI
« Reply #2 on: May 27, 2013, 10:13:08 AM »
Nice work!

I'd point a few ideas/concepts:

* You already know for sure but file load/save dialogs look very weird now, that needs fixing:



* Even this changes make for sure the game way more playable in touch screens, the visual elements look certainly too big for a desktop computer screen. Using constant macro definitions of sizes looks like a too unflexible way to implement this, maybe it's time to layout all those sizes in a "theme" concept and be able to switch it in-game? We can't trust for example a Windows 8 machine not being a touchpad nowadays, distributing two executables one for desktop and another for pad might not be a good solution. Can't we extend the "theme" concept in simutrans fto make it more flexible?

* Dwachs suggests making this variable dimiensions configurable in each pak. I'd go farther and create a "theme" concept, that whould be applicable to the game. So you can install paks *AND* themes. A theme designed for touachpads, another for maybe phones and another for desktop computers. And being able to switch them on the fly, in-game.

Offline VS

  • Senior Plumber (Devotee)
  • Devotee
  • *
  • Posts: 4849
  • Total likes: 25
  • Helpful: 63
  • Vladimír Slávik
    • VS's Simutrans site
  • Languages: CS,EN
Re: Touch Friendly UI
« Reply #3 on: May 27, 2013, 10:47:16 AM »
Absolutely +1 for all Markohs points. Extending skins to include the numbers for layout and everything else would be just great :) Of course, a question is who will write all that? So I'm just saying this would be nice... :)

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

Offline Markohs

  • DevTeam, Coder/patcher
  • Devotee
  • *
  • Posts: 1559
  • Total likes: 2
  • Helpful: 86
  • Languages: EN,ES,CAT
Re: Touch Friendly UI
« Reply #4 on: May 27, 2013, 11:12:54 AM »
I volunteer to implement this once I finish the world slopes code, but if anyone wants to implement it ofc I don't have any problem finding other project to do. I also fancy having a look to Ters last OpenGL code and try to extend it.

Offline prissi

  • Developer
  • Administrator
  • *
  • Posts: 8795
  • Total likes: 319
  • Helpful: 229
  • Languages: De,EN,JP
Re: Touch Friendly UI
« Reply #5 on: May 27, 2013, 09:14:40 PM »
Many dialogues are already scaleable using the constants from gui_frame. Hajos current IronBite uses them everywhere and did almost the same. Most of the list windows are missing, but they are anyway in for an overhaul. Thus the actual work might be even less.

However, there are two main settings (apart from icons, which were scaleable for ages). Those are the LINESPACE and BUTTON_HEIGHT stuff in gui_frame as mentioned by Dwachs. In order to properly support LINESPACE, the usage of the freetype library should be really considered, as it would result in proper font sizes for larger GUI elements.

However, this really forbids magic constants (like you did for the display of the status line for instance) and requires dynamic resizing (and caching).

The magic constants can be very easily set by simuconf.tab. One could easily add a dialoge at start time that (when the new version was detecteded) ask first if this is a touch device and only then for the language. Even paks could be replaced afterwards. Just close all dialogues and reopen them.

But I still see a problem with the GUI: How do you build rails? It was difficult enough with the old click start/click end, when one actually saw the tiles the cursor was on. How do this now? And how to scroll with a single finger. Surely drag and click has to go too.
« Last Edit: May 27, 2013, 09:22:12 PM by prissi »

Offline TurfIt

Re: Touch Friendly UI
« Reply #6 on: May 27, 2013, 09:53:13 PM »
Random thoughts:

Why add a 'main menu'. It's just yet another screen to click through.

The depot window was slightly shrunk in the overhaul I did. This patch makes it even bigger than before. Vertically that is; The complaint has always been it was too tall...

convoi -> convoy is not a valid translation. I can't really think of a nice simple English word substitution for convoi here. But convoy is most definitely wrong.

Translation strings were specifically left as "Power: %4d kW\n" rather than being split to "Power:" and "%4d KW" after much discussion on the subject...

I see several spots where this patch simply changes a fixed size to a different one. All size/positioning constants need to be moved to variables, and all sizing/positioning calc based on those and actual get_size calls of the elements. Things have been slowly moving this way, but as I'm sure you've discovered, it's rather tedious, and hence slow work.

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2592
  • Total likes: 289
  • Helpful: 89
  • D'oh
    • by An_dz
  • Languages: PT, EN, (it, de)
Re: Touch Friendly UI
« Reply #7 on: May 27, 2013, 11:22:57 PM »
(1) Could create a branch off aburch/master at github? This could make it easier to merge parts of your code, see (2)
Sure, just branched Simutrans code in GitHub.

(2) These translations can very well be submitted to trunk, if you supply a separate patch for this. Imho header should not be touched, they should be unified for the whole project in one go.
You prefer a patch file or a GitHub pull request?

(3) It would be much more convenient and would increase merge chance and maintainability if you could use the constants in gui_frame.* and just increase / double their value. Then you do not have magic multipliers scattered through the code. And one could make this constants configurable by user / pakset without modifying the code.
I see several spots where this patch simply changes a fixed size to a different one. All size/positioning constants need to be moved to variables, and all sizing/positioning calc based on those and actual get_size calls of the elements. Things have been slowly moving this way, but as I'm sure you've discovered, it's rather tedious, and hence slow work.
I changed a lot of values to gui_frame.* Constants, specially for setting margins. Some windows I changed the height calculation for set_fenstergroesse() using a 'y' variable. There are some parts, specially for setting widths, that still use fixed numbers.

* You already know for sure but file load/save dialogs look very weird now, that needs fixing:
Yes, that's why I included a list with the dialogs that have enough changes.

* Even this changes make for sure the game way more playable in touch screens, the visual elements look certainly too big for a desktop computer screen.
I like the big buttons even for my non-touch laptop, but that's me. I think they are easier to click with a mouse now.

Using constant macro definitions of sizes looks like a too unflexible way to implement this, maybe it's time to layout all those sizes in a "theme" concept and be able to switch it in-game? We can't trust for example a Windows 8 machine not being a touchpad nowadays, distributing two executables one for desktop and another for pad might not be a good solution. Can't we extend the "theme" concept in simutrans fto make it more flexible?

* Dwachs suggests making this variable dimiensions configurable in each pak. I'd go farther and create a "theme" concept, that whould be applicable to the game. So you can install paks *AND* themes. A theme designed for touachpads, another for maybe phones and another for desktop computers. And being able to switch them on the fly, in-game.
It's a nice idea but needs hard work. One of the crappiest point are the High DPI screens. How's the best approach for giving the same size in cm for a button in any screen? I think Microsoft have an article giving some ideas, I'll see if I can find it again.

But I still see a problem with the GUI: How do you build rails? It was difficult enough with the old click start/click end, when one actually saw the tiles the cursor was on. How do this now? And how to scroll with a single finger. Surely drag and click has to go too.
Not having a touch screen device makes hard to know the actual behavior and how to change it, specially for scrolling.

Why add a 'main menu'. It's just yet another screen to click through.
The options page already have all the needed commands (New/load/save/scenario/online). I wanted to make the banner smaller.

The depot window was slightly shrunk in the overhaul I did. This patch makes it even bigger than before. Vertically that is; The complaint has always been it was too tall...
Maybe because it was to long too. - And I wanted it to fit a phone screen.

convoi -> convoy is not a valid translation. I can't really think of a nice simple English word substitution for convoi here. But convoy is most definitely wrong.
I'll revert/delete.

Translation strings were specifically left as "Power: %4d kW\n" rather than being split to "Power:" and "%4d KW" after much discussion on the subject...
I split so values are right aligned.

Offline Markohs

  • DevTeam, Coder/patcher
  • Devotee
  • *
  • Posts: 1559
  • Total likes: 2
  • Helpful: 86
  • Languages: EN,ES,CAT
Re: Touch Friendly UI
« Reply #8 on: May 27, 2013, 11:59:45 PM »
The magic constants can be very easily set by simuconf.tab. One could easily add a dialoge at start time that (when the new version was detecteded) ask first if this is a touch device and only then for the language. Even paks could be replaced afterwards. Just close all dialogues and reopen them.

 This imho it's a too simple solution. I'd say this values need to be dynamically changed and have to be treated as something different thnan game settings. I'd treat them as a "theme", or "skin" or "lookandfeel" concept, that whould be described on a different .tab, .xml or whatever format is chosen, but a differnt one.

 About LINESPACE  and the freetype library you mentioned too, I think you are completely right and we should explore it. It *might* fix problems with non-latin lenaguages like thai I've read around that I'm not completely sure it has been fixed or not, and prolly other aspects of the game will be improved too.

EDIT: Elaborating this a bit more: this settings can be implemented with the already implementation of .tab files, no need to reinventing the wheel but imho have to be treated sightly different than current settings in the sense that the user should be able to select some preset settings and apply them in a whole ideally without the need of a game restart.
« Last Edit: May 28, 2013, 12:10:04 AM by Markohs »

Offline prissi

  • Developer
  • Administrator
  • *
  • Posts: 8795
  • Total likes: 319
  • Helpful: 229
  • Languages: De,EN,JP
Re: Touch Friendly UI
« Reply #9 on: May 28, 2013, 08:35:07 PM »
When saying simuconf.tab like, it could be another file. Dynamic resizing is not a big problem. One would just close everything and open it again. (Positions are already remebered, and dialogue save/load functionality is also on board.)

About power and values: You shoudl be aware that right aligned values may look fine to you but depending on font and language those may ratehr look wierd. Especially when there is a large distance between the power (or whatever) and the unit. Power (and most other) are only two Kanji at all.

Offline Markohs

  • DevTeam, Coder/patcher
  • Devotee
  • *
  • Posts: 1559
  • Total likes: 2
  • Helpful: 86
  • Languages: EN,ES,CAT
Re: Touch Friendly UI
« Reply #10 on: May 28, 2013, 10:19:29 PM »
Yes prissi, it can be another .tab file. The idea is implementing whatever it's necessary to make the user able ti select wich .tab file he wants to read (in-game, and if possible displaying a pretty name, not "desktop.tab", "pad.tab" but "Pad Theme" and "Desktop default theme" and so on), and fill all the values that .tab file contains. Basically a widget to select wich theme has to be applied, so simutrans opens the .tab, and loads all its values. Optionally you can allow the user to modify that values individually himself too, and ofc load/save them as you pointed out.

 I'd put those files in config/themes or something similar, and userdir directory too, to easen the installation of different themes. This whould be a good way to go imho, and ofc, being able to switch the skin used on-the-fly (I think this is not possible atm, but I might be wrong).
« Last Edit: May 28, 2013, 10:24:55 PM by Markohs »

Offline prissi

  • Developer
  • Administrator
  • *
  • Posts: 8795
  • Total likes: 319
  • Helpful: 229
  • Languages: De,EN,JP
Re: Touch Friendly UI
« Reply #11 on: May 28, 2013, 10:39:40 PM »
In priciple all image paks could be overloaded after creation of the world. In practice it collides with the landscape code, since it assumes the last images are the one generated by the landscape code.

But lets worry about this when we finally reach a working stage. For this any patch should be broken down, i.e. only using the existing constants (or maybe introducing one or two more at maximum) to get dialoges looking right at all sizes.

And again, line window and all list windows will get an overhaul soon.

Offline Markohs

  • DevTeam, Coder/patcher
  • Devotee
  • *
  • Posts: 1559
  • Total likes: 2
  • Helpful: 86
  • Languages: EN,ES,CAT
Re: Touch Friendly UI
« Reply #12 on: May 29, 2013, 01:01:21 AM »
Yes, we better talk about that later ofc.

Anyway if skin paks have a fixed number of items that *must* include, we can make some new functions to be able to switch and load/unload them dynamically, this is not really hard. I can understand switching paks is very difficult almost impossible, but changing skin is very doable.

But yes, you are right.

EDIT: As this discussion it's related to the new GUI I'd propose something:

* All contant definitions need to be moved to a variable in settings_t:: or umgebung_t:: , or whatever you consider necessary.
* This variables should start with a common prefix, I'd say gui_settings_*

 This will ease design and implement whatever we fancy doing later easier.
« Last Edit: May 29, 2013, 01:08:29 AM by Markohs »

Offline Max-Max

Re: Touch Friendly UI
« Reply #13 on: May 29, 2013, 02:34:55 AM »
Ohh geee....

I'm doing the same thing.
After the advice from Markho, Jamespetts and neorden I moved over my work to the standard Simutrans. I just finished the transfer and continued...

I'm implementing all the aspects of

D_MARGIN_XXX
D_X_SPC
D_BUTTON_XXX
D_TITLEBAR_HEIGHT
LINESPACE
scrollbar_t::BAR_SIZE

...and some new...

D_GADGET_SIZE
D_ARROW_SIZE

It works with buttons on the left and right.

I'm trying to remove all magic numbers and some controls have their local #defines to tweak some parameters within the control itself. I'm also trying to be backward compatible with the current pak sets in regards of aligning the different skin pics.

How many of us are doing the same work in parallell?!?
- My code doesn't have bugs. It develops random features...

Offline Ters

  • Coder/patcher
  • Devotee
  • *
  • Posts: 4807
  • Total likes: 191
  • Helpful: 108
  • Languages: EN, NO
Re: Touch Friendly UI
« Reply #14 on: May 29, 2013, 04:44:56 AM »
Maybe you should try to keep right-to-left languages in mind as well. Even if you don't get it working, try not to do something new that makes it harder to do later.

Offline Markohs

  • DevTeam, Coder/patcher
  • Devotee
  • *
  • Posts: 1559
  • Total likes: 2
  • Helpful: 86
  • Languages: EN,ES,CAT
Re: Touch Friendly UI
« Reply #15 on: May 29, 2013, 07:31:57 AM »
Yes,  I noticed you were both doing more or less the same but I didn't  pointed that to you because I don't think I should decide what you should do with your own time. :-)

 but it would be nice if you both coordinate so you both make complmentary code. there is enough work for you both to split the work.

Personally I'd suggest  one of you focusing the conversion of macro constants into variables and its enumeration anf naming and maybe the other exploring the freetype library usage. You can also implement the theme thing I suggested,   the  in-game skin swap without need of a game restart.  Or something else. I just suggest issues. :-)

Offline prissi

  • Developer
  • Administrator
  • *
  • Posts: 8795
  • Total likes: 319
  • Helpful: 229
  • Languages: De,EN,JP
Re: Touch Friendly UI
« Reply #16 on: May 29, 2013, 02:51:34 PM »
I woudl also suggest on going dialogue by dialoge (and some dialogues are already tweaked like that). THat woudl make duplicate work less likely and would also make debugging easier.

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2592
  • Total likes: 289
  • Helpful: 89
  • D'oh
    • by An_dz
  • Languages: PT, EN, (it, de)
Re: Touch Friendly UI
« Reply #17 on: May 31, 2013, 06:04:27 PM »
The translations (what I could understand) and fixed typos are committed in GitHub as Dwachs said it would be better:
https://github.com/An-dz/simutrans/commit/f04c0abcca13d70fac817cfce866f5d9d872ae76

Edit:
I included some description of the file at the start of them as a documentation of what the file is about.
« Last Edit: May 31, 2013, 06:09:34 PM by An_dz »