Afficher un aperçu de fichiers .stl sur un site web

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.

<!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>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *