Равиль Зарипов (ZuBy)

Как конвертировать растровую картинку в векторный TPath Firemonkey.
How to convert a bitmap image (png, jpeg, bmp) into a Firemonkey vector TPath. Manual.

Плюсы векторных изображений: 
Можно изменять размер избражения в любую сторону, уменьшать и увеличивать, без потери качества. Картинка всегда будет с четкими краями, без размытия по краям и квадратиков. Можно легко изменять в RunTime цвет заливки и обводной рамки, изменяя цвета в полях Fill и Stroke компонента TPath. Заливка как правило одна - это цвет из свойства Fill Color. Но ... цвет может быть и градиентом из множества цветов, который можно указать в диспетчере объектов, там же можно загрузить и Bitmap как текстуру в качестве заливки.  Можно анимировать изображение, изменяя вышеуказанные свойства, а также направление градиента, размер, толщину обводной линии итд. Тоже можно менять и для Stroke свойства - обводной рамки.
Минусы:
Получаемое изображение упрощенное. Т.к. оно может содержать только один путь (Path) и одну плоскость.
Возможно получиться скомбинировать множества TPath, положив их друг на друга с прозрачностью. 
Векторное изображение вычисляется и рисуется "в живую", поэтому потребуется больше ресурсов, чем при отрисовке обычных растровых картинок png, jpg, bitmap.
Что означает нагрузку на аппаратную часть, замедление работы программы и более быструю разрядку мобильного устройства.
Поэтому если и использовать подобные векторные изображения, то в случае если нужно отобразить большие картинки-символы на разных экранах (не иконки) - например на маленьком экране телефона, и на большом планшете и на еще большем Desktop экране. 
Хотя в примере \Samples\Object Pascal\Multi-Device Samples\User Interface\CustomListBox\CustomListBox.dproj используется векторная иконка\чекбокс очень простая. 
 
Преимущества векторного изображения наглядно:

 
Ингредиенты: 
1. Векторный редактор, я взял бесплатный inkscape, который можно скачать здесь . 
2. Картинка. Желательно чтобы картинка была с большим разрешением, от 300px и больше. Если взять изображение маленького размера, например 48x48 или 64x64, то контуры получатся не такими точными. И хотя inkscape все равно применит сглаживание контуров, и квадратиков вы не увидите, обводные линии могут получиться другой формы, к примеру более жирными или могут слиться с другими линиями.
Исходное изображение лучше брать в формате PNG, т.к. JPEG оставляет артефакты в виде точек, в итоге программа при трассировке может захватить и их, что не желательно. Конечно же если другого исходника нету, то смысла конвертировать jpg в png нет - качество не улучшится.
Основной метод конвертации - это трассировка изображения, - когда алгоритм ищет края и обводные линии, и на основе их рисует свои. Потому качественные результаты получаться если брать изображение с одной плоскостью, без теней, градиентов и деталей, в стиле Windows 8\10 или Android. Т.н. Flat (плоский) icon. 
3. IDE RAD Studio Delphi или С++

Приступим. 
Запускаем incscape. 
Размер исходной png картинки 668x720.

1. Меню File > Open - указываем путь. Иконка загрузилась.
2. Нажимаем левой кнопкой мыши на картинку, чтобы она выделилась.
3. Меню Path > Trace Bitmap. Сразу выберите чекбокс Live Preview (см скриншот).
Здесь есть разные методы, но нам нужна секция Single Scan: Creates a Path. Методы нужно подбирать визуально, "на глаз". 
Можно также использовать и секцию Multiply Scans, а затем скомбинировать пути в один (Path > Combine), т.к. нам нужен один путь, и один набор. Путь (Path) это набор инструкций о том как и сколько рисовать линий-векторов. Для нашего конкретного случая, этой конкретной иконки, оптимальный вариант Color Quantization и количество цветов = 2.

 
4. Нажимаем OK и закрываем окно. Появилось наше изображение залитое черным цветом - это и есть наша векторная картинка. 
Стоит заметить что прямо под ним лежит наше исходного изображение. Чтобы его удалить нужно отодвинуть мышкой векторное изображение, выделить исходную картинку и удалить ее клавишей Delete.  
5. Вы можете отредактировать пути, выбрав в левой панели инструмент Edit Paths By nodes (F2) или добавить фильтры\эффекты в меню Path > Path Effects. В данном примере я ничего не менял.
6. File Save As > inkscape SVG .
7. Открываем полученный SVG файл в блокноте или в Lister тотал коммандера. Ищем массив чисел, который обычно начинается со строчки "<path". Находим эту строчку, нам нужно набор символов, который идет после буквы "d=", к примеру d="m 397.33334,c -48.1 ...-0.326 -1.64129,-0.66405 z" и копируем все, что внутри кавычек в буфер.
8. Далее в RAD IDE кидаем на форму TPath. В Object Inspector WrapMode устанавливаем в Fit, и в поле Data вставляем из буфера наш код.
9. Меняем Fill и Stroke цвета на нужные нам значения (здесь я установил желтый цвет и увеличил толщину обводки (Stroke)). 

 
Еще пару примеров. 
Дерево - параметры Brightness Cutoff, Threshold 0.370 . Как видите здесь оптимальнее подходит метод Brightness Cutoff.  Здесь исходная png картинка - это дерево черного цвета, я ее распознал, и затем добавил в TPath, а в свойстве Fill указал градиент от черного до зеленого.
Наушники - Edge Detection 0. Конечно конкретно в этом случае нужно подчищать изображение.

 

Иногда бывает что при вставке пути в TPath, компонент его отображает некорректно, если снова зайти в DATA TPath, то окажется что часть данных потеряна. 
Что исправить эту ситуацию, нужно путь упростить. Это значит что после шага 4, нужно выбрать в incscrape меню Path > Simplify, затем снова сохранить файл. 
Правда Simplify в incscrape работает не очень хорошо, часто загругляет прямые участки. Лучше делать Simplify в Adobe Illustrator.
 
Статья опубликована на сайте fire-monkey.ru и возможно будет изменяться и дополняться.
Автор: ENRGY  
24. 02. 17 
 

Ссылка: http://blog.rzaripov.kz/2017/02/firebase-android-ios-2.html
Автор: Зарипов Равиль @ZuBy
Описание: Настройка пуш уведомлении через сервис Firebase для ANDROID и IOS [Часть 2]
В предыдущей  части , я рассказывал как сделать настройку пуш уведомления в консоли Firebase, в этой я покажу код на Delphi и серверную часть на PHP
https://github.com/rzaripov1990/PUSHTestFCM

так в чем проблема -то?
 
msg_user.rar

Спасибо огромное! Удаление папки C:\Users\%user%\.android\monitor-workspace действительно помогло. А 12 версий, это 12 папок с различными версиями java в "C:\Program Files\Java", и три десятка ярлыков типа '"C:\Program Files\Java\jre1.8.0_111\bin\javaw.exe" -jar "C:\Program Files (x86)\UTM5_Admin 5-2.1.005\UTM_Admin.jar"', ибо каждый jar на какой то версии глючит, на какой то пытается съесть 60 гигов оперативки и т.д. Вообще сложилось впечатление что программистов java принудительно держат на тяжелых наркотиках...

Ссылка: http://blog.rzaripov.kz/2017/02/firebase-android-ios-2.html
Автор: Зарипов Равиль @ZuBy
Описание: Настройка пуш уведомлении через сервис Firebase для ANDROID и IOS [Часть 2]
В предыдущей  части , я рассказывал как сделать настройку пуш уведомления в консоли Firebase, в этой я покажу код на Delphi и серверную часть на PHP
https://github.com/rzaripov1990/PUSHTestFCM

Не могу удержаться, Ярослав, но ты немного не прав. Можно удалять/изменять/загружать картинки со "съезжанием" и без оного. И хранятся они именно по уникальным именам

Переименовывать картинки с уникальным именем можно в редакторе. 

А вот показывать имена прямо в свойстве ImageIndex не додумался. А ведь действительно искать больших списках по набранным буквам имени могло бы быть проще да и не всегда сообразишь, что изображено на маленькой картинке.

Успехов

Ссылка: http://blog.rzaripov.kz/2017/02/firebase-android-ios-2.html
Автор: Зарипов Равиль @ZuBy
Описание: Настройка пуш уведомлении через сервис Firebase для ANDROID и IOS [Часть 2]
В предыдущей  части , я рассказывал как сделать настройку пуш уведомления в консоли Firebase, в этой я покажу код на Delphi и серверную часть на PHP
https://github.com/rzaripov1990/PUSHTestFCM

Ссылка: http://blog.rzaripov.kz/2017/02/firebase-android-ios-2.html
Автор: Зарипов Равиль @ZuBy
Описание: Настройка пуш уведомлении через сервис Firebase для ANDROID и IOS [Часть 2]
В предыдущей  части , я рассказывал как сделать настройку пуш уведомления в консоли Firebase, в этой я покажу код на Delphi и серверную часть на PHP
https://github.com/rzaripov1990/PUSHTestFCM

monitor.bat в SDK лежит, запустите его

да, иначе компилятор берет dcu, а не pas файл

По поводу "как подключать JAVA класс":
процитирую ответ в блоге:
По поводу
Цитата из ответа в блоге:
Расчёт был на то, что читатель хотя бы поинтересуется в официальной справке, что делают два этих метода. К слову, по названию методов уже понятно, для чего каждый из них предназначен.
Но раз есть один прецедент, то может быть и второй. Поэтому я уже добавил прямое указание различий у двух примеров.
 
p.s. Не нужно заниматься кросспостингом.
 
Update. Все три статьи обновлены. Конкретно в этой статье постарался объяснить в тексте поверхностные отличия двух примеров, которые мне, до сегодняшнего дня казались очевидными.
Чуть позже выложу ещё всё на ГитХаб, чтобы не терялось

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

TintColor не во всех стилях есть, в дефалтном на Windows точно нету.
на какой платформе тестите?

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

png с дыркой вне конкуренции...

события нет, нужно переопределить оконную процедуру и там ловить сообщение WM_SIZE (если не ошибаюсь)

можно попробовать <TControl>.LocalToAbsolute + добавлять Left/Top

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

для формы Left, Top

Вот вам гадание на кофейной гуще (в след. раз, предоставьте логи):
1) Перепроверить Deployment, в идеале сбросить всё на Default (кнопка Revert to Default в Deployment) и попробовать запустить. Если запустится, то постепенно добавлять файлы в деплоймент, так выясните из-за какого файла косяк. (p.s. Очень-очень давно сталкивался с такой проблемой, косяк был в файле манифесте, который оказался повреждённым). В случае с манифестом, могли скобку где-то не закрыть или ещё что-то сделать.
2) Вместе с первым шагом делать Clean у проекта в Project Manager
3) На всякий случай, добавить параметр " -cleaninstall" в меню "Run -> Parameters:Parameters"
4) Проверить на других устройствах
5) Самый жёсткий вариант, очистить папку с файлами проекта от всех файлов, кроме .dpr; .fmx; .dproj; .pas. Открыть проект и перепроверить всё необходимое для проекта, попробовать запустить.
Из студии, apk заливается через ADB. ADB сильно расширяет все возможности по управлению устройством, например установка приложения без проверки разрешений в манифесте или копирование файла из закрытой директории и т.д.

для AppStore нужна 64 bit версия (с включенной опцией Universal binary file)
у меня стоит sdk 10, работает на IOS 9.3.5 и выше, ниже не проверял

Обратите внимание на Build Configuration(Release/Debug), где вы заполнили и какой выбран

Ссылка: http://blog.rzaripov.kz/2017/02/firebase-android-ios.html
Автор: Зарипов Равиль @ZuBy
Описание: Настройка пуш уведомлении через сервис Firebase для ANDROID и IOS

настройки (Version Info) одинаково заполнили для 32/64? включили опцию universal binary file?