détection de Gadget sur une image ?

[Golfy]

Bonjour,

dans le cadre d'un projet domotique, je souhaite créer une interface "homme-machine" avec :
- un plan de maison/appartement en fond
- des objets graphiques de type Volet, Lampe, Prise, Température, Interrupteur... cliquable
- des objets graphiques type courbe graphique

Malheureusement, je ne connais pas assez Purebasic pour déterminer ce qui serait le mieux, notamment en terme de détection. Comment procéderiez-vous ?

[Jacobus]

Je verrai,
1/ ton image de maison en arrière plan de ta fenêtre sur laquelle...
2/ je disposerai des ImageGadget() aux coordonnées des portes, volets, etc... avec des GrabImage() des dits objets pour Images
3/ ImageGadget() supporte la détection des évènements genre EventType, donc avec un MouseEvent, ou sans d'ailleurs, sur tes images tu peux faire ce que tu veux
4/ pour les courbes de graph, même principe, un GrabImage() de la partie concernée que tu redessines après avoir ajouté dessus tes courbes avec les fonctions 2D

Par contre il ne faut pas que tes objets (portes et fenêtres) soient en perspectives ou alors il faut inclure l'ombre ou l'espace ouvert dans ton image.

Bref, sais pas si c'est suffisamment clair mais c'est le plus simple qui me vienne à l'esprit sans chercher plus loin.

@+

[Golfy]

Merci Jacobus !

j'ai donc tenté un exemple de l'aide Purebasic mais si je passe la fenêtre du débogueur sur ma fenêtre, les ampoules disparaissent... pourquoi ? la superposition d'ImageGadget est "surprenante"...

Code : Tout sélectionner

   If OpenWindow(0, 0, 0, 945, 705, "ImageGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    If LoadImage(0, "Domotique - RdC.bmp")    ; plan de fond
      LoadImage(1, "ampoule1.bmp")            ; ampoule allumée
      LoadImage(2, "ampoule0.bmp")            ; ampoule éteinte
      ImageGadget(1, 30, 90, 30, 30, ImageID(1))
      ImageGadget(2, 330, 90, 30, 30, ImageID(1))
      ImageGadget(3, 330, 500, 30, 30, ImageID(2))
      ImageGadget(0,  0, 0, 100, 83, ImageID(0))                      ; imagegadget standard
    EndIf
    
    Repeat
      Event = WaitWindowEvent()
      Select Event
        Case #PB_Event_Gadget
          Gadgetchoix = EventGadget()
          GadgetClic = EventType()
              Select EventType()
                Case #PB_EventType_LeftClick
                  Debug "Clic gauche sur"+Str(Gadgetchoix)
                  IDImage = GetGadgetState(Gadgetchoix)
                  If IDImage = 1
                    Debug "State 1"
                    SetGadgetState(Gadgetchoix,ImageID(2))
                  Else
                    Debug "State 2"
                    SetGadgetState(Gadgetchoix,ImageID(1))
                  EndIf
                  
                 Case #PB_EventType_RightClick       : Debug "Clic droit sur"+Str(Gadgetchoix)
                 ;Case #PB_EventType_LeftDoubleClick  : Debug "Double-clic avec le bouton gauche de la souris"
                 ;Case #PB_EventType_RightDoubleClick : Debug "Double-clic avec le bouton droit de la souris"
              EndSelect
      EndSelect
    Until Event = #PB_Event_CloseWindow
  EndIf

De plus, l'ampoule n°3 change d'état une fois, les autres, jamais...

[falsam]

Les images sont elles bien dans le même dossier que le code ?
Le code est il bien enregistré ? (Nom différent de nouveau .....sisi ça arrive :p)
Tes images sont bien aux vrais formats bmp ? (j'ai vu des images bmp avec une couche Alpha)

Pourrais tu télécharger ce fichier zip qui reprend ton code ainsi que des images (bmp)

[Jacobus]

Voici un exemple qui fonctionne très bien, tiré d'un code du forum anglais pour un skin window avec png. Je l'ai adapté pour ton cas précis et ça devrait le faire.
Impératif: les images doivent être au format png avec transparence (l'effet en est d'autant plus sympa)
- Pour déplacer la fenêtre, maintenir le curseur sur la surface du plan bouton gauche enfoncé.
- Pour rendre les objets cliquables apparents, changement du curseur standard par un curseur perso lorsque la souris est au dessus de l'objet
- Ajout: gestion des évènements souris; code de Netmaestro (EN)
- Ajout: chaque image cliquable ouvre une imagette par clic gauche au dessus d'elle même.
Code en PB 4.51

L'image de fond utilisée dispo ici: Plan de maison
Le curseur utilisé dispo ici: Epée Laser 01

Code : Tout sélectionner

;IMAGE DE FOND => http://www.wolforan.com/images/Autres_images/Plan%20maison.png
;CURSEUR => http://www.wolforan.com/images/Autres_images/EpéeLaser01.cur

#AC_SRC_OVER = $0
#AC_SRC_ALPHA = $1
#ULW_ALPHA = $2
;-Mouse over de NetMaestro
#CUSTOM_MSG_MOUSEENTER = #WM_APP+1
#CUSTOM_MSG_MOUSELEAVE = #WM_APP+2
Structure HDATA
  oldproc.i
  tracking.i
EndStructure
Import "Gadget.lib"
  PB_Gadget_SendGadgetCommand(hwnd, command)
EndImport
Procedure HoverProc(hwnd, msg, wparam, lparam)
  
  *hData.HDATA = GetProp_(hwnd, "hdata")
  Protected oldproc = *hData\oldproc
  
  Select msg
    Case #WM_NCDESTROY
      RemoveProp_(hwnd, "hdata")
      FreeMemory(*hData)
      
    Case #WM_MOUSEMOVE
      If Not *hData\tracking
        *hData\tracking = #True
        PB_Gadget_SendGadgetCommand(hwnd, #CUSTOM_MSG_MOUSEENTER)
        With tm.TRACKMOUSEEVENT
          \cbSize = SizeOf(TRACKMOUSEEVENT)
          \dwFlags = #TME_LEAVE 
          \hwndTrack = hwnd
        EndWith
        TrackMouseEvent_(@tm)
        CallWindowProc_(oldproc, hwnd, msg, wparam, lparam)
        ProcedureReturn 0
      EndIf
      
    Case #WM_MOUSELEAVE
      PB_Gadget_SendGadgetCommand(hwnd, #CUSTOM_MSG_MOUSELEAVE)
      *hData\tracking = #False
      CallWindowProc_(oldproc, hwnd, msg, wparam, lparam)
      ProcedureReturn 0
      
  EndSelect
  ProcedureReturn CallWindowProc_(oldproc, hwnd, msg, wparam, lparam)
EndProcedure
ProcedureDLL EnableHoverEvents(gadget)
  *hData.HDATA = AllocateMemory(SizeOf(HDATA))
  *hData\tracking = #False
  *hData\oldproc = SetWindowLongPtr_(GadgetID(gadget),#GWL_WNDPROC, @HoverProc())
  ProcedureReturn SetProp_(GadgetID(gadget), "hdata", *hData)
EndProcedure


Macro WindowAlphaInit(WindowNr)
  SetWindowLongPtr_(WindowID(WindowNr), #GWL_EXSTYLE, GetWindowLongPtr_(WindowID(WindowNr), #GWL_EXSTYLE) | #WS_EX_LAYERED)
EndMacro

Macro WindowAlphaColor(WindowNr, Color)
  SetLayeredWindowAttributes_(WindowID(WindowNr), Color, 0, #LWA_COLORKEY)
EndMacro

Procedure WindowAlphaImage(WindowNr, ImageNr, Alpha=$FF)
  Protected ImageID, X, Y, Width, Height
  Protected hDC, bmi.BITMAPINFO, pt.POINT, Blend.BLENDFUNCTION
  Protected Color, R, G, B, A
  Protected Result = #False
  
  If IsImage(ImageNr) = 0 Or ImageDepth(ImageNr) <> 32 : ProcedureReturn Result : EndIf
  
  
  ImageID = ImageID(ImageNr)
  Width = ImageWidth(ImageNr)
  Height = ImageHeight(ImageNr)
  
  ; Precalculate scale:
  Protected Dim Scale.f($FF)
  For X = 0 To $FF
    Scale(X) = X / $FF
  Next
  
  ; Prepare array size:
  Protected Dim Image.l(Width - 1, Height - 1)
  
  
  hDC = StartDrawing(ImageOutput(ImageNr))
  If hDC
    With bmi\bmiHeader
      \biSize = SizeOf(BITMAPINFOHEADER)
      \biWidth = Width
      \biHeight = Height
      \biPlanes = 1
      \biBitCount = 32
      \biCompression = #BI_RGB
    EndWith
    
    GetDIBits_(hDC, ImageID, 0, Height, @Image(), @bmi, #DIB_RGB_COLORS)  ; Copy image to memory
    
    ; Modify memory:
    For Y = 0 To Height - 1
      For X = 0 To Width - 1
        Color = Image(X, Y)
        A = Alpha(Color)
        If A < $FF
          R = Red(Color) * Scale(A)
          G = Green(Color) * Scale(A)
          B = Blue(Color) * Scale(A)
          Image(X, Y) = RGBA(R, G, B, A)
        EndIf
      Next
    Next
    
    SetDIBits_(hDC, ImageID, 0, Height, @Image(), @bmi, #DIB_RGB_COLORS)  ; Copy memory back to image
    
    
    ; Set image to window background:
    With Blend
      \BlendOp = #AC_SRC_OVER
      \BlendFlags = 0
      \SourceConstantAlpha = Alpha
      \AlphaFormat = #AC_SRC_ALPHA
    EndWith
    
    Result = UpdateLayeredWindow_(WindowID(WindowNr), #Null, #Null, @bmi + SizeOf(Long), hDC, @pt, 0, @Blend, #ULW_ALPHA)
    
    StopDrawing()
  EndIf
  
  ProcedureReturn Result
EndProcedure

Procedure MainCallback(hWnd, uMsg, wParam, lParam)
  Protected Result = #PB_ProcessPureBasicEvents       
  
  Select uMsg               
    Case #WM_SIZE, #WM_MOVE, #WM_PAINT         
      ResizeWindow(0, WindowX(1), WindowY(1), #PB_Ignore, #PB_Ignore)
  EndSelect   
  
  ProcedureReturn Result
EndProcedure

Procedure WindowImageGadgetResized(GadgImg, GrabImg, ResImg, posx, posy, dimw, dimy)
  ; GadgImg = n° du gadget, 
  ; GrabImg = n° du GrabImage, 
  ; ResImg = nouvelle image redimensionnée, 
  ; posx, posy, dimw, dimy = coordonnées de l'image à découpée et à recréer
  GrabImage(GrabImg, ResImg, posx, posy, dimw, dimy)          
  ResizeImage(ResImg,dimw*2,dimy*2) ; on double la taille de l'image
  Larg = ImageWidth(ResImg) : Haut = ImageHeight(ResImg) : Rx = GadgetX(GadgImg): Ry = GadgetY(GadgImg) : xw = WindowX(0): yw = WindowY(0) 
  If OpenWindow(3, xw + Rx , yw + Ry + 10, Larg, Haut, "" ,#PB_Window_BorderLess); #PB_Window_SystemMenu|#PB_Window_Tool )
    StickyWindow(3,1)
    nimg = ImageGadget(#PB_Any,0,0,WindowWidth(3),WindowHeight(3),ImageID(ResImg))
    Repeat
      Select WaitWindowEvent()
        Case #PB_Event_Gadget
          If EventGadget() = nimg
            Select EventType()
              Case #PB_EventType_LeftClick
                Break
            EndSelect   								          
          EndIf   								       
        Case #PB_Event_CloseWindow : quit = 1
      EndSelect    								        
    Until quit = 1
    If IsImage(ResImg) <> 0
      FreeImage(ResImg)
    EndIf 
    CloseWindow(3)
  EndIf 
EndProcedure


Curseur$ = "EpéeLaser01.cur"
UsePNGImageDecoder()

If LoadImage(1,"Plan maison.png") ; image pour le fond
  
  If OpenWindow(0, 0, 0, ImageWidth(1), ImageHeight(1), "Plan de la maison", #PB_Window_BorderLess | #PB_Window_Invisible | #PB_Window_ScreenCentered) 
    WindowAlphaInit(0)
    WindowAlphaImage(0, 1)
    ;Une fenête pour les gadgets
    If OpenWindow(1, 0, 0, ImageWidth(1), ImageHeight(1), "", #PB_Window_BorderLess | #PB_Window_Invisible | #PB_Window_ScreenCentered, WindowID(0))
      SetWindowColor(1, $FF00FF)
      WindowAlphaInit(1)
      WindowAlphaColor(1, $FF00FF)
      
      ;Dans l'exemple on prend la voiture comme image inter active...
      GrabImage(1, 0, 467,197,44,74) ;coordonnées obtenues avant avec le code commenté dans la boucle       
      ImageGadget(0,467,197,44,74,ImageID(0)) ;image recréée avec              
      ; et aussi la chambre 2        
      GrabImage(1, 4, 83,81,75,60)     
      ImageGadget(4,83,81,75,60,ImageID(4))
      
      ;Sur l'image de fond, un panneau d'information
      TextGadget(10,(ImageWidth(1) - 80)/2, 100, 300, 30, "")
      SetGadgetColor(10,#PB_Gadget_BackColor,RGB(255,255,255))
      SetGadgetColor(10,#PB_Gadget_FrontColor,RGB(81, 120, 174))
      
      ;On place un bouton en dehors de la zone du plan (on peut en mettre plusieurs ce qui est intéressant...
      ButtonGadget(3, (ImageWidth(1) - 150), (ImageHeight(1) - 30), 150, 30, "Close window")         
      ;Appel de la callback
      SetWindowCallback(@MainCallback(), 1)
      ;On affiche les fenêtres
      HideWindow(0, #False)
      HideWindow(1, #False)
      ;on active le mouse event
      EnableHoverEvents(0) 
      EnableHoverEvents(4)
      
      Repeat
        ;POUR OBTENIR LES COORDONNEES X ET Y SUR LA FENETRE
        ;PERMET DE CREER ET PLACER TES IMAGES BOUTONS SUR LES CORRESPONDANCES DU FOND
        ;                If WaitWindowEvent()
        ;                   GetCursorPos_(@cp.point)
        ;                   GetWindowRect_(WindowID(0),gr.RECT)
        ;                   If PtInRect_(@gr,PeekQ(@cp))
        ;                      MapWindowPoints_(#Null, WindowID(0),cp,1)
        ;                      Debug Str(cp\x)+"\"+Str(cp\y) 
        ;                   EndIf
        ;                   ;EndIf
        ;                 EndIf
        
        Select WaitWindowEvent()
            
          Case #PB_Event_Gadget
            If EventGadget() = 3
              Break
            EndIf
            
            If EventGadget() =  0  ;{
              Select EventType()
                Case #PB_EventType_LeftClick
                  SetGadgetText(10,"Affichage de la voiture redimensionnée, cool!"+Chr(10)+"Clic gauche sur l'agrandissement pour le fermer")    								  
                  WindowImageGadgetResized(0, 1, ResImg = 100, 467,197,44,74)   								  
                Case #PB_EventType_RightClick 
                  SetGadgetText(10,"Clic droit sur la voiture")
                Case #CUSTOM_MSG_MOUSEENTER ; sur le gadget
                  hCurseur = LoadCursorFromFile_(Curseur$)
                  SetSystemCursor_(hCurseur,#OCR_NORMAL)
                  DestroyCursor_(hCurseur)
                  SetGadgetText(10, "Cliquez dessus pour voir")
                Case #CUSTOM_MSG_MOUSELEAVE ;quitte le gadget
                  SystemParametersInfo_(#SPI_SETCURSORS,0,#Null,0)
                  SetGadgetText(10,  "")
              EndSelect
              ;}
            EndIf 
            
            If EventGadget() =  4  ;{
              Select EventType()
                Case #PB_EventType_LeftClick
                  SetGadgetText(10,"Affichage de la chambre 2 redimensionnée, cool!"+Chr(10)+"Clic gauche sur l'agrandissement pour le fermer")    								  
                  WindowImageGadgetResized(4, 1, ResImg = 100, 83,81,75,60)    								  
                Case #PB_EventType_RightClick 
                  SetGadgetText(10,"Clic droit sur la chambre 2")
                Case #CUSTOM_MSG_MOUSEENTER ; sur le gadget
                  hCurseur = LoadCursorFromFile_(Curseur$)
                  SetSystemCursor_(hCurseur,#OCR_NORMAL)
                  DestroyCursor_(hCurseur)
                  SetGadgetText(10, "Cliquez dessus pour voir")
                Case #CUSTOM_MSG_MOUSELEAVE ;quitte le gadget
                  SystemParametersInfo_(#SPI_SETCURSORS,0,#Null,0)
                  SetGadgetText(10,  "")
              EndSelect
              ;}
            EndIf 
            
            
          Case #WM_LBUTTONDOWN
            SendMessage_(WindowID(1), #WM_NCLBUTTONDOWN, #HTCAPTION, 0)
        EndSelect
      ForEver
      SystemParametersInfo_(#SPI_SETCURSORS,0,#Null,0)
      For im = 0 To 5
        If IsImage(im) <> 0
          FreeImage(im)
        EndIf
      Next           
    EndIf
  EndIf
EndIf  

Amusez vous bien @+

[Jacobus]

Edition du code ci-dessus avec ajout de fonctions et effets.
@+

[Golfy]

Bonjour Jacobus et merci pour le programme en PNG mais pour ma part je n'en suis pas si loin
Il faut déjà que j'arrive à associer l'état de la domotique avec l'état des images (ou maintenant des boutons).

Voici les images et le nouveau programme, il ne me reste qu'un bug : si la fenêtre est couverte par une application, quand je reviens dessus les boutons ont disparus. En passant la souris aux endroits ou ils sont, ils réapparaissent

http://www.2shared.com/file/m-IM9mhp/test_plan.html

Code : Tout sélectionner

  If OpenWindow(0, 0, 0, 945, 705, "ImageGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_MinimizeGadget)
    If LoadImage(0, "Domotique - RdC.bmp")    ; plan de fond
      LoadImage(1, "ampoule0.bmp")            ; ampoule éteinte
      LoadImage(2, "ampoule1.bmp")            ; ampoule allumée
      LoadImage(3, "blind0.bmp")              ; volet UP
      LoadImage(4, "blind1.bmp")              ; volet Down
      
      ButtonImageGadget(1, 30, 90, 40, 40, ImageID(1), #PB_Button_Toggle)
      ButtonImageGadget(2, 330, 90, 40, 40, ImageID(1), #PB_Button_Toggle)
      ButtonImageGadget(3, 330, 500, 40, 40, ImageID(2), #PB_Button_Toggle)
      ButtonImageGadget(4, 330, 600, 40, 40, ImageID(3), #PB_Button_Toggle)
      ImageGadget(0,  0, 0, 100, 83, ImageID(0))                      ; imagegadget standard
    EndIf
    
    Repeat
      Event = WaitWindowEvent()
      Select Event
        Case #PB_Event_Gadget
          Gadgetchoix = EventGadget()
          GadgetClic = EventType()
              Select EventType()
                Case #PB_EventType_LeftClick
                  IDImage = GetGadgetState(Gadgetchoix)
                  Debug "Clic gauche sur "+Str(Gadgetchoix)+" ==> Old Status : "+Str(IDImage)
                  If IDImage = 1  ; pressé
                    Select Gadgetchoix
                      Case 1, 2, 3
                        SetGadgetAttribute(Gadgetchoix,#PB_Button_Image, ImageID(2))
                      Case 4
                        SetGadgetAttribute(Gadgetchoix,#PB_Button_Image, ImageID(4))
                      EndSelect
                  Else            ; relaché
                    Select Gadgetchoix
                      Case 1, 2, 3
                        SetGadgetAttribute(Gadgetchoix,#PB_Button_Image, ImageID(1))
                      Case 4
                        SetGadgetAttribute(Gadgetchoix,#PB_Button_Image, ImageID(3))
                      EndSelect
                  EndIf
                  
                 Case #PB_EventType_RightClick       : Debug "Clic droit sur "+Str(Gadgetchoix)
                 ;Case #PB_EventType_LeftDoubleClick  : Debug "Double-clic avec le bouton gauche de la souris"
                 ;Case #PB_EventType_RightDoubleClick : Debug "Double-clic avec le bouton droit de la souris"
                 Case #PB_EventType_DragStart
                    Debug "Tentative Drag'n Drop"
              EndSelect
      EndSelect
    Until Event = #PB_Event_CloseWindow
  EndIf

[Jacobus]

Ben je sais pas moi, converti tes images BMP en PNG avec transparence, non ?
Je viens de tester, il faut vraiment que tu mettes ton plan en image d'arrière plan et non en gadget, sinon tu auras quasi toujours ce problème. Tes gadgets se chevauchent et ils n'aiment pas. Dans mon exemple de code, tu peux mettre les boutons sur le fond sans problème (2 fenêtres en fait), même avec des BMP. Essayes tu verras bien. Mais convertis ton plan en PNG avec transparence.

Sinon ton idée est sympa. Je me suis marré, j'ai cru que c'était un rouleau de pq qui se déroulait en cliquant, après j'ai vu que c'était un volet...

[Golfy]

Ben je sais pas moi, converti tes images BMP en PNG avec transparence, non ?
Je viens de tester, il faut vraiment que tu mettes ton plan en image d'arrière plan et non en gadget, sinon tu auras quasi toujours ce problème. Tes gadgets se chevauchent et ils n'aiment pas. Dans mon exemple de code, tu peux mettre les boutons sur le fond sans problème (2 fenêtres en fait), même avec des BMP. Essayes tu verras bien. Mais convertis ton plan en PNG avec transparence.

Sinon ton idée est sympa. Je me suis marré, j'ai cru que c'était un rouleau de pq qui se déroulait en cliquant, après j'ai vu que c'était un volet...

Ce n'est pas l'envie qui me manque mais le code n'a pas l'air facile à lire (2 pages de code au lieu d'une pour un débutant, ça bloque un peu... )

Pour le PQ, tu as raison, il ressemble trop à un volet roulant

EDIT : Pour les chevauchements de gadget, la solution est

Code : Tout sélectionner

DisableGadget(Image du fond,1)