Just wanted to give y'all an update on the automation of the project book. As stated in the portfolio talk wiki page (
http://www.tcmaker.org/wiki/doku.php?id=talk:tcmaker:portfolio), I switched to using the Cairo vector image library to help with rendering an SVG file for the template. Because that library is POORLY documented and doesn't necessarily decrease the learning curve, the time-to-market, or lend any useful functions, I'm mostly using just the XML markup to create the final document.
The things that are finished:
- Simple web form capturing a users data
- Placing that data in the right spots in the SVG document
- Displaying the SVG document to the user after submitting the form
This is where I've hit a snag. SVG nor any of the graphics libraries I've researched will automatically wrap text. There's a few of ways around this limitation: embedding HTML into the SVG, using a markup library called Pango, using an embedded JavaScript (ECMAScript, to be precise) in the SVG, or write a program to do it. I've gone with the latter option because it is the only option that is compatible with all SVG renderers (i.e. browsers, editors, etc.) Anyway, here's the parsing functionality so far:
Code:
<?php
$font = './Verdana.ttf';
$font_size = 12;
$max_main_width = 423; // Max rendered length, in pixels, per line
$materials = $_GET['materials'];
//$maker_name = $_POST['maker_name'];
//$project_name = $_POST['project_name'];
//$completion = $_POST['completion'];
//$process = $_POST['process'];
$materials_words = explode(" ", $materials); // Split input into array or words
$rev_words = array_reverse($materials_words); // Reverse the array of words to use as a stack
// Not used yet
//$canvas = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 50, 50);
//$brush = cairo_create($canvas);
//$extents = cairo_font_extents($brush);
// Determine width & height of rendered variable
$bbox = imagettfbbox($font_size, 0, $font, $materials);
$width = $bbox[2] - $bbox[0];
$height = $bbox[1] - $bbox[5];
// Some stats
$length = strlen($materials);
$ppc = $width/$length;
$num_chars = $max_main_width/$ppc;
$num_lines = ceil($length*$ppc/$max_main_width);
$num_words = count($materials_words);
echo 'materials: ' .$materials .'<br/>';
echo 'strlen: ' .$length .'<br/>';
echo 'width: ' .$width .'<br/>';
echo 'pixels/char: ' .$ppc .'<br/>';
echo 'chars/line: ' .$num_chars .'<br/>';
echo 'lines: ' .$num_lines .'<br/>';
echo 'words: ' .$num_words .'<br/>';
$lines[] = ''; // To hold correct-length lines
$line = 0;
do
{
$word = array_pop($rev_words);
echo 'word: ' .$word .'<br/>';
echo 'line: ' .$line .'<br/><br/>';
array_push($lines[$line], $word); // ##### GETTING ERROR HERE
echo 'len: ' .getLength($lines[$line]) .'<br/>';
if (getLength(implode(' ', $lines[$line])) > $max_main_width) // Get rendered length of line
{
array_pop($lines[$line]);
array_push($rev_words, $word);
$line += 1;
}
} while (count($rev_words) > 0);
echo 'resultant lines: ' .count($lines) .'<br/>';
for ($i = 0; $i < count($lines); $i++)
{
echo 'line ' .$i .': ' .$lines[$i] .'<br/>';
}
function getLength(string $candidate){
$bbox = imagettfbbox($font_size, 0, $font, $candidate);
return ($bbox[2] - $bbox[0]);
}
// filetype: SVG
//header('Content-type: image/svg+xml');
//echo '<?xml version="1.0" encoding="UTF-8" standalone="no"';
?>
Here is the querystring that passes the arguments:
Code:
http://192.168.122.140/test/sample.php?materials=woods:%20cherry,%20cherry%20burl,%20walnut,%20spanish%20cedar,%20and%20wenge;%20off-the-rack%20and%20custom%20brass%20hardware;%20french-fit%20foam%20lined%20with%20synthetic%20black%20velvet
And this is what it looks like so far:
Code:
materials: woods: cherry, cherry burl, walnut, spanish cedar, and wenge; off-the-rack and custom brass hardware; french-fit foam lined with synthetic black velvet
strlen: 151
width: 1242
pixels/char: 8.2251655629139
chars/line: 51.427536231884
lines: 3
words: 21
word: woods:
line: 0
I'm getting an error whilst pushing words onto the stack. Go ahead and play with it if you want. I'm not stuck; I'm just taking a break.
To Do:
- Image upload (easy)
- Transforming the images (somewhat easy)
- Creating more templates (somewhat medium)
- Polishing it all up (medium)
- Not lose focus (somewhat medium)
By the way, I plan on releasing this project's code to the open-source community in acknowledgement of Software Fredom Day, which is Saturday, September 17th. I don't have a repository setup yet, so post here if you're interested in developing this with me.
Also, FireBug is absolutely awesome in working with SVG files. Forget about Inkscape; it's total crap for this project.
Edit: Added querystring & results
