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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 36
  1. #1
    New Coder
    Join Date
    Apr 2017
    Posts
    20
    Thanks
    2
    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 77 Times in 75 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 Coder
    Join Date
    Apr 2017
    Posts
    20
    Thanks
    2
    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
    876
    Thanks
    0
    Thanked 182 Times in 180 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. Users who have thanked Sempervivum for this post:

    bethloudin (04-27-2017)

  6. #5
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    506
    Thanks
    10
    Thanked 77 Times in 75 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.

  7. #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    506
    Thanks
    10
    Thanked 77 Times in 75 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

  8. Users who have thanked hdewantara for this post:

    bethloudin (04-27-2017)

  9. #7
    New Coder
    Join Date
    Apr 2017
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    O ok thanks so much to both of you I was just stuck on how to do the actual changing thanks so much I'll post what I get done and see if it's correct thanks for all the help to both of you.

  10. #8
    New Coder
    Join Date
    Apr 2017
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok I have been trying to read and do this but I'm so confused on all the coding. I know I need to get an onclick function but I'm confused on how to get this to change the color of the mask png I'm wanting to change. I have gotten the mask layer over the house pic but not sure how to write the code to make the button change the color of the mask. Here is what I have so far. I was looking off one that is similar to what I want to do. I don't quite understand the function and how to make the id to get them to change the color.
    Code:
    <style>
    .house 
    { position: relative; top: 0; left: 0;
     } 
    .roofmask { position: absolute; top: 8px; left: 6px;" }
    </style> 
    <img src="house.png" class="house"/> <img src="roofmask.png" class="roofmask"/>
    
    <script><script>
    function onclick = changePic(this)() {
        document.getElementById("Black").style.color = "Black";
    }
    </script> </script>
    
         <h2>Metal Roof Visualizer </h2> 
    <ul>
                        <li style="cursor:pointer; width:85px; padding:5px; font-size:70%; float:left; text-align:center;"><img onclick = changePic(this) src="black2.png" alt="Black" width="90" /><p>Black</p></li>
    -roofmask-jpg-house-jpg

  11. #9
    Regular Coder
    Join Date
    Feb 2016
    Posts
    876
    Thanks
    0
    Thanked 182 Times in 180 Posts
    not sure how to write the code to make the button change the color of the mask.
    The code in the link I gave you does exactly this. Did you read it?

  12. Users who have thanked Sempervivum for this post:

    ejackson0070 (05-17-2017)

  13. #10
    New Coder
    Join Date
    Apr 2017
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm going back over it now I just have to break it down for myself I tend to make things overcomplicated on how to make it for mine. Thanks

  14. #11
    New Coder
    Join Date
    Apr 2017
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sempervivum View Post
    The code in the link I gave you does exactly this. Did you read it?
    Where can I read up on this because I don't know coding well. I have 30 metal colors so how do I setup the id and function for all of those to change the mask color. I would make a var code for each color right?

  15. #12
    Regular Coder
    Join Date
    Feb 2016
    Posts
    876
    Thanks
    0
    Thanked 182 Times in 180 Posts
    Sorry, it's not necessary for you to read the complete code. I've created a demo for you just by modifying the marked lines:
    Code:
                var imgsrc = [
                    'images/roofmask2.png' //modified
                ];
                var bgsrc = 'images/house.jpg'; //modified
                var $canvas = $('#mycanvas');
                $canvas.drawImage({
                    source: bgsrc, //modified
                    x: 400, y: 300,
                    load: function () { imgbg = $canvas.getCanvasImage("png"); }
                });
    Doing this is very easy. Look at the result:
    Colorize image

  16. Users who have thanked Sempervivum for this post:

    ejackson0070 (05-17-2017)

  17. #13
    New Coder
    Join Date
    Apr 2017
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much I appreciate the help more than you know lol. That looks Awesome!! Now how would I create the metal color buttons here is a pic of the colors we offer. Would I make them all buttons and use the color picker still? Sorry this is just all so new and I feel lost but your helping so much and again thank you. -colorchartjpeg-1000x1302-jpg

  18. #14
    Regular Coder
    Join Date
    Feb 2016
    Posts
    876
    Thanks
    0
    Thanked 182 Times in 180 Posts
    I recommend creating the buttons automatically based on a list ob rgb values and color names. Do you have such list in text format or can you create it e. g. by copying the rgb values and the color names from some document? If not one would have to pick the colors from the image you posted.

  19. Users who have thanked Sempervivum for this post:

    ejackson0070 (05-17-2017)

  20. #15
    New Coder
    Join Date
    Apr 2017
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I tried to view page source and put it in my front page but it isn't showing the house or the dot does front page change the code somehow?
    -image1-jpg


 
Page 1 of 3 123 LastLast

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
  •