color-a-home or roof plugin

448 views
Skip to first unread message

Becky

unread,
Jan 18, 2012, 1:15:57 PM1/18/12
to Minneapolis St. Paul WordPress User Group
Is there an interactive plugin that allows visitors to see what their
house would look like a different color or with a different color
roof?

CT Yeung

unread,
Feb 1, 2012, 9:12:47 PM2/1/12
to mpls-stpau...@googlegroups.com
Becky, are you loading the image onto a canvas for pixel manipulation ?

> --
> You received this message because you are subscribed to the Google Groups "Minneapolis St. Paul WordPress User Group" group.
> To post to this group, send email to mpls-stpau...@googlegroups.com.
> To unsubscribe from this group, send email to mpls-stpaul-word...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/mpls-stpaul-wordpress?hl=en.
>

Nick Ciske

unread,
Feb 2, 2012, 10:10:53 AM2/2/12
to Minneapolis St. Paul WordPress User Group
That's a pretty tall order for a plugin!

I don't know of anything outside a custom built solution that would be
able to achieve that...

Here's what you're dealing with:

1. GD or ImageMagick Support at a minimum. GD is required by WP but is
not nearly as powerful as ImageMagick OR Flash (which has powerful
filters built in).

2. Some way to predefine, have the user select, or auto-detect what is
house/roof and what is not (no easy task, unless you have an artist
doing it in Photoshop and letting the user select from a list of
photos).

3. Algorithms to attempt to change the color cast of the source photo
(masked to just change the house paint/roof) to match the target color
-- if you're starting from a known point (i.e. you provide the photos)
that's doable, but if you're using customer supplied photos it's a
pretty daunting challenge to have any semblance of accuracy. And then
you have to take into account ambient lighting in the photo (which
causes us to perceive colors differently).

If you client has a preferred paint brand (or doesn't mind linking to
one) they might be your best bet. Most big paint brands have a tool
like what you're looking for, and I guarantee they paid dearly to have
it built.

http://www.benjaminmoore.com/en-us/for-your-home/personal-color-viewer
(interior only)

http://choosemycolors.com/ ($20 each)

More
http://architecture.about.com/od/software/tp/paintsoftware.htm

-- Nick

CT Yeung

unread,
Feb 2, 2012, 10:11:16 PM2/2/12
to mpls-stpau...@googlegroups.com
I am also not aware of an existing widget that performs that exact task.
However, I think it can be achieved without great difficulty if you
allow the use of either HTML5 canvas or Flash.

here are my thoughts.

1) create an image with the roof cutout (photoshop).

2) place html5 canvas image (original) with roof-cutout-image on top
(separate div).

3) use a javascript-color-adjustment algorithm to modify the color to
your choosing.

Your greatest challenge will likely be the color calculation to derive
the proper values.
If so, you will need to measure the paint or roof material with a
spectrophotometer or a spectroradiometer to obtain the correct CIE
L*a*b* values.

If you are going for the "eye-ball" method, photoshop might provide a
good enough estimate output result. Then you can just load those
different images created in photoshop.

What do you think ?

Here is my Flex implementations in HSV and CIEL*a*b* adjustment.
Maybe this is useful to you (port to javascript)?
http://www.ctyeung.com/flex/AdjustHSV/TestAdjustHSV.html
http://www.ctyeung.com/flex/AdjustCIELab/TestAdjustCIELab.html

CT

Toby C

unread,
Feb 3, 2012, 7:50:50 AM2/3/12
to mpls-stpau...@googlegroups.com
CT,
I love those sound effects!  Are they from Megamania on the old 2600 Atari?

Toby

CT Yeung

unread,
Feb 3, 2012, 8:52:35 AM2/3/12
to mpls-stpau...@googlegroups.com

Oh, I was experimenting with sound and interface sometime back.

Did you grow up with Atari too?

On Feb 3, 2012 6:51 AM, "Toby C" <tcr...@gmail.com> wrote:

CT,
I love those sound effects!  Are they from Megamania on the old 2600 Atari?

Toby





On Thu, Feb 2, 2012 at 9:11 PM, CT Yeung <yeu...@gmail.com> wrote:
>

> I am also not aware of an...

--
You received this message because you are subscribed to the Google Groups "Minneapolis St. Paul ...

Toby C

unread,
Feb 5, 2012, 11:08:08 PM2/5/12
to mpls-stpau...@googlegroups.com
Uh, yeah!  I had a box of Atari games + the 2600 and was keeping high scores on paper whilst all of my fancy friends were busy playing Super Mario Bros.  Haha!

My favorite game was Combat, but there were so many great games...  :)

We should figure out how to port an Atari game over to WordPress...  Have you heard of anyone porting Atari to HTML5 Canvas?  How about Flash?  There should be a plugin for this!

Toby

--

CT Yeung

unread,
Feb 6, 2012, 5:21:00 AM2/6/12
to mpls-stpau...@googlegroups.com
This Flash upgrade of Atari pong is inspiring.
http://www.barcinski-jeanjean.com/

Becky Caneday

unread,
Feb 1, 2012, 9:20:14 PM2/1/12
to mpls-stpau...@googlegroups.com
It is for a home rehab site. The client wondered about a plugin that would function like the Sherwin Williams color visualizer (https://www.sherwin-williams.com/visualizer/) for the siding color and roof color.

Becky Caneday

unread,
Feb 2, 2012, 10:14:06 AM2/2/12
to mpls-stpau...@googlegroups.com
Thanks, Nick. That is kind of what I was thinking. I did recommended just linking to Sherwin-Williams, etc., but wanted to verify that it was the best solution.

On Thu, Feb 2, 2012 at 9:10 AM, Nick Ciske <ni...@thoughtrefinery.com> wrote:

Becky Caneday

unread,
Feb 3, 2012, 11:15:25 AM2/3/12
to mpls-stpau...@googlegroups.com
Pretty cool! It gives me a different angle to analyze. It does have possibilities. Thank you so much.

Becky

CT Yeung

unread,
Feb 6, 2012, 7:21:08 PM2/6/12
to mpls-stpau...@googlegroups.com
Becky,

Thank you for sharing the Sherwin Williams website. The user
experience is way cool.
It looks like the color selection is being applied as a transparency filter.
But as you probably know, paint is a pigment that reflects light (not
transparent). So I am not sure how they are able represent their
products accurately.

If you wish to approach this in similar fashion, you can obtain the
CIEL*a*b* value for each paint selection from your client (or measure
with a spectrophotometer) and calculated the corresponding sRGB (HP)
values for a standard monitor. You may need to do some guessing on
the scene light source (daylight, tungsten, fluorescent, etc) for the
final image.

http://en.wikipedia.org/wiki/SRGB

CT

CT Yeung

unread,
Feb 7, 2012, 8:18:46 AM2/7/12
to mpls-stpau...@googlegroups.com
Becky,

Something that might be of value to you in lighting and color
calculation for architecture.

AutoDesk product:
http://blog.lightingvanguard.com/2011/08/lighting-simulation-software-autodesk.html

Mathematica: http://vimeo.com/14281064

CT

barbara schendel

unread,
Feb 7, 2012, 9:58:03 AM2/7/12
to Minneapolis St. Paul WordPress User Group
Hey Becky, Not sure what your budget is but my jQuery guy is awesome
and not too expensive. His name is Jake, he built the functionality of
the "preview your look" page of this site we did together--
http://www.goodlookink.com/request-a-quote If you want his info let
me know and I'll send it off-list.

Good luck, sounds like a fun project!

-barbara-




On Feb 1, 8:20 pm, Becky Caneday <bcane...@gmail.com> wrote:
> It is for a home rehab site. The client wondered about a plugin that would
> function like the Sherwin Williams color visualizer (https://www.sherwin-williams.com/visualizer/) for the siding color and roof
> color.
>
>
>
>
>
>
>
> On Wed, Feb 1, 2012 at 8:12 PM, CT Yeung <yeu...@gmail.com> wrote:
> > Becky,  are you loading the image onto a canvas for pixel manipulation ?
>

Becky Caneday

unread,
Feb 7, 2012, 10:05:07 AM2/7/12
to mpls-stpau...@googlegroups.com
Wow! That looks impressive - I would appreciate the contact info (bcan...@gmail.com). My client's budget is small, but I will show them this site. They may choose to expand their budget for this.

Thanks, Becky

Yunior A

unread,
Apr 17, 2020, 9:28:58 AM4/17/20
to Minneapolis St. Paul WordPress User Group
I was interested for this too, i found a good sample about this but seems in 3D very expensive to make i guess

Reply all
Reply to author
Forward
0 new messages