Mer/Documentation/Desktop layout: Difference between revisions

From Maemo Wiki
Jump to navigationJump to search
← Older edit
imported>amigadave
imported>stskeeps
imported>amigadave
{{Mer}}
 
(17 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== Layout for Hildon Desktop on Mer ==
{{Mer}}
 
== Freemantle desktop specification ==
 
== Desktop screen ==
 
=== 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]
General outline: [http://tabletui.files.wordpress.com/2009/02/task_man_3items1.jpg?w=480&h=640 here]


Pre-artwork implementation: http://www.daimi.au.dk/~cvm/mer-ui-implemented.png
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 12: Line 48:
*Position: Top of screen, disappears in full screen.
*Position: Top of screen, disappears in full screen.


The following equation must be satisified: 86 + 52 + A * 42 + 52 = Width of screen, A = ((Width of screen) - 190) / 42
Background: marquee_background.png, 18x52, repeating


X = A / 3 (integer division)
Width of screen = 90*3+A*48+S, A integer, X = 1/3 * A, Y = 2/3 * A, S remainder


Y = A - X (integer division)
A = (Width of screen - 90 * 3) / 48 (integer division)
 
Z = Width of screen - 138 - A * 42, Z > 52
 
<PRE>
# New marquee at the top
style "hildon-navigator"
{
  bg_pixmap[NORMAL] = "../images/mb_marquee_background.png"
}
class "HildonDesktopPanelWindow" style "hildon-navigator"
</PRE>
 
../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 37: Line 61:


*Example: http://www.daimi.au.dk/~cvm/mer-appmenu.png
*Example: http://www.daimi.au.dk/~cvm/mer-appmenu.png
*Width: 86px, icon: 48x48
*Width: 90px, icon: 48x48, but should be scalable
*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 , needs to be part of theme template
*Widget icon: qgn_grid_tasknavigator_others , http://s51.radikal.ru/i133/0903/7d/f77074ef093e.png , part of theme template


==== Second element: Menu button ====
==== Second element: Menu button ====
Line 46: Line 70:


*Example: http://www.daimi.au.dk/~cvm/mer-menubutton.png
*Example: http://www.daimi.au.dk/~cvm/mer-menubutton.png
*Width: 52px, icon: 48x48
*Width: 90px, 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
*Icon name: qgn_mer_menubutton , http://s50.radikal.ru/i129/0903/ca/21d1a72a64f5.png, part of theme template


==== Third element: Quick task switcher ====
==== Third element: Quick task switcher ====
Line 56: Line 80:


*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
*Width: X items of 42px, X > 0, icons 32x32px
*Width: 1/3 times A (integer) items of 56px, X > 0, icons 48x48px
*Description: Shows current application and X others
*Description: Shows current application and X others


Line 64: Line 88:


*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
*Width: Y items of 42px, Y > 0, icons 32x32px
*Width: Y items of 48px, Y > 0, icons 48x48px
*Description: Shows current status bar area
*Description: Shows current status bar area


==== Fifth element: The magic X ====
==== Sixth 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: Z px, Z > 52, 48x48 px icon
*Width: 90px, 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
*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

Latest revision as of 09:35, 22 September 2010

 Mer is back : Please visit http://www.merproject.org to learn more about this news.


Freemantle desktop specification

Desktop screen

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: here

New-artwork ideas: http://i041.radikal.ru/0903/5f/5cf0986d63e7.jpg

Touch pixel sizes from https://help.ubuntu.com/community/UMEGuide/DesigningForFingerUIs

Marquee

Implemented in h-d, r1145

  • Height: 52px, Width: As wide as the screen
  • Position: Top of screen, disappears in full screen.

Background: marquee_background.png, 18x52, repeating

Width of screen = 90*3+A*48+S, A integer, X = 1/3 * A, Y = 2/3 * A, S remainder

A = (Width of screen - 90 * 3) / 48 (integer division)

S = Width of screen - 270 - A * 48

First element: Application menu button

Implemented, h-d r1147

Second element: Menu button

Implemented in lp:~mer-committers/m-r/marquee-plugins r2

Third element: Quick task switcher

Implemented in h-d r1148

Fourth element: Status bar

Implemented in h-d, r1149

Sixth element: The magic X

Implemented in h-d, r1150

Icons for closing within this: http://i013.radikal.ru/0903/e1/5c85d73dcb42.png

Retrieved from "http://wiki.maemo.wunderwungiel.pl/index.php?title=Mer/Documentation/Desktop_layout&oldid=30555"