Ajuda para Criar uma Tela

Theotokos · July 30, 2014

Bom Dia Pessoal!!!

Preciso criar uma tela com entrada dos dados conforme a imagem e indicando ainda qual a direção que foi desenhado a senha.

Alguém ai já vez algo deste tipo ou tem ideia de como posso fazer?

Em Cristo e amor de Maria,

Rone

sambomb · July 30, 2014

Imaginei com vários bitmaps com transparência sobrepostos.
Para identificar a ordem pode considerar uma string.

Exemplo:

123
456
789

Se mover do 1 para o 5 ( conforme a imagem vai salvando na string )
cString += "1"
cString += "5"

etc...

Faz uma verificação tipo a que tem no Control.prg para detectar ser o mouse passou por cima e vai adicionando na string e atualizando a imagem, o que não sei como poderia fazer é a parte de "arrastar" aquela barra com base no último ponto.
Para fazer dessa forma ae acho que precisaria de 9! ( 9x8x7...x3x2x1) imagens para cobrir todas as combinações possíveis.

emotta · July 30, 2014

Veja o LINES.PRG da pasta SAMPLES.... Ele pode te dar uma luz... Compile e saia clicando na window, ele vai fazendo as linhas de acordo com as coordenadas clicadas... No meu fiz umas mudanças no código, é este, pode pode testar tb...

// Drawing lines and some management colors

#include "FiveWin.ch"

//----------------------------------------------------------------------------//

static aPoints, nCount, nColor := 0, oWnd

function U_mTESTE()

   aPoints := Array( 1000 )
   nCount  := 0
   
   DEFINE DIALOG oWnd FROM 1, 1 TO 30, 50 TITLE OemToAnsi( "FiveWin - Click the mouse over the window" ) 

   oWnd:bLClicked := { | y, x, flags | MyClick( y, x ) }
   oWnd:bPainted  := { || MiPaint() }
   
   ACTIVATE DIALOG oWnd

return 0

//----------------------------------------------------------------------------//

FUNCTION MyClick( x, y )

   aPoints[ ++nCount ] := { y, x }

   DrawLine( x, y )
   RETURN

//----------------------------------------------------------------------------//

FUNCTION DrawLine( x, y )
   LOCAL n, hPen, hOldPen

   oWnd:GetDc()
   hPen := CreatePen( 0, 1, nColor )
   hOldPen := SelectObject( oWnd:hDc, hPen )

   for n := 1 to nCount - 1
      MoveTo( oWnd:hDC, aPoints[ n, 1 ], aPoints[ n, 2 ] )
      LineTo( oWnd:hDC, y, x )
   next

   SelectObject( oWnd:hDc, hOldPen )
   DeleteObject( hPen )
   oWnd:ReleaseDc()
   RETURN

//----------------------------------------------------------------------------//

FUNCTION MiPaint()
   LOCAL n
   for n := 1 to nCount
      DrawLine( aPoints[n, 2], aPoints[n, 1] )
   next
   RETURN

Theotokos · July 30, 2014

Vlw Pessoal, vou testar estas dicas....

oribeiro · July 30, 2014

Você vai precisar desse comando:

oBmp:bMMoved = { || msginfo(1) }

Quando o usuário passar o mouse sobre o seu bitmap você irá atribuir um número a ele e compor a senha.

Posta o programa aqui depois. risos

oribeiro · July 30, 2014

Para você começar a brincadeira:

Rode na pasta \FWH\SAMPLES...

#include "FiveWin.ch"

function Main()
   Local oDlg, oBmp[9], cSen:=""
   DEFINE DIALOG oDlg FROM 0,0 TO 160,160 COLOR CLR_HGRAY,CLR_HGRAY STYLE NOR(WS_POPUPWINDOW) PIXEL
   @ 010,010 BITMAP oBmp[1] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 010,035 BITMAP oBmp[2] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 010,060 BITMAP oBmp[3] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 035,010 BITMAP oBmp[4] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 035,035 BITMAP oBmp[5] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 035,060 BITMAP oBmp[6] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 060,010 BITMAP oBmp[7] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 060,035 BITMAP oBmp[8] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 060,060 BITMAP oBmp[9] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   oBmp[1]:bMMoved = { || (cSen:=cSen+iif(Right(cSen,1)#"1","1",""),iif(Len(cSen)=6,oDlg:End(),)) }
   oBmp[2]:bMMoved = { || (cSen:=cSen+iif(Right(cSen,1)#"2","2",""),iif(Len(cSen)=6,oDlg:End(),)) }
   oBmp[3]:bMMoved = { || (cSen:=cSen+iif(Right(cSen,1)#"3","3",""),iif(Len(cSen)=6,oDlg:End(),)) }
   oBmp[4]:bMMoved = { || (cSen:=cSen+iif(Right(cSen,1)#"4","4",""),iif(Len(cSen)=6,oDlg:End(),)) }
   oBmp[5]:bMMoved = { || (cSen:=cSen+iif(Right(cSen,1)#"5","5",""),iif(Len(cSen)=6,oDlg:End(),)) }
   oBmp[6]:bMMoved = { || (cSen:=cSen+iif(Right(cSen,1)#"6","6",""),iif(Len(cSen)=6,oDlg:End(),)) }
   oBmp[7]:bMMoved = { || (cSen:=cSen+iif(Right(cSen,1)#"7","7",""),iif(Len(cSen)=6,oDlg:End(),)) }
   oBmp[8]:bMMoved = { || (cSen:=cSen+iif(Right(cSen,1)#"8","8",""),iif(Len(cSen)=6,oDlg:End(),)) }
   oBmp[9]:bMMoved = { || (cSen:=cSen+iif(Right(cSen,1)#"9","9",""),iif(Len(cSen)=6,oDlg:End(),)) }
   ACTIVATE DIALOG oDlg CENTERED RESIZE16
   Msginfo(cSen)
Return nil

kapiaba · July 30, 2014

Aqui também tem uma idéia legal:

http://fivetechsupport.com/forums/viewtopic.php?f=3&t=15917

Tem um .zip para baixar e testar.

abs

oribeiro · July 30, 2014

Função melhorada: Agora ela passa uma linha pelos pontos

#include "FiveWin.ch"

static aPoints, nCount, nColor:=0, oDlg

function Main()
   Local oBmp[9], cSen:="", nTam:=8
   aPoints := Array( 1000 )
   nCount  := 0
   DEFINE DIALOG oDlg FROM 0,0 TO 160,160 COLOR CLR_HGRAY,CLR_HGRAY STYLE NOR(WS_POPUPWINDOW) PIXEL
   @ 010,010 BITMAP oBmp[1] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 010,035 BITMAP oBmp[2] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 010,060 BITMAP oBmp[3] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 035,010 BITMAP oBmp[4] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 035,035 BITMAP oBmp[5] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 035,060 BITMAP oBmp[6] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 060,010 BITMAP oBmp[7] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 060,035 BITMAP oBmp[8] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   @ 060,060 BITMAP oBmp[9] FILE "..\Bitmaps\fdem7.bmp" SIZE 9,9 NOBORDER PIXEL of oDlg
   oBmp[1]:bMMoved = { || (iif(Right(cSen,1)#"1",(cSen:=cSen+"1",cursorhand(),Click(030,030)),cursorarrow()),iif(Len(cSen)=nTam,oDlg:End(),)) }
   oBmp[2]:bMMoved = { || (iif(Right(cSen,1)#"2",(cSen:=cSen+"2",cursorhand(),Click(030,080)),cursorarrow()),iif(Len(cSen)=nTam,oDlg:End(),)) }
   oBmp[3]:bMMoved = { || (iif(Right(cSen,1)#"3",(cSen:=cSen+"3",cursorhand(),Click(030,130)),cursorarrow()),iif(Len(cSen)=nTam,oDlg:End(),)) }
   oBmp[4]:bMMoved = { || (iif(Right(cSen,1)#"4",(cSen:=cSen+"4",cursorhand(),Click(080,030)),cursorarrow()),iif(Len(cSen)=nTam,oDlg:End(),)) }
   oBmp[5]:bMMoved = { || (iif(Right(cSen,1)#"5",(cSen:=cSen+"5",cursorhand(),Click(080,080)),cursorarrow()),iif(Len(cSen)=nTam,oDlg:End(),)) }
   oBmp[6]:bMMoved = { || (iif(Right(cSen,1)#"6",(cSen:=cSen+"6",cursorhand(),Click(080,130)),cursorarrow()),iif(Len(cSen)=nTam,oDlg:End(),)) }
   oBmp[7]:bMMoved = { || (iif(Right(cSen,1)#"7",(cSen:=cSen+"7",cursorhand(),Click(130,030)),cursorarrow()),iif(Len(cSen)=nTam,oDlg:End(),)) }
   oBmp[8]:bMMoved = { || (iif(Right(cSen,1)#"8",(cSen:=cSen+"8",cursorhand(),Click(130,080)),cursorarrow()),iif(Len(cSen)=nTam,oDlg:End(),)) }
   oBmp[9]:bMMoved = { || (iif(Right(cSen,1)#"9",(cSen:=cSen+"9",cursorhand(),Click(130,130)),cursorarrow()),iif(Len(cSen)=nTam,oDlg:End(),)) }
   ACTIVATE DIALOG oDlg CENTERED RESIZE16
   Msginfo(cSen)
Return nil

STATIC PROCEDURE Click( x, y )
   aPoints[ ++nCount ] := { y, x }
   DrawLine( x, y )
   RETURN

STATIC PROCEDURE DrawLine( x, y )
   LOCAL n:=1, hPen, hOldPen
   oDlg:GetDc()
   hPen := CreatePen( 0, 4, nColor )
   hOldPen := SelectObject( oDlg:hDc, hPen )
   n := iif(nCount>2, nCount-1, n)
// for n := 1 to nCount - 1
      MoveTo( oDlg:hDC, aPoints[ n, 1 ], aPoints[ n, 2 ] )
      LineTo( oDlg:hDC, y, x )
// next
   SelectObject( oDlg:hDc, hOldPen )
   DeleteObject( hPen )
   oDlg:ReleaseDc()
   RETURN

STATIC PROCEDURE MiPaint()
   LOCAL n
   for n := 1 to nCount
      DrawLine( aPoints[n, 2], aPoints[n, 1] )
   next
   RETURN

Theotokos · July 31, 2014

Vlw! Oscar!!! Muitíssimo obrigado!!!

É isso ai mesmo que estava precisando, agora só adaptar a minha rotina e Deus seja Louvado!!!

oribeiro · July 31, 2014

Se fizer alguma melhoria, não se esqueça de postar aqui.

Um abraço,

emotta · July 31, 2014

ficou show de bola mesmo... parabens... qdo precisar vou buscar aqui... vlw

Se fizer alguma melhoria, não se esqueça de postar aqui.

Um abraço,

evertonlb · July 31, 2014

Cara.. ficou muito legal, parabéns! compilei ontem a noite mesmo e coloquei uns ícones de jóias, troquei a cores e ai ficou legal...

no controle interno dá pra usar números mas no visual ficou as jóias coloridas... ai o usuário pode "guardar" a sequencia de cores

ou a posição...

Att.

Everton

aferra · July 31, 2014

Parabens....agora só falta ser em touch, rsrsrsrsrs

emotta · July 31, 2014

é touch... eu testei em tela touch

Parabens....agora só falta ser em touch, rsrsrsrsrs

aferra · July 31, 2014

legal, então não falta nada.

evertonlb · July 31, 2014

Cara.. o fato de "ser" touch não é uma função determinada pela tela touch?

Att.

Everton

emotta · August 1, 2014

Touch apenas "simula" um mouse... Por exemplo, se vc arrastar o dedo na tela touch é como se clicar com o mouse, ficar com o botao apertado e movimenta-lo...

apenas dar um toque simula um clique... duas vezes, duplo clique... etc...

para a aplicação não muda nada... o que se faz é otimizar uma rotina para uso touch, como por exemplo, deixar botões maiores, etc...

vagner · August 4, 2014

Olá, Encontrei algumas falhas, sendo que dá para passar do ponto 1 para o ponto 6 por exemplo ou do 2 para o 9, então teria que bloquear isso , mas de resto está legal

sambomb · August 4, 2014

Olá, Encontrei algumas falhas, sendo que dá para passar do ponto 1 para o ponto 6 por exemplo ou do 2 para o 9, então teria que bloquear isso , mas de resto está legal

O normal é poder ligar qualquer pontos menos repetidos, exemplo:

1397 é válido

123652 não é porque repete o 2

vagner · August 4, 2014

Olá Sambomb,

Mas aí não ficaria como nos aparelhos "Android" ou seja, vc estaria passando do 1 sobre o 2 para poder ir ao 3 e o interessante seria não fazer uma "curva" e sim em linhas , quanto a passar mais de uma vez no número (números já marcados), não vejo problema é até bom pois poderia ter mais dígitos para a senha (creio que seja esse o intuito) e poderia ver se já tivesse passados por ele mudar a cor da linha

P.S.: Ainda não consigo colocar nada aqui , nem mesmo responder por quote

sambomb · August 5, 2014

Vagner, minha experiência maior é com iOs ao invés de Android e é assim que funciona...
Na verdade isso é irrelevante vai depender apenas do programador que vai desenvolver isso.

Ajuda para Criar uma Tela

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation