Skip to content

Commit

Permalink
Website configuration improvements (#135)
Browse files Browse the repository at this point in the history
* index.php: allow customizations of home page

* Replaced config.js and virtualsky.json with configuration.json, which has a section for home page customizations.

* allsky.css: add for home page customizations

* allsky.css: removed Eric's changes

* Delete config.js

Replaced by configuration.json

* controller.js: support home page customizations

* "loading.jpg" is now defined in the configuration file.
* Removed unneeded comment

* Delete virtualsky.json

Replaced by configuration.json

* controller.js: support customized home page

* Load "configuration.json" instead of old "virtualsky.json".
* Only load "configuration.json" once - on subsequent attempts (normally from resize) use the cached data.  This means if a user updates "configuration.json" they'll need to reload the browser manually.
* Removed unneeded code that checks for new virtualsky package (which we're now using).

* Resolved merge conflict - restored newer version

* index.php: misc changes

* Add some comments.
* Automatically determine "og_image_type" based on the extension of "og_image".
* Improved handling of unspecified background image.

* index.php: rename variable

* "showOverlayIcon" is a better description of what the variable does - if true, the Overlay Icon is shown.

* controller.js: needToUpdate

* Make "XX_NEED_TO_UPDATE_XX" a variable since it's used in a couple places.
* Fix: "config.js" should be "configuration.json".

* index.php: add $title

Add $title from the "homePage" variable to the "config" javascript array since it's used in both "homePage" variable and "config" variable.

* controller.js: delete overlaySize and others

* Use overlayWidth and overlayHeight instead of overlaySize.
* data.virtualSky is no longer the name of the json variable; it's data.config.
* Put message styles in allsky.css as classes.
* Commented out or remove a couple console.log()'s that weren't needed anymore.

* allsky.css: Add some classes

They were styles in controller.js.

* Create configuration.json

This file combines the old "config.js" and "virtualsky.json" files, plus adds additional settings to customize the website home page.
This file will likely change as more testing is done.

* configuration.json: fix JSON format

* Fix two cases of incorrect JSON format.
* Remove space before ":" to be consistent with everything else.

* Delete allsky-logo.png

Will replace with smaller version that doesn't have to be scaled down in size by the browser.

* add smaller allsky-logo.png

* functions.php: use can_make_video_thumbnails()

* functions.php: additional checks

* allsky.css: add thumbnailError class

* controller.js: use correct number for average

* controller.js update Kp values

Update the meanings of the Kp values based on NOAA and mostly described in https://auroraforecast.is/kp-index/.

* controller.js: fix Kp values

The names must be CSS classes so can't have spaces in them.

* allsky.css: updated classes for Kp values

* configuration.json: reorder

* Put "config" options first since that's what people had to edit in the past.
* Put sidebar and popoutIcons fields on one line to significantly shorten the file.  Few people will edit them.
* Rename "localLink" to "personalLink" to better reflect what it's for.

* index.php: rename localLink to personalLink

Also ignore null sidebar URLs

* allsky.css: rename localLink to personalLink

* index.php: get homePage.onPi variable

* configuration.json: set onPi

* "onPi" determins whether or not the website is on a Pi, in which case we know we can produce thumbnails.  Some remote servers can also produce them but most can't.  There doesn't appear to be any good way to determine if they can be produced on remote servers.

* functions.php: use $onPi

* If included from index.php, $onPi will not be set so functions.php will read the configuration file.
* When clicking on the link for keogram, startrails, or timelapse files, $onPi WILL be set so the configuration file isn't read.
* Checking for "arm" in the uname to determine if we're on a Pi doesn't always work - some NAS are arm but not Pi's, so we add a configuration variable "onPi" that needs to be set manually.  Default is "true" so remote servers need to set to "false".

* index.php: include "functions.php"

* functions.php will read the configuration file when called from index.php as well as called from other scripts, if needed.
* Pass the "onPi" configuration variable to keogram, startrails, and timelapse archive pages.

* show_thumbnails.php: set "$configFilePrefix"

$configFilePrefix is set so functions.php knows where the configuration file is when called from the archive pages.

* functions.php: fix $onPi setting

* Fix $onPi setting - the ".['onPi']" shouldn't have been there.
* Improve the message when it appears the software hasn't been configured to take into account remote machines.

* index.php: Add sidebarStyle

to allow people to move the left sidebar (or apply any other style they want) so it doesn't cover text on the image.

* configuration.json: add sidebarStyle

* Added version file

* index.php: misc changes

* Added <meta charset="utf-8">   and   <meta name="viewport"...>
* Moved items from  style="xxx" to  class="xxx".
* Removed some type="text/javascript" since that's the default and to make those lines consistent with similar lines.
* Combined a few statements into one   <?php  xxxx ?> block for ease of reading.

* allsky-font.css: add mini-timelapse icon

* Add mini-timelapse font

* configuration.json: add mini-timelapse

Use "no_url" so it doesn't display by default.

* Delete configuration.json

The source for this file is now stored in ~/allsky/config.repo.
When installing the Allsky Website on the Pi, the file will be copied to the correct location.
When installing the Allsky Website on a remote server, users should first execute "cd allsky; website/install.sh --remote" to have this file copied to remote server, THEN install the code on the server.

* allsky.css: temporarily restore to original

Will put back after merging master into this branch.  Right now there are conflicts that need the GitHub desktop to resolve, and I don't have that.

* allsky.css: put back to prior version

The changes from master have been merged into this branch, so restore the branch's file

* allsky.css: save in UNIX format

* controller.js: misc changes

* Use constants for "data.json" and "configuration.json".
* Allow latitude and longitude with, or without N, S, E, W.
* Change wording of auroraforecast scales 0 and 1 to match auroraforcast.is/kp-index.
* Fix some indenting problems.

* allsky.css: make sure info box is above all else

* controller.js: improve reading data.json

* Bug fix: data.json wasn't re-read if the browser window is hidden, which means the next day the data.json file may be marked as "old".  Fix that by checking the status of the file every 5 intervals.  Not sure if 5 is the best number, but it works.
* Updated some comments.
* Only call getHiddenProperty() once since it never changes.
* Removed some unneeded, commented out code.

* controller.js: latitude and longitude bug fixes

* Was calculating substr() wrong - it starts at 0.
* The web page displays $scope.latitude, not config.latitude.  Also applies to longitude.
* Since virtualsky.js, which uses $scope.latitude, requires numbers, set $scope.latitude to a number, but $scope.s_latitude to a string with N, S, E, W.  This requires a change to the configuration.json file to prepend "s_" to the latitude.

* controller.js: set imageHeight

Allow the image height to be set the configuration.json, rather than allsky.css.

* allsky.css: allow easier changing of values

* Added comment at the top describing how users can change the imageHeight.
* No longer encourage users to change allsky.css - it will be overwritten at the next upgrade.

* Support using variable name instead of URL

* This is consistent with what the pop out does.
Initially this will be used to display an icon to view the current image full-size using the "imageName" variable.

Also:
* Change spaces to tabs.
* Check for "false" values, which return "" from v().

* controller.js: get resize working

* Resize in virtualsky.js doesn't work, so we let controller.js do most of the work.  It sets the size of some containers and tells virtualsky.js the new size so it can scale the overlay canvas.  A hack, but it works well.
*

* virtualsky.js: fix resize, plus others

* Added cardinalpoints_fontsize.
* Added the ability for users to specify colors of all the overlay objects.
* Fix resize so it works.
* Only create the objects for position and date if the user wants to see them.

* virtualsky.js: remove test color

* During testing I replaced the color for "cardinal".  This restores it.

* index.php: Handle double quotes in values

* index.php: make user specify ALL fa classes

This gives them more flexibility since they can use "fab" instead "fa" primary class.  Or other changes.
The configuration.json.repo file has been updated to include all the classes.

* try to support PHP 5.3 and earlier

They don't support [] initialization.
Also, fix typo bug in variable name

* virtualsky.js: Allow changing colors

Also, don't use outerWidth/outerHeight since they never change

* show_thumbnails.php: use jquery3.6.0

* use jquery3.6.0

Also, remove camera-info class - it's not needed anymore

* index.php: use bootstrap 5.2.0

Version 3.6.0 isn't supported by bootstrap 3.3.6, so upgrade to bootstrap 5.2.0.

* index.php: change icon for camera info

* index.php: make more generic

* Added "display" field to left and right sections to determine whether or not an item is displayed.
* Added "style" to left and right.
* Added "other" on left so ALL icons can be displayed via configuration.json.

* allsky.css: minor change to right-size popout

* controller.js: add versions, and improve msg

* Add AllskyVersion and AllskyWebsiteVersion.
* Improve the message displayed with the sunset data is old.

* controller.js: s/at/on/

* index.php: 2 bug fixes

* Need to check if $val is an array, since we can't print it.
* Need to set $style before using it.

* created viewSettings.php

* functions.php: bug fix: use array(), not $array()

* allsky.css: s/sidebar/leftSidebar

* index.php: s/sidebar/leftSidebar

* virtualsky-planets.js: jupiter bug fix

Jupiter didn't always appear, and when it did, it sometimes jumped around.
This fix isn't perfect though - going backward 6 days by pressing "=" make it disappear, then reappear at 7 days.  Don't know if a formula is bad or the Jupiter data is bad.

* Add new language files

* master.json: updates from Stuartg

* translate.js: newer version

* index.html: update version

* en.json: updated version

* Add gl.json

* es: updated version

* en.json: restore correct version

Accidently put Spanish version in this file; this commit restores the English version

* en-US.json: not needed - same as en.json

* index.php: don't check for onPi

Let other pages check if it's needed

* Always read config file

onPi is no longer passed on the URL

* functions.php: return 0 if boolean is false

For whatever reason, reading a "false" boolean from a JSON array return "", not 0.  However, reading a "true" value returns a 1.
We want the v() function to return 0 if the value (or default) is false.

* show_thumbnails.php: read config file

Instead of checking if the analyticsTracking.js file is > 50 characters big, read the config file to determine if the file should be included

* functions.php: bug fix: need isset() first

* allsky.css: #starmap_container change

index.php now sets the size of the starmap_container.
Also, fixed how images are centered.

* controller.js: major changes

* controller.js now resizes everything. I couldn't get it to work where virtualsky.js would resize some things and controller.js would resize others.
If you're better at javascript and css, perhaps you can get it to work.
* Renamed some variables to be more descriptive.

* virtualsky.js: do resize overlay

It's now done in controller.js

* index.php: set width of image

* Also, pass in imageBorder.

* viewSettings.php: support two ways

* Support displaying settings in WebUI-like mode or basic mode, depending on whether or not the viewSettings/allskySettings.php file exists (it displays in WebUI mode).

* viewSettings.php: make bootstrap.min.css a link

so it's one less file to upload.

* Create README.txt

* index.php: create directories if needed

The "?check" option is used when called from "allsky/website/install.sh --remote"

* Update version

* Delete NoThumbnail.psd

moved to allsky package

* controller.js: POST_END_OF_NIGHT_DATA gone

Remove references to it.

* viewSettings.php: Make panel header easier to read

This also makes it look like the WebUI.

* Update version, still in dev

* Upscaled logo to fix low res issue

* functions.php: fix typo

* controller.js: fix latitude and longitude

$scope.latitude and $scope.longitude were set to numeric values, but not the values passed to function that creates the overlay.

* functions.php: add get_decoded_json_file()

* Update version

* Update version to official 2023.05.01

* README.md: Mention new Allsky release

* Update README.md

* Update README.md

---------

Co-authored-by: EricClaeys <[email protected]>
Co-authored-by: Thomas Jacquin <[email protected]>
  • Loading branch information
3 people authored May 1, 2023
1 parent 897ea41 commit c9a0bd5
Show file tree
Hide file tree
Showing 30 changed files with 2,478 additions and 926 deletions.
Binary file removed NoThumbnail.psd
Binary file not shown.
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.
30 changes: 30 additions & 0 deletions allsky-font.css
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
Binary file modified allsky-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 83 additions & 31 deletions allsky.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -27,7 +37,13 @@ body {
height: 35px;
}

.personalLink {
text-align: center;
font-size: 150%;
}

.info {
font-size: 90%;
padding: 8px;
position: fixed;
top: 150px;
Expand All @@ -37,23 +53,23 @@ 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;
}

.info ul li i {
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;
Expand All @@ -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 {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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%;
}
Expand All @@ -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%;
}
}

21 changes: 0 additions & 21 deletions config.js

This file was deleted.

Loading

0 comments on commit c9a0bd5

Please sign in to comment.