jgeorgi/GlModelViewer
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Offload all model generation to model output

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-10-26 21:06:31 -07:00
parent 7ee162430f
commit 7264fcc570
5 changed files with 170 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
extension.json
View File

@@ -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": {

28
includes/GlModelHandler.php
View File

@@ -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 '<script>';
self::console_log($image);
self::console_log($dstPath);
self::console_log($dstUrl);
self::console_log($params);
self::console_log($flags);
echo '</script>';
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

138
includes/GlModelHooks.php
View File

@@ -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 '<script>';
self::console_log($mh);
self::console_log($mt);
echo '</script>';
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('/<pre>([\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
*

179
includes/GlModelTransformOutput.php
View File

@@ -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('/<pre>([\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 '<script>';
* self::console_log('logged string');
* echo '</script>';
*
* @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 = '<script>'. $command . '</script>';
}
echo $command;
}
}

32
modules/glmv.js
View File

@@ -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(/<pre>([\S\s]*?)<\/pre>/);
let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: [], annotationSets: {}};
let currentText = $('#wpTextbox1').val()
let extractMetadata = currentText.match(/<pre>([\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(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`);
$('#wpTextbox1').val(newText);
metadata.annotations['New Hotspot'] = hsOutput
let newText = currentText.replace(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
$('#wpTextbox1').val(newText)
}
};
}
/**
* Event listener callback to toggle the visibility