Psi+ icon set creation

At work we're unfortunately using Slack for group communication. I'm mostly communicating via Jabber and refused to install another chat client software - now I am utilizing the Slack XMPP interface.

Psi+ as chat client is working fine, but what annoyed me was my inability to see the emoticons my colleagues were sending. I only got :+1: and :simple_smile: instead of the smiley itself. It was time to change that.

Icon sets

Psi+ allows you to choose one or multiple sets of emoticons to use in Options -> Appearance -> Icons -> Emoticons. None of those supported the emojis used by Slack, so I had to create the set myself.

I found multiple image sources:

The one had a github repository, which meant that I could access it easiest - so I chose it.

Psi+ icon set format

The Psi+ Ubuntu PPA contains the psi-plus-icons-nonfree package, which installs a number of .jisp files. Those files are application/zip files with a icon set definition file icondef.xml, and a number of .png image files that are referenced from icondef.xml. All those files are contained in a top-level folder that has the same basename as the .jisp file:

$ unzip -qql /usr/share/psi-plus/iconsets/emoticons/Emojis.jisp
        0  2016-04-01 15:38   Emojis/
     1390  2016-04-01 15:34   Emojis/0023-20e3.png
     1265  2016-04-01 15:35   Emojis/0030-20e3.png
     1284  2016-04-01 15:35   Emojis/0031-20e3.png
     1361  2016-04-01 15:36   Emojis/303d.png
     1575  2016-04-01 15:37   Emojis/3297.png
     1631  2016-04-01 15:37   Emojis/3299.png
    90442  2016-04-01 15:39   Emojis/icondef.xml

The XML file itself is easy to understand:

<?xml version="1.0" encoding="utf-8"?>
    <description>Unicode Emojis</description>
    <author />
    <text default="true"></text>
    <object mime="image/png">263a.png</object>
    <text default="true"><U+1F601></text>
    <object mime="image/png">1f601.png</object>

The incoming text of chat messages is scanned for the text values in the configured emoji icon sets and replaced by the image.

The icons are also shown when pressing the emoji button in the chat window, and clicking on one icon inserts the text that has the default attribute.

Icon set creation

I did not want to write that icondef.xml myself. emoji-cheat-sheet's git repository contains a index.html file listing all images and the corresponding text, and I wanted to get XML from that.

What's the tool to convert XML to XML? XSLT .

index.html was HTML5 for no reason, so I had to pipe it through tidy (5.1.14 worked) to get clean XML. After that I could write my XSL script:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  <xsl:output omit-xml-declaration="no" indent="yes" method="xml"/>
  <xsl:template match="/">
        <name>Emoji cheat sheet</name>
        <author email="">cweiske</author>
      <xsl:for-each select="//html:ul//html:div[html:img and html:span]">
          <text default="true">:<xsl:value-of select="html:span"/>:</text>
          <object mime="image/png">
            <xsl:value-of select="substring(html:img/@src, 17)"/>

I had to convert the icons to 16x16, since Psi does not scale them itself; when I used the 128x128 ones I had a normal text line and huge smileys..

In the end I executed that commands:

$ git clone ecs
$ tidy -f /dev/null -indent -asxml -o ecs-fixed.xml ecs/public/index.html
$ mkdir emoji-cs
$ cd ecs/public/graphics/emojis
$ for i in *.png; do convert "$i" -resize 16x16 "../../../../emoji-cs/$i"; done
$ cd ../../../../
$ xsltproc icondef-from-ecs.xsl ecs-fixed.xml > emoji-cs/icondef.xml
$ zip emoji-cs.jisp emoji-cs/*


Copy the generated .jisp to /usr/share/psi-plus/iconsets/emoticons/ and restart Psi+. Then open the appearance options and activate your icon set.

Psi+ showing all the icons

Written by Christian Weiske.

Comments? Please send an e-mail.