Создание скинов Поделиться Опции

[DeshFXs]

Постепенно тема стала местом обсуждения не самих скинов, а той их части, которые выводятся на дисплей с помощью Scalable Vector Graphics.
SVG в zn5. Где и что...
Дополнительные режимы отображения Главного и Подменю.
Анимация фона Главного меню и SVG-подменю.
Цвет и размер надписей в Главном и svg-Подменю. Размер и прозрачность софт-клавиш. Смотрим colors.css

Вот это должно помочь всем кто создает скины
1) .ini файлы скинов, подробное описание
2)

ini_files.rar   ( 47.5 килобайт ) Кол-во скачиваний: 872

3)

Making_skins.rar   ( 657.48 килобайт ) Кол-во скачиваний: 1328

Программное обеспечение для упаковки и распаковки файлов ICONRES:
MotoLinux iconres composer 1.1.1


Сообщение отредактировал AstaRoth - 5.4.2011, 8:29

[TiM_22R]

последний iconList.svg понравился, сделал его в подменю, только вот не понял почему у меня теперь в подменю два скролбара

Уже и забыл про такое... Всё дело в файлике form.svg. Через него выводится списки в Подменю и в нём уже есть скроллбар. А для варианта Список/Сетка в Подменю я кое-что переделал и form.svg не используется (а т.к. пришлось специально вставлять скролл в Список - вот и получилось их 2). Короче, для стандартного варианта (только Список в Подменю) iconList с удалённым скроллбаром.

iconList_1_.svg.rar   ( 2.81 килобайт ) Кол-во скачиваний: 261

***********************
Entom, если речь от grid_3x4, то просто рамки крутятся и скольжение. А если о tabs_2, то просто опустил нижнюю строку на уровень софт-клавиш.

[V!iT]

Тим
Нашлась еще одна просьба
Можешь ,в гриде, все ближе к краям подвинуть,чтоб от геометрии где то 1-2 пикселя до края экрана и иконки оставалось.И увеличить иконки. В общем хочу чтоб меню на экране было максимально заполнено.Между иконками расстояние уменьшить,ниже растянуть иконки,на место софт клавишь,и от края уменьшить отступ. Надеюсь идею подхватил. Сильно не матюкай меня За ранее благодарен!:)
Спинер очумительно смотрится!!!!!


Так оказывается у кого то сегодня День Рождение!!!! Мотофан все помнит!::))

Сообщение отредактировал V!iT - 4.1.2010, 12:03

[TiM_22R]

А я играю на гармошке у прохожих...ик

Сдвинул, увеличил... а вот выбранную иконку пришлось уменьшить, иначе места не хватает Надеюсь близко к желаемому-му...

grid_3x4_slider_frame.svg.rar   ( 30.67 килобайт ) Кол-во скачиваний: 280

Всем спасибо! Тим.
V!iT, у тебе буквы по толщине разные? В colors.css в .textMMGridSel добавь font-weight: 100;

В коллекцию анимаций фона:

noname_3.rar   ( 232.83 килобайт ) Кол-во скачиваний: 121

Сообщение отредактировал TiM_22R - 4.1.2010, 13:31

[Karaban]

Помогите пожалуста че делать, как убрать нижнюю панель (она вроде убрана но че то мешает) нужно ковырять main view? там высота стоит на 31 на сколько ставить там или вообще че делать?




И еще можна зделать так чтоб она(панель меню) не выезжала а чтоб её совсем небыло?

Сообщение отредактировал Karaban - 4.1.2010, 22:17

[V!iT]

Карабан,то софт клавиши мешают,наверно )
Вот, кто хочет все навороты - ставим!
Если все правильно будет работать,то выложу в Эво 0.6
mainmenu --- сюда кидать /usr/SYSqtapp/xe/flows/
default --- сюда кидать /usr/SYSqtapp/xe/resource/skins/
Качать обе папки и старые удалить
100% рабочее,скользящие софт кнопки,я не ставил ---> Поставьте мое выложенное,а потом замените два файла

Сообщение отредактировал V!iT - 5.1.2010, 8:55

[Karaban]

V!iT, Спасибо.
Все классно пашет, два файла : софт клавишы main_view.svg и softkeys.svg из поста №440
Желательно папки свои default и mainmenu удалить, а потом новые закачать,а не заменять их.

Сообщение отредактировал Karaban - 5.1.2010, 8:27

[TiM_22R]

Хотя уже не раз обсуждалось на страницах темы, решил ещё раз вернуться к colors.css
Итак, colors.css (таблица стилей) - аналог ini-файлов для элементов Главного и его svg-подменю.
В большинстве стоковых прошивок и только для загружаемых скинов он находится в /usr/data_resource/icon/colors.css. Для стоковых скинов, в зависимости от скина /usr/data_resource/skin/default*/.
Для примера прикрелён файл с некоторыми комментариями .
В качестве значения цвета можно использовать именованные значения (black, orange и т.д), а также код в шестнадцатеричной форме (#fff, #a1b2c3).
Если параметры в svg-коде и colors.css совпадают, то их значения берутся из colors.css. Т.е., если в svg стоит font-size="22", а в colors.css в соответствующем классе стоит font-size: 18; , то шрифт будет 18. Это правило справедливо для всех параметров. Кстати, многие параметры, общепринятые в svg в нашей реализации не работают, или работают со значениями "по умолчанию". Итак...

ЦВЕТА
fill - цвет шрифта или заливки замкнутой фигуры. По умолчанию (равнозначно отсутствию параметра) выводится чёрным цветом с прозрачностью 1. Если вам не нужна заливка, то лучше применить данный параметр со значением "none" {fill:none;}.
Дополнительный параметр fill-opacity - прозрачность шрифта/заливки. В качестве значения - любое число от 0 до 1 {fill-opacity: .75;}
stroke контур шрифта или замкнутой фигуры, линии. По умолчанию не выводится.
Доп.параметры те же, что и для fill, плюс stroke-width - толщина контура в пикс.
ШРИФТ
font-size - размер шрифта. {font-size: 16.5;}
font-style - курсив. normal/italic/oblique. По умолчанию (так же при отсутствии параметра) - normal. {font-style: italic;}
font-weight - "жирность" шрифта. Значения lighter(тонкий), normal (норма), bolder (утолщённый), bolder (толстый) или цифровые значения 100, 200, 300, 400, 500, 600, 700, 800, 900 {font-weight: 100;}
text-decoration оформление текста underline(подчёркивание), overline (надчёркивание), line-through (перечёркивание). По умолчанию - "none" {text-decoration: underline;}
Это далеко не полный список, но для основных параметров вполне достаточно.

СОФТ-КЛАВИШИ.
Многим не нравится тот факт, что высота клавиш в Главном меню отличается от высоты в других местах. Всё дело в main_view.svg, в котором выделяется область для клавиш. В начале была просто изменена высота клавиш в svg. Потом мне пришла идея привязать этот параметр к colors.css, что после небольших изменений в main_view удалось реализовать. Почти все main_view.svg, выкладываемые в этой теме поддерживают изменения высоты и прозрачности через colors.css Для этого нужно найти в нём (colors)

Код

****************************************************
Softkeys
AIA
PopUp Header & Midlet Screen header
****************************************************/
.textSftkySel { fill: #E5EFFA; font-weight: light; font-size: 19; opacity: .8;}
.textSftkyStd { fill: #FFF; font-weight: light; font-size: 20; height: 30;opacity: .8;}

Высота ВСЕХ клавиш одновременно зависит от значения параметра height в классе .textSftkyStd . А вот параметры шрифта можно устанавливать для НОРМАЛЬНАЯ/НАЖАТА по отдельности. Параметр opacity отвечает за прозрачность самих софт-клавиш (не текста!).
ВАЖНО! На стандартном (из коробки) main_view.svg это не работает. Не устанавливать height меньше 1 - пропадёт само меню ФУНКЦИИ.
Тем, кто не пользуется всякими часиками, анимацией фона и т.д., прикреплён "обычный" файл без всего этого, но с "нормальным" размером фона 240х320, а не 4шт 60х160 и с включённой регулировкой софт-клавиш.

main_view_std_1_.svg.rar   ( 2.06 килобайт ) Кол-во скачиваний: 303

colors.css.rar   ( 4.92 килобайт ) Кол-во скачиваний: 349

Сообщение отредактировал TiM_22R - 5.1.2010, 10:18

[TiM_22R]

Вариации на тему Списка list/iconList.svg

iconList.svg.rar   ( 7.03 килобайт ) Кол-во скачиваний: 356

[swansea]

Скажите пожалуйста как убрать СОФТ-КЛАВИШИ как на sim4.

прошивка Ево 0.6

Заранее спасибо

Сообщение отредактировал swansea - 9.1.2010, 13:34

[Entom]

Я убирал в main_view.svg. Причем их тогда не видно вообще.

[TiM_22R]

Сделав пару вариантов Сетки для скина Aero (см.тему Скинов), соорудил ещё один, "обычный". Из-за увеличившегося кол-ва элементов подтормаживает, особенно в Подменю...

[swansea]

Всем привет...

Тим спасибо за твои труды все что ты делаешь, все супер!

что отвечает за анимацию при в ходе в главное меню(иконки выезжают с разных сторон:)?и как сделать как на стоке просто без анимации?

заранее спасибо..

[TiM_22R]

Смотря в каком grid'е. В некоторых на эту анимацию "завязаны" ёще процессы. Если в последнем, то можно вот так:
................
<handler type="application/ecmascript" ev:event="focus"><![CDATA[
var nx = 0;
var nx = dm.flow.folderNavLevel;
document.getElementById("NavLevel").setFloatTrait("x", nx);
if (nx<1) {document.getElementById("enter").beginElement();
old=dm.view.tags.MainMenuList.focusedIndex;}
..........................................................
Удалить из кода выделенное.
А ещё можно поставить mainmenu.js без перезагрузки меню - не так давно выкладывал...

[TiM_22R]

По спецзаказу main_view.svg с часами без секунд, с одним фоном. Параметры шрифта часов привязаны к colors.css textMMGridStd. Если не нужна "тень", то в строке

Код

<textArea id="FullBg" width="174" transform="translate(33 7) scale(.98 1)" text-align="center" fill="#000" stroke="none" font-size="19" font-weight="100">TIM</textArea>

fill="none"

[TiM_22R]

Просто так, для пробы ;) Практически, "полноценный" скроллбар, т.е. включены "заглушки" на ползунок и дорожку.

[policarp]

Вот нечто подобное я и хотел! Огромнейшее Спасибо Тим!

[TiM_22R]

Ещё вариация Сетки 3х3 с "резиновым" курсором...

[Bogd@n]

примонтировал папку дефаулт из поста номер 241 ,теперь у меня в подменюшках 2 скролбара,как от одного избавится?)

[TiM_22R]

примонтировал папку дефаулт из поста номер 241 ,теперь у меня в подменюшках 2 скролбара,как от одного избавится?)

Там ещё на выбор два архива для Подменю. Один для режима Сетка по умолчанию при входе в Подменю, другой - Список соответственно. Без их монтирования будет дубляж скроллбара в Списке.

Добавлено позже (24.1.2010, 15:42):
В отличие от предыдущего файла, в котором "резиновый" курсор рисовался в самом файле, в этом используется картинка фона иконки по стандартному пути shadow_24bit.png . Какую хотите, такую и ставте....

[V!iT]

Тим.......круто сделал!!!!!!!
Но не забудь,для 3х4 сделать!

[Entom]

Tim, мог бы ты сделать сетку 3х3 с резиновым курсором, но без вращения и отражения иконки? И ту сетку, где встроен фон иконки курсора. Может тогда и значки больше.
А вообще говоря, то это лучшее, что я когда либо видел!

[TiM_22R]

Tim, мог бы ты сделать сетку 3х3 с резиновым курсором, но без вращения и отражения иконки?

Мне тоже как-то это вращение показалось несовсем к месту ;)

Независимо от исходного размера, shadow_24bit.png будет масштабирован в 74х74.


Сообщение отредактировал TiM_22R - 25.1.2010, 6:00

[Entom]

TiM_22R, классно. Спасибо.
Но вот опять просьба: может опустить иконки (меню без софт-клавиш)?

[TiM_22R]

TiM_22R, классно. Спасибо.
Но вот опять просьба: может опустить иконки (меню без софт-клавиш)?

Ох, ребята, ребята! :)

[Entom]

Ой, спасибо огромное!

[TiM_22R]

Ой, спасибо огромное!

Пожалуйста! И что б уж закрыть (надеюсь) "резино-техническую" тему: 3x4 обычная и для без софт-клавиш.

[syberside]

Тим, ну ты просто мастер, опять всех порадовал

[TiM_22R]

Вобщем, не всё так, как хотелось бы ;) Почему-то не получилось патчи прописывать через JS, пришлось прописывать напрямую - 64 дорожки. Не знаю, стоило это того...

[policarp]

Не знаю, стоило это того...

Безусловно стоило!

[TiM_22R]

И всё-таки, к "резиновому" курсору пришлось вернуться - некоторые косяки радражали. Добавил почти все возможные направления перемещения. Теперь вот даже Сетка с некратным 3 количеством приложений (4,5,7,11,13) обрабатывается более-менее нормально. ;) Сразу всё до кучи...
Тим

Сообщение отредактировал TiM_22R - 29.1.2010, 10:52

[Entom]

Вот теперь вообще супер!
Спасибо огромнейшее.

[policarp]

Тим,вот бы ещё анимацию курсора добавить...
в архиве раскадровка.

Moneta.rar   ( 98.81 килобайт ) Кол-во скачиваний: 120

Сообщение отредактировал policarp - 31.1.2010, 7:06

[TiM_22R]

Тим,вот бы ещё анимацию курсора добавить...

Я как-то уже это делал... Не уверен, что эта фича будет востребована ;) Из-за иконки анимация просмотривается плохо... Впрочем...
Сделал по аналогии с анимацией фона меню по таймеру. Только maxframe=20. Так как папку images всё равно целиком монтировать, то для избежания путаницы кадры поместить в отдельную папку cursor, а уже её - в images. Хотя расширение у картинок должно быть png - сами они могут быть в любом формате. Пробуйте... :)

[policarp]

Я как-то уже это делал...

Помню!

Не уверен, что эта фича будет востребована

Востребована!

Из-за иконки анимация просмотривается плохо...

Анимация ведь не обязательно эта? К тому же всё равно видно её или нет, общая картинка неплохая!
Правда я думал что будет "резиновый" эффект...
И в подменю буквы сверху налезли на цифры... Уже разобрался... Извини что напрягаю.

Сообщение отредактировал policarp - 1.2.2010, 19:39

[syberside]

тим, можешь подправить файлы меню от скина AplleCZ? там на 12 пунктов, но ккрасиво... хотелось бы где нить 30

[TiM_22R]

Анимация ведь не обязательно эта? К тому же всё равно видно её или нет, общая картинка неплохая!
Правда я думал что будет "резиновый" эффект...
И в подменю буквы сверху налезли на цифры... Извини что напрягаю.

А я специально отключил "растяжку" ;) Впрочем, это исправляется за пару минут. Открой "резиновый" 3х3. Начиная со строки
<use xlink:href="#iconHighlight">
<animateTransform id="MoveR" type="scale" values="1 1;2 1;1 1" ......................
..................
..................
</use>
Скопируй весь этот блок и вставь вместо аналогичного в 3х3 с анимацией курсора.
На счёт подменю не понял - поподробнее или скрин.

syberside, там стандартный grid, только на 12 иконок. Если другие мои варианты не устроют (от Аэро например), то переделаю какой-нибудь из своих ;)

Сообщение отредактировал TiM_22R - 1.2.2010, 3:31

[portapro]

Обьясните что я не так делаю ,пожалуйста.
скачал к примеру "grid_3x4_slider_aniCur.svg.rar"- дальше переименовал в main_view.svg ,
далее по фтп скинул по пути :/usr/SYSqtapp/xe/resource/skins/default/view/ с заменой,
закинул анимированный фон :/usr/SYSqtapp/xe/resource/skins/default/media/images/,
скачал в прикрепленных файлах Тима резинку и переименовал ее в shadow_24bit.png и закинул тоже по нужному пути,отсоеденился от фтп,рестарт тела и в меню у меня черный экран -сверху написано Мотофан.ру и две стрелочки справа с боку (все это белым цветом).
Кто может нормально обьяснить не для профи- очень прошу...чтобы не загромождать здесь можна в ПМ.

Сообщение отредактировал portapro - 1.2.2010, 14:38

[SanchoNT]

скачал к примеру "grid_3x4_slider_aniCur.svg.rar"- дальше переименовал в main_view.svg ,
далее по фтп скинул по пути :/usr/SYSqtapp/xe/resource/skins/default/view/ с заменой,

переименовывать надо в grid.svg ! ну и закидывать соответственно в другую папку, точный путь щас не скажу но думаю сам найдёшь где там grid.svg лежит

[syberside]

ну там оч красиво сделано... выбранный пункт и анимация. сделай какой тебе удобней плз, а я гляну [color=#FF6666] :) [/color]

[TiM_22R]

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

Ладно, но попозже ;)

Маленькие хитрости :)
"Самоцентрующийся" Список. Ко мне не раз обращались с просьбой подправить косяк в Списке, связанный с "обрезанием" нижней или верхней строки. Тут мне пришла запоздалая идея автоматизировать это дело. Задача оказалась простой, но невыполнимой :( Подставить вычисленное значение ширины строки с учётом размера шрифта и высоты софт-клавиш через JS во встроенную функцию прокрутки списка оказалось невозможным. НО! Нашёлся другой, более простой способ. Открываем list или iconList.svg, находим строку

Код

<rect id="bbox" visibility="hidden" width="100%" height="36"/>

height - высота строки. В стандартном файле там кажется стоит 36. Меняем его на 14.27%
ВСЁ. Теперь при изменении высоты софт-клавиш в colors.css (или их отсутствие) Список будет "отцентрован" по вертикали автоматически. Возможно, понадобится небольшая корректировка.
Тим.


Сообщение отредактировал TiM_22R - 3.2.2010, 5:39