Page 1 of 1

Icon

PostPosted: 08 Apr 2016, 11:07
by ArtMares
Дорогие друзья!

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

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

Версия
0.1

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

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

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

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


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

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

Конфигурация
Для коректной работы аддона необходимо наличие файла конфигурации в директории приложения.
Название файла конфигурации "iconFonts.json"
Содержание:
Code:
{
  "PQStudio"    : {
    "path"      : "fonts/",
    "resource"  : true
  },
  "FontAwesome" : {
    "path"      : "fonts/",
    "resource"  : true
  }
}
Первый ключ это название шрифта. В моем случае их два "PQStudio" и "FontAwesome"
Значение path это дочерняя директория в которой находятся файлы шрифта. Обязательно на конце должен быть слешь.
Значение resource может принимать два значения true или false. Если указан true то аддон будет загружать файлы из ресурсов приложения. Если false то из директории приложения.

Как использовать
Code:
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');
    }
  }
Скриншоты
Image

Пример
Code:
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.

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

Выбираем пунтк меню "Manage Projects"
Image

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

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

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

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

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

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

Откроется страница генерации шрифта.
Image

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

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

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

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

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

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

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


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

Re: Icon

PostPosted: 08 Apr 2016, 13:22
by WxMaper
Отличное дополнение! А статья вообще шикарна, все расписано подробно и понятно :good2:

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

Re: Icon

PostPosted: 08 Apr 2016, 13:27
by ArtMares
WxMaper писал:Отличное дополнение! А статья вообще шикарна, все расписано подробно и понятно :good2:

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

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