Voici un petit example de page en html et php qui permet de repérer tous les fichiers de type .stl et les affiche sous la forme d’une grille, avec un bouton permettant de les télécharger.
Le code est plus que perfectible mais il a le mérite d’exister, notamment grâce aux fonctions Javascript de viewstl.com !
Mise en place
Vous devez disposer d’un espace web avec php. Si vous voulez le tester sur un Raspberry par exemple, assurez vous d’installer un serveur web et php :
sudo apt-get update && sudo apt-get upgrade sudo apt-get install apache2 sudo apt-get install php7.0 # Adapter la version en fonction de celle proposée par votre OS (7.0, 7.1, 7.2 ...)
Pour faire fonctionner cette page, c’est très simple.
- Créer un dossier vide dans votre web root, la plupart du temps /var/www/html
- Ouvrir le dossier et créer un fichier index.php, puis coller le code ci-dessous
- Télécharger et décompresser l’ensemble des fichiers dans ce même dossier (tous les fichiers doivent être au même niveau).
- Toujours dans ce même dossier, créer un dossier nommé stl
- Ouvrir le dossier et glisser-y vos fichiers .stl
- Visitez la page index.php créée, et voila !
Vous pouvez voir un exemple de mise en pratique ici !
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mes fichiers STL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Nos STL</h1>
<p>En téléchargement</p>
<p>Partie du site en construction ! Merci ;)</p>
<div class="row">
<?php
// Boucle qui parse les STL présents dans le dossier
$js = "<script>";
$html = "";
$i = 1;
$di = new RecursiveDirectoryIterator('./stl/');
foreach (new RecursiveIteratorIterator($di) as $filename => $file) {
if (preg_match('~.(stl|STL)$~', $filename)) {
$html .= '<div class="col-sm-3">';
$html .= '<a href="' . $filename . '"><button type="button" class="btn btn-primary">' . $file->getFilename() . '</button></a>';
$html .= '<div id="' . $filename . '" style="margin-top: 10px;"></div></div>';
$js .= 'var stl_viewer= new StlViewer (
document.getElementById("' . $filename . '"),
{ models: [{
id:' . $i . ',
filename:"' . $filename . '"
}]
}
);';
$i++;
}
}
echo $html;
?>
</div>
</div>
<script src="stl_viewer.min.js"></script>
<?php echo $js . "</script>"; ?>
<!-- RTFM, Doc du plugin : https://www.viewstl.com/plugin/-->
</body>
</html>