Mein erstes eigenes Modul – 360° Panoramabilder für Joomla

Liebe Gemeinde,

ohne Programmierkenntnisse habe ich es geschafft, ein eigenes Panoramamodul für Joomla zu programmieren. Es kann Bilder von einer Insta360 oder aber eine DJI Osmo 360 in Joomla anzeigen. Was es genau kann und wie ich es ohne Programmierkenntnisse dennoch geschafft habe, erkläre ich in diesem Artikel.

Ich habe mir eine DJI Osmo 360 gekauft, da mich Fotos und im besonderen Panoramen, schon immer fasziniert haben. Ich liebte die Funktion auf meinem Google Pixel Handy, bei der ich auf dem Handy schon mit gefühlt 150 Fotos ein ganzes Kugelpanorama im Stil von Streetview erzeugen konnte. Ich finde, man sieht einfach mehr, man steckt mehr mittendrin und bekommt einen noch besseren Eindruck.

Ich habe nach einer Möglichkeit gesucht, solche Fotos auch in Joomla darstellen zu können. Nach einer kurzen, durchaus schlampigen Recherche fand ich keine kostenfreie Lösung, die mich zufrieden gestellt hat. Die von mir gefundenen Bezahl-Module waren mehr darauf aus, ein Produkt in der Mitte um 360° zu drehen und so zu präsentieren. Das war aber nicht das, was ich wollte.

Vibe-Coding? Vibe-Coding!

Also habe ich das gemacht, was heute in aller Munde ist. Ich habe erst mit ChatGPT angefangen, nach einer Lösung zu suchen. Nach ein paar erklärenden Sätzen und einigen Präzisierungen, fing ChatGPT gleich an, mir eine fertige ZIP-Datei zu bauen, die ich installieren sollte.
Natürlich schlug das fehl und natürlich war ich nicht sofort 100% präzise. Da ich ja nicht programmieren kann, kann ich nur vorn mitteilen, was funktioniert und was nicht. Gut, ein paar Logs und Konsolen-Einträge konnte ich schon liefern und damit ging es dann bald weiter. Doch sehr, sehr schnell hatte ich ChatGPT völlig überfordert. Meine Prompts hingen z.T. mehr als 30 Miunten hinterher und lieferten kein Ergebnis mehr. Selbst die Bitte um Zusammenfassung für einen neuen Chat konnte ChatGPT nicht mehr liefern.
Ich probierte es mit Claude. Und Claude konnte was. Claude konnte richtig liefern! Mit Claude kam ich verhältnismäßig schnell, deutlich weiter. Claude war auch so ehrlich und empfahl mir, von meinem Startplan im Hintergrund die Marzipano-Bibliothek zu nutzen, wegzugehen und stattdessen lieber Pannellum zu nutzen. Das fand ich klug, denn Pannellum wirkte auf mich mächtiger und konnte liefern, was ich wollte.
Auch konnte ich mit Claude viel mehr Itterationen hintereinander entwickeln lassen, ohne an das Limit des Chats zu gelangen, was es damals gab. Natürlich erreichte ich bei beiden Diensten mit meiner Aufgabe trotzdem regelmäßig das Limit für das kostenfreie Angebot. Und natürlich wollte ich dann weitermachen und löste ein Abo aus. Ich löste das kleinste Abo, was Claude anbietet und legte die 18€ auf den Tisch.

• Nachteil von Claude: Claude kann in der Weboberfläche keine Zip-Dateien für die Installation bauen.
• Vorteil von Claude: Claude kann viel länger, viel weiter Code schreiben, als ChatGPT. Kurze Anmerkung: Claude Code im Terminal habe ich für das Modul nicht benutzt, weil ich damals noch nicht wusste, wie das funktioniert.

Nachdem ich einen Stand erreicht habe, den ich an Tester weitergeben konnte, habe ich es mal hier und mal da verteilt. Die Rückmeldungen waren meist überwiegend positiv. Da es ja noch eine Beta-Version war, bekam ich freundliche Rückmeldungen, was nicht geht und wo etwas fehlt.
Auch hier habe ich mittels Vibe-Coding in Claude die Probleme beschrieben und Claude hat diese Probleme dann gelöst und mir die zu korrigierenden Dateien vollständig zurück geliefert. Vollständig deshalb, weil ich ja eben nicht programmieren kann. Ich wollte auch nicht nach Code-Schnippseln suchen und diese von Zeichen X bis zum letzten Semikolon oder zur letzten Klammer austauschen. Für diese Arbeit war ich schlicht zu faul und ich hatte auch Sorge, dass durch meine, vielleicht stümperhafte Umsetzung der Änderungen mehr kaputt geht und neue Fehler auftauchen.

Was mir besonders wichtig ist, dass es im Modul eine ausführliche Hilfe zu den vielen Einstellungen gibt. So habe ich Claude auch angewiesen, eine ausführliche Inline-Hilfe mitzuliefern. Klickst du auf die Inline-Hilfe im Backend des Moduls solltest du eine ausführliche Erklärung für die Einstellungen erhalten.

Hier möchte ich ein ein paar Funktionen hervorheben, die das Modul beherrscht:

• Hotspots: Infopoints und Szenenwechselpunkte
  Ein Infopoint ist ein Punkt mit Zusatzinformationen. Es erscheint ein Modal-Popup, indem man weitere Informationen mitgeben kann. Ein Szenenwechselpunkt ist ein Punkt von dem du in ein weiteres Panorama springen kannst. Beispiel: Du springst von einem Raum in den nächsten, wenn du einen Szenenwechselpunkt anklickst. Klickst du drauf, wir ein weiteres, verlinktes Panorama aufgerufen und du kannst dich dort umschauen. Alles in einem Modul konfigurierbar.

• Auf Mobilgeräten kann ein vorhandenes Gyroskop genutzt werden.
  Öffnest du also das Panorama am Handy und erlaubst, dass dein Browser die Gyroskopsensoren nutzen kann, dann kannst du dich mit dem Handy im Panorama umschauen, indem du das Handy in die gewünschte Position drehst und schwenkst.

Es gibt natürlich noch viele weitere Funktionen, die ich hier alle nicht aufzählen möchte. Das ist alles ganz wunderbar im Modul beschrieben.

Zusammen mit Guido habe ich das Modul Namens "mod_pannellum" jetzt bei Github veröffentlicht. Vielen Dank an Guido für deine Unterstüzung! Falls ihr Fehler findet und Verbesserungswünsche habt, gern her damit.  Allen viel Spaß mit dem kostenfreien Panorama-Modul wünscht euch
Euer Niko

Ein Beispiel findest du hier.