jsjupiter/index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<title>Javascript Jupiter</title>

<style type="text/css">
div#jupframe {
  background: black;
  color: white;
  position: relative;
  width: 99%;
  height: 100px;
}

/* All images and labels inside the jupframe are absolutely positioned */
#jupframe img, #jupframe span {
   position: absolute; visibility: hidden; z-index: 50
}

#jupframe span.moonlabel { color: white; top: .3em; }

#jupframe span.shadowlabel { color: yellow; top: 1.1em; }

#jupframe span.eclipselabel { color: blue; top: .3em; }

#jupframe span#grslabel { color: #aaa; font-size: .9em; bottom: .1em; }

#upcoming { background: #fffcf5; border: 1px inset; padding: 5px;  }

/* I can't find any way to style an input button by name --
 * it has to have an id as well as a name.
 */
input[type=button]#now { margin-left: 3em; }

</style>

<!-- The code for calculating Jovian moon and GRS positions: -->
<script type="text/javascript" src="jupiter.js"></script>

<!-- Code specific to displaying on this page: -->
<script type="text/javascript">
function screenWidth() {
  if (window.innerWidth != null)
    return window.innerWidth;
  if (document.documentElement.clientWidth)
    return document.documentElement.clientWidth;
  return 800;
}

function placeImage(im, left, top, width, height) {
  im.style.left = left;
  if (top) {
    im.style.top = top;
  }
  if (width) {
    im.width = width;
    if (height) {
      im.height = height;
    } else {
      im.height = width;   // assume square if width but not height specified
    }
  }
  im.style.visibility = "visible";
}

// Update Jupiter and predict upcoming events based on whatever
// date is in the date field of the page.
function setDate() 
{
  drawJupiter(jup, new Date(document.getElementById("datefield").value));

  predictUpcoming();
}

// Update the date field to the given date, then call setDate().
function updateDate(newdate)
{
  var datefield = document.getElementById("datefield");
  if (!datefield) {
    return;
  }
  datefield.value = newdate;
  setDate();
}

function addHours(hrs) {
  var d = jup.getDate();
  d.setTime(d.getTime() + 60 * 60 * hrs * 1000);
  updateDate(d);
}

// Animate:
var animating = false;
var animateTime = 100;  // default msec delay between steps
var stepMinutes = 10;   // default time to advance in each step

function animateStep() {
  if (! animating)
    return;
  var d = jup.getDate();
  d.setTime(d.getTime() + stepMinutes * 60 * 1000);
  drawJupiter(jup, d);
  setTimeout("animateStep();", animateTime);
}

function animateFaster(amt) {
  if (stepMinutes > 10 && amt < 0) {
    stepMinutes -= 10;
  }
  else if (animateTime == 1) {
    animateTime = 1;
    stepMinutes += 10;
  }
  else {
    animateTime -= amt;
    if (animateTime < 1)
      animateTime = 1;
  }
  var animspan = document.getElementById("animDelay");
  animspan.innerHTML = "Delay: " + animateTime + " milliseconds";
}

function toggleAnimation() {
  animating = !animating;
  if (animating) {
    animateStep();
  }
  else {
    predictUpcoming();
  }
}

function drawJupiter(jup, date) {
  busy = document.getElementById("recalculating")
  busy.style.visibility = "visible";

  jup.setDate(date);

  var width = parseInt(screenWidth() * .99);
  var halfwidth = width/2;
  var height = 100;
  var halfheight = height/2;
  var jupRadius = 19;
  var spotWidth = 27 * jupRadius / 30;
  var spotHeight = 13 * jupRadius / 30;
  
  // Make sure Jupiter is properly centered:
  var img = document.getElementById("jupiter");
  if (img) {
    placeImage(img, halfwidth - jupRadius, halfheight - jupRadius, jupRadius*2);
  }
  
  // The GRS:
  var coord = jup.getRedSpotXY(80);
  var img = document.getElementById("grs");
  var label = document.getElementById("grslabel");
  
  if (img && !isNaN(coord.x) && !isNaN(coord.y)) {
    // XXX Need some extra code here to make width smaller if the GRS
    // XXX is near the limb and foreshortened.
    var sx = halfwidth + coord.x * jupRadius - spotWidth/2;
    var sw = spotWidth;
    var jr = jupRadius * .8;   // approx radius at spot's latitude
    if (sx < halfwidth - jr) {
      sw = sw - halfwidth - jr - sx;
      sx = halfwidth - jr
    } else if (sx + sw > halfwidth + jr) {
      sw = halfwidth + jr - sx;
    }
    placeImage(img, sx, coord.y * jupRadius + halfheight - spotHeight/2,
               sw, spotHeight);
    if (label) {
      placeImage(label, sx);
    }
  }
  else if (img) {
    img.style.visibility = "hidden";
    if (label) {
      label.style.visibility = "hidden";
    }
  }
  else { alert("no grs image"); }
  
  for (var whichmoon = 0; whichmoon < 4; ++whichmoon) {
    // First handle the shadow
    moondata = jup.getMoonXYData(whichmoon);
 
    img = document.getElementById("shadow" + whichmoon);
    label = document.getElementById("slabel" + whichmoon);
    if (img && !isNaN(moondata.shadowx) && !isNaN(moondata.shadowy)) {
      img.setAttribute("src", "moonshadow.png");
      var x = moondata.shadowx * jupRadius + halfwidth;
      placeImage(img, x, moondata.shadowy * jupRadius + halfheight);
  
      // Place the label too:
      if (label) {
        placeImage(label, x);
      }
    }
    else if (img) {
      img.style.visibility = "hidden";
      if (label) {
        label.style.visibility = "hidden";
      }
    }
  
    // Now, with the shadow done, handle the moon itself:
    img = document.getElementById("moon" + whichmoon);
    label = document.getElementById("label" + whichmoon);
    eclipselabel = document.getElementById("elabel" + whichmoon);
    if (moondata.eclipse) {
      var x = moondata.moonx * jupRadius + halfwidth;
      placeImage(eclipselabel, x);
      if (img)
        img.style.visibility = "hidden";
      if (label)
        label.style.visibility = "hidden";
    }
    else if (img && !isNaN(moondata.moonx) && !isNaN(moondata.moony)) {
      img.setAttribute("src", "borderedmoon.png");
      var x = moondata.moonx * jupRadius + halfwidth;
      placeImage(img, x, moondata.moony * jupRadius + halfheight);
      if (moondata.farside)
        img.style.zIndex = 1;
      else
        img.style.zIndex = 100;

      // Place the label too:
      if (label)
        placeImage(label, x);

      if (eclipselabel)
        eclipselabel.style.visibility = "hidden";
    }
    else {
      if (img)
        img.style.visibility = "hidden";
      if (label)
        label.style.visibility = "hidden";
      if (eclipselabel)
        eclipselabel.style.visibility = "hidden";
    }
  }

  busy.style.visibility = "hidden";
  document.getElementById("datefield").value = jup.getDate();
}

function predictUpcoming()
{
  busy.style.visibility = "visible";
  var upcoming = document.getElementById("upcoming");
  if (!upcoming) return;
  upcoming.innerHTML =
    upcomingEvents(jup.getDate(),
                   parseInt(document.getElementById("upcoming-hrs").value));
  busy.style.visibility = "hidden";
}

</script>
</head>

<body>
<h1>Javascript Jupiter</h1>

<p>
Here are the four bright "Galilean" moons of Jupiter --
Io, Europa, Ganymede and Callisto -- and their shadows.
It also shows the position of Jupiter's "great red spot" (GRS).

<p>
North is up; west is right (binocular/Newtonian view, not refractor).

<noscript>
<p>
<b>
The moon positions are set using Javascript, which is disabled
in your browser. You'll need to turn it back on if you want to see
the current position of Jupiter's moons.
</b>
</noscript>

<div id="jupframe">
<img id="jupiter" src="smalljup.png">
<img id="grs" src="grs.png">
<img id="shadow0" src="moonshadow.png">
<img id="shadow1" src="moonshadow.png">
<img id="shadow2" src="moonshadow.png">
<img id="shadow3" src="moonshadow.png">
<img id="moon0" src="borderedmoon.png">
<img id="moon1" src="borderedmoon.png">
<img id="moon2" src="borderedmoon.png">
<img id="moon3" src="borderedmoon.png">
<span id="label0" class="moonlabel">I</span>
<span id="label1" class="moonlabel">E</span>
<span id="label2" class="moonlabel">G</span>
<span id="label3" class="moonlabel">C</span>
<span id="slabel0" class="shadowlabel">I</span>
<span id="slabel1" class="shadowlabel">E</span>
<span id="slabel2" class="shadowlabel">G</span>
<span id="slabel3" class="shadowlabel">C</span>
<span id="elabel0" class="eclipselabel">I</span>
<span id="elabel1" class="eclipselabel">E</span>
<span id="elabel2" class="eclipselabel">G</span>
<span id="elabel3" class="eclipselabel">C</span>
<span id="grslabel">GRS</span>
</div>

