From 7ee162430f82cb4d6e6b9b0e4b8cbf382bf642b7 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sat, 26 Oct 2024 15:47:57 -0700 Subject: [PATCH 1/2] Refactor to MediaHandler transform Signed-off-by: Justin Georgi --- extension.json | 22 +++-- includes/GlModelHandler.php | 67 ++++++++++++++ .../{GlModelViewer.php => GlModelHooks.php} | 36 +++++--- includes/GlModelTransformOutput.php | 92 +++++++++++++++++++ 4 files changed, 192 insertions(+), 25 deletions(-) create mode 100644 includes/GlModelHandler.php rename includes/{GlModelViewer.php => GlModelHooks.php} (90%) create mode 100644 includes/GlModelTransformOutput.php diff --git a/extension.json b/extension.json index 325d2a4..e338f18 100644 --- a/extension.json +++ b/extension.json @@ -7,17 +7,19 @@ "license-name": "MIT", "type": "media", "manifest_version": 2, - "AutoloadClasses": { - "GlModelViewer": "includes/GlModelViewer.php" - }, + "AutoloadNamespaces": { + "MediaWiki\\Extension\\GlModelViewer\\": "includes/" + }, + "MediaHandlers": { + "model/gltf-binary": "MediaWiki\\Extension\\GlModelViewer\\GlModelHandler" + }, "Hooks": { - "MimeMagicInit": "GlModelViewer::onMimeMagicInit", - "MimeMagicImproveFromExtension": "GlModelViewer::onMimeMagicImproveFromExtension", - "BeforePageDisplay": "GlModelViewer::onBeforePageDisplay", - "ImageBeforeProduceHTML": "GlModelViewer::onImageBeforeProduceHTML", - "ImageOpenShowImageInlineBefore": "GlModelViewer::onImageOpenShowImageInlineBefore", - "AlternateEditPreview": "GlModelViewer::onAlternateEditPreview" - }, + "MimeMagicInit": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicInit", + "MimeMagicImproveFromExtension": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicImproveFromExtension", + "BeforePageDisplay": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onBeforePageDisplay", + "ImageBeforeProduceHTML": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onImageBeforeProduceHTML", + "AlternateEditPreview": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onAlternateEditPreview" + }, "ResourceFileModulePaths": { "localBasePath": "modules", "remoteExtPath": "GlModelViewer/modules" diff --git a/includes/GlModelHandler.php b/includes/GlModelHandler.php new file mode 100644 index 0000000..1346df3 --- /dev/null +++ b/includes/GlModelHandler.php @@ -0,0 +1,67 @@ +validateParam() + * @param int $flags A bitfield, may contain self::TRANSFORM_LATER + * @return MediaTransformOutput + */ + public function doTransform($image, $dstPath, $dstUrl, $params, $flags = 0) { + echo ''; + + return new GlModelTransformOutput($image, ['type' => 'glb']); + } + + /** + * Small helper function to display information on the browser console + * + * Usage: + * echo ''; + * + * @param $data information to display + * @param bool $add_script_tags true to put information is inside complete script tag + */ + public static function console_log($data, $add_script_tags = false) { + $command = 'console.log('. json_encode($data, JSON_HEX_TAG).');'; + if ($add_script_tags) { + $command = ''; + } + echo $command; + } +} \ No newline at end of file diff --git a/includes/GlModelViewer.php b/includes/GlModelHooks.php similarity index 90% rename from includes/GlModelViewer.php rename to includes/GlModelHooks.php index baab1d1..581b0c6 100644 --- a/includes/GlModelViewer.php +++ b/includes/GlModelHooks.php @@ -1,7 +1,10 @@ addExtraTypes('model/gltf-binary glb gltf'); - $mime->addExtraInfo('model/gltf-binary [DRAWING]'); + $mime->addExtraInfo('model/gltf-binary [MULTIMEDIA]'); } /** @@ -23,7 +26,7 @@ class GlModelViewer extends ImageHandler { * @param string $ext extention of upload file * @param string &$mime current assigned mime type */ - public static function onMimeMagicImproveFromExtension( MimeAnalyzer $mimeAnalyzer, $ext, &$mime ) { + public static function onMimeMagicImproveFromExtension( $mimeAnalyzer, $ext, &$mime ) { if ( $mime !== 'model/gltf-binary' && in_array( $ext, ['glb', 'gltf'] ) ) { $mime = 'model/gltf-binary'; } @@ -36,7 +39,7 @@ class GlModelViewer extends ImageHandler { * * @param OutputPage $out compiled page html and manipulation methods */ - public static function onBeforePageDisplay(OutputPage $out) { + public static function onBeforePageDisplay($out) { preg_match('/(getHTML(),$findGltf); if ($findGltf[0]) { $mvScriptAttr = array( @@ -65,7 +68,7 @@ class GlModelViewer extends ImageHandler { * @param &$widthOption * @return bool|void True to continue default processing or false to abort for custom processing */ - public static function onImageBeforeProduceHTML( DummyLinker &$linker, Title &$title, &$file, array &$frameParams, array &$handlerParams, &$time, &$result, Parser $parser, string &$query, &$widthOption ) { + public static function onImageBeforeProduceHTML( &$linker, &$title, &$file, array &$frameParams, array &$handlerParams, &$time, &$result, $parser, string &$query, &$widthOption ) { if ($file->getMimeType() !== 'model/gltf-binary') { return true; } @@ -84,6 +87,13 @@ class GlModelViewer extends ImageHandler { */ public static function onImageOpenShowImageInlineBefore( $imagepage, $out ){ $file = $imagepage->getFile(); + $mh = $file->getHandler(); + $mt = $file->getMediaType(); + //$mmt = $mh->getHandler(); + echo ''; if ($file->getMimeType() == 'model/gltf-binary') { $viewer = self::buildViewer($file->getDescriptionText(), $file->getFullUrl(), ['class' => 'view-default']); $out->addHtml(Html::rawElement('div',['id' => 'file', 'class' => 'fullModelView'],$viewer)); @@ -101,7 +111,7 @@ class GlModelViewer extends ImageHandler { * @param ?ParserOutput &$parserOutput * @return bool|void True to continue default processing or false to abort for custom processing */ - public static function onAlternateEditPreview( EditPage $editor, Content $content, string &$previewHTML, ?ParserOutput &$parserOutput ) { + public static function onAlternateEditPreview( $editor, $content, string &$previewHTML, ?ParserOutput &$parserOutput ) { $file = MediaWikiServices::getInstance()->getRepoGroup()->findFile($editor->getTitle()); if (!$file || $file->getMimeType() !== 'model/gltf-binary') { return true; @@ -178,7 +188,9 @@ class GlModelViewer extends ImageHandler { //Add important additional attributes and render model-viewer with hotspots $attrModelView = array_merge(['src' => $srcUrl, 'class' => 'mv-model', 'interpolation-decay' => '100'], $attrModelView); $attrModelView['style'] = 'width: 100%; height: 100%; min-height: 400px;'; - $elModel = Html::rawElement('model-viewer', $attrModelView, implode($hotspots)); + $hotspotHtml = (isset($hotspots)) ? implode($hotspots) : ''; + + $elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml); //Render and return container element with model-viewer $attrContainer = array( @@ -233,10 +245,4 @@ class GlModelViewer extends ImageHandler { } echo $command; } - - /** - * ? But class won't work without it - */ - function doTransform($image, $dstPath, $dstUrl, $params, $flags = 0) { - } } \ No newline at end of file diff --git a/includes/GlModelTransformOutput.php b/includes/GlModelTransformOutput.php new file mode 100644 index 0000000..05a778c --- /dev/null +++ b/includes/GlModelTransformOutput.php @@ -0,0 +1,92 @@ +file = $file; + $this->parameters = $parameters; + $this->url = $file->getFullUrl(); + } + + /** + * Fetch HTML for this transform output + * + * @access public + * @param array $options Associative array of options. Boolean options + * should be indicated with a value of true for true, and false or + * absent for false. + * alt Alternate text or caption + * desc-link Boolean, show a description link + * file-link Boolean, show a file download link + * custom-url-link Custom URL to link to + * custom-title-link Custom Title object to link to + * valign vertical-align property, if the output is an inline element + * img-class Class applied to the "" tag, if there is such a tag + * + * @return string HTML + */ + public function toHtml($options = []) { + return Html::rawElement( 'div',[ 'class' => 'my-model-class'], $this->url . ' is a ' . $this->parameters['type'] . ' 3D model!' ); + /* + $parameters = $this->parameters; + + $style = []; + $style[] = "max-width: 100%;"; + $style[] = "max-height: 100%;"; + if (empty($options['no-dimensions'])) { + $parameters['width'] = $this->getWidth(); + $parameters['height'] = $this->getHeight(); + $style[] = "width: {$this->getWidth()}px;"; + $style[] = "height: {$this->getHeight()}px;"; + } + + if (!empty($options['valign'])) { + $style[] = "vertical-align: {$options['valign']};"; + } + + if (!empty($options['img-class'])) { + $class = $options['img-class']; + } + + if (!isset($parameters['start'])) { + $parameters['start'] = null; + } + if (!isset($parameters['end'])) { + $parameters['end'] = null; + } + + $inOut = false; + if ($parameters['start'] !== $parameters['end']) { + if ($parameters['start'] !== false) { + $inOut[] = $parameters['start']; + } + + if ($parameters['end'] !== false) { + $inOut[] = $parameters['end']; + } + } + + $descLink = Html::element( 'a', [ 'href' => $parameters['descriptionUrl'] ], $parameters['descriptionUrl'] ); + + return Html::rawElement( 'video', [ + 'src' => $this->url . ($inOut !== false ? '#t=' . implode(',', $inOut) : ''), + 'width' => $this->getWidth(), + 'height' => $this->getHeight(), + 'class' => $class ?? false, + 'style' => $style ? implode( ' ', $style ) : false, + 'controls' => true, + ], $descLink ); + */ + } +} \ No newline at end of file -- 2.49.1 From 7264fcc570913dd4fbd48aa572359ea5c4508f27 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sat, 26 Oct 2024 21:06:31 -0700 Subject: [PATCH 2/2] Offload all model generation to model output Signed-off-by: Justin Georgi --- extension.json | 4 +- includes/GlModelHandler.php | 28 +++-- includes/GlModelHooks.php | 138 +-------------------- includes/GlModelTransformOutput.php | 179 ++++++++++++++++++++-------- modules/glmv.js | 32 ++--- 5 files changed, 170 insertions(+), 211 deletions(-) diff --git a/extension.json b/extension.json index e338f18..43e465f 100644 --- a/extension.json +++ b/extension.json @@ -3,7 +3,7 @@ "author": "Justin Georgi", "url": "https://gitea.azgeorgis.net/jgeorgi/mwModelViewer", "description": "This extension allows .glb and .gltf files to be added, displayed, and annotated in MediaWiki", - "version": "0.0.5", + "version": "0.0.6", "license-name": "MIT", "type": "media", "manifest_version": 2, @@ -17,7 +17,7 @@ "MimeMagicInit": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicInit", "MimeMagicImproveFromExtension": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicImproveFromExtension", "BeforePageDisplay": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onBeforePageDisplay", - "ImageBeforeProduceHTML": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onImageBeforeProduceHTML", + "ImageOpenShowImageInlineBefore": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onImageOpenShowImageInlineBefore", "AlternateEditPreview": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onAlternateEditPreview" }, "ResourceFileModulePaths": { diff --git a/includes/GlModelHandler.php b/includes/GlModelHandler.php index 1346df3..49b626d 100644 --- a/includes/GlModelHandler.php +++ b/includes/GlModelHandler.php @@ -2,6 +2,7 @@ namespace MediaWiki\Extension\GlModelViewer; use ImageHandler; +use Html; class GlModelHandler extends ImageHandler { /** @@ -35,16 +36,25 @@ class GlModelHandler extends ImageHandler { * @return MediaTransformOutput */ public function doTransform($image, $dstPath, $dstUrl, $params, $flags = 0) { - echo ''; + return new GlModelTransformOutput($image, $params); + } - return new GlModelTransformOutput($image, ['type' => 'glb']); - } + /** + * Check the incoming media parameters + * + * @param string $name + * @param string $value + * @return bool + */ + public function validateParam( $name, $value ) { + if (in_array($name, ['width', 'height'])) { + return $value > 0; + } else if (in_array($name, ['view', 'hsset'])) { + return true; + } else { + return false; + } + } /** * Small helper function to display information on the browser console diff --git a/includes/GlModelHooks.php b/includes/GlModelHooks.php index 581b0c6..0d5f7e5 100644 --- a/includes/GlModelHooks.php +++ b/includes/GlModelHooks.php @@ -3,6 +3,7 @@ namespace MediaWiki\Extension\GlModelViewer; use MediaWiki\MediaWikiServices; use Html; +use ParserOutput; class GlModelHooks { /** @@ -51,32 +52,6 @@ class GlModelHooks { } } - /** - * MWHook: Replace File link rendered image with model-viewer element - * - * @see https://www.mediawiki.org/wiki/Manual:Hooks/ImageBeforeProduceHTML - * - * @param DummyLinker &$linker - * @param Title &$title - * @param FileObject &$file object containing information regarding the actual file for the File page - * @param array &$frameParams any added parameters of the file link such as class etc. - * @param array &$handlerParams - * @param &$time - * @param &$result By reference access to the rendered html result of the image - * @param Parser $parser - * @param string &$query - * @param &$widthOption - * @return bool|void True to continue default processing or false to abort for custom processing - */ - public static function onImageBeforeProduceHTML( &$linker, &$title, &$file, array &$frameParams, array &$handlerParams, &$time, &$result, $parser, string &$query, &$widthOption ) { - if ($file->getMimeType() !== 'model/gltf-binary') { - return true; - } - - $result = self::buildViewer($file->getDescriptionText(), $file->getFullUrl(), $frameParams); - return false; - } - /** * MWHook: Display model on file page * @@ -87,16 +62,9 @@ class GlModelHooks { */ public static function onImageOpenShowImageInlineBefore( $imagepage, $out ){ $file = $imagepage->getFile(); - $mh = $file->getHandler(); - $mt = $file->getMediaType(); - //$mmt = $mh->getHandler(); - echo ''; if ($file->getMimeType() == 'model/gltf-binary') { - $viewer = self::buildViewer($file->getDescriptionText(), $file->getFullUrl(), ['class' => 'view-default']); - $out->addHtml(Html::rawElement('div',['id' => 'file', 'class' => 'fullModelView'],$viewer)); + $out->clearHTML(); + $out->addWikiTextAsContent('[[' . $file->getTitle()->getFullText() . '|800x600px]]'); } } @@ -116,10 +84,12 @@ class GlModelHooks { if (!$file || $file->getMimeType() !== 'model/gltf-binary') { return true; } + $out = $editor->getContext()->getOutput(); $out->addModules('ext.glmv'); - $previewViewer = self::buildViewer($content->getText(), $file->getFullUrl(), ['class' => 'view-default']); + $mvTransform = $file->transform([ 'width' => '800', 'hight' => '600']); + $previewViewer = $mvTransform->toHtml(); $addButtonAttr = array( 'class' => 'AddHotspot', @@ -131,102 +101,6 @@ class GlModelHooks { return false; } - /** - * Build model-viewer and child elements - * - * This takes in the metadata text from the model page (or the current editor) - * and produces the html string for the model-viewer and all relevant child - * elements. - * - * @param string $inText The metadata text which must include a json formatted string inside a pre tag - * @param string $srcUrl The full url pointing to the model file - * @param array $frameParams The additional user defined parameters for the viewer such as hotspot and view classes - * @return string Html string of the complete model-viewer element inside a div container - */ - private static function buildViewer($inText, $srcUrl, $frameParams) { - //Gather basic data - preg_match('/
([\S\s]*?)<\/pre>/',$inText,$modelDescript);
-    $metadata = json_decode($modelDescript[1], true);
-    $viewClass = self::extractClassParams('view',$frameParams['class']);
-    $hsSetClass = self::extractClassParams('hsset',$frameParams['class']);
-
-    //Handle annotations and annotation sets
-    if (isset($metadata['annotations'])) {
-      $hotspots = [];
-      $annotations = [];
-      if ($hsSetClass != 'default' && isset($metadata['annotationSets'])) {
-        foreach($metadata['annotationSets'][$hsSetClass] as $includeAn) {
-          if (isset($metadata['annotations'][$includeAn])) {
-            $annotations[$includeAn] = $metadata['annotations'][$includeAn];
-          }
-        }
-      } else {
-        $annotations = $metadata['annotations'];
-      }
-        foreach($annotations as $label => $an) {
-        $elAnnot = Html::rawElement('div',['class' => 'HotspotAnnotation HiddenAnnotation'],$label);
-        $hsDefault = array(
-          'class' => 'Hotspot',
-          'slot' => 'hotspot-'.(count($hotspots) +1),
-          'onmousedown' => 'event.stopPropagation()',
-          'ontouchstart' => 'event.stopPropagation()',
-          'onclick' => 'onAnnotation(event)'
-        );
-        $attrHotspot = array_merge($hsDefault, $an);
-        $elHotspot = Html::rawElement('button',$attrHotspot,$elAnnot.(count($hotspots) +1));
-        array_push($hotspots, $elHotspot);
-      }
-    }
-
-    //Set viewer configurations or use basic default if none defined
-    if (isset($metadata['viewerConfig']) && isset($metadata['viewerConfig'][$viewClass])) {
-      $attrModelView = $metadata['viewerConfig'][$viewClass];
-    } else {
-      $attrModelView = array('camera-controls' => true);
-    }
-
-    //Add important additional attributes and render model-viewer with hotspots
-    $attrModelView = array_merge(['src' => $srcUrl, 'class' => 'mv-model', 'interpolation-decay' => '100'], $attrModelView);
-    $attrModelView['style'] = 'width: 100%; height: 100%; min-height: 400px;';
-    $hotspotHtml = (isset($hotspots)) ? implode($hotspots) : '';
- 
-    $elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml);
-
-    //Render and return container element with model-viewer
-    $attrContainer = array(
-      'style' => "width: 800px; height: 600px;",
-      'onmousedown' => 'clearAnnotations()',
-      'ontouchstart' => 'clearAnnotations()'
-    );
-    return Html::rawElement('div', $attrContainer, $elModel);
-  }
-
-  /**
-   * Detect and return model user params from link classes
-   * 
-   * The best way to send information in a file link is by adding classes to the
-   * link. This function parses the array of those classes and returns the information
-   * or 'default'
-   * 
-   * @param string $paramType the type of parameter to be extracted 'view'|'hsset'
-   * @param string $classList the string of class names as returned in $frameParams or default construction
-   * @return string parameter name or 'default'
-   */
-  private static function extractClassParams(string $paramType, string $classList) {
-    if (!in_array($paramType, ['view', 'hsset'])) {
-      return 'default';
-    }
-    
-    if (!isset($classList)) {
-      return 'default';
-    }
-
-    $searchString = '/' . $paramType . '-(\S*)/';
-    preg_match($searchString,$classList,$extractInfo);
-
-    return ($extractInfo[1]) ? $extractInfo[1] : 'default';
-  }
-
   /**
    * Small helper function to display information on the browser console
    * 
diff --git a/includes/GlModelTransformOutput.php b/includes/GlModelTransformOutput.php
index 05a778c..2572244 100644
--- a/includes/GlModelTransformOutput.php
+++ b/includes/GlModelTransformOutput.php
@@ -16,7 +16,10 @@ class GlModelTransformOutput extends MediaTransformOutput {
 	public function __construct($file, $parameters) {
 		$this->file = $file;
 		$this->parameters = $parameters;
-		$this->url = $file->getFullUrl();
+        $this->width = (isset($parameters['width'])) ? $parameters['width'] : '800';
+        $this->height = (isset($parameters['height'])) ? $parameters['height'] : (int)($this->width * .75);
+        $this->url = $file->getFullUrl();
+        $this->thumb = isset($parameters['isFilePageThumb']);
 	}
 
 	/**
@@ -37,56 +40,128 @@ class GlModelTransformOutput extends MediaTransformOutput {
 	 * @return string	HTML
 	 */
 	public function toHtml($options = []) {
-        return Html::rawElement( 'div',[ 'class' => 'my-model-class'], $this->url . ' is a ' . $this->parameters['type'] . ' 3D model!' );
-        /*
-		$parameters = $this->parameters;
-
-		$style = [];
-		$style[] = "max-width: 100%;";
-		$style[] = "max-height: 100%;";
-		if (empty($options['no-dimensions'])) {
-			$parameters['width'] = $this->getWidth();
-			$parameters['height'] = $this->getHeight();
-			$style[] = "width: {$this->getWidth()}px;";
-			$style[] = "height: {$this->getHeight()}px;";
-		}
-
-		if (!empty($options['valign'])) {
-			$style[] = "vertical-align: {$options['valign']};";
-		}
-
-		if (!empty($options['img-class'])) {
-			$class = $options['img-class'];
-		}
-
-		if (!isset($parameters['start'])) {
-			$parameters['start'] = null;
-		}
-		if (!isset($parameters['end'])) {
-			$parameters['end'] = null;
-		}
-
-		$inOut = false;
-		if ($parameters['start'] !== $parameters['end']) {
-			if ($parameters['start'] !== false) {
-				$inOut[] = $parameters['start'];
-			}
-
-			if ($parameters['end'] !== false) {
-				$inOut[] = $parameters['end'];
-			}
-		}
-
-		$descLink = Html::element( 'a', [ 'href' => $parameters['descriptionUrl'] ], $parameters['descriptionUrl'] );
-
-		return Html::rawElement( 'video', [
-			'src' => $this->url . ($inOut !== false ? '#t=' . implode(',', $inOut) : ''),
-			'width' => $this->getWidth(),
-			'height' => $this->getHeight(),
-			'class' => $class ?? false,
-			'style' => $style ? implode( ' ', $style ) : false,
-			'controls' => true,
-		], $descLink );
-        */
+        if ($this->thumb) {
+            return Html::rawElement('span',['class' => 'fake-thumbnail'],'Gltf model thumbnail');
+        }
+        //return Html::rawElement( 'div',[ 'class' => 'my-model-class'], $this->url . ' is a ' . $this->parameters['type'] . ' 3D model!' );
+        if (isset($options['img-class'])) {
+            $this->parameters['class'] = $options['img-class'];
+        }
+        return self::buildViewer($this->file->getDescriptionText(),$this->url,$this->parameters);
 	}
+
+  /**
+   * Build model-viewer and child elements
+   * 
+   * This takes in the metadata text from the model page (or the current editor)
+   * and produces the html string for the model-viewer and all relevant child 
+   * elements.
+   * 
+   * @param string $inText The metadata text which must include a json formatted string inside a pre tag
+   * @param string $srcUrl The full url pointing to the model file
+   * @param array $frameParams The additional user defined parameters for the viewer such as hotspot and view classes
+   * @return string Html string of the complete model-viewer element inside a div container
+   */
+  private function buildViewer($inText, $srcUrl, $viewParams) {
+    //Gather basic data
+    preg_match('/
([\S\s]*?)<\/pre>/',$inText,$modelDescript);
+    $metadata = json_decode($modelDescript[1], true);
+    $viewClass = self::extractClassParams('view',$viewParams['class']);
+    $hsSetClass = self::extractClassParams('hsset',$viewParams['class']);
+
+    //Handle annotations and annotation sets
+    if (isset($metadata['annotations'])) {
+      $hotspots = [];
+      $annotations = [];
+      if ($hsSetClass != 'default' && isset($metadata['annotationSets'])) {
+        foreach($metadata['annotationSets'][$hsSetClass] as $includeAn) {
+          if (isset($metadata['annotations'][$includeAn])) {
+            $annotations[$includeAn] = $metadata['annotations'][$includeAn];
+          }
+        }
+      } else {
+        $annotations = $metadata['annotations'];
+      }
+        foreach($annotations as $label => $an) {
+        $elAnnot = Html::rawElement('div',['class' => 'HotspotAnnotation HiddenAnnotation'],$label);
+        $hsDefault = array(
+          'class' => 'Hotspot',
+          'slot' => 'hotspot-'.(count($hotspots) +1),
+          'onmousedown' => 'event.stopPropagation()',
+          'ontouchstart' => 'event.stopPropagation()',
+          'onclick' => 'onAnnotation(event)'
+        );
+        $attrHotspot = array_merge($hsDefault, $an);
+        $elHotspot = Html::rawElement('button',$attrHotspot,$elAnnot.(count($hotspots) +1));
+        array_push($hotspots, $elHotspot);
+      }
+    }
+
+    //Set viewer configurations or use basic default if none defined
+    if (isset($metadata['viewerConfig']) && isset($metadata['viewerConfig'][$viewClass])) {
+      $attrModelView = $metadata['viewerConfig'][$viewClass];
+    } else {
+      $attrModelView = array('camera-controls' => true);
+    }
+
+    //Add important additional attributes and render model-viewer with hotspots
+    $attrModelView = array_merge(['src' => $srcUrl, 'class' => 'mv-model', 'interpolation-decay' => '100'], $attrModelView);
+    $attrModelView['style'] = 'width: 100%; height: 100%;';
+    $hotspotHtml = (isset($hotspots)) ? implode($hotspots) : '';
+ 
+    $elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml);
+
+    //Render and return container element with model-viewer
+    $attrContainer = array(
+      'style' => 'width: ' .  $this->width . 'px; height: ' . $this->height . 'px;',
+      'onmousedown' => 'clearAnnotations()',
+      'ontouchstart' => 'clearAnnotations()'
+    );
+    return Html::rawElement('div', $attrContainer, $elModel);
+  }
+
+  /**
+   * Detect and return model user params from link classes
+   * 
+   * The best way to send information in a file link is by adding classes to the
+   * link. This function parses the array of those classes and returns the information
+   * or 'default'
+   * 
+   * @param string $paramType the type of parameter to be extracted 'view'|'hsset'
+   * @param string $classList a string of class names
+   * @return string parameter name or 'default'
+   */
+  private static function extractClassParams(string $paramType, ? string $classList) {
+    if (!in_array($paramType, ['view', 'hsset'])) {
+      return 'default';
+    }
+    
+    if (!isset($classList)) {
+      return 'default';
+    }
+
+    $searchString = '/' . $paramType . '-(\S*)/';
+    preg_match($searchString,$classList,$extractInfo);
+
+    return ($extractInfo[1]) ? $extractInfo[1] : 'default';
+  }
+
+  /**
+   * Small helper function to display information on the browser console
+   * 
+   * Usage:
+   * echo '';
+   * 
+   * @param $data information to display
+   * @param bool $add_script_tags true to put information is inside complete script tag
+   */
+  public static function console_log($data, $add_script_tags = false) {
+    $command = 'console.log('. json_encode($data, JSON_HEX_TAG).');';
+    if ($add_script_tags) {
+        $command = '';
+    }
+    echo $command;
+  }
 }
