La vidéo du vendredi du CNRS




Visualisation du contenu d'un fichier

Vous voulez visualiser, dans un champ de votre page html , le contenu d'un fichier. En simplifiant au maximum
vous avez un dossier contenant les deux fichiers

  • index.html
  • 2016-03-24_LePercy-G2.gpx  (fichier trace produit par un GPS, à visualiser)

Le fichier index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>visualisation_document</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function charger(fichier)
{
if(window.XMLHttpRequest) obj = new XMLHttpRequest(); //Pour Firefox, Opera,...
else if(window.ActiveXObject) obj = new ActiveXObject("Microsoft.XMLHTTP"); //Pour Internet Explorer
else return(false);
if (obj.overrideMimeType) obj.overrideMimeType("text/xml"); //Évite un bug de Safari
obj.onreadystatechange = function()
{if(obj.readyState == 4){ $("#visu").val(obj.responseText);}};
obj.open("GET", fichier, true);
obj.send(null);
}
</script>
<style>
#visu{
border:1px solid black;
width:800px;
font-family: Georgia;
font-size: 12px;
height:600px;
overflow:auto;
background-color:#B4CED6;
}
</style>
</head>
<body>
&nbsp;&nbsp; Fichier à visualiser <input id="fic" value="2016-03-24_LePercy-G2.gpx" size="50"> </input>
&nbsp;&nbsp;<input type="button" id="voir" value="Voir le source" onclick="charger($('#fic').val());"/><br><br>
<textarea id="visu"> ....</textarea>
<script type="text/javascript">$("#visu").val("");</script>
</body>
</html>

 

Tester  ICI




Google Elevation Service

Google met à la disposition de tous la possibilité de connaître l'altitude en un ou plusieurs points (connus par leurs coordonnées géographiques). Ainsi si vous tapez l'adresse suivante dans votre navigateur favori:

http://maps.googleapis.com/maps/api/elevation/xml?locations=45.12,5.77|46.152,6.527&sensor=false
vous obtenez la réponse suivante:


ges
Les altitudes recherchées (arrondies) sont donc respectivement 445 mètres et 907 mètres.

Mais vous pouvez utiliser Google Elevation Service dans une page web, moyennant un appel à une page php.
Plus précisément voici un exemple avec les mêmes données que ci-dessus:

Le fichier HTML:

 

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title>routeEditEC </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="cache-control" content="no-cache">
<meta name="author" content="Marc Duc-Jacquet" />
</head>

<body>
<script type="text/javascript" >
// tabLat, tabLon tableaux contenant  les latitudes et les longitudes des points
// la fonction renvoie un tableau avec les altitudes correspondantes, calculées
// en utilisant "Google Elevation Service" et XMLHttpRequest

function getAltTab(tabLat,tabLon) {

var tabtemp=[];
var xhr_object = null;
xhr_object = new XMLHttpRequest();
var method   = "POST";
var filename = "calcxG.php";

// on définit data de la sorte: (c'est le format pour une requête du Google Elevation Service)
// data="latlon=lat0,lon0|lat1,lon1| ... |latn,lonn"; (n+1 points)
var data="latlon=";
for(var i=0;i<tabLat.length-1;i++) {data+=tabLat[i]+","+tabLon[i]+"|";}
i=tabLat.length-1;  data+=tabLat[i]+","+tabLon[i];

xhr_object.open(method, filename, false);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) {
var tmp = xhr_object.responseText;
tmp=tmp.substring(0,tmp.length-1);
tabtemp=tmp.split("|");
}
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr_object.send(data);
return(tabtemp);
}
var tabLat=[45.12, 46.152];
var tabLon=[5.77, 6.527];
var tabEle=getAltTab(tabLat,tabLon);
var ch="";
for(var i=0; i<tabLat.length;i++)
{ ch+="( lat="+tabLat[i]+" lon="+tabLon[i]+") ---> alt="+tabEle[i]+"<br>";}
document.write(ch);
</script>
</body>
</html>


Le fichier "calcxG.php"

 

<?php
$latlon = $_POST['latlon'];
$url = "http://maps.googleapis.com/maps/api/elevation/xml?locations=".$latlon."&sensor=false";
$altGoogle="";

$result = file_get_contents($url);
// on parse le document XML reçu
$doc = new DOMDocument();
$doc->loadXML($result );
$liste=$doc->getElementsByTagName('elevation');
$n=$liste->length;
if ($n>0)
{  for ($i=0;$i<($n-1);$i++) {$val=intval($liste->item($i)->nodeValue);   $altGoogle.=$val."|";} }
$altGoogle.=round($liste->item($n-1)->nodeValue);
echo $altGoogle;
?>


Démo ICI


Et voici le résultat:

( lat=45.12 lon=5.77) ---> alt=445
( lat=46.152 lon=6.527) ---> alt=907

Remarque: on peut aussi utiliser geonames

Exemple:   http://ws.geonames.org/srtm3?lat=45.16139&lng=6.52667&username=demo

ou pour deux points http://api.geonames.org/srtm3?lats=45.12,46.152&lngs=5.77,6.527&username=demo  ------>  450 , 915

Pour info Geoportail de l'IGN donne ...

 




Un joli slider pour votre site

Un slider vous permet de faire défiler quelques images, généralement en haut d'une page d'accueil. Voici un exemple de slider utilisant JQuery

voir  le source ICI

Démo ICI

 

Le temps entre deux photos est défini dans le script js/scripts.js  (ligne 78). Ici pour les besoins de la démonstration, ce temps est de 4 secondes. En général le défilement est beaucoup plus lent.




Trombinoscope facile avec tFPDF

tfPDF est une librairie php permettant de créer un document PDF.
Voici la configuration du dossier "trombinoscope":

dossier

 

Les photos (jpeg ou (jpeg), png, ou gif (casse indifférente) , de dimensions pas nécessairement identiques, sont placées dans le dossier "photos". Le fichier tFDPF.php et le dossier "font" sont obtenus en téléchargeant la librairie ici.

Le fichier "index.php" qui crée le pdf:

 

<?php

function dirToArray($dir) {

$result = array();

$cdir = scandir($dir);
foreach ($cdir as $key => $value)
{
if (!in_array($value,array(".","..")))
{
if (is_dir($dir . DIRECTORY_SEPARATOR . $value))
{
$result[$value] = dirToArray($dir . DIRECTORY_SEPARATOR . $value);
}
else
{
$result[] = $value;
}
}
}

return $result;
}
require('tFPDF.php');

class PDF extends tFPDF
{
// En-tête
function Header()
{
}

// Pied de page
function Footer()
{
// Positionnement à 1,5 cm du bas
$this->SetY(-15);
// Police Arial italique 8
$this->SetFont('Arial','I',8);
// Numéro de page
$this->Cell(0,10,"Trombi_Pangee ".date("d/m/Y")." - Page ".$this->PageNo(),0,0,'C');
}
}

$pdf = new PDF();
// Première page
$pdf->AddPage();

// Add a Unicode font (uses UTF-8)
$pdf->AddFont('DejaVu','','DejaVuSerif-Italic.ttf',true); //$pdf->SetFont('Arial','',7);
$pdf->SetFont('DejaVu','',6);

$chdossier="";
$dir="./photos";
$i=0;
$j=0;
$names=array();

$filelist1=dirToArray($dir);
$bool=asort($filelist1);
$filelist = array();

for($i=0;$i<count($filelist1);$i++)
{
$el=pathinfo($filelist1[$i]);
$ext=strtolower($el['extension']);
if(($ext=="jpg") OR ($ext=="jpeg") OR ($ext=="png") OR ($ext=="gif"))
{
$filelist[$j]=$filelist1[$i];
$names[$j]=$el['filename'];
$j++;
}
}

for($i=0;$i<count($filelist);$i++)
{
$el=pathinfo($filelist[$i]);
$names[$i]=$el['filename'];
}
$nbfiles=count($filelist);
$nbpages=floor($nbfiles/30).toString;
if($nbfiles%30 !=0) $nbpages+=1;
$k=0;

for ($p=1;$p<=$nbpages;$p++)
{
$n=30;
if ($p==$nbpages) $n=$nbfiles%30; // $n est le nombres de photos de la page $p
// traitement des photos de la page $p
$x=13;$y=10;
for($i=$k;$i<($k+$n);$i++)
{
if(($i%5==0) and ($i%30!=0) ) { $x=13; $y=$y+45;} else {if ($i%30!=0) $x=$x+35;}
$pdf->Image('photos/'.$filelist[$i],$x,$y,27,0,'');
$pdf->SetXY($x+2,$y+35);
$pdf->Write(6,$names[$i]);
}

$k=$k+$n;
if($p<$nbpages) $pdf->AddPage();
}

$pdf->Output("Trombinoscope.pdf","I");

?>

Attention:

1)Les caractères accentués sont pris en compte, uniquement si ces caractères sont tapés sur le serveur.

2) Le fichier tFDPF.php et le dossier "font"  doivent être ceux téléchargés (et non une copie) si l'on veut que les polices soient prises en compte correctement.

 

Démo    ICI




Diaporama facile

Référence: Single File PHP Gallery 4.5.6 (SFPG)
Kenny Svalgaard http://sye.dk/sfpg/
On ne peut faire plus simple...
Un dossier contenant

  • les photos (jpg (ou jpeg), png, gif: casse indifférente)
  • le fichier index.php

NB:

  • les photos n'ont pas besoin d'avoir des dimensions identiques...
  • utiliser les flèches pour une exploration des photos
  • Pour le diaporama saisie possible de l'intervalle en secondes entre deux photos.(ajout à la version)

Démo  ICI




Conversions d'angles

Voici un utilitaire de conversions entre les différentes unités ou  formats d'écriture utilisés pour les angles.

Démo ICI




Lecture fichier-Traitement-Renvoi résultat

Un exemple : transformation d'une route gpx en une trace

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>gpxUtils</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="DUC-JACQUET Marc">
    <!-- Date: 18-05-2014 -->

</head>
<body>
    <!-- iframe pour exécution cachée de scripts php -->
    <iframe id="cache" name="cache" src="#" style="width:0; height:0; visibility:hidden;" ></iframe>
                <div id="fichier">
                
                        <form  name="import" id="import" method="post"  enctype="multipart/form-data" action="traitement.php" target="cache" >
                            <input type="file" id="monInputFile" name="monInputFile" " </input><br><br>
                            <input type="submit" id="go" name="go" value="go" </input>
                        </form>
                </div>
</body>
</html>

avec "traitement.php"

<?php

$crlf=chr(13).chr(10);
$tab=chr(9);
$content_dir = './';
$filename=$_FILES['monInputFile']['name'];

    $tmp_file = $_FILES['monInputFile']['tmp_name'];
    
    if (is_uploaded_file($tmp_file))
    {

$xmlstr = file_get_contents($tmp_file);
    }
    

$xmlstr = preg_replace('`<name>(.*)</name>(.*)<ele>`','<ele>',$xmlstr);  // enlève les balises noms


$xmlstr = str_replace('rte', 'trk', $xmlstr);
$xmlstr = preg_replace('</name>','</name>'.$crlf.$tab.$tab.'<trkseg>', $xmlstr,1); // introduit la balise <trkseg>
$xmlstr = str_replace('<trkpt', $tab.'<trkpt', $xmlstr);

$xmlstr = str_replace('</trk>',$tab.'</trkseg>'.$tab.'</trk>', $xmlstr); // balise </trkseg>
$xmlstr = str_replace('<<', '<', $xmlstr);
$xmlstr = str_replace('>>', '>', $xmlstr);

$xmlstr = str_replace('</trk>', $crlf.$tab.'</trk>', $xmlstr);


$myfilename="temp.gpx";


// collect the data to the be returned to the user, no need to save to disk
// unless you really want to, if so, use file_put_contents()
$dataForFile=$xmlstr;

header('Content-type: application/x-download');
header('Content-Disposition: attachment; filename="'.$myfilename.'"');
header('Content-Transfer-Encoding: binary');
header('Content-Length: '.strlen($dataForFile));
set_time_limit(0);
echo $dataForFile;
exit;

?>

Fichier choisi

<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.1" creator="mdj_trackEdit"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

          xmlns="http://www.topografix.com/GPX/1/1"
         xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">
    <rte>
        <name>Rte</name>
        <rtept lat="45.26280523400372" lon="5.8563995361328125"><name>0</name><ele>337</ele></rtept>
        <rtept lat="45.295660091233344" lon="5.9051513671875"><name>1</name><ele>223</ele></rtept>
        <rtept lat="45.27681919090837" lon="5.965576171875"><name>2</name><ele>870</ele></rtept>
        <rtept lat="45.23960211592316" lon="5.965576171875"><name>3</name><ele>948</ele></rtept>
    </rte>
</gpx>

Fichier résultat  "temp.gpx"

 

<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.1" creator="mdj_trackEdit"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

          xmlns="http://www.topografix.com/GPX/1/1"
          xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">
    <trk>
        <name>Rte</name>

        <trkseg>
            <trkpt lat="45.26280523400372" lon="5.8563995361328125"><ele>337</ele></trkpt>
            <trkpt lat="45.295660091233344" lon="5.9051513671875"><ele>223</ele></trkpt>
            <trkpt lat="45.27681919090837" lon="5.965576171875"><ele>870</ele></trkpt>
            <trkpt lat="45.23960211592316" lon="5.965576171875"><ele>948</ele></trkpt>
        </trkseg>    

    </trk>
</gpx>

Rien n'a été stocké sur le serveur

Démonstration

 

 




Parser un fichier de route gpx

Fichier sur le serveur: fic.gpx

<?xml version="1.0" encoding="UTF-8"?>
<gpx>
<rte>
<name>Rte</name>

<rtept lat="45.25458854713424" lon="5.8193206787109375">
<name>0</name>
<ele>483</ele>
</rtept>

<rtept lat="45.29614310895674" lon="5.8618927001953125">
<name>1</name>
<ele>1069</ele>
</rtept>

<rtept lat="45.291795801333556" lon="5.9333038330078125">
<name>2</name>
<ele>235</ele>
</rtept>

<rtept lat="45.26667149874901" lon="5.9319305419921875">
<name>3</name>
<ele>506</ele>
</rtept>

</rte>
</gpx>

Traitement:

<?php
//Récupération des données du fichier

$ret='<br>';
$tab1='&nbsp;&nbsp;&nbsp;';

$doc = new DOMDocument();
$doc->load( 'fic.gpx' ); // chargement du fichier

$listeRte=$doc->getElementsByTagName('rte'); // tableau
$n=$listeRte->length; // nombre de balises <rte>
echo $n, '  route(s) trouvée(s)', $ret;

$rte=$listeRte->item(0); // première route

// à l'intérieur de la route y-a-t-il une balise <name>
if ($rte->getElementsByTagName('name')->length>0)
{
// récupération du nom de la route
$name=$rte->getElementsByTagName('name')->item(0)->nodeValue;
echo 'nom de la première route: ',$name,$ret;
//...
}

// tableau balises <rtept>
$listePtRte=$rte->getElementsByTagName('rtept');
// nombre de points de route
$n=$listePtRte->length;
echo $n, ' point(s) de route',$ret;

// traitement de chacun des points

if ($n>0)
{
echo 'traitement 1',$ret,$ret;
$i=0;
foreach($listePtRte as $pt)
{
// récupération des valeurs des attributs lat et lon
$lat=$pt->getAttribute('lat');
$lon=$pt->getAttribute('lon');
// récupération du nom du point de route
$name=$pt->getElementsByTagName('name')->item(0)->nodeValue;
// récupération de l'altitude du point de route
$ele=$pt->getElementsByTagName('ele')->item(0)->nodeValue;
echo 'point ',$i,' lat=',$lat,$tab1,'lon=',
$lon,$tab1,'name=',$name,$tab1,'alt=',$ele,$ret;
$i++;
}
}

//ou bien

echo $ret,$ret,'traitement 2',$ret,$ret;

for ($i=0;$i<$n;$i++)
{
$pt=$listePtRte->item($i);
$lat=$pt->getAttribute('lat');
$lon=$pt->getAttribute('lon');
$name=$pt->getElementsByTagName('name')->item(0)->nodeValue;
$ele=$pt->getElementsByTagName('ele')->item(0)->nodeValue;
echo 'point ',$i,' lat=',$lat,$tab1,'lon=',
$lon,$tab1,'name=',$name,$tab1,'alt=',$ele,$ret;
}

?>

essayer  le script : ICI

Sortie obtenue

1 route(s) trouvée(s)
nom de la première route: Rte
4 point(s) de route

traitement 1

point 0 lat=45.25458854713424 lon=5.8193206787109375 name=0 alt=483
point 1 lat=45.29614310895674 lon=5.8618927001953125 name=1 alt=1069
point 2 lat=45.291795801333556 lon=5.9333038330078125 name=2 alt=235
point 3 lat=45.26667149874901 lon=5.9319305419921875 name=3 alt=506

traitement 2

point 0 lat=45.25458854713424 lon=5.8193206787109375 name=0 alt=483
point 1 lat=45.29614310895674 lon=5.8618927001953125 name=1 alt=1069
point 2 lat=45.291795801333556 lon=5.9333038330078125 name=2 alt=235
point 3 lat=45.26667149874901 lon=5.9319305419921875 name=3 alt=506




Fichier XML vers table HTML

L'objectif est de générer automatiquement une table dans une page HTML, à partir de données
stockées dans un fichier XML.
Exemple : on veut obtenir la table suivante:

table

En partant du fichier xml suivant:

<?xml version="1.0" encoding="UTF-8"?>
<root><!-- titres des colonnes -->
<titre> Libellé du cours </titre>

<titre> Professeur </titre>  
<titre> Résumé du cours </titre>  
<titre> Code </titre>  
<titre> Coût </titre>

<!-- première ligne de la table : 5 champs c1 à c5 -->

<ligne>
    <c1>  Après la guerre civile </c1>
    <c2>  Dr. John Wroughton     </c2>
    <c3>  Ce cours étudiera les années de troubles qui ont
suivi l'année 1646 en Angleterre.
(6 réunions hebdomadaires, début lundi 13 octobre).
    </c3>
    <c4>  H27  </c4>
    <c5>  $32  </c5>
</ligne>

<!-- deuxième ligne de la table -->

<ligne>
    <c1>  Introduction à l'Angleterre anglo-saxonne  </c1>
    <c2>  Mark Cottle  </c2>
    <c3>  Un cours d'une journée présentant les premiers temps
de la période de reconstruction médiévale,

          les Anglo-saxons et leur société.(Samedi 18 octobre)</c3>
    <c4>  H28  </c4>
    <c5>  $18  </c5>
</ligne>

<!-- troisième ligne de la table -->

<ligne>
    <c1>  La Grèce glorieuse  </c1>
    <c2>  Valérie Lorenz  </c2>
    <c3>  Les origines de la démocratie, la philosophie,
le cœur du théâtre,
la patrie de la dialectique.
Les Romains auraient pu le faire,

          mais les Grecs furent les premiers.
(Samedi 25 octobre 1997)</c3>

    <c4>  H30  </c4>
    <c5>  $18  </c5>
</ligne>

</root>  

<!--  les espaces qui suivent ou précèdent les balises
(par exemple <titre> ou  </c1>  sont ignorés -->

Voici le fichier tableauto.php qui permet celà (partie php en rouge)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Table auto</title>
<meta name="author" content="DUC-JACQUET Marc">    
<!-- Date: 2014-05-01 -->
<!-- définition des styles pour la table -->
<style type="text/css">
th {color:red;}          
td  {color:black;}     
       
.tftable { font-size:14px;color:#333333;border-width: 1px;
border-color: #729ea5;border-collapse: collapse;}
       
.tftable th {font-size:14px;background-color:#acc8cc;
border-width: 1px; padding: 8px;border-style: solid;
border-color: #729ea5;text-align:left;}
       
.tftable tr {background-color:#d8d5d5;}
       
.tftable td {font-size:14px;border-width: 1px;padding: 8px;
border-style: solid;border-color: #729ea5;}
   
</style>

</head>
<body>
<h3>Exemple</h3> (extrait d'un tableau du web)<br><br>    
<table class="tftable">
<?php
$file='donnees.xml';
$doc = new DOMDocument();  
$doc->load($file);
//nombre de lignes
$n=$doc->getElementsByTagName("ligne")->length;
 $titres=$doc->getElementsByTagName('titre');
$p=$titres->length; 
// nombre de colonnes
$ch="<tr>";
for ($i=0;$i<$p;$i++)
$ch.="<th>".$titres->item($i)->nodeValue."</th>";
  $ch.="</tr>";
for ($i=0;$i<$n;$i++)
{  
$ch.="<tr>";
            
for ($j=0;$j<$p;$j++)
{
$x="c".($j+1);
$ch.="<td>";
$ch.=$doc->getElementsByTagName($x)->item($i)->nodeValue;
$ch.="</td>";
}
$ch.="</tr>";
}
echo $ch;
?>
   
</table>

</body>
</html> à tester ICI

On peut aussi utiliser des données au format .csv ( texte avec séparateur)
Voir un exemple ICI




Archives