Info sur CanevasGadget

Vous débutez et vous avez besoin d'aide ? N'hésitez pas à poser vos questions
Avatar de l’utilisateur
MetalOS
Messages : 1510
Inscription : mar. 20/juin/2006 22:17
Localisation : Lorraine
Contact :

Re: Info sur CanevasGadget

Message par MetalOS »

C'est possible de skiner une fenêtre avec un CanvasGadget ????
G-Rom
Messages : 3641
Inscription : dim. 10/janv./2010 5:29

Re: Info sur CanevasGadget

Message par G-Rom »

oui :

Code : Tout sélectionner


OpenWindow(0,0,0,1024,768,"",#PB_Window_BorderLess |#PB_Window_ScreenCentered)



CreateImage(0,32,32)

StartDrawing(ImageOutput(0))
  Box(0,0,32,32,$EEEEEE)
  Box(1,1,31,31,$AAAAAA)
  Line(0,31,32,1,$0)
  Line(31,0,1,32,$0)
  LineXY(5,5,32-5,32-5,RGB(255,0,0))
  LineXY(32-5,5,5,32-5,RGB(255,0,0))
StopDrawing()

CreateImage(1,32,32)

StartDrawing(ImageOutput(1))
  Box(0,0,32,32,$EEEEEE)
  Box(1,1,31,31,$FFFFFF)
  Line(0,31,32,1,$0)
  Line(31,0,1,32,$0)
  LineXY(5,5,32-5,32-5,RGB(255,0,0))
  LineXY(32-5,5,5,32-5,RGB(255,0,0))
StopDrawing()


CanvasGadget(0,0,0,1024,768)


timerRefresh.i = 0

Repeat
  event = WindowEvent() 
  
  
  
  If WindowMouseX(0) > 1024-32-10 And WindowMouseX(0) < (1024-32-10)+32 And WindowMouseY(0) > 10 And WindowMouseY(0) < 10+32
    If event = #WM_LBUTTONDOWN
      quit = 1
    EndIf 
    
    hoover = #True
  Else
    hoover = #False  
  EndIf   
  
  If timerRefresh < ElapsedMilliseconds()
    timerRefresh = ElapsedMilliseconds() + 75
    
    StartDrawing(CanvasOutput(0))
    Box(0,0,1024,768,$BABABA)
    
    If hoover = #False 
      DrawImage(ImageID(0),1024-32-10,10)
    Else
      DrawImage(ImageID(1),1024-32-10,10)
    EndIf 
    
    DrawText(10,10,"Titre de ma fenetre !")
    
    StopDrawing()
    
  EndIf
  
Until quit = 1
C'est un exemple bateau, à toi de solidifier le truc. ;)
Avatar de l’utilisateur
MetalOS
Messages : 1510
Inscription : mar. 20/juin/2006 22:17
Localisation : Lorraine
Contact :

Re: Info sur CanevasGadget

Message par MetalOS »

Merci G-Rom :wink:
Avatar de l’utilisateur
kernadec
Messages : 1606
Inscription : ven. 25/avr./2008 11:14

Re: Info sur CanevasGadget

Message par kernadec »

bonjour
Avec la lib de Danilo "gDrawing.pbi" nous pouvons faire tourner des images bouton
exemple de code inspiré de netmaestro

http://www.purebasic.fr/english/viewtop ... 13&t=38041

Cordialement

Code : Tout sélectionner

;LIB GDI : http://danilo.purearea.net/gDrawing/gDrawing_v0.84.zip
;Adresse Image : http://www.purebasic.fr/english/viewtopic.php?f=13&t=38041

XIncludeFile "gDrawing.pbi"

UsePNGImageDecoder()

Enumeration
  #Window_0
  #ImageGadget_1
  #Image_1
EndEnumeration

LoadImage(#Image_1,"C:\PureBasic\wheel.png") 

Procedure rotation(image.l, X.l, Y.l, Angle.f)
  
  ImageID = CreateImage(#PB_Any,ImageWidth(image),ImageHeight(image))	
  
  If gStartDrawing(ImageOutput(ImageID))
    Box(0,0,ImageWidth(image),ImageHeight(image),#White)
    gRotateAt(X,Y,Angle)
    gDrawImage(image,0,0)
    gResetTransform()
    gStopdrawing()
  EndIf
  
  ProcedureReturn ImageID
EndProcedure

If gInit()
  
  OpenWindow(#Window_0, 0, 0, 530, 530, "Essai Roue",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  SetWindowColor(#Window_0,#White) 
  ImageGadget(#ImageGadget_1, 5, 5,  530, 530, 0)
  
  X=ImageWidth(#Image_1)/2
  Y=ImageHeight(#Image_1)/2
  
  For i=1 To 360 Step 15
    image1=rotation(#Image_1, X, Y, i)
    SetGadgetState(#ImageGadget_1,ImageID(Image1))
  Next  i
  
  Repeat:Until WaitWindowEvent() = #PB_Event_CloseWindow 
  
  gEnd()
EndIf

G-Rom
Messages : 3641
Inscription : dim. 10/janv./2010 5:29

Re: Info sur CanevasGadget

Message par G-Rom »

pour ne pas poluer le topic de Blendman sur son logiciel d'anim , voici un code simple qui te permettra de mettre en oeuvre
n'importe quel gadget perso dans un canvas:


chaque gadget à une structure commune , aucun gadget hérite directement de cette structure.
la structure commune à tout les gadget à tout les attribut dont un gadget à besoin pour fonctionné :

Information sur la position
sur la taille
les différentes images qui le compose
quelques info de base ( survol de souris , bouton de souris )
un pointeur sur fonction d'évenement
on pourrais en rajouté qq uns...

avec du code :

Code : Tout sélectionner

Structure s_Gadget
  
  x.i
  y.i
  width.i
  height.i
  
  mouseIsHoover.b
  mouseIsClicked.b
  
  image_normal.i
  image_hoover.i
  image_clicked.i
  image_current.i
  
  *event_callback.i
  
EndStructure
ensuite , chaque gadget pourra hérité de cette structure grâce au mot clé extends :

Code : Tout sélectionner

Structure s_ToggleButton Extends s_Gadget
  state.b
EndStructure
cela évite de se retapé des lignes et des fonctions pour chaque type de gadget...
tout les gadgets seront stocké dans une liste , qui elle même est proprement rangé dans une autre structure, qui elle , contient des informations
sur la gui en elle même , sa fenetre mère, le canvas sur lequel on dessine , un flag pour savoir si on fait le rendu ou pas de la gui, pas besoin de faire un rendu toute les frames, sinon bonjour la vitesse..., la liste de tout les gadgets, la position de la souris , on pourrais en rajouté encore , le clavier par exemple.

Code : Tout sélectionner

Structure s_Gui
  
  windowID.i
  canvasID.i
  needToRender.b
  
  List *gadget_list.s_Gadget()
  
  Array MouseButton.b(2)
  mousex.i
  mousey.i
  
EndStructure
ensuite , une tripoté de fonction pour assemblé le tout , je te laisse fouillé dans le code situé plus bas
sache juste que la structure s_Gui est le sommet de ta gui , c'est elle qui gère tout les gadgets , cependant , elle ne connais pas la spécialité de chacun, elle ne connais que s_Gadget , donc le strict minimum pour l'affichage & les events commun, chaque type de gadget doit donc avoir sa propre fonction qui gère les evenements
celle ci sera appeler par la structure "mère" s_Gui.
voilà , c'est une base solide pour une GUI , qui est valide pour tout type de gui , dans le jeu vidéo comme dans l'applicatif.
si tu ne pige pas un point , poste ici.

Code : Tout sélectionner

CreateImage(0,32,32)
CreateImage(1,32,32)
CreateImage(2,32,32)

StartDrawing(ImageOutput(0))
  Box(0,0,32,32,RGB(255,0,0))
StopDrawing()

StartDrawing(ImageOutput(1))
  Box(0,0,32,32,RGB(0,255,0))
StopDrawing()
  
StartDrawing(ImageOutput(2))
  Box(0,0,32,32,RGB(0,0,255))
StopDrawing()

Structure s_Gadget
  
  x.i
  y.i
  width.i
  height.i
  
  mouseIsHoover.b
  mouseIsClicked.b
  
  image_normal.i
  image_hoover.i
  image_clicked.i
  image_current.i
  
  *event_callback.i
  
EndStructure

Structure s_ToggleButton Extends s_Gadget
  state.b
EndStructure


Structure s_Gui
  
  windowID.i
  canvasID.i
  needToRender.b
  
  List *gadget_list.s_Gadget()
  
  Array MouseButton.b(2)
  mousex.i
  mousey.i
  
EndStructure


Procedure.i create_gui(windowID.i)
  *gui.s_Gui = AllocateMemory(SizeOf(s_Gui))
  InitializeStructure(*gui,s_Gui)
  
  *gui\windowID     = WindowID
  *gui\needToRender = #True 
  *gui\canvasID     = CanvasGadget(#PB_Any,0,0,WindowWidth(*gui\windowID),WindowHeight(*gui\windowID))
  
  ProcedureReturn *gui
EndProcedure

Procedure gui_event(*gui.s_Gui)
  
  *gui\mousex = WindowMouseX(*gui\windowID)
  *gui\mousey = WindowMouseY(*gui\windowID)
  
  CompilerIf #PB_Compiler_OS = #PB_OS_Windows
    *gui\MouseButton(0) =  GetAsyncKeyState_(#VK_LBUTTON)
    *gui\MouseButton(1) =  GetAsyncKeyState_(#VK_RBUTTON)
    *gui\MouseButton(2) =  GetAsyncKeyState_(#VK_MBUTTON)
  CompilerEndIf
  
  ; foreach all gadget for event
  ;
  ForEach *gui\gadget_list()
    *cGadget.s_Gadget = *gui\gadget_list()
    
    ; the mouse is over the gadget
    ;
    If *gui\mousex => *cGadget\x And *gui\mousex < *cGadget\x + *cGadget\width And *gui\mousey => *cGadget\y And *gui\mousey < *cGadget\y + *cGadget\height
      *cGadget\mouseIsHoover = #True 
    Else 
      *cGadget\mouseIsHoover = #False 
    EndIf
    
    
    ; update the correct image
    ;
    If *cGadget\mouseIsHoover = #False And *cGadget\image_current = *cGadget\image_hoover
      *cGadget\image_current = *cGadget\image_normal
      *gui\needToRender = #True 
    EndIf 
    
    If *cGadget\mouseIsHoover = #True
      *cGadget\image_current = *cGadget\image_hoover
      *gui\needToRender = #True 
    EndIf 
    
    ; call the gadget event function
    ;
    If *cGadget\event_callback <> #Null 
      CallFunctionFast(*cGadget\event_callback, *cGadget)
    EndIf 

  Next 
  
EndProcedure

Procedure render_gui(*gui.s_Gui)
  
  gui_event(*gui)
  
  If *gui\needToRender = #True 
    StartDrawing(CanvasOutput(*gui\canvasID))
     *gui\needToRender = #False
     ForEach *gui\gadget_list()
       *cGadget.s_Gadget = *gui\gadget_list()
       If IsImage(*cGadget\image_current)
         DrawAlphaImage(ImageID(*cGadget\image_current), *cGadget\x, *cGadget\y)
       EndIf 
     Next 
     StopDrawing()
  EndIf 
EndProcedure

Procedure add_gadget_to_gui(*gui.s_Gui, *gadget.s_Gadget)
  AddElement(*gui\gadget_list())
    *gui\gadget_list() = *gadget
EndProcedure
  
Procedure toggleButonEventCallBack(*gadget.s_ToggleButton)
  If *gadget\mouseIsHoover = #True 
    Debug "mouse is over this gadget : " + Str(*gadget)
  EndIf 
EndProcedure

Procedure.i createToggleButton(*gui.s_Gui, x.i,y.i,width.i,height.i)  
  *b.s_ToggleButton = AllocateMemory(SizeOf(s_ToggleButton))
  
  *b\state = #False 
  
  ;chargement des images...
  *b\image_normal  = 0
  *b\image_hoover  = 1
  *b\image_clicked = 2
  
  
  *b\x      = x
  *b\y      = y
  *b\width  = width
  *b\height = height
  
  ;callback du gadget
  *b\event_callback = @toggleButonEventCallBack()
  
  ;ajout à la gui
  add_gadget_to_gui(*gui,*b)
  
  ProcedureReturn *b
EndProcedure



;-example


OpenWindow(0,0,0,442,442,"gui canvas")

*gui = create_gui(0)


For y = 0 To 9
  For x = 0 To 9
    createToggleButton(*gui,10+(x*42),10+(y*42),32,32)
  Next
Next 

Repeat
  event = WindowEvent()
  
  render_gui(*gui)
  
Until event = #PB_Event_CloseWindow


Avatar de l’utilisateur
MetalOS
Messages : 1510
Inscription : mar. 20/juin/2006 22:17
Localisation : Lorraine
Contact :

Re: Info sur CanevasGadget

Message par MetalOS »

Désolé pour le post de blendman :? , je vais étudier ton explication, merci G-Rom.
Avatar de l’utilisateur
MetalOS
Messages : 1510
Inscription : mar. 20/juin/2006 22:17
Localisation : Lorraine
Contact :

Re: Info sur CanevasGadget

Message par MetalOS »

Je relance un peut le sujet car je voudrais savoir si on peut skiner avec un CanevasGadget les différent gadget de PB comme le StringGadget, PanelGadget, ComboGadget, BoutonGadget...

faire un truc dans ce style :

Image

Si quelqu'un aurait un exemple plus ou moins similaire je l'en remercie d'avance. Je ne sais pas pourquoi mais j'ai vraiment du mal avec ce foutu CanvasGadget :cry: :cry: :cry: :cry:
Avatar de l’utilisateur
falsam
Messages : 7324
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: Info sur CanevasGadget

Message par falsam »

Skiner directement les Gadgets natifs de Pure basic n'est pas possible. Tu vas devoir créer toi même tes gadgets. Des solutions commencent à émerger comme par exemple celle de graph100 sur ce post http://www.purebasic.fr/french/viewtopi ... =6&t=12125
Configuration : Windows 11 Famille 64-bit - PB 6.20 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Avatar de l’utilisateur
MetalOS
Messages : 1510
Inscription : mar. 20/juin/2006 22:17
Localisation : Lorraine
Contact :

Re: Info sur CanevasGadget

Message par MetalOS »

Oui j'avais déjà fait un test sur Mac. C'est très prometteur.
Répondre