Git Product home page Git Product logo

gmoccapy-icon-themes's Introduction

GMOCCAPY Icon Themes

Icon Themes for LinuxCNC's GMOCCAPY Interface

Icon Theme

Icon themes are used to customize the look and feel of gmoccapy's icons.

Gmoccapy ships with three different icon themes:

  • classic: The classic gmoccapy icons
  • material: A modern icon theme inspired by Google's Material Icons that automatically adopts its coloring from the selected desktop theme
  • material-light: Derived from material but optimized for light desktop themes

The icon theme used in gmoccapy is a regular GTK IconTheme that follows the freedestktop icon theme specification. Thus every valid GTK IconTheme can be used as gmoccapy icon theme as long as it contains the required icons.

Gmoccapy scans the following directories for IconThemes:

  • linuxcnc/share/gmoccapy/icons
  • ~/.icons

Custom Icon Theme

Creating a custom IconTheme is pretty easy. All you need is a text editor and of course the desired icons as pixel or vector graphics. Details about how exactly an IconTheme is built can be found at Freedesktop: Icon Theme Specification

Start by creating an empty directory with the name of the icon theme. Place the directory in one of gmoccapy's IconTheme directories. Then we need a file called index.theme in the root folder of our icon theme which contains the required metadata for the theme. Thats a simple text file with at least the following sections:

[Icon Theme]
Name=YOUR_THEME_NAME
Comment=A DESCRIPTION OF YOUR THEME
Inherits=hicolor
Directories=16x16/actions,24x24/actions,32x32/actions,48x48/actions,scalable/actions
  • Name: The name of your icon theme
  • Comment: A description of your icon theme
  • Inherits: A icon theme can derive from another icon theme, the default is hicolor
  • Directories: A comma separted list of all the directories of your icon theme

Each directory usually contains all the icons of the theme in a specific size, for example 16x16/actions should contain all icons with the category "actions" in the size 16x16 pixels as pixel-graphics (e.g. png files). A special case is the directory called "scalable/actions", this contains scalable icons not tied to a specific size (e.g. svg files).

By supplying different sized versions of the icons, we can guarantee a nice looking icon if different sizes and we also have the ability to change the icon according to its size, for example a 64x64 px sized icon may contain more details than its 16x16 px version.

Fo each directory we also have to write a section in the index.theme file:

[16x16/actions]
Size=16
Type=Fixed
Context=Actions
[scalable/actions]
Size=48
Type=Scalable
Context=Actions
  • Size: Nominal icon size in this direcotry
  • Type: Fixed, Threshold or Scalable
  • Context: Intended "category" of icons

Basically that's everything needed to create a custom IconTheme.

Symbolic Icons

Symbolic icons are a special type of icon, usually a monochrome image. The special feature of symbolic icons is that the icons are automatically colored at runtime to match the desktop theme. That way, icon themes can be created that work well with dark and also light desktop themes (in fact, that's not always the best option, that's why a dedicated "material-light" theme exists).

Symbolic Icon example

To make use of the symbolic feature, a icon file has to have the suffix .symbolic.$ext (where $ext is the regular file extension like png) for example "power_on.symbolic.png".

With that name, GTK treats this image as symbolic icon and applies some recoloring when loading the icon. There are only four colors allowed to use:

Color Hex Code Description
black #000000 Primary color, gets changed to match the desktop themes primary color
red #ff0000 Success: this color indicates "success" (usually somethin green'ish)
green #00ff00 Warning: this color indicates "warning" (usually somethin yellow/orange'ish)
blue #0000ff Error: this color indicates "error" (usually somethin red'ish)

TIP Examples of symbolic icons can be found at linuxcnc/share/gmoccapy/icons/material Theme

Building

To build the icons in this repository use the build.sh script in the root directory.

Requirements

  • python3 >= 3.8
  • inkscape

Prepare python virtual environment

python3 -m venv env
source env/bin/activate
python3 -m pip install -r requirements.txt

For details on using python virtual environment see Installing packages using pip and virtual environments

gmoccapy-icon-themes's People

Contributors

petermue avatar

Watchers

 avatar

gmoccapy-icon-themes's Issues

Add build instructions

I would like to generate the images from the SVG's.
But how is that supposed to be done? it would be nice to have some build instructions in the README file.

If i just run the build.sh, I get:

cnc@linuxcnc-dev:~/gmoccapy-icon-themes$ ./build.sh
./build.sh: 2: ./build.sh: pushd: not found
/usr/bin/python3: Error while finding module specification for 'material.build' (ModuleNotFoundError: No module named 'material')
/usr/bin/python3: Error while finding module specification for 'material_light.build' (ModuleNotFoundError: No module named 'material_light')
./build.sh: 7: ./build.sh: popd: not found

Trying

cnc@linuxcnc-dev:~/gmoccapy-icon-themes/src$ python3 -m material_light.build

gives me (after I installed 'Pillow')

Traceback (most recent call last):
  File "/usr/lib/python3.7/runpy.py", line 193, in _run_module_as_main
    "__main__", mod_spec)
  File "/usr/lib/python3.7/runpy.py", line 85, in _run_code
    exec(code, run_globals)
  File "/home/cnc/gmoccapy-icon-themes/src/material_light/build.py", line 6, in <module>
    from _build_helper import Composer, Dimension
  File "/home/cnc/gmoccapy-icon-themes/src/_build_helper.py", line 4, in <module>
    from shlex import join
ImportError: cannot import name 'join' from 'shlex' (/usr/lib/python3.7/shlex.py)

Installing shlex does not suceed:

cnc@linuxcnc-dev:~/gmoccapy-icon-themes$ pip3 install shlex
Collecting shlex
Could not install packages due to an EnvironmentError: 404 Client Error: Not Found for url: https://pypi.org/simple/shlex/

Have you any hint for that?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.