W

Créé le
Modifié le

36 visites

Au secours ??

Bonjour, cette page s'est transformée en liste des problèmes qui me restent à régler pour ne pas que je les oublie !

Sommaire :




Set interval

J'ai réussi à avoir un résultat cool pour la template Psilo et l'accumulation d'images, il manque juste 1 truc pour que ça fonctionne parfaitement, mais je me suis cassé les dents dessus.
En gros dans le JS, j'ai lancé un setInterval random pour que les images apparaissent en boucle pendant que le son est joué. Il ne me reste plus qu'à arrêter l'apparition des images lorsque le son est mis en pause.

C'est compliqué à expliquer mais en gros je galère à placer le clearInterval, puisque le setInterval est déclaré au milieu d'une fonction qui intervient au lancement d'un audio (grâce à un paramètre d'AmplitudeJS), et que j'ai besoin du clearInterval à l'arrêt de l'audio. Ça veut dire que le lancement et l'arrêt de l'interval se font à 2 endroits différents et j'ai pas trouvé comment y transférer la variable dans laquelle est stockée l'interval.




Float canvas

On s'est penchés avec Corentin sur des contrôles adaptés aux mobiles pour le canvas généré par ThreeJS. Les contrôles actuels marchent bien (même si il y a quelques problèmes en fonction des navigateurs et des téléphones, c'est un peu bizarre), mais ne supportent pas le zoom par "pinch".
On a regardé du côté de OrbitControls qui a l'air parfait pour se charger de tous les déplacements/zooms de caméra, mais c'est un addon donc un poil chiant puisqu'il faut récupérer le fichier JS après l'avoir téléchargé (avec Node ou npm ou que sais-je j'en suis pas encore là)

Il faut aussi que je me penche plus sérieusement sur comment intégrer une VideoTexture, mais ça a l'air compliqué de faire passer une vidéo pour un sprite, donc pas le même fonctionnement ?
Les sprites de ThreeJS ne supportent malheureusement pas les gifs, il faut les convertir/importer en tant que vidéos. Dommage mais ça reste possible si j'arrive à faire fonctionner les vidéos je suppose.




Zone de clic

Sur la template Spore, on peut cliquer sur la barre de progression d'un morceau pour se rendre à un moment du son. Ça marche grâce aux propriétés de la balise HTML "progress" dont la valeur est changée en JS.

Mais comme j'ai stylisé cette barre de progression pour être le plus réduite possible sur cette template, la zone de clic est haute de 3px💀💀💀 pas hyper accessible.
Il faut que je modifie le JS pour que le clic soit pris en compte dans toute la div du track et pas seulement la progress bar.




Problèmes résolus, merci :))

Ateliers web

RÉSOLU : C'était bien les ../ avant l'url........... Je retiens jamais ce truc

En mettant en ligne la template Spore sur les Ateliers Web, je me suis rendu compte que toute la partie audio était cassée.
"Le « Content-Type » HTTP « text/html » n’est pas géré. Le chargement de la ressource média url_ateliers_web_etc a échoué"

Il me semble que c'est parce que dans le JS, les fichiers mp3 sont récupérés comme ça : "url": "../sounds/XXXXX.mp3"
J'ai besoin de remonter dans l'arborescence puisque le fichier JS est dans un dossier js/script.js, ça marche en local et sur Herd mais pas en ligne.

Selon l'erreur, le navigateur cherche le fichier ici : ......../5dgm/lelio/sounds/GENESE.mp3

L'adresse devrait être : ......../5dgm/lelio/spore/sounds/GENESE.mp3

Maxime disait que ça lui était déjà arrivé sur les Ateliers Web à cause d'une protection qui empêche de remonter dans l'arborescence(??), mais honnêtement c'est possible que l'erreur soit très très bête et vienne de moi.......

so weird. Le chemin vers les fichiers devrait être déterminé depuis la page HTML. Soit "url": "sounds/GENESE.mp3".
Il faudrait par ailleurs que tu normalises (→ slugify) les noms de fichiers "JETLAG (feat. NeS).mp3" → "jetlag--feat.-nes-.mp3" (une bibliothèque python fait ça : python-slugify)




PHP ou Python

RÉSOLU : ok pour le python partout, pour l'instant je travaille sur le JS en intégrant les balises img à la main et quand tout marchera bien je passerai au python

Maintenant que la template Psilo est construite (cf dernière question plus bas), il faut que je passe à la partie accumulation d'images. Je sais positionner des images aléatoirement quand elles sont intégrées directement dans le HTML, mais quand il faut les récupérer depuis un dossier c'est différent.

Je voulais juste avoir une discussion/confirmation à ce sujet avant de me lancer là-dedans : est ce qu'il vaudrait mieux utiliser PHP pour injecter les images dans le HTML avec une boucle foreach, ou le faire directement en python avec une boucle qui dupliquerait une balise img pour chaque image dans le dossier ?
Même question pour l'ajout de div pour chaque track (pour chaque fichier mp3 -> dupliquer la div track "modèle"), et chaque album sur la page index (pour chaque dossier -> dupliquer la div release "modèle").

Ma réponse actuellement, confirmez moi si c'est la bonne piste :
Je suis presque sûr que pour les images ce sera du PHP, parce que ça intervient au chargement de la page, et que ça n'a pas vraiment d'intérêt de créer les balises img directement dans le fichier HTML.
Par contre pour les div il vaudrait mieux le faire en Python pour que ce soit plus facile pour les utilisateur·ices de s'y retrouver et de faire des modifications dans le HTML une fois la page générée.

À priori, tout en python !

ça n'a pas vraiment d'intérêt de créer les balises img directement dans le fichier HTML

Si, bien au contraire ! Tu ne veux pas rendre dépendant tes artistes de PHP et ça te permet d’écrire un fichier HTML stable, complet, fini
Tu peux aussi vouloir les écrire dans une variable js (mais toujours en python :)

https://radicalweb.design/ressources/python/files/#lister-le-contenu-dun-dossier




Infinite canvas

RÉSOLU : pas de infinite canvas mais j'ai réussi à intégrer la démo donnée par Julien plus bas qui me plaisait aussi bcp donc c'est parfait !

Pour essayer de reproduire l'effet sur une template, j'ai téléchargé cet exemple. MAIS c'est une architecture Node.js, donc j'y connais + comprends rien de rien, alors j'ai vite abandonné. Pour l'instant c'est en stand by en attendant de chercher si d'autres solutions similaires existent en JS simple.

c’est surtout écrit en TypeScript avec React. Et ça, c’est le mal…

(28/04 : J'ai rdv avec Corentin demain pour en discuter et fouiller du côté de Three.js)

une solution three js sera lourde aussi, mais ça semble une bien meilleure option.
Demo time !: https://ateliers.esad-pyrenees.fr/stolon/inertia-creeps

Cauchemardesque
horreur.webp