PC Toledo

Em homenagem a Paulo Cesar Toledo
https://pctoledo.org/

HWGUI - Criando tela com visual FLAT

https://pctoledo.org/viewtopic.php?t=24920

Página 1 de 2

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 00:05
por Fernando queiroz
Após algum tempo de trabalho finalmente entendi como faze gradiente e algumas coisas a mais
login.jpg

Código: Selecionar todos

LOCAL oDlg ;
	, oSenha;
	, oOperador ;
	, oBitmap1;
	, cSenha:="";
	, cOperador:='Usuário' ;
	, oLabel1, oLabel2;
	, oLine1, oLine2;
	, oButton1 ;
	, oPanel1;
	, oPhantom;
	, oPhantom1;
	, OK_SENHA := .F.

	INIT DIALOG oDlg TITLE "SGC - SISTEMA DE GESTÃO DE COMÉRCIO"     ;
		ICON HIcon():Addresource('SGC_ICON') ;
		AT 0, 0 SIZE 657,330 CLIPPER;
		STYLE WS_POPUP; 
		BACKCOLOR 0

	@ 260,80 EDITBOX oPhantom CAPTION "" SIZE 0,0

	@ 0,0 PANEL oPanel1 SIZE 250,330 ;
		ON PAINT {|| oPanel1_onPaint( oPanel1 ) }


	@ 260,12 SAY oLabel1 CAPTION "LOGIN"  SIZE 361,44 ;
		STYLE SS_CENTER +DT_VCENTER+DT_SINGLELINE;
		TRANSPARENT COLOR 16777215  BACKCOLOR 0 ;
		FONT HFont():Add( '',0,-29,400,,,)

	@ 27,61 BITMAP oBitmap1  SHOW 'USUARIO_SENHA' FROM RESOURCE STRETCH 0 SIZE 190,190

	@ 27,250 SAY oLabel2 CAPTION "SGC - v8.0" SIZE 190,39 ;
		STYLE SS_CENTER +DT_VCENTER+DT_SINGLELINE;
		TRANSPARENT COLOR 16777215  BACKCOLOR 13400576;
		FONT HFont():Add( '',0,-32,700,,,)


	@ 260,95 EDITBOX oOperador CAPTION 'Usuário' SIZE 361,28  NOBORDER ;     
			ON GetFocus  {|| oOperador:SetText("") , oOperador:Refresh() };
			ON LostFocus {|| cOperador:=oOperador:GetText()  };
			FONT HFont():Add( '',0,-19,400,,,);
			COLOR 12632256  BACKCOLOR 0

	@ 260,123 LINE oLine1 LENGTH 361 

	@ 260,146 EDITBOX oSenha CAPTION "123456789" SIZE 361,28 PASSWORD NOBORDER ;
			ON GetFocus  {|| oSenha:SetText("") , oSenha:Refresh() };
			ON LostFocus {|| cSenha:=oSenha:GetText()  };
			FONT HFont():Add( '',0,-19,400,,,);
			COLOR 12632256  BACKCOLOR 0 

	@ 260,170 EDITBOX oPhantom1 CAPTION "" SIZE 0,0;
			ON GetFocus  {|| OK_SENHA:= ::SENHA_LOGIN_VALIDA( UPPER(@cOperador), UPPER(@cSenha) ) , hwg_Enddialog()  }


	@ 260,174 LINE oLine2 LENGTH 361 

	@ 260,250 OWNERBUTTON oButton1 SIZE 361,40 ;
			TEXT 'Acesso' COLOR 16777215  ;
			COORDINATES 0, 0, 0, 0 ;
			ON CLICK {|| OK_SENHA:= ::SENHA_LOGIN_VALIDA( UPPER(@cOperador), UPPER(@cSenha) ) , hwg_Enddialog() }
			oButton1:aStyle := { HStyle():New( {2631720}, 1,, 1 ), HStyle():New( {1842204}, 2,, 1 ), HStyle():New( {04210752}, 1,, 2, 16777215 ) }


	ACTIVATE DIALOG oDlg CENTER

RETURN OK_SENHA
	


STATIC FUNCTION oPanel1_onPaint( oPanel1 )
	Local pps, hDC
	   pps := hwg_Definepaintstru()
	   hDC := hwg_Beginpaint( oPanel1:handle, pps )
	   hwg_drawGradient( hDC, 0, 0, 250, 330, 4, {0, 13400576} )
	   hwg_Endpaint( oPanel1:handle, pps )
  RETURN .T.
Algumas coisas ficaram pendentes :
Gostaria de colocar no lugar das bolinhas da senha a CAPTION 'Senha' só nao sei como fazer para mudar para PASSWORD em tempo de execução

Também não consegui mudar a PICT para pegar Somente maiusculas em tempo de Execução no USUARIO

se alguem tiver alguma dica Manda ver

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 07:30
por Itamar M. Lins Jr.
Olá!

Código: Selecionar todos

#include "hwgui.ch"
Function Gradients
   Local oDlg, oPanel

   INIT DIALOG oDlg TITLE "Gradients" ;
         AT 0,0 SIZE 1000,500
     
   @ 0,0 PANEL oPanel SIZE 1000,450 STYLE SS_OWNERDRAW ON PAINT {||PPanel(oPanel)}

   ACTIVATE DIALOG oDlg CENTER

Return Nil

Function PPanel( oPanel )
   Local pps, hDC

   pps := hwg_Definepaintstru()
   hDC := hwg_Beginpaint( oPanel:handle, pps )

   hwg_drawGradient( hDC, 50, 20, 100, 160, 1, {0xFF, 0xFF00, 0xFF0000} )
   hwg_drawGradient( hDC, 150, 20, 200, 160, 2, {0xFF, 0xFF00, 0xFF0000}, {0.1, 0.6, 0.9} )

   hwg_drawGradient( hDC, 250, 20, 400, 70, 3, {0xFFFFFF, 0x0} )
   hwg_drawGradient( hDC, 250, 110, 400, 160, 4, {0xFFFFFF, 0x0} )

   hwg_drawGradient( hDC, 450, 20, 700, 160, 3, {0xFFFFFF, 0x3300, 0xFFFFFF}, {0, 0.8, 1} )

   hwg_drawGradient( hDC, 730, 20, 900, 76, 1,  { hwg_ColorC2N("7FA40E"), hwg_ColorC2N("B7EF8E")},, {16,16,16,16} )
   hwg_drawGradient( hDC, 730, 92, 900, 148, 1, { hwg_ColorC2N("255779"), hwg_ColorC2N("3E7492"), hwg_ColorC2N("A6C0CD")},, {16,16,16,16} )
   
   hwg_drawGradient( hDC, 50, 180, 149, 450, 1, {0x99,0,0x9900,0,0x990000,0,0x999900,0,0x9999,0,0x990099}, {0,0.05,0.1,0.15,0.2,0.25,0.3,0.35,0.4,0.9,1} )   
   hwg_drawGradient( hDC, 200,180, 299, 450, 2, {0x99,0,0x9900,0,0x990000,0,0x999900,0,0x9999,0,0x990099}, {0,0.05,0.1,0.15,0.2,0.25,0.3,0.35,0.4,0.9,1} )   

   hwg_drawGradient( hDC, 350, 180, 949, 280, 3, {0x99,0,0x9900,0,0x990000,0,0x999900,0,0x9999,0,0x990099}, {0,0.05,0.1,0.15,0.2,0.25,0.3,0.35,0.4,0.9,1} )
   hwg_drawGradient( hDC, 350, 300, 949, 400, 4, {0x99,0,0x9900,0,0x990000,0,0x999900,0,0x9999,0,0x990099}, {0,0.05,0.1,0.15,0.2,0.25,0.3,0.35,0.4,0.9,1} )
   hwg_drawGradient( hDC, 350, 420, 949, 450, 4, {0x99,0,0x9900,0,0x990000,0,0x999900,0,0x9999,0,0x990099}, {0.3,0.35,0.4,0.45,0.5,0.55,0.6,0.65,0.7,0.75,0.8} )
   
   hwg_Endpaint( oPanel:handle, pps )
Sem título.png
No tutor tem alguns exemplos.

Saudações,
Itamar M. Lins Jr.

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 11:41
por asimoes
Acho muito maneiro esses recursos da HwGui

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 11:42
por asimoes
Alguém poderia explicar porque WS_TABSTOP não funciona com OWNERBUTTON?

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 11:45
por asimoes
Agora que consegui entender como funciona essas funções de gradiente tanto da hwgui e bostaurus dá pra fazer umas perfumarias bem legais, bostaurus eu adicionei a hwgui

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 14:05
por JoséQuintas
asimoes escreveu:Acho muito maneiro esses recursos da HwGui
asimoes escreveu:Agora que consegui entender como funciona essas funções de gradiente tanto da hwgui e bostaurus dá pra fazer umas perfumarias bem legais, bostaurus eu adicionei a hwgui
Isso tem a ver com o que já comentei, geralmente a janela mãe assume o controle, e entra o default do Windows.
Ao usar o estilo SS_OWNER, o controle fica por conta do usuário/lib.
É exatamente igual acontece na GTWVG, desenho "manual" e ficar repintando.

Fico até imaginando se essa HDC não é uma espécie de imagem, algo como um savescreen que o gerenciamento do Windows apenas coloca lá como papel de parede num restorescreen.
Mas não deve ser, senão não precisaria ficar repintando.

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 16:09
por JoséQuintas
asimoes escreveu:Alguém poderia explicar porque WS_TABSTOP não funciona com OWNERBUTTON?
Talvez esqueceram de implementar isso, ou no ownerbutton ou na dialog.

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 16:44
por asimoes
ButtonEx não tem o novo estilo visual tem?

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 19:48
por Itamar M. Lins Jr.
Olá!
Alguém poderia explicar porque WS_TABSTOP não funciona com OWNERBUTTON?
Simples, OwnerButton Não recebe foco!

O Button e Buttonex recebe foco. Pega o TABSTOP.

Saudações,
Itamar M. Lins Jr.

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 20:43
por Fernando queiroz
tela1.jpg

HWGUI - Criando tela com visual FLAT

Enviado: 19 Nov 2020 20:45
por Fernando queiroz
tela2.jpg

Código: Selecionar todos

		INIT DIALOG oMENUPRINC TITLE "SGC - SISTEMA DE GESTÃO DE COMÉRCIO"    ;
			ICON HIcon():Addresource('SGC_ICON') ;
			AT 0, 0 SIZE 1088,1021 FONT oFont ;
			STYLE WS_OVERLAPPEDWINDOW;
			BACKCOLOR 8421504

		@ 0,0 PANEL oPanel1 SIZE 1088,80 ;
			BACKCOLOR 13400576
			oPanel1:Anchor:=130

		@ 0,1 PANEL oPanel2 OF oPanel1 SIZE  201,78 ;
			ON PAINT {|| Gradiente( oPanel2, 0, 0, 201, 78, 4, {13400576, 0} ) }

		@ 80,6 BITMAP oBitmap1  SHOW HBitmap():AddFile('c:\sgcv80\white_icon\sgc-32.bmp')  STRETCH 0  ;
        	OF oPanel2  SIZE 40,40 

		@ 7,50 SAY oLabel1 CAPTION "SGC v8.0" OF oPanel2 SIZE 187,22 STYLE SS_CENTER; 
			FONT HFont():Add( '',0,-19,400,,,);
			COLOR 16777215 BACKCOLOR 16777215 TRANSPARENT

		@ 0,80 PANEL oPanel3 SIZE 201,941 ;
			ON PAINT {|| Gradiente( oPanel3, 0, 0, 201, 1071, 4, {8421504, 0} ) }
			oPanel3:Anchor:=65

		@ 2,10 OWNERBUTTON oButton1 OF oPanel3 ON CLICK {||ProdutosClass():new(oServer):Produtos_Manutencao()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Produtos'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\product-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton1:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }

		@ 2,57 OWNERBUTTON oButton2 OF oPanel3 ON CLICK {||CadastrosClass():new(oServer):Cadastros_Manutencao()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Cadastros'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\group-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton2:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }

		@ 2,104 OWNERBUTTON oButton3 OF oPanel3 ON CLICK {||VendedoresClass():new(oServer):Vendedores_Manutencao()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Vendedores'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\workers-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton3:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }

		@ 2,151 OWNERBUTTON oButton4 OF oPanel3 ON CLICK {||PedidoCompraClass():new(oServer):Compra_Manutencao()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Compras'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\buy-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton4:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }	
			
		@ 2,198 OWNERBUTTON oButton5 OF oPanel3 ON CLICK {||EntradaClass():new(oServer):Entrada_Manutencao()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Compras'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\truck-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton5:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }

		@ 2,245 OWNERBUTTON oButton6 OF oPanel3 ON CLICK {||TransferenciaClass():new(oServer):Transferencia_Manutencao()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Transferência'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\sinchronize-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton6:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }

		@ 2,292 OWNERBUTTON oButton7 OF oPanel3 ON CLICK {||PedidoClass():new(oServer):Pedido()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Pedido'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\cart-8-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton7:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }

		@ 2,339 OWNERBUTTON oButton8 OF oPanel3 ON CLICK {||GerenciaPedidoClass():new(oServer):GERENCIA_PEDIDO()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Gerência Pedidos'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\browser-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton8:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }

		@ 2,386 OWNERBUTTON oButton9 OF oPanel3 ON CLICK {||CaixaClass():new(oServer):Caixa()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Caixa'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\money-bag-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton9:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }

		@ 2,433 OWNERBUTTON oButton10 OF oPanel3 ON CLICK {||GerenciaDanfeClass():new(oServer):GERENCIA_DANFE()} ;
			SIZE 195,41 FLAT ;
			TEXT 'DANFE'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\invoice-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton10:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }

		@ 2,480 OWNERBUTTON oButton11 OF oPanel3 ON CLICK {||GerenciaCupomClass():new(oServer):GERENCIA_CUPOM()} ;
			SIZE 195,41 FLAT ;
			TEXT 'CUPOM'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\pages-2-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton11:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }	
			
		@ 2,527 OWNERBUTTON oButton12 OF oPanel3 ON CLICK {||ReceberClass():new(oServer):RECEBER_MANUTENCAO()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Contas a Receber'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\cash-receiving-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton12:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }

		@ 2,574 OWNERBUTTON oButton13 OF oPanel3 ON CLICK {||PagarClass():new(oServer):Pagar_Manutencao()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Contas a Pagar'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\banknotes-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton13:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }		
			
		@ 2,771 OWNERBUTTON oButton14 OF oPanel3 ON CLICK {||hwg_EndDialog()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Configurações'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\setup-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton14:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }
			oButton14:Anchor:=48


		@ 2,818 OWNERBUTTON oButton15 OF oPanel3 ON CLICK {||hwg_EndDialog()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Ferramentas'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\settings-24-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton15:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }
			oButton15:Anchor:=48


		@ 2,865 OWNERBUTTON oButton16 OF oPanel3 ON CLICK {||hwg_EndDialog()} ;
			SIZE 195,41 FLAT ;
			TEXT 'Sair'  COLOR 16777215;
			COORDINATES 50, 0, 0, 0  ;
			BITMAP "C:\SGCv80\WHITE_ICON\power-256-30.bmp"  ;
			COORDINATES 5, 5, 0, 0 
			oButton16:aStyle := { HStyle():New( {8421504,0}, 4,, ),  HStyle():New( {12632256, 0}, 4,, 2, 16777215 ), HStyle():New( {12632256, 0}, 4,  ) }
			oButton16:Anchor:=48

		ACTIVATE DIALOG oMenuPrinc  MAXIMIZED
Segue codigo da tela , consegui fazer o OWNERBUTTON FLAT e com visual gradiente

HWGUI - Criando tela com visual FLAT

Enviado: 05 Dez 2020 13:38
por asimoes
Dá pra dar uma ideia o que é o HDC
https://docs.microsoft.com/en-us/window ... user-getdc
https://docs.microsoft.com/en-us/window ... -createdca

HWGUI - Criando tela com visual FLAT

Enviado: 18 Dez 2020 12:24
por Antonio
Boa tarde Fernando!

Pode me informar onde conseguiu esses icones brancos?
Obrigado

HWGUI - Criando tela com visual FLAT

Enviado: 18 Dez 2020 13:18
por Fernando queiroz
https://www.iconsdb.com/white-icons/

HWGUI - Criando tela com visual FLAT

Enviado: 18 Dez 2020 14:34
por Antonio
Muito obrigado Fernando
Todos os horários são UTC-03:00
Página 1 de 2

Powered by phpBB® Forum Software © phpBB Limited

Traduzido por: Suporte phpBB