Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2017
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Metal Roofing Color visualizer

    Hello, everyone, I am working on my family business metal roofing website. I have came across some other metal roofing websites with a color visualizer that helps the client pick a metal roof color by generating the color on a picture of a house. Here is an example of what I'm talking about: Metal Roof Color Visualizer. I'm new to script writing but understand somethings. Could anyone please help with a script for this or direct me to good tutorials. I appreciate all the help I can get. Thanks so much in advance.

  2. #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    506
    Thanks
    10
    Thanked 76 Times in 74 Posts
    Hi.
    Rather than trying to search for a ready-to-use script,
    perhaps you have you tried to build this from scratch?

    Let me see any code you've built so far...

    Hendra

  3. #3
    New to the CF scene
    Join Date
    Apr 2017
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. I didn't mean for it to come across like I wanted a ready made script. I just wanted to know how to do it. Where can I go to learn to do a script like the one in the link? I'm totally new and don't know javascript coding but from the looks at the script it is some sort of color change or for a graphic image where can I go to learn to do this? Sorry if this isn't the right place to post this sort of thing.

  4. #4
    Regular Coder
    Join Date
    Feb 2016
    Posts
    712
    Thanks
    0
    Thanked 145 Times in 143 Posts
    Seems to me that I have a script meeting your requirement:
    Colorize image
    I made it some time ago for another forum member. Any colorpicker can be used. Needs a little expense to prepare the images but it's not too difficult. If you have questions, please ask.

  5. #5
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    506
    Thanks
    10
    Thanked 76 Times in 74 Posts
    Or if you look inside that example page you've posted, I think the concept is quite simple. Following may have the same effect:

    First take out the original roof part of a house image, save it (the house) as transparent PNG file. Second step, create a mask (pattern) image of your roof product applied to this specific house. This might be a black and white image with transparency set to 50% or higher. Save this to transparent PNG file too.

    For example, say that you have 4 houses and your products have 5 different patterns, then 4 house image files with hollow (transparent) roofing should be made. Five mask images should be made for house #1, another 5 for house #2 and so on. In total, 20 mask images shoud be prepared.

    Prepared all? Then arrange a selected house image to be in front of a selected mask and set background to selected color. Maybe it's easier to see if you simulate this first with an image processing software (Photoshop / GIMP). They all support layering.

  6. #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    506
    Thanks
    10
    Thanked 76 Times in 74 Posts
    An example, zero javascript version:
    PHP Code:
    <!DOCTYPE html>
    <
    html>
        <
    head>
            <
    meta charset="utf-8">
            <
    meta name="viewport" content="width=device-width, initial-scale=1.0">
            <
    title>roofing</title>
            <
    style>
                
    div.house{
                    
    positionrelative;
                    
    displayinline-block;
                }
                
    div.house ul{
                    list-
    stylenone;
                    
    padding-left0;
                }
                
    div.house img{
                    
    displayblock;
                    
    max-width100%;
                    
    heightauto;
                }
                
                
    div.house ul li{
                    
    displayinline;
                }
                
    div.house ul.tiles img{
                    
    displaynone;
                    
    positionabsolute;
                    
    top0;
                    
    left0;
                }
                
    div.house ul.colors span{
                    
    displaynone;
                    
    positionabsolute;
                    
    top0;
                    
    left0;
                    
    width100%;
                    
    height60%;
                    
    z-index: -1;
                }
                
    div.house ul input:checked+label+img{
                    
    displayblock;
                }
                
    div.house ul input:checked+label+span{
                    
    displayblock;
                }
            </
    style>
        </
    head>
        <
    body>
            <
    h1>roofing</h1>
            
            <
    div class="house">
                <
    img src="house0.png" alt="house0">

                <
    ul class="tiles">
                    <
    li><input type="radio" name="tile" id="tile0" checked>
                        <
    label for="tile0">tile0</label>
                        <
    img src="tile0.png" alt="tile0"></li>
                        
                    <
    li><input type="radio" name="tile" id="tile1">
                        <
    label for="tile1">tile1</label>
                        <
    img src="tile1.png" alt="tile1"></li>
                        
                    <
    li><input type="radio" name="tile" id="tile2">
                        <
    label for="tile2">tile2</label>
                        <
    img src="tile2.png" alt="tile2"></li>
                </
    ul>
                
                <
    ul class="colors">
                    <
    li><input type="radio" name="color" id="natural" checked>
                        <
    label for="natural">natural</label>
                        <
    span></span></li>
                        
                    <
    li><input type="radio" name="color" id="red">
                        <
    label for="red">red</label>
                        <
    span style="background-color:red"></span></li>
                        
                    <
    li><input type="radio" name="color" id="green">
                        <
    label for="green">green</label>
                        <
    span style="background-color:green"></span></li>
                        
                    <
    li><input type="radio" name="color" id="blue">
                        <
    label for="blue">blue</label>
                        <
    span style="background-color:blue"></span></li>
                </
    ul>
            </
    div>        
        </
    body>
    </
    html
    and use following resources:
    -house0-jpg-tile0-jpg-tile1-png-tile2-jpg


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •