tazpanel diff README.icons @ rev 567
hardware.cgi: fix detect-usb output
author | Pascal Bellard <pascal.bellard@slitaz.org> |
---|---|
date | Sun Feb 14 10:14:04 2016 +0100 (2016-02-14) |
parents | |
children |
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/README.icons Sun Feb 14 10:14:04 2016 +0100 1.3 @@ -0,0 +1,172 @@ 1.4 +TazPanel icons 1.5 +============== 1.6 + 1.7 +The default TazPanel theme includes monochrome icons. Currently, there is no 1.8 +other themes (note, 'sandfive' theme designed for TazPanel in SliTaz-4.0). 1.9 + 1.10 + 1.11 +Add an icon to the element 1.12 +-------------------------- 1.13 + 1.14 +To add an ordinary png icon to the button, link, span or any other item, we can 1.15 +use the following technique: 1.16 + 1.17 + 1. In the HTML source code we add custom 'data-icon' attribute to the element: 1.18 + 1.19 + <button data-icon="slitaz">Continue...</button> 1.20 + 1.21 + 2. In the CSS we assign an icon for the item: 1.22 + 1.23 + [data-icon="slitaz"]::before { 1.24 + content: url('images/slitaz.png'); 1.25 + } 1.26 + 1.27 +You will see the 'images/slitaz.png' icon in the button to the left of its 1.28 +label. 1.29 + 1.30 +We can use 'data-img' attribute in addition to the 'data-icon' when we need 1.31 +**only** image without label: 1.32 + 1.33 + <a href="?back" data-img="back"></a> 1.34 + 1.35 + [data-img="back"]:: before { 1.36 + content: url('images/back.png'); 1.37 + } 1.38 + 1.39 + 1.40 +Iconic font 1.41 +----------- 1.42 + 1.43 +It was designed font that contains all the icons needed for TazPanel and all its 1.44 +scripts. If necessary, the font can be expanded with new icons. All available 1.45 +icons are in [Private Use Area] 1.46 +(<https://en.wikipedia.org/wiki/Private_Use_Areas>), starting from U+F100. 1.47 + 1.48 +To view the icons you can use `gucharmap`: 1.49 + 1.50 + 1. Select font 'TazPanel'. 1.51 + 2. Click menu View - By Unicode Block. 1.52 + 3. Click menu View - Show only glyphs from this font. 1.53 + 4. In the 'Unicode Block' select 'Private Use Area'. 1.54 + 5. Scroll right pane up to U+F100. 1.55 + 1.56 +(Starting from U+F200 you'll see additional font elements used to combine with 1.57 +some font icons.) 1.58 + 1.59 +Now we can change our CSS rules to display icons from our font: 1.60 + 1.61 + @font-face { 1.62 + font-family: TazPanelWeb; 1.63 + src: url('/styles/default/tazpanel.ttf'); 1.64 + } 1.65 + [data-icon]:before, [data-img] { 1.66 + vertical-align: baseline; 1.67 + padding: 0; 1.68 + margin: 0; 1.69 + font-size: 1.2em; 1.70 + font-family: TazPanelWeb; 1.71 + } 1.72 + [data-img="back"]:: before { 1.73 + content: '\f102'; 1.74 + } 1.75 + 1.76 +In the first rule we defined web-font we name 'TazPanelWeb' and use it in the 1.77 +second rule. In the third rule we print 'back' icon using its Unicode number. 1.78 + 1.79 +**First pitfall:** not all web browsers can display web fonts :-( Solution: make 1.80 +our web-font system-wide available via putting it to the `/usr/share/fonts/` and 1.81 +forge our second rule a bit: 1.82 + 1.83 + [data-icon]:before, [data-img] { 1.84 + . . . 1.85 + font-family: TazPanel, TazPanelWeb; 1.86 + } 1.87 + 1.88 + 1.89 +Ligatures 1.90 +--------- 1.91 + 1.92 +Fortunately, we can use [ligatures] 1.93 +(https://en.wikipedia.org/wiki/Typographic_ligature#Stylistic_ligatures) in our 1.94 +font and considerably simplify the CSS rules. One rule for all data-icons: 1.95 + 1.96 + [data-icon]::before { 1.97 + content: attr(data-icon); 1.98 + } 1.99 + 1.100 +For example, for `data-icon="back"` we just type word "back" using our web-font, 1.101 +and font rendering application automatically changed word "back" into icon 1.102 +"back" (U+F102) and we see icon. 1.103 + 1.104 +**Second pitfall:** Opera web browser used original Presto engine not supported 1.105 +font ligatures. Solutions: at first package "tazpanel-ttf-css" was created, that 1.106 +added CSS rules to use with the Opera web browser. Then we have been made the 1.107 +global replacement throughout TazPanel code and code of its applets: 1.108 + 1.109 + 1. For example, where we need 'back' icon, we mark it in the TazPanel sources: 1.110 + `@back@`. 1.111 + 2. When we `make` tazpanel package, special script `stripall.sh` changes all 1.112 + the `@icon@` entries to the Unicode symbols representing icon itself. 1.113 + 1.114 +Sources are available in the [repository](http://hg.slitaz.org/tazpanel), and 1.115 +compiled scripts you can see in your SliTaz in `/var/www/tazpanel/`. 1.116 + 1.117 +We have some colors in the icons: for example, `cancel`, `remove`, and `delete` 1.118 +icons are red, while `ok` is green. Note that because CSS rules change at 1.119 +"compile" time, the icon color will be appointed by its Unicode value; you need 1.120 +to use `stripall.sh` on your TazPanel applets too to change "ligatures" values 1.121 +into icon symbol itself, or you'll lose colors. 1.122 + 1.123 + 1.124 +Font development 1.125 +---------------- 1.126 + 1.127 +To develop icon font you need FontForge and Inkscape (both are available in our 1.128 +repository). You can draw your icons or grab few free icons from the place like 1.129 +[Fontello](http://fontello.com/). 1.130 + 1.131 +My workflow: 1.132 + 1.133 + 1. Open icon font (probably, saved from Fontello) in FontForge, and export 1.134 + icon you need into SVG file. 1.135 + 2. Open SVG in Inkscape (it is more suitable for editing vectors). 1.136 + 3. Change icon: 1.137 + * Make sure the canvas is 1024x1024, scale your icon if need; 1.138 + * Simplify curves, remove excess points; 1.139 + * Snap straight elements to the 16x16 grid (for best icon look while icon 1.140 + is displayed in 16x16px size in the most cases). 1.141 + 4. Save SVG and import it into web font using FontForge (note, [TrueType uses 1.142 + quadratic Bézier splines](https://fontforge.github.io/bezier.html), while 1.143 + Inkscape uses cubic Bézier splines, so your curves are changed after you 1.144 + export SVG into TTF). 1.145 + 5. Save web font as TTF. 1.146 + 6. Don't forget to add your new icon into `test.cgi` to see how it looks in 1.147 + the TazPanel interface. 1.148 + 1.149 +TazPanel font sources are now available among other TazPanel stuff. 1.150 + 1.151 + 1.152 +Regular icons theme development 1.153 +------------------------------- 1.154 + 1.155 +You can create your own TazPanel theme with the png icons. 1.156 +Let name it "colorful". 1.157 + 1.158 + 1. Make new folder `/var/www/tazpanel/styles/colorful`. 1.159 + 2. Copy all stuff from default TazPanel theme: 1.160 + 1.161 + cp /var/www/tazpanel/styles/default/* /var/www/tazpanel/styles/colorful 1.162 + 1.163 + 3. Put your icons into sub-folder (for example, `icons`). 1.164 + 4. Edit CSS styles relating to the icons in the `base.css` and `tweaks.css`: 1.165 + change all the CSS rules with "data-icon" or "data-img" to your rules as it 1.166 + was shown before: 1.167 + 1.168 + [data-icon="back"]::before, [data-img="back"]::before { 1.169 + content: url('icons/back.png'); 1.170 + } 1.171 + 1.172 + And so on. 1.173 + 5. Change icon theme to 'colorful' inside the TazPanel and open test.cgi 1.174 + (available in the "tazpanel-extra" package): <http://tazpanel:82/test.cgi> 1.175 + 6. Share your theme with other SliTaz users :-)