This is what I had on a page called "custompetgenerate.php". It holds the Imagick code:
PHP Code:
<?php
class CustompetgenerateController extends AppController{
public function index(){
// Lets setup the database.
$mysidia = Registry::get("mysidia");
$custom_session = $mysidia->db->select("custom", array(), "uid='{$mysidia->user->uid}'")->fetchObject();
// Remember to order these in reverse, the last element in the array should always be the top layer you will see (usually lineart). All images should be the same dimensions.
$images = array(
'http://www.wild-souls.mysidiahost.com/picuploads/den.png',
'http://www.wild-souls.mysidiahost.com/picuploads/wolf_images/adult/bases/' . $custom_session->base . ' base.png',
'http://www.wild-souls.mysidiahost.com/picuploads/wolf_images/adult/markings/' . $custom_session->marking1 . '.png',
'http://www.wild-souls.mysidiahost.com/picuploads/wolf_images/adult/markings/' . $custom_session->marking2 . '.png',
'http://www.wild-souls.mysidiahost.com/picuploads/wolf_images/adult/markings/' . $custom_session->marking3 . '.png',
'http://www.wild-souls.mysidiahost.com/picuploads/wolf_images/adult/ranks/' . $custom_session->rank . '.png',
'http://www.wild-souls.mysidiahost.com/picuploads/wolf_images/adult/noses/' . $custom_session->nose . '.png',
'http://www.wild-souls.mysidiahost.com/picuploads/wolf_images/adult/eyes/eyes ' . $custom_session->eyes . '.png',
'http://www.wild-souls.mysidiahost.com/picuploads/wolf_images/adult/shade.png',
'http://www.wild-souls.mysidiahost.com/picuploads/wolf_images/adult/lineart.png'
);
// This creates the Imagick class that we will use.
$composed_image = new \Imagick($images);
//Base
$composed_image->setIteratorIndex(2);
$composed_image->compositeImage( new \Imagick($images[1]), \Imagick::COMPOSITE_DSTIN, 0, 0 );
$composed_image->setIteratorIndex(8);
$composed_image->compositeImage( new \Imagick($images[1]), \Imagick::COMPOSITE_DSTIN, 0, 0 );
// As you see above, by calling setIteratorIndex(), you switch your "working layer" to the layer you wish to modify.
// Now lets flatten it and display it. This creates a new Imagick instance to work with only one flat image.
$image = $composed_image->mergeImageLayers(\Imagick::LAYERMETHOD_FLATTEN);
$image->setImageFormat('png');
header('Content-type: image/png');
echo $image->getImageBlob();
}
}
?>
I made a new table in the database called "custom". The columns there are similar to how I store the markings and stuff in the regular pet generation script. Each user has their own "session", which is a single column in the database that holds the custom information.
It isn't included here, but each user has a row generated when they register on the site; that row has default values to show a "blank" pet.
PHP Code:
<?php
class CustompetView extends View{
public function index(){
$mysidia = Registry::get("mysidia");
$mysidia = Registry::get("mysidia");
$document = $this->document;
$custom_session = $mysidia->db->select("custom", array(), "uid='{$mysidia->user->uid}'")->fetchObject();
$document->setTitle("Create your Character");
//The width and height must be the same as the image size!
$document->add(new Comment("
<div style='display:flex; align-items:center; justify-content:center;'>
<iframe src='/custompetgenerate' style='border:none; overflow:hidden; width:800px; height:700px;'></iframe>
</div>
"));
$document->add(new Comment("
<form action='custompet' method='post'>
<div class ='form-group'>
<label for='base'>Base Color:</label>
<select class='form-control' id='base' name='base'>
<option>black</option>
<option>black phase</option>
<option>blue</option>
<option>chocolate</option>
<option>clay</option>
<option>cream</option>
<option>dark chocolate</option>
<option>dark cream</option>
<option>dark grey</option>
<option>dark red</option>
<option>faded black</option>
<option>faded blue</option>
<option>faded gold</option>
<option>gold</option>
<option>grey</option>
<option>isabella</option>
<option>ivy</option>
<option>light cream</option>
<option>light grey</option>
<option>moss</option>
<option>off-white</option>
<option>red</option>
<option>saffron</option>
<option>sand</option>
<option>white</option>
</select>
<label for='eyes'>Eye Color:</label>
<select class='form-control' id='eyes' name='eyes'>
<option>blue</option>
<option>gold</option>
<option>green</option>
<option>red</option>
<option>violet</option>
</select>
</div>
<label for='nose'>Nose Color:</label>
<select class='form-control' id='nose' name='nose'>
<option>black butterfly</option>
<option>black</option>
<option>blue</option>
<option>dudley</option>
<option>liver butterfly</option>
<option>liver</option>
<option>pink</option>
</select>
Marking 1: <select class='form-control' id='marking1' name='marking1'>
<option>empty</option>
<option>agouti</option>
<option>black overfur</option>
<option>brown overfur</option>
<option>harlequin</option>
<option>irish</option>
<option>piebald</option>
<option>red points</option>
<option>snowflake</option>
<option>tan eyes</option>
<option>urajiro</option>
<option>white socks</option>
<option>white tips</option>
<option>white trim</option>
<option>white underfur</option>
</select>
<p><p>
<input type='submit'>
</form>
"));
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$base = $_REQUEST['base'];
$eyes = $_REQUEST['eyes'];
$mark1 = $_REQUEST['marking1'];
$nose = $_REQUEST['nose'];
$mysidia->db->update("custom", array("base" => $base, "eyes" => $eyes, "marking1" => $mark1, "nose" => $nose), "uid = '{$mysidia->user->uid}'");
}
}
}
?>
This is where the interface is. (custompet.php was basically the same as blank.php, so it wasn't worth posting here.) Each time the user clicks "submit", their dropdown selections are saved to the database and the image updates to reflect what they chose. The way this is set up, the user's customization is "saved" and it will remain the same if they leave the page and come back. With some tweaking, it should be possible to add another button saves the customization as an actual adoptable.