FAQ по редактированию LangPack-ов

IШIN · August 20, 2012

Во исполнение идеи, кинутой PsevDANImом, закладываю первый камень в фундамент FAQа.

Предлагаю в этой теме обсуждений/споров не вести. Если знаете полезную информацию - размещайте (желательно в формате "вопрос-ответ", но и просто советы типа "хозяйке на заметку" тоже приветствуются).

Итак, поехали...

Внимание!

1. Данное описание не является пошаговой инструкцией.

2. Ковыряние лангпаков требует хотя бы общих представлений об XML и HTML, а также фантазии и пытливого ума.

3. Все, что Вы делаете с лангпаком - Вы делаете на свой страх и риск. Все, что сделал для Вас кто-то другой, тоже сделано на Ваш страх и риск. Всю ответственность за последствия несет владелец устройства.

Структура лангпаков периодически меняется, поэтому здесь описываются только весьма общие принципы его построения.

Что такое Лангпак?

Лангпак (LangPack) - это вопреки названию не только языковой пакет, позволяющий локализовать программу.

Это весь ее графический интерфейс и даже структура меню.

В обсуждениях встречаются обозначения Лангпак, LangPack, ЛП, LP, и скин.

В папке с программой обычно находятся несколько лангпаков. Имена файлов имеют вид

Langpack.rsr,

Langpack320x240.rsr,

Langpack800x480.rsr,

и т.д.

При запуске программа определяет разрешение экрана устройства и загружает соответствующий ЛП.

Если подходящего расширения в наборе файлов нет, то используется файл Langpack.rsr.

Это так называемый универсальный (или "резиновый") скин. В нем размеры всех элементов экрана заданы в процентах от размера экрана, поэтому он подходит к любому экрану (но для этого в нем максимально упрощена графика, а некоторые элементы могут быть искажены - растянуты по вертикали или горизонтали).

Сам файл лангпака представляет собой обычный ZIP архив (с измененным расширением - RSR), соответственно его можно открыть Вашим любимым архиватором (WinRAR, WinZIP, TotalCommander).

Внутри архива находятся следующие папки

day, day_1.5x, day_2x и т.п. - в них изображения всех элементов интерфейса (кнопки, стрелки маневров и т.д.) разного разрешения - для разных экранов.

eng, rus, ukr - в них лежат соответственно файлы eng.xml, rus.xml, ukr.xml. Это и есть в чистом виде языковые пакеты - в них задаются выводимые имена всех элементов (строк меню, надписей на кнопках, текстов запросов).

poi24, ..., poi64 - папки со значками мест интереса разного размера (для разных уровней детализации).

И наконец, папка general - главная.

В ней три файла:

dialogs.xml - Определяет структуру диалоговых окон (выводимые параметры, дополнительные кнопки и т.д.)

general.xml - определяет структуру меню, быстрого меню и основного экрана навигации с навигационной панелью.

В нем же находится список категорий мест интереса (POI) с указанием картинки, присвоенной каждой категории - блок <itemlist name="POI">, и список команд/меню, которые могут быть назначены на кнопки быстрого меню (моЁ меню) - блок <itemlist name="QM">

Списки структуры меню содержат набор пунктов для конкретного меню, например, меню "Поиск":

<menu name="search" cols="2" rows="4">

<props title="@search_title" layout="template_2btns"/>

<items>

<item name="address" tip="@address" image="search_address" info="@address_info"/>

<item name="bookmarks" tip="@sbookmarks" image="finish_favorites" info="@bookmarks_info"/>

<item name="POI" tip="@POI" image="search_poi" info="@POI_info"/>

<item name="last10" tip="@last10" image="search_last10" info="@last10_info"/>

<item name="setcoords" tip="@setcoords" image="setcoords" info="@setcoords_info"/>

<item name="highlight_off" tip="@highlight_off" image="highlight_off" info="@highlight_off_info"/>

</items>

</menu>



Во-первых, из этого блока видно, что меню вызывается командой search и показывается в раскладке template_2btns (О том, что такое раскладка - см.ниже).

Во-вторых, для каждого пункта видна соответствующая команда, надпись, картинка и комментарий.

Например, для кнопки поиска по адресу используется текст @address.

Это значит, что на кнопке будет написано значение переменной address из файла rus.xml (eng.xml, ukr.xml - в зависимости от выбранного языка)

Мелким шрифтом будет написан комментарий (address_info из того же языкового файла)

На кнопке будет картинка search_address.

Переставляя местами строки, можно переставить кнопки в меню, а также удалить или добавить свои.



layouts.xml - содержит "раскладки" - таблицы, представляющие собой расположение на экране различных элементов - карты, кнопок, указателей маршрута, текстовой и цифровой информации.



Формат этого файла (точнее, отдельных его блоков) близок HTML таблицам.

В layouts.xml можно особо отметить следующие блоки (каждый блок ограничен тегами <layout name="BlaBlaBla"> и </layout>):



<layout name="template_np_drive_hor"> - Расположение информации на экране в режиме "Маршрут не задан"



<layout name="template_buttons_drive_hor"> - Расположение кнопок и других элементов управления в режиме "Маршрут не задан". Эти элементы показываются дополнительно к элементам <layout name="template_np_drive_hor">



