Question WebView

[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.

[Shadow]

Déjà quand je teste un exemple simple de la doc ça crash à la fin

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 ?

[SPH]

PB 6.30 Beta 3

=> Aucun crash chez moi

[Shadow]

PB 6.30 Beta 3

=> Aucun crash chez moi

Salut, t'es en 64 Bits ?
Peut etre que ça viens de là ?

[SPH]

PB 6.30 Beta 3

=> Aucun crash chez moi

Salut, t'es en 64 Bits ?

Ouai

[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

[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.

[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...

[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

[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.

[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

[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 ?

[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

[falsam]

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 ?

Il fonctionne chez moi (voir ma signature) et je n'ai pas utilisé d'IA.

[Shadow]

Je suis en 6.30 béta 4 x 64 Bit moi