\ No newline at end of file
diff --git a/modules/glmv.js b/modules/glmv.js
index 56625cd..45dc0c9 100644
--- a/modules/glmv.js
+++ b/modules/glmv.js
@@ -20,32 +20,32 @@ readyAddHotspot = function() {
 clickAddHotspot = function(e) {
     const previewMv = $('model-viewer')
     previewMv.removeClass('AddingHotspot')
-    let hsPosition = null;
+    let hsPosition = null
     let targetModel = previewMv[0]
     targetModel.disableTap = false
     if (targetModel) {
-        hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY);
+        hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY)
     }
     if (hsPosition) {
-        let currentText = $('#wpTextbox1').val();
-        let extractMetadata = currentText.match(/
([\S\s]*?)<\/pre>/);
-        let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: [], annotationSets: {}};
+        let currentText = $('#wpTextbox1').val()
+        let extractMetadata = currentText.match(/
([\S\s]*?)<\/pre>/)
+        let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: {}, annotationSets: {}}
         if (metadata.annotations === undefined) {
-            metadata.annotations = [];
+            metadata.annotations = {}
         }
-        let hsOutput = {label: 'NewHotspot'};
-        hsOutput['data-position'] = hsPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m");
-        hsOutput['data-normal'] = hsPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m");
+        let hsOutput = {}
+        hsOutput['data-position'] = hsPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
+        hsOutput['data-normal'] = hsPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
         let orbitObj = targetModel.getCameraOrbit()
-        hsOutput['data-orbit'] = `${orbitObj.theta.toFixed(2)}rad ${orbitObj.phi.toFixed(2)}rad ${orbitObj.radius.toFixed(2)}m`;
-        let targetObj = targetModel.getCameraTarget();
-        hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`;
+        hsOutput['data-orbit'] = `${orbitObj.theta.toFixed(2)}rad ${orbitObj.phi.toFixed(2)}rad ${orbitObj.radius.toFixed(2)}m`
+        let targetObj = targetModel.getCameraTarget()
+        hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`
         //navigator.clipboard.writeText(JSON.stringify(hsOutput, null, 2));
-        metadata.annotations.push(hsOutput);
-        let newText = currentText.replace(/(.*?
)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`);
-        $('#wpTextbox1').val(newText);
+        metadata.annotations['New Hotspot'] = hsOutput
+        let newText = currentText.replace(/(.*?
)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
+        $('#wpTextbox1').val(newText)
     }
-};
+}
 
 /**
  * Event listener callback to toggle the visibility
-- 
2.49.1