Problème avec WebBrowser

Version imprimable

Voir 40 message(s) de cette discussion en une page

20/07/2021, 11h14
Pierre95

@SergioMaster:

Un grand merci à vous pour ces précieuses informations.
D'après mes recherches, il me semblait également que l'erreur 80020101 était due à une mauvaise syntaxe JavaScript, mais je savais pas comment la corriger.
Je vais de ce pas essayer tout ça...

Cordialement
Pierre
21/07/2021, 08h53
Pierre95

Bonjour,

Après quelques fructueux tests, je comprends enfin que l'on peut exécuter des Javascripts directement depuis Delphi alors que je pensais qu'il faillait faire uniquement appel à des fonction présentes dans la page HTML.
Chaque jour apporte sont lot de connaissances...

Merci.

Pierre
21/07/2021, 09h40
SergioMaster

Bonjour,

Ne pas oublier le :resolu:, cela fait toujours du bien. Et toute chaine javascript testée, cela pourrait être sympa de le signaler pour d'autres ;)

Citation:

je comprends enfin que l'on peut exécuter des Javascripts directement depuis Delphi alors que je pensais qu'il faillait faire uniquement appel à des fonction présentes dans la page HTML.

Oui, j'étais dans le même cas. Cela ouvre des perspectives, si l'on sait ce que l'on veut faire.
Je pense que changer mon programme test (de l'autre discussion sur Leaflet) pourrait bénéficier de ce nouvel éclairage. Cela pourrait même être un sujet de tutoriel.

Mais attention au lecteur trop rapide, il s'agit du FMX.webbrowser totalement différent du VCL.webbrowser. N'ayant toujours pas vraiment réussi à utiliser TEdgeBrowser (pour cause de SDK Microsoft non chargé je pense) je reserve mon jugement pour ce dernier. Je n'ai pas non plus indiqué que des solutions tiers (TMS.WebBrowser) aurait peut-être pu faire l'affaire :weird:
21/07/2021, 16h02
Pierre95

Bonjour,

Il est vraiment dommage d'être "obliger" (dans l'état actuel de nos connaissance) d'utiliser FMX.
Je m'aperçois en effet que cette bibliothèque est très limité en propriétés. Exemple:

le contrôle TPanel, impossible d'en changer la couleur ni de l'afficher en relief comme avec la VCL.

Je pense reprendre mes recherches pour obtenir un résultat avec VCL.
Mon application étant uniquement destiné à Windows, ça me paraît préférable....

A suivre...

Cordialement
Pierre
21/07/2021, 16h31
SergioMaster

Citation:

Envoyé par Pierre95

Exemple:
le contrôle TPanel, impossible d'en changer la couleur ni de l'afficher en relief comme avec la VCL.

Ah, l'exemple classique de quelqu'un qui vient de la vcl :mouarf:
En FMX il ne faut plus penser à ce très limité TPanel. Il ne faut pas oublié que tout composant peut-être parent d'autres composants.
Un TPanel sera largement remplacé par un TRectangle ou, AMHA, mieux, par un TLayout contenant un TRectangle (align=alContent, locked=true)
21/07/2021, 16h45
Pierre95

Il est vrai que je découvre FMX et je suis encore indécis...

Heureusement que des spécialistes m'apportent quelques arguments intéressants...

Je reviendrai faire état des avancées de mon projet VCL ou FMX.

En tout cas merci encore de m'avoir consacré votre temps et vos connaissances.

Amicalement
Pierre
22/07/2021, 08h36
SergioMaster

1 pièce(s) jointe(s)

Ma proposition pour remplacer le TPanel n'est qu'une des nombreuses options,
je n'ai pas parlé des styles personnalisés ;) ou d'action directe sur le dit style qui, eux aussi aurait pu répondre à la demande

d'ailleurs si l'on étudie le style du Tpanel on en revient à ..... un Trectangle :lol:
Pièce jointe 602062

Mais, les styles, c'est un truc relativement complexe, il est toujours dans mon intention d'en faire un tutoriel (au fur et à mesure de mes découvertes c'est en train de devnir carrément un fasicule voire même un livre :roll:)

2 pièce(s) jointe(s)

Citation:

Envoyé par Pierre95

Je pense reprendre mes recherches pour obtenir un résultat avec VCL.

EdgeBrowser répond bien à la demande dans ce cas, il faut juste tout bien installer. Ce matin c'est ce que j'ai fait car l'échec me restait sur "l'estomac"
J'ai donc pris le temps d'aller sur https://www.microsoftedgeinsider.com/fr-fr/download pour télécharger et installer la version Beta.
J'avais au préalable installé via Getit EdgeView2 SDK

Une fois tout fait, je n'ai eu aucun problème à afficher la page FirstMap.html ni à utiliser un script

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
unit UnitEdgeBrowser;
 
interface
 
uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, WebView2, Winapi.ActiveX, Vcl.Edge,
  Vcl.StdCtrls, Vcl.OleCtrls, SHDocVw;
 
type
  TForm22 = class(TForm)
    Button1: TButton;
    EdgeBrowser1: TEdgeBrowser;
    Button2: TButton;
    procedure Button1Click(Sender: TObject);
    procedure Button2Click(Sender: TObject);
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
  end;
 
var
  Form22: TForm22;
 
implementation
 
{$R *.dfm}
 
 
procedure TForm22.Button1Click(Sender: TObject);
begin
  Edgebrowser1.Navigate('D:/Test/Randos/FirstMap.html');
end;
 
procedure TForm22.Button2Click(Sender: TObject);
var
 js:string;
 latitude, longitude : single;
begin
  latitude:=48.76314;
  longitude:=-80.13569;
  js:=Format('map.setView([%1.5f,%1.5f]);',[latitude,longitude],TFormatSettings.Create('EN_US'));
  edgebrowser1.ExecuteScript(js);
end;
 
end.

DFM

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
object Form22: TForm22
  Left = 0
  Top = 0
  Caption = 'Form22'
  ClientHeight = 480
  ClientWidth = 716
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  PixelsPerInch = 96
  TextHeight = 13
  object Button1: TButton
    Left = 8
    Top = 9
    Width = 75
    Height = 25
    Caption = 'Paris'
    TabOrder = 0
    OnClick = Button1Click
  end
  object EdgeBrowser1: TEdgeBrowser
    Left = 8
    Top = 48
    Width = 689
    Height = 424
    TabOrder = 1
  end
  object Button2: TButton
    Left = 112
    Top = 8
    Width = 75
    Height = 25
    Caption = 'jvScript'
    TabOrder = 2
    OnClick = Button2Click
  end
end

une petite astuce pour toujours avoir la dll nécessaire dans le répertoire de l'exécutable
Pièce jointe 602063

et le résultat est là
Pièce jointe 602064

Inconvénient ? Il faut que la version de Edge Insider Channel soit installée (ce qui ne sera pas forcément le cas sur tous les postes "clients")

25/10/2021, 10h36
Pierre95

Petite question complémentaire

Bonjour,

Je me permets de rouvrir ce post passionnant.
Je commence à avancer avec Leaflet sur mon projet et je réussi à afficher la carte ainsi que que la trajectoire et les points de navigation du vol programmé.
Il reste cependant un point à éclaircir.

Je souhaite utiliser une icône personnalisée pour marquer les points de navigation.

Dans la doc de Leaflet l'option

Code:

iconUrl

doit contenir le chemin de l'image png de l'icône.
J'ai testé de nombreuses combinaisons, mais pour l'instant impossible d'afficher mon icône.
J'ai placé l'image de celui-ci dans un dossier image de mon projet et placé le script dans ce projet.

Pourriez vous m'apporter vos lumières à ce sujet?
Merci

Bonjour,

j'ai testé l'exemple de leaflet pour les icônes

ce bout de code a été testé sous D7 donc en VCL mais le principe reste le même.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var
  js           : string;
begin
  // création de l'ombre. Utilisée par toutes nos icônes
  js := 'var LeafIcon = L.Icon.extend({' +
    'options: {' +
    'shadowUrl: ''http://leafletjs.com/examples/custom-icons/leaf-shadow.png'',' +
    'iconSize:     [38, 95],' +
    'shadowSize:   [50, 64],' +
    'iconAnchor:   [22, 94],' +
    'shadowAnchor: [4, 62],' +
    'popupAnchor:  [-3, -76]}});' +
    // et on construit les Icônes
    'var greenIcon = new LeafIcon({iconUrl: ''http://leafletjs.com/examples/custom-icons/leaf-green.png''}),' +
    'redIcon = new LeafIcon({iconUrl: ''http://leafletjs.com/examples/custom-icons/leaf-red.png''}),' +
    'orangeIcon = new LeafIcon({iconUrl: ''http://leafletjs.com/examples/custom-icons/leaf-orange.png''});' +
    //  utilisation des Icônes
    'L.marker([48.84450, 2.94335], {icon: greenIcon}).addTo(map);' +
    'L.marker([48.74450, 2.94335], {icon: redIcon}).addTo(map);' +
    'L.marker([48.64450, 2.94335], {icon: orangeIcon}).addTo(map);' +
    'map.flyTo([48.74450, 2.94335]);';
  WebBrowser1.ExecuteScript(JS);
end;

pare contre les images doivent être sur un site !!!

Bien sûr la création devrait être séparée de la partie utilisation
Une fois créées les Icônes sont réutilisables à souhait.
J'ai tout laissé ensemble pour les besoin du teste.

Comme je ne suis pas à l'aise avec le JavaScript
si quelqu'un sait comment utiliser des images en locale je suis preneur :mrgreen:

Cordialement,
@+

29/10/2021, 12h56
exoseven

au pire il suffit de les convertir en data uri
29/10/2021, 13h07
Cirec

Citation:

Envoyé par exoseven

au pire il suffit de les convertir en data uri

effectivement ça doit le faire
Merci pour l'information.:ccool:
Je ne connaissais pas ce site. :oops:

Cordialement,
@+

2 pièce(s) jointe(s)

Bonjour,
Désolé de ma réponse tardive, j'ai du quitter le WEB temporairement à cause d'un opération chirurgicale.
Il serait impossible de personnaliser une icône sans URL, d'après ce que je crois comprendre...donc pas d'offline?.

Pourtant, j'ai importé la biblothèque Leaflet et mon script pointe dessus sans utilisé le net.

Voici d'ailleurs le script expérimental:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Esri Leaflet Quickstart</title>
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 
  <!-- Load Leaflet from PC -->
  <link rel="stylesheet" href="D:/Developement/CPS-NG/Win64/Debug/Leaflet/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="D:/Developement/CPS-NG/Win64/Debug/Leaflet/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
 
  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>
 
<div id="map"></div>
 
<script> 
    var map = L.map('map').setView([45, 0], 3);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> CPS-NG'
    }).addTo(map);
        
        var myIcon = L.icon({
            iconUrl: './Leaflet/images/airplane.png',
                iconSize: [100,100],
                iconAnchor:[15,15]});
                
</script>
 
</body>
</html>

L'icône par défaut est bien chargé alors qu'il se trouve dans mon dossier local.

par contre, myIcon, situé au même emplacement, lui, ne se charge pas.
Il devrait ressembler à cela:
Pièce jointe 607976.

Dans mon appli, il apparaît comme suit:Pièce jointe 607977.

Une idée?
Merci

03/11/2021, 19h52
ShaiLeTroll

. est-il ton répertoire actif ou plutôt un chemin relatif pour openstreetmap qui ne sait pas comment lié l'image
04/11/2021, 12h09
Pierre95

Bonjour,
J'ai placé le dossier Leaflet qui contient les icônes standards et personnalisés dans le dossier debug win 64 de mon projet. Il contient aussi le fichier HTML donné plus haut et l'exe du projet.
Est-ce bien cela que vous appelez dossier "actif".

Merci.
Pierre
04/11/2021, 14h32
ShaiLeTroll

Si c'est un possible fait un clic droit sur l'image, regarde l'URL
Ajout aussi un OnDowload ou plutôt OnDidStartLoad, scrute les URL, tu verras surement que l'image n'est pas comme tu l'espère relatif à ton répertoire actif ""D:/Developement/CPS-NG/Win64/Debug/Leaflet/images/airplane.png"

le repertoire actif est le répertoire du programme, là où il est la plupart du temps, défini par un raccourci sur Windows comme dossier de démarrage mais peut être modifié par certains Dialogue Fichier ou SetCurrentDirectory

et donc ton image avec ce .
Je ne suis pas dev web, encore moins js mais './Leaflet/images/airplane.png' est relatif à la variable L et ce L est lié via tileLayer à https://...tile.openstreetmap.org/.... du coup comment est construit l'URL ?
J'ignore même à quoi correspond tout ce bricolage d'icon, je suppose que c'est les carrés noirs sur la route rouge

Pour résumer Quelle racine utilise le WebBrowser.

1 pièce(s) jointe(s)

Bonjour,

J'ai testé comme conseillé par ShaiLeTroll l'affichage de l'URL de l'image fournie par le script HTML
Le résultat est:

Code:

'blank:/Leaflet/images/airplane.png'

le point ./Leaflet/... correspond bien au "blank"

J'ai donc changé cette propriété en:

Code:

'file://D:/Developement/CPS-NG/Win64/Debug/Leaflet/images/airplane.png'

Et là , le miracle s'opère.

Pièce jointe 608099.

Avant de clore ce sujet, j'aurais une dernière question:

Dans mon programme, le chargement du WebBrowser s'effectue comme suit:

Code:

1
2
3
4
5
6
7
8
 
procedure TfrmWebBrowser.FormCreate(Sender: TObject);
begin
  HtmlList := TStringList.Create;
  HtmlList.LoadFromFile('FirstMap.html');
  wbrMap.LoadFromStrings(HtmlList.Text,'');
  HtmlList.Free;
end;

Pourquoi, si j'ajoute dans la même procédure, le chargement des markers et du polygon qui les relies, j'obtiens une erreur.
Alors que si je charge markers et polygon sur le click d'un bouton, tout fonctionne:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
procedure TfrmWebBrowser.btnShowMapClick(Sender: TObject);
  var
   aStringList  :TStringList;
   fltLatOld,
   fltLonOld    : Single;
   i            :Integer;
begin
  aStringList := TStringList.Create;
  aStringList.StrictDelimiter := True;
  aStringList.Delimiter := ';';
  Js:= Format('map.fitBounds([[%n, %n],' +
                             '[%n, %n]]);',
              [rcdFlight.fltMinLat, rcdFlight.fltMinLon,
              rcdFlight.fltMaxLat, rcdFlight.fltMaxLon]);
  wbrMap.BeginUpdate;
  wbrMap.EvaluateJavaScript(Js);
  wbrMap.EndUpdate;
  for i:= 0 to gslMapWayPoints.Count-1 do
  begin
    aStringList.DelimitedText := gslMapWayPoints[i];
    Js:= Format('L.marker([%n, %n], {icon:myIcon}).addTo(map);',
                 [strToFloat(aStringList[0]),
                 strToFloat(aStringList[1])]);
                 //aStringList[2]]);
    if i > 0 then
      Js:= Js + Format('L.polygon([[%n, %n], [%n, %n]],'+
                       ' {color: "red"}).addTo(map);',
                       [fltLatOld, fltLonOld,
                        strToFloat(aStringList[0]),
                        strToFloat(aStringList[1])]);
    wbrMap.BeginUpdate;
    wbrMap.EvaluateJavaScript(Js);
    wbrMap.EndUpdate;
    if i <= gslMapWayPoints.Count-2 then
    begin
    fltLatOld    := strToFloat(aStringList[0]);
    fltLonOld    := strToFloat(aStringList[1]);
    end;
  end;
  aStringList.Free;

Merci encore une fois pour votre aide.
Pierre

05/11/2021, 12h36
ShaiLeTroll

Pour le WebBrowser FMX, je l'ignore mais pour la version VCL qui utilise InternetExplorer, le chargement est asynchrone pour "convertir" le HTML et en DOM (IHTMLElement ...) sans compter l'image qui semble tout de même venir d'un webservice de openstreetmap.org
Le temps de parsage est assez court pour qu'entre deux clics, ils puissent se finir

Faudrait étudier un peu plus le comportement de LoadFromStrings et la gestion des liens internes, vérifier si cette fonction est bloquante ou asynchrone.
05/11/2021, 13h14
Pierre95

Merci , Je creuse en ce sens.... :merci:

Voir 40 message(s) de cette discussion en une page