{source}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<svg id="galaxy">
<g id="stars"></g>
</svg>
<style>
#galaxy {
background-image: url("/../images/solar.png");
background-size: contain;
background-repeat: no-repeat;
left: 0;
top: 0;
width: 2661px;
height: 200px;
position: relative;
}
</style>
<script>
function mainFunc() {
var svgNS = "http://www.w3.org/2000/svg"
var starsGroup = document.getElementById("stars");
var galaxy = document.getElementById("galaxy").getBoundingClientRect();
var center = { x: galaxy.width / 2, y: galaxy.height / 2 };
var stars = []
var tweens = []

window.onresize = function () {
galaxy = document.getElementById("galaxy").getBoundingClientRect();
center = { x: galaxy.width / 2, y: galaxy.height / 2 };
};

// STAR OPTIONS //////////////////////////////////////////////////////////////
var maxRad = Math.sqrt(Math.pow(center.x, 2) + Math.pow(center.y, 2));
var starCount = 100;
var speed = 1;
var innerRadius = 200;
var minSize = 1;
var maxSize = 2;
//////////////////////////////////////////////////////////////////////////////

var startPos, tranOrigin, time;
for (var i = 0; i < starCount; ++i) {
// add new star
var star = document.createElementNS(svgNS, "circle");
startPos = {
x: Math.random() * center.x * 2,
y: Math.random() * center.y * 2
};

// set basic tag attributes
star.setAttribute("class", "star");
star.setAttribute("fill", "#A8A8A8");
star.setAttribute("stroke", "none");
star.setAttribute("cx", startPos.x);
star.setAttribute("cy", startPos.y);
star.setAttribute("r", Math.random() * maxSize + minSize);

// add to internal array and svg group
stars.push(star);
starsGroup.appendChild(star);

tranOrigin = "" + (center.x - startPos.x) + "px " +
(center.y - startPos.y) + "px";

time = Math.pow(speed * 0.01, -1) * Math.pow(star.getAttribute("r"), -1);
//console.log(time)

tweens.push(TweenMax.to(star, time, {
transformOrigin: tranOrigin,
rotation: 360,
ease: Power0.easeNone,
repeat: -1
}));
}
}
document.addEventListener("DOMContentLoaded", mainFunc);
</script>{/source}

Archive

Archival data are updated every hour.
1. Select a day from the calendar
2. Click on the bar plot for the exact timing to show images
3. For downloading data in JPEG, FITS, and MP4 movies, use the buttons below.
4. Archives with all files from a given day are available on the next day after observations.

{source}<?php
$document = JFactory::getDocument();
//$document->addStyleSheet('https://cdn.usebootstrap.com/bootstrap/2.3.2/css/bootstrap.min.css');
$document->addScript('https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js');
//$document->addScript('https://cdn.usebootstrap.com/bootstrap/2.3.2/js/bootstrap.min.js');
$document->addStyleSheet('https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css');
$document->addScript('https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js');
$document->addScript('https://cdn.plot.ly/plotly-2.4.2.min.js');
$document->addScript(Juri::base(true).'images/data_picker.js');
$document->addStyleSheet(Juri::base(true).'images/style.css');
$document->addScript(Juri::base().'solarobs/form.php');
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link
id="bsdp-css"
href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.plot.ly/plotly-2.4.2.min.js"></script>
<link rel="stylesheet" href="/./images/style.css" />
<title></title>

<p id="loading" style="display: none; color: red; text-align: center; font-size: large;">Loading...</p>

<div style="display: flex;">
<div id="datepicker"></div>
<div id="myPlot" style="margin-left: 10px; width: 70vmax;"></div>
</div>

<div style="width: 100%; text-align: center; padding: 0">
<h3 id="img_time"></h3>
<div id="img_set" style="display: flex; align-items: flex-end">
</div>
</div>


<div id="buttons_container" style="display: none;">
<hr>
<table>
<tr>
<td>
<form action="../local_scripts/display_file.php" method="post">
<dir hidden>
<input type="text" name="dir_name" id="dir_name_JPEG" value="solar_data/archive/2021-11-06/">
<input type="text" name="ext_name" id="ext_name_JPEG" value="jpeg">
</dir>
<button id="dir_JPEG_btn" type = "submit" formtarget="_blank" class="btn_noframe" data-toggle="tooltip" data-placement="top" title="Click the button to see the list of pictures">
<img class="btn_img" src="/./images/browse_JPEG.png" width="auto" />
</button>
</form>
</td>
<td>
<form action="../local_scripts/display_FITS.php" method="post">
<dir hidden>
<input type="text" name="dir_name" id="dir_name_FITS" value="solar_data/archive/2021-11-06/">
<input type="text" name="ext_name" id="ext_name_FITS" value="fits">
</dir>
<button id="dir_FITS_btn" type="submit" formtarget="_blank" class="btn_noframe" data-toggle="tooltip" data-placement="top" title="Click the button to see the list of pictures">
<img class="btn_img" src="/./images/browse_FITS.png" width="auto" />
</button>
</form>
</td>
<td>
<form action="../local_scripts/display_movies.php" method="post">
<dir hidden>
<input type="text" name="dir_name" id="dir_name_MOV" value="solar_data/archive/2021-11-06/">
<!-- <input type="text" name="ext_name" id="ext_name_MOV" value="mp4"> -->
</dir>
<button id="dir_MOV_btn" type="submit" formtarget="_blank" class="btn_noframe" data-toggle="tooltip" data-placement="top" title="Click the button to see the list of movies">
<img class="btn_img" src="/./images/browse_MOVIES.png" width="auto" />
</button>
</form>
</td>
</tr>
<tr>
<td>
<form action="../local_scripts/get_file.php" method="post">
<dir hidden>

<input type="text" name="file_name" id="file_name_JPEG_7z" value="./solar_data/archive/2021-11-06/archive_JPEG.7z">
</dir>
<button id="dir_JPEG_7z_btn" type="submit" class="btn_noframe" data-toggle="tooltip" data-placement="top"
title="Click the button to download the zipped set of pictures from a day">
<img class="btn_img" src="/./images/download_all_JPEG.png" width="auto" />
</button><br>
<h4 id="JPEG_size" class="file_size" >Test</h4>
</form>

</td>
<td>
<form action="../local_scripts/get_file.php" method="post">
<dir hidden>
<input type="text" name="file_name" id="file_name_FITS_7z" value="archive_FITS.7z">
</dir>
<button id="dir_FITS_7z_btn" class="btn_noframe" data-toggle="tooltip" data-placement="top" title="Click the button to download the zipped set of pictures from a day" >
<img class="btn_img" src="/./images/download_all_FITS.png" width="auto" />
</button><br>
<h4 id="FITS_size" class="file_size" >Test</h4>
</form>
</td>
<td>
<form action="../local_scripts/get_file.php" method="post">
<dir hidden>

<input type="text" name="file_name" id="file_name_MOV_7z" value="./solar_data/archive/2021-11-06/archive_MOV.7z">
</dir>
<button id="dir_MOV_7z_btn" type="submit" class="btn_noframe" data-toggle="tooltip" data-placement="top" title="Click the button to download the zipped set of movies from a day">
<img class="btn_img" src="/./images/download_all_MOVIES.png" width="auto" />
</button><br>
<h4 id="MOV_size" class="file_size" >Test</h4>
</form>
</td>
</tr>
</table>
</div>




<script src="/images/data_picker.js"></script>{/source}