Создание тем для WM 6.5

[olimo]

Обсуждение тем для WM 6.5

Там задаем вопросы и пишем свои соображения или поправки к данной инструкции.

Темы для WM 6.5

старые билды (с одинаковыми по ширине барами)
новые билды (с узким верхним и широким нижним барами)

Там выкладываем сами темы.

Структура темы

Тема для WM 6.5 представляет собой каб, внутри которого находится файл темы в формате tsk и файлы картинок баров, стрелок, границ вкладок и так далее.

Тема tsk содержит всего два изображения фона — для вертикальной и горизонтальной ориентации:
Для QVGA: stwater_240_320.jpg и stwater_320_240.jpg
Для VGA: stwater_480_640.jpg и stwater_640_480.jpg

Программ для удобного создания тем пока нет, поэтому приходится собирать вручную. Нам потребуется WinCE CAB Manager, графический редактор (например Photoshop) и (желательно) эмулятор WM 6.5 для тестирования (можно, конечно, и зверька заюзать).

Чтобы не запутаться в размерах, проще всего разобрать какую-нибудь готовую тему и сделать аналогичные картинки. Для примера возьмем дефолтную тему Classic Blue. Файл tsk находится в папке \Windows.

Скрытый текст (вы должны зарегистрироваться):

У вас нет прав чтобы видеть скрытый текст.

Открываем эту тему в WinCE CAB Manager:



Теперь мы примерно представляем фронт работ:

• создать фоны тудея для вертикальной и горизонтальной ориентации и запаковать их в тему;
• создать изображения на замену стандартным, поместить их в папку Windows и прописать пути в tsk;
• определить основные цвета.

Я достала из папки \Windows эмулятора все изображения, которые используются в теме Classic Blue.

Скрытый текст (вы должны зарегистрироваться):

У вас нет прав чтобы видеть скрытый текст.

Опишу процесс создания своей темы Nike.

1. Фоны (обои)

Готовим два фона — для горизонтальной и вертикальной ориентации. Размер должен соответствовать размеру экрана (QVGA/VGA/WQVGA/WVGA).

ПоказатьСкрыть

Внимание: это единственные изображения в формате jpg, остальные все — в png.

2. Верхний и нижний бары

В WM 6.5 бары отображаются по-разному:

1. На Today при включенном CHome (Windows Default/Titanium), в меню пуск, в некоторых стандартных настройках — отображаются указанные в теме бары + наложенные на них полупрозрачные кусочки обоев (если бары черные, получаются чуть затемненные кусочки обоев).
   В Classic Blue это выглядит так:
   
   ПоказатьСкрыть

   
2. На Today при выключенном CHome и в программах — отображаются указанные в теме бары (т.е. их можно нарисовать любыми).
   В Classic Blue это простые черные бары:
   
   ПоказатьСкрыть

   

Я хочу, чтобы в моей теме бары отображались везде одинаково (как будто просвечивает Today). Вырезаю из обоев и слегка затемняю:

nike_taskbar.png:


nike_softkeybar.png:


NB: все изображения я называю с приставкой названия темы, т.е. nike_.
Примечание. Если не использовать плагин Chome, обои на Today сдвигаются вниз на высоту верхнего бара. Как с этим бороться, не знаю

ПоказатьСкрыть

3. Стрелочки полос прокрутки

В стандартной теме эти стрелочки (, и ) квадратные 13×13, но при стандартных настройках размеров полос они не очень аккуратно растягиваются до 13×20 (см. скриншот с Resco Explorer).

Поэтому я свои рисую сразу размера 13×20:
nike_scrollbarUpArrowButton.png
nike_scrollbarUpArrowButtonDisabled.png
nike_scrollbarUpArrowButtonSelected.png

Если вы хотите сделать стрелки квадратными, добавьте в каб темы ключи реестра:

[HKEY_LOCAL_MACHINE\System\GWE]
"cyVScr"=dword:00000014
"cxHScr"=dword:00000014

4. Остальные изображения

Остальные изображения я рисую, выдерживая размеры из дефолтной темы, чтобы не мучиться потом с отступами и положениями.

Например, вот картинки, которые будут отображаться при прокрутке всплывающих меню:



В готовой теме это будет выглядеть так:

ПоказатьСкрыть

Некоторые изображения я оставляю без изменений — стрелки, закругления вкладок и т.п.
Кстати, если лень (или нет умения) рисовать плашки для всплывающих окон, можно просто изменить оттенки дефолтных плашек (для этого, конечно, тоже придется воспользоваться графическим редактором).

5. Сборка темы tsk

Когда все картинки будут готовы, проверьте, что им присвоены удобные имена (например вида <название темы>_<название-ключа>.png — nike_scrollbarThumb.png). Названия могут быть любыми, главное, чтобы вы в них ориентировались.

Открываем дефолтную тему Classic Blue. Меняем название темы, дважды щелкнув слева CAB Information:



Удаляем из темы стандартные фоны. Вместо них вставляем свои.

Я для надежности выбираю папку Windows и ставлю галочку Hard-coded path, чтобы файлы уж точно попали в \Windows, а не куда-то еще:



Затем разворачиваем в теме ключи реестра и везде меняем названия изображений. Скажем, вместо \Windows\classicblue_msgboxBorder.png у нас будет \Windows\nike_msgboxBorder.png:



Если все наши картинки такие же, как в стандартной теме, ключи расположения картинок править не нужно. (Увеличенный размер стрелочек ползунков не требует изменений в ключах.)

Закончив редактировать тему, сохраняем ее под таким именем, под которым она должна отображаться в меню выборе тем. Например olimo Nike.

6. Определение цветов в теме

Кроме изображений, в теме определяются цвета выделений, заливок и т.п. Они задаются в ветке реестра HKEY_LOCAL_MACHINE\Software\Microsoft\Color\.

Для использования разных цветов в теме необходим параметр реестра:

[HKEY_CURRENT_USER\Software\Microsoft\Today]
"MultiColorThemeEnabled"=dword:00000001

Цвета настраиваются в ветках реестра [HKEY_LOCAL_MACHINE\Software\Microsoft\Color\MultiColorTheme] и [HKEY_LOCAL_MACHINE\Software\Microsoft\Color]. В первой ветке содержатся параметры DWORD: BaseColor1, BaseColor2, BaseColor3 и BaseColor4:



Внимание: здесь используется формат цветов не RGB, а BGR!

Мне нужен был зеленый цвет. С помощью фотошопа я определила оттенок: 09310F. Получается, R=09, G=31, B=0F. Меняем местами красный и синий, получаем 0F3109, этот цвет и вставляем в значение BaseColor1.

Бинарные ключи ThemeColors и ThemeValues в ветке HKEY_LOCAL_MACHINE\Software\Microsoft\Color позволяют настроить цвета более тонко. Тут уже используется традиционное кодирование RGB.



На каждый цвет отводится четыре пары цифр: R, G, B и два нуля (нули изменять не надо).

Честно говоря, мне для моей темы вполне хватило одного цвета BaseColor1. Он определяет оттенки выделений и фонов стандартных кнопок. Об остальном подробнее можно почитать во втором посте темы.

7. Сборка каба с темой

Создаем новый каб (пригодится инструкция по сборке кабов).

Внимание: имя изготовителя и название каба не должны совпадать с именем изготовителя и названием темы tsk!
Т.е., если в теме у меня изготовитель olimo, название Nike, то в кабе нужно изменить хотя бы одно из этих названий, скажем вместо Nike написать WM 6.5 Nike.

Папка установки каба — \Windows.



Забрасываем все наши файлы — картинки и тему tsk. Обои сюда кидать не надо, они уже есть в теме:



На всякий случай для всех файлов выбираем путь установки \Windows и ставим флажок Hard-coded path.
Примечание. Мне встречались темы и с другими путями установки, например \My Documents\Themes\<имя темы>. Разницы особой нет, т.к. все равно это основная память.

Сохраняем каб и устанавливаем на эмулятор или девайс. В настройках выбираем свою тему. Если все сделано правильно, наслаждаемся

ПоказатьСкрыть

Скрытый текст (вы должны зарегистрироваться):

У вас нет прав чтобы видеть скрытый текст.

[olimo]

Цвета в темах для WM 6.5

[HKEY_LOCAL_MACHINE\Software\Microsoft\Color\MultiColorTheme]

В ветке [HKEY_LOCAL_MACHINE\Software\Microsoft\Color\MultiColorTheme] задаются четыре базовых цвета: BaseColor1, BaseColor2, BaseColor3 и BaseColor4.

Это параметры DWORD. Их шестнадцатеричные значения представляют собой коды цветов, записанные в обратном порядке: BGR вместо RGB.

Цвета BaseColor из стандартной темы Classic Blue (формат BBGGRR):

• BaseColor1: 752318
• BaseColor2: ffffff
• BaseColor3: ef5e2d
• BaseColor4: fdb6bb

Меняем местами первые две цифры с последними двумя (B и R), чтобы узнать эти цвета в привычном нам формате RGB, и получаем следующие цвета:

• BaseColor1: ████ 182375
• BaseColor2: ████ ffffff
• BaseColor3: ████ 2d5eef
• BaseColor4: ████ bbb6fd

Как мы видим, за исключением второго цвета это все оттенки синего. Соответственно, создавая тему, например, в зеленых тонах, следует использовать темно-зеленый, зеленый и светло-зеленый цвета для BaseColor 1, 3 и 4 соответственно. Не забывайте переводить цвета в формат BBGGRR перед занесением в реестр темы.

Функции цветов BaseColor1-4 по информации с wiki.xda-developers.com:

• BaseColor1 определяет цвет текста заголовков форм, фоны кнопок, цвет неактивных вкладок. Следует выбирать этот цвет темным, для указанных элементов он будет осветляться. ОС берет оттенок BaseColor1 и варьирует уровень яркости и насыщенности для создания полной цветовой схемы.
• BaseColor2 — всегда FFFFFF в темах от Microsoft. Его функция неизвестна.
• BaseColor3 отвечает за сплошные фоны.
• BaseColor4 управляет цветом выделенного текста.

[HKEY_LOCAL_MACHINE\Software\Microsoft\Color]

В ветке [HKEY_LOCAL_MACHINE\Software\Microsoft\Color] находятся два двоичных параметра ThemeColors и ThemeValues, которые позволяют настроить цвета более тонко и переопределить некоторые цвета, рассчитываемые по BaseColor1-4.



Каждому цвету отводится по четыре разряда.

ThemeValues — это значения цветов. Сюда заносятся сами цвета в формате RRGGBB00.

ThemeColors — это переключатели. Они указывают, должен ли конкретный цвет из BaseColor1-4 переопределяться цветом из ThemeValues. То есть, если вы изменяете, скажем, группу разрядов для третьего цвета в ThemeValues, то в ThemeColors необходимо для этого цвета вписать значение 01 00 00 00.

• 01 00 00 00 — соответствующий цвет из ThemeValues включен.
• 00 00 00 00 — соответствующий цвет из ThemeValues игнорируется (выключен).

Всего цветов 70.

Функции некоторых цветов из ThemeValues/ThemeColors:



В стандартной теме Classic Blue в этих параметрах определен только один цвет — 55 (смещение 0xD8). Это синий цвет 2d5ecf: ████. Остальные цвета выключены.

Скрытый текст (вы должны зарегистрироваться):

У вас нет прав чтобы видеть скрытый текст.

Баг с серым фоном в темах для новых билдов WM 6.5

Во многих темах для WM 6.5 наблюдается баг — серые фоны.

В следующей таблице приведены значения для ThemeColors и ThemeValues, которые необходимо установить, чтобы не было этих серых фонов (спасибо участнику форума xda-developers.com drkfngthdragnlrd):



В примере рассмотрена тема в красных оттенках.

Черным

выделены цвета, которые менять нельзя.

Желтым

обозначены цвета, которые должны быть белыми, чтобы не было серых фонов.

Зеленым

обозначен единственный цвет, который в дефолтной теме включен (55 цвет).
Остальные цвета, как видно в таблице, отключены. Слева для них стоят нули. Красные и розовые выделения ячеек справа показывают их оттенки, если бы они были включены. Красные цвета не важны, они просто используются в той теме, которую drkfngthdragnlrd взял для примера. Важно правильно расставить значения, выделенные черным и желтым.

Я в своих темах не ставила ключей для белых цветов, на эмуляторе WM 6.5 серых фонов нет. Но там довольно старый билд. Баг вроде на новых.

Скрытый текст (вы должны зарегистрироваться):

У вас нет прав чтобы видеть скрытый текст.

[olimo]

Официальный генератор тем для WM 6.5 от Microsoft



Появился официальный генератор тем для WM 6.5 от Microsoft. Работает он прямо в браузере на технологии Silverlight (если у вас не установлен плагин, будет предложено его установить).

При открытии темогенератора предлагается выбрать один из двух телефонов — HTC Imagio или AT&T HTC PURE. Оба они с экранами WVGA, так что владельцы других экранов — обломитесь

Темки будут довольно простыми. Пользовательские картинки для выделений, заголовков пузырей и прочего выбрать нельзя. Можно создать довольно симпатичные обои любого оттенка или использовать свои и задать оттенки только для прочих элементов. И, кажется, это все еще для старых билдов WM 6.5.

Скрытый текст (вы должны зарегистрироваться):

У вас нет прав чтобы видеть скрытый текст.