<p>
<!-- Don't wrap these in a form -- it keeps the dates from working
     when you hit enter. -->
Or you can set a date explicitly:
<input id="datefield" type="datetime" onChange="setDate(); return false;"
 size=40>
<input type="button" name="changeDate" value="Recalculate" onClick="setDate();">
<span id="recalculating"><i>Recalculating ...</i></span>
<p>
<input type="button" name="nextDay" value="-1 day" onClick="addHours(-24);">
<input type="button" name="nextHour" value="-1 hour" onClick="addHours(-1);">
<input type="button" name="nextHour" value="-5 min" onClick="addHours(-1/12);">
<input type="button" name="nextHour" value="+5 min" onClick="addHours(1/12);">
<input type="button" name="nextHour" value="+1 hour" onClick="addHours(1);">
<input type="button" name="nextDay" value="+1 day" onClick="addHours(24);">
<input type="button" name="now" id="now" value="* Now *"
        onClick="drawJupiter(jup, new Date()); predictUpcoming(); return true">
<p>
<input type="button" name="animate" value="Animate"
       onClick="toggleAnimation();">
<input type="button" name="faster" value="faster" onClick="animateFaster(20);">
<input type="button" name="slower" value="slower" onClick="animateFaster(-20);">
<span id="animDelay">Delay: 100 milliseconds</span>

<p>
Show events for
<input id="upcoming-hrs" type="text" value="8" size=4 
 onChange="predictUpcoming();">
hours.
<input type="button" name="predict" value="Predict"
       onClick="predictUpcoming();">
<p>
<pre id="upcoming"></pre>

<script type="text/javascript">

var date = null;

// Did the user specify a date in the URL?
var url = new String(document.location);
var idx = url.indexOf("?");
if (idx > 0) {
  idx = url.indexOf("date=", idx);
  if (idx > 0) {
    date = new Date(decodeURIComponent(url.substr(idx + 5)));
// Discussion of the three decoding options in javascript:
// http://unixpapa.com/js/querystring.html
// http://stackoverflow.com/questions/747641/what-is-the-difference-between-decodeuricomponent-and-decodeuri
  }
}

if (!date)
  date = new Date();

// Some useful times for testing:
// Ganymede just about to reappear from eclipse before disappearing again:
//date = new Date('Sat Nov 10 2012 16:10:00 GMT-0800 (PDT)');
// Europa should be visible at 19:51 but gone at 19:59; back at 20:06 re xephem:
//date = new Date('Mon Mar 10 2013 19:53:00 GMT-0700 (PDT)');
//date = new Date('Mon Mar 10 2013 19:57:00 GMT-0700 (PDT)');
//date = new Date('Mon Mar 10 2013 20:02:00 GMT-0700 (PDT)');
// 2 transits, 2 shadows:
//date = new Date('Wed Mar 10 2010 06:35:17 GMT-0800 (PST)');

// Call the code that calculates the positions, defined in jupiter.js.
var jup = new Jupiter();
updateDate(date);
</script>

<hr>

<h3>About Javascript Jupiter</h3>

<p>
<b>New for 2013!</b> Now you can predict future events, see eclipses,
and I improved the graphics so it's more obvious when moons are emerging
from behind Jupiter. Please report any bugs you find.

<p>
Times are approximate. There are lots of different models for Jupiter's
moons, and they all seem to give slightly different results, especially
for shadow events and eclipses. Start observing ten or fifteen 
minutes early if you want to be sure of catching something.

<p>
This is a re-implementation of my older
<a href="/jupiter.html">Java Jupiter</a> page
using HTML, CSS and Javascript (and nicer graphics).
It is Copyright &copy; 2000 - 2013 by Akkana Peck,
licensed under the GNU Public License v.2.
Feel free to share it or modify it! If you do, I'd appreciate hearing
about it, and a link back to my site.

<p>
I use this app on Android with the help of my
<a href="http://shallowsky.com/software/android/WebClient/">WebClient</a>
wrapper app.
<br>
For older Java phones,
Miguel Moreto has adapted this code for a neat mobile phone app called
<a href="http://code.google.com/p/mobilejupiter/">Mobile Jupiter</a>.

<hr>
<a href="https://github.com/akkana/scripts/tree/master/jsjupiter">Javascript
Jupiter on GitHub</a> |
<a href="/software/">Akkana's other software</a>
<br>
<a href="http://shallowsky.com/blog/tags/astronomy/">Articles tagged "astronomy" on my blog, "Shallow Thoughts"
<br>
<a href="/astro.html">Akkana's Astronomy Page</a> |
<a href="/">Shallow Sky home</a>


</body>
</html>