Jump to content
Gabarito

Contagem regressiva com uso de imagens - [RESOLVIDO]

Recommended Posts

Olá.

Já procurei bastante, mas ainda não achei um código que possa me adiantar ou dar ideia de como fazer um relógio digital numa contagem regressiva.
Encontrei uns arquivos GIF que possam ajudar a explicar o desafio:

giphy.gif

Eu já tenho o código que faz a contagem regressiva a partir de uma data dada pelo usuário.
O que eu teria que fazer agora é associar cada dígito da contagem a uma imagem separada.
Tentei ajustar imagens GIFs que se adaptassem ao tempo real, mas sempre ocorre um pequeno erro nas frações de segundo que se acumulam e levam a dar uma grande diferença num intervalo de tempo maior.
Portanto, pretendo criar uma forma de associar cada dígito de cada resultado a uma imagem diferente e fazer a ilusão do movimento de passagem da placa do exemplo acima.

Quando o meu resultado dá 300 minutos, eu teria que "quebrar" o 300 em "3", "0" e "0".
Depois, eu teria que associar o "3" a uma imagem que exiba o número 3. E assim por diante.
A animação eu mesmo faria. Já separei as imagens de cada um dos dígitos do exemplo acima em arquivos diferentes.
Encontrei uma pequena dificuldade porque a passagem de contagem regressiva é DIFERENTE da passagem de tempo crescente.
A passagem da imagem 2 para a imagem 1 é diferente do seu inverso.
A imagem 3 para a 2 também é e assim por diante.
Por isso, não pude aproveitar as imagens separadas do exemplo dado acima.
Tive que criar transições do 2 para o 1 no Photoshop.

Mas esse não é o problema. Isso eu já tenho.
O problema, e é esse o motivo desse tópico, é associar cada número da contagem em imagens diferentes.
Para fazer a animação das transições, vou usar um componente TTimer.

Portanto, o que apresento aos colegas é o desafio de fazer a associação entre número e arquivo de imagem.

No exemplo que eu dei, vou ter que pegar a centena 3 e associar à imagem "3".
Mas como saber que é uma centena?
Eu pensei em testar se o resultado atual é maior do que 100.

 

Código:
If resultado > 100 then begin
   If resultado - 100 = 1 then image1.Picture.LoadFromFile('arquivo1');
   If resultado - 100 = 2 then image1.Picture.LoadFromFile('arquivo2');
   ...
   If resultado - 100 = 9 then image1.Picture.LoadFromFile('arquivo9');
...
If resultado > 1000 then begin
   If resultado - 1000 = 1 then image1.Picture.LoadFromFile('arquivo1');

 



Mas aí eu começo a me embaralhar.
E como fazer com as dezenas dentro das centenas?
Tem que fazer um tratamento meio matemático para testar unidade, dezena, centena, milhar, etc...

Alguém poderia dar uma mãozinha aqui?


 

Eu trago aqui a forma como já está funcionando o programinha:

Cont_Reg.png

Esses números todos teriam que passar para placas que rolam no estilo da imagem GIF lá no começo do tópico.
Os segundos mudam a cada instante, claro, e isso é bem visível.

As placas teriam que rolar em números decrescentes.
A parte gráfica, eu acho que já sei como fazer, animação e tudo.
O tamanho do formulário teria que ser aumentado, claro.

O nó agora é o código para ligar cada número a um arquivo de imagem diferente.
Não entendo muito da coisa, mas seria o caso de usar um ImageList?

A bola está com vocês agora.

.

Share this post


Link to post
Share on other sites

Se fosse você eu faria usando  a IDE do CodeTyphon .Veja um exemplo que fiz especialmente para você.Tem componentes legais.

fiz um contador simples (500 ms).Cada display recebeu um nome (a,b,c)

procedure TForm1.Button1Click(Sender: TObject);
var cen,d,u:integer;
begin
for cen:=0 to 9 do
begin
  for d:=0 to 9 do
  begin
    for u:=0 to 9 do
    begin
      sleep(500);
      application.ProcessMessages;
      a.Value:=cen;
      b.Value:=d;
      c.Value:=u;
    end;
  end;
end;    

 

Aqui o codigo com contagem regressiva:

procedure TForm1.Button1Click(Sender: TObject);
var cen,d,u:integer;
begin
for cen:=9 downto 0 do
begin
  for d:=9 downto 0 do
  begin
    for u:=9 downto 0 do
    begin
      sleep(500);
      application.ProcessMessages;
      a.Value:=cen;
      b.Value:=d;
      c.Value:=u;
    end;
  end;
end;  

Screenshot_1.thumb.jpg.ad5ef5734a4842a8719fdcf7e98d7859.jpg

Visite meu blog

  • Gostei 1

Share this post


Link to post
Share on other sites

Ôpa!

Obrigado, Almir, por uma resposta assim tão rápida!

 

Mas eu não quero um contador digital.

Eu já tenho um contador numérico mesmo e ele me basta para informar os tempos.

O que eu gostaria era aperfeiçoar o layout e colocar aquele contador com placas que viram como num placar.

Para isso, eu teria que trabalhar com imagens e não com componentes.

O ideal também seria que fosse em Delphi: eu não tenho esse IDE Typhon.

Share this post


Link to post
Share on other sites

Rapaz, andei dando uma rápida olhada no seu blog e vi que só tem coisa interessante por lá.

Parabéns!

 

Edite o link de seu comentário onde tem "Veja o resultado aqui" porque está faltando um ":" e o navegador dá erro 404.

Share this post


Link to post
Share on other sites

O código de contagem é simples.O problema da imagem com transiçõ é que deve criar uma função para desenhar essas transições usando Tcanvas.Isso é mais questão de design do que programação em Si.

Poderia por dentro do laço For (u) um conjunto de carregamento de imagem do arquivo com várias transições.Mais isso fica complexo e pesado.

  • Gostei 1

Share this post


Link to post
Share on other sites

Acho que não precisa de TCanvas, não.

Eu pensei apenas em carregar a imagem de cada unidade para cada número com o componente Image mesmo.

Só isso.

O problema é conseguir associar cada número com suas unidades, dezenas, centenas, etc com arquivos de imagens diferentes.

Releia meu primeiro post.

Se o número de segundos num dado momento for 1.397, eu terei que ler esse número e colocar as imagens na ordem, para cada arquivo:

Imagem 1 na casa 5

Imagem (ponto) na casa 4

Imagem 3 na casa 3

Imagem 9 na casa 2

Imagem 7 na casa 1

Share this post


Link to post
Share on other sites
3 minutos atrás, Gabarito disse:

Acho que não precisa de TCanvas, não.

Eu pensei apenas em carregar a imagem de cada unidade para cada número com o componente Image mesmo.

Só isso.

O problema é conseguir associar cada número com suas unidades, dezenas, centenas, etc com arquivos de imagens diferentes.

Releia meu primeiro post.

Se o número de segundos num dado momento for 1.397, eu terei que ler esse número e colocar as imagens na ordem, para cada arquivo:

Imagem 1 na casa 5

Imagem (ponto) na casa 4

Imagem 3 na casa 3

Imagem 9 na casa 2

Imagem 7 na casa 1

 

 

3 minutos atrás, Gabarito disse:

 

 

Carregar imagem não é problema e é até fácil.O problema é a transição.Se for usar imagem de números estáticos isso fica fácil até demais.Basta dar nome aos arquivos de imagem com numeros:

"1.bmp" e carregar dentro do laço for(u) (como no exemplo acima)

imagem.picture.loadfromfile(inttostr( u) + '.bmp' )   ;

Depois basta seguir o modelo do meu codigo acima com o carregamento das 3 imagens no lugar do (a.value ,b.value , c.value)

  • Gostei 1

Share this post


Link to post
Share on other sites

Dei uma olhada no código agora.

Quem é a, b e c? Algum componente?

Como você começa o contador para atribuir valores a "cen", "d" e "u"?

Vamos supor que você tenha que iniciar a contagem em 1397.

 

Share this post


Link to post
Share on other sites

Almir, amigão, acabei de experimentar seu código.

E ele funciona muito bem!

Ao invés de usar o seu componentes a, b e c, eu usei simples TLabel.

Deu certo.

Eu não imaginei que fosse tão simples!

Vou ver agora como tratar as imagens.

 

Mais uma pergunta:

Como vou começar a contagem?

Você deu valor 9 às variáveis.

No meu caso, eu vou ter um número grandão, como na imagem do meu primeiro post.

Como quebrar o número a partir de uma variável que está mudando a cada segundo?

Lá no exemplo, o número de segundos é 41.756.271.

 

Isso está numa variável.

Vou ter que quebrar essa variável em unidades para atribuir a u, d, cen, mil, etc.

 

Como?

Share this post


Link to post
Share on other sites

Fiz exemplo com 3 casas decimais carregando do arquivo.Você poderá acrescentar a casa do milhar

Roda perfeito:

unit Unit1;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, FileUtil, TplRadioButtonUnit, TplCheckBoxUnit,
  TplSpinEditUnit, TplLCDLineUnit, TplLed7SegUnit, ECGroupCtrls, LedNumber,
  Forms, Controls, Graphics, Dialogs, StdCtrls, ExtCtrls;

type

  { TForm1 }

  TForm1 = class(TForm)
    a: TplLed7Seg;
    b: TplLed7Seg;
    Button1: TButton;
    c: TplLed7Seg;
    Edit1: TEdit;
    Image1: TImage;
    Image2: TImage;
    Image3: TImage;
    Label1: TLabel;
    procedure Button1Click(Sender: TObject);
    procedure FormShow(Sender: TObject);
  private
    { private declarations }
  public
    { public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.lfm}

{ TForm1 }

procedure TForm1.Button1Click(Sender: TObject);
var cen,d,u:integer;
   Lc,Ld,Lu:integer;//valores limitadores do inicio da contagem
begin
Lc:=strtoint( copy(edit1.text,1,1) );//centenas
Ld:=strtoint( copy(edit1.text,2,1) );//dezenas
Lu:=strtoint( copy(edit1.text,3,1) ); //unidades
for cen:=(Lc) downto 0 do
begin
  for d:=(Ld) downto 0 do
  begin
    for u:=(Lu) downto 0 do
    begin
      sleep(500);
      application.ProcessMessages;
      image1.Picture.LoadFromFile('c:\num\'+inttostr(cen)+'.bmp');
      image2.Picture.LoadFromFile('c:\num\'+inttostr(d)+'.bmp');
      image3.Picture.LoadFromFile('c:\num\'+inttostr(u)+'.bmp');
    end;
  end;
end;

end;

procedure TForm1.FormShow(Sender: TObject);
begin
  doublebuffered:=true;
end;

end.

Resultado

 

  • Gostei 1

Share this post


Link to post
Share on other sites

Almir, meu amigo, você é o mago dos códigos!

 

Mas eu teria mais umas perguntinhas antes de liberar o caríssimo colega.

 

Você botou uma diretiva que meu compilador não aceitou:

"Invalid compiler directive"

 

O que significa

{$mode objfpc}{$H+}

?

 

 

Só rodou depois que eu tirei a diretiva.

Share this post


Link to post
Share on other sites

Outra coisa: eu vou pegar uma variável que está mudando o tempo todo, a do tempo restante até uma determinada data.

Como jogar essa variável no seu código?

Veja o exemplo que eu dei lá em cima:


Cont_Reg.png

 

Veja que tem uma data fixa.

Eu tenho que jogar as variáveis de segundos, minutos, etc, que estão mudando, haja visto que o tempo muda e a data é fixa, dentro do seu código.

Como?

Share this post


Link to post
Share on other sites

Esqueci de dizer, mas só para reforçar: aquele 41.756.271 já não é mais aquele.

Os segundos já mudaram enquanto a gente conversava.

Ou seja, essa variável está em constante atualização.

Na hora que eu rodar o programa, ele tem que pegar a variável e identificar seus números para preencher os valores do seu código.

Share this post


Link to post
Share on other sites
5 minutos atrás, Gabarito disse:

Almir, meu amigo, você é o mago dos códigos!

 

Mas eu teria mais umas perguntinhas antes de liberar o caríssimo colega.

 

Você botou uma diretiva que meu compilador não aceitou:

"Invalid compiler directive"

 

O que significa


{$mode objfpc}{$H+}

?

 

 

Só rodou depois que eu tirei a diretiva.

A diretiva é do compilador free Pascal no modo Object PASCAL FPC (não estou usando modo Delphi)

Você vai pegar o label onde se mostra os tempo dos segundos da mesma forma que o codigo exemplo pega os valor do Edit1 (use a função copy)

  • Gostei 1

Share this post


Link to post
Share on other sites

Mas pensando melhor, acho que isso é fácil.

Basta eu usar o copy(variável, 1, 1) etc e resolver.

 

Podemos dar o tópico como RESOLVIDO.

 

Acho até que é um recorde, uma questão resolvida em menos de uma hora de postada.

 

:smiley::smiley::smiley:

 

Valeu, amigão!

Share this post


Link to post
Share on other sites

sua label tem esse valor 41.756.271

 

Casa_dos_dezmilhoes : =copy(label.caption , 1, 1); //pegou o primeiro caractere "4"

Casa_dos_unidmilhoes : =copy(label.caption , 2, 1); //pegou o segundo caractere "1"

(o importante é considerar a casa decimal e ignorar o valor em si)

você não deve se preocupar com sua aplicação.Deve entender como fiz o codigo de exemplo.Deve criar as variaveis para cada casa decimal.

  • Gostei 1

Share this post


Link to post
Share on other sites

sua label tem esse valor 41.756.271

 

Casa_dos_dezmilhoes : =copy(label.caption , 1, 1); //pegou o primeiro caractere "4"

Casa_dos_unidmilhoes : =copy(label.caption , 2, 1); //pegou o segundo caractere "1"

(o importante é considerar a casa decimal e ignorar o valor em si)

você não deve se preocupar com sua aplicação.Deve entender como fiz o codigo de exemplo.Deve criar as variaveis para cada casa decimal.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Felipe Garciax
      Ola,
       
      Estou com o seguinte problema, no formulario principal do meu projeto tenho um SplitView e um Image em AlClient com uma imagem em 193 kb, ao abrir e fechar o SplitView em execucao a imagem PISCA, ja usei no OBJECT INSPECTOR o DoubleBuffered em TRUE tanto para o form quanto para o SplitView e o problema persiste, ja fiz o teste no codigo tanto para o EVENTO OnShow e OnCreat:
      DoubleBuffered :=True;  e nenhum resultado... Help Me
    • By alecram28
      Preciso criar um album de fotos que ao clicar na imagem apareça uma descrição, e ao clicar novamente na imagem a descrição desapareça. 
      Consigo fazer aparecer o texto mas não consigo oculta-lo depois de clicar novamente.
      Outra duvida, coloquei a div texto mas a formatação css que coloco nao aparece.
       
      HTML:
        <body> <h1>ÁLBUM DE FOTOS</h1>   <div class="album"> <img src="foto1.jpg" onclick="mostrarTexto('Descriçao1!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto2.jpg" onclick="mostrarTexto('terbrbrb!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto3.jpg" onclick="mostrarTexto('aaaaaaa!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto4.jpg"onclick="mostrarTexto('bbbbbbbb')" max width="300" max height="300"> </div> <div class="album"> <img src="foto5.jpg" onclick="mostrarTexto('cccccccc')" max width="300" max height="300"> </div>   <div class="album"> <img src="foto6.jpg" onclick="mostrarTexto('dddddddd')" max width="300" max height="300"> </div> <div id= "texto"></div> <div class="album"> <img src="foto7.jpg" onclick="mostrarTexto('eeeeeee')" max width="300" max height="300"> </div> <div class="album"> <img src="foto8.jpg" onclick="mostrarTexto('fffffff')" max width="300" max height="300"> </div> <div class="album"> <img src="foto9.jpg" onclick="mostrarTexto('ggggggg')" max width="300" max height="300"> </div>     </body>  
      CSS:
      html { font-family: Arial, Helvetica, sans-serif   }   h1{ font-family: Arial, Helvetica, sans-serif; color: rgb(117, 170, 231); font-size:2rem; text-align: left; }   .album{ float: left; width: 500px; }   .texto{ font-family: Arial, Helvetica, sans-serif; font-size:2rem; color: rgb(92, 192, 92);   }  
      JS:
      function mostrarTexto(msg) { texto.innerHTML= msg;   }
    • By Mauro O
      Prezados preciso de um elemento css com borda como segue o anexo png

    • By João Fernandes dos Santos
      Pessoa, boa tarde.
       
       
        Estou tentando carregar uma imagem em uma coluna do datagridview porém não estou conseguindo.
       
      1 - a imagem esta gravada direto no banco como binário.
       
      2 - quando eu faço um select no banco e jogo em uma coluna sem ser do tipo IMAGEM ele traz a imagem carrega porém ela vem com o tamanho muito grande, por isso a necessidade de jogar a imagem na nova coluna criada.
       
      o que eu fiz carreguei a grid normente com DATASOURCE, e criei manualmente no design essa nova coluna do tipo DataGridViewImageColumn 
       
      porém não consigo fazer com que esse objeto receba o binário do select do banco e me mostrar a imagem.
       
      ajuda ai pessoal........
       
    • By kutmania
      Olá, amigos! Estou desenvolvendo uma plataforma de loja virtual onde cada cliente poderá escolher um template diferente para a sua loja. Cada template terá imagens com tamanhos diferentes e o cliente poderá mudar o template quando bem quiser.
       
      Daí preciso de uma solução para as imagens dos produtos, banners etc. Ou seja, não acho viável gerar miniaturas para todos os templates possíveis. Uma solução que pensei foi usar a biblioteca PHP para redimensionar a imagem. Estilo o que este link faz:
       
      https://cdn.awsli.com.br/380x380/230/230436/produto/16603367/5f23799375.jpg
       
      percebam que se eu alterar os parâmetros de 380x380 para 370x370 o tamanho da imagem muda. Isso resolveria o meu problema. Mas estou preocupado com o processamento que isso vai ter do lado do servidor. Pensei na possibilidade de usar algum sistema de caching para fazer esse redimensionamento apenas uma vez. Enfim.. estou sem saber qual a melhor solução para o meu problema e se realmente essa seria uma solução.
       
      alguém teria alguma luz nesse sentido?
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.