Conseil pour afficher dynamiquement de nouveaux points sur une carte en utilisant Leaflet

**Péhelji** · 29/01/2020, 16h45

Bonjour à tous,

Je souhaite pouvoir faire apparaître sur une carte, dans le cadre d'une promenade par exemple, l'endroit où je me trouve, et ce à intervalles réguliers.
J'ai commencé par utiliser un TWebBrowser qui affiche plusieurs marqueurs explicitement renseignés dans une page HTML.
Ne connaissant pas beaucoup la programmation Web et encore moins, le cas échéant, le Javascript, je voudrais savoir s'il est possible de transmettre de nouvelles valeurs, dynamiquement, à une fonction Leaflet contenue dans une page HTML.
Dans le cas contraire, quelle méthode utiliseriez-vous pour parvenir au résultat défini en introduction.
Merci d'avance pour votre aide.

**ShaiLeTroll** · 30/01/2020, 10h04

Surtout que programmer en Delphi pour afficher une page sur un TWebBrowser qui doit gérer du JS c'est plus périlleux
Je ne connais pas les limites du TWebBrowser, c'est pas censé être du Internet Explorer
Je l'utilise en ce moment pour la phase "/Authorize" de l'OAuth2.0 d'Azure AD / MS Graph ... je vais publier une belle classe à ce sujet pour mes premières réussites

Il serait plus pertinent de lancer un navigateur plus performant comme Chrome si me JS est avancé et le faire pointer sur une url type "http:\\localhost\MyApp"
Votre application embarque un ServerWeb qui retourne une page initial en HTML+JS ensuite tout se fait via des appels WS REST pour l'enrichissement de la page initiale

Après ça c'est si vous voulez vraiment faire du Delphi + JS
Une solution JS Server type Node JS + JS Client serait une autre approche et rien n'empêche que le JS Server lui même accède à un WS REST en Delphi

**Péhelji** · 30/01/2020, 20h30

Merci ShaiLeTroll pour votre réponse.

Envoyé par ShaiLeTroll

Je ne connais pas les limites du TWebBrowser, c'est pas censé être du Internet Explorer

Oui pour une application Windows, mais sous FireMonkey en vue d'une application mobile, le TWebBrowser pointe sur un contrôle WebView. Le TWebBrowser pour mobile est bien moins implémenté que son équivalent windowsien. Il affiche une page Web... et c'est à peu près tout ce qu'il sait faire !

Envoyé par ShaiLeTroll

Votre application embarque un ServerWeb qui retourne une page initial en HTML+JS ensuite tout se fait via des appels WS REST pour l'enrichissement de la page initiale

Là j'avoue être un petit peu beaucoup largué

!

Envoyé par ShaiLeTroll

Après ça c'est si vous voulez vraiment faire du Delphi + JS

Ben c'est surtout que Delphi est le seul langage de programmation que je comprends et que j'utilise

.

**ShaiLeTroll** · 31/01/2020, 11h26

Envoyé par Péhelji

... mais sous FireMonkey en vue d'une application mobile, le TWebBrowser pointe sur un contrôle WebView...

Impossible de le deviner si vous ne l'indiquer par dans votre sujet, raison pour laquelle, indiquer la version de Delphi et le framework utilisé est important
Mes propos ont donc été inutile sur le TWebBrowser puisque je n'ai évoqué que celui du namespace SHDocVw pour Windows.

Envoyé par Péhelji

Envoyé par ShaiLeTroll

Il serait plus pertinent de lancer un navigateur plus performant comme Chrome si me JS est avancé et le faire pointer sur une url type "http:\\localhost\MyApp"
Votre application embarque un ServerWeb qui retourne une page initial en HTML+JS ensuite tout se fait via des appels WS REST pour l'enrichissement de la page initiale

Là j'avoue être un petit peu beaucoup largué

!

Ah !
Vous avez indiqué "WebMaster" sur votre profil
Nous avons donc supposé que vous maîtrisiez les technologies Web et que vous souhaitiez proposer une expérience de Cartographie au sein d'une application Desktop
L'importance de fournir le bon contexte aura fait gagner du temps

Pour le notions de HTML+JS envoyé au Browser utilisant par la suite un WS REST
Je pense qu'il va être nécessaire pour utiliser Leaflet qui doit bien avoir une source de données dans votre cas, elle sera double celle des serveurs Leaflet et celle pour enrichir le contenu avec votre propre données.
Et là, il va falloir s'intéresser massivement au JavaScript qui aura forcément une source externe (votre application mobile ou votre propre serveur web)

Je ne connais pas du tout Leaflet
Et je pense que vous allez devoir vous intéressez à cette bibliothèque, vous investir personnellement, avez-vous regarder la documentation ?
Avez-vous tenter juste une simple page HTML ?
Le TWebBrower FMX n'est qu'une broutille dans l'affaire, faut commencer déjà par savoir utiliser Leaflet, réussir un affichage sur Chrome par exemple
Puis ensuite vérifier si TWebBrower FMX est assez puissant pour afficher la même chose (par chance, il semble que le TWebBrowser FMX ne soit limité que sur Win32 mais bien plus perfomant sur Android ou iOS à cause d'une utilisation des navigateurs natifs respectifs comme iOS API UI WebKit)
ce n'est pas sur un forum Delphi que vous trouverez les réponses sur l'utilisation d'une bibliothèque JavaScript

Si vous souhaitez à tout prix rester en Delphi, pourquoi ne pas choisir alors plutôt TMS FMX WebGMaps c'est Google Maps dans FireMonkey
ou alors contacter ECMap qui propose une suite de composants pour Delphi qui prend en charge les apis Google Maps 3, Google Earth, Bing Maps, CloudMade , OpenMapQuest et Leaflet
Mais je suppose que vous aviez déjà trouvé le composant TECNativeMap pour FMX lors de vos recherches

Et je pense que ce n'est qu'un rapide survol de la problématique, je vous laisse creuser un peu plus le sujet

**Péhelji** · 31/01/2020, 19h01

Bonjour ShaiLeTroll,

Envoyé par ShaiLeTroll

Vous avez indiqué "WebMaster" sur votre profil

J'avais sélectionné ce choix parce que je suis administrateur de mon site Web sans être pour autant développeur Web. Si la mention "WebMaster" a pu prêter à confusion et fait perdre du temps, j'en suis désolé. Je l'ai remplacé par Développeur occasionnel, ce que j'étais autrefois sous Delphi 3 et 5, et de nouveau aujourd'hui sous Delphi 10.3.3. Community Edition.

Envoyé par ShaiLeTroll

Je pense qu'il va être nécessaire pour utiliser Leaflet qui doit bien avoir une source de données dans votre cas, elle sera double celle des serveurs Leaflet et celle pour enrichir le contenu avec votre propre données.

La source de données principale, pour la géolocalisation, doit être un serveur OpenStreetMap. Quand aux données personnelles, elles dépendront en grande partie ce que je pourrais faire avec les précédentes.

Envoyé par ShaiLeTroll

il va falloir s'intéresser massivement au JavaScript qui aura forcément une source externe (votre application mobile ou votre propre serveur web)

Absolument. Mais ce que je voulais déterminer étaient les possibilités et les moyens de pouvoir traiter des données provenant d'un serveur Web par une application mobile développée en pascal objet.

Envoyé par ShaiLeTroll

Avez-vous tenter juste une simple page HTML ?

Tout à fait. C'est même par là que j'ai commencé, en affichant dans un contrôle TWebBrower des marqueurs définis dans une page HTML utilisant la librairie Leaflet.

Envoyé par ShaiLeTroll

ce n'est pas sur un forum Delphi que vous trouverez les réponses sur l'utilisation d'une bibliothèque JavaScript

Si la plus grande partie du travail doit être effectué par le JavaScript, je ne manquerai pas, je vous rassure, de rechercher des réponses à mes questions sur les autres forums du site consacrés à ce langage.

Envoyé par ShaiLeTroll

je pense que ce n'est qu'un rapide survol de la problématique, je vous laisse creuser un peu plus le sujet

Comme vous le supposez dans votre dernier commentaire, j'ai déjà beaucoup fouiller sur le sujet. Mais pas suffisamment mis en application, car je ne savais pas dans quelle direction je devais me diriger. Je vous remercie de m'avoir éclairé sur ce point

.

**SergioMaster** · 01/02/2020, 08h18

Bonjour,

Je ne suis pas sûr d'avoir tout compris (surtout à cause de leaflet) aussi vais-je résumer.

Vous avez une page HTML simple qui doit ressembler à ceci (par soucis de sécurité j'ai remplacé et mis en rouge les divers tokens par <token n>)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
	
	<title>Ma ballade</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="<token 1>" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="<token 2>" crossorigin=""></script>


	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 600px;
			height: 400px;
		}
	</style>

	<style>body { padding: 0; margin: 0; } #map { height: 100%; width: 100vw; }</style>
</head>
<body>

<div id='map'></div>

<script>
	var map = L.map('map').fitWorld();

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<token 3>', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11'
	}).addTo(map);

        L.marker([47.2044284,-1.40269]).addTo(map).bindPopup('Château de Haute Goulaine.')

	function onLocationFound(e) {
		var radius = e.accuracy / 2;

		L.marker(e.latlng).addTo(map)
			.bindPopup("vous êtes à" + radius + " mètres de ce point").openPopup();

		L.circle(e.latlng, radius).addTo(map);
	}

	function onLocationError(e) {
		alert(e.message);
	}

	map.on('locationfound', onLocationFound);
	map.on('locationerror', onLocationError);

	map.locate({setView: true, maxZoom: 16});
</script>
</body>
</html>

Cette page est sur un serveur web ou tout bêtement un fichier html dans un répertoire accessible au programme.
Vous avez la version 10.3.3 Communauty et écrivez un programme FMX pour cibler votre application vers un mobile.

Si la question qui se pose est simplement "où suis-je ?" : un simple rafraichissement de la page suffit à cause de la fonction function onLocationFound ; Bien évidemment cela nécessite qu'internet soit accessible à tout instant.

Remplacer la fonction onLocationFound par une insertion des valeurs fourni par le GPS du mobile est, elle aussi possible.

À ce stade de lecture une confirmation s'impose, si mon résumé est incorrect pas la peine de continuer.

Il y a fort longtemps (en années informatiques ce qui doit vouloir dire vers D2010) voilà comment je procédais :
Je récupérais le source de la page HTML dans un stream, modifiais les différentes balises que j'avais déclarées (c'est là où resurgissent mes <token >) grâce à des

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
for ligne in meslignesStream do 
 begin
   StringReplace(ligne,'<token 1>','qqq,bqkklq;qklk,hyhjdJHfvj==',[all]);
   .....
 end;

Avant de "réinjecter" la page. (je sois encore avoir un source quelque part du temps où les api google était "gratuites")

Sur le même principe pour fournir les coordonnées de votre GPS, ajoutez à votre page web un nouveau point de ballade cf. ligne en vert

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

L.marker([<coords>]).addTo(map).bindPopup('mon GPS me dit.')

Il "suffit" de rajouter un nouveau StringReplace et remplacer '<coords>' par un format('%f,%f',[NewLocation.latitude,NewLocation.Longitude]);
(Je mettrai ce code dans un évènement OnLocationChange d'un composant TLocationSensor)

Est-ce que cela fonctionnerait hors réseau ? Je suis incapable de le dire.

D'autres solutions sont envisageables je pense mais il est tôt et ma deuxième

m'attend

**Péhelji** · 01/02/2020, 15h54

Bonjour SergioMaster et merci pour votre intervention.

Envoyé par SergioMaster

Je ne suis pas sûr d'avoir tout compris (surtout à cause de leaflet) aussi vais-je résumer.

Rassurez-vous, dans les grandes lignes, tout y est !

! Car dans mes tests, je n'en étais pas encore à l'intégration de la fonction onLocationFound

.

J'avais effectivement pensé à enregistrer le source de la page HTML dans un flux pour pouvoir le "réinjecter" après l'ajout d'un code itératif permettant l'insertion des "points de ballade" stockés dans une base.
Mais je m'interrogeais sur la façon d'extraire la partie modifiable de la page HTML.

Je retourne à mes tests et vous tiens au courant de ma progression. Merci encore pour vos suggestions bien utiles.

**Péhelji** · 09/02/2020, 22h39

Bonsoir SergioMaster,

J'ai bien suivi la méthode précédemment envisagée :

Envoyé par SergioMaster

Il y a fort longtemps (en années informatiques ce qui doit vouloir dire vers D2010) voilà comment je procédais :
Je récupérais le source de la page HTML dans un stream, modifiais les différentes balises que j'avais déclarées (...) Avant de "réinjecter" la page.

qui fonctionne ok pour l'affichage de la carte proprement dite, un peu moins dès lors que l'on intègre à la page les données gps issues d'un fichier extérieur -> gel de l'application.
Aussi, plutôt que d'intégrer ces données à la page HTML, je souhaite maintenant les récupérer dans un fichier json et les afficher via un script déclaré dans la page HTML, comme dans le code ci-dessous que j'ai trouvé ici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    (...)
     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
    <script type='text/javascript' src='http://cdn.leafletjs.com/leaflet/v1.6.0/leaflet.js'></script>
    <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>
 
    <script type='text/javascript' src='maps/airports.js'></script>
    <script type='text/javascript' src='maps/leaf-demo.js'></script>
  </head>
</html>

Toutefois, après bien des recherches sur Internet, je ne sais toujours pas comment je dois faire pour déposer mon script et mon fichier de données en local sur mon Android à partir de mon application FireMonkey.
Car contrairement à un environnement Windows où il suffit de les placer dans le répertoire racine (où un sous-répertoire comme "maps" dans le code ci-dessus), il n'est pas possible d'accéder à la conception à ces emplacements de travail sous Android.

Si vous avez une idée sur le moyen d'y parvenir, je suis preneur

!

**SergioMaster** · 10/02/2020, 06h55

Bonjour

Content que cette méthode "bourrin" fonctionne encore

Envoyé par Péhelji

dès lors que l'on intègre à la page les données gps issues d'un fichier extérieur

Marrant, j'avais envisagé dans mon post de parler d'une base de données de ballade mais m'étais ravisé pour éviter de surcharger mes explications.

Aussi, plutôt que d'intégrer ces données à la page HTML, je souhaite maintenant les récupérer dans un fichier json

Moi j'envisageais carrément une bdd SQLite pour contenir toutes les ballades

Toutefois, après bien des recherches sur Internet, je ne sais toujours pas comment je dois faire pour déposer mon script et mon fichier de données en local sur mon Android à partir de mon application FireMonkey... il n'est pas possible d'accéder à la conception à ces emplacements de travail sous Android.

Ce n'est qu'une question de déploiement, le/les fichiers doivent être placés dans un répertoire "spécifique" généralement .\assets\internal
on utilise TPath.GetHomepath cf. http://docwiki.embarcadero.com/RADSt...ises_en_charge
pour y accéder par code.

Ainsi si vous déployez votre fichier JSON (ou une base SQLlite

) nommée "toto" vous accéderez aux données ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Filename:=System.IOUtils.TPath.Combine(System.IOUtils.TPath.GetHomepath,'toto'); // attention à la sensibilité de casse

**Péhelji** · 10/02/2020, 15h26

Bonjour SergioMaster,

Envoyé par SergioMaster

Content que cette méthode "bourrin" fonctionne encore

Quoique n'ayant certainement pas votre expérience, je dirais pourtant que c'est bien souvent ce genre de méthode qui fonctionne le mieux

!

j'avais envisagé (...) une base de données de ballade (...) carrément une bdd SQLite pour contenir toutes les ballades

Mon idée première est bien de pouvoir stocker puis accéder à différentes balades ou parcours.
J'ai converti mes données gps en un fichier json parce que j'ai lu qu'il était facile de traiter ce format dans un script js.
Je ne suis pas contre l'utilisation au final d'une base SQLite, d'autant que j'ai lu (ce que je fais beaucoup en ce moment

) que cette méthode était plus sécurisante au niveau de l'échange des données. Mais n'ayant jamais utilisé SQLite, je m'y mettrais volontiers si cette option se révèle plus avantageuse...

Toutefois, pour l'heure, mon souci est au niveau du "déploiement" (ou rapatriement) de mes données premières vers "un répertoire "spécifique"", à savoir:

le/les fichiers doivent être placés dans .\assets\internal

Oui mais comment ? Par le biais du menu Projets/Déploiement ou en créant sur le disque dur le sous-répertoire \internal dans \Android\Debug\<MonProjet>\assets ?

Merci encore pour votre aide

!

**SergioMaster** · 10/02/2020, 16h27

Re,

Envoyé par Péhelji

Par le biais du menu Projets/Déploiement

C'est ça, la base ou les fichiers sont à ajouter dans le paquet

SQLite, c'est simplissime du moins quand on a quelques bases SQL, avantage généralement on n'a pas à déployer le moteur de base de données (i.e si on utilise Firedac).
La structure de la BDD me semble simple : un fichier Ballade(id,libelle) , et un fichier coordonnees(id,id_ballade,longitude,latitude,description)

**SergioMaster** · 11/02/2020, 17h13

Bonjour,

J'ai rapidement fait une ébauche (sans la partie web) de ce que cela pourrait donner avec une gestion des données (base SQLite)
Cela devrait vous donner un schéma assez complet de ce que cela nécessite.
Il y a bien sûr pas mal de todos
- la partie web (il n'est pas dit que je ne l'ajoute pas pour le fun)
- le style (pas top)
- et tout ce que j'ai pu mettre dans les sources

c'est une ébauche rapide, juste testée sous windows, mais si je l'ai écrite c'est aussi pour pouvoir voir ce que cela donne sous Android (surtout la partie clavier, et l'accès au GPS)

**Péhelji** · 11/02/2020, 20h10

Bonsoir SergioMaster,

Envoyé par SergioMaster

J'ai rapidement fait une ébauche (...) Cela devrait vous donner un schéma assez complet de ce que cela nécessite.

C'est effectivement un peu plus cossu qu'avec du Json

!

Il y a bien sûr pas mal de todos

Je ne vous le fais pas dire... et ce n'est qu'une ébauche

!

c'est aussi pour pouvoir voir ce que cela donne sous Android

On a droit à un écran gratuit inconnu sous Windows

-> Screenshot_2020-02-11-19-43-24.zip

Mais çà reste du beau travail. Merci pour le coup de pouce

!

**SergioMaster** · 12/02/2020, 07h50

Bonjour,

Envoyé par Péhelji

On a droit à un écran gratuit inconnu sous Windows

-> Screenshot_2020-02-11-19-43-24.zip

C'est un problème de déploiement.
- soit vous avez oublié d'indiquer qu'il fallait charger la randonnees.s3db dans assets.internal
- soit il y a un problème dans le source (datasunit.pas qui a un peu évolué, comme le reste, depuis mon zip), voir ligne en rouge

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
48
49
50
51
52
53
54
55
56
57
unit DatasUnit;

interface

uses
  System.SysUtils, System.Classes, FireDAC.Stan.Intf, FireDAC.Stan.Option,
  FireDAC.Stan.Error, FireDAC.UI.Intf, FireDAC.Phys.Intf, FireDAC.Stan.Def,
  FireDAC.Stan.Pool, FireDAC.Stan.Async, FireDAC.Phys, FireDAC.Phys.SQLite,
  FireDAC.Phys.SQLiteDef, FireDAC.Stan.ExprFuncs, FireDAC.FMXUI.Wait,
  FireDAC.Stan.Param, FireDAC.DatS, FireDAC.DApt.Intf, FireDAC.DApt, Data.DB,
  FireDAC.Comp.DataSet, FireDAC.Comp.Client, FMX.Types, FMX.Controls,
  FMX.PlatForm;

type
  TDatas = class(TDataModule)
    FDConnection1: TFDConnection;
    QRandos: TFDQuery;
    QRandosID_RANDO: TFDAutoIncField;
    QRandosNOM: TWideMemoField;
    QRandosDESCRIPTION: TWideMemoField;
    DSQRRandos: TDataSource;
    QCoordsRando: TFDQuery;
    UpdtQRCoords: TFDUpdateSQL;
    DSQCoord: TDataSource;
    procedure DataModuleCreate(Sender: TObject);
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
    MessageService : IFMXDialogServiceSync;
  end;

var
  Datas: TDatas;

implementation

{%CLASSGROUP 'FMX.Controls.TControl'}

{$R *.dfm}
uses system.IOUtils;

procedure TDatas.DataModuleCreate(Sender: TObject);
begin
FDConnection1.Params.Database:='..\..\randonnees.s3db'; // avec les sources {todo à modifier}
{$IFDEF ANDROID}
{TODO need gps, internet}
FDConnection1.Params.Database:=TPath.Combine(TPath.GetDocumentsPath,'randonnees.s3db');
{$ENDIF}
TPlatformServices.Current.SupportsPlatformService(IFMXDialogServiceSync,MessageService);
FDConnection1.Connected:=True;
QRandos.Active:=True;
QCoordsRando.Active:=True;
end;

end.

cela dit, ~~je n'ai pas encore déployé et donc testé~~ vers Android (déjà je n'aime pas ce que me font les styles en ce qui concerne les boutons

)
EDIT

Nom : Capture.PNG
Affichages : 706
Taille : 1,9 Ko

Nom : Screenshot_20200212-083559.png
Affichages : 694
Taille : 16,6 Ko

~~je pense qu'avant de le faire~~ je vais aussi voir pour l'affichage web que j'avais mis de côté

**Péhelji** · 12/02/2020, 18h46

Bonjour SergioMaster,

Pour une fois, j'avais presque tout bon !

Envoyé par SergioMaster

soit vous avez oublié d'indiquer qu'il fallait charger la randonnees.s3db dans assets.internal

J'avais bien placé la base de données dans assets\internal comme le suggère la documentation RadStudio. Par contre, comme indiqué dans vos messages, j'ai réessayé avec .\assets\internal . C'est kif-kif

!

FDConnection1.Params.Database:=TPath.Combine(TPath.GetDocumentsPath,'randonnees.s3db');

Toujours sur la base de la documentation RadStudio, j'avais bien remplacé GetHomePath par GetDocumentsPath avant de compiler. Mais comme les deux fonctions renvoient bien (après vérification) vers le même emplacement... c'est encore kif-kif

!

**SergioMaster** · 13/02/2020, 07h40

Bonjour,

je ne comprends pas pourquoi cela ne fonctionne pas, un problème de nom de fichier (la casse est à respecter)

De mon côté je cherche à faire la partie "webbrowser" mais en ne passant que par un fichier interne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 webbrowser1.BeginUpdate;
  webbrowser1.URL:=WebBrowser1.FilesPref+'D:/Test/Randos/leafletbase.html';
  webbrowser1.EndUpdate;

Ce qui fonctionne.
Nom : Capture.PNG
Affichages : 650
Taille : 23,8 Ko

j'ai ensuite voulu aller plus loin et tester le chargement de la rando sélectionnée.
Je me suis dit "si je passais par des streams ?"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
     fS : TStringStream;
     Sl : TStringList;
begin
  FS:=TStringStream.Create;
  SL:=TStringList.Create;
  try
  FS.LoadFromFile('D:/Test/Randos/leafletbase.html');
  SL.LoadFromStream(FS);
  webbrowser1.BeginUpdate;
  webbrowser1.LoadFromStrings(SL.Text,WebBrowser1.FilesPref);
  webbrowser1.EndUpdate;

Ce n'est pour l'instant qu'un simple brouillon avant le boulot, malheureusement les caractères accentués ne plaisent pas
Nom : Capture_1.PNG
Affichages : 638
Taille : 21,0 Ko

Nom : Capture_1.PNG
Affichages : 638
Taille : 21,0 Ko

j'ai essayé divers encodage/décodage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
  SL.LoadFromStream(FS,TEncoding.UTF8);
  webbrowser1.BeginUpdate;
  webbrowser1.LoadFromStrings(UTF8Encode(SL.Text),WebBrowser1.FilesPref);
//  webbrowser1.URL:=WebBrowser1.FilesPref+'D:/Test/Randos/leafletbase.html';
  webbrowser1.EndUpdate;

sans plus de succès, l'encodage/décodage n'étant pas mon point fort

**SergioMaster** · 13/02/2020, 11h54

Toujours pas résolution de mes accents avec Windows 10
mais avec Androïd
Nom : Screenshot_20200213-114648.png
Affichages : 635
Taille : 99,6 Ko

ça baigne

Nota : Les données viennent bien de mon fichier et non d'une page html toute faite

Bon, j'ai fait quelque chose de pas très propre donc je ne mets pas le zip
Idem il me faut encore donner les permissions Android et indiquer la position, prévoir des ajouts de points en cours de route, etc.
Mais, ça avance, ouf cela m'a permis de me détendre d'une intervention délicate

**SergioMaster** · 17/07/2021, 08h51

Bonjour,
Bien que tardivement, car la cible était surtout Android, j'ai résolu le problème des cararctères accentués sous windows

a) dans la liste des unités utilisées en implémentation j'ai ajouté l'unité Soap.HTTPUtil

b) et j'ai codé ainsi la partie ajout des repères

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
  SL.LoadFromStream(FS);
  for i:=0 to SL.Count-1 do
    begin
      if SL[i].Contains('#coords#') then
       begin
         sc:=TStringList.Create;
         try
           with datas.QCoordsRando do
            begin
             First;
             while not EOF do
             begin
               sc.Add(Format('L.marker([%.6f,%.6f]).addTo(map).bindPopup("%s").openPopup();',
                             [fieldByName('Latitude').AsFloat,
                              fieldByName('Longitude').AsFloat,
                              {$IFDEF MSWINDOWS}
                               HTMLEscape(fieldByname('INTITULE').asString)
                              {$ELSE} fieldByname('INTITULE').asString{$ENDIF}
                              ],
                             TFormatSettings.Create('en_US')));
               Next;
             end;
            end;
           SL[i]:=sc.Text;
         finally
           sc.Free;
         end;
       end;
    end;

Nom : Capture.PNG
Affichages : 473
Taille : 94,4 Ko

Seul, le message

Envoyé par page web

---------------------------
Message de la page Web
---------------------------
Geolocation error: Geolocation not supported..

me pose souci

**SergioMaster** · 17/07/2021, 10h49

Envoyé par SergioMaster

Seul, le message Geolocation error: Geolocation not supported..
me pose souci

Eh bien, ce n'est plus le cas, j'ai scupuleusement appliquer le chapitre "Prise en charge de JavaScript Integration sur la plate-forme Windows" trouvé sur cette page http://docwiki.embarcadero.com/Libra...er.TWebBrowser et, plus de message sur la Geolocation.

AMHA il est dommage de ne pas avoir d'explication sur les valeurs précises à utiliser, et, si je regarde les autres valeurs du registre j'ai un doute sur la base décimale indiquée, j'aurais plutôt parié sur de l'HexaDécimal