Добро пожаловать к нам в гости! Наш сайт посвящён программе NeoBook, с помощью которой вы легко сможете создавать собственные мультимедиа-приложения без необходимости изучать сложные языки программирования! Зарегистрируйтесь, чтобы стать членом нашего сообщества.
Дизайн в любой программе - важная вещь. Вот мы нарисовали дизайн, он красивый, возможно идеальный... на данный момент. Мы хотим что-то в нем изменить, ок, выпускаем новую версию. Но однажды мы хотим сделать дизайн тематический, под какой-то праздник например... что тогда делать? Можно конечно выпустить праздничную версию отдельно или вообще заменить текущий дизайн на время. Но некоторые могут не захотеть этого, например они привыкли к стандартному. А ещё некоторым людям нравятся определенные цветовые схемы, а некоторые ещё и сами рисуют... что тогда? А вот тогда мы делаем заменяемый дизайн.
Для начала...[PubDir] это глобальная переменная NeoBook, которая содержит в себе путь до нашей программы. В нашем случае мы будем использовать её для того, чтобы программу можно было перекинуть в другую папку или даже на другой компьютер, после чего запустить и она будет прекрасно работать без каких либо глюков. Пример: Ваша программа располагается так C:\Program Files\Моя прога\prog.exe. Тогда [PubDir] будет содержать в себе C:\Program Files\Моя прога\. Если переместить программу на диск D вот так D:\Моя прога\prog.exe, то [PubDir] будет содержать D:\Моя прога\.
[StyleDir] это обычная переменная, которую я использую для того, чтобы обозначить папку со стилем. Вы в праве назвать её как угодно.
Организация файлов или как сделать всё удобно.Предлагаю самый простой вариант организации файлов - папки с набором картинок. Тобишь каждый стиль у нас это отдельная папка с картинками без каких-либо ухищрений. Например у нас есть программа, в которой 3 кнопки и фон. Мы хотим сделать всё это изменяемым, первый стиль Стандартный, а второй Новогодний. Отлично, выходит нам нужно 8 картинок, 4 на каждый стиль. Создаем папку рядом с нашей программой. Назовем её Styles. Далее в этой папке создаем папки для стилей. У нас 2 стиля, верно? Значит создаем 2 папки, одна Classic, вторая NewYear. Замечательно, теперь просто рисуем картинки для первого стиля и кладем их в папку Classic. Обзовем картинку фона bg.png, а картинки для кнопок b1.png, b2.png и b3.png соответственно. Теперь рисуем картинки для второго стиля NewYear и кладем их во вторую папку. А вот обзываем мы их также, bg.png, b1.png, b2.png, b3.png.
Тобишь выходит следующее - у нас есть папка для стилей Styles. Да, было бы не очень удобно и приятно если бы у нас все стили бы валялись рядом с нашей программой кучей папок, согласитесь? В этой папке у нас 2 папки стилей - Classic и NewYear. Внутри каждой папки есть картинки с одинаковыми названиями, но разные внутри. Но зачем? А вот это вы поймете прочитав следующие части статьи.
Подключение картинок или как работаю переменные в картинках.Подключать картинки мы будем через переменные. В свойствах любого объекта-картинки есть поле, в которое мы пишем адрес этой самой картинки... но никто не мешает нам вместо адреса написать переменную, которую потом мы всегда можем изменить в любой момент работы программы.
<тут будет картинка поля с адресом> <а тут с переменной [bg]>
Но мы хотим сделать так, чтобы наша программа не зависела от того, где она расположена, верно? Вот тут то мы и применим глобальную переменную [PubDir]. Тобишь вместо просто переменной мы запишем [PubDir][bg]. Однако мы точно знаем где у нас лежат все наши папки со стилями - в папке Styles, а ещё мы знаем названия всех наших картинок, независимо от того, какой стиль мы будем использовать. Теперь думаю понятно зачем нам надо было делать одинаковые названия в каждой папке стиля, ведь теперь мы можем создавать десятки стилей и не беспокоится о том что нам что-то придется менять в самой программе. Что же у нас получается? Для фона у нас выйдет такая вот строчка:
<картинка где у нас написано [PubDir]Styles/[StyleDir]/bg.png>
В итоге чтобы у нас изменился фон нам надо всего навсего поменять переменную [StyleDir]! Для стандартного стиля [StyleDir] меняем на Classic, а для новогоднего на NewYear. А если мы создадим например стиль в зеленых цветах? Нам надо будет просто создать новую папку в папке Styles, например назовем её GreenStyle. Далее рисуем картинку фона и 3 картинки кнопок для нового стиля, кладем их в эту папку и меняем названия на bg.png для фона и на b1.png, b2.png, b3.png для кнопок соответственно. Всё просто и нам ничего не пришлось менять в самой программе, верно?
А как дать пользователю возможность менять стили внутри самой программы без каких-либо проблем? Ведь нам надо сделать так, чтобы менялась переменная [StyleDir] и было известно на что её менять. Это будет описано ниже.
Выбор пака графики. Вот мы решили сделать паки графики... но нужно дать пользователю возможность выбрать дизайн, который ему нравится. А как это организовать? Всё банально. Создаем обычный комбо-бокс. Перед его показом пользователю сканируем нашу папку со стилями, есть такая команда, которая выдает список всех папок по данному адресу и записывает список в переменную. Собственно, в комбо-бокс вместо стартовых вариантов тупо пишем переменную, которая получается после сканирования. Там всё само разложится по строчкам как надо, вот так вот просто =) Ну и на сколько мы помним в самом комбо-боксе есть поле, в котором написано мол сюда сохраняется выбранный вариант... отлично, сюда мы вводим [StyleDir] (как в нашем примере) и всё, при нажатии на строчку любую из нашего комбо-бокса сразу изменятся картинки согласно нашему стилю. Вот такая вот хитрость, которая оказывается проста и легка в исполнении.
Кнопки с изменением картинки при наведении мышкой. Вариант без глюков. Всё хорошо, замечательно. Но вот мы хотим сделать хорошие кнопки, которые при наведении мышкой изменятся (например будут подсвечены), а при нажатии тоже будет какой-нибудь эффект. У самих кнопок есть 3 варианта подключения картинки. Первый - просто фон. Второй - выбрать эффекты из библиотеки... в которой ничего адекватного нет. Третий - по картинке на каждый эффект, всего их 3. В третьем случае первая картинка это когда кнопка в обычном состоянии, вторая картинка это когда мы на кнопку навели мышкой, ну а третья картинка - когда мы на неё нажали. И всё бы хорошо, да вот только мы не можем вставить туда переменные. После компиляции нам просто будут показываться кресты, мол ошибка там и черти знает что. Но нам то нужен изменяемый дизайн! Оказывается есть выход, не банальный, но и не сложный. Есть такая замечательная команда, которая меняет значение файла у объекта. Если это картинка, то изменится согласно адресу этого файла, а если кнопка... тут возможно 3 варианта, ведь у кнопки 3 вида показа фона. В первом случае, если мы выбрали картинку фоном, просто изменится фон. Работоспособно... но не кошерно. Третий вариант - изменится картинка обычного состояния кнопки, а вот остальные останутся теми же. Нее, глупость, нам не подойдет. А вот если был проставлен второй вариант... всё работает! Картинка будет изменятся как надо, что и требовалось. Ну а в начале, из той самой библиотеки картинок, я просто выбираю стрелку так какую-то, мне, а точнее нам, всё-равно что там изначально, изменяем же.
Картинки для кнопок с 3-мя эффектами. Картинки для кнопок с 3-мя эффектами рисовать не сложно, даже в паинте можно это сделать, так вот. Допустим размер кнопки у нас 100х30. Отлично, берем рисуем кнопку с таким размером. Потом рисуем кнопку с эффектом при наведении, например добавляем светимость, типа при наведении мышкой она светится. Ну и рисуем картинку кнопки когда она нажата, например как будто она вдавлена. Замечательно. А далее... далее просто их объединяем в одну картинку, а точнее склеиваем горизонтально. В нашем случае должна получится картинка 300х30. Сначала будет картинка обычная, потом при наведении мышки, а потом при нажатии. Вот и все дела. NeoBook сам знает как их использовать, просто меняем адрес файла для кнопки как описано выше.
О стандартизации. Если пользователи будут рисовать картинки, то стоит ввести какую-никакую стандартизацию. Да и вам перерисовывать тоже будет видимо не в кайф. Стоит всё учесть и если что-то менять, то так чтобы и старые дизайны подходили хоть как-то, и новые потом не пришлось менять. Если что-то и дорисовывать, то дорисовывать, а не перерисовывать всё.
Как сохранить текущий дизайн. Текущий дизайн сохранять просто - достаточно в какой-нибудь текстовый файл записать значение переменной [StyleDir]. Можно это делать сразу после выбора дизайна, а можно при закрытии программы. При загрузке мы читаем текстовый файл, записываем прочтенное в переменную. Для картинок этого достаточно, а вот для каждой кнопки нужно прописать присвоение адреса нового. Кстати, адрес такой же как у картинок, например [PubDir]styles/[StyleDir]/b1.png, где b1 у нас это название картинки для кнопки. Тобишь у нас меняется только папка, что ну очень удобно и независимо от того где лежит наша программа, как я и писал ранее.
P.S. Писалось вообще для пары человечков, но решил выложить тут для всех, и я не понимаю почем они тут на сайте не задают вопросы, но да ладно. Текст не претендует на супер важность. Мой сайт - http://фирмы.онлайн
Сообщение отредактировано Format-X22 - Сб, 14 Января 2012, 00:45
Format-X22, класс. как раз особенно нужен не только справочный материал, но и затрагивающий логику, основные алгоритмы решения задач...
если есть желание, добавь скринов и перепиши некоторые моменты в более литературном стиле чтобы было понятно всем новичкам.
И предложение всем, если есть много желания, можно написать некий обзорный материал по работе с изображениями. По примеру данного материала. Он должен включать в себя рассказ о встроенных обьектах и командах, что можно сделать с их помощью, обзор плагинов и их команд, + обязательно типичные задачи по работе с изобр. и способы их решения (наложение watermark и пр.). Проблематику вопроса можно изучить по постам на форуме.
Еще раз скажу в чем ценность, нужно поделиться практическими советами, примерами задач и их решений, отметить какие-то особенности тех или иных способов. А не просто сделать справочный обзор, поэтому автору лучше быть из тех кто уже не раз с этим сталкивался и решал разные вопросы по теме.
Если вы особенно не увлекались изображениями, можете написать о другой теме в которой чувствуете себя компетентным. Как задавать вопросы
Гм... Ну, здесь я больше склонен согласиться с mishem:
Quote (mishem)
если бы я Нб не знал бы, то ничего не понял бы.
нежели "класс". Практически, если не все, то многое из описанного уже было озвучено на форуме.
Тем-не-менее, спасибо!
Format-X22, если вы пожелаете разместить свой материал не на форуме, а на сайте, например, в разделе "обучающих материалов", то его надо несколько даработать, а именно: - добавить к материалу "живые" необушные примеры, или, как минимум, картинки-скриншоты (лучше всего и то и другое); - написать все языком, понятным не знатокам NB, а именно - начинающим, т.е. исключить всякого рода "взрослую" програмерскую терминологию типа "кидаем на форму", а пользоваться исключительно необушной, т.е. "страничка", а не форма (это пожелание не по результатам этого текста, а вообще). - исключить всягого рода сленг, типа "примерчег", "кошерно", и т.п.
Кстати, последнее (сленг) будет безжалостно искореняться даже на форуме!
Ну, и добавить (или изменить) то, что посчитаете нужным.
Вот тогда, возможно, и будет "класс".
Если вас заинтересовала эта идея, то все дальнейшее обсуждение вести через ЛС.
Quote (DEMBEL)
Еще раз скажу в чем ценность, нужно поделиться практическими советами, примерами задач и их решений, отметить какие-то особенности тех или иных способов. А не просто сделать справочный обзор, поэтому автору лучше быть из тех кто уже не раз с этим сталкивался и решал разные вопросы по теме.
Вот это, кстати, очень верно! - А вам какую операционку поставить - экспи, семерку или висту? - Это ты сейчас о чем? - Олег Георгиевич, вам какой компьютер хотелось бы - молодежный или надежный? - Ну, конечно, надежный! - Вот, значит - экспи, без вопросов! Сейчас сделаем...
(Улицы разбитых фонарей, сезон 10, серия 17)
Единственная инновация Windows 8 это - Metro, чтобы дебилы по иконкам не промахивались!
При модном втюхе модоподдающимся начинает нравиться
Ну если руки дойдут - доработаю. И видимо не на этой неделе ибо NeoBook с собой нема.
Добавлено (11 Января 2012, 12:35) ---------------------------------------------
Quote (Peter)
уже было озвучено на форуме
Ну статья тем и отличается что собирает всю разрозненную информацию воедино, не читать же рукописи 10-ти физиков-ядерщиков в самом деле, проще 1 учебничек создать с оглавлением А вообще из своего опыта писал, с чем сталкивался наяву. С тем что замудрил в ряде случаев - согласен, не совсем для новичков писал изначально, так раскрыть тему полнее и упростить можно. А вообще согласен на то чтобы разместить на сайте. И как я понимаю раздел статей всё ещё в разработке. Мой сайт - http://фирмы.онлайн
Ну статья тем и отличается что собирает всю разрозненную информацию воедино, не читать же рукописи 10-ти физиков-ядерщиков в самом деле, проще 1 учебничек создать с оглавлением
Format-X22, поверьте, все то, что описано в статье давно известно знатокам NB. Хотя, не скрою, и у "зантоков" случаются "пробелы" и проколы, ведь NB "от корки до корки" даже сами разрабы порой не знают - я не раз замечал на оффоруме как некоторые вопросы ставили разрабов в тупик. Потому учебные материалы должны быть ориентированы, в первую очередь, на новичков, а для них (сами понимаете) нужно излагать как можно проще и понятнее, без словесных головоломок. Те вещи, которые вам (и другим НЕ новичкам в NB) кажутся вполне естесственными и понятными, для начинающего могут оказаться камнем преткновения.
Quote (Format-X22)
А вообще согласен на то чтобы разместить на сайте.
Тогда готовьте статью к размещению. Дальнейшее обсуждение - через ЛС. - А вам какую операционку поставить - экспи, семерку или висту? - Это ты сейчас о чем? - Олег Георгиевич, вам какой компьютер хотелось бы - молодежный или надежный? - Ну, конечно, надежный! - Вот, значит - экспи, без вопросов! Сейчас сделаем...
(Улицы разбитых фонарей, сезон 10, серия 17)
Единственная инновация Windows 8 это - Metro, чтобы дебилы по иконкам не промахивались!
При модном втюхе модоподдающимся начинает нравиться
разместить свой материал не на форуме, а на сайте, например, в разделе "обучающих материалов"
Простите за наивный вопрос: "форум" и "сайт" - это что, разные ресурсы? Полагаю, что я сейчас на форуме. А по какому адресу сайт искать? Здесь что-то я РАЗДЕЛА "обучающих материалов" не обнаружил нигде...
Простите за наивный вопрос: "форум" и "сайт" - это что, разные ресурсы? Полагаю, что я сейчас на форуме. А по какому адресу сайт искать? Здесь что-то я РАЗДЕЛА "обучающих материалов" не обнаружил нигде...
В разработке... пока доступен только форум...
Сообщение отредактировано Dordex - Чт, 12 Января 2012, 14:24
vampirus, голову включать надо Прикрепления: File.zip(8Kb)
это я понял просто я переменную не там влепил спасибо но только как сделать так чтобы программа уже стартовала с таким дизайном вот это проблема походу через .ini надо побывать решать проблему
я чуток по другому решил сделать так как (SetVar "[StyleDirs]" "2") программа не стартует с выбраным в прошлый раз дизайном. Но натолкнулся на ошибку знаю уже всех задрал
vampirus, Во первых хелп. В частности переменные, условия... При старте нужно присвоить переменным значения. Что бы знать значения, нужно их сохранять или в файл или в реестр. В твоем случае, лучше в файл. При старте программы читать значения из файла и присваивать их. Если в файле значение пустое или не существует(файл могут удалить) присваивать значение по умолчанию. Не хочешь читать хелп?
Когда то давно, было желание сделать дизайн программы что бы кнопки были на всю ширину. Н проблема в том, что разрешение у всех разное, и в итоге сложно подобрать тот размер который нужен. И картинок не напасешься.
Сейчас благодаря плагину Гарика ksRectGradient (надо ж когда то его хвалить, а то мы все критикуем и критикуем), рисовать картинки к кнопкам можно самой НБ.
Получается что то типа такого
Правда не одним этим плагином можно это сделать, нужен еще hpwImage и ksFunctions. Плагинов много, но думаю оно того стоит. Таким образом можно практически не только весь дизайн рисовать, но еще и давать пользователю поучавствовать в творчестве.
Классно получается... "Вы знаете, нам очень понравились все варианты, что вы прислали. Даже не знаем, что выбрать… А может попробуем объединить все три логотипа в один?"
Менять цвет, шрифт и рисунок можно и у штатных кнопок NB. Единственное, что нельзя сделать штатными средствами - нарисовать градиент - А вам какую операционку поставить - экспи, семерку или висту? - Это ты сейчас о чем? - Олег Георгиевич, вам какой компьютер хотелось бы - молодежный или надежный? - Ну, конечно, надежный! - Вот, значит - экспи, без вопросов! Сейчас сделаем...
(Улицы разбитых фонарей, сезон 10, серия 17)
Единственная инновация Windows 8 это - Metro, чтобы дебилы по иконкам не промахивались!
При модном втюхе модоподдающимся начинает нравиться
Я вижу просто типа кнопки с надписями, и никаких рисунков - А вам какую операционку поставить - экспи, семерку или висту? - Это ты сейчас о чем? - Олег Георгиевич, вам какой компьютер хотелось бы - молодежный или надежный? - Ну, конечно, надежный! - Вот, значит - экспи, без вопросов! Сейчас сделаем...
(Улицы разбитых фонарей, сезон 10, серия 17)
Единственная инновация Windows 8 это - Metro, чтобы дебилы по иконкам не промахивались!
При модном втюхе модоподдающимся начинает нравиться
Менять цвет, шрифт и рисунок можно и у штатных кнопок NB.
Так это и есть штатные кнопки.
ЦитатаPeter ()
- нарисовать градиент
А здесь везде градиент.
Если верхнюю полосу мы к примеру можем заменить на рисунок вставив туда градиент и замостить его что б при изменении размера изображение не менялось, то с кнопками так мы не сможем поступить.
Таким методом можно много интересных вещей сделать. Методом наложения одного прямоугольника на другой, мы можем делать и рамку градиентную.
Единственное в этом плагине не хватает многоуровнего градиента. Плагин для создания градиента сильная вещь, но его нужно делать по уму. И плагин hpw тоже вещь хорошая, но сложный в понимании.
Я его уже какой год пытаюсь перевести, и так до конца с ним разобраться терпения не хватает. Есть у него команда тень создавать, но вчера день угробил, так до конца и не могу понять, как же она все таки работает.
Добавлено (24 Февраля 2014, 14:09) ---------------------------------------------
ЦитатаPeter ()
Я вижу просто типа кнопки с надписями, и никаких рисунков
Ну правильно, рисунки создаются при запуске и изменении размера окна.
Вычисляется размер, рисуются картинки в размер, и заменяются. Там весь код подробно закомментирован.
Специально для новекньких расписывал.
Добавлено (24 Февраля 2014, 14:11) ---------------------------------------------
Думаешь? Мне всегда представлялось, что чрезмерное увлечение в интерфейсе программ градиентными заливками (за исключенимем случаев, когда градиент имеет какой-нибудь информативный смысл) - дурной тон или дещевые понты. Впрочем, о вкусах...
Цитатаmishem ()
не могу понять, как же она все таки работает
Понятно - на оффоруме ты уже, небось, боишься вопросы задавать?
Добавлено (24 Февраля 2014, 14:25) ---------------------------------------------
Цитатаmishem ()
Уж мой проект мог бы смело запускать
Я на работе, и тут у меня NB нет. Да и ещё плагины ставить, которые нужны мне как щуке... - А вам какую операционку поставить - экспи, семерку или висту? - Это ты сейчас о чем? - Олег Георгиевич, вам какой компьютер хотелось бы - молодежный или надежный? - Ну, конечно, надежный! - Вот, значит - экспи, без вопросов! Сейчас сделаем...
(Улицы разбитых фонарей, сезон 10, серия 17)
Единственная инновация Windows 8 это - Metro, чтобы дебилы по иконкам не промахивались!
При модном втюхе модоподдающимся начинает нравиться
Да нет, он просто пошлет примеры смотреть. В примере вроде все понятно, начинаешь с изображением что то делать, не то. Там еще со щтампом у него команды есть...
Короче надо посвящать этому плагину не один день, но в нем острой необходимости пока нет, вот и откладывается все на неопределенный срок.
ЦитатаPeter ()
дурной тон или дещевые понты.
Твою позицию мы знаем. Кстати ты не заметил что одинок в этом вопросе. Не хочешь читать хелп?
И что? Мне это глубоко по-барабану! Точно так же, как и всем остальным. Одинок/не одинок... Какая разница? Или мнение большинства должно быть истиной, и ему надо подчиняться? - А вам какую операционку поставить - экспи, семерку или висту? - Это ты сейчас о чем? - Олег Георгиевич, вам какой компьютер хотелось бы - молодежный или надежный? - Ну, конечно, надежный! - Вот, значит - экспи, без вопросов! Сейчас сделаем...
(Улицы разбитых фонарей, сезон 10, серия 17)
Единственная инновация Windows 8 это - Metro, чтобы дебилы по иконкам не промахивались!
При модном втюхе модоподдающимся начинает нравиться
