diff --git a/NoThumbnail.psd b/NoThumbnail.psd
deleted file mode 100644
index 5329b31..0000000
Binary files a/NoThumbnail.psd and /dev/null differ
diff --git a/README.md b/README.md
index 9ca30b2..a1019e9 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
-# Allsky Website ![v2022-03-01+](https://img.shields.io/badge/Version-2022.03.01+-green.svg)
-The "allsky-website" package allows you to display your images on a website, either on your Pi or on another machine. It can optionally add an overlay of constellations and other objects, as well as optional Aurora data from NOAA.
+# Allsky Website ![v2023-05-01](https://img.shields.io/badge/Version-2023.05.01-green.svg)
+The "allsky-website" package allows you to display your images on a website, either on your Pi or on another machine. It can optionally add an overlay of constellations and other objects, as well as optional Aurora data.
## Update
-This version of the website works best with Allsky camera software version **v2022-03-01** or newer.
+This version of the Website **requires** Allsky software version **v2023.05.01** or newer.
## Installation
The installation script for installing on a Pi is documented on the [main Allsky GitHub page](https://github.com/thomasjacquin/allsky).
-Once installed, there are several [configuration variables](https://github.com/thomasjacquin/allsky/wiki/allsky-website-Settings) you'll want to change.
+Once installed, there are several configuration variables you'll need to change. Click on the "Documentation" link in the WebUI, then the link for Settings -> Allsky Website.
diff --git a/allsky-font.css b/allsky-font.css
index b2a92d2..cb0edae 100755
--- a/allsky-font.css
+++ b/allsky-font.css
@@ -28,3 +28,33 @@
content: "\e900";
}
+@font-face {
+ font-family: 'mini-timelapse';
+ src: url('fonts/mini-timelapse.eot?dynh3c');
+ src: url('fonts/mini-timelapse.eot?dynh3c#iefix') format('embedded-opentype'),
+ url('fonts/mini-timelapse.ttf?dynh3c') format('truetype'),
+ url('fonts/mini-timelapse.woff?dynh3c') format('woff'),
+ url('fonts/mini-timelapse.svg?dynh3c#mini-timelapse') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+ /* use !important to prevent issues with browser extensions that change fonts */
+ font-family: 'mini-timelapse' !important;
+ speak: never;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-mini-timelapse:before {
+ content: "\ea15";
+}
diff --git a/allsky-logo.png b/allsky-logo.png
index dcb202e..c9f9ac7 100644
Binary files a/allsky-logo.png and b/allsky-logo.png differ
diff --git a/allsky.css b/allsky.css
index f978ae2..4478b58 100755
--- a/allsky.css
+++ b/allsky.css
@@ -2,9 +2,19 @@ body {
color:white;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: black;
- max-width: 960px; /* Optionally change to change size of image */
+ max-width: 960px;
margin: auto;
}
+img.current {
+ width: 100%;
+ max-width: 960px;
+}
+
+#starmap_container {
+ position: absolute;
+ overflow: hidden;
+}
+
.header {
display:block;
@@ -27,7 +37,13 @@ body {
height: 35px;
}
+.personalLink {
+ text-align: center;
+ font-size: 150%;
+}
+
.info {
+ font-size: 90%;
padding: 8px;
position: fixed;
top: 150px;
@@ -37,11 +53,12 @@ body {
background-color: #333;
border: 2px solid #888;
border-right: none;
+ z-index: 1;
}
.info ul {
list-style: none;
- padding-left: 10px;
+ padding-left: 2px;
margin-bottom: 0;
}
@@ -49,11 +66,10 @@ body {
margin-right: 3px;
}
-#sidebar {
+#leftSidebar {
position: fixed;
left: 0;
top: 150px;
- padding: 0;
padding: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
@@ -63,39 +79,27 @@ body {
z-index: 2;
}
-#sidebar li {
+#leftSidebar li {
list-style: none;
padding: 2px 0
}
-#sidebar li i {
+#leftSidebar li i {
cursor: pointer;
color: #888;
margin: 2px 0;
}
-#sidebar li i:hover,
-#sidebar li i.active {
+#leftSidebar li i:hover,
+#leftSidebar li i.active {
color: orange;
}
-.notification {
- margin-left: 10px;
-}
-
#imageContainer {
- text-align: center;
+ margin: auto;
}
-
-img.current {
- width: 100%;
- max-width: 960px; /* Optionally change to change size of image */
-}
-
-#starmap_container {
- position: absolute;
- overflow: hidden;
- height: 720px; /* Optionally change or delete to change size of image */
+.imageContainer {
+ border: 1px solid #5a5a5a;
}
.starmap_credit {
@@ -106,16 +110,25 @@ img.current {
position: fixed;
bottom: 10px;
right: 10px;
+ opacity: 0.5;
+}
+
+.diy:hover {
+ opacity: 1;
}
.diy a {
color: white;
}
+.diy i {
+ margin-right: 5px;
+}
+
.noImages {
text-align: center;
font-size: 200%;
- color: yellow;
+ color: #ffc107;
border: 2px solid gray;
margin: 4px;
}
@@ -199,24 +212,29 @@ img.current {
margin: 0 3px;
}
-.forecast .Low {
+.forecast .Very_Quite,
+.forecast .Quiet {
color: green;
}
+.forecast .Unsettled,
.forecast .Active {
- color: yellow;
+ color: #ffc107;
}
-.forecast .High {
+.forecast .Minor_Storm,
+.forecast .Moderate_Storm {
color: darkorange;
}
-.forecast .Extreme {
- color: red;
+.forecast .Strong_Storm,
+.forecast .Severe_Storm,
+.forecast .Extreme_Storm {
+ color: #dc3545;
}
.forecast .WARNING { /* for Aurora activity */
- color: yellow;
+ color: #ffc107;
font-weight: bold;
font-size: 125%;
}
@@ -227,6 +245,40 @@ img.current {
margin-top: 30px;
}
+.virtualsky_help {
+ color: black;
+}
+
.thumbnailError {
- color: red;
+ color: #dc3545;
}
+
+/* Messages on the home page */
+.msg {
+ background-color: #222;
+ text-align: center;
+ font-size: 145%;
+ font-weight: bold;
+ margin: 10px 0 20px 0;
+ padding: 20px 0 20px 0;
+ border-radius: 10px;
+}
+.error-msg {
+ color: #dc3545;
+ border: 3px dashed #dc3545;
+}
+.warning-msg {
+ color: #ffc107;
+ border: 3px dashed #ffc107;
+}
+.notice-msg {
+ color: white;
+ border: 3px solid white;
+}
+
+@media screen and (max-width: 480px) {
+ .msg {
+ font-size: 100%;
+ }
+}
+
diff --git a/config.js b/config.js
deleted file mode 100644
index f711ad2..0000000
--- a/config.js
+++ /dev/null
@@ -1,21 +0,0 @@
-var config = {
- comment: "See https://github.com/thomasjacquin/allsky/wiki/allsky-website-Settings for a description of these settings",
- title: "XX_need_to_update_XX",
- imageName: "/current/tmp/image.jpg",
- location: "XX_need_to_update_XX",
- latitude_longitude_comment: "latitude and longitude must be decimal numbers with OUT the trailing N, S, E, and W.",
- latitude: 0,
- longitude: 0,
- az: 0,
- camera: "XX_need_to_update_XX",
- lens: "XX_need_to_update_XX",
- computer: "XX_need_to_update_XX",
- owner: "XX_need_to_update_XX",
- overlaySize: 875,
- overlayOffsetLeft: 0,
- overlayOffsetTop: 0,
- showOverlayAtStartup: false,
- auroraForecast: false,
- auroraMap: "XX_need_to_update_XX",
- intervalSeconds: 5,
-}
diff --git a/controller.js b/controller.js
index 4661d99..b619c50 100755
--- a/controller.js
+++ b/controller.js
@@ -1,43 +1,175 @@
-var usingNewVirtualSky = typeof S != "undefined" && typeof S.virtualsky == "function";
-console.log("usingNewVirtualSky=" + usingNewVirtualSky);
-
var app = angular.module('allsky', ['ngLodash']);
+var overlayBuilt = false; // has the overlay been built yet?
+
+var virtualSkyData = null;
+var sunData = "data.json"; // contains sunrise/sunset times and related data
+var configData = "configuration.json" // contains web configuration data
+
+// This returns the height INCLUDING the border: $("#imageContainer").css('height')
+// This returns the height NOT including the border: $("#imageContainer").height()
+
+// These two are used by virtualsky.js to set the overlay width and height,
+// if there was a difference.
+var overlayWidth = 0, overlayHeight = 0;
+var overlayWidthMax = 0, overlayHeightMax = 0;
+var starmapWidth = 0, starmapHeight = 0;
+var wasDiff = true;
+var last_s_iW = 0, last_s_iH = 0;
+var icWidth = 0;
+var icHeight = 0;
+var icImageAspectRatio = 0;
+var overlayAspectRatio = 0;
+var myLatitude = 0, myLongitude = 0;
+
$(window).resize(function () {
- buildOverlay();
+ if (overlayBuilt) { // only rebuild if already built once
+ var newW = $("#imageContainer").width();
+ var newH = $("#imageContainer").height()
+// console.log("#imageContainer newW=" + newW + ", newH=" + newH);
+
+ $("#starmap_container").css("width", newW + "px").css("height", newH + "px");
+
+ var diffW = newW - icWidth;
+ // Scale the height based on the aspect ratio of the image.
+// console.log("newW=" + newW + ", icWidth=" + icWidth);
+//x var diffH = (newH - icHeight) * overlayAspectRatio;
+ var diffH = (newH - icHeight);
+ icWidth = newW;
+ icHeight = newH;
+
+ if (diffW == 0 && diffH == 0) {
+ wasDiff = false;
+// console.log(">>> No change in image size.");
+ return;
+ }
+
+ wasDiff = true;
+
+ // TODO: probably also need to adjust #stamap's margin-left and margin-right.
+
+ // This holds the starmap button, so needs to resize
+ starmapWidth += diffW;
+ starmapHeight += diffH;
+ $("#starmap").css("width", starmapWidth + "px").css("height", starmapHeight + "px");
+
+ // Shrinking the window makes the overlay shrink too fast for some reason.
+ // Got the fudge factor by trial and error.
+ if (diffW < 0) {
+ var fudge = 0.95;
+ diffW *= fudge;
+// console.log("diffH=" + diffH + ", overlayAspectRatio=" + overlayAspectRatio);
+ diffH = (diffH / overlayAspectRatio) * fudge;
+ }
+
+// console.log("== diffW= " + diffW + ", diffH= " + diffH);
+ overlayWidth += diffW;
+ if (overlayWidth > overlayWidthMax) overlayWidth = overlayWidthMax;
+ overlayHeight += diffH;
+ if (overlayHeight > overlayHeightMax) overlayHeight = overlayHeightMax;
+// console.log("== setting overlayWidth= " + overlayWidth + ", overlayHeight= " + overlayHeight);
+ $("#starmap_inner")
+ .css("width", overlayWidth + "px")
+ .css("height", overlayHeight + "px");
+ }
});
function buildOverlay(){
- var planetarium;
- $.ajax({
- url: "virtualsky.json" + '?_ts=' + new Date().getTime(),
- cache: false
- }).done(
- function (data) {
- // This is to scale the overlay when the window is resized
- // Newer versions support both width and height.
- var width;
- if (config.overlayWidth) {
- width = config.overlayWidth;
- } else {
- width = config.overlaySize;
+ if (overlayBuilt) {
+ S.virtualsky(virtualSkyData);
+ } else {
+ $.ajax({
+ // No need for ?_ts= since $.ajax adds one
+ url: configData,
+ cache: false
+ }).done(
+ function (data) {
+ var c = data.config;
+ // "config" was defined in index.php to include ALL the variables we need,
+ // including ones not in the "config" section of the configuration file.
+ // However, "array" types like "colour" aren't handled in index.php.
+
+ // TODO: I tried not doing the ajax call, but the overlay wouldn't show.
+ // It's a shame - there's no reason to re-read the file.
+
+ virtualSkyData = c;
+ virtualSkyData.latitude = myLatitude;
+ virtualSkyData.longitude = myLongitude;
+
+ // These variables have different names in virtualsky.js and our config file.
+ virtualSkyData.width = c.overlayWidth;
+ virtualSkyData.height = c.overlayHeight;
+
+ S.virtualsky(virtualSkyData); // Creates overlay
+ overlayBuilt = true;
+
+ // Offset of overlay
+ $("#starmap")
+ .css("margin-top", c.overlayOffsetTop + "px")
+ .css("margin-left", c.overlayOffsetLeft + "px");
+
+ // max-width of #imageContainer set in index.php based on width user specified (imageWidth)
+ icWidth = $("#imageContainer").width();
+ icHeight = $("#imageContainer").height();
+ icImageAspectRatio = icWidth / icHeight;
+
+ $("#starmap_container").css("width", icWidth + "px").css("height", icHeight + "px");
+
+ overlayWidth = c.overlayWidth;
+ overlayHeight = c.overlayHeight;
+ overlayAspectRatio = overlayWidth / overlayHeight;
+// console.log("overlay aspect ratio=" + overlayAspectRatio);
+
+ overlayHeightMax = overlayHeight; // never go larger than what user specified
+ overlayWidthMax = overlayWidth;
+
+ starmapWidth = $("#starmap").width();
+ starmapHeight = $("#starmap").height();
+
+ // TODO: this assumes the border is 1px on each side.
+ var imageWidth = c.imageWidth - (config.imageBorder ? 2 : 0);
+ if (icWidth < imageWidth) {
+ // The actual image on the screen is smaller than the imageWidth requested by the user.
+ // Determine the percent smaller, then make the overlay that percent smaller.
+console.log("icWidth=" + icWidth + ", imageWidth=" + imageWidth);
+ var percentSmaller = icWidth / c.imageWidth;
+
+ // #starmap holds the starmap button, so needs to resize it as well.
+ var w = starmapWidth * percentSmaller;
+ var h = w / overlayAspectRatio;
+ $("#starmap")
+ .css("width", Math.round(w, 0) + "px")
+ .css("height", Math.round(h, 0) + "px");
+ starmapWidth = w;
+ starmapHeight = h;
+
+ // TODO: probably also need to adjust #stamap's margin-left and margin-right if
+
+ // percentSmaller makes the overlay TOO small, so change it.
+ percentSmaller *= 1.04;
+console.log("== Decreasing overlay by " + percentSmaller*100 + " percent" + " (overlayWidth was " + overlayWidth + ")");
+ overlayWidth = overlayWidth * percentSmaller;
+ overlayHeight = overlayWidth / overlayAspectRatio;
+ $("#starmap_inner")
+ .css("width", Math.round(overlayWidth, 0) + "px")
+ .css("height", Math.round(overlayHeight, 0) + "px");
+
+ }
+
+ // id="live_container" is where the image goes.
+ var image_w = c.imageWidth;
+ var image_h = Math.round((image_w / icImageAspectRatio), 0);
+// console.log("icHeight=" + icHeight + ", icWidth=" + icWidth);
+// console.log("overlayHeight=" + overlayHeight + ", overlayWidth=" + overlayWidth);
+// console.log("image_h=" + image_h + ", image_w=" + image_w);
+
+ // Keep track of the sizes. virtualsky.js seems to change them,
+ // so we need to change them based on our last known sizes.
+ last_s_iW = $("#starmap_inner").width();
+ last_s_iH = $("#starmap_inner").height();
}
- data.width = window.innerWidth < width ? window.innerWidth : width;
- if (config.overlayHeight)
- data.height = config.overlayHeight;
- else
- data.height = data.width; // default is square
- data.latitude = config.latitude;
- data.longitude = config.longitude;
- data.az = config.az;
- if (usingNewVirtualSky)
- planetarium = S.virtualsky(data);
- else
- planetarium = typeof $.virtualsky == "undefined" ? undefined : $.virtualsky(data);
- $("#starmap").css("margin-top", config.overlayOffsetTop + "px");
- $("#starmap").css("margin-left", config.overlayOffsetLeft + "px");
- }
- );
+ );
+ }
};
function compile($compile) {
@@ -63,40 +195,109 @@ function compile($compile) {
};
}
-var configNotSet = false; // Has the config.js file been updated by the user?
+var configNotSet = false; // Has the configuration file been updated by the user?
+var needToUpdate = "XX_NEED_TO_UPDATE_XX"; // must match what's in configData
+
+function convertLatitude(sc, lat) { // sc == scope
+ var convertToString = false;
+ var len, direction;
+
+ if (typeof lat === "string") {
+ sc.s_latitude = lat; // string version
+
+ len = lat.length;
+ direction = lat.substr(len-1, 1).toUpperCase();
+ if (direction == "N")
+ sc.latitude = lat.substr(0, len-2) * 1;
+ else if (direction == "S")
+ sc.latitude = lat.substr(0, len-2) * -1;
+ else {
+ // a number with quotes around it which is treated as a string
+ sc.latitude = lat * 1;
+ convertToString = true;
+ }
+ } else {
+ sc.latitude = lat;
+ convertToString = true;
+ }
+
+ if (convertToString) {
+ if (lat >= 0)
+ sc.s_latitude = lat + "N";
+ else
+ sc.s_latitude = -lat + "S";
+ }
+
+ return sc.latitude;
+}
+
+function convertLongitude(sc, lon) {
+ var convertToString = false;
+ var len, direction;
+
+ if (typeof lon === "string") {
+ sc.s_longitude = lon;
+
+ len = config.longitude.length;
+ direction = lon.substr(len-1, 1).toUpperCase();
+ if (direction == "E")
+ sc.longitude = lon.substr(0, len-2) * 1;
+ else if (direction == "W")
+ sc.longitude = lon.substr(0, len-2) * -1;
+ else {
+ // a number with quotes around it which is treated as a string
+ sc.longitude = lon * 1;
+ convertToString = true;
+ }
+ } else {
+ sc.longitude = lon;
+ convertToString = true;
+ }
+
+ if (convertToString) {
+ if (config.longitude >= 0)
+ sc.s_longitude = lon + "E";
+ else
+ sc.s_longitude = -lon + "W";
+ }
+
+ return sc.longitude;
+}
function AppCtrl($scope, $timeout, $http, _) {
- var overlayBuilt = false; // has the overlay been built yet?
- if (! usingNewVirtualSky) {
- overlayBuilt = true;
- buildOverlay();
- }
+ // Allow latitude and longitude to have or not have N, S, E, W,
+ // but in the popout, always use the letters for consistency.
+ // virtualsky.js expects decimal numbers so we need both.
+ // Need to convert them before building the overlay.
+ $scope.latitude = convertLatitude($scope, config.latitude);
+ myLatitude = $scope.latitude;
+ $scope.longitude = convertLongitude($scope, config.longitude);
+ myLongitude = $scope.longitude;
- $scope.imageURL = "loading.jpg";
+ $scope.imageURL = config.loadingImage;
$scope.showInfo = false;
$scope.showOverlay = config.showOverlayAtStartup;
- if ($scope.showOverlay && usingNewVirtualSky) {
- overlayBuilt = true;
- console.log("@@ Building overlay...");
+ if ($scope.showOverlay) {
+ console.log("@@ Building overlay at startup for showOverlay...");
buildOverlay();
}
$scope.notification = "";
- $scope.title = config.title;
- if ($scope.title == "XX_need_to_update_XX") {
- // Could (or should?) check other variables for not being set.
- // Or assume if the title is set, everything else is too.
+ if (config.title == needToUpdate) {
+ // Assume if the title isn't set, nothing else is either.
configNotSet = true;
+ $scope.notification = formatMessage("Please update the '" + configData + "' file.
Replace the '" + needToUpdate + "' entries and check all other entries.
Refresh your browser when done.", msgType="error");
+ return;
}
$scope.location = config.location;
- $scope.latitude = config.latitude;
- $scope.longitude = config.longitude;
$scope.camera = config.camera;
$scope.lens = config.lens;
$scope.computer = config.computer;
$scope.owner = config.owner;
$scope.auroraForecast = config.auroraForecast;
$scope.imageName = config.imageName;
+ $scope.AllskyVersion = config.AllskyVersion;
+ $scope.AllskyWebsiteVersion = config.AllskyWebsiteVersion;
function getHiddenProp() {
var prefixes = ['webkit', 'moz', 'ms', 'o'];
@@ -113,34 +314,19 @@ function AppCtrl($scope, $timeout, $http, _) {
// otherwise it's not supported
return null;
}
+ var hiddenProperty = getHiddenProp();
function isHidden() {
- var prop = getHiddenProp();
- if (!prop) return false;
-//return false; // xxxxxxxxx for testing, uncomment to make never hidden
-
- return document[prop];
+ if (! hiddenProperty) return false;
+ return document[hiddenProperty];
}
- // If the data.json file wasn't found, or for some reason "sunset" isn't in it,
- // the routine that reads data.json will set "dataMissingMessage" so display it.
+ // If the "sunData" file wasn't found, or for some reason "sunset" isn't in it,
+ // the routine that reads "sunData" will set "dataMissingMessage" so display it.
var dataMissingMessage = "";
function formatMessage(msg, msgType) {
- if (msgType === "error") {
- textColor = "red";
- borderColor = "red";
- borderStyle = "dashed";
- } else if (msgType === "warning") {
- textColor = "yellow";
- borderColor = "yellow";
- borderStyle = "dashed";
- } else {
- textColor = "white";
- borderColor = "white";
- borderStyle = "solid";
- }
- return("
"; + echo "ERROR: Missing configuration file '$configuration_file'. Cannot continue."; + echo "
"; + exit; +} +$settings_str = file_get_contents($configuration_file, true); +$settings_array = json_decode($settings_str, true); +if ($settings_array == null) { + echo "";
+ echo "ERROR: Bad configuration file '$configurationFileName'. Cannot continue.";
+ echo "
Check for missing quotes or commas at the end of every line (except the last one).";
+ echo "
$settings_str"; + exit; +} +$onPi = v("onPi", true, $settings_array['homePage']); + +// If on a Pi, check that the placeholder was replaced. +if ($onPi && ALLSKY_CONFIG == "XX_ALLSKY_CONFIG" . "_XX") { // This file hasn't been updated yet after installation. echo "
";
+ echo " cd ~/allsky";
+ echo "
website/install.sh --update";
+ echo "
";
+
+ echo "";
+ echo " website/install.sh --update
";
echo "$back_button | $title |
$image_settings_str"; + exit; + } + ?> +
Setting | Value | Camera Type | $cameraType | "; + $cameraModel = v("cameraModel", "", $settings); + echo "
---|---|
Camera Model | $cameraModel |
Lens | $lens |
Daytime Auto-Exposure | $value |
Daytime Manual Exposure | $dayExposure |
Daytime Brightness | $dayBrightness |
Daytime Auto-Gain | $value |
Daytime Manual Gain | $dayGain |
Daytime AWB | $value |
Daytime Red Balance | $dayWBR |
Daytime Blue Balance | $dayWBB |
Daytime Bin | $dayBin |
Daytime Mean Target | $dayMean |
Nighttime Auto-Exposure | $value |
Nighttime Manual Exposure | $nightExposure |
Nighttime Brightness | $nightBrightness |
Nighttime Auto-Gain | $value |
Nighttime Manual Gain | $nightGain |
Nighttime AWB | $value |
Nighttime Red Balance | $nightwbr |
Nighttime Blue Balance | $nightWBB |
Nighttime Bin | $nightBin |
Nighttime Mean Target | $nightMean |
Offset | $offset |
Saturation | $saturation |
Contrast | $contrast |
Sharpness | $sharpness |