Recreate and compress icons

Will the change to deluge.svg all the icons need recreated. I also
updated the script to losslessly compress the png files with zopflipng.

hicolor theme changes:
 - Added a 512px icon.
 - Added a deluge-panel.png for systray theming.

Added extra webui icons and updated index.html to use them
correctly.
This commit is contained in:
Calum Lind 2018-06-21 12:28:46 +01:00
commit fe42fb2c31
50 changed files with 89 additions and 46 deletions

View file

@ -4,36 +4,68 @@
DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
data_dir="$DIR/../ui/data" data_dir="$DIR/../ui/data"
zopfli_iter="--iterations=100"
zopflipng_bin="zopflipng --filters=01234mepb --lossy_8bit --lossy_transparent -y"
# Create deluge png icon pack for all sizes. # Create deluge png icon pack for all sizes.
for size in 16 22 24 32 36 48 64 72 96 128 192 256; do for size in 16 22 24 32 36 48 64 72 96 128 192 256 512; do
mkdir -p $data_dir/icons/hicolor/${size}x${size}/apps mkdir -p $data_dir/icons/hicolor/${size}x${size}/apps
in_svg=$data_dir/pixmaps/deluge.svg in_svg=$data_dir/pixmaps/deluge.svg
out_png=$data_dir/icons/hicolor/${size}x${size}/apps/deluge.png out_png=$data_dir/icons/hicolor/${size}x${size}/apps/deluge.png
rsvg-convert -w ${size} -h ${size} -o $out_png $in_svg; done rsvg-convert -w ${size} -h ${size} -o $out_png $in_svg
if [ "$size" -gt 128 ]; then
zopfli_iter=""
fi
echo $zopflipng_bin $zopfli_iter
eval $zopflipng_bin $zopfli_iter $out_png $out_png
done
# Create deluge-panel png for systray.
for size in 16 22 24; do
in_png=$data_dir/icons/hicolor/${size}x${size}/apps/deluge.png
out_png=$data_dir/icons/hicolor/${size}x${size}/apps/deluge-panel.png
cp $in_png $out_png
done
# Create deluge.ico icon from pngs. # Create deluge.ico icon from pngs.
for size in 16 32 64 128 256; do for size in 16 32 48 64 128 256; do
ico_infiles+="$data_dir/icons/hicolor/${size}x${size}/apps/deluge.png "; done ico_infiles+="$data_dir/icons/hicolor/${size}x${size}/apps/deluge.png "
done
convert $ico_infiles $data_dir/pixmaps/deluge.ico convert $ico_infiles $data_dir/pixmaps/deluge.ico
# Copy of deluge.svg to icon pack. # Copy of deluge.svg to icon theme pack.
mkdir -p $data_dir/icons/hicolor/scalable/apps/ mkdir -p $data_dir/icons/hicolor/scalable/apps/
cp $data_dir/pixmaps/deluge.svg $data_dir/icons/hicolor/scalable/apps/deluge.svg cp $data_dir/pixmaps/deluge.svg $data_dir/icons/hicolor/scalable/apps/deluge.svg
# Create 48px deluge.png. # Create 48px deluge.png.
rsvg-convert -w 48 -h 48 -o $data_dir/pixmaps/deluge.png $data_dir/pixmaps/deluge.svg cp $data_dir/icons/hicolor/48x48/apps/deluge.png $data_dir/pixmaps/deluge.png
# Create 16px png from deluge and status svgs. # Create 16px png from deluge and status svgs.
for file in $data_dir/pixmaps/*.svg; do for file in $data_dir/pixmaps/*.svg; do
rsvg-convert -w 16 -h 16 -o ${file%.*}16.png $file; done out_png=${file%.*}16.png
rsvg-convert -w 16 -h 16 -o $out_png $file
eval $zopflipng_bin $out_png $out_png
done
# Copy 16px deluge and status pngs to webui icons folder. # Copy 16px deluge and status pngs to webui icons folder.
for icon in $data_dir/pixmaps/*16.png; do for icon in $data_dir/pixmaps/*16.png; do
iconname=$(basename $icon) iconname=$(basename $icon)
cp $icon $data_dir/../web/icons/${iconname::-6}.png; done cp $icon $data_dir/../web/icons/${iconname::-6}.png
done
rm $data_dir/../web/icons/tracker*.png rm $data_dir/../web/icons/tracker*.png
for size in 32 192 512; do
in_png=$data_dir/icons/hicolor/${size}x${size}/apps/deluge.png
out_png=$data_dir/../web/icons/deluge-${size}.png
cp $in_png $out_png
# Create apple and android touch icons with background colour. # Create apple and android touch icons with background colour.
rsvg-convert -w 192 -h 192 -b '#abcdf7' -o $data_dir/../web/icons/deluge-android-192.png $data_dir/pixmaps/deluge.svg apple_icon=$data_dir/../web/icons/deluge-apple-180.png
rsvg-convert -w 180 -h 180 -b '#abcdf7' -o $data_dir/../web/icons/deluge-apple-180.png $data_dir/pixmaps/deluge.svg rsvg-convert -w 180 -h 180 -b '#599EEE' -o $apple_icon $data_dir/pixmaps/deluge.svg
eval $zopflipng_bin $apple_icon $apple_icon
# Create favicon.ico icon from pngs.
for size in 16 32 48; do
web_ico_infiles+="$data_dir/icons/hicolor/${size}x${size}/apps/deluge.png "
done
convert $web_ico_infiles $data_dir/../web/icons/favicon.ico

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 551 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 610 B

After

Width:  |  Height:  |  Size: 551 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 778 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 867 B

After

Width:  |  Height:  |  Size: 778 B

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 877 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 975 B

After

Width:  |  Height:  |  Size: 877 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Before After
Before After

View file

@ -14,20 +14,20 @@
height="48px" height="48px"
id="svg3440" id="svg3440"
sodipodi:version="0.32" sodipodi:version="0.32"
inkscape:version="0.91 r13725" inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="deluge.svg" sodipodi:docname="deluge.svg"
inkscape:export-xdpi="960" inkscape:export-xdpi="32"
inkscape:export-ydpi="960" inkscape:export-ydpi="32"
inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:output_extension="org.inkscape.output.svg.inkscape"
sodipodi:modified="TRUE" sodipodi:modified="TRUE"
version="1.1" version="1.1"
inkscape:export-filename="/home/calum/projects/deluge-logo/deluge.512.w.png"> inkscape:export-filename="/home/calum/Desktop/test1b.png">
<defs <defs
id="defs3"> id="defs3">
<color-profile <color-profile
name="sRGB" name="sRGB"
xlink:href="/usr/share/color/icc/sRGB.icc" xlink:href="/usr/share/color/icc/sRGB.icc"
id="color-profile4484" /> id="color-profile2" />
<linearGradient <linearGradient
id="linearGradient4345" id="linearGradient4345"
inkscape:collect="always"> inkscape:collect="always">
@ -243,10 +243,10 @@
in="flood" in="flood"
operator="in" operator="in"
result="composite1" result="composite1"
k1="8.1400000000000006" k4="-7.2400000000000002"
k2="4.9299999999999997"
k3="5.5899999999999999" k3="5.5899999999999999"
k4="-7.2400000000000002" /> k2="4.9299999999999997"
k1="8.1400000000000006" />
<feGaussianBlur <feGaussianBlur
id="feGaussianBlur6412" id="feGaussianBlur6412"
stdDeviation="0.20000000000000001" stdDeviation="0.20000000000000001"
@ -347,20 +347,20 @@
id="base" id="base"
pagecolor="#ffffff" pagecolor="#ffffff"
bordercolor="#666666" bordercolor="#666666"
borderopacity="0.17254902" borderopacity="0.65098039"
inkscape:pageopacity="0" inkscape:pageopacity="0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:zoom="19.685853" inkscape:zoom="13.92"
inkscape:cx="26.317146" inkscape:cx="3.3184766"
inkscape:cy="24.429162" inkscape:cy="26.850801"
inkscape:current-layer="g4476" inkscape:current-layer="layer1"
showgrid="true" showgrid="true"
inkscape:grid-bbox="true" inkscape:grid-bbox="true"
inkscape:document-units="px" inkscape:document-units="px"
inkscape:window-width="1861" inkscape:window-width="1981"
inkscape:window-height="1176" inkscape:window-height="1097"
inkscape:window-x="59" inkscape:window-x="67"
inkscape:window-y="24" inkscape:window-y="27"
inkscape:showpageshadow="false" inkscape:showpageshadow="false"
showguides="true" showguides="true"
inkscape:guide-bbox="true" inkscape:guide-bbox="true"
@ -369,7 +369,11 @@
units="px" units="px"
inkscape:snap-global="false" inkscape:snap-global="false"
inkscape:snap-to-guides="true" inkscape:snap-to-guides="true"
inkscape:snap-others="true"> inkscape:snap-others="true"
inkscape:pagecheckerboard="false"
showborder="true"
borderlayer="false"
scale-x="2">
<sodipodi:guide <sodipodi:guide
orientation="0,1" orientation="0,1"
position="4.331,47" position="4.331,47"
@ -454,7 +458,7 @@
<dc:format>image/svg+xml</dc:format> <dc:format>image/svg+xml</dc:format>
<dc:type <dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title /> <dc:title></dc:title>
<dc:creator> <dc:creator>
<cc:Agent> <cc:Agent>
<dc:title>Jakub Steiner</dc:title> <dc:title>Jakub Steiner</dc:title>
@ -500,12 +504,11 @@
inkscape:groupmode="layer" inkscape:groupmode="layer"
style="display:inline"> style="display:inline">
<path <path
style="fill:#4c90e8;fill-opacity:1;fill-rule:evenodd;stroke:#094491;stroke-width:3.27999091;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" style="fill:#4c90e8;fill-opacity:1;fill-rule:evenodd;stroke:#094491;stroke-width:3.19036889;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 23.295622,2.4822833 35.490217,21.297229 C 43.30243,33.350632 35.08691,46.383433 23.287956,46.383433 11.489002,46.383433 3.2602089,33.346045 11.079504,21.30073 Z" d="M 24.00916,2.8848679 35.921225,21.107868 c 7.631218,11.674181 -0.393962,24.296949 -11.919555,24.296949 -11.525593,0 -19.5637412,-12.627213 -11.925606,-24.293557 z"
id="path2069" id="path2069"
sodipodi:nodetypes="cszsc" sodipodi:nodetypes="cszsc"
inkscape:connector-curvature="0" inkscape:connector-curvature="0" />
transform="matrix(0.90726715,0,0,0.89972834,2.9383017,2.518482)" />
</g> </g>
<g <g
inkscape:groupmode="layer" inkscape:groupmode="layer"
@ -513,8 +516,8 @@
inkscape:label="wave fill" inkscape:label="wave fill"
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:#094491;fill-opacity:1;fill-rule:evenodd;stroke-width:0.40552941;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#094491;fill-opacity:1;fill-rule:evenodd;stroke-width:0.43658349;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 28.01172,24.438174 c -6.049549,-2.467385 -9.223551,3.836132 -8.214423,6.781163 2.195546,6.407462 10.475363,8.011557 16.589599,-2.66134 0,0 0.06518,1.28803 0.129838,1.900859 0.82106,7.781844 -5.723522,12.735535 -12.354975,12.638715 -6.631454,-0.09682 -8.657036,-2.672368 -10.611083,-5.637583 -3.170275,-4.810809 -2.37899,-12.648153 1.883276,-16.313692 4.864733,-4.020883 10.220622,-1.874329 12.577768,3.291878 z" d="m 28.249173,24.076764 c -6.513399,-2.656088 -9.930764,4.129513 -8.844266,7.299777 2.363892,6.897492 11.278562,8.624272 17.861607,-2.864877 0,0 0.07021,1.386537 0.139797,2.046235 0.884013,8.376987 -6.162376,13.70953 -13.302295,13.605305 -7.139921,-0.104225 -9.320813,-2.876749 -11.424685,-6.068739 -3.4133569,-5.178732 -2.561398,-13.615464 2.027677,-17.561337 5.237731,-4.328395 11.004287,-2.017675 13.542165,3.543636 z"
id="path2969" id="path2969"
sodipodi:nodetypes="cscszscc" sodipodi:nodetypes="cscszscc"
inkscape:connector-curvature="0" /> inkscape:connector-curvature="0" />
@ -576,8 +579,8 @@
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
sodipodi:nodetypes="cscszc" sodipodi:nodetypes="cscszc"
id="path4478" id="path4478"
d="m 24.212222,22.108293 c -6.775814,0.165164 -8.06207,7.974188 -6.185196,11.319336 2.609273,4.6505 6.568198,5.544881 11.985838,3.82825 -3.093408,3.363649 -9.442162,4.253857 -13.754465,-0.550821 -2.967234,-3.306031 -3.226596,-7.920245 -1.167373,-11.773724 2.059223,-3.853479 6.165286,-4.924896 9.121196,-2.823041 z" d="m 24.158349,21.568695 c -7.295351,0.177796 -8.680227,8.584045 -6.659444,12.185022 2.809336,5.006167 7.071815,5.968946 12.90485,4.121032 -3.330593,3.620896 -10.166138,4.579185 -14.809086,-0.592946 -3.194749,-3.558875 -3.473998,-8.525976 -1.256883,-12.674161 2.217115,-4.148189 6.638012,-5.301549 9.820563,-3.038947 z"
style="fill:#83b8f9;fill-opacity:1;fill-rule:evenodd;stroke:none" /> style="fill:#83b8f9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.07657671" />
</g> </g>
<g <g
inkscape:groupmode="layer" inkscape:groupmode="layer"

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 588 B

After

Width:  |  Height:  |  Size: 505 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 545 B

After

Width:  |  Height:  |  Size: 462 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 606 B

After

Width:  |  Height:  |  Size: 533 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 738 B

After

Width:  |  Height:  |  Size: 490 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 110 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 610 B

After

Width:  |  Height:  |  Size: 552 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 764 B

After

Width:  |  Height:  |  Size: 582 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 566 B

After

Width:  |  Height:  |  Size: 465 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 681 B

After

Width:  |  Height:  |  Size: 432 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 529 B

After

Width:  |  Height:  |  Size: 410 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 624 B

After

Width:  |  Height:  |  Size: 505 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 525 B

After

Width:  |  Height:  |  Size: 394 B

Before After
Before After

View file

@ -106,7 +106,7 @@ class SystemTray(component.Component):
if windows_check() or osx_check(): if windows_check() or osx_check():
self.tray = status_icon_new_from_pixbuf(get_logo(32)) self.tray = status_icon_new_from_pixbuf(get_logo(32))
else: else:
self.tray = status_icon_new_from_icon_name('deluge') self.tray = status_icon_new_from_icon_name('deluge-panel')
self.tray.connect('activate', self.on_tray_clicked) self.tray.connect('activate', self.on_tray_clicked)
self.tray.connect('popup-menu', self.on_tray_popup) self.tray.connect('popup-menu', self.on_tray_popup)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 588 B

After

Width:  |  Height:  |  Size: 505 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 545 B

After

Width:  |  Height:  |  Size: 462 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 606 B

After

Width:  |  Height:  |  Size: 533 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 738 B

After

Width:  |  Height:  |  Size: 490 B

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 610 B

After

Width:  |  Height:  |  Size: 552 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 764 B

After

Width:  |  Height:  |  Size: 582 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 566 B

After

Width:  |  Height:  |  Size: 465 B

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 681 B

After

Width:  |  Height:  |  Size: 432 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 529 B

After

Width:  |  Height:  |  Size: 410 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 624 B

After

Width:  |  Height:  |  Size: 505 B

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 525 B

After

Width:  |  Height:  |  Size: 394 B

Before After
Before After

View file

@ -1,22 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Deluge: Web UI ${version}</title> <title>Deluge WebUI ${version}</title>
<link rel="shortcut icon" href="${base}icons/deluge.png" type="image/png" /> <link rel="icon" sizes="16x16" type="image/png"
<link rel="icon" href="${base}icons/deluge.png" type="image/png" /> href="${base}icons/deluge.png"/>
<!-- For Chrome for Android: --> <link rel="icon" sizes="32x32" type="image/png"
<link rel="icon" sizes="192x192" href="${base}icons/deluge-android-192.png"> href="${base}icons/deluge-32.png"/>
<link rel="apple-touch-icon-precomposed" href="${base}icons/deluge-apple-180.png"> <!-- For Chrome, Android, iOS and Windows touch shortcuts: -->
<link rel="icon" sizes="192x192" type="image/png"
href="${base}icons/deluge-192.png"/>
<link rel="icon" sizes="512x512" type="image/png"
href="${base}icons/deluge-512.png"/>
<link rel="apple-touch-icon-precomposed"
href="${base}icons/deluge-apple-180.png"/>
<meta name="msapplication-TileColor" content="#599eee">
<meta name="theme-color" content="#599eee">
<!-- Stylesheets --> <!-- Stylesheets -->
% for stylesheet in stylesheets: % for stylesheet in stylesheets:
<link rel="stylesheet" type="text/css" href="${base}${stylesheet}" /> <link rel="stylesheet" type="text/css" href="${base}${stylesheet}"/>
% endfor % endfor
<script type="text/javascript"> <script type="text/javascript">
deluge = { deluge = {
author: 'Damien Churchill <damoxc@gmail.com>', author: 'Deluge Team',
version: '${version}', version: '${version}',
config: ${js_config} config: ${js_config}
} }