switching to rsvg, add drop shadows

1 files changed, 23 insertions, 13 deletions

diff --git a/index.php b/index.php
index 79a4428..a57606d 100644
--- a/index.php
+++ b/index.php
@@ -22,13 +22,14 @@ define('SVGNS', 'http://www.w3.org/2000/svg');
 
 define('COLOR_EXTRACT_RENDER_SIZE', 128);
 define('HARMATTAN_ICON_SIZE', 80);
-define('HARMATTAN_FOCAL_SIZE', 54);
+define('HARMATTAN_FOCAL_SIZE', 56);
 
 function svg2png($svg, $w, $h, $png)
 {
 	$output = array();
 	$exitcode = -1;
-	exec(sprintf("~/bin/qsvg %s %d %d %s", escapeshellarg($svg), $w, $h, escapeshellarg($png)),$output,$exitcode);
+	$cmd = sprintf("~/bin/rsvg-convert --format=png --width=%d --height=%d --output=%s %s", $w, $h, escapeshellarg($png), escapeshellarg($svg));
+	exec($cmd, $output, $exitcode);
 	return $exitcode == 0;
 }
 
@@ -117,7 +118,7 @@ $colfilters = array('none', 'pure', 'grey', 'grey5');
 function extract_dominant_color($svg, $algo = 'average', $filter = 'grey')
 {
 	global $domalgos, $colfilters;
-	$png = '/tmp/hicg-icon.png';
+	$png = '/tmp/hicg-icon-' . uniqid() . '.png';
 	if (!in_array($algo, $domalgos)) {
 		return false;
 	}
@@ -133,6 +134,7 @@ function extract_dominant_color($svg, $algo = 'average', $filter = 'grey')
 	}
 	$color = call_user_func('domcolor_'. $algo, $img, 'colfilter_'.$filter);
 	imagedestroy($img);
+	unlink($png);
 	return $color;
 }
 
@@ -217,12 +219,14 @@ function calc_scale_ratios($w, $h, &$s, &$tx, &$ty)
 	$ty = HARMATTAN_ICON_SIZE / 2 - $sh / 2;
 }
 
-function make_icon($src, $template, $dst, $color)
+function make_icon($src, $template, $dst, $color, $shadow)
 {
 	$srcDoc = new DOMDocument();
 	$srcDoc->load($src);
 	$doc = new DOMDocument();
 	$doc->load($template);
+	$xpath = new DOMXPath($doc);
+	$xpath->registerNamespace('svg', SVGNS);
 
 	/* Get scaling ratios from source SVG. */
 	$srcNode = $srcDoc->documentElement;
@@ -230,15 +234,19 @@ function make_icon($src, $template, $dst, $color)
 	$h = intval(get_svg_attribute($srcNode, 'height'));
 	calc_scale_ratios($w, $h, $s, $tx, $ty);
 
-	/* Fix gradient colors. */
-	$grd = $doc->getElementsByTagName('stop');
-	$grd->item(0)->setAttribute('style', 'stop-color:#' . color2hex(get_icon_light_color($color)) . ';stop-opacity:1');
-	$grd->item(1)->setAttribute('style', 'stop-color:#' . color2hex(get_icon_dark_color($color)) . ';stop-opacity:1');
+	/* Set background color */
+	$bkg = $xpath->query('/svg:svg/svg:g/svg:path[@id="hicg_background"]');
+	$bkg->item(0)->setAttribute('fill', '#' . color2hex($color));
 
 	/* Create the scaling & centering transform. */
 	$g = $doc->createElement('g');
 	$g->setAttribute('transform', "translate($tx, $ty) scale($s)");
 
+	/* Add drop shadow filter if selected. */
+	if ($shadow) {
+		$g->setAttribute('filter', 'hicg_drop_shadow');
+	}
+
 	foreach ($srcNode->childNodes as $node) {
 		$n = $doc->importNode($node, TRUE);
 		$g->appendChild($n);
@@ -266,6 +274,7 @@ if (@isset($_POST['send'])) {
 	}
 	$domalgo = $_POST['domalgo'];
 	$colfilter = $_POST['colfilter'];
+	$dropshadow = $_POST['dropshadow'] == 'dropshadow';
 	$iconfile = $prefix . 'icon.svg';
 	$pngfile = $prefix . 'icon.png';
 
@@ -280,7 +289,7 @@ if (@isset($_POST['send'])) {
 		$prscolor = get_pressed_color($domcolor);
 	}
 
-	make_icon($srcfile, 'template.svg', $iconfile, $domcolor);
+	make_icon($srcfile, 'template.svg', $iconfile, $domcolor, $dropshadow);
 	make_png($iconfile, $pngfile);
 
 	$srcurl = $srcfile;
@@ -290,6 +299,7 @@ if (@isset($_POST['send'])) {
 	/* Load some sample data. */
 	$srcfile = 'samplesrc.svg';
 	$domalgo = 'mode';
+	$dropshadow = true;
 	$colfilter = 'grey5';
 	$iconfile = 'sampleicon.svg';
 	$pngfile = 'sampleicon.png';
@@ -299,7 +309,7 @@ if (@isset($_POST['send'])) {
 	$prscolor = get_pressed_color($domcolor);
 
 	/* This should not get into production. ;) */
-	make_icon($srcfile, 'template.svg', $iconfile, $domcolor);
+	make_icon($srcfile, 'template.svg', $iconfile, $domcolor, $dropshadow);
 	make_png($iconfile, $pngfile);
 
 	$srcurl = $srcfile;
@@ -345,8 +355,7 @@ echo '<?xml version="1.0" encoding="utf-8" ?>';
 	</fieldset>
 	<fieldset>
 		<legend>Drop shadow</legend>
-		<label><input type="radio" name="dropshadow" value="none" />None</label>
-		<label><input type="radio" name="dropshadow" value="std" />Standard</label>
+		<label><input type="checkbox" name="dropshadow" value="dropshadow" checked="true" />Add drop shadow</label>
 	</fieldset>
 	<div class="buttons">
 		<input type="submit" name="send" value="Submit" />
@@ -379,12 +388,13 @@ echo '<?xml version="1.0" encoding="utf-8" ?>';
 			</div>
 		</div>
 	</div>
-	<p>Download <a href="<?php echo $iconurl; ?>">SVG file</a>. Or a 80x80 <a href="<?php echo $pngurl; ?>">PNG file</a>.</p>
+	<p>Download the prerendered 80x80 <a href="<?php echo $pngurl; ?>">PNG file</a>. Or a <a href="<?php echo $iconurl; ?>">SVG file</a>, if you want to make more changes.</p>
 </div>
 <h1>Suggested reading</h1>
 <ul>
 	<li><a href="http://www.developer.nokia.com/swipe/ux/pages/Colour.html">Nokia N9 UX Color Guidelines</a></li>
 	<li><a href="http://www.developer.nokia.com/swipe/ux/pages/Icons.html">Nokia N9 UX Icon Guidelines</a></li>
+	<li><a href="https://gitorious.org/hicg/hicg">The source for this tool</a></li>
 </ul>
 </body>
 </html>