johnarban/index.html

## index.html
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>WWT Asteroid Orbit (Hosted Model)</title>
</head>

<body>
  <div id="wwtcanvas"></div>

  <div id="ui">
    <input id="asteroid" value="Ceres" spellcheck="false" />
    <button id="load">Load orbit</button>
    <span id="status">starting…</span>
    <span id="wwt-time"></span>
    <button id="playpause" type="button">Play</button>

<label style="display:flex;gap:6px;align-items:center;">
  Rate
  <input id="rate" type="number" step="0.1" value="1" style="width:80px;" />
</label>

  </div>

  <script>

  </script>
</body>

## script.js
let script_interface;
let wwt;
let isPlaying = false;
let lastRate = 1;

const statusEl = document.getElementById("status");
const asteroidEl = document.getElementById("asteroid");
const loadBtn = document.getElementById("load");
const playPauseBtn = document.getElementById("playpause");
const rateInput = document.getElementById("rate");


function setStatus(msg) {
  statusEl.textContent = msg;
  console.log("[status]", msg);
}

function setPlaying(playing) {
  isPlaying = playing;
  wwtlib.SpaceTimeController.set_syncToClock(playing);
  if (playing) {
    wwtlib.SpaceTimeController.set_timeRate(lastRate);
  }

  playPauseBtn.textContent = playing ? "Pause" : "Play";
}

function setRate(rate) {
  // enforce nonzero
  if (!Number.isFinite(rate) || rate === 0) rate = 1;
  lastRate = rate;
  rateInput.value = String(rate);

  if (isPlaying) {
    wwtlib.SpaceTimeController.set_timeRate(lastRate);
  }
}


//https://docs.worldwidetelescope.org/webgl-reference/latest/getting-started/hosted-javascript-model/
function init_wwt() {
  const builder = new wwtlib.WWTControlBuilder("wwtcanvas");
  builder.startRenderLoop(true);
  script_interface = builder.create();
  script_interface.add_ready(on_ready);
}

const timeEl = document.getElementById("wwt-time");

function on_ready() {
  wwt = wwtlib.WWTControl.singleton;
  setStatus("WWT ready");
  const startTime = new Date(Date.UTC(2026, 0, 10, 12, 0, 0));
  wwtlib.SpaceTimeController.set_now(startTime);
  setRate(1);
  setPlaying(false); // starts paused


  script_interface.add_arrived(() => {
    setStatus("Solar System mode");
  });
  wwt.setBackgroundImageByName("Solar System");

  // Give a nicer initial view; zoom is arbitrary.
  // Then switch to Solar System.
  wwt.gotoRADecZoom(0, 45, 36, false);
  loadAsteroidOrbit();
}

function updateWwtTime() {
  if (!wwt) return;
  const t = wwtlib.SpaceTimeController.get_now();
  timeEl.textContent = t.toISOString().replace("T", " ").replace("Z", " UTC");
}

setInterval(updateWwtTime, 1000);

async function loadAsteroidOrbit() {
  const asteroidName = asteroidEl.value.trim();
  if (!asteroidName) return;

  try {
    setStatus("finding parent map…");

    const allMaps = wwtlib.LayerManager.get_allMaps();
    const parent = "Sun";
    const parentMap = allMaps[parent];

    setStatus(`loading orbit for "${asteroidName}"…`);

    // Your requested call. (This is not part of the public typedoc API list,
    // but if your build exposes it, this will work as-is.)
    const result = await wwtlib.LayerManager._getMpc(
      asteroidName,
      parentMap
    );

    console.log("LayerManager._getMpcAsTLE result:", result);

    setStatus("loaded");
  } catch (err) {
    console.error(err);
    setStatus("error (see console)");
  }
}

loadBtn.addEventListener("click", loadAsteroidOrbit);
playPauseBtn.addEventListener("click", () => {
  if (!wwt) return;
  setPlaying(!isPlaying);
});

rateInput.addEventListener("change", () => {
  if (!wwt) return;
  setRate(Number(rateInput.value));
});

window.addEventListener("load", init_wwt);

## scripts
<script src="https://web.wwtassets.org/engine/7/wwtsdk.js"></script>

## style.css
html,
body {
  height: 100%;
  margin: 0;
  background: #000;
}
#wwtcanvas {
  position: fixed;
  inset: 0;
  background: #000;
}

/* Tiny overlay UI */
#ui {
  position: fixed;
  top: 5px;
  left: 5px;
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: .8em .8em;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #ffffffaa;
  border-radius: 10px;
  backdrop-filter: blur(2px);
  color: #fff;
  font-family: sans-serif;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
input {
  width: 220px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  outline: none;
}
#load {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}
#status {
  opacity: 0.85;
}

#wwt-time {
  width: 200px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 12px;
  border-radius: 8px;
}

## wwt-bug-demo.markdown

      
    Raw
  

              wwt-bug-demo.markdown
            
          
    WWT Bug Demo

A Pen by John Arban Lewis on CodePen.
License.
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<title>WWT Asteroid Orbit (Hosted Model)</title>
	</head>

	<body>
	<div id="wwtcanvas"></div>

	<div id="ui">
	<input id="asteroid" value="Ceres" spellcheck="false" />
	<button id="load">Load orbit</button>
	<span id="status">starting…</span>
	<span id="wwt-time"></span>
	<button id="playpause" type="button">Play</button>

	<label style="display:flex;gap:6px;align-items:center;">
	Rate
	<input id="rate" type="number" step="0.1" value="1" style="width:80px;" />
	</label>

	</div>

	<script>

	</script>
	</body>
	let script_interface;
	let wwt;
	let isPlaying = false;
	let lastRate = 1;

	const statusEl = document.getElementById("status");
	const asteroidEl = document.getElementById("asteroid");
	const loadBtn = document.getElementById("load");
	const playPauseBtn = document.getElementById("playpause");
	const rateInput = document.getElementById("rate");



	function setStatus(msg) {
	statusEl.textContent = msg;
	console.log("[status]", msg);
	}

	function setPlaying(playing) {
	isPlaying = playing;
	wwtlib.SpaceTimeController.set_syncToClock(playing);
	if (playing) {
	wwtlib.SpaceTimeController.set_timeRate(lastRate);
	}

	playPauseBtn.textContent = playing ? "Pause" : "Play";
	}

	function setRate(rate) {
	// enforce nonzero
	if (!Number.isFinite(rate) \|\| rate === 0) rate = 1;
	lastRate = rate;
	rateInput.value = String(rate);

	if (isPlaying) {
	wwtlib.SpaceTimeController.set_timeRate(lastRate);
	}
	}


	//https://docs.worldwidetelescope.org/webgl-reference/latest/getting-started/hosted-javascript-model/
	function init_wwt() {
	const builder = new wwtlib.WWTControlBuilder("wwtcanvas");
	builder.startRenderLoop(true);
	script_interface = builder.create();
	script_interface.add_ready(on_ready);
	}

	const timeEl = document.getElementById("wwt-time");

	function on_ready() {
	wwt = wwtlib.WWTControl.singleton;
	setStatus("WWT ready");
	const startTime = new Date(Date.UTC(2026, 0, 10, 12, 0, 0));
	wwtlib.SpaceTimeController.set_now(startTime);
	setRate(1);
	setPlaying(false); // starts paused



	script_interface.add_arrived(() => {
	setStatus("Solar System mode");
	});
	wwt.setBackgroundImageByName("Solar System");

	// Give a nicer initial view; zoom is arbitrary.
	// Then switch to Solar System.
	wwt.gotoRADecZoom(0, 45, 36, false);
	loadAsteroidOrbit();
	}

	function updateWwtTime() {
	if (!wwt) return;
	const t = wwtlib.SpaceTimeController.get_now();
	timeEl.textContent = t.toISOString().replace("T", " ").replace("Z", " UTC");
	}

	setInterval(updateWwtTime, 1000);

	async function loadAsteroidOrbit() {
	const asteroidName = asteroidEl.value.trim();
	if (!asteroidName) return;

	try {
	setStatus("finding parent map…");

	const allMaps = wwtlib.LayerManager.get_allMaps();
	const parent = "Sun";
	const parentMap = allMaps[parent];

	setStatus(`loading orbit for "${asteroidName}"…`);

	// Your requested call. (This is not part of the public typedoc API list,
	// but if your build exposes it, this will work as-is.)
	const result = await wwtlib.LayerManager._getMpc(
	asteroidName,
	parentMap
	);

	console.log("LayerManager._getMpcAsTLE result:", result);

	setStatus("loaded");
	} catch (err) {
	console.error(err);
	setStatus("error (see console)");
	}
	}

	loadBtn.addEventListener("click", loadAsteroidOrbit);
	playPauseBtn.addEventListener("click", () => {
	if (!wwt) return;
	setPlaying(!isPlaying);
	});

	rateInput.addEventListener("change", () => {
	if (!wwt) return;
	setRate(Number(rateInput.value));
	});

	window.addEventListener("load", init_wwt);
	html,
	body {
	height: 100%;
	margin: 0;
	background: #000;
	}
	#wwtcanvas {
	position: fixed;
	inset: 0;
	background: #000;
	}

	/* Tiny overlay UI */
	#ui {
	position: fixed;
	top: 5px;
	left: 5px;
	z-index: 10;
	display: flex;
	gap: 8px;
	align-items: center;
	padding: .8em .8em;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid #ffffffaa;
	border-radius: 10px;
	backdrop-filter: blur(2px);
	color: #fff;
	font-family: sans-serif;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	}
	input {
	width: 220px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	outline: none;
	}
	#load {
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	}
	#status {
	opacity: 0.85;
	}

	#wwt-time {
	width: 200px;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 10px 12px;
	border-radius: 8px;
	}