Skip to content

Filters

Jump to bottom
worron edited this page Jun 10, 2018 · 1 revision

Introduction

ACYLS filters have modular structure and can be added independently from main configuration script. Filter directory is parsed on script startup, and every subdirectory was found is checked if filter module available. Filters come in two types: simple and custom. Custom filter has his own GUI and you can change some its parameters, simple filter hasn't.

Here is example of typical filter "Drop Shadow" subdirectory content (filter module files)

shadow/
├── filter.py
├── filter.xml
└── gui.glade

Where filter.xml main file which consist of SVG filter and some additional SVG tags required for ACYLS icon description, filter.py is support python script, which contain filter name, group, type (simple or custom) and some logic if filter is custom, gui.glade is optional for custom filters only.

Take a look at example of filter.xml

<root xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="acyl-filter">
    <filter id="filter" x="-50%" y="-50%" width="200%" height="200%">
      <feFlood id="feFlood1" flood-opacity="0.50" flood-color="rgb(114,159,207)" result="flood"/>
      <feComposite id="feComposite1" in2="SourceGraphic" in="flood" operator="in" result="composite1"/>
      <feGaussianBlur id="feGaussianBlur1" in="composite" stdDeviation="1.0" result="blur"/>
      <feOffset id="feOffset1" dx="2.0" dy="2.0" result="offset"/>
      <feComposite id="feComposite2" in2="offset" in="SourceGraphic" operator="over" result="composite2"/>
    </filter>
  </g>
  <g id="acyl-visual">
    <use id="visible1" transform="translate(24,24) scale(1.00) translate(-24,-24)" style="fill:url(#acyl-gradient);filter:url(#filter)" xlink:href="#acyl-drawing"/>
  </g>
</root>

All stuff inside acyl-filter tag (SVG filter) and acyl-visual tag (icon representation) will be simply copied to original ACYLS icons when filter applied.

Here is source of icon with "Drop Shadow" filter

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48">
  <defs id="acyl-settings">
    <linearGradient id="acyl-gradient" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop offset="100%" style="stop-color:#A0A0A0;stop-opacity:1.000000"/>
    </linearGradient>
    <g id="acyl-filter">
      <filter id="filter" x="-50%" y="-50%" width="200%" height="200%">
        <feFlood id="feFlood1" flood-opacity="0.50" flood-color="rgb(114,159,207)" result="flood"/>
        <feComposite id="feComposite1" in2="SourceGraphic" in="flood" operator="in" result="composite1"/>
        <feGaussianBlur id="feGaussianBlur1" in="composite" stdDeviation="1.0" result="blur"/>
        <feOffset id="feOffset1" dx="2.0" dy="2.0" result="offset"/>
        <feComposite id="feComposite2" in2="offset" in="SourceGraphic" operator="over" result="composite2"/>
      </filter>
    </g>
    <g id="acyl-drawing">
      <path d="M 3,6.9999993 L 3,42 L 45,42 L 45,10.5 L 25.749993,10.5 L 25.749993,6.9999993 L 3,6.9999993 z M 4.7499993,8.750003 L 24,8.750003 L 24,12.249993 L 43.250007,12.249993 L 43.250007,15.75 L 20.499993,15.75 L 20.499993,12.249993 L 4.7499993,12.249993 L 4.7499993,8.750003 z" id="path-main"/>
    </g>
  </defs>
  <g id="acyl-visual">
    <use id="visible1" transform="translate(24,24) scale(1.00) translate(-24,-24)" style="fill:url(#acyl-gradient);filter:url(#filter)" xlink:href="#acyl-drawing"/>
  </g>
</svg>

Add Simple Filter

Let's make a new simple filter. Most probably the first example of that you will encounter while reading about SVG filters is blur effect.

<filter id="f1">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>

And now we will add this one to ACYLS. To do it quickly make a copy of any existing simple filter files and then edit it.

$ cd ~/.icons/ACYLS/
$ mkdir scripts/filters/blur
$ cp scripts/filters/empty/filter.* scripts/filters/blur/

Edit filter.py like this

import os
from acyls.lib.filters import SimpleFilterBase


class Filter(SimpleFilterBase):

    def __init__(self, *args):
        SimpleFilterBase.__init__(self, os.path.dirname(__file__))
        self.name = "Blur"
        self.group = "User Filters"

and filter.xml like this

<root xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="acyl-filter">
    <filter id="filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
  </g>
  <g id="acyl-visual">
    <use id="visible1" style="fill:url(#acyl-gradient);filter:url(#filter)" xlink:href="#acyl-drawing"/>
  </g>
</root>

That's all. Now you can run configuration script and test new filter.

Add Custom Filter

To make custom filter you should know the basics of programming in python and Gtk GUI designing. Just use existing filters as example.

Quick Filter Edit

You can make quick edits to an existing filter using the configuration program "Filter Edit" tab. Load an existing filter.xml file by using GUI and you will be able modify filter source and get icon preview on the spot. This feature may be useful to edit simple filters and make deep modification of custom filters.

Clone this wiki locally