Page 1 sur 2

Question WebView

Publié : sam. 29/nov./2025 21:23
par Shadow
Salut à tous,

Je m'intéresse actuellement au gadget WebView, j'ai pas trouver beaucoup d'exemple dessus ni une doc complète de comment ça marche :|
Ce que je voudrais savoir c'est si je peu réaliser une application en Java Script et la faire communiquer avec PureBasic avec ça ?

La réponse est très certainement oui, car j'ai un projet, très gros projet (Et ceux qui sont malin on surement déjà compris de quoi je parle ^^)
et je pense pouvoir le réaliser grâce à ce super Gadget, Merci PureBasic !

C'est pas des parole en l'air cette fois, si avec le Gadget WebView je peu communiquer avec le programme JavaScript
alors mon projet à de bonne chance de voir le jour.

Je prends toutes documentations disponible ainsi qu'exemples.
Question: Ya t-il une limite, de quoi est capable ce Gadget ?

Il peu tous gérer ?
Question vague, je sais...

Niveau latence normalement yen à pas ?
Je sais pas comment ça fonctionne, c'est pour ça que je demande.

Re: Question WebView

Publié : sam. 29/nov./2025 21:46
par Shadow
Déjà quand je teste un exemple simple de la doc ça crash à la fin :roll:

Code : Tout sélectionner

 ; Un simple bouton qui changera son étiquette par le résultat du rappel PureBasic
  ;
  Html$ =  ~"<button id=\"displayInfo\">Afficher les Infos</button>\n"+
           ~"<script>\n"+
           ~"  const displayInfoElement=document.getElementById(\"displayInfo\");\n"+
           ~"  document.addEventListener(\"DOMContentLoaded\", () => {\n"+
           ~"    displayInfoElement.addEventListener(\"click\", () => {\n"+
           ~"      window.displayInfo(1000, 2000).then(result => {\n"+
           ~"        displayInfoElement.textContent = result.sum;\n"+
           ~"      });\n"+
           ~"    });\n"+
           ~"  });\n"+
           ~"</script>";
    
  Procedure IncrementJS(ParametreJSON$)
    
    Dim Parameters(0)
    
    ParseJSON(0, ParametreJSON$)
    ExtractJSONArray(JSONValue(0), Parameters())
    
    Debug "Nb de Paramètres: " + ArraySize(Parameters())
    
    Debug "Paramètre 1: " + Parameters(0)
    Debug "Paramètre 2: " + Parameters(1)
    
    ProcedureReturn UTF8(~"{ \"sum\": "+Str(Parameters(0) + Parameters(1))+ "}")
  EndProcedure


  OpenWindow(0, 100, 100, 400, 400, "Salut", #PB_Window_SystemMenu)

  WebViewGadget(0, 0, 0, 400, 400)
  SetGadgetItemText(0, #PB_WebView_HtmlCode, Html$)
    
  BindWebViewCallback(0, "displayInfo", @IncrementJS())

  Repeat
    
  Event = WaitWindowEvent(1)
  
  ; Laisser le WebView traiter ses événements
  If Event = #PB_Event_Gadget
    ; Ne rien faire, juste laisser passer
  EndIf
  
Until Event = #PB_Event_CloseWindow
[21 :44 :33] Attente du démarrage du programme...
[21 :44 :33] Type d'exécutable: Windows - x64 (64bit, Unicode, Purifier)
[21 :44 :33] Exécutable démarré.
[21 :44 :39] L'exécutable de débogage se ferme de façon inattendue.
Pourquoi ça crash comme ça ?

Re: Question WebView

Publié : sam. 29/nov./2025 22:48
par SPH
PB 6.30 Beta 3

=> Aucun crash chez moi :idea:

Re: Question WebView

Publié : dim. 30/nov./2025 0:29
par Shadow
SPH a écrit : sam. 29/nov./2025 22:48 PB 6.30 Beta 3

=> Aucun crash chez moi :idea:
Salut, t'es en 64 Bits ?
Peut etre que ça viens de là ? :?

Re: Question WebView

Publié : dim. 30/nov./2025 1:28
par SPH
Shadow a écrit : dim. 30/nov./2025 0:29
SPH a écrit : sam. 29/nov./2025 22:48 PB 6.30 Beta 3

=> Aucun crash chez moi :idea:
Salut, t'es en 64 Bits ?
Ouai 8)

Re: Question WebView

Publié : dim. 30/nov./2025 7:36
par Shadow
Errf, je suis en PB 6.30 Beta 3, c'est peut etre sa le problème alors ?
C'est pas critique car ça marche, jusque à la fin du prog sa crach.

Sinon t'as pas d'info sur WebView ?, c'est pas très documenté ce truc :?

Re: Question WebView

Publié : dim. 30/nov./2025 10:23
par SPH
Moi, je code des jeux. J'ai pas besoin de 90% des instructions de PB.

Webview : je sais meme pas ce que c'est mais, vu le nom, ca doit etre un truc web.

Re: Question WebView

Publié : dim. 30/nov./2025 10:48
par Shadow
Oui c'est un gadget que je viens de découvrir qui permet en gros de gérer et d'afficher une page web (Avec HTML et du JavaScript)
Mais c'est pas si simple que ça...

Re: Question WebView

Publié : dim. 30/nov./2025 15:26
par SPH
Ce code viens de l'aide mais je ne sais pas ce qu'il fait.
Je pense qu'il faut d'abord savoir ce que l'on veux réaliser avant de piocher dans l'aide. Faut un projet précis...

Code : Tout sélectionner

;
; ------------------------------------------------------------
;
;   PureBasic - WebView example file
;
;    (c) 2024 - Fantaisie Software
;
; ------------------------------------------------------------
;

Procedure IncrementCallback(JsonParameters$)
  Static Count
  
  Debug #PB_Compiler_Procedure +": " + JsonParameters$
  
  Count + 1
  ProcedureReturn UTF8(~"{ \"count\": "+Str(Count)+ "}")
EndProcedure

Procedure ComputeCallback(JsonParameters$)
  
  Debug #PB_Compiler_Procedure +": " + JsonParameters$
  
  Dim Parameters(0)
  
  ; Extract the parameters from the JSON
  ParseJSON(0, JsonParameters$)
  ExtractJSONArray(JSONValue(0), Parameters())
  
  Debug "Parameter 1: " + Parameters(0)
  Debug "Parameter 2: " + Parameters(1)
    
  ProcedureReturn UTF8(Str(Parameters(0) + Parameters(1)))
EndProcedure

OpenWindow(0, 100, 100, 400, 400, "Hello", #PB_Window_SystemMenu | #PB_Window_Invisible)

WebViewGadget(0, 0, 0, 400, 400)
SetGadgetText(0, "file://" + #PB_Compiler_Home + "examples/sources/Data/WebView/webview.html")
  
BindWebViewCallback(0, "increment", @IncrementCallback())
BindWebViewCallback(0, "compute", @ComputeCallback())

; Show the window once the webview has been fully loaded
HideWindow(0, #False)

Repeat 
  Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow


Re: Question WebView

Publié : dim. 30/nov./2025 23:58
par Shadow
Oui mais il ne fonctionne pas chez moi cet exemple, dès que je clique ça bug.
[23 :57 :29] Attente du démarrage du programme...
[23 :57 :29] Type d'exécutable: Windows - x64 (64bit, Unicode, Purifier)
[23 :57 :29] Exécutable démarré.
[23 :57 :37] L'exécutable de débogage se ferme de façon inattendue.

Re: Question WebView

Publié : lun. 01/déc./2025 18:20
par falsam
Voici deux fichiers que tu peux download ici https://falsam.com/download/purebasic/WebView_demo0.zip

Le code PB fait appel à un fichier HTML + JS qui va afficher un bouton sur lequel tu cliques.
Chaque évènement JS click est réceptionné par le code PB qui fera appel à une fonction callback qui va incrémenter une variable n qui sera elle même renvoyer au script JS qui mettra à jouer un compteur de clicks. (Une dinguerie) 🤪

Afin d'éviter des erreurs liées à des soucis de protections de dossiers, pourrais tu modifier les options du compilateur (Onglet Compiler/Exécuter) afin de créer l'exécutable temporaire dans le répertoire des sources.


Le code HTML + JS (Sans fioriture)

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<!-- Construction de la page -->
<button id="buttonClick">Clique sur le bouton</button>
<p>Tu as cliqué <span id="countClicks">0</span> fois.</p>

<script>
	// La méthode JavaScript querySelectorAll() associe les constantes :
	// - buttonClick à l'attribut #buttonClick
	// - countClicks ) l'attribut #countClicks
	const [buttonClick, countClicks] = document.querySelectorAll("#buttonClick, #countClicks");
	
	// Attente de l'événement DOMContentLoaded
	// Le navigateur a complètement chargé le HTML 
	document.addEventListener("DOMContentLoaded", () => {
    
		// Attente d'un evenement "click" 
		buttonClick.addEventListener("click", () => {
			// C'est ici que se trouve la fonction increment() 
			// Qui va réceptionner la variable countClick,
			// Et qui mettra à jour le contenu du compteur de clic  
			window.increment().then(result => {
				countClicks.textContent = result.countClick;
			});
		});
	});
</script>
</body>
</html>
Le code PureBasic - Version 6.30 beta 3 (x64)

Code : Tout sélectionner

Procedure  OnClick(JsonParameters.s)
  Static n
  
  n + 1
  
  ; La valeur de la variable n sera envoyé à la variable JS "countClick" 
  ProcedureReturn UTF8(~"{ \"countClick\": " + Str(n)+ "}")
EndProcedure

OpenWindow(0, 0, 0, 800, 600, "Envoyer une variable PB à un Script JS", #PB_Window_SystemMenu | #PB_Window_ScreenCentered | #PB_Window_Invisible)

WebViewGadget(0, 0, 0, 800, 600)
SetGadgetText(0, "file://"+ GetCurrentDirectory() + "demo0.html")

; BindWebViewCallback(#Gadget, JavaScriptFunction$, @Callback())
; A chaque clic sur le bouton, la fonction increment() décrit dans ton JS sera appelée par le callback OnClick() 
BindWebViewCallback(0, "increment", @OnClick())

; Afficher la fenetre de l'application uniquement quand le WebView est totalement charg
HideWindow(0, #False)

Repeat 
  Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow
Enjoy. Ha ha ha 🗒️🙃😁

Re: Question WebView

Publié : lun. 01/déc./2025 22:00
par Shadow
Salut Falsam :)

Merci pour ton aide, malheureusement......
Bhaaaaaaa ça ne marche pas :(
[21 :58 :41] Attente du démarrage du programme...
[21 :58 :41] Type d'exécutable: Windows - x64 (64bit, Unicode, Purifier)
[21 :58 :41] Exécutable démarré.
[21 :58 :49] L'exécutable de débogage se ferme de façon inattendue.
Dès que je clique une fois sur le bouton, ça crach. :?
Tu l'as pondu ou ce code, par une IA ? :mrgreen:

Re: Question WebView

Publié : lun. 01/déc./2025 22:19
par Shadow
Cet exemple marche mais après que je clique sur OK de la boîte de dialogue, ça crach :?

Code Html à JS:

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
  <title>Simple Editor</title>
  <style>
    body { margin: 0; padding: 0; }
    canvas { display: block; border: 1px solid #ccc; }
  </style>
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    // Un seul objet
    const rect = {
      x: 100,
      y: 100,
      w: 200,
      h: 150,
      color: '#3b82f6'
    };
    
    // Dessiner
    function draw() {
      ctx.fillStyle = '#fff';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = rect.color;
      ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
      
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
    }
    
    draw();
    
    // Clic sur le rectangle
    canvas.addEventListener('click', (e) => {
      const rect_canvas = canvas.getBoundingClientRect();
      const x = e.clientX - rect_canvas.left;
      const y = e.clientY - rect_canvas.top;
      
      // Vérifier si on a cliqué sur le rectangle
      if (x >= rect.x && x <= rect.x + rect.w && y >= rect.y && y <= rect.y + rect.h) {
        // Appeler la fonction PureBasic
        onRectangleClicked();
      }
    });
  </script>
</body>
</html>

Code Purebasic:

Code : Tout sélectionner

Enumeration
  #Window
  #CustomEvent
  #WebViewGadget1
EndEnumeration

; Callback (ne bloque pas)
Procedure OnRectangleClicked(JsonParameters$)
  MessageRequester("Clic détecté!", "Vous avez cliqué sur le rectangle!")
  PostEvent(#PB_Event_Gadget, #Window, #CustomEvent)
  ProcedureReturn UTF8("{...}")
EndProcedure

; Charger le HTML
Define Html.s = ""

If ReadFile(0, "My File.html")
  While Eof(0) = 0
    Html.s + ReadString(0) + #CRLF$
  Wend
  CloseFile(0)
Else
  MessageRequester("Erreur", "Impossible d'ouvrir simple.html")
  End
EndIf

; Créer la fenêtre
OpenWindow(#Window, 100, 100, 800, 600, "Simple Editor")

; Créer le WebView
WebViewGadget(#WebViewGadget1, 0, 0, 800, 600, #PB_WebView_Debug)

; Charger le HTML
SetGadgetItemText(#WebViewGadget1, #PB_WebView_HtmlCode, Html.s)

BindWebViewCallback(#WebViewGadget1, "onRectangleClicked", @OnRectangleClicked())

; Boucle principale
; Boucle principale (affiche le message)
Repeat
  Event = WaitWindowEvent()
  
  If Event = #PB_Event_Gadget And EventGadget() = #CustomEvent
    MessageRequester("Clic détecté!", MessageToShow$)
  EndIf
  
Until Event = #PB_Event_CloseWindow

Re: Question WebView

Publié : lun. 01/déc./2025 23:57
par falsam
Shadow a écrit : lun. 01/déc./2025 22:00 Salut Falsam :)

Merci pour ton aide, malheureusement......
Bhaaaaaaa ça ne marche pas :(

Dès que je clique une fois sur le bouton, ça crach. :?
Tu l'as pondu ou ce code, par une IA ? :mrgreen:
Il fonctionne chez moi (voir ma signature) et je n'ai pas utilisé d'IA.

Re: Question WebView

Publié : mar. 02/déc./2025 1:23
par Shadow
Je suis en 6.30 béta 4 x 64 Bit moi :?