[ TUTO ] Construire une interface graphique

Informations pour bien débuter en PureBasic
Shadow
Messages : 1373
Inscription : mer. 04/nov./2015 17:39

Re: [ TUTO ] Construire une interface graphique

Message par Shadow »

Jolie, oui c'est bon tous fonctionne pour toi, pour moi tkt pas.
Vivement la suite, je dévore ton tuto ^^
Processeur: Intel Core I7-4790 - 4 Cœurs - 8 Thread: 3.60 Ghz.
Ram: 32 GB.
Disque: C: SDD 250 GB, D: 3 TB.
Vidéo: NVIDIA GeForce GTX 960: 2 GB DDR5.
Écran: Asus VX248 24 Pouces: 1920 x 1080.
Système: Windows 7 64 Bits.

PureBasic: 5.60 x64 Bits.
Shadow
Messages : 1373
Inscription : mer. 04/nov./2015 17:39

Re: [ TUTO ] Construire une interface graphique

Message par Shadow »

Voilà, j'ai fini, j'ai modifié à ma sauce, dis moi se que tu en pense :)

Code : Tout sélectionner

EnableExplicit

Enumeration Windows
  
  #FenetrePrincipale
  
  #MenuSystemeFenetrePrincipale
  
  #MenuSystemeProjetNouveauFenetrePrincipale
  #MenuSystemeProjetOuvrirFenetrePrincipale
  #MenuSystemeProjetEnregistrerFenetrePrincipale
  #MenuSystemeProjetEnregistrerSousFenetrePrincipale
  #MenuSystemeProjetQuitterFenetrePrincipale
  
  #MenuSystemeEditionAnnulerFenetrePrincipale
  #MenuSystemeEditionRestaurerFenetrePrincipale
  #MenuSystemeEditionCouperFenetrePrincipale
  #MenuSystemeEditionCopierFenetrePrincipale
  #MenuSystemeEditionCollerFenetrePrincipale
  #MenuSystemeEditionSupprimerFenetrePrincipale
  #MenuSystemeEditionSelectionnerTousFenetrePrincipale
  
  #MenuSystemePreferenceOptionFenetrePrincipale
  
  #MenuSystemeAideAideFenetrePrincipale
  #MenuSystemeAideAProposFenetrePrincipale
  
  #TreeGadgetControles
  #CanvasGrille
  #BarreStatue
  
EndEnumeration

Enumeration DrawMode
  #Select
  #DrawButton
EndEnumeration

Enumeration Handles
  #LU ; Gauche en haut
  #RU ; Droite en haut
  #MU ; Milieur en haut
  #LD ; Gauche en bas
  #RD ; Droite en bas
  #MD ; Milieur en bas
  #LM ; Gauche milieu
  #RM ; Droite milieu
EndEnumeration

Structure PositionSouris
  X.i
  Y.i
EndStructure

Structure PositionEtTaille Extends PositionSouris
  L.i
  H.i
EndStructure

Structure Draw
  List MyBox.PositionEtTaille()
EndStructure

Global Souris.PositionSouris
Global NewList MyDraw.Draw()

Global NewMap MyHandle.PositionSouris()

; On crée les 
Define Index.i

For Index.i = #LU To #RM
  AddMapElement(MyHandle(), Str(Index.i))
Next

Global FenetrePrincipaleLargeur.i = 800 ; La Largeur de la fenêtre.
Global FenetrePrincipaleHauteur.i = 600 ; La Hauteur de la fenêtre.

Global OptionFenetre.i = #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_SizeGadget | #PB_Window_ScreenCentered

Global CanvasGrilleLargeur.i = FenetrePrincipaleLargeur.i ; La Largeur de la grille.
Global CanvasGrilleHauteur.i = FenetrePrincipaleHauteur.i - (22 * 2) ; La Hauteur de la grille (-46 pour le menu système et la barre de statue).
Global CanvasGrilleEspacePoint.i = 10 ; L'espace entre les points.
Global CanvasGrilleCouleurPoint.i = RGB(0, 0, 255) ; La couleur des points.
Global CanvasGrilleCouleurArrierePlant.i = RGB(255, 255, 255) ; La couleur d'arrière plant de la grille.

Global CanvasSelectionTaille.i = 2 ; Taille de la selection.
Global CanvasTypeSelection.i = #PB_Path_SquareEnd ; #PB_Path_RoundEnd = Trace des points ronds, #PB_Path_SquareEnd: Trace des points carrés.
Global CanvasSelectionCouleurPoint.i = RGBA(255, 0, 0, 255) ; La couleur de la selection.
Global CanvasSelectionEspacement.i = 4 ; La distance entre les point de la selection.

Global CanvasPositionXsouris.i = 0
Global CanvasPositionYsouris.i = 0

Global CanvasCliqueSouris.b = #False
Global CanvasDrawMode.i = #Select

Global TreeCouleurFont.i = RGB(255, 255, 255)
Global TreeCouleurTexte.i = RGB(0, 0, 255)
Global TreePolice.s = "Cambia"
Global TreeTaillePolice.i = 12
Global TreeCouleurLigne.i = RGB(255, 0, 0)

Global TreeGadgetObjetSelectionner.i = 0

Global MenuSystemeCouleurFont.i = RGB(240, 240, 240)
Global MenuSystemeCouleurTexte.i = RGB(0, 150, 0)
Global MenuSystemePolice.s = "Arial"
Global MenuSystemeTaillePolice.i = 12

Global CouleurBox.i = RGB(0, 0, 255)

Global ImageTemps.i = 0
Global TempsDraw.PositionEtTaille

Global NewDraw.b = #False

Global TypeObjet.i
Global *ObjetCourrent
Global *ObjetSelectionner

Global HandleTaille.i = 7 ; Taille des poigniés
Global HandleCouleurFont.i = RGB(255, 255, 255) ; Couleur interieur des poigniés
Global HandleCouleurContour.i = RGB(0, 0, 0) ; Couleur des des contours des poigniés

Declare Exit()
Declare EventCanvas()
Declare EventTreeGadget()
Declare WhereIsMouse()
Declare ManageDraw()
Declare DrawHandles()
Declare DrawCanvas()
Declare DrawImageTemps()
Declare DrawSelection()
Declare AddNewBox()
Declare DrawOblect() 
Declare ItsHoverObject()

Procedure FenetrePrincipale()
  
  ; Ouverture de la fenêtre.
  OpenWindow(#FenetrePrincipale, 0, 0, FenetrePrincipaleLargeur, FenetrePrincipaleHauteur, "RAD...", OptionFenetre.i)
  CreateImageMenu(#MenuSystemeFenetrePrincipale, WindowID(#FenetrePrincipale), #PB_Menu_ModernLook)
  
  MenuTitle("Projet")
  MenuItem(#MenuSystemeProjetNouveauFenetrePrincipale, "&Nouveau" + Chr(9) + "Crtl + N", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_Control | #PB_Shortcut_N, 100)
  MenuItem(#MenuSystemeProjetOuvrirFenetrePrincipale, "&Ouvrir" + Chr(9) + "Crtl + O", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_Control | #PB_Shortcut_O, 101)
  MenuBar()
  MenuItem(#MenuSystemeProjetEnregistrerFenetrePrincipale, "Enregistrer Sous", 0)
  MenuItem(#MenuSystemeProjetEnregistrerSousFenetrePrincipale, "Enregistrer" + Chr(9) + "Crtl + S", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_Control | #PB_Shortcut_S, 102)
  MenuBar()
  MenuItem(#MenuSystemeProjetQuitterFenetrePrincipale, "Quitter" + Chr(9) + "Echap", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_Escape, 103)
  
  MenuTitle("Edition")
  MenuItem(#MenuSystemeEditionAnnulerFenetrePrincipale, "Annuler" + Chr(9) + "Crtl + Z", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_Z, 104)
  MenuItem(#MenuSystemeEditionRestaurerFenetrePrincipale, "Restaurer" + Chr(9) + "Crtl + Y", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_Y, 105)
  MenuBar()
  MenuItem(#MenuSystemeEditionCouperFenetrePrincipale, "Couper" + Chr(9) + "Crtl + X", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_X, 106)
  MenuItem(#MenuSystemeEditionCopierFenetrePrincipale, "Copier" + Chr(9) + "Crtl + C", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_C, 107)
  MenuItem(#MenuSystemeEditionCollerFenetrePrincipale, "Coller" + Chr(9) + "Crtl + V", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_V, 108)
  MenuItem(#MenuSystemeEditionSupprimerFenetrePrincipale, "Supprimer" + Chr(9) + "Supp", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_Delete, 109)
  MenuBar()
  MenuItem(#MenuSystemeEditionSelectionnerTousFenetrePrincipale, "Selectionner Tous" + Chr(9) + "Crtl + A", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_Escape, 110)
  
  MenuTitle("Préférences")
  MenuItem(#MenuSystemePreferenceOptionFenetrePrincipale, "Option...", 0)
  
  MenuTitle("Aide")
  MenuItem(#MenuSystemeAideAideFenetrePrincipale, "Aide..." + Chr(9) + "F1", 0)
  AddKeyboardShortcut(#FenetrePrincipale, #PB_Shortcut_F1, 111)
  MenuItem(#MenuSystemeAideAProposFenetrePrincipale, "A propos...", 0)
  
  ; Création du TreeGadget.
  TreeGadget(#TreeGadgetControles, 1, 0, 199, CanvasGrilleHauteur.i, #PB_Tree_AlwaysShowSelection)
  
  SetGadgetColor(#TreeGadgetControles, #PB_Gadget_BackColor, TreeCouleurFont) ; Couleur du fond.
  SetGadgetColor(#TreeGadgetControles, #PB_Gadget_FrontColor, TreeCouleurTexte) ; Couleur du texte.
  SetGadgetColor(#TreeGadgetControles, #PB_Gadget_LineColor, TreeCouleurLigne) ; Couleur des lignes reliant les noeuds.
  
  AddGadgetItem(#TreeGadgetControles, -1, "Flèche", 0, 0)
  AddGadgetItem(#TreeGadgetControles, -1, "Bouton", 0, 0)
  
  ; Création du canvas.
  CanvasGadget(#CanvasGrille, 200, 0, CanvasGrilleLargeur.i, CanvasGrilleHauteur.i) ; 200 en X à cause du TreeGadget.
  
  ; Création de l'image temps
  ImageTemps.i = CreateImage(#PB_Any, GadgetWidth(#CanvasGrille), GadgetHeight(#CanvasGrille))
  
  ; Création de la barre de statue.
  CreateStatusBar(#BarreStatue, WindowID(#FenetrePrincipale))
  AddStatusBarField(#PB_Ignore)
  AddStatusBarField(#PB_Ignore)
  AddStatusBarField(300)
  AddStatusBarField(#PB_Ignore)
  
  StatusBarText(#BarreStatue, 0, "X = 0, Y = 0", #PB_StatusBar_Raised)
  StatusBarText(#BarreStatue, 1, "L = 0, H = 0", #PB_StatusBar_Raised)
  StatusBarText(#BarreStatue, 2, "ID = --, X = --, Y = --, L = --, H = --", #PB_StatusBar_Raised)
  StatusBarText(#BarreStatue, 3, "Mode = Pointeur", #PB_StatusBar_Raised)
  
  ; On place un Callback pour la gestion des evenements sur le TreeGadget.
  BindGadgetEvent(#TreeGadgetControles, @EventTreeGadget())
  
  ; On place un Callback pour la gestion des evenements sur le canvas.
  BindGadgetEvent(#CanvasGrille, @EventCanvas())
  
  ; On place un Callback pour la fernmeture de la fenêtre.
  BindEvent(#PB_Event_CloseWindow, @Exit(), #FenetrePrincipale)
  
EndProcedure
; Select TreeGadgetObjetSelectionner.i
;           
;         Case 0 ; Pointeur.
;           
;         Case 1 ; Bouton.
;           
;       EndSelect
Procedure EventTreeGadget()
  
  Select EventType()
      
    Case #PB_EventType_LeftClick ; Clic gauche sur un élément, ou une Case à cocher a été cochée/décochée.
      
      TreeGadgetObjetSelectionner.i = GetGadgetState(#TreeGadgetControles)
      
      If TreeGadgetObjetSelectionner.i = 0
        CanvasDrawMode.i = #Select
        StatusBarText(#BarreStatue, 3, "Mode = Pointeur", #PB_StatusBar_Raised)
        
      ElseIf TreeGadgetObjetSelectionner.i = 1
        CanvasDrawMode.i = #DrawButton
        StatusBarText(#BarreStatue, 3, "Mode = Bouton", #PB_StatusBar_Raised)
        
      Else
        
      EndIf
      
    Case #PB_EventType_LeftDoubleClick ; Double-clic gauche sur un élément.
      
    Case #PB_EventType_RightClick ; Clic droit sur un élément.
      
    Case #PB_EventType_RightDoubleClick ; Double-Clic droit sur un élément.
      
    Case #PB_EventType_Change ; L'élément courant a changé.
      
    Case #PB_EventType_DragStart ; L'utilisateur a essayé de lancer Une opération 'Glisser & Déposer'.
      
      
  EndSelect
  
EndProcedure

Procedure EventCanvas()
  
  Select EventType()
      
    Case #PB_EventType_MouseMove ; La souris bouge sur le Canvas.
      
      ; Savoir ou l'on est sur la Canvas...
      ; Mémorise la position de la souris sur le canvas.
      CanvasPositionXsouris.i = GetGadgetAttribute(#CanvasGrille, #PB_Canvas_MouseX)
      CanvasPositionYsouris.i = GetGadgetAttribute(#CanvasGrille, #PB_Canvas_MouseY)
      
      If CanvasCliqueSouris.b = #False And CanvasDrawMode.i = #Select ; Si le bouton gauche de la souris n'est pas appuyé et que le mode du TreeGadget est sur Pointeur.
        
        If WhereIsMouse() ; Si la souris est sur un objet.
          ProcedureReturn
        EndIf
        
      ElseIf CanvasCliqueSouris.b = #True And CanvasDrawMode.i <> #Select ; Si le bouton gauche de la souris est appuyé et que le mode du TreeGadget est différent de Pointeur.
        ManageDraw()
        
      EndIf
      
    Case #PB_EventType_LeftButtonDown ; Le bouton gauche de la souris est appuyé.
      
      If CanvasCliqueSouris.b = #False ; Le bouton gauche de la souris n'est pas appuyé.
        
        ; On mémorise la position de la souris pour le calcul du déplacement.
        Souris\X.i = CanvasPositionXsouris.i
        Souris\Y.i = CanvasPositionYsouris.i
        
        ; Aucun objet sélectionner.
        *ObjetSelectionner = -1
        
      EndIf
      
      CanvasCliqueSouris.b = #True ; Signale que l'on à cliqué sur le bouton gauche de la souris.
       
    Case #PB_EventType_LeftButtonUp ; Le bouton gauche de la souris à été relâché.
      
      StatusBarText(#BarreStatue, 1, "L = 0, H = 0", #PB_StatusBar_Raised)
      
      If NewDraw.b = #True
        
        Select CanvasDrawMode.i
            
          Case #DrawButton
            AddNewBox()
            
        EndSelect
        
      ElseIf CanvasDrawMode.i = #Select And *ObjetCourrent <> -1
        *ObjetSelectionner = *ObjetCourrent
        DrawCanvas()
      EndIf
      
      NewDraw.b = #False
      CanvasCliqueSouris.b = #False ; Signale que l'on à relâché le bouton gauche de la souris.
      
  EndSelect
  
  Select CanvasDrawMode.i
      
    Case #Select
      SetGadgetAttribute(#CanvasGrille, #PB_Canvas_Cursor, #PB_Cursor_Default)
      
    Case #DrawButton
      SetGadgetAttribute(#CanvasGrille, #PB_Canvas_Cursor, #PB_Cursor_Cross)
    
  EndSelect
  
EndProcedure

Procedure DrawCanvas()
  
  ; Ont déssine l'image temporaire.
  DrawImageTemps()
  
  StartDrawing(CanvasOutput(#CanvasGrille))
  DrawingMode(#PB_2DDrawing_Default)
  
  ; Dessin de l'image temporaire sur la Canvas.
  DrawImage(ImageID(ImageTemps.i), 0, 0)
  
  StopDrawing()
  
EndProcedure

Procedure DrawGrid()
  
  Protected X.i = CanvasGrilleEspacePoint.i, Y.i = CanvasGrilleEspacePoint.i
  
  ; Boucle tans que X est plus petit que la Largeur de la fenêtre.
  While X.i < GadgetWidth(#CanvasGrille)
    
    Y.i = CanvasGrilleEspacePoint.i ; Ont revient à la position Y par du début.
    
    ; Boucle tans que Y est plus petit que la Hauteur de la fenêtre.
    While Y.i < GadgetHeight(#CanvasGrille) 
      Plot(X.i ,Y.i , CanvasGrilleCouleurPoint.i) ; Déssine le point sur le Canvas Gadjet.
      Y.i + CanvasGrilleEspacePoint.i             ; On déplace le la position de Y.
    Wend
    
    X.i + CanvasGrilleEspacePoint.i ; On déplace le la position de X.
    
  Wend
  
EndProcedure

Procedure WhereIsMouse()

  ; Affichage de la position de la souris sur le Canvas.
  StatusBarText(#BarreStatue, 0, "X = " + Str(CanvasPositionXsouris.i) + ", Y = " + Str(CanvasPositionYsouris.i), #PB_StatusBar_Raised)
  
  ; On est sur un objet
  If ItsHoverObject()
    
    ; Change le curseur de l'objet en 'Main'.
    SetGadgetAttribute(#CanvasGrille, #PB_Canvas_Cursor, #PB_Cursor_Hand)

    With MyDraw()\MyBox()
      ; Affichage des informations de l'objet sous la souris.
      StatusBarText(#BarreStatue, 2, "ID = " + Str(*ObjetCourrent) + ", X = " + Str(\X) + ", Y = " + Str(\Y) + ", L = " + Str(\L) + ", H = " + Str(\H), #PB_StatusBar_Raised)
    EndWith
    
    ProcedureReturn #True
    
  Else
    StatusBarText(#BarreStatue, 2, "ID = --, X = --, Y = --, L = --, H = --", #PB_StatusBar_Raised)
    
  EndIf
  
  ProcedureReturn #False
  
EndProcedure

Procedure ManageDraw()
  
  ; On calcul le déplacement de la souris.
  Protected CanvasDesplacementX.i = CanvasPositionXsouris.i - Souris\X
  Protected CanvasDesplacementY.i = CanvasPositionYsouris.i - Souris\Y
  
  Select CanvasDrawMode.i
      
    Case #DrawButton
      
      ; Affichage des informations de l'objet en court de création.
      StatusBarText(#BarreStatue, 0, "X = " + Str(CanvasPositionXsouris.i) + ", Y = " + Str(CanvasPositionYsouris.i), #PB_StatusBar_Raised)
      StatusBarText(#BarreStatue, 1, "L = " + Str(CanvasDesplacementX.i) + ", H = " + Str(CanvasDesplacementY.i), #PB_StatusBar_Raised)
      
      If CanvasDesplacementX.i > GadgetWidth(#CanvasGrille)
        ProcedureReturn
      EndIf
      
      ; Si la taille de l'objet en court de création ne fais pas minimum 5 Pixel de large.
      If CanvasDesplacementX.i < 5
        ProcedureReturn
      EndIf
      
      If CanvasDesplacementY.i > GadgetHeight(#CanvasGrille)
        ProcedureReturn
      EndIf
      
      ; Si la taille de l'objet  en court de création ne fais pas minimum 5 Pixel d'épaisseur.
      If CanvasDesplacementY.i < 5
        ProcedureReturn
      EndIf
      
      ; Enregistre la position actuel de la souris.
      TempsDraw\X = Souris\X
      TempsDraw\Y = Souris\Y
      
      ; Enregistre la taille de la selection.
      TempsDraw\L = CanvasDesplacementX.i
      TempsDraw\H = CanvasDesplacementY.i
      
      ; Déssine la selection sur le Canvas.
      DrawSelection()
      
  EndSelect
  
  NewDraw.b = #True
  
EndProcedure

Procedure DrawImageTemps()
  
  ; Ont déssine sur l'image temporaire.
  StartDrawing(ImageOutput(ImageTemps.i))
  DrawingMode(#PB_2DDrawing_Default)
  
  ; Efface l'image avec la couleur d'arriere plant du Canvas.
  Box(0 ,0 , GadgetWidth(#CanvasGrille), GadgetHeight(#CanvasGrille), CanvasGrilleCouleurArrierePlant.i)
  
  ; Dessinne la grille sur l'image.
  DrawGrid()
  
  ; Dessine nos objets.
  DrawOblect() 
  
  StopDrawing()
  
EndProcedure

Procedure DrawSelection()
  
  ; J'efface en premier le canvas, avec l'image temporaire...
  StartVectorDrawing(CanvasVectorOutput(#CanvasGrille))
  
  ; Déplace le curseur du chemin de dessin vectoriel vers un nouvel emplacement.
  MovePathCursor(0, 0)
  
  ; Dessine l'image spécifiée directement sur la sortie de dessin vectoriel.
  DrawVectorImage(ImageID(ImageTemps.i))
  
  ; Déessine maintenant le box (La selection).
  With TempsDraw
    
    ; Ajoute un rectangle (Box ou Boîte) dans le chemin du dessin vectoriel.
    AddPathBox(\X,\Y,\L,\H)
    
    ; Sélectionne une seule couleur 32 bits comme source pour les opérations de dessin vectoriel telles que FillPath(), StrokePath() et autres. 
    ; ATTENTION couleur RGBA donc avec alpha !
    VectorSourceColor(CanvasSelectionCouleurPoint.i)
    
    ; Dessine le chemin de dessin courant avec une ligne de points.
    DotPath(CanvasSelectionTaille.i, CanvasSelectionEspacement.i, CanvasTypeSelection.i) ; Largeur, Distance, Type.

  EndWith
  
  StopVectorDrawing()
  
EndProcedure

Procedure AddNewBox()
  
  AddElement(MyDraw())
  AddElement(MyDraw()\MyBox())
  
  With MyDraw()\MyBox()
    \X = TempsDraw\X
    \Y = TempsDraw\Y
    \L = TempsDraw\L
    \H = TempsDraw\H
  EndWith
  
  DrawCanvas()
  
EndProcedure

Procedure DrawButton()
  With MyDraw()\MyBox()
    Box(\X,\Y,\L,\H, CouleurBox.i)
  EndWith
EndProcedure

Procedure DrawOblect()
  ForEach MyDraw()
    With MyDraw()
      ForEach \MyBox()
        DrawButton()
        DrawHandles()
      Next
    EndWith
  Next
EndProcedure 

Procedure ItsHoverObject()
  
  ; On est sur rien
  *ObjetCourrent = -1
  TypeObjet = -1
  
  ForEach MyDraw()
    ForEach MyDraw()\MyBox()
      With MyDraw()\MyBox()
        If (CanvasPositionXsouris.i >= \X And CanvasPositionXsouris.i <= (\X + \L)) And (CanvasPositionYsouris.i >= \Y And CanvasPositionYsouris.i <= (\Y + \H))
          *ObjetCourrent = @MyDraw()\MyBox()
          TypeObjet.i = #DrawButton
          ProcedureReturn #True
        EndIf
      EndWith
    Next
  Next
  
  ProcedureReturn #False
  
EndProcedure

Procedure CreateHandles(X.i, Y.i)
  DrawingMode(#PB_2DDrawing_Outlined)
  RoundBox(X.i, Y.i, HandleTaille.i, HandleTaille.i, 1, 1, HandleCouleurContour.i)
  DrawingMode(#PB_2DDrawing_Default)
  Box(X.i + 1, Y.i + 1, HandleTaille.i - 2, HandleTaille.i - 2, HandleCouleurFont.i)
EndProcedure

Procedure DrawHandles()
  
  Protected X.i, Y.i
  
  If @MyDraw()\MyBox() <> *ObjetSelectionner
    ProcedureReturn
  EndIf
  
  With MyDraw()\MyBox()
    
    Y.i = \Y - (HandleTaille / 2)
    
    ; Poignée/Handle LU
    X.i = \X - (HandleTaille / 2)
    CreateHandles(X.i, Y.i)
    MyHandle(Str(#LU))\X = X.i
    MyHandle(Str(#LU))\Y = Y.i
    
    ; Poignée/Handle RU
    X.i = (\X + \L) - (HandleTaille / 2)
    CreateHandles(X.i, Y.i)
    MyHandle(Str(#RU))\X = X.i
    MyHandle(Str(#RU))\Y = Y.i
    
    ; Poignée/Handle MU
    X.i = (\X + (\L / 2)) - (HandleTaille / 2)
    CreateHandles(X.i, Y.i)
    MyHandle(Str(#MU))\X = X.i
    MyHandle(Str(#MU))\Y = Y.i
    Y=(\Y+\H)-(HandleTaille / 2)
    
    ; Poignée/Handle LD
    X.i = \X - (HandleTaille / 2)
    CreateHandles(X.i, Y.i)
    MyHandle(Str(#LD))\X = X.i
    MyHandle(Str(#LD))\Y = Y.i
    
    ; Poignée/Handle RD
    X.i = (\X + \L) - (HandleTaille / 2)
    CreateHandles(X.i, Y.i)
    MyHandle(Str(#RD))\X = X.i
    MyHandle(Str(#RD))\Y = Y.i
    
    ; Poignée/Handle MD
    X.i = (\X + (\L / 2)) - (HandleTaille / 2)
    CreateHandles(X.i, Y.i)
    MyHandle(Str(#MD))\X = X.i
    MyHandle(Str(#MD))\Y = Y.i
    
    Y.i = (\Y + (\H / 2)) - (HandleTaille / 2)
    X.i = \X - (HandleTaille / 2)
    
    CreateHandles(X.i, Y.i)
    MyHandle(Str(#LM))\X = X.i
    MyHandle(Str(#LM))\Y = Y.i
    
    X.i = (\X + \L) - (HandleTaille / 2)
    
    CreateHandles(X.i, Y.i)
    MyHandle(Str(#RM))\X = X.i
    MyHandle(Str(#RM))\Y = Y.i
    
  EndWith
  
EndProcedure

Procedure Exit()
  End
EndProcedure

; On ouvre la fenêtre.
FenetrePrincipale()

; On Dessine le canvas.
DrawCanvas()

; La boucle principale vide car ont gère les événements avec le BindEvent etc...
Repeat
  
  WaitWindowEvent(1)
  
ForEver
Processeur: Intel Core I7-4790 - 4 Cœurs - 8 Thread: 3.60 Ghz.
Ram: 32 GB.
Disque: C: SDD 250 GB, D: 3 TB.
Vidéo: NVIDIA GeForce GTX 960: 2 GB DDR5.
Écran: Asus VX248 24 Pouces: 1920 x 1080.
Système: Windows 7 64 Bits.

PureBasic: 5.60 x64 Bits.
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: [ TUTO ] Construire une interface graphique

Message par falsam »

J'ai testé ton code Shadow.

- Sélectionne button
- Dessine de droite à gauche

:!: Il ne se passe rien. Par contre de gauche à droite ça fonctionne.

- Sélectionne fleche et tu ne peux plus dessiner.
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Shadow
Messages : 1373
Inscription : mer. 04/nov./2015 17:39

Re: [ TUTO ] Construire une interface graphique

Message par Shadow »

C'est pas moi l'auteur du code Falsam :wink: , enfin je veux dire le système !
Je n'est fais que modifier à ma sauce et de plus c'est vraie que
c'est pas encore au point mais ça va venir avec la suite du tuto ^^

Pour la dernière partie j'ai ramé.
- Sélectionne button
- Dessine de droite à gauche
C'est normale ça Falsam parce que sinon ya des soucis
ta suivie le fil de la discutions ?

Bien que moi aussi ça ne me convienne pas trop
faudrait pouvoir dessiner aussi de bas en haut et droite à gauche.

Mais ça va venir je suis sur !
Je suis déjà heureux d'avoir réussi à faire ça grâce au tuto de Microdevweb !

J'ai remarqué aussi que si tu dessine sur d'autre Box, si tu en sélectionne
certain, certaine poignée ne s'affiche pas.
- Sélectionne fleche et tu ne peux plus dessiner.
Normale aussi, fait exprès, bien que ceci ne me convienne pas non plus.

J'ai hâte de voir la suite du tuto.

Si tu veux nous aider, hésite pas ^^
Merci à vous.
Processeur: Intel Core I7-4790 - 4 Cœurs - 8 Thread: 3.60 Ghz.
Ram: 32 GB.
Disque: C: SDD 250 GB, D: 3 TB.
Vidéo: NVIDIA GeForce GTX 960: 2 GB DDR5.
Écran: Asus VX248 24 Pouces: 1920 x 1080.
Système: Windows 7 64 Bits.

PureBasic: 5.60 x64 Bits.
Avatar de l’utilisateur
microdevweb
Messages : 1798
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: [ TUTO ] Construire une interface graphique

Message par microdevweb »

ça à l'air pal mal, du moins tu a compris et c'est le plus important. Par contre je ne vois pas la raison de ton

Code : Tout sélectionner

WaitWindowEvent(1)
Pourquoi poser un délais d'une milliseconde ? Je penses que cela est inutile.
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Avatar de l’utilisateur
microdevweb
Messages : 1798
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: [ TUTO ] Construire une interface graphique

Message par microdevweb »

@Shadow,

Je ne donne qu'un court exemple, le code mon rad est beaucoup plus complexe. A toi de définir suivant tes désirs les limites.

Exemple de ma gestion de poignées

Code : Tout sélectionner

Procedure HoverHandle()
      If *gTableHover<>*gTableSelected
            If *gTableHover<>-1
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_Hand)
            EndIf
            ProcedureReturn 
      EndIf
      With H_LU
            If (gMouseX>=\X And gMouseX<=(\X+\W)) And
               (gMouseY>=\Y And gMouseY<=(\Y+\W))
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_LeftUpRightDown)
                  gModeHandle$="H_LU"
                  ProcedureReturn 
            EndIf
      EndWith
      With H_RU
            If (gMouseX>=\X And gMouseX<=(\X+\W)) And
               (gMouseY>=\Y And gMouseY<=(\Y+\W))
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_LeftDownRightUp)
                  gModeHandle$="H_RU"
                  ProcedureReturn 
            EndIf
      EndWith
      With H_MU
            If (gMouseX>=\X And gMouseX<=(\X+\W)) And
               (gMouseY>=\Y And gMouseY<=(\Y+\W))
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_UpDown)
                  gModeHandle$="H_MU"
                  ProcedureReturn 
            EndIf
      EndWith
      With H_LD
            If (gMouseX>=\X And gMouseX<=(\X+\W)) And
               (gMouseY>=\Y And gMouseY<=(\Y+\W))
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_LeftDownRightUp)
                  gModeHandle$="H_LD"
                  ProcedureReturn 
            EndIf
      EndWith
      With H_RD
            If (gMouseX>=\X And gMouseX<=(\X+\W)) And
               (gMouseY>=\Y And gMouseY<=(\Y+\W))
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_LeftUpRightDown)
                  gModeHandle$="H_RD"
                  ProcedureReturn 
            EndIf
      EndWith
      With H_MD
            If (gMouseX>=\X And gMouseX<=(\X+\W)) And
               (gMouseY>=\Y And gMouseY<=(\Y+\W))
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_UpDown)
                  gModeHandle$="H_MD"
                  ProcedureReturn 
            EndIf
      EndWith
      With H_LM
            If (gMouseX>=\X And gMouseX<=(\X+\W)) And
               (gMouseY>=\Y And gMouseY<=(\Y+\W))
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_LeftRight)
                  gModeHandle$="H_LM"
                  ProcedureReturn 
            EndIf
      EndWith
      With H_RM
            If (gMouseX>=\X And gMouseX<=(\X+\W)) And
               (gMouseY>=\Y And gMouseY<=(\Y+\W))
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_LeftRight)
                  gModeHandle$="H_RM"
                  ProcedureReturn 
            EndIf
      EndWith
      SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_Arrows)
      gModeHandle$="MOV"
EndProcedure
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Shadow
Messages : 1373
Inscription : mer. 04/nov./2015 17:39

Re: [ TUTO ] Construire une interface graphique

Message par Shadow »

Microwebdev,

Le délais c'est parce que je préfère :)
Ensuite pour le reste si tu arrête le tuto ici, alors c'est mort pour moi.

D'ailleurs je serais incapable de le refaire de tête.
C'est très compliqué.

J’espère que tu va continuer car sinon moi je ne pourrait rien en faire.
Encore merci à toi.

Note: Je sais que ça te prends du temps, et que tu as d'autres chose à faire.
C'est pour ça que je t'en suis reconnaissant.

Mais si tu arrête ici, je serais très déçus parce que je me suis attaché
à ce projet et j'ai pris plaisir à le suivre, je m’investis dans ton tuto.

Je fais des efforts pour comprendre et refaire à ma sauce
comme tu as pue le voir, parce que je prends plaisir à la faire.

Mais oui, c'est vraiment chaud comme projet.
Cordialement.
Processeur: Intel Core I7-4790 - 4 Cœurs - 8 Thread: 3.60 Ghz.
Ram: 32 GB.
Disque: C: SDD 250 GB, D: 3 TB.
Vidéo: NVIDIA GeForce GTX 960: 2 GB DDR5.
Écran: Asus VX248 24 Pouces: 1920 x 1080.
Système: Windows 7 64 Bits.

PureBasic: 5.60 x64 Bits.
Avatar de l’utilisateur
microdevweb
Messages : 1798
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: [ TUTO ] Construire une interface graphique

Message par microdevweb »

Je ne compte pas l'arrêter, mais comprend que j'ai pas mal de travail avec mon projet. Je te conseille de bien analyser, si tu veux évoluer (ce que je te souhaite) comprend les choses, j'ai essayé d'être le plus clair possible bien sur je ne peux donné toutes les réponses. Les petit bug (limite on verra ça après) je te promet la suite prochainement, ce n'est pas mon habitude de ne pas terminer mon explication ou de laissé tombé quelqu'un. Donc rassure toi :wink:

Ps=Avec Waitwindow(1) tu surcharge le processeur qui ne va attendre un événement Window q'une milliseconde pour exécuter la suite qui est d'ailleurs vide. BIndEvend,BindGadgetEvent,BindMenuEvent font tout cela pour toi.
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Shadow
Messages : 1373
Inscription : mer. 04/nov./2015 17:39

Re: [ TUTO ] Construire une interface graphique

Message par Shadow »

Ah, alors j'en suis très très heureux crois le bien et je t'en suis vraiment très reconnaissant, le MP que je t'es envoyé le confirmera.
Pour le WaitWindowEvent(1), ok je l'es enlever -> WaitWindowEvent().
Processeur: Intel Core I7-4790 - 4 Cœurs - 8 Thread: 3.60 Ghz.
Ram: 32 GB.
Disque: C: SDD 250 GB, D: 3 TB.
Vidéo: NVIDIA GeForce GTX 960: 2 GB DDR5.
Écran: Asus VX248 24 Pouces: 1920 x 1080.
Système: Windows 7 64 Bits.

PureBasic: 5.60 x64 Bits.
Avatar de l’utilisateur
microdevweb
Messages : 1798
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: [ TUTO ] Construire une interface graphique

Message par microdevweb »

Voici la dernière partie qui reprend tous le code, bon je vais être sincère je ne suis vraiment pas content de moi car c'est codé de manière asse dégueulasse, mais gros tuto et manque de temps.

Code : Tout sélectionner

; Name: DrawGrid
; Author: MicrodevWeb
EnableExplicit
Enumeration 
      #MainForm
      #MainCanvas
EndEnumeration
Enumeration DrawMode
      #Select
      #DrawBox
EndEnumeration
Enumeration Handles
      #LU ;Gauche en haut /Left Up
      #RU ;Droite en haut /Rigth Up
      #MU ;Milieur en haut /midle Up
      #LD ;Gauche en bas /Left Down
      #RD ;Droite en bas /Rigth Down
      #MD ;Milieur en bas /midle Down
      #LM ; Gauche milieu /Left midle
      #RM ; Droite milieu /Right midle
      #Move ; Pas sur une poignée mais au centre
EndEnumeration
Global gDrawMode=#DrawBox
Global gGridSpace=10 ;L'espace entre les points
Global gGridColor=$2D52A0 ; La couleur du fond
Global gBgColor=$B3DEF5
Global gMouseX,gMouseY
Global gNewDraw.b=#False
Global gCurrentHandle
Structure Pos
      X.i
      Y.i
EndStructure
Structure PosAndSize Extends Pos
      W.i
      H.i
EndStructure
Structure Draw
      List myBox.PosAndSize()
EndStructure
Global NewList myDraw.Draw()
Global gOldMouse.Pos
Global gTmpDraw.PosAndSize
Global gOldObjet.PosAndSize
Global NewMap myHandle.Pos()
; On crée les map
Define N
For N=0 To #RM
      AddMapElement(myHandle(),Str(N))
Next
Global gClicOn.b=#False
Global gTmpImg
Global gTypeObjet
Global *gCurrentObjet=-1
Global *gObjectSelected=-1
Global gHandleSize=8,gHandleColor=$696969
Global gModified.b=#False    
Declare DrawCanvas()
Procedure Exit()
      End
EndProcedure
Procedure ItsHoverObject()
      ; On est sur rien
      *gCurrentObjet=-1
      gTypeObjet=-1
      ForEach myDraw()
            ForEach myDraw()\myBox()
                  With myDraw()\myBox()
                        If (gMouseX>=\X And gMouseX<=(\X+\W)) And (gMouseY>=\Y And gMouseY<=(\Y+\H))
                              *gCurrentObjet=@myDraw()\myBox()
                              gTypeObjet=#DrawBox
                              ProcedureReturn #True
                        EndIf
                  EndWith
            Next
      Next
      ProcedureReturn #False
EndProcedure
Procedure ChangeCursor()
      Select gCurrentHandle
            Case #MD,#MU  ;Milieur Bas et Milieu haut
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_UpDown)
            Case #LM,#RM ;Milieur gauche et milieu droit
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_LeftRight)
            Case #LU,#RD ;Gauche Haut,Droite Bas
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_LeftUpRightDown)
            Case #RU,#LD ;Droit haut, Gauche bas
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_LeftDownRightUp)
            Case #Move
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_Arrows)
      EndSelect
EndProcedure
Procedure ItsHoverHandle()
      ; Si pas d'objet sélectionné on sort
      gCurrentHandle=-1
      If *gObjectSelected=-1
            ProcedureReturn #False
      EndIf
      Protected N
      ; On parcourt toutes les poignées
      For N=#LU To #RM
            FindMapElement(myHandle(),Str(N))
            With myHandle()
                  If gMouseX>=\X And gMouseX<=(\X+gHandleSize)
                        If gMouseY>=\Y And gMouseY<=(\Y+gHandleSize)
                              gCurrentHandle=N
                              ChangeCursor()
                              ProcedureReturn #True
                        EndIf
                  EndIf
            EndWith
      Next
      If ItsHoverObject()
            gCurrentHandle=#Move
            ChangeCursor()
            ProcedureReturn #True
      EndIf
      ;       ProcedureReturn #False
EndProcedure
Procedure WhereIsMouse()
      ; On est sur une poignée
      If ItsHoverHandle()
            ProcedureReturn #True
      EndIf
      ; On est sur un objet
      If ItsHoverObject()
            SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_Hand)
            ProcedureReturn #True
      EndIf
      
      ProcedureReturn #False
EndProcedure
Procedure DrawPrevBox()
      StartVectorDrawing(CanvasVectorOutput(#MainCanvas))
      ; J'efface en premier le canvas, avec l'image temporaire
      MovePathCursor(0,0)
      DrawVectorImage(ImageID(gTmpImg))
      ; Je dessine maintenant le box
      With gTmpDraw
            AddPathBox(\X,\Y,\W,\H)
            ; ATTENTION couleur RGBA donc avec alpha
            VectorSourceColor(RGBA(0, 255, 127, 255))
            DotPath(2,8)
      EndWith
      StopVectorDrawing()
EndProcedure
Procedure ManageDraw()
      ;On calcul le déplacement
      Protected DisplacX=gMouseX-gOldMouse\X
      Protected DisplacY=gMouseY-gOldMouse\Y
      Select gDrawMode
            Case #DrawBox  
                  If gMouseX>GadgetWidth(#MainCanvas)
                        ProcedureReturn 
                  EndIf
                  If gMouseX<0
                        ProcedureReturn 
                  EndIf
                  If gMouseY>GadgetHeight(#MainCanvas)
                        ProcedureReturn 
                  EndIf
                  If gMouseY<0
                        ProcedureReturn 
                  EndIf
                  gTmpDraw\X=gOldMouse\X
                  gTmpDraw\Y=gOldMouse\Y
                  gTmpDraw\W=DisplacX
                  gTmpDraw\H=DisplacY
                  DrawPrevBox()
      EndSelect
      gNewDraw=#True
EndProcedure
Procedure AddNewBox()
      AddElement(myDraw())
      AddElement(myDraw()\myBox())
      With myDraw()\myBox()
            \X=gTmpDraw\X
            \Y=gTmpDraw\Y
            \W=gTmpDraw\W
            \H=gTmpDraw\H
      EndWith
      DrawCanvas()
EndProcedure
Procedure ManageRedim()
      ;On calcul le déplacement
      Protected DisplacX=gMouseX-gOldMouse\X
      Protected DisplacY=gMouseY-gOldMouse\Y
      Select gCurrentHandle
            Case #Move   ;Déplacement
                  gTmpDraw\X=gOldObjet\X+DisplacX
                  gTmpDraw\Y=gOldObjet\Y+DisplacY
                  gTmpDraw\W=gOldObjet\W
                  gTmpDraw\H=gOldObjet\H
                  gModified=#True
                  DrawPrevBox()
            Case #RM
                  gTmpDraw\X=gOldObjet\X
                  gTmpDraw\Y=gOldObjet\Y
                  gTmpDraw\W=gOldObjet\W+DisplacX
                  gTmpDraw\H=gOldObjet\H
                  gModified=#True
                  DrawPrevBox()
            Case #MD
                  gTmpDraw\X=gOldObjet\X
                  gTmpDraw\Y=gOldObjet\Y
                  gTmpDraw\W=gOldObjet\W
                  gTmpDraw\H=gOldObjet\H+DisplacY
                  gModified=#True
                  DrawPrevBox()
            Case #MU
                  gTmpDraw\X=gOldObjet\X
                  gTmpDraw\Y=gOldObjet\Y+DisplacY
                  gTmpDraw\W=gOldObjet\W
                  gTmpDraw\H=gOldObjet\H-DisplacY
                  gModified=#True
                  DrawPrevBox()
            Case #LM
                  gTmpDraw\X=gOldObjet\X+DisplacX
                  gTmpDraw\Y=gOldObjet\Y
                  gTmpDraw\W=gOldObjet\W-DisplacX
                  gTmpDraw\H=gOldObjet\H
                  gModified=#True
                  DrawPrevBox()
            Case #RD
                  gTmpDraw\X=gOldObjet\X
                  gTmpDraw\Y=gOldObjet\Y
                  gTmpDraw\W=gOldObjet\W+DisplacX
                  gTmpDraw\H=gOldObjet\H+DisplacY
                  gModified=#True
                  DrawPrevBox()
            Case #LD
                  gTmpDraw\X=gOldObjet\X+DisplacX
                  gTmpDraw\Y=gOldObjet\Y
                  gTmpDraw\W=gOldObjet\W-DisplacX
                  gTmpDraw\H=gOldObjet\H+DisplacY
                  gModified=#True
                  DrawPrevBox()
            Case #RU
                  gTmpDraw\X=gOldObjet\X
                  gTmpDraw\Y=gOldObjet\Y+DisplacY
                  gTmpDraw\W=gOldObjet\W+DisplacX
                  gTmpDraw\H=gOldObjet\H-DisplacY
                  gModified=#True
                  DrawPrevBox()
            Case #LU
                  gTmpDraw\X=gOldObjet\X+DisplacX
                  gTmpDraw\Y=gOldObjet\Y+DisplacY
                  gTmpDraw\W=gOldObjet\W-DisplacX
                  gTmpDraw\H=gOldObjet\H-DisplacY
                  gModified=#True
                  DrawPrevBox()     
      EndSelect
      ChangeCursor()
EndProcedure
Procedure EventCanvas()
      Select EventType()
            Case #PB_EventType_MouseMove
                  ; Savoir ou l'on est ?
                  ; Je mémorise les position de la souris sur le canvas
                  gMouseX=GetGadgetAttribute(#MainCanvas,#PB_Canvas_MouseX)
                  gMouseY=GetGadgetAttribute(#MainCanvas,#PB_Canvas_MouseY)
                  If Not gClicOn And gDrawMode=#Select
                        If WhereIsMouse():ProcedureReturn :EndIf
                  ElseIf gClicOn And gDrawMode<>#Select
                        ManageDraw()
                  ElseIf gClicOn And gCurrentHandle<>-1
                        ManageRedim()
                        ProcedureReturn 
                  EndIf
            Case #PB_EventType_LeftButtonDown
                  If Not gClicOn
                        ; On mémorise la position de la souris pour le calcul du déplacement
                        gOldMouse\X=gMouseX
                        gOldMouse\Y=gMouseY
                        ; On mémorise l'ancienne position de l'objet
                        If *gObjectSelected<>-1
                              ChangeCurrentElement(myDraw()\myBox(),*gObjectSelected)
                              gOldObjet\X=myDraw()\myBox()\X
                              gOldObjet\Y=myDraw()\myBox()\Y
                              gOldObjet\W=myDraw()\myBox()\W
                              gOldObjet\H=myDraw()\myBox()\H
                        EndIf
                        ; Aucun objet sélectionner/No object selected
                        If *gCurrentObjet=-1                       
                              *gObjectSelected=-1
                        EndIf
                  EndIf
                  gClicOn=#True ; Signale que l'on clique sur le bt gauche
            Case #PB_EventType_LeftButtonUp
                  If gNewDraw
                        Select gDrawMode
                              Case #DrawBox
                                    AddNewBox()
                        EndSelect
                  ElseIf gDrawMode=#Select And *gCurrentObjet<>-1 And Not gModified
                        *gObjectSelected=*gCurrentObjet
                        DrawCanvas()
                  ElseIf gModified
                        myDraw()\myBox()\X=gTmpDraw\X
                        myDraw()\myBox()\Y=gTmpDraw\Y
                        myDraw()\myBox()\W=gTmpDraw\W
                        myDraw()\myBox()\H=gTmpDraw\H
                        gModified=#False
                        DrawCanvas()
                  EndIf
                  gNewDraw=#False
                  gClicOn=#False ;Le bt gauche est relaché
      EndSelect
      Select gDrawMode
            Case #DrawBox
                  SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_Cross) 
            Case #Select
                  If Not gModified
                        SetGadgetAttribute(#MainCanvas,#PB_Canvas_Cursor,#PB_Cursor_Default) 
                  EndIf
      EndSelect
EndProcedure
Procedure ChangeModeDraw()
      Select EventMenu()
            Case 0 ;Mode ajout d'objet/Add object mode
                  gDrawMode=#DrawBox
            Case 1 ;Mode édition / Edit mode
                  gDrawMode=#Select
      EndSelect
EndProcedure
Procedure OpenMainForm()
      Protected Flag=#PB_Window_SystemMenu|#PB_Window_Maximize
      ; Ouverture de la fenêtre
      OpenWindow(#MainForm,0,0,800,600,"Dssin d'une grille",Flag)
      ; Création du canvas
      CanvasGadget(#MainCanvas,0,0,WindowWidth(#MainForm),WindowHeight(#MainForm))
      ; On creé l'image temporaire
      gTmpImg=CreateImage(#PB_Any,GadgetWidth(#MainCanvas),GadgetHeight(#MainCanvas))
      ; On place un Callback pour la fernmeture de la fenêtre
      BindEvent(#PB_Event_CloseWindow,@Exit(),#MainForm)
      ; On place un Callback pour la gestion des evenement sur le canvas
      BindGadgetEvent(#MainCanvas,@EventCanvas())
      ; Ajout de raccourcis clavier,/Add keyboard shorcut
      AddKeyboardShortcut(#MainForm,#PB_Shortcut_A,0)
      AddKeyboardShortcut(#MainForm,#PB_Shortcut_E,1)
      BindEvent(#PB_Event_Menu,@ChangeModeDraw(),#MainForm)
EndProcedure
Procedure DrawGrid()
      Protected X=gGridSpace,Y=gGridSpace
      ; Déplacement du point de la grille sur l'absice des X
      While X<GadgetWidth(#MainCanvas)
            Y=gGridSpace ; On redémare en haut
            While Y<GadgetHeight(#MainCanvas)
                  Plot(X,Y,gGridColor)
                  Y+gGridSpace ; On déplace le point sur Y
            Wend
            X+gGridSpace ; On déplace le point sur X
      Wend
EndProcedure
Procedure DrawBox()
      With myDraw()\myBox()
            Box(\X,\Y,\W,\H,RGB(255, 0, 0))
      EndWith
EndProcedure
Procedure DrawHandles()
      Protected X,Y
      If @myDraw()\myBox()<>*gObjectSelected
            ProcedureReturn 
      EndIf
      With myDraw()\myBox()
            Y=\Y-(gHandleSize/2)
            ; Poignée/Handle LU
            X=\X-(gHandleSize/2)
            Box(X,Y,gHandleSize,gHandleSize,gHandleColor)
            myHandle(Str(#LU))\X=X
            myHandle(Str(#LU))\Y=Y
            ; Poignée/Handle RU
            X=(\X+\W)-(gHandleSize/2)
            Box(X,Y,gHandleSize,gHandleSize,gHandleColor)
            myHandle(Str(#RU))\X=X
            myHandle(Str(#RU))\Y=Y
            ; Poignée/Handle MU
            X=(\X+(\W/2))-(gHandleSize/2)
            Box(X,Y,gHandleSize,gHandleSize,gHandleColor)
            myHandle(Str(#MU))\X=X
            myHandle(Str(#MU))\Y=Y
            Y=(\Y+\H)-(gHandleSize/2)
            ; Poignée/Handle LD
            X=\X-(gHandleSize/2)
            Box(X,Y,gHandleSize,gHandleSize,gHandleColor)
            myHandle(Str(#LD))\X=X
            myHandle(Str(#LD))\Y=Y
            ; Poignée/Handle RD
            X=(\X+\W)-(gHandleSize/2)
            Box(X,Y,gHandleSize,gHandleSize,gHandleColor)
            myHandle(Str(#RD))\X=X
            myHandle(Str(#RD))\Y=Y
            ; Poignée/Handle MD
            X=(\X+(\W/2))-(gHandleSize/2)
            Box(X,Y,gHandleSize,gHandleSize,gHandleColor)
            myHandle(Str(#MD))\X=X
            myHandle(Str(#MD))\Y=Y
            
            Y=(\Y+(\H/2))-(gHandleSize/2)
            X=\X-(gHandleSize/2)
            Box(X,Y,gHandleSize,gHandleSize,gHandleColor)
            myHandle(Str(#LM))\X=X
            myHandle(Str(#LM))\Y=Y
            X=(\X+\W)-(gHandleSize/2)
            Box(X,Y,gHandleSize,gHandleSize,gHandleColor)
            myHandle(Str(#RM))\X=X
            myHandle(Str(#RM))\Y=Y
      EndWith
EndProcedure
Procedure DrawOblect()
      ForEach myDraw()
            With myDraw()
                  ForEach \myBox()
                        DrawBox()
                        DrawHandles()
                  Next
            EndWith
      Next
EndProcedure 
Procedure DrawTmpImg()
      StartDrawing(ImageOutput(gTmpImg))
      ; Efface l'image
      Box(0,0,GadgetWidth(#MainCanvas),GadgetHeight(#MainCanvas),gBgColor)
      ; Dessin de la grille
      DrawGrid()
      DrawOblect() ; Dessine nos objets
      StopDrawing()
EndProcedure
Procedure DrawCanvas()
      DrawTmpImg()
      StartDrawing(CanvasOutput(#MainCanvas))
      ; Dessin de l'image temporaire
      DrawImage(ImageID(gTmpImg),0,0)
      StopDrawing()
EndProcedure
;-* Run programme
; --> les procédures qui seront lancées au lancement du programme
; On ouvre la fenêtre
; On Dessine le canvas
OpenMainForm()
DrawCanvas()
;}
;-* Main loop
; --> la boucle principale vide car je gère les évenement avec le BindEvent etc...
Repeat :WaitWindowEvent():ForEver
;}
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Shadow
Messages : 1373
Inscription : mer. 04/nov./2015 17:39

Re: [ TUTO ] Construire une interface graphique

Message par Shadow »

Coucou,

Enfin ! :D
T’inquiète pas pour ton code, j'en est assez manger pour pouvoir m'y retrouvé ^^

Par contre ça va être un peut chaud pour voir
les modifs mais vais me débrouillé.

Encore merci à toi.
Processeur: Intel Core I7-4790 - 4 Cœurs - 8 Thread: 3.60 Ghz.
Ram: 32 GB.
Disque: C: SDD 250 GB, D: 3 TB.
Vidéo: NVIDIA GeForce GTX 960: 2 GB DDR5.
Écran: Asus VX248 24 Pouces: 1920 x 1080.
Système: Windows 7 64 Bits.

PureBasic: 5.60 x64 Bits.
Répondre