Databases
StackOverflow2013
Postsdbo
POCreate and layer pattern-filled, partially-transparent images; on-the-fly for a web page
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreate and layer pattern-filled, partially-transparent images; on-the-fly for a web page
    primarykey
    data
    text
    <p>The application has resemblances to this page, the best example being the "matrix hoop" tape style:</p> <p><a href="http://www.troohoops.com/products/decorator.php" rel="nofollow">http://www.troohoops.com/products/decorator.php</a></p> <p>The difference is that this example uses gif files that have already been manually drawn to represent each combination of tape style and swatch. My application requires the layers to be created on-the-fly because I will be dealing with many more of such tape styles rather than just five, and potentially more swatches; and because new tape styles will be added to the system ad hoc so the web operator should not have to draw dozens of images to represent style/swatch combination each time a style is added to the system.</p> <p>Some ideas I have are:</p> <ol> <li><p>using CSS and image masks and/or z-indexes... but this seems not able to handle transparency suitably</p></li> <li><p>building a flash application... but this is an unknown as I do not have any flash programming experience, but I would be willing to learn if it is viable</p></li> <li><p>defining polygonal image regions using XHTML image mapping as z-indexed layers and filled with repeated swatch thumbnails... but again this is beyond my understanding</p></li> <li><p>using an image library that can process style layers as .svg files and fill vectored regions with swatches as .gif files</p></li> </ol> <p>I have no evidence that any of these ideas works. </p> <p>It is assumed that style layers can be created using software such as The Gimp, or other suitable image editing software.</p> <p>My application also needs to produce a snapshot image of the selected style/swatches as a jpeg, gif or png; if another technology is required to do this then that's acceptable.</p> <p>The final solution will also allow selection from a list of styles and swatches in the same fashion as the above link.</p> <p>The solution will operate on a PHP/MySQL based web site, but the solution does not need to use PHP/MySQL.</p> <p>Just to clarify the main question, the logic would go something like this:</p> <ol> <li><p>Take square thumbnail of fixed dimension. I.e. a swatch.</p></li> <li><p>Take outline of an irregular shape. I.e. one layer of a tape style.</p></li> <li><p>Fill the irregular shape with the image of the thumbnail where the thumbnail is repeated vertically and horizontally without crossing the outline of the irregular shape and without leaving any of the irregular shape unfilled. I.e. fill the tape style layer with the swatch.</p></li> <li><p>Repeat this process for five layers, but stack the layers on top of each other so that lower layers are visible where there is transparent unfilled regions of higher layers.</p></li> <li><p>Produce a flattened snapshot of all the layers as a jpeg, gif or png file.</p></li> </ol> <p>There is the equivalent of a carton of beer up for grabs for the outline of a solution, offered in the form of a PayPal payment; redeemable upon identifying a viable technology.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJules_Text
    1. USJules_Text
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COHi all, I've solved using PHP GD Library, with this logic: 1. create layer of tape style with graphics editor; 2. select image inverse, fill layer with inverse, delete original layer for 'cookie cutter'; 3. save as .png; 4. use fill_with_patternfile described on http://php.net/manual/en/function.imagefill.php; 5. use imagecolortransparent described on http://www.php.net/manual/en/function.imagecolortransparent.php; 6. This creates on-the-fly layer file; 7. the rest is common place javascript or similar as per example application above
      singulars
      1. POCreate and layer pattern-filled, partially-transparent images; on-the-fly for a web page
      1. USJules_Text
    2. COP.s. the carton of beer is gone to the above comment (as I am satisfied with my own solution.)
      singulars
      1. POCreate and layer pattern-filled, partially-transparent images; on-the-fly for a web page
      1. USJules_Text
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload