peut-on incruster une image jpg dans une fenetre ?.

[klystron]

Bonsoir à tous,
pour améliorer un petit programme de calcul simple, j'aimerais incrusté une petite image de dessin du type JPG , dans la fenetre des calculs.
Est-ce possible ?
comment faire, si c'est du domaine du possible ?
avez-vous un exemple ?.
merci .

[falsam]

C'est une image sur l'ensemble de la fenêtre ?

[klystron]

non juste une portion , le reste pour les calculs

par exemple , si je prends le calcul de triangle , placer le dessin du triangle a coté dans la meme fenetre ?.

[falsam]

Tu peux utiliser soit l'ImageGadget() soit le CanvasGadget()

J'ai une préférence pour le canvas car on peut dessiner directement dessus

Exemple trés simple

Code : Tout sélectionner

Enumeration
  #Mainform
EndEnumeration

Enumeration
  #MaFeuilleDePapier  
EndEnumeration

OpenWindow(#Mainform, 0, 0, 500, 400, "New Form", WindowStyle)

;On positionne le canvas
CanvasGadget(#MaFeuilleDePapier, 280, 20, 200, 200)

;Commençons le dessin sur le canvas
StartDrawing(CanvasOutput(#MaFeuilleDePapier))

;Exemple une boite
Box(0, 0, 50, 200, RGB(255, 215, 0))

;Fin du dessin
StopDrawing()

Repeat
  Event  = WaitWindowEvent(10)
  GEvent = EventGadget()
  
  Select Event
    Case #PB_Event_Gadget
      Select GEvent
      EndSelect
        
    Case #PB_Event_CloseWindow
      End
  EndSelect
ForEver

[klystron]

pour incruster une image dans la fenetre , il faut utilisé alors imageGadget , l'image doit etre placée dans le meme répertoire que le code pb ?
imageGadget ( image.jpg) ?

[falsam]

pour incruster une image dans la fenetre , il faut utilisé alors imageGadget , l'image doit etre placée dans le meme répertoire que le code pb ?

Tu peux aussi charger ton image sur un canvas. : La fonction est DrawImage()

Cette image peut être placée ou tu veux du moment que tu indiques le chemin de l'image.

[klystron]

Ok,
bon, je vais voir comment je vais m'y prendre
tu n'aurais pas un exemple concret de code , avec une image.jpg , pour que je puisse voir en détail le principe ?
le fichier image a mettre en incrustation, doit-etre dans le meme répertoire que celui du code PB?

j'ai l'impression, que c'est bien compliqué a mettre en œuvre .
sur une fenetre séparée c'est plus simple ?

quel type d'image est plus appropriée ? JPG, dxf ...

[falsam]

le fichier image a mettre en incrustation, doit-etre dans le meme répertoire que celui du code PB?

Non pas forcément même si c'est préférable

Une habitude que je prend

1 - Je crée un dossier qui contiendra le ou les code que contiendra le programme.

2 - Je crée dans ce dossier un dossier que je nomme data ou assets qui contiendra les médias que j'utilise pour ce code (Images, son, etc .....)

J'ai mis une image de noel dans un dossier data. Le code sera le suivant.

Code : Tout sélectionner

Enumeration
  #Mainform
EndEnumeration

Enumeration
  #MaFeuilleDePapier  
EndEnumeration

OpenWindow(#Mainform, 0, 0, 500, 400, "New Form", WindowStyle)

;Chargement d'une image (Tu donne le nom que tu veux à la variable)
UseJPEGImageDecoder() ;Decodeur obligatgoire
MonImage = LoadImage(#PB_Any, "Data/noel.jpg")

;On positionne le canvas
CanvasGadget(#MaFeuilleDePapier, 10, 10, 266, 190)

;Commençons le dessin sur le canvas
StartDrawing(CanvasOutput(#MaFeuilleDePapier))

;Exemple une image
DrawImage(ImageID(MonImage),0 ,0)

;Fin du dessin
StopDrawing()

Repeat
  Event  = WaitWindowEvent(10)
  GEvent = EventGadget()
  
  Select Event
    Case #PB_Event_Gadget
      Select GEvent
      EndSelect
        
    Case #PB_Event_CloseWindow
      End
  EndSelect
ForEver

Tu peux télécharger source + média sur ce lien
http://s242132022.onlinehome.fr/Downloa ... 0image.zip

[klystron]

je ne sais pas comment faire pour coller un ducument sur cette page ?
j'ai voulu copier ici ton dessin que tu avais mis du triangle rectangle

ok, je vais regardé tout ca de prêt.
je vais regardé ton fichier démo data que je viens de décompresser.

je vais te laisser , bonne soirée, et merci pour toutes les infos.
A+

[klystron]

j'ai une erreur a la ligne 53 , variable non déclarée ...

Code : Tout sélectionner

  
; exemple de programme code pour initiation au purebasic.
;---------------------------------------------------------------------------------------

EnableExplicit  ; pour messages d'erreur des varables en mode test.

Enumeration
  #MonImage
EndEnumeration

Enumeration
  #MaFeuilleDePapier 
EndEnumeration

Enumeration Fonts
  #FontGlobal
EndEnumeration

Enumeration Window
  #MaFenetre
EndEnumeration

Enumeration Gadget
  #Longueur
  #Largeur
  #Surface
  #Hypotenuse
  #Perimetre
  #Bouton_Calculer                  ; Déclarer l'ID du bouton Calculer
EndEnumeration

;-------------------Création de la fenetre et des différents gadgets-------------------------

Procedure Open_MainForm()


     LoadFont(#FontGlobal, "Arial", 12) ; hauteur 12 pixels en type Arial


 ;---------------Affectation de la font global à l'ensemble de la fenetre-----------

       SetGadgetFont(#PB_Default, FontID(#Fontglobal)) ;  police a toutes les plages.


  OpenWindow(#MaFenetre, 100, 100, 500, 300, " -Elements d'un triangle rectangle- ")


;**********************modif ajout image dans fenetre ****************

;---------Chargement d'une image (Tu donne le nom que tu veux à la variable ici monimage )--------
UseJPEGImageDecoder() ;Decodeur obligatgoire
MonImage = LoadImage(#PB_Any, "Data/noel.jpg")
Debug MonImage

;--------------------On positionne le canvas---------------------
CanvasGadget(#MaFeuilleDePapier, 10, 10, 266, 190)

;----------Commençons le dessin sur le canvas----------------
StartDrawing(CanvasOutput(#MaFeuilleDePapier))

;-----------------Exemple une image-----------------
DrawImage(ImageID(MonImage),0 ,0)

;------------------Fin du dessin---------------------
StopDrawing()



;*******************fin des modifs*********


  TextGadget(#PB_Any, 10, 35, 200, 26, "Longueur")
  StringGadget(#Longueur, 140, 35, 120, 26, "")

  TextGadget(#PB_Any, 10, 65, 200, 26, "Largeur")
  StringGadget(#Largeur, 140, 65, 120, 26, "")

  TextGadget(#PB_Any, 10, 100, 200, 26, "Surface")
  StringGadget(#Surface, 140, 100, 120, 26, "", #PB_String_ReadOnly)    ;Ce gadget sera en lecture seule
  

  TextGadget(#PB_Any, 10, 135, 200, 26, "Hypotenuse")
  StringGadget(#Hypotenuse, 140, 135, 120, 26, "", #PB_String_ReadOnly)  ;Ce gadget sera en lecture seule


  TextGadget(#PB_Any, 10, 170, 200, 26, "Perimetre")
  StringGadget(#Perimetre, 140, 170, 120, 26, "", #PB_String_ReadOnly)   ;Ce gadget sera en lecture seule


  ButtonGadget(#Bouton_Calculer, 10, 220, 120, 28, "Calculer")          ; Le bouton Calculer
EndProcedure

;-----------------Calcul de la surface d'un triangle rectangle-------------------------

Procedure CalculSurface(Longueur.f, largeur.f)
  Protected AB.f = longueur
  Protected AC.f = largeur
  Protected Resultat.f

  Resultat = (AB * AC)/2              ;Inutile de repeter le typage .f (float) à résultat car déja déclaré

  SetGadgetText(#Surface, StrF(Resultat, 3)) ;Affichage du résultat avec 3 décimales
EndProcedure

;-------------------------Calcul de l'Hypotenuse---------------------------------
 
Procedure Calculhypotenuse(Longueur.f, Largeur.f)
  Protected AB.f = longueur
  Protected AC.f = largeur
  Protected Resultat.f
  
  Protected BC.f                            ;C'est la longueur de l'hypotenuse à retrouver
  
  Resultat = Pow(AB,2) + Pow(AC,2)          ; puissances 2
  
  BC = Sqr(Resultat)                        ; racine carree
  
  SetGadgetText(#Hypotenuse,StrF(BC,3))     ;affichage du resultat avec 3 decimales
EndProcedure

;------------------------------calcul du perimetre du triangle------------------------------

Procedure Calculperimetre(Longueur.f, Largeur.f,BC.f)
  Protected AB.f = longueur
  Protected AC.f = largeur 
  Protected Resultat.f
  
  Resultat = AB + AC + BC
 
  SetGadgetText(#perimetre,StrF(Resultat,3))     ;affichage du resultat avec 3 decimales
EndProcedure

;----------------------Le programme commence ici : On ouvre la fenêtre--------------------------
 
Open_MainForm()

;---------------------------------Boucle événementielle---------------------------------------
 
Repeat
  Select WaitWindowEvent()       ;Un événement est arrivé
    Case #PB_Event_Gadget        ;Est ce un gadget qui a provoqué l'événement ?
      Select EventGadget()       ;Apparemment oui : On cherche qui

           
        Case #Bouton_Calculer      ; Je provoque le déclenchement par le bouton Calculer

;------------------------- on appelle les procedures:------------------------------------

          CalculSurface(ValF(GetGadgetText(#Longueur)),
                        ValF(GetGadgetText(#Largeur))) 
  
          Calculhypotenuse(ValF(GetGadgetText(#Longueur)),
                           ValF(GetGadgetText(#Largeur)))

          Calculperimetre(ValF(GetGadgetText(#longueur)),
                          ValF(GetGadgetText(#largeur)),
                          ValF(GetGadgetText(#hypotenuse))) 
         
      
       EndSelect 
             
      
    Case #PB_Event_CloseWindow      ;Est ce une fermeture de la fenêtre ?

      End                           ;Apparemment oui : Fermeture de la fenêtre.
     
  EndSelect

ForEver

  

pourtant elle a été déclarée en début de code ?

[falsam]

#MonImage et MonImage ce n'est pas la même chose

#MonImage est une constante qui dans ton systeme d'énumération sera égale à 0

Alors que MonImage (sans le #) correspond à une variable qui recevra la valeur généré par LoadImage().

Le plus simple dans ton code est de remplacer MonImage par #MonImage

Code : Tout sélectionner

....
LoadImage(#MonImage, "Data/noel.jpg")

......
DrawImage(ImageID(#MonImage),0 ,0)
......

[klystron]

Code : Tout sélectionner

  

; exemple de programme code pour initiation au purebasic.
;---------------------------------------------------------------------------------------

EnableExplicit  ; pour messages d'erreur des varables en mode test.

Enumeration
  #MonImage
EndEnumeration

Enumeration
  #MaFeuilleDePapier 
EndEnumeration

Enumeration Fonts
  #FontGlobal
EndEnumeration

Enumeration Window
  #MaFenetre
EndEnumeration

Enumeration Gadget
  #Longueur
  #Largeur
  #Surface
  #Hypotenuse
  #Perimetre
  #Bouton_Calculer                  ; Déclarer l'ID du bouton Calculer
EndEnumeration

;-------------------Création de la fenetre et des différents gadgets-------------------------

Procedure Open_MainForm()


     LoadFont(#FontGlobal, "Arial", 12) ; hauteur 12 pixels en type Arial


 ;---------------Affectation de la font global à l'ensemble de la fenetre-----------

       SetGadgetFont(#PB_Default, FontID(#Fontglobal)) ;  police a toutes les plages.


  OpenWindow(#MaFenetre, 100, 100, 500, 300, " -Elements d'un triangle rectangle- ")


;**********************modif ajout image dans fenetre ****************

;---------Chargement d'une image (Tu donne le nom que tu veux à la variable ici monimage )--------

UseJPEGImageDecoder() ;Decodeur obligatgoire

MonImage = LoadImage(#monimage, "Data/noel.jpg")

Debug MonImage

;--------------------On positionne le canvas---------------------
CanvasGadget(#MaFeuilleDePapier, 10, 10, 266, 190)

;----------Commençons le dessin sur le canvas----------------
StartDrawing(CanvasOutput(#MaFeuilleDePapier))

;-----------------Exemple une image-----------------
DrawImage(ImageID(#MonImage),0 ,0)

;------------------Fin du dessin---------------------
StopDrawing()



;*******************fin des modifs*********


  TextGadget(#PB_Any, 10, 35, 200, 26, "Longueur")
  StringGadget(#Longueur, 140, 35, 120, 26, "")

  TextGadget(#PB_Any, 10, 65, 200, 26, "Largeur")
  StringGadget(#Largeur, 140, 65, 120, 26, "")

  TextGadget(#PB_Any, 10, 100, 200, 26, "Surface")
  StringGadget(#Surface, 140, 100, 120, 26, "", #PB_String_ReadOnly)    ;Ce gadget sera en lecture seule
  

  TextGadget(#PB_Any, 10, 135, 200, 26, "Hypotenuse")
  StringGadget(#Hypotenuse, 140, 135, 120, 26, "", #PB_String_ReadOnly)  ;Ce gadget sera en lecture seule


  TextGadget(#PB_Any, 10, 170, 200, 26, "Perimetre")
  StringGadget(#Perimetre, 140, 170, 120, 26, "", #PB_String_ReadOnly)   ;Ce gadget sera en lecture seule


  ButtonGadget(#Bouton_Calculer, 10, 220, 120, 28, "Calculer")          ; Le bouton Calculer
EndProcedure

;-----------------Calcul de la surface d'un triangle rectangle-------------------------

Procedure CalculSurface(Longueur.f, largeur.f)
  Protected AB.f = longueur
  Protected AC.f = largeur
  Protected Resultat.f

  Resultat = (AB * AC)/2              ;Inutile de repeter le typage .f (float) à résultat car déja déclaré

  SetGadgetText(#Surface, StrF(Resultat, 3)) ;Affichage du résultat avec 3 décimales
EndProcedure

;-------------------------Calcul de l'Hypotenuse---------------------------------
 
Procedure Calculhypotenuse(Longueur.f, Largeur.f)
  Protected AB.f = longueur
  Protected AC.f = largeur
  Protected Resultat.f
  
  Protected BC.f                            ;C'est la longueur de l'hypotenuse à retrouver
  
  Resultat = Pow(AB,2) + Pow(AC,2)          ; puissances 2
  
  BC = Sqr(Resultat)                        ; racine carree
  
  SetGadgetText(#Hypotenuse,StrF(BC,3))     ;affichage du resultat avec 3 decimales
EndProcedure

;------------------------------calcul du perimetre du triangle------------------------------

Procedure Calculperimetre(Longueur.f, Largeur.f,BC.f)
  Protected AB.f = longueur
  Protected AC.f = largeur 
  Protected Resultat.f
  
  Resultat = AB + AC + BC
 
  SetGadgetText(#perimetre,StrF(Resultat,3))     ;affichage du resultat avec 3 decimales
EndProcedure

;----------------------Le programme commence ici : On ouvre la fenêtre--------------------------
 
Open_MainForm()

;---------------------------------Boucle événementielle---------------------------------------
 
Repeat
  Select WaitWindowEvent()       ;Un événement est arrivé
    Case #PB_Event_Gadget        ;Est ce un gadget qui a provoqué l'événement ?
      Select EventGadget()       ;Apparemment oui : On cherche qui

           
        Case #Bouton_Calculer      ; Je provoque le déclenchement par le bouton Calculer

;------------------------- on appelle les procedures:------------------------------------

          CalculSurface(ValF(GetGadgetText(#Longueur)),
                        ValF(GetGadgetText(#Largeur))) 
  
          Calculhypotenuse(ValF(GetGadgetText(#Longueur)),
                           ValF(GetGadgetText(#Largeur)))

          Calculperimetre(ValF(GetGadgetText(#longueur)),
                          ValF(GetGadgetText(#largeur)),
                          ValF(GetGadgetText(#hypotenuse))) 
         
      
       EndSelect 
             
      
    Case #PB_Event_CloseWindow      ;Est ce une fermeture de la fenêtre ?

      End                           ;Apparemment oui : Fermeture de la fenêtre.
     
  EndSelect

ForEver

 

j'ai progressé de deux lignes
il y a encore une variable a la ligne 55 qui ne va pas .
peut-on mettre les deux enumerateurs #monimage et #mafeuilledepapier dans le meme endroit ?
début de code

[falsam]

peut-on mettre les deux enumerateurs #monimage et #mafeuilledepapier dans le meme endroit ?

La documentation relative aux énumérations manque de réponses clair.

■ Normalement NON. Il est préférable de classer les énumérations par familles. On parlera d'Enumérations nommées Les fenetres ensembles, les gadgets ensembles, les images ensemble etc. Pour être meme encore plus propre, il faudrait regrouper les boutons ensemble, les string ensemble, etc .....

Prenons un exemple intermédiaire.

Code : Tout sélectionner

Enumeration Window
  #FirstWindow  ; egal à 0
  #SecondWindow ; egal à 1
EndEnumeration

Enumeration Gadgets
  #Nom          ;egal à 0
  #Adresse      ;egal à 1
EndEnumeration

Comme tu débutes avec Pure basic, on va dire que dans un premier temps, tu peux tout mettre ensemble

Pour ton erreur de code : Remplace

Code : Tout sélectionner

MonImage = LoadImage(#monimage, "Data/noel.jpg")

par

Code : Tout sélectionner

LoadImage(#monimage, "Data/noel.jpg")

Il est inutile de récupérer le résultat du load dans MonImage alors que tu as déja l'identifiant #MonImage dans la fonction Load.

[klystron]

Code : Tout sélectionner

  
; exemple de programme code pour initiation au purebasic.
;---------------------------------------------------------------------------------------

EnableExplicit  ; pour messages d'erreur des varables en mode test.

Enumeration Imageincrustee
  #MonImage
  #MaFeuilleDePapier 
EndEnumeration

Enumeration Fonts
  #FontGlobal
EndEnumeration

Enumeration Window
  #MaFenetre
EndEnumeration

Enumeration Gadget
  #Longueur
  #Largeur
  #Surface
  #Hypotenuse
  #Perimetre
  #Bouton_Calculer                  ; Déclarer l'ID du bouton Calculer
EndEnumeration

;-------------------Création de la fenetre et des différents gadgets-------------------------

Procedure Open_MainForm()


     LoadFont(#FontGlobal, "Arial", 12) ; hauteur 12 pixels en type Arial


 ;---------------Affectation de la font global à l'ensemble de la fenetre-----------

       SetGadgetFont(#PB_Default, FontID(#Fontglobal)) ;  police a toutes les plages.


  OpenWindow(#MaFenetre, 100, 100, 500, 300, " -Elements d'un triangle rectangle- ")


;**********************modif ajout image dans fenetre ****************

;---------Chargement d'une image (Tu donne le nom que tu veux à la variable ici monimage )--------
UseJPEGImageDecoder() ;Decodeur obligatgoire
LoadImage(#monimage, "Data/noel.jpg")
Debug #MonImage

;--------------------On positionne le canvas---------------------
CanvasGadget(#MaFeuilleDePapier, 10, 10, 266, 190)

;----------Commençons le dessin sur le canvas----------------
StartDrawing(CanvasOutput(#MaFeuilleDePapier))

;-----------------Exemple une image-----------------
DrawImage(ImageID(#MonImage),0 ,0)

;------------------Fin du dessin---------------------
StopDrawing()



;*******************fin des modifs*********


  TextGadget(#PB_Any, 10, 35, 200, 26, "Longueur")
  StringGadget(#Longueur, 140, 35, 120, 26, "")

  TextGadget(#PB_Any, 10, 65, 200, 26, "Largeur")
  StringGadget(#Largeur, 140, 65, 120, 26, "")

  TextGadget(#PB_Any, 10, 100, 200, 26, "Surface")
  StringGadget(#Surface, 140, 100, 120, 26, "", #PB_String_ReadOnly)    ;Ce gadget sera en lecture seule
  

  TextGadget(#PB_Any, 10, 135, 200, 26, "Hypotenuse")
  StringGadget(#Hypotenuse, 140, 135, 120, 26, "", #PB_String_ReadOnly)  ;Ce gadget sera en lecture seule


  TextGadget(#PB_Any, 10, 170, 200, 26, "Perimetre")
  StringGadget(#Perimetre, 140, 170, 120, 26, "", #PB_String_ReadOnly)   ;Ce gadget sera en lecture seule


  ButtonGadget(#Bouton_Calculer, 10, 220, 120, 28, "Calculer")          ; Le bouton Calculer
EndProcedure

;-----------------Calcul de la surface d'un triangle rectangle-------------------------

Procedure CalculSurface(Longueur.f, largeur.f)
  Protected AB.f = longueur
  Protected AC.f = largeur
  Protected Resultat.f

  Resultat = (AB * AC)/2              ;Inutile de repeter le typage .f (float) à résultat car déja déclaré

  SetGadgetText(#Surface, StrF(Resultat, 3)) ;Affichage du résultat avec 3 décimales
EndProcedure

;-------------------------Calcul de l'Hypotenuse---------------------------------
 
Procedure Calculhypotenuse(Longueur.f, Largeur.f)
  Protected AB.f = longueur
  Protected AC.f = largeur
  Protected Resultat.f
  
  Protected BC.f                            ;C'est la longueur de l'hypotenuse à retrouver
  
  Resultat = Pow(AB,2) + Pow(AC,2)          ; puissances 2
  
  BC = Sqr(Resultat)                        ; racine carree
  
  SetGadgetText(#Hypotenuse,StrF(BC,3))     ;affichage du resultat avec 3 decimales
EndProcedure

;------------------------------calcul du perimetre du triangle------------------------------

Procedure Calculperimetre(Longueur.f, Largeur.f,BC.f)
  Protected AB.f = longueur
  Protected AC.f = largeur 
  Protected Resultat.f
  
  Resultat = AB + AC + BC
 
  SetGadgetText(#perimetre,StrF(Resultat,3))     ;affichage du resultat avec 3 decimales
EndProcedure

;----------------------Le programme commence ici : On ouvre la fenêtre--------------------------
 
Open_MainForm()

;---------------------------------Boucle événementielle---------------------------------------
 
Repeat
  Select WaitWindowEvent()       ;Un événement est arrivé
    Case #PB_Event_Gadget        ;Est ce un gadget qui a provoqué l'événement ?
      Select EventGadget()       ;Apparemment oui : On cherche qui

           
        Case #Bouton_Calculer      ; Je provoque le déclenchement par le bouton Calculer

;------------------------- on appelle les procedures:------------------------------------

          CalculSurface(ValF(GetGadgetText(#Longueur)),
                        ValF(GetGadgetText(#Largeur))) 
  
          Calculhypotenuse(ValF(GetGadgetText(#Longueur)),
                           ValF(GetGadgetText(#Largeur)))

          Calculperimetre(ValF(GetGadgetText(#longueur)),
                          ValF(GetGadgetText(#largeur)),
                          ValF(GetGadgetText(#hypotenuse))) 
         
      
       EndSelect 
             
      
    Case #PB_Event_CloseWindow      ;Est ce une fermeture de la fenêtre ?

      End                           ;Apparemment oui : Fermeture de la fenêtre.
     
  EndSelect

ForEver
  

***********************************

bonjour,
problème.
je n'arrive pas à récupérer mon image dans la fenetre.
message du débugueur 0

merci de me répondre.

[klystron]

une question , existe- il un utilitaire , pour trouver, avec le pointeur de la souris, la position des pixels de l'écran ?.
merci.

A+