Icon

аддоны - готовые PHP скрипты для решения различных задач
ArtMares
Аватара пользователя
 
Сообщения: 72
Откуда: Москва
Благодарил (а): 4 раза
Поблагодарили: 5 раз
Дорогие друзья!

Так как движок работает в кодировке UTF-8 то у нас появилась замечательная возможность использовать иконочные шрифты предназначенные для Веб

Что бы было проще я разработал аддон который сам автоматически подключает шрифт в приложение и отдает иконку по уже имеющемуся имени.

Версия
0.1

Описание
Аддон предназаначен для обработки и хранения иконок в виде шрифтов для использования в приложении.
Есть совместимость с принципом получения иконки в Веб.
То есть если раньше в Вебе мы использовали например:
php Код:
<i class="fa fa-money"></i>

И получали необходимую нам иконку по имени fa-money, то аддон позволяет нам использовать тоже имя для получения этой же иконки.

Так же аддон воспринимает уже готовые иконочные шрифты предназначенные для Веб.
Для корректной работы шрифта необходимо два файла:
- Сам файл шрифта в формате *.ttf
- Файл каскадной таблицы стилей в формате *.css. В котором должны быть перечислены все классы для иконок.

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

Внимание!
Аддон не будет работать с файлами стилей которые имеют в названии *.min.css
Файл должен называться "FontName.css"


Файлы подключаемых шрифтов и таблиц стилей могут находится в ресурсах.

Зависимости
Для корректной работы необходим подключенный аддон Storage
Так же расширение для движка PQEngineFS, которое будет в ближайшем снапшоте после 8 апреля 2015 или официальный релиз версии движка 0.5.2 и выше.

Конфигурация
Для коректной работы аддона необходимо наличие файла конфигурации в директории приложения.
Название файла конфигурации "iconFonts.json"
Содержание:
php Код:
{
  "PQStudio"    : {
    "path"      : "fonts/",
    "resource"  : true
  },
  "FontAwesome" : {
    "path"      : "fonts/",
    "resource"  : true
  }
}


Первый ключ это название шрифта. В моем случае их два "PQStudio" и "FontAwesome"
Значение path это дочерняя директория в которой находятся файлы шрифта. Обязательно на конце должен быть слешь.
Значение resource может принимать два значения true или false. Если указан true то аддон будет загружать файлы из ресурсов приложения. Если false то из директории приложения.

Как использовать
php Код:
require_once("qrc://%%projectname%%/%%addonpath%%/Icon.php");

  /* Если файл конфигурации находится в корневой директории приложения */
  $icon = new Icon();

  or

  /* Если файл конфигурации находится в дочерней директории приложения */
  $icon = new Icon('system');
  
  class MainWindow extends QWidget {

    public function __construct() {

      parent::__consctruct();

      /* Задаем иконочные шрифт(ы) для приложения */
      $this->styleSheet = 'font-family: %%FontName1%%, %%FontName2%%';

    }
    

    /* ... */
    
    public function initComponents() {
      $this->label = new QLabel($this);

      /* Используем иконку */
      $this->label->text = Icon::get('fa-money');

      or

      /* Используем цветную иконку */
      $this->label->text = Icon::get('fa-money', '#1484c9');

      or

      /* Используем иконку определенного размера */
      $this->label->text = Icon::get('fa-money', 20);

      or

      /* Используем цветную иконку определенного размера */
      $this->label->text = Icon::get('fa-money', '#1484c9', 20);

      or

      /* Используем цветную иконку определенного размера */
      $this->label->text = Icon::get('fa-money', 20, '#1484c9');
    }
  }


Скриншоты
Изображение

Пример
php Код:
require_once 'qrc://Storage/Storage.php';
require_once 'qrc://Icon/Icon.php';

$icon = new Icon('system');

class MainWindow extends QWidget {
    public function __construct() {
        parent::__construct();

        $this->styleSheet = 'font-family: PQStudio,FontAwesome;';
        
        $this->initComponents();
    }
    
    private function initComponents() {
        $this->layout = new QVBoxLayout;
        $label1 = new QLabel($this);
        $label1->text = Icon::get('fa-money', '#1484c9');

        $label2 = new QLabel($this);
        $label2->text = Icon::get('fa-money', 20);

        $label3 = new QLabel($this);
        $label3->text = Icon::get('fa-money', '#1484c9', 20);

        $label4 = new QLabel($this);
        $label4->text = Icon::get('fa-money', 30, '#1484c9');

        $this->layout->addWidget($label1);
        $this->layout->addWidget($label2);
        $this->layout->addWidget($label3);
        $this->layout->addWidget($label4);
    }
}

$mainWindow = new MainWindow;
$mainWindow->show();

qApp::exec();


Как создавать свои шрифты
Я использую сервис IcoMoon.io для создания своих собственных шрифтов.
Первым делом необходимо подготовить иконки для загрузки на сервис. Иконки можно найти на просторах интернета или создать самому. Обязательно то что каждая иконка должна быть сохранена как отдельный файл и обязательно в векторном формате. Лучше всего svg.

Далее открываем страницу сервиса и переходим в меню.
Изображение

Выбираем пунтк меню "Manage Projects"
Изображение

Откроется страница управления проектами.
В ней необходимо создать новый проект и дать ему удобное и понятное вам название.
Изображение

Переходим в проект используя пункт "Load".
Теперь нам необходимо загрузить наши иконки. Для этого воспользуемся кнопкой "Import Icons".
Изображение

Выбираем необходимые нам иконки и подтверждаем выбор.
Далее мы увидим как наши иконки появились в проекте.
Изображение

Для коректного отображения иконок необходимо создать сетку для них.
Нажимаем на значек меню у "Набора".
Изображение
В открывшемся меню выбираем пункт "Get info"

В появившемся окне нажимаем на кнопку "Resize Grid size" и указываем размер сетки.
Изображение
Так же нам необходимо отредактировать мета данные шрифта.

Как только мы сделали все настройки, переходим к генерации шрифта.
Для этого нам необходимо выделить те иконки которые войдут в шрифт и нажать на кнопку "Generate Font"
Изображение

Откроется страница генерации шрифта.
Изображение

Нам необходимо сделать настройки шрифта. Для этого нажимаем на кнопку "Preferences".
Изображение
Тут мы задаем название шрифта, префикс для стилей и тд и тп.

Сохраняем настройки и переходим непосредствено в редактированию данных о наших иконках.
Изображение
После генерации к названию иконки будет прибавлен префик, который вы указали в настройках.
Следовательно моя иконка будет досутпна по имени "pq-label".

Как только мы все настроили, можно скачивать готовый шрифт.
Нажимаем на кнопку "Download" и радуемся :biggrin:
Изображение

После этого можно переносить наш шрифт в приложение и использовать иконки :drinks:

Внимание!
Так как сервис бесплатен то ваш проект хранится в локальной памяти вашего браузера и на другом устройстве он не будет доступен. Для того что бы вы могли редактировать ваш шрифт на любом другом устройстве необходимо его скачать.

Нажмите на меню "Набора" и выбирете пункт "Download JSON"
Изображение

Для загрузки скачано проекта необходимо в Менеждере проектов выбрать "Import Project" и выбрать скачаный json файл


Архив
Icon_0.1.7z
Архив необходимо скачать и распаковать в директорию addons установленной программы PQBuilder
Пример пути куда необходимо распаковывать архив:
C:\Program FIles (x86)\PQBuilder\addons
PQStudio Development Progress: 75%
Version: 0.2

WxMaper
Аватара пользователя
Администратор
 
Сообщения: 92
Благодарил (а): 8 раз
Поблагодарили: 4 раза
Отличное дополнение! А статья вообще шикарна, все расписано подробно и понятно :good2:

upd. а файл настроек (который json) из ресурсов не работает?

ArtMares
Аватара пользователя
 
Сообщения: 72
Откуда: Москва
Благодарил (а): 4 раза
Поблагодарили: 5 раз
WxMaper писал:Отличное дополнение! А статья вообще шикарна, все расписано подробно и понятно :good2:

upd. а файл настроек (который json) из ресурсов не работает?


Спасибо! :biggrin:

Думаю в следующей версии аддона сделаю возможность из ресурсов использовать его.
Просто аддон при первом запуске парсит css файлы и создает в директории с файлом конфигурации директорию "fonts/parsed", куда созхраняет уже распарсенные файлы шрифтов.
При втором запуске он проверяет есть ли эти файлы там и уже использует данные из них а не заного парсит css
PQStudio Development Progress: 75%
Version: 0.2


Вернуться в Аддоны

Кто сейчас на конференции
Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость
cron