No announcement yet.

Customizing the look & feel

  • Filter
  • Time
  • Show
Clear All
new posts

  • Customizing the look & feel

    OK, here goes some info about the possible customization. There are two levels of customization of the UI look:

    1. Changing the layout, colors and bitmaps of the current interface skin - this is very easy and does only require a text editor and in case of images, some sort of drawing application.

    2. Complete change of the GUI. All the built-in classes that represent the user interface objects can be replaced by classes from a custom bundle. These bundles are regular Cocoa bundles and creation of them requires Xcode, knowledge of Objective C programming and our SDK, which is available on request.

    For the moment, we will stick with the color, layout and bitmap customization. All the relevant files can be found inside the application bundle, typically in /Applications/ Some bitmaps, specific to particular modules can be found in the folders of these modules, for example /Applications/

    The bitmaps are stored in the Resources folder(s) as simple TIFF or PNG files. There are two kinds of bitmaps - those that have their own colors and those that are colored by the application automatically according to the color settings in preferences. The first type of the icon is a normal TIFF. The other type has the full rectangle filled with black color and the actual icon stored in the alpha channel as negative (see attachment). The images that QCar should color have "+" as the first character of the file name. You can completely replace the icons with your own by replacing the files, it is as easy as that.

    The screen background can be easily overwritten by placing a file named QCarScreenBackground_AAA_BBB.png into the application bundle (TIFF should work too). AAA is the screen width and BBB is the screen height. You can also provide a separate background that should be used for night color scheme - that would be called QCarScreenNightBackground_AAA_BBB.png

    The layout and color are stored in several files with filenames in the format ScreenSetup_AAAxBBB.plist or ScreenSetup_AAAxBBB_TS.plist. Files with _TS suffix are for touchscreen and generally contain the same setup, except the additional button bar at the (mostly) bottom edge of the screen. The files are standard Apple Property List files in either plaintext or ASCII XML format. You can edit them using Apple's Property List Editor or with any decent text editor ( is fine).

    The contents of the file is self-explanatory (or at least we hope) ;-) but just to be sure, few tips:

    - Any color values are expressed as strings in "R G B" format, where the color values are from 0 to 1. Therefore "0 .5 0" is a medium green color and ".18 .18 .18" is the 18% grey.

    - The name of color-related key/value pairs are kind of self-explanatory, but there are too many of them and we are working on a cheat-sheet with screenshots where the areas of particular colors are marked and linked to the setup values. In the future, we will have an application for creation and editing of these files, but for now, you will have to experiment a little.

    - The sizes and bounds descriptions are using the standard Cocoa coordinate system, where [0,0] is the bottom left corner of the screen and x is the first coordinate. A 32x64 pixels rectangle starting at point [4,16] is then written down as "{{4,16},{32,64}}"

    - You can define any number of slots for modules and for icons in Icons and Slots. For an icon slot, you only need to specify the rectangle of the bounds, for module slot you need to give the border as well. The border is in {a, b, c, d} format, where a is the width of the frame on the bottom side, b is the right side, c is top side and d is left side of the slot.

    - A workarea has Border and Frame (= bounds) and optionally can have a "Popup" key/value pair (see the 640x480 setup in the standard application bundle). If popup has value "YES", then the workarea will not be displayed until a module has been activated. If the value is "NO" or the key/value pair is not present, the workarea will always be displayed.

    - SupportsMouse key/value pair determines, whether and how mouse (and therefore a touch screen) is handled. If the value is "No", then the mouse is ignored. If the value is "Yes", the mouse can be used. This key/value pair can also be used to display the buttons for the most common actions. To do so, you need to specify the edge of the screen to which the button bar should go (T,R,B or L) and the size of the buttons. "R32" for example creates a button bar 32pt wide and located at the right hand edge of the screen.

    Attached is also an example of custom 800x600 setup with a little bit more civilised layout than the default one in the application.
    Attached Files

  • #2
    pretty cool, do you have some drop-in theme/gui changes? did you fix your demo movies so I can watch them?


    • #3
      There is nothing wrong with the movies. Can you let me know what error you are getting when you try to download them?

      And at the moment, we do not have a full alternate skin to replace the default one. We created one just to test the conecpt, but then we made some extensions to the default skin and we have not yet included these in the alternate skin. When we can find some time to document it a bit better, we will release the sources as an example in case someone wants to write a custom skin.


      • #4
        I just downloaded them and played them back on my machine. They won't stream from your server..