Jump to content
rodrigolfm

Construir um Simulador de Cores

Recommended Posts

rodrigolfm

Boas pessoal do forum , será que alguem teria alguma ideia de como fazer isso funcionar, igual a imagem ?

gostaria de umas ideias e dicas por onde começar .

Obrigado

Edited by rodrigolfm

Share this post


Link to post
Share on other sites
Knot

Penso que podes fazer isso com javascript usando esta ideia (não vou meter código certinho, vou meter texto escrito aproximado):

Em cada quadradinho da cor colocas por exemplo name='vidro' e value='código_da_cor' e depois onclick='minha_funcao(this.name, this.value)'

depois em javascript crias a função

function minha_funcao(nome, valor)

{

document.get.elementbyid(nome).style.backgroundcolor(valor);

}

Nunca fiz isto e por acaso até tenho interesse em saber se isto dá para funcionar desta maneira, mas teoricamente penso que é possível fazer desta maneira.

Share this post


Link to post
Share on other sites
rodrigolfm

a imagem da janela é esta

e a imagem do vidro é esta

Edited by rodrigolfm

Share this post


Link to post
Share on other sites
rodrigolfm

é apenas uma imagem da janela e outra do vidro

Edited by rodrigolfm

Share this post


Link to post
Share on other sites
HappyHippyHippo

a melhor maneira para fazer isso será (por ventura) desta maneira:

- crias um canvas para apresentar a imagem final

- criar a selecção de cores como já foi dito

- registas uma função a ser executada no fim de carregamento da página que irá fazer o seguinte

- carrega as três imagens por javascript

- no fim de carregar as três imagens (nota que é um processo assíncrono) vais apresentar as três imagens originais nas suas posições correctas no canvas

- registas uma função a ser executada sempre que alguém carregar numa das cores que irá fazer o seguinte

- caso não estejas a compor uma imagem

- vais copiar os pixeis da imagem original

- vais manipular a componente de cor das imagens da janela/caixilho mediante a cor do elemento carregado

- vais apresentar as três imagens (compostas) no canvas


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
rodrigolfm

Boas eu ja ando a começar , vou tentar fazer isso que me passou . mas é mesmo isso que eu quero .

Obrigado

Edited by rodrigolfm

Share this post


Link to post
Share on other sites
rodrigolfm

Boas ja consegui fazer isso funcionar usei jquery para funcionar .

mas agora o unico problema que eu estou tendo é conseguir cores para VIDROS em RGB , não sei onde buscar . se não conseguir vou ter que encontrar outra solução .

Share this post


Link to post
Share on other sites
rodrigolfm

Boas consegui fazer as cores funcionar usando o formato padrão RGB, exemplo esses numeros quer dizer a cor vermelha " 245,25,45 ".

mas estou querendo um misturador de cores para poder criar essas cores e me gerar os numeros em RGB se não ficar igual a cor de vidro , terei de por mesmo uma imagem real dos vidros que ia ter que mudar muita coisa no sistema .

Share this post


Link to post
Share on other sites
HappyHippyHippo

tens de ser mais claro/específico nos teus intuitos porque não dá para perceber o que queres.

além disso falas no final de um sistema que ninguém sabe como funciona, pois somente tu tens o código existente neste momento,


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
rodrigolfm

simplesmente oque eu estou tentando fazer agora é gerar uma cor de vidro como foi dito la em cima .

queria os numeros em rgb exmplo dessas cores que esta nesta imagem

Edited by rodrigolfm

Share this post


Link to post
Share on other sites
Knot

Tenta criar as cores aqui: http://www.css3maker.com/css-3-rgba.html

Se tiveres o firefox podes adicionar o addon colorpicker e ele dá-te a cor de um certo elemento, ou podes até abrir um editor de imagens uma imagem e com a ferramenta colorpicker encontrar a cor aproximada

Edited by Knot

Share this post


Link to post
Share on other sites
rodrigolfm

é mesmo isso knot porém com uma transparencia , como que se aplica a transparencia no rgb alguem sabe

Share this post


Link to post
Share on other sites
Knot

O rgb não dá (acho eu com alguma certeza!), mas podes usar o rgba que é igual, apenas tem o campo para a transparência. Vê nesse link que coloquei

Share this post


Link to post
Share on other sites
rodrigolfm

boas ja entrei agora , fiz la uma cor bem transparente e tentei , funciona a cor e tal , mas a transparencias não aparece , deve ser porque eu tenho outras camadas por baixo do vidro da janela .

coloquei a transparencia na cor Cinza médio ,mas não funciona a transparencia

<h3>Simulador</h3>
<p>simulador-de-exteriores</p>
 <h4>Alterar Cor da Janela:</h4>
<div class="swatch">
 <a rel="255,255,255" href="#tt-mask" title="White">White</a>
 <a rel="32,223,95" href="#tt-mask" title="Green">Green</a>
 <a rel="255,211,8" href="#tt-mask" title="Yellow">Yellow</a>
 <a rel="255,101,8" href="#tt-mask" title="Orange">Orange</a>
 <a rel="16,200,255" href="#tt-mask" title="Blue">Blue</a>
 <a rel="142,8,255" href="#tt-mask" title="Purple">Purple</a>
 <a rel="245,25,45" href="#tt-mask" title="Red">Red</a>
</div>
<h4>Alterar Cor dos Vidros:</h4>
<div class="swatch">
 <a rel="255,255,255" href="#logo-mask" title="White">White</a>
 <a rel="32,223,95" href="#logo-mask" title="Green">Green<</a>
 <a rel="255,211,8" href="#logo-mask" title="Yellow">Yellow<</a>
 <a rel="255,101,8" href="#logo-mask" title="Orange">Orange</a>
 <a rel="16,200,255" href="#logo-mask" title="Blue">Blue</a>
 <a rel="142,8,255" href="#logo-mask" title="Purple">Purple</a>
 <a rel="220,220,220,0.1" href="#logo-mask" title="Cinza médio">Cinza médio</a>
</div>
</div>
</div>

Edited by rodrigolfm

Share this post


Link to post
Share on other sites
2100928

Tenta alterar para:

<a rel="rgba(32,223,95,0.2)" href="#logo-mask" title="Green">Green<</a>


André Almeida

Programação Web

Design de Comunicação

Web Marketing

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.