Changes between Version 8 and Version 9 of FAQ/General Questions


Ignore:
Timestamp:
Jan 31, 2017, 8:00:35 PM (2 years ago)
Author:
Thore Böckelmann
Comment:

Legend:

Unmodified
Added
Removed
Modified
  • FAQ/General Questions

    v8 v9  
    77By default all objects get a standard frame which can be configured in the MUI preferences application, i.e. a button frame for buttons. This setting can be overridden by applications for single objects if the developer thinks that this is necessary.
    88However, for image buttons there exists a special feature which removes the frame chosen by MUI if the image comes with its own frame within the imagery and the file has a special name. For example if an image file is named "ArrowUp_framed.mim" instead of "ArrowUp.mim" MUI will set not set the standard image button frame for the created object as this would result in a double frame (one by MUI and the second by the image itself) which definitely is not intended and would look bad. In this case MUI will trust the imagery to provide a proper frame and will not draw the frame defined for image buttons.
     9
     10== How to create bitmap frames? ==
     11In addition the the fixed built-in standard frames MUI offers custom bitmap frames. Such frames require a truecolor screen to be displayed and offer full 8bit alpha blending.
     12There are a few rules to be obeyed when designing your own custom bitmap frame:
     13* the bitmap frame should be saved as PNG. The PNG image format is able to save transparency information (alpha channel) with a depth of 8 bits. In contrast to that GIF and ILBM files can handle a single transparent color only (1 bit depth).
     14* the bitmap frame image consists of 3 square base images each of which is devided up into 9 subsquares. The first (left) base image represents the normal/unpressed state of the frame. The second (middle) image represents the selected/pressed state of the frame. The third (right) image represents the frame and the content area. The full bitmap frame image must have an aspect ratio of 9:3, the subparts must have an aspect ratio of 3:3. For example, a frame design with 24x24 pixels must have a dimension of 72x24 pixels.
     15* the "corner" parts will be drawn as they are, the "side" parts will be drawn repeatedly up to the final frame dimension.
     16* the real frame parts (corner and side) of the normal and the selected images may have arbitrary imagery, including full 8bit alpha blending. However, the third (right) image must be drawn in pure black and white only. The outer white area defines the frame's thickness, while the inner black area defines the usable area for the object's contents, i.e. the label of a button. Do not use other colors than black (RGB 0/0/0) and white (RGB 255/255/255) and use a square shape only.
     17* imagine the object's final look as a combination of 3 stacked layers:\\
     18  - bottom layer: the object's background\\
     19  - middle layer: frame\\
     20  - top layer:    the object's contents (i.e. the button label)
     21
     22This makes clear that the frame's thickness should be chosen in such a way that the object's contents do not cover the non-transparent parts of the frame imagery.
     23
     24A very simple ASCII example:
     25
     26{{{
     27111122223333AAAABBBBCCCC............
     28111122223333AAAABBBBCCCC............
     29111122223333AAAABBBBCCCC............
     30111122223333AAAABBBBCCCC............
     314444    5555DDDD    EEEE............
     324444    5555DDDD    EEEE.....##.....
     334444    5555DDDD    EEEE.....##.....
     344444    5555DDDD    EEEE............
     35666677778888FFFFGGGGHHHH............
     36666677778888FFFFGGGGHHHH............
     37666677778888FFFFGGGGHHHH............
     38666677778888FFFFGGGGHHHH............
     39}}}
     40
     41corner parts: 1, 3, 6, 8, A, C, F, H\\
     42side parts:   2, 4, 5, 7, B, D, E, G\\
     43The '.' in the right image must be white pixels, the '#' must be black pixels.\\
     44The center parts of the left and middle images will be ignored and should be left transparent for consistency.
     45
     46Note that the right images defines a frame thickness of 5 pixels, whereas the
     47frame imagery might be up to 4 pixels thick only. Thus the frame will have an
     48additional space of one pixel between the frame imagery and the object contents.
     49These proportions are your design decisions. The thickness does not need to be
     50symmetrical. Even something like pixel at the top, 2 pixels on the left,
     515 pixels on the right and 4 pixels at the bottom is allowed.
     52
     53Such a frame design might be drawn like shown below. The additional inner frame
     54indicated by "+---+" is there to show the additional space between the frame
     55image and the inner contents as described above. It is not visible within the MUI GUI.
     56
     57{{{
     5811112222222222222222222222222222222222222223333
     5911112222222222222222222222222222222222222223333
     6011112222222222222222222222222222222222222223333
     6111112222222222222222222222222222222222222223333
     624444                                       5555
     634444  +----------------------------------+ 5555
     644444  |                                  | 5555
     654444  |                                  | 5555
     664444  |                                  | 5555
     674444  |     This is a normal button      | 5555
     684444  |                                  | 5555
     694444  |                                  | 5555
     704444  |                                  | 5555
     714444  +----------------------------------+ 5555
     724444                                       5555
     7366667777777777777777777777777777777777777778888
     7466667777777777777777777777777777777777777778888
     7566667777777777777777777777777777777777777778888
     7666667777777777777777777777777777777777777778888
     77}}}
     78{{{
     79AAAABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBCCCC
     80AAAABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBCCCC
     81AAAABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBCCCC
     82AAAABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBCCCC
     83DDDD                                       EEEE
     84DDDD +-----------------------------------+ EEEE
     85DDDD |                                   | EEEE
     86DDDD |                                   | EEEE
     87DDDD |                                   | EEEE
     88DDDD |      This is a pressed button     | EEEE
     89DDDD |                                   | EEEE
     90DDDD |                                   | EEEE
     91DDDD |                                   | EEEE
     92DDDD +-----------------------------------+ EEEE
     93DDDD                                       EEEE
     94FFFFGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGHHHH
     95FFFFGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGHHHH
     96FFFFGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGHHHH
     97FFFFGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGHHHH
     98}}}
     99
     100I hope this makes the basics a bit more comprehensible. In case of doubt feel free to ask. Also refer to the included frame images.
    9101
    10102== How much stack memory is required for MUI based applications? ==