No edit summary |
No edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 12: | Line 12: | ||
|- | |- | ||
| ''id'' || || unique id prefix if you embed multiple widgets on one page || || wh | | ''id'' || || unique id prefix if you embed multiple widgets on one page || || wh | ||
|- | |||
| ''fps'' || || Desired fps for the animation || || 5 | |||
|} | |} | ||
</noinclude><includeonly> | </noinclude><includeonly> | ||
<div class="wh-moonstack" style="max-width:<!--{$size|default:512|escape:'html'}-->px;margin:1rem 0;"> | <div class="wh-moonstack" style="max-width:<!--{$size|default:512|escape:'html'}-->px;margin:1rem 0;"> | ||
<label for="<!--{$id|default:'wh'|escape:'html'}-->-x"><strong>Days since alignment:</strong> | |||
<span id="<!--{$id|default:'wh'|escape:'html'}-->-xval">1</span> / 6433 | |||
</label> | |||
< | <div style="display:flex;align-items:center;gap:0.5rem;"> | ||
< | <input id="<!--{$id|default:'wh'|escape:'html'}-->-x" type="range" min="1" max="6433" value="1" style="flex-grow:1;"> | ||
<button id="<!--{$id|default:'wh'|escape:'html'}-->-play" style="font-size:1rem;padding:0.2rem 0.5rem;cursor:pointer;">▶</button> | |||
</div> | |||
<div style="margin:.5rem 0;"> | <div style="margin:.5rem 0;"> | ||
| Line 31: | Line 35: | ||
style="position:relative;width:<!--{$size|default:512|escape:'html'}-->px;height:<!--{$size|default:512|escape:'html'}-->px;isolation:isolate;background:#000;border:1px solid #333;"> | style="position:relative;width:<!--{$size|default:512|escape:'html'}-->px;height:<!--{$size|default:512|escape:'html'}-->px;isolation:isolate;background:#000;border:1px solid #333;"> | ||
<img id="<!--{$id|default:'wh'|escape:'html'}-->-base" | <img id="<!--{$id|default:'wh'|escape:'html'}-->-base" | ||
src="<!--{$basePath|default:'/images/moons/'|escape:'html'}-->WyrdeHaven_center.png" width="{size}" height="{size}" | src="<!--{$basePath|default:'/images/moons/'|escape:'html'}-->WyrdeHaven_center.png?v=2" width="{size}" height="{size}" | ||
alt="WyrdeHaven base" | alt="WyrdeHaven base" | ||
decoding="async" fetchpriority="high" draggable="false" | decoding="async" fetchpriority="high" draggable="false" | ||
| Line 107: | Line 111: | ||
update(); | update(); | ||
var playBtn = document.getElementById(ID + "-play"); | |||
var timer = null; | |||
var playing = false; | |||
var interval = 1000/<!--{$fps|default:5|escape:'html'}-->; | |||
function stepForward(){ | |||
var v = parseInt(el.x.value, 10); | |||
if(v >= 6433) v = 1; | |||
else v++; | |||
el.x.value = v; | |||
update(); | |||
} | |||
playBtn.addEventListener("click", function(){ | |||
if(!playing){ | |||
playing = true; | |||
playBtn.textContent = "■"; // stop icon | |||
timer = setInterval(stepForward, interval); | |||
} else { | |||
playing = false; | |||
playBtn.textContent = "▶"; // play icon | |||
clearInterval(timer); | |||
timer = null; | |||
} | |||
}); | |||
})(); | })(); | ||
</script></includeonly> | </script></includeonly> | ||
Latest revision as of 16:50, 10 November 2025
This widget allows you to embed the lunar orbits of WyrdeHaven in your mediaWiki page
Usage
{{#widget:MoonStack | basePath=/images/moons/ | size=512 | id=ms1}}
| basePath | Location of image files for the orbits | /images/moons/ | ||
| size | maximum image size in pixels | 512 | ||
| id | unique id prefix if you embed multiple widgets on one page | wh | ||
| fps | Desired fps for the animation | 5 |