Merge pull request #13 from miguelcarrascoq/master

docs: add installation instructions to run locally

.gitignore

@@ -0,0 +1 @@
+/node_modules

README.md

@@ -5,55 +5,69 @@
 </div>
 
 # Overview
+
 Upload 360° photos to Google Maps without using Google's app.
 
-The main reason why I created this is because Google Maps isn't a good replacement of the former app. You are only able to upload 360 photos to specific places on the map. With this project, it is possible to upload them at any coordinates.
+The main reason why I created this is because Google Maps isn't a good replacement of the former app. You are only able
+to upload 360 photos to specific places on the map. With this project, it is possible to upload them at any coordinates.
 
 If you want to try it out, there are publicly available instances:
 | **URL** | **Country** | **Status** | **Hosted By** |
 |------------------------------------------------|-------------|------------|---------------|
-| [maps.moomoo.me](https://maps.moomoo.me)         | 🇺🇸         | Up         | @moom0o       |
+| [maps.moomoo.me](https://maps.moomoo.me) | 🇬🇧 | Up | @moom0o |
-| [map.winscloud.net](https://map.winscloud.net) | 🇹🇭          | Up         | @WinsDominoes |
+| [map.winscloud.net](https://map.winscloud.net) | 🇹🇭 | Down | @WinsDominoes |
 
 ## Quick start
+
 In order to get the Google api keys required for the oauth follow these steps:
 
 ### Client ID
-1) Create a new project at https://console.cloud.google.com/
 
-2) Head over to the API library and enable the <a href="https://console.cloud.google.com/apis/library/streetviewpublish.googleapis.com">Street View Publish API</a>
+1. Create a new project at https://console.cloud.google.com/
 
-3) Select 'Create Credentials', select 'User Data', enter any app name/email.
+2. Head over to the API library and enable
+   the <a href="https://console.cloud.google.com/apis/library/streetviewpublish.googleapis.com">Street View Publish
+   API</a>
 
-4) Enable the 'Street View Publish API' scope. You won't need any sensitive scopes.
+3. Select 'Create Credentials', select 'User Data', enter any app name/email.
 
-5) Select 'Web application' for type, and name it anything.
+4. Enable the 'Street View Publish API' scope. You won't need any sensitive scopes.
 
-6) Add http://localhost:7000 to authorized javascript origins. (If you are running on another domain/port, replace localhost)
+5. Select 'Web application' for type, and name it anything.
 
-7) Add http://localhost:7000/auth/ to authorized redirect URIs (If you are running on another domain/port, replace localhost)
+6. Add http://localhost:7000 to authorized javascript origins. (If you are running on another domain/port, replace
+   localhost)
 
-8) You should now copy the Client ID into the config.json file.
+7. Add http://localhost:7000/auth/ to authorized redirect URIs (If you are running on another domain/port, replace
+   localhost)
+
+8. You should now copy the Client ID into the config.json file.
 
 ### Client Secret
-Head to the main credentials screen and click the pencil. (Edit OAuth Client) You will be able to find the Client Secret and copy that to your config.json.
+
+Head to the main credentials screen and click the pencil. (Edit OAuth Client) You will be able to find the Client Secret
+and copy that to your config.json.
 
 ### Consent Screen
-1) Select 'OAuth consent screen', use any name/email
 
-2) Make sure the authorized domain and email is correct, then select 'Save and Continue'.
+1. Select 'OAuth consent screen', use any name/email
 
-3) Make sure the Street View Publish API scope is enabled, if not, add it!
+2. Make sure the authorized domain and email is correct, then select 'Save and Continue'.
 
-4) For test users, add the email address of the account where you want to upload 360 photos.
+3. Make sure the Street View Publish API scope is enabled, if not, add it!
 
-5) **Make sure to also copy the client ID into index.html**, after '&client_id=' and before '&scope', if needed, change the port and domain here as well.
+4. For test users, add the email address of the account where you want to upload 360 photos.
+
+5. **Make sure to also copy the client ID into index.html**, after '&client_id=' and before '&scope', if needed, change
+   the port and domain here as well.
 
 ### Config File
-There are many options in the config file that might confuse you, so here's a simple guide (I think?) to help you get through it.
+
+There are many options in the config file that might confuse you, so here's a simple guide (I think?) to help you get
+through it.
 
 | **Keys**         | **Default values**         | **Usage**                                                                                                                                     |
-|------------------|----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
+| ---------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | `https`          | `false` (boolean)          | This is an option whether if you want to enable https or not, this uses boolean values. `false` = http:// and `true` = https://               |
 | `host`           | `localhost` (string)       | Your host or domain, if you are hosting on a local machine, set this to `localhost`, if you are hosting this publicly, set it to your domain. |
 | `port`           | `7000` (integer) or `null` | Your port, if are running this as a public instance, set this to `null`                                                                       |
@@ -61,13 +75,16 @@ There are many options in the config file that might confuse you, so here's a si
 | `clientId`       | string                     | Paste your Google OAuth Client ID here, check the previous steps on how to get it.                                                            |
 | `clientSecret`   | string                     | Paste your Google OAuth Client Secret ID here, check the previous steps on how to get it.                                                     |
 
-**INFO: Your authorized JavaScript origins and authorized redirect URIs should be the same as the one you have set in your config file.**
+**INFO: Your authorized JavaScript origins and authorized redirect URIs should be the same as the one you have set in
+your config file.**
 
 **Scenario 1 - Public Instance**
 
-This example is for those who are hosting a public instance, your https, host and port would look something like this. Change `maps.moomoo.me` to your domain.
+This example is for those who are hosting a public instance, your https, host and port would look something like this.
+Change `maps.moomoo.me` to your domain.
 
 You must use a nginx reverse proxy pointing to localhost:7000 for this to work.
+
 ```
 {
   "https": true,
@@ -75,13 +92,16 @@ You must use a nginx reverse proxy pointing to localhost:7000 for this to work.
   "port": 7000
 }
 ```
+
 Your **authorized JavaScript origin** would be: `https://maps.moomoo.me`
 
 Your **authorized redirect URIs** would be: `https://maps.moomoo.me/auth/` (don't forget the slash after `auth`)
 
 **Scenario 2 - Private Instance**
 
-This example is for those who are running PhotoSphereStudio on a local machine, your https, host and port would look something like this. 
+This example is for those who are running PhotoSphereStudio on a local machine, your https, host and port would look
+something like this.
+
 ```
 {
     "https": false,
@@ -89,9 +109,34 @@ This example is for those who are running PhotoSphereStudio on a local machine,
     "port" 7000
 }
 ```
+
 Your **authorized JavaScript origin** would be: `http://localhost:7000`
 
 Your **authorized redirect URIs** would be: `http://localhost:7000/auth/` (don't forget the slash after `auth`)
 
+## Installation
+
+1. Clone the repository
+
+```bash
+git clone https://github.com/moom0o/PhotoSphereStudio.git
+```
+
+2. Install the dependencies
+
+```bash
+npm install
+```
+
+3. Update the `config.json` file in the root directory of the project and fill it with the required information (clientId, clientSecret, etc.)
+
+4. Start the server
+
+```bash
+node index.js
+```
+
 ## Support
-If you have any questions about how to set this up or about the source code, feel free to ask either **moom0o** (moo#0529 on Discord) or **WinsDominoes** (Win#7206 on Discord). 
+
+If you have any questions about how to set this up or about the source code, feel free to ask either **moom0o** (
+moo#0529 on Discord) or **WinsDominoes** (Win#7206 on Discord).

index.js

@@ -59,7 +59,8 @@ app.use(favicon(__dirname + '/public/assets/icons/favicon.ico'));
 app.get('/', function (req, res) {
     res.render('pages/index', {
         full_url: full_url,
-        clientId: clientId
+        clientId: clientId,
+        domain: config.host
     });
 })
 

package.json

@@ -13,6 +13,7 @@
     "body-parser": "^1.20.1",
     "cookie-parser": "^1.4.6",
     "ejs": "^3.1.9",
+    "exif-js": "^2.3.0",
     "express": "^4.18.2",
     "express-fileupload": "^1.4.0",
     "open": "^8.4.0",

public/assets/drag-and-drop.js

@@ -1,5 +1,9 @@
-function convertDMSToDD([degrees, minutes, seconds]) {
+function convertDMSToDD([degrees, minutes, seconds], ref) {
-  return degrees + minutes / 60 + seconds / 3600;
+    decimal_degrees = degrees + minutes / 60 + seconds / 3600;
+    if (ref == 'S' || ref == 'W') {
+        decimal_degrees = -decimal_degrees;
+    }
+    return decimal_degrees;
 }
 
 function readURL(input) {
@@ -23,8 +27,14 @@ function readURL(input) {
                     var allMetaData = EXIF.getAllTags(this);
                     var allMetaDataSpan = document.getElementById('allMetaDataSpan');
                     //   allMetaDataSpan.innerHTML = JSON.stringify(allMetaData, null, '\t');
-          var lat = convertDMSToDD(EXIF.getTag(this, 'GPSLatitude'));
+                    var lat = convertDMSToDD(
-          var long = -convertDMSToDD(EXIF.getTag(this, 'GPSLongitude')); // Negative because it's west longitude
+                        EXIF.getTag(this, 'GPSLatitude'),
+                        EXIF.getTag(this, 'GPSLatitudeRef')
+                    );
+                    var long = convertDMSToDD(
+                        EXIF.getTag(this, 'GPSLongitude'),
+                        EXIF.getTag(this, 'GPSLongitudeRef')
+                    );
                     $('#lat').val(lat);
                     $('#long').val(long);
                     console.log(`lat: ${lat}, long: ${long}`);

public/assets/style.css

@@ -2,6 +2,7 @@ body {
     margin: 0;
     padding: 0;
 }
+
 button {
     border: none;
     border-radius: 2px;
@@ -14,39 +15,48 @@ button {
     box-shadow: 0 0 4px #999;
     outline: none;
 }
+
 pre {
     white-space: pre-line;
 }
+
 form, input, label, p {
     color: white !important;
 }
+
 #icon {
     max-width: 45px;
     height: auto;
     border-radius: 50%;
 }
+
 .column {
     flex-grow: 1;
     display: inline-block;
 }
+
 /* Ripple effect */
 .ripple {
     background-position: center;
     transition: background 0.8s;
 }
+
 .ripple:hover {
     background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
 }
+
 .ripple:active {
     background-color: #6eb9f7;
     background-size: 100%;
     transition: background 0s;
 }
+
 /* DRAG AND DROP */
 .file-upload {
     width: 100%;
     margin: 0 auto;
 }
+
 .file-upload-btn {
     width: 100%;
     margin: 0;
@@ -61,20 +71,24 @@ form, input, label, p {
     text-transform: uppercase;
     font-weight: 700;
 }
+
 .file-upload-btn:hover {
     background: #2175f3;
     color: #ffffff;
     transition: all .2s ease;
     cursor: pointer;
 }
+
 .file-upload-btn:active {
     border: 0;
     transition: all .2s ease;
 }
+
 .file-upload-content {
     display: none;
     text-align: center;
 }
+
 .file-upload-input {
     position: absolute;
     margin: 0;
@@ -85,34 +99,41 @@ form, input, label, p {
     opacity: 0;
     cursor: pointer;
 }
+
 .image-upload-wrap {
     margin-top: 20px;
     border: 4px dashed #2196f3;
     position: relative;
 }
+
 .image-dropping, .image-upload-wrap:hover {
     background-color: #2196f3;
     border: 4px dashed #ffffff;
 }
+
 .image-title-wrap {
     padding: 0 15px 15px 15px;
     color: #222;
 }
+
 .drag-text {
     text-align: center;
 }
+
 .drag-text .buttonText {
     font-weight: 100;
     text-transform: uppercase;
     color: #fff;
     padding: 60px 0;
 }
+
 .file-upload-image {
     max-height: 200px;
     max-width: 200px;
     margin: auto;
     padding: 20px;
 }
+
 .remove-image {
     width: 200px;
     margin: 0;
@@ -127,12 +148,14 @@ form, input, label, p {
     text-transform: uppercase;
     font-weight: 700;
 }
+
 .remove-image:hover {
     background: #c13b2a;
     color: #ffffff;
     transition: all .2s ease;
     cursor: pointer;
 }
+
 .remove-image:active {
     border: 0;
     transition: all .2s ease;

views/pages/error.ejs

@@ -14,6 +14,7 @@
 
             <p class="h3 text-danger">
                 <%= errorMessage %>
+                If you get a NOT_FOUND error, try converting your image to JPEG.
             </p>
         </div>
 

views/pages/upload.ejs

@@ -3,24 +3,31 @@
 <div class="column shadow-sm p-3 m-4 bg-dark-3 text-light">
     <div align="left">
         <h1>Upload</h1>
-        <p>This page will allow you to upload photo spheres to Google Maps after the <i>idiots</i> at Google removed their perfectly working StreetView app.</p>
+        <p>This page will allow you to upload photo spheres to Google Maps after the <i>idiots</i> at Google removed
+            their perfectly working StreetView app.</p>
 
         <div class="alert alert-info" role="alert">
-            <span>Images <b>must</b> have the proper 360 degree file properties, you will need to figure out how to add this metadata. <b>Google Pixel photosphere photos work perfectly</b>, I have yet to figure out how to get my DJI drone 360 photos working.</span>
+            <span><b>Use the Hugin program to export DJI Drone PhotoSpheres.</b> Google has <b>removed</b> PhotoSphere from Pixel Camera 9.1 and later, use <a href="https://www.apkmirror.com/apk/google-inc/camera/camera-9-0-115-561695573-37-release/">APKMirror</a> to download older versions!</span>
         </div>
 
         <div class="alert alert-warning" role="alert">
             <span>Latitude and Longitude is <b>not required</b> if your photo already contains location data, however if it doesn't, you can use the map below to pinpoint your location</span>
         </div>
 
+        <div class="alert alert-warning" role="alert">
+            <span>If your image doesn't contain required metadata, add it yourself with exifdata. .\exiftool.exe -ProjectionType=equirectangular -UsePanoramaViewer=true file.jpeg</span>
+
         <form name="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
             <div class="form-group">
                 <legend>Upload a 360 image</legend>
                 <div class="file-upload">
-                        <button class="file-upload-btn" type="button" onclick="$('.file-upload-input').trigger('click')">Add Image</button>
+                    <button class="file-upload-btn" type="button" onclick="$('.file-upload-input').trigger('click')">Add
+                        Image
+                    </button>
 
                     <div class="image-upload-wrap">
-                            <input class="file-upload-input" type='file' id="file" name="file" onchange="readURL(this);" accept="image/png, image/jpeg" />
+                        <input class="file-upload-input" type='file' id="file" name="file" onchange="readURL(this);"
+                               accept="image/png, image/jpeg"/>
                         <div class="drag-text">
 
                             <div class="buttonText">
@@ -39,7 +46,8 @@
                     <div class="file-upload-content">
                         <img class="file-upload-image" src="" alt="Uploaded Image"/>
                         <div class="image-title-wrap">
-                                    <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button>
+                            <button type="button" onclick="removeUpload()" class="remove-image">Remove <span
+                                        class="image-title">Uploaded Image</span></button>
                         </div>
                     </div>
                 </div>
@@ -51,11 +59,13 @@
             </div>
             <div class="form-group">
                 <label for="lat" class="text-light">Latitude</label>
-                    <input type="text" id="lat" name="lat" placeholder="Latitude coordinates" class="form-control" required />
+                <input type="text" id="lat" name="lat" placeholder="Latitude coordinates" class="form-control"
+                       required/>
             </div>
             <div class="form-control">
                 <label for="long" class="text-light">Longitude</label>
-                    <input type="text" id="long" name="long" placeholder="Longitude coordinates" class="form-control" required />
+                <input type="text" id="long" name="long" placeholder="Longitude coordinates" class="form-control"
+                       required/>
             </div>
 
             <button type="submit" class="ripple">UPLOAD</button>

views/partials/footer.ejs

@@ -1,14 +1,13 @@
-    
+<p class="text-center text-light">Source Code: <a href="https://github.com/moom0o/PhotoSphereStudio/">Github</a> - Made
-    
+    by <a href="https://github.com/moom0o">moom0o</a> & <a href="https://github.com/WinsDominoes">Win</a></p>
-    
-    <p class="text-center text-light">Source Code: <a href="https://github.com/moom0o/PhotoSphereStudio/">Github</a> - Made by <a href="https://github.com/moom0o">moom0o</a> & <a href="https://github.com/WinsDominoes">Win</a></p>
 
 </div>
 
 <script src="/assets/drag-and-drop.js"></script>
 
 <!-- LEAFLET JS -->
-    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
+<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
 <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
 <script src="/assets/leaflet/js/map.js"></script>
 
@@ -19,7 +18,9 @@
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 
 <!-- EXIF JS -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js" integrity="sha512-bE9sOOprru4D2nRKDQSNvhdxw47Jd0r2s7QThKB/KkU5HEPuxsk9DbK+fYIMCYlCsXkwp6M87vj84sAtYWqxvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"
+        integrity="sha512-bE9sOOprru4D2nRKDQSNvhdxw47Jd0r2s7QThKB/KkU5HEPuxsk9DbK+fYIMCYlCsXkwp6M87vj84sAtYWqxvw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 <!-- Then Material JavaScript on top of Bootstrap JavaScript -->
 <script src="/assets/material/material.min.js"></script>

views/partials/header.ejs

@@ -9,17 +9,20 @@
     <link rel="stylesheet" href="/assets/style.css">
 
     <!-- Add Material font (Roboto) and Material icon as needed -->
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700"
+          rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
     <!-- Add Material CSS, replace Bootstrap CSS -->
     <link href="/assets/material/material.min.css" rel="stylesheet">
 
     <!-- GOOGLE ICONS -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/>
 
     <!-- LEAFLET FOR MAP -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+          integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css"/>
 
     <title>PhotoSphereStudio - Upload 360° Photos to Google Maps</title>
@@ -33,7 +36,8 @@
                     <img src="/assets/icons/icon.png" alt="Icon" id="icon">    
                     PhotoSphereStudio
                 </span></a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
     </nav>