4 Replies - 1039 Views - Last Post: 31 August 2010 - 08:53 PM

#1 Guest_Sethcran*


Reputation:

What format is this in and how to edit?

Posted 31 August 2010 - 04:46 PM

So, I have no idea quite how this is used, so I couldn't post in a more specific forum. I am a programmer, and was asked about the feasibility of doing a website, that while different completely from this website I was linked, would have a similar functionality.

http://www.customcol...lery/busca.html

If you click on a rug, you can then set colors to different parts of the rug. My best guess is that it involves layered images and sending in colors to each layer via some script, but I honestly have no idea. What image format would be needed by the artists for something of this type? Aside from learning Flash, are there any other languages I might need to be familiar with to implement this?

Thanks for any answers, and if I need to provide more detail, just let me know.

Is This A Good Question/Topic? 0

Replies To: What format is this in and how to edit?

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: What format is this in and how to edit?

Posted 31 August 2010 - 05:05 PM

Hey.

Both GIF and PNG images allow transparency, so the easiest way would be to just position a few <img> elements on top of each other using CSS, and swap them out using Javascript. There is no need to be bothering your users with Flash for this.

Not entirely sure how you could save the layers as one image though. Would probably need a bit of server-side programming for that. (Not hard, really, using PHP or .NEt)

If you are open to more modern techniques (read: things IE can't do) then you could also try using SVG or HTML5 canvas. Both of those could be used to render the patterns programatically. And I hear (although I've not tried it yet) that CSS3 allows layering of background images, which I suppose could also be used here.
Was This Post Helpful? 0
  • +
  • -

#3 Sethcran   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 12-November 08

Re: What format is this in and how to edit?

Posted 31 August 2010 - 05:21 PM

Quote

Hey.

Both GIF and PNG images allow transparency, so the easiest way would be to just position a few <img> elements on top of each other using CSS, and swap them out using Javascript. There is no need to be bothering your users with Flash for this.

Not entirely sure how you could save the layers as one image though. Would probably need a bit of server-side programming for that. (Not hard, really, using PHP or .NEt)

If you are open to more modern techniques (read: things IE can't do) then you could also try using SVG or HTML5 canvas. Both of those could be used to render the patterns programatically. And I hear (although I've not tried it yet) that CSS3 allows layering of background images, which I suppose could also be used here.


Can you auto fill these elements using css ( or another method ) if they are saved in this way? And if so, could you give a brief example of how to do it? The user needs to be able to select any color within the true color spectrum ideally, and just need to make sure that sending the rgb values to each layer is enough to autofill and give a general idea of how they look together.
Was This Post Helpful? 0
  • +
  • -

#4 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: What format is this in and how to edit?

Posted 31 August 2010 - 08:24 PM

Using a bit of server-side image processing, you could use the CSS image layer method to do this.

For example, if you were to create your patterns as pure white PNG images with transparent backgrounds. (See the attachments.) You could use a fairly simple PHP script (or .Net, or Java, or whatever) to convert the white pixels of the image to any color, cache it and relay it back to the client. Something like this:
<?php
// Path to the image directories. Make sure PHP has write permissions to the
// cache directory! (It won't warn you, it'll just keep making new images.)
define('IMG_CACHE_DIR', 'imgcache/');
define('IMG_SOURCE_DIR', 'imgsrc/');

// Disable error reporting and set the response type to PNG. (We don't want the
// any warning messages messing up the PNG source.)
// Set "true", "-1" and "plain/text" respectively when debugging.
ini_set('display_errors', false);
error_reporting(0);
header("Content-type: image/png");

// Set the requested layer image. Default to "layer1"
($li = @$_GET['layer']) or $li = 1;
$imgSrc = IMG_SOURCE_DIR . "layer{$li}.png";
if(!file_exists($imgSrc)) {
    $imgSrc = IMG_SOURCE_DIR . "layer1.png";
}

// Get the requested color. Default to black.
($r = @$_GET['r']) or $r = 0;
($g = @$_GET['g']) or $g = 0;
($b = @$_GET['b']) or $b = 0;

// Check to see if a cached version exists. If it does use it, if not generate
// a new image.
$cacheDir = IMG_CACHE_DIR . basename($imgSrc, '.png') . "_{$r}_{$g}_{$b}.png";
if(file_exists($cacheDir)) {
    readfile($cacheDir);
}
else {
    setColorOverlay($imgSrc, $r, $g, $b, IMG_CACHE_DIR);
}

/**
 * Changes all white pixels in the source image to the new color and prints the
 * new image to the output buffer. If a $cacheDir is specified, the image is
 * saved there before it is printed.
 * @param <string> $src Path to the source image.
 * @param <int> $nr New red component of the color.
 * @param <int> $ng New green component of the color.
 * @param <int> $nb New blue component of the color.
 * @param <string> $cacheDir NULL to disable caching.
 */
function setColorOverlay($imgSrc, $r, $g, $b, $cacheDir=null)
{
    // Get the image data and details
    $img = imagecreatefrompng($imgSrc);

    // Make black transparent. (Needed or the background will be opaque and black!)
    $black = imagecolorallocate($img, 0, 0, 0);
    imagecolortransparent($img, $black);

    // Make sure the color isn't a true black, and therefore transparent, by making
    // r = 1 when all are 0.
    if($r == 0 && $g == 0 && $b == 0) {
        $r = 1;
    }

    // Allocate the color we will replace white with.
    $newColor = imagecolorallocatealpha($img, $r, $g, $b, 0);

    // Swap white for the new color
    $imgSize = getimagesize($imgSrc);
    for($x = 0; $x < $imgSize[0]; $x++) {
        for($y = 0; $y < $imgSize[1]; $y++) {
            $color_index = imagecolorat($img, $x, $y);
            $colors = imagecolorsforindex($img, $color_index);
            if($colors['red'] == 255 && $colors['green'] == 255 && $colors['blue'] == 255) {
                imagesetpixel($img, $x, $y, $newColor);
            }
        }
    }

    // Set the cache dir, if it exists and is writable.
    if($cacheDir != NULL) {
        if(file_exists($cacheDir) && is_writable($cacheDir)) {
            $cacheDir = $cacheDir . basename($imgSrc, '.png') . "_{$r}_{$g}_{$b}.png";
        }
        else {
            $cacheDir = NULL;
        }
    }

    // Print the new image
    imagepng($img, $cacheDir);
    imagedestroy($img);

    if($cacheDir != NULL) {
        readfile($cacheDir);
    }
}
?>



You could use this in your HTML like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        img.layer {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 250px;
            height: 250px;
        }
        #controls {
            position: absolute;
            top: 400px;
            left: 100px;
        }
    </style>
    <script type="text/javascript">
        /**
         * Sets the color of a layer. Just changes the SRC of the layer image and has PHP do the heavy-lifting.
         * @param layerNo The layer number
         * @param r The red component of the new color. (0-255)
         * @param g The green component of the new color. (0-255)
         * @param b The blue component of the new color. (0-255)
         */
        function setLayerColor(layerNo, r, g, B)/> {
            var layerImg = document.getElementById('layer' + layerNo);
            layerImg.src = "getimg.php?layer=" + layerNo + "&r=" + r + "&g=" + g + "&b=" + b;
        }
    </script>
</head>
<body>
    <div id="layers">
        <img id="layer1" class="layer" src="getimg.php?r=255&layer=1" alt="Layer 1">
        <img id="layer2" class="layer" src="getimg.php?g=255&layer=2" alt="Layer 2">
        <img id="layer3" class="layer" src="getimg.php?b=255&layer=3" alt="Layer 3">
    </div>
    <div id="controls">
        <span>Layer 1</span>
        <button onclick="setLayerColor(1, 255, 0, 0);">Red</button>
        <button onclick="setLayerColor(1, 0, 255, 0);">Green</button>
        <button onclick="setLayerColor(1, 0, 0, 255);">Blue</button>
        <br>
        <span>Layer 2</span>
        <button onclick="setLayerColor(2, 255, 0, 0);">Red</button>
        <button onclick="setLayerColor(2, 0, 255, 0);">Green</button>
        <button onclick="setLayerColor(2, 0, 0, 255);">Blue</button>
        <br>
        <span>Layer 3</span>
        <button onclick="setLayerColor(3, 255, 0, 0);">Red</button>
        <button onclick="setLayerColor(3, 0, 255, 0);">Green</button>
        <button onclick="setLayerColor(3, 0, 0, 255);">Blue</button>
        <br>
    </div>
</body>
</html>


A downside to this method is that you can not have the client-side code save the output as a whole. You would, again, have to resort to server-side coding to do that. The HTML5 canvas element could help with this, but it's not supported by you-know-who.

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image

Was This Post Helpful? 1
  • +
  • -

#5 Sethcran   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 12-November 08

Re: What format is this in and how to edit?

Posted 31 August 2010 - 08:53 PM

Thanks a bunch, that was a great bit of read for what I needed!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1