Author Topic: Window Appearance in ES/2  (Read 4246 times)

RickCHodgin

  • Guest
Window Appearance in ES/2
« on: November 22, 2018, 12:45:59 pm »
Does anybody have any suggestions on what a modern GUI window should look like?  I plan to add skins to make themes super easy without programming.

If you have a model, post three versions, each a 320 x 200 window with rectangles outlining the hotspots for the portions below, one window normal, one window mouse over, one window mouse down.

Please mention anything I'm missing below:

Rectangles:
menu
minimize
maximize
close
titlebar
inner client

Color values for:
menu background
menu text
menu shortcut letter
menu highlight background
menu highlight text
menu highlight shortcut letter
menu disabled background
menu disabled text
menu disabled shortcut letter
window background
window foreground
window highlight text background
window highlight text foreground
titlebar background
titlebar foreground

Include:
font name, size, attributes:
b-bold, i-italics, u-underline, s-strikethru, o-outline

Also a mode for how to draw the titlebar text (add values together):
0-left, 1-center, 2-right
4-normal, 8-bold
16-shadow, 32-blur, 64-darken, 128-lighten, 256-whiten,
512-opaque, 1024-transparent

Everything else will be the non-client area and will be drawn / stretched as -is to meet the window's needs, with corners and edges used for resizing.

I'll post an example using a Windows-like theme.

RickCHodgin

  • Guest
Re: Window Appearance in ES/2
« Reply #1 on: November 22, 2018, 11:58:22 pm »
Here's a sample window frame.  I think I'm going to add a menu and examples of various types of text, and then use hotspot point pixel locations to determine the color, rather than typing it in by value.

Files are:
window_normal.png -- How the window normally appears
window_over.png -- When the mouse is over portions, how do they highlight?
window_down.png -- When the mouse is clicking down on portions, how do they highlight?

Note:  It also selects the edge borders for resizing ops.

RickCHodgin

  • Guest
Re: Window Appearance in ES/2
« Reply #2 on: November 23, 2018, 04:54:20 pm »
Here they are with the other portions added.

RickCHodgin

  • Guest
Re: Window Appearance in ES/2
« Reply #3 on: November 23, 2018, 05:18:56 pm »
I plan to implement this UI in basic form for ES/1.  You'll be able to follow along here:  http://www.libsf.org:8990/projects/LIB/repos/libsf/browse/es2/ES1

I'm going to create a folder there called VID.  It will handle basic video operations for console and graphics windows.