Editing Mer/Documentation/Desktop layout

Warning: You are not logged in. Your IP address will be recorded in this page's edit history.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision Your text
Line 1: Line 1:
-
{{Mer}}
+
== Layout for Hildon Desktop on Mer ==
-
== Freemantle desktop specification ==
+
General outline: [http://tabletui.files.wordpress.com/2009/02/task_man_3items1.jpg?w=480&h=640 here]
-
== Desktop screen ==
+
Pre-artwork implementation: http://www.daimi.au.dk/~cvm/mer-ui-implemented.png
-
 
+
-
=== Marquee (top bar) ===
+
-
 
+
-
Height: 52 px, as wide as screen
+
-
 
+
-
From left to right:
+
-
 
+
-
WM button, different states: (align left)
+
-
* Applications menu (no applications opened)
+
-
** Upon click, go to Applications menu
+
-
* Task switcher
+
-
** Upon click, go to Task switcher
+
-
* Notification in task switcher
+
-
 
+
-
Separator: air
+
-
 
+
-
Status area: (align left)
+
-
* Clock
+
-
* 16x16 icons, when clicked, full status area comes up
+
-
 
+
-
Separator: air
+
-
 
+
-
Title bar: (align left)
+
-
* Not in use on non-telephony devices?
+
-
 
+
-
== Applications menu display ==
+
-
 
+
-
* Pannable area of all applications launchable?
+
-
 
+
-
== Hildon desktop specification ==
+
-
 
+
-
General outline: [http://tabletui.files.wordpress.com/2009/02/task_man_3items1.jpg?w=480&h=640 here]
+
New-artwork ideas: http://i041.radikal.ru/0903/5f/5cf0986d63e7.jpg
New-artwork ideas: http://i041.radikal.ru/0903/5f/5cf0986d63e7.jpg
-
 
-
Touch pixel sizes from https://help.ubuntu.com/community/UMEGuide/DesigningForFingerUIs
 
=== Marquee ===
=== Marquee ===
Line 48: Line 14:
*Position: Top of screen, disappears in full screen.
*Position: Top of screen, disappears in full screen.
-
Background: marquee_background.png, 18x52, repeating
+
The following equation must be satisified: 86 + 52 + A * 42 + 52 = Width of screen, A = ((Width of screen) - 190) / 42
 +
 
 +
X = A / 3 (integer division)
 +
 
 +
Y = A - X (integer division)
 +
 
 +
Z = Width of screen - 138 - A * 42, Z > 52
-
Width of screen = 90*3+A*48+S, A integer, X = 1/3 * A, Y = 2/3 * A, S remainder
+
<PRE>
 +
# New marquee at the top
 +
style "hildon-navigator"
 +
{
 +
  bg_pixmap[NORMAL] = "../images/mb_marquee_background.png"
 +
}
 +
class "HildonDesktopPanelWindow" style "hildon-navigator"
 +
</PRE>
-
A = (Width of screen - 90 * 3) / 48 (integer division)
+
../images/mb_marquee_background.png: PNG image, 18 x 52, 8-bit/color RGBA, non-interlaced
-
S = Width of screen - 270 - A * 48
 
==== First element: Application menu button ====
==== First element: Application menu button ====
Line 61: Line 39:
*Example: http://www.daimi.au.dk/~cvm/mer-appmenu.png
*Example: http://www.daimi.au.dk/~cvm/mer-appmenu.png
-
*Width: 90px, icon: 48x48, but should be scalable
+
*Width: 86px, icon: 48x48
*Description: Mer logo or proper icon for application menu. Upon press, it highlights and shows application menu.
*Description: Mer logo or proper icon for application menu. Upon press, it highlights and shows application menu.
-
*Widget icon: qgn_grid_tasknavigator_others , http://s51.radikal.ru/i133/0903/7d/f77074ef093e.png , part of theme template
+
*Widget icon: qgn_grid_tasknavigator_others , http://s51.radikal.ru/i133/0903/7d/f77074ef093e.png , needs to be part of theme template
==== Second element: Menu button ====
==== Second element: Menu button ====
Line 70: Line 48:
*Example: http://www.daimi.au.dk/~cvm/mer-menubutton.png
*Example: http://www.daimi.au.dk/~cvm/mer-menubutton.png
-
*Width: 90px, icon: 48x48
+
*Width: 52px, icon: 48x48
*Description: The former Hildon title bar, but since we don't have titlebars anymore, we have a menu button
*Description: The former Hildon title bar, but since we don't have titlebars anymore, we have a menu button
*Implemented by: marquee-plugins, drop-down-menu.c
*Implemented by: marquee-plugins, drop-down-menu.c
-
*Icon name: qgn_mer_menubutton , http://s50.radikal.ru/i129/0903/ca/21d1a72a64f5.png, part of theme template
+
*Icon name: qgn_mer_menubutton , http://s50.radikal.ru/i129/0903/ca/21d1a72a64f5.png
==== Third element: Quick task switcher ====
==== Third element: Quick task switcher ====
Line 80: Line 58:
*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
-
*Width: 1/3 times A (integer) items of 56px, X > 0, icons 48x48px
+
*Width: X items of 42px, X > 0, icons 32x32px
*Description: Shows current application and X others
*Description: Shows current application and X others
Line 88: Line 66:
*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
-
*Width: Y items of 48px, Y > 0, icons 48x48px
+
*Width: Y items of 42px, Y > 0, icons 32x32px
*Description: Shows current status bar area
*Description: Shows current status bar area
-
==== Sixth element: The magic X ====
+
==== Fifth element: The magic X ====
''Implemented in h-d, r1150''
''Implemented in h-d, r1150''
*Example: http://www.daimi.au.dk/~cvm/mer-xmenu.png
*Example: http://www.daimi.au.dk/~cvm/mer-xmenu.png
-
*Width: 90px, 48x48 px icon
+
*Width: Z px, Z > 52, 48x48 px icon
*Description: The former >>, the switcher menu, shows up when number of applications active > 0
*Description: The former >>, the switcher menu, shows up when number of applications active > 0
*Icon: qgn_list_tasknavigator_appswitcher , http://s51.radikal.ru/i134/0903/84/e7c91bfbf9ce.png
*Icon: qgn_list_tasknavigator_appswitcher , http://s51.radikal.ru/i134/0903/84/e7c91bfbf9ce.png
Icons for closing within this: http://i013.radikal.ru/0903/e1/5c85d73dcb42.png
Icons for closing within this: http://i013.radikal.ru/0903/e1/5c85d73dcb42.png

Learn more about Contributing to the wiki.


Please note that all contributions to maemo.org wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see maemo.org wiki:Copyrights for details). Do not submit copyrighted work without permission!


Cancel | Editing help (opens in new window)

Templates used on this page: