Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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.

.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

De modo a ter:

1.397

E lembrando que o número 7 logo iria virar para o 6, com a animação do TTimer e as imagens intermediárias da virada da placa.

Compartilhar este post


Link para o post
Compartilhar em outros 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)

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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)

Compartilhar este post


Link para o post
Compartilhar em outros 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!

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por 4Unknow
      Boa tarde galera, vamos lá.
      Eu tenho uma plataforma de forum chamada Invision Power Servidor. IPS.

      E nela tenho todo acesso ao código fonte.
      Porém estou com um baita problema, talvez por que eu não entenda.

      No fórum existe um sistema de ranking onde você pode enviar imagens para esse ranking.
      Porém a imagem que eu estou enviando tem as dimensões de 184x100 porém depois que faço o upload, a plataforma mostra com dimensões menores  140x76
      conforme mostra imagem abaixo:
       


      Sendo que as imagens dos grupos como mostra ali "Administrator" e "Founder" estão em um tamanho maior.
      Eu encontrei no código dele o caminho dessa imagem do ranking:

      Se eu remover esse código
       
      {{elseif $comment->author()->rank['title'] && $comment->author()->member_id}} <li class='ipsType_break'>{$comment->author()->rank['title']}</li> {{endif}} {{if $comment->author()->rank['image'] && $comment->author()->member_id}} <li>{$comment->author()->rank['image']|raw}</li> {{endif}} O imagem do raking somem, mas eu não sei como fazer para a imagem ficar do tamanho que estou enviando.

      Se alguém puder me ajudar, ficaria grato.

      obrigado.
    • Por alexandre_xto
      Bom dia amigos, este é meu primeiro post, espero que consiga lhes passar meu problema
      Eu possuo várias imagens de vários tamanhos e dimensões.
      De cada uma quero realizar uma copia quadrada.
      por exemplo, se a imagem  tiver 800x600 quero criar uma 800x800, esse 200 a mais de lagura quero que fique branco sem esticar as fotos.
      Se tenho uma foto 300x600 quero que ela fique com 600x600.
      O Script deve identificar se ela é mais alta ou mais baixa e criar uma cópia baseando-se no que for maior e deve fazer isso sem distorcer a imagem.
      Se for colocado uma 1500x300 ela deve sair 1500x1500, a diferença de 1200 a mais deve ser branca.

    • Por asacap1000
      Salve galera. estou com uma zica aqui e não vai.
      Tenho um servidor WEB final IP final 120 neste servidor eu acesso um banco de dados de outro servidor 122, tem uma tabela com fotos e precisaria mostrar estas fotos na intranet. porém ele me mostra o caminho mas não mostra a imagem.
       
      Na Tabela está sendo salvo desta forma:
      Z:/Avarias/FOTOS/Alfandegado/2020/01.%20JANEIRO/14.01.2020/AVARIA%20CLIENTE%20CN=%20191234%20(2).JPG
       
      Chamei ele na tela desta forma:
      <?php ociexecute($stmt2,OCI_DEFAULT); while ($row = oci_fetch_object($stmt2)) { $string = OCIResult ($stmt2 ,1); ///link da avaria $avaria = OCIResult ($stmt2 ,2); ///titulo da avaria ?> <a href="<?=$string ?>" width="20%" height="30%" data-lightbox="gallery" > <button type="button" class="btn btn-dark active" data-toggle="modal" data-target="#modalExemplo"> <img src="<?=$string?>" width="160" height="100" class="rounded" title="<?=$avaria?>"> <br> </button> Na tela aparece desta forma:

       
      Se eu clicar na imagem fica assim apenas carregando:
       

       
      Se eu mandar abrir em nova guia a imagem aparece essa mensagem:

      Se eu copiar o link com botão direito e abrir no navegador ela abre normalmente.
       
      Ah lembrando que são tres servidores 120 web, 122 banco de dados, 128 as fotos onde salva como mapeamento Z://
      Alguem teria alguma idéia de como chamar estas fotos???
       
    • Por kikekun
      Olá!
      Eu queria fazer um criador de personagens para colocar na web, e tomei como base este código aqui: https://codepen.io/kristenmay/pen/kkkdBr pra fazer em javascript, mas ainda ta limitado pro que eu quero.
      Preciso de um botão que altere mais de uma imagem ao mesmo tempo (por exemplo: pra fazer com que duas imagens de cabelo apareçam ao mesmo tempo, uma na camada da frente, outra na de trás);  um botão para alterar as cores das imagens (até consegui colocar essa barra de HUE, mas ela só muda a cor da primeira imagem, e quando passa, volta pro padrão (esse vermelho que coloquei em todas pra facilitar). mas o ideal mesmo seria um botão especifico pra o tipo de imagem que esteja sendo mudada, por exemplo... o de cabelos mudaria a cor da imagem entre moreno; castanho claro; castanho escuro; branco; loiro claro; loiro escuro; e ruivo... já o botão de cor da pele mudaria entre branco; pardo; asiatico e negro); e um botão de download para as pessoas baixarem seu personagem criado = P Da pra fazer isso? como eu faço? xD (posso tentar postar o codigo em algum lugar se precisar)

      Ta assim:

    • Por 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
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.