<layout name="template_np_hor"> - Навигационная панель - показывается в режиме "Маршрут задан". В этом блоке находятся индикаторы маневров, расстояние до них и до финиша и т.д.



<layout name="template_buttons_hor"> - Кнопки для режима "Маршрут задан".



В зависимости от ЛП в нем могут быть еще блоки с похожими названиями, например

<layout name="template_np_1_hor"> - для алтернативного вида навигационной панели, или

<layout name="template_np_vert"> - для вертикального положения экрана.



Блоки, определяющие вид меню, диалоговых окон, списков и Message-boxов.

Например

<layout name="template_SearchCoords_hor"> - шаблон экрана поиска точки по координатам,

<layout name="template_messagebox_2btn_vert"> - всплывающее сообщение с двумя кнопками (Да и Нет) и прогресс-баром,

и т.д.



<palette name="default"> и <palette name="night">, содержащие стили оформления (клаcсы).

В блоке <palette name="default"> содержатся также ссылки на изображения (кнопки, пиктограммы, элементы навигационной панели):

<palette name="default">

<image name="compas_d"/>

<image name="compas_n"/>

........

<class name="cMenu_btn_12key_red" valign="bottom" align="center" bgcolor="#FF0000" bgcolor2="#550000" alpha="160" border="2" bordercolor="#440000" roundrad="5" fontsize="11" textdecoration="B,S,W,R" textcolor="#ffffff" widetextbg="#440000"/>



<class name="cMenu_btn_12key_red_sel" valign="bottom" align="center" bgcolor="#550000" bgcolor2="#FF0000" alpha="200" border="2" bordercolor="#440000" roundrad="5" fontsize="11" textdecoration="B,S,W,R" textcolor="#ffff00" widetextbg="#440000"/>

....



Каждый класс - это стиль оформления, который может использоваться в раскладках для множества элементов (ячеек таблицы).

Приведенный пример - красная кнопка для всплывающего сообщения

Рассмотрим некоторые из возможных параметров класса:

valign, align - выравнивание по вертикали (top, middle, bottom) и горизонтали (left, center, right)

bgcolor - цвет фона в формате #RRGGBB, то есть #FF0000 = красный.

Если используется и параметр bgcolor2, то фон будет градиентным от bgcolor до bgcolor2 (в данном случае, от красного до темно-красного).

alpha - прозрачность (0-полностью прозрачный, 256 - непрозрачный)

bgimagealpha - прозрачность вставленной картинки (0-полностью прозрачный, 256 - непрозрачный)

border и bordercolor - толщина и цвет границы

roundrad - радиус закругления углов

fontsize и textcolor - размер и цвет текста

textdecoration - оформление текста

B - жирный

I - наклонный

U - подчеркнутый

S - в одну строку (без переноса)

W - с окантовкой букв

R - автокоррекция размера шрифта (чтоб текст влез в поле) - если я не ошибаюсь!

С - ???

widetextbg - цвет окантовки букв.



Для кнопок в раскладке указан один класс (например, class="cMenu_btn_12key_red"), но когда она нажата, к ней применяется стиль "cMenu_btn_12key_red_sel", а если она недоступна (например, кнопка масштабирования, когда достигнут уже предельный масштаб) - то "cMenu_btn_12key_red_dis"



В блоках <palette name="default"> и <palette name="night"> перечисляются одни и те же классы, но за счет применения разных цветов для фона и шрифтов можно создать ночную неослепляющую палитру.



И последние блоки - это "палитрозависимые" картинки (то есть картинки, которые отличаются для дневного и ночного режима):

<itemlist name="hor_day">

....

<item name="compas" val="@compas_d"/>

....

</itemlist>

<itemlist name="hor_night">

....

<item name="compas" val="@compas_n"/>

</itemlist>



  



Таким образом, в дневном режиме в качестве картинки "compas" используется картинка compas_d, а в ночном - compas_n

Обе они перечислены в блоке


<palette name="default">

<image name="compas_d"/>

<image name="compas_n"/>

....



Таким образом, в самой раскладке будет использоваться ссылка на "переменную картинку":

<td width="58" bgimage="@compas" invoke="north_up"/>

В заключение первого урока - несколько советов:

1. Не забывайте делать резервные копии.

2. Не ленитесь вставлять комментарии (блоки типа ), чтоб разобраться потом, чего наизменяли.

3. Не ленитесь пользоваться поиском по файлу. Чтобы найти, где в файле описана кнопка ДПОИ, может быть достаточно поискать по файлу строку ДПОИ или DPOI (особенно если автор следовал совету 2).

4. Не ленитесь показывать структуру вложенности блоков с помощью отступов - табуляций или пробелов.

5. Если не можете понять, за что отвечаеет какой-то класс (т.е. - шрифт какого элемента он определяет), попробуйте назначить ему идиотский цвет (например #FF00FF) и тестируйте программу во всех режимах, пока не найдете, где вылезает такой цвет. Сразу вставьте в файл комментарий.

To be continued...

Чем открыть лангпак?

Какие программы нужны для редактирования скина?

Langpack.rsr - это ZIP архив. Открыть его можно очти любым архиватором (WinZIP, WinRAR). Кроме того, большинство файл-менеджеров умеет открывать архивы как папки. Очень удобен Total Commander. Он распознает архив по внутреннему формату (без переименования в ZIP) и позволяет войти внутрь него простым нажатием Enter. Кроме того, при редактировании файлов внутри архива Total Commander создает временную копию файла, а при сохранении предлагает переупаковать файл в архив.

Файлы XML можно редактировать любым тектовым редактором (Блокнота, AkelPad, Notepad+). Особенно удобно использовать редакторы с подсветкой синтаксиса.

Для редактирования картинок можно использовать Photoshop, Corel PhotoPaint, но с этой задачей прекрасно справляется бесплатная программа GIMP

После внесения изменений в скин на экране пропало все, кроме карты.

Значит, в скине допущены ошибки структуры (например, какой-то блок открыт, но не закрыт).

В папке logs в файле errors.log можно прочитать, в какой строке какого файла обнаружена ошибка

IШIN · August 21, 2012

Как изменить цвет и ширину дорог?

Как изменить цвет и размер дельтаплана?

Как изменить цвет и ширину линии маршрута?

Никак. То есть, лангпаком - никак.

Цвета дорог и маршрутной линии можно поменять редактированием файлов в Resources.rsr (либо вручную, либо с помощью утилиты, созданой Vlego - http://vlego.xclan.r...p?article_id=36)

Дельтаплан редактированию не поддается. Изменить его размер можно только одним способом - изменив заявленный размер экрана в настройках (Меню-Разное-Настройки-Система). Но тогда изменятся и остальные элементы (ширина дорог, размеры номеров домов и названий улиц на карте...).

Можно ли изменить размер/цвет шрифта отдельных элементов, не влезая в дебри?

Да, это опять-таки можно сделать с помощью утилиты, созданой Vlego - http://vlego.xclan.r...p?article_id=35

Edited August 21, 2012 by IШIN

natalinamarie · August 27, 2012

IШIN

как изменить ТОЛЬКО ширину движения линии маршрута ? (незатрагивая соседние дороги)

s35 · August 27, 2012

Написано же выше: никак.

natalinamarie · August 27, 2012

пробовали утилитой подымали все дороги в 5 раз . но путь маршрута какой был такой и остался. выросли только сами дороги..

s35 · August 27, 2012

О чем выше и сказано: ширину линии маршрута лакгпаком изменить нельзя. Читайте внимательно.

IШIN · September 12, 2012

В рубрике "уроки самопальщика" или "сделай сам себе лангпак" рассмотрим, как немного доработать чужой скин на примере конкретной задачи.

Задача - добавить кнопку "скриншот" на основной экран в скин vlego (за вопрос "а кто это?" в данной теме - RO на месяц ).

Например, мы решили разместить кнопку под указателем маневра.

Можно пойти двумя путями - использовать графическую кнопку (картинку BMP) или "векторную" - роль кнопки играет ячейка таблицы.

Для начала рассмотрим второй вариант, так как он не требует игр с изображениями (из недостатков - кнопка в таком варианте может быть только прямоугольной, при желании - со скругленными углами)

Итак, надо найти, где в лангпаке нужные нам фрагменты.

Нам понадобятся файлы general.xml и layouts800x480.xml из папки general. В особо сложных случаях может потребоваться и файл rus.xml из папки rus.

Открываем general.xml (блокнотом, АкельПадом - кем угодно).

В самом начале видим три раздела - варианты интерфейса

<panelcontroller name="nav_screen">

<panellist name="panels_main">

<panel type="ContextMenu" name="ContextMenu"/>

<panel type="JunctionView" name="JunctionView"/>

<panel type="ButtonsWithRoute" name="ButtonsPanel"/>

<panel type="ButtonsNoRoute" name="ButtonsPanelDrive"/>

<panel type="NavWithRoute" name="NavPanel" prefix="mainpan_"/>

<panel type="NavNoRoute" name="NavPanelDrive" prefix="pan_"/>

</panellist>



<panellist name="panels_classic">

<panel type="ContextMenu" name="ContextMenu"/>

<panel type="JunctionView" name="JunctionView2"/>

<panel type="ButtonsWithRoute" name="ButtonsPanel2"/>

<panel type="ButtonsNoRoute" name="ButtonsPanelDrive2"/>

<panel type="NavWithRoute" name="NavPanel2"/>

<panel type="NavNoRoute" name="NavPanelDrive2"/>

</panellist>



<panellist name="Спидометр">

<panel type="ContextMenu" name="ContextMenu"/>

<panel type="JunctionView" name="JunctionView"/>

<panel type="ButtonsWithRoute" name="ButtonsPanel3"/>

<panel type="ButtonsNoRoute" name="ButtonsPanel3"/>

<panel type="NavWithRoute" name="NavPanel3" prefix="mainpan_"/>

<panel type="NavNoRoute" name="NavPanelDrive3" prefix="pan_"/>

</panellist>

</panelcontroller>



Мы хотим добавить кнопку в варианте интерфейса "Основной". А есть еще Классический и Спидометр.

Если на минутку предположить, что имена разделов менее очевидные, то мы посмотрели бы в rus.xml - поискали бы там слово "Основной". И нашли бы:



<string name="subset_navPanels" value="Вид экрана навигации"/>

<string name="panels_main" value="Основной"/>

<string name="panels_classic" value="Классический"/>



Теперь уж точно видно, что в general нас интересует раздел

<panellist name="panels_main">

<panel type="ContextMenu" name="ContextMenu"/>

<panel type="JunctionView" name="JunctionView"/>

<panel type="ButtonsWithRoute" name="ButtonsPanel"/>

<panel type="ButtonsNoRoute" name="ButtonsPanelDrive"/>

<panel type="NavWithRoute" name="NavPanel" prefix="mainpan_"/>

<panel type="NavNoRoute" name="NavPanelDrive" prefix="pan_"/>

</panellist>



И очевидно, что за кнопки (в режиме "с маршрутом" и "без маршрута") отвечают строки

<panel type="ButtonsWithRoute" name="ButtonsPanel"/>

<panel type="ButtonsNoRoute" name="ButtonsPanelDrive"/>



То есть кнопки без маршрута заданы блоком ButtonsPanelDrive, а с маршрутом - ButtonsPanel.

Ищем эти тексты в general и находим:

<menu name="ButtonsPanelDrive" rows="5" cols="2">

<props layout="template_buttons_drive_1"/>

<items>

</items>

</menu>

...

<menu name="ButtonsPanel" rows="5" cols="2">

<props layout="template_buttons_1"/>

<items>

</items>

</menu>



Ага. Нас интересуют раскладки template_buttons_drive_1 и template_buttons_1.

Открываем layouts800x480.xml

Ищем по тексту template_buttons_1 (Изначально прикидываем, что нам надо расположить кнопку, не поссорив ее с индикаторами маневров. Без маршрута их не будет, но кнопка останется там же - негоже ей ползать по экрану)


<!-- Панелька с кнопками врежиме маршрута 800x480-->

<layout name="template_buttons_1_hor">

<table>

<tr>

<!-- первый столбец -->

<td width="114">

<table>

<tr height="350"/>

<tr height="26">

<td width="114" type="text" class="mainpan_cur_date" text="@navPanel_txt_date"/>

</tr>

<tr height="34">

<td width="114" type="text" class="mainpan_cur_time" text="@navPanel_txt_time"/>

</tr>

<tr height="10"/>

<tr height="60">

<td width="114" invoke="@btn_dPOI" bgimage="@navPanel_key" bgmode="directdraw">

<table>

<tr>

<td type="text" class="navPanel_PRM2" text="DPOI"/>

</tr>

</table>

</td>

</tr>

</table>

</td>

<!-- второй столбец -->

<td width="572">

<table>

<tr height="322"/>

<!-- Приемник/возврат к текущей позиции -->

<tr height="78">

<td width="250"/>

<td width="100" type="text" class="navPanel_ico_sbr" invoke="@navPanel_mf_invoke" bgimage="@navPanel_mf_image" text="@icon_mf_text"/>

</tr>

<tr height="40">

<td type="text" class="mainpan_p1_header" text="@navPanel_txt_curstreet"/>

</tr>

<tr height="40">

<td bgimage="@mainpan_navPanel_downline" bgmode="directdraw">

<table>

<tr>

<td width="44" bgimage="@pan_navPanel_battery" align="center" valign="middle"/>

<td width="38" bgimage="@pan_navPanel_GPS_0" bgmode="directdraw">

<table>

<tr>

<td bgimage="@pan_navPanel_GPS" align="center" valign="middle"/>

</tr>

</table>

</td>

<td width="38" bgimage="@pan_navPanel_jams_0" bgmode="directdraw">

<table>

<tr>

<td bgimage="@pan_navPanel_jams" align="center" valign="middle"/>

</tr>

</table>

</td>

<td width="5"/>

<td width="120" type="text" class="mainpan_p2_2fin_val" text="@navPanel_txt_dist2fin"/>

<td width="70" type="text" class="mainpan_p2_2fin_dim" text="@navPanel_txt_dist2fin_dim"/>

<td width="5"/>

<td width="110" type="text" class="mainpan_p2_2fin_time" text="@navPanel_txt_time2fin"/>

<td width="5"/>

<td width="110" type="text" class="mainpan_2fin_val" text="@navPanel_txt_time_fin"/>

</tr>

</table>

</td>

</tr>

</table>

</td>

<!-- третий столбец -->

<td width="114">

<table>

<tr height="60"/>

<tr height="90">

<!-- Вверх -->

<td width="24"/>

<td width="90" class="navPanel_ico" invoke="@InclineIn" bgimage="@ico_InclineIn"/>

</tr>

<!-- " Zoom In" -->

<tr height="90">

<td width="24"/>

<td width="90" class="navPanel_ico" invoke="@zoomin" bgimage="@ico_zoomin"/>

</tr>

<!-- " Zoom Out" -->

<tr height="90">

<td width="24"/>

<td width="90" class="navPanel_ico" invoke="@zoomout" bgimage="@ico_zoomout"/>

</tr>

<tr height="90">

<!-- Вниз -->

<td width="24"/>

<td width="90" class="navPanel_ico" invoke="@InclineOut" bgimage="@ico_InclineOut"/>

</tr>

<tr height="60">

<td width="114" invoke="showpanel_MenuPanel" bgimage="@navPanel_key" bgmode="directdraw">

<table>

<tr>

<td type="text" class="navPanel_PRM2" text="@txt_btn_menu"/>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>



<tr>

<td type="ext" x="620" y="395" cx="170" cy="25" class="scale"/>

</tr>

<tr>

<td type="extRC" x="0" y="0" cx="100%" cy="100%" class="Map"/>

</tr>

</table>



<!-- Знаки ограничения скорости и запрета обгона -->

<table>

<tr height="70"/>

<tr height="74">

<td width="565"/>

<td width="74" type="text" align="center" valign="middle" bgimage="@warn_PICT3"/>

<td width="74" type="text" align="center" valign="middle" bgimage="@warn_PICT2"/>

<td width="74" type="text" align="center" valign="middle" bgimage="@warn_PICT1"/>

</tr>

</table>

</layout>



Анализируя блочок с комментарием <!-- первый столбец -->, понимаем, что в левой части экрана оставлена полоса шириной 114 пикселей, в которой после пропуска высотой 350 идут строчки с текущей датой и временем, а затем кнопка ДПОИ.

Все, что идет дальше, нас не интересует. Очевидно, нам надо влезть в эти 350 пикселей высоты (оставив сначала немного для маневров), над датой. Ширины 114 нам хватит за глаза.

Сколько же места оставить для маневров? Можно подобрать на глаз. Можно померять на скриншоте. А можно посмотреть предыдущий блок -

<!-- PNA панель с указателями маневров 800x480 -->

<layout name="template_np_1_hor">

<table>

  <tr height="143">

  <!-- Панель указателей маневров (начало) -->

	<td width="104">

	  <table invoke="r_listing_auto">

		<tr height="40">

		  <td bgimage="@mainpan_navPanel_f1_e_03">

			<table>

			  <tr>

			   <td width="70%" type="text" class="mainpan_p1_dist2m1_val" text="@navPanel_txt_dist2m1"/>

			   <td width="30%" type="text" class="mainpan_p1_dist2m1_dim" text="@navPanel_txt_dist2m1_dim"/>

			 </tr>

		   </table>

		 </td>

	   </tr>

	  <tr height="90">

		<td bgimage="@mainpan_navPanel_m1" bgmode="directdraw"/>

	  </tr>

	  <tr height="13">

		<td bgimage="@mainpan_navPanel_f1_e_01"/>

	  </tr>

	</table>

  </td>





Как видим, зарезервирована строка высотой 143,разбитая на строки высотой 40 (расстояние до маневра), 90 (указатель ближайшего маневра) и 13 (окантовка панели).



С запасом - отступим 150 пикселей.

И приготовим место сразу под две кнопки

Итак, в вышеупомянутом блоке

<!-- Панелька с кнопками врежиме маршрута 800x480-->

<layout name="template_buttons_1_hor">

<table>

<tr>

<!-- первый столбец -->

<td width="114">

<table>

<tr height="350"/>

<tr height="26">

<td width="114" type="text" class="mainpan_cur_date" text="@navPanel_txt_date"/>

</tr>

<tr height="34">

<td width="114" type="text" class="mainpan_cur_time" text="@navPanel_txt_time"/>

</tr>

<tr height="10"/>

<tr height="60">

<td width="114" invoke="@btn_dPOI" bgimage="@navPanel_key" bgmode="directdraw">

<table>

<tr>

<td type="text" class="navPanel_PRM2" text="DPOI"/>

</tr>

</table>

</td>

</tr>

</table>

</td>



заменяем пустую строку-отступ

<tr height="350"/>

на

<tr height="150"/>

<tr height="90">

   <td width="90" type="text" class="My_button" text="PrtScr" invoke="______"/>

</tr>

<tr height="10"/>

<tr height="90">

   <!-- Сюда мы всегда можем вставить еще одну кнопку аналогично предыдущей -->

</tr>

<tr height="10"/>

То есть, суммарная высота осталась той же (это значит, что дата-время-кнопкаДПОИ не сползут).

Теперь у нас там пустая строка высотой 150, потом строка высотой 90, в которой одна ячейка шириной 90, затем строка высотой 10 (отступ), и снова 90 и снова 10.

Обратите внимание - если внутрь пары тегов ничего не вставляем, можно это сделать одним самозакрывающимся тегом.

То есть

<tr height="10">

</tr>

то же самое, что <tr height="10"/>

А теперь для нашей кнопки осталось задать стиль (class="My_button") и команду (invoke="______")

Какая команда создает скриншот?

Проще всего посмотреть в general.xml в разделе

<itemlist name="QM">

...

...

<item name="screenshot" tip="@screenshot" image="screenshot" info="@screenshot_info"/>

...



name в этом списке - это и есть команда.



Тогда наша строка с кнопкой превращается в

<td width="90" type="text" class="My_button" text="PrtScr" invoke="screenshot"/>



Это будет простая квадратная кнопка с буквами PrtScr в ней (ну, или можно сделать одну букву S)

Теперь в layouts800x480 ищем описания классов:

<palette name="default">

....

<class name="..................



Добавляем строчку (проще всего в самом начале классов, чтоб легче искать)

<class name="My_button" align="center" valign="middle" fontsize="11" bgcolor="#555555" bgcolor2="#777777" alpha="200" border="2" bordercolor="#101010" roundrad="5" textcolor="#FFFFFF" textdecoration="B,S,W" widetextbg="#202020"/>



Естественно меняем цвета по вкусу.

Чтобы кнопка меняла вид при нажатии, добавляем еще строчку:

<class name="My_button_sel" align="center" valign="middle" fontsize="11" bgcolor="#777777" bgcolor2="#555555" alpha="220" border="2" bordercolor="#500000" roundrad="5" textcolor="#FFFF00" textdecoration="B,S,W" widetextbg="#202020"/>

Ну, и все. Осталось добавить кнопку и в блок template_buttons_drive_1_hor, по аналогии с template_buttons_1_hor.

Это будет домашнее задание

Классы заново создавать не надо. там тоже используем My_button

А, нет, не все! Еще надо две строчки с описаниями классов скопировать в раздел

<palette name="night">

И подобрать цвета в ночном режиме.

В следующий раз поговорим о кнопках-картинках и компасе.

Edited September 12, 2012 by IШIN

IШIN · September 13, 2012

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

а как бы переместить значки предупреждений (скорость и знаки) левее - ближе к стрелкам поворота?

В данном случае вопрос относился к скину от alexey62, но это не важно, главное - общие принципы.

Открываем layouts800x480.xml (или файл, соответствующий Вашему разрешению, или layouts.xml, если скин универсальный)

Пользуемся поиском по тексту bgimage="@warn_PICT

Находим в тексте примерно такие фрагменты (данный пример из скина vlego, так что цифры будут отличаться)

<table>

<tr height="70"/> - Пустая строка - отступ сверху

<tr height="74"> - Строка со значками. высота ее не должна быть меньше, чем

размер картинки -знака

<td width="565"/> - пустая ячейка - отступ слева. Если хотим сдвинуть значки

влево-вправо, меняем это число

Дальше - ячейки со значками. Их ширина не должна быть меньше ширины значка. Если не заете размер картинки - менять ширину не надо.

<td width="74" type="text" align="center" valign="middle" bgimage="@warn_PICT3"/>

<td width="74" type="text" align="center" valign="middle" bgimage="@warn_PICT2"/>

<td width="74" type="text" align="center" valign="middle" bgimage="@warn_PICT1"/>

</tr> - строка закончилась

</table> - таблица закрыта.

Обратите внимание - если значки прижаты к левому краю -

они идут в порядке "warn_PICT1, warn_PICT2, warn_PICT3", если к правому (как в рассмотренном примере) - то в обратном порядке, чтоб первый значок появлялся поближе к краю.

Если в данной таблице автор всунул еще какие-то элементы - двигать размеры ячеек надо осторожно, чтоб не сползли остальные ячейки.

Пример - я в своем ЛП запихал в ту же табличку и индикаторы:


<table>

 <tr height="98">

  <td width="438"/>

  <td width="192">

   <table>

    <tr height="34"/>

    <tr height="64">

     <td width="64" type="text" align="center" valign="top" bgimage="@warn_PICT3"/>

     <td width="64" type="text" align="center" valign="top" bgimage="@warn_PICT2"/>

     <td width="64" type="text" align="center" valign="top" bgimage="@warn_PICT1"/>

    </tr>

   </table>

  </td>

  <td width="112"/>

  <td width="58">

   <table>

    <tr height="58">

    <!-- подложка под компас -->

     <td width="58" bgimage="@compas" invoke="north_up"/>

    </tr>

   </table>

  </td>

 </tr>

 <tr height="350"/>

 <tr height="32">

  <td width="92"/>

  <td width="82" type="text" class="navPanel_cur_time" text="@navPanel_txt_time" invoke="settings_time"/>

  <td width="110" type="text" class="navPanel_cur_date" text="@navPanel_txt_date" invoke="settings_time"/>

  <td width="156" invoke="autoscale"/>

  <td width="90" bgimage="@pan_navPanel_GPS" align="center" valign="middle" invoke="s_gps"/>

  <td width="40" bgimage="@pan_navPanel_jams" align="center" valign="middle" invoke="rs_refresh"/>

  <td width="70" bgimage="@pan_navPanel_battery" align="center" valign="middle"/>

  <td width="70" bgimage="@pan_navPanel_routetype" align="center" valign="middle" invoke="s_route"/>

 </tr>

 <tr>

  <!-- компас (стрелочки) -->

  <td type="ext" x="770" y="27" cx="4" cy="4" class="compass"/>

  <!-- масштабометр -->

  <td type="ext" x="300" y="450" cx="140" cy="28" class="scale"/>

 </tr>

</table>

В этом случае, если мы захотим сдвинуть индикаторы влево на 10 пикселей, нам надо не только в четвертой строке заменить <td width="438"/> на <td width="428"/>,

но и потом в 14 строке заменить <td width="112"/> на <td width="122"/>, а то компас уползет. Украл 10 пикселей в одном месте - верни в другом!

xGen · September 13, 2012

ага, да но у Alex62 в заголовке таблицы проценты

работаем в процентах?

а можно поменять порядок следования предупреждений?

для этого только номера pict?

pict1 - обгон

pict2 - скорость

pict3 - камера?

лучше всего. конечно их вертикально расположить

Edited September 13, 2012 by xGen

sergges · September 13, 2012

А подскажите как сделать названия улиц и номера домов жирным шрифтом?

IШIN · September 13, 2012

ага, да но у Alex62 в заголовке таблицы проценты
<td width="25%"/>

работаем в процентах?

а можно поменять порядок следования предупреждений?

для этого только номера pict?

pict1 - обгон

pict2 - скорость

pict3 - камера?

лучше всего. конечно их вертикально расположить

можно и в процентах, а можно и в пикселях, хоть вперемешку.

Вертикально - тоже легко.

Надо после конца строки (</tr>) начать новую строку

</tr>

а между ними - две ячейки - одна "пустышка" с той же шириной, как в первой строчке, а вторая с pict2

так же добавляем и третью строку.

Pict1 - pict3 - это нумерация по порядку появления.

То есть кто первый появился - стоит слева. Появляется второй значок - он ставится рядышком.

Первый знак заканчивается - он исчезает, а второй становится первым и занимает его место.

Это очень правильно и логично. Не возникает "дыр".

А подскажите как сделать названия улиц и номера домов жирным шрифтом?

Это точно не в лангпаке. Не знаю, можно ли это поменять ресурсником... Если можно - то наверняка это умеет vlegoвский ресурсоедитор. Если он не умеет - наверняка это никак не меняется.

--

Хе. Ну вот и юбилейный пост.

Edited September 13, 2012 by IШIN

xGen · September 13, 2012

так?

<table>

</tr>

</tr>

</tr>

</tr>

</table>

IШIN · September 13, 2012

так?

Не совсем.

1. Я смотрю, при таком варианте, все вместе составляет 99.5%экрана по высоте.

Это значит, что "Приемник/возврат к текущей позиции" (кнопка с дельтапланом или кнопка Вкл.ГПС) будет в самом низу экрана, в последних 17% высоты. Мы ведь выделяем по 12% высоты на каждую новую строку.

Значит, надо изЪять 24% из имеющегося свободного пространства (из 34%)

Текст примет такой вид:

<table>

<tr height="12.5%"/>

<tr height="12%">

<td width="25%"/>

<td width="10%" type="text" align="center" valign="middle" bgimage="@warn_PICT1"/>

</tr>

<tr height="12%">

<td width="25%"/>

<td width="10%" type="text" align="center" valign="middle" bgimage="@warn_PICT2"/>

</tr>

<tr height="12%">

<td width="25%"/>

<td width="10%" type="text" align="center" valign="middle" bgimage="@warn_PICT3"/>

</tr>



<tr height="10%"/>

<tr height="17%">

<td width="43.7%"/>

<td width="12.6%" type="text" class="navPanel_ico_sbr" invoke="@navPanel_mf_invoke" bgimage="@navPanel_mf_image" text="@icon_mf_text"/>

</tr>

</table>

А теперь, если посмотреть у Алексея - там у него под панель маневров отводится 14% (<td width="14%" class="navPanel_bg"/>).

Значит, если хотим прижать значки к маневрам, надо отступ слева сделать около 15 % (подобрать по вкусу)

<table>

<tr height="12.5%"/>

<tr height="12%">

<td width="15%"/>

<td width="10%" type="text" align="center" valign="middle" bgimage="@warn_PICT1"/>

</tr>

<tr height="12%">

<td width="15%"/>

<td width="10%" type="text" align="center" valign="middle" bgimage="@warn_PICT2"/>

</tr>

<tr height="12%">

<td width="15%"/>

<td width="10%" type="text" align="center" valign="middle" bgimage="@warn_PICT3"/>

</tr>



<tr height="10%"/>

<tr height="17%">

<td width="43.7%"/>

<td width="12.6%" type="text" class="navPanel_ico_sbr" invoke="@navPanel_mf_invoke" bgimage="@navPanel_mf_image" text="@icon_mf_text"/>

</tr>

</table>

Edited September 13, 2012 by IШIN

xGen · September 14, 2012

спасибо, пришлось только немного увеличить высоту строк, чтобы раздвинуть картинки - получилось прекрасно

Сенсэй, может в качестве следующего урока рассмотрим как сделать прозрачным/полупрозрачным фон стрелок маневров?

я думаю, что многим интересно

и можно ли сделать эту полупрозрачность градиентной по горизонтали (слева менее прозрачный-справа прозрачный) подобно тому, как у Alex62 градиентный полупрозрачный нижний бар?

Вячеслав в 31 · September 15, 2012

IШIN

как изменить ТОЛЬКО ширину движения линии маршрута ? (незатрагивая соседние дороги)

Resources.rsr/ ResCatalog.xml/ строка: <drawSizeCoeffs texts="1.1" route="0.9" car="1" roads="1.1" poi="1.5"/>

правим значение масштабного коэффициента под свои запросы.

arcad · September 17, 2012

Подскажите, модно ли перекрасить указатель поворота при маневре. А то эта стрелка желто-оранжевого цвета сливается то с цветом дороги, то с линиями скорости. Иной раз ее в 3D вообще не видно среди домов.

RJ25 · September 17, 2012

arcad, http://forum.probki.net/cityguide/userguide/topic220.html

arcad · September 18, 2012

arcad, http://forum.probki....e/topic220.html

СПАСИБО!!!

arcad · September 18, 2012

Строка из Rescatalog:

pres type="day" subInnerColor="0xFFFFFF" subEdgeColor="0xFFFFFF" innerColor="0x0000CC" edgeColor="0xFFFFFF" arrowColor="0x000000" arrowBorderColor="0xFFFF33" textColor="0xFFFFFF"routeLinkColor="0xFF0000" routeDirArrowColor="0x6699ff" /

За что отвечают значения: routeLinkColor и routeDirArrowColor ?

И как изменить цвет треугольников (стрелок) в линии маршрута?

RJ25 · September 18, 2012

arcad, воспользуйтесь программой от vlego

http://vlego.xclan.ru/readarticle.php?article_id=36

arcad · September 18, 2012

arcad, воспользуйтесь программой от vlego

http://vlego.xclan.r...p?article_id=36

Пробовал, не знаю почему, но у меня с ней хренотень какая то получалась. Толку не было.

Странно, попробовал на другом компе - все заработало. Хм-м. Еще раз, нижайшее с кисточкой. :)

Edited September 18, 2012 by arcad

IШIN · October 30, 2012

В связи с возникшим в другой теме вопросом - решил, что тут будет нелишним:

Вопрос: полупрозрачный .gif или .png программа понимает, или только .bmp?

Скажем так - программа понимает только BMP.

Прозрачность можно реализовать тремя способами -

1. картика обычная (непрозрачная), а в файле скина использовать параметр bgimagealpha. Тогда вся картинка (по всей своей площади) будет иметь одинаковый уровень прозрачности (ну, или градиентный)

То есть прозрачность меняется от 128 (полупрозрачно) до 256 (непрозрачного)

Если bgimagealpha2 не использовать - будет постоянная прозрачность.

Если нужна неодинаковая прозрачность (например, некий непрямоугольный символ, а вокруг него прозрачность) - то:

2. Картинка BMP RGBшная (например, achtung.bmp), а рядом с ней маска - (achtung_mask.bmp) - черно-белая картинка.

и . Этот способ позволяет задать плавную прозрачность краев рисунка.

3. Картинка BMP "индексированная". Аналог GIFа с прозрачным цветом.

Подходит для "примитивных" рисунков - стрелки, галочки, etc.

Я брал один из таких рисунков, и менял его, сохраняя розовый цвет в качестве транспарента.

Edited October 30, 2012 by IШIN

IШIN · October 30, 2012

Продолжаем ликбез "Картинки из жизни"

Заклинаю-модернизируйте langpack так, чтобы вернуть легенду из 5-ки (без этих широченных цветных шпал)!

Айфоновского лангпака у меня нет, покажу на примере ВинСЕшного:

Ищем в layouts.xml (или layoutsXXXxYYY.xml) слово legend

Найдем скорее всего в двух местах (для вертикального и горизонтального формата), у меня же есть только горизонтальный:

<layout name="Action_legend_hor" class="nlist_item" height="24%" width="95%">

<HorizontalPanel>

<VerticalPanel width="2%"/>

<VerticalPanel width="86%">

<table>

<tr height="10%"/>

<tr height="80%">

<td name="color">

<table>

<tr height="60%">

<td width="5%"/>

<td width="95%" name="largeText" type="text" class="nlist_large_text"/>

</tr>

<tr height="40%">

<td width="5%"/>

<td width="95%" name="smallText" type="text" class="nlist_small_text"/>

</tr>

</table>

</td>

</tr>

</table>

</VerticalPanel>

<VerticalPanel width="2%"/>

<VerticalPanel width="10%">

<ImageLabel name="image" class="nlist_image"/>

</VerticalPanel>

</HorizontalPanel>

</layout>

В самой первой строчке height="24%" - это высота (толщина) шпалы (в вертикальном - цифры наверняка другие).

Подбираем на свой вкус.

Если мешает цвет - то могу только предположить (сам не пробовал), что в строке <td name="color"> убрать name="color", оставить <td>.

Думаю, поможет. :)

Edited October 30, 2012 by IШIN

RodionSPb · October 30, 2012

Думаю, поможет.

Помогло Правда сейчас на Питерской карте легенда не пашет....

Остался только один вопрос-как убрать вторую строчку-где указано расчетное премя прохождения отрезка?

Edited October 30, 2012 by RodionSPb

IШIN · October 30, 2012

Остался только один вопрос-как убрать вторую строчку-где указано расчетное премя прохождения отрезка?

А разве не очевидно?

Вот этот фрагмент там

<table>

<tr height="60%">

<td width="5%"/>

<td width="95%" name="largeText" type="text" class="nlist_large_text"/>

</tr>

<tr height="40%">

<td width="5%"/>

<td width="95%" name="smallText" type="text" class="nlist_small_text"/>

</tr>

</table>



То есть весь цветной прямоугольник был разделен на две строки, одна высотой 60% (улица), другая - 40%(время).

Можно заменить например на


<table>

<tr height="20%"/>

<tr height="60%">

<td width="5%"/>

<td width="95%" name="largeText" type="text" class="nlist_large_text"/>

</tr>

<tr height="20%"/>

</table>



То есть вместо строки со СмоллТекстом делаем две пустые строки по 20%, чтоб улица была посередине шпалы.

А еще лучше, если шпалу ужали сильно, то и вовсе убрать эти строки по 20%, а высоту строки с ЛарджТекстом сделать не 60, а 100%.


<table>

<tr height="60%">

<td width="5%"/>

<td width="95%" name="largeText" type="text" class="nlist_large_text"/>

</tr>

</table>

Sign In

FAQ по редактированию LangPack-ов

Recommended Posts

Link to post

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Posted Images

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Join the conversation