winsdominoes
/
PhotoSphereStudio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reformat and fix domain error

This commit is contained in:
moo 2023-06-27 11:39:15 -04:00
parent 3b1e0e0c35
commit c3924c742e
12 changed files with 297 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
README.md
View File

@ -5,23 +5,29 @@
</div> </div>
# Overview # Overview
Upload 360° photos to Google Maps without using Google's app. 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: If you want to try it out, there are publicly available instances:
| **URL** | **Country** | **Status** | **Hosted By** | | **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) | 🇹🇭 | Up | @WinsDominoes |
## Quick start ## Quick start
In order to get the Google api keys required for the oauth follow these steps: In order to get the Google api keys required for the oauth follow these steps:
### Client ID ### Client ID
1) Create a new project at https://console.cloud.google.com/ 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> 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>
3) Select 'Create Credentials', select 'User Data', enter any app name/email. 3) Select 'Create Credentials', select 'User Data', enter any app name/email.
@ -29,16 +35,21 @@ In order to get the Google api keys required for the oauth follow these steps:
5) Select 'Web application' for type, and name it anything. 5) Select 'Web application' for type, and name it anything.
6) Add http://localhost:7000 to authorized javascript origins. (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)
7) Add http://localhost:7000/auth/ to authorized redirect URIs (If you are running on another domain/port, replace localhost) 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. 8) You should now copy the Client ID into the config.json file.
### Client Secret ### 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 ### Consent Screen
1) Select 'OAuth consent screen', use any name/email 1) Select 'OAuth consent screen', use any name/email
2) Make sure the authorized domain and email is correct, then select 'Save and Continue'. 2) Make sure the authorized domain and email is correct, then select 'Save and Continue'.
@ -47,12 +58,16 @@ Head to the main credentials screen and click the pencil. (Edit OAuth Client) Yo
4) For test users, add the email address of the account where you want to upload 360 photos. 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. 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 ### 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.
| **Keys** | **Default values** | **Usage** | 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:// | | `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. | | `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. |
@ -61,13 +76,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. | | `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. | | `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** **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. You must use a nginx reverse proxy pointing to localhost:7000 for this to work.
``` ```
{ {
"https": true, "https": true,
@ -75,13 +93,16 @@ You must use a nginx reverse proxy pointing to localhost:7000 for this to work.
"port": 7000 "port": 7000
} }
``` ```
Your **authorized JavaScript origin** would be: `https://maps.moomoo.me` 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`) Your **authorized redirect URIs** would be: `https://maps.moomoo.me/auth/` (don't forget the slash after `auth`)
**Scenario 2 - Private Instance** **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, "https": false,
@ -89,9 +110,12 @@ This example is for those who are running PhotoSphereStudio on a local machine,
"port" 7000 "port" 7000
} }
``` ```
Your **authorized JavaScript origin** would be: `http://localhost: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`) Your **authorized redirect URIs** would be: `http://localhost:7000/auth/` (don't forget the slash after `auth`)
## Support ## 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).

2
config.json
View File

@ -1,6 +1,6 @@
{ {
"https": false, "https": false,
"host": "localhost", "host": "localhost",
"port": 7000, "port": 7000,
"openWebBrowser": false, "openWebBrowser": false,
"clientId": "XXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com", "clientId": "XXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com",

17
index.js
View File

@ -6,13 +6,13 @@ const openWebBrowser = config.openWebBrowser; // Set to false if running as a se
let full_url = ""; let full_url = "";
let protocol = ""; let protocol = "";
if(config.https) { if (config.https) {
protocol = "https://" protocol = "https://"
} else { } else {
protocol = "http://" protocol = "http://"
} }
if(port && !config.https) { if (port && !config.https) {
full_url = protocol + host + ":" + port full_url = protocol + host + ":" + port
} else { } else {
full_url = protocol + host full_url = protocol + host
@ -59,11 +59,12 @@ app.use(favicon(__dirname + '/public/assets/icons/favicon.ico'));
app.get('/', function (req, res) { app.get('/', function (req, res) {
res.render('pages/index', { res.render('pages/index', {
full_url: full_url, full_url: full_url,
clientId: clientId clientId: clientId,
domain: config.host
}); });
}) })
app.get('/upload', function(req, res){ app.get('/upload', function (req, res) {
res.render('pages/upload'); res.render('pages/upload');
}) })
@ -116,7 +117,7 @@ app.post('/upload', function (req, res) {
}; };
request(options, function (error) { request(options, function (error) {
if (error) { if (error) {
console.log(error) console.log(error)
res.status(500).render('pages/error', { res.status(500).render('pages/error', {
errorCode: 500, errorCode: 500,
@ -175,9 +176,9 @@ app.post('/upload', function (req, res) {
errorCode: JSON.parse(response.body)["error"]["code"], errorCode: JSON.parse(response.body)["error"]["code"],
errorStatus: JSON.parse(response.body)["error"]["status"], errorStatus: JSON.parse(response.body)["error"]["status"],
errorMessage: JSON.parse(response.body)["error"]["message"], errorMessage: JSON.parse(response.body)["error"]["message"],
response: JSON.stringify(JSON.parse(response.body), null, 4), response: JSON.stringify(JSON.parse(response.body), null, 4),
}); });
} else { } else {
let shareLink = JSON.parse(response.body)["shareLink"] let shareLink = JSON.parse(response.body)["shareLink"]
res.status(200).render('pages/success', { res.status(200).render('pages/success', {
status: JSON.parse(response.body)["mapsPublishStatus"], status: JSON.parse(response.body)["mapsPublishStatus"],
@ -205,7 +206,7 @@ app.get('/auth', function (req, res) {
request(options, function (error, response) { request(options, function (error, response) {
if (error) console.log(error) && res.send("Error: Check console"); if (error) console.log(error) && res.send("Error: Check console");
let body = JSON.parse(response.body) let body = JSON.parse(response.body)
if(body["error"] || !body["access_token"]){ if (body["error"] || !body["access_token"]) {
res.redirect('/') res.redirect('/')
} else { } else {
res.cookie('oauth', JSON.parse(response.body)["access_token"], { res.cookie('oauth', JSON.parse(response.body)["access_token"], {

1
package.json
View File

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

86
public/assets/drag-and-drop.js
View File

@ -1,63 +1,63 @@
function convertDMSToDD([degrees, minutes, seconds], ref) { function convertDMSToDD([degrees, minutes, seconds], ref) {
decimal_degrees = degrees + minutes / 60 + seconds / 3600; decimal_degrees = degrees + minutes / 60 + seconds / 3600;
if (ref == 'S' || ref == 'W') { if (ref == 'S' || ref == 'W') {
decimal_degrees = -decimal_degrees; decimal_degrees = -decimal_degrees;
} }
return decimal_degrees; return decimal_degrees;
} }
function readURL(input) { function readURL(input) {
if (input.files && input.files[0]) { if (input.files && input.files[0]) {
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function (e) { reader.onload = function (e) {
$('.image-upload-wrap').hide(); $('.image-upload-wrap').hide();
$('.file-upload-image').attr('src', e.target.result); $('.file-upload-image').attr('src', e.target.result);
$('.file-upload-content').show(); $('.file-upload-content').show();
$('.image-title').html(input.files[0].name); $('.image-title').html(input.files[0].name);
var img = document.createElement('img'); var img = document.createElement('img');
img.src = e.target.result; img.src = e.target.result;
// Render thumbnail. // Render thumbnail.
img.onload = function () { img.onload = function () {
EXIF.getData(img, function () { EXIF.getData(img, function () {
var allMetaData = EXIF.getAllTags(this); var allMetaData = EXIF.getAllTags(this);
var allMetaDataSpan = document.getElementById('allMetaDataSpan'); var allMetaDataSpan = document.getElementById('allMetaDataSpan');
// allMetaDataSpan.innerHTML = JSON.stringify(allMetaData, null, '\t'); // allMetaDataSpan.innerHTML = JSON.stringify(allMetaData, null, '\t');
var lat = convertDMSToDD( var lat = convertDMSToDD(
EXIF.getTag(this, 'GPSLatitude'), EXIF.getTag(this, 'GPSLatitude'),
EXIF.getTag(this, 'GPSLatitudeRef') EXIF.getTag(this, 'GPSLatitudeRef')
); );
var long = convertDMSToDD( var long = convertDMSToDD(
EXIF.getTag(this, 'GPSLongitude'), EXIF.getTag(this, 'GPSLongitude'),
EXIF.getTag(this, 'GPSLongitudeRef') EXIF.getTag(this, 'GPSLongitudeRef')
); );
$('#lat').val(lat); $('#lat').val(lat);
$('#long').val(long); $('#long').val(long);
console.log(`lat: ${lat}, long: ${long}`); console.log(`lat: ${lat}, long: ${long}`);
}); });
}; };
}; };
reader.readAsDataURL(input.files[0]); reader.readAsDataURL(input.files[0]);
} else { } else {
removeUpload(); removeUpload();
} }
} }
function removeUpload() { function removeUpload() {
$('.file-upload-input').replaceWith($('.file-upload-input').clone()); $('.file-upload-input').replaceWith($('.file-upload-input').clone());
$('.file-upload-content').hide(); $('.file-upload-content').hide();
$('.image-upload-wrap').show(); $('.image-upload-wrap').show();
} }
$('.image-upload-wrap').bind('dragover', function () { $('.image-upload-wrap').bind('dragover', function () {
$('.image-upload-wrap').addClass('image-dropping'); $('.image-upload-wrap').addClass('image-dropping');
}); });
$('.image-upload-wrap').bind('dragleave', function () { $('.image-upload-wrap').bind('dragleave', function () {
$('.image-upload-wrap').removeClass('image-dropping'); $('.image-upload-wrap').removeClass('image-dropping');
}); });

12
public/assets/leaflet/js/map.js
View File

@ -8,10 +8,10 @@ var defaultIcon = L.icon({
iconUrl: '/assets/icons/marker-icon.png', iconUrl: '/assets/icons/marker-icon.png',
shadowUrl: '/assets/icons/marker-shadow.png', shadowUrl: '/assets/icons/marker-shadow.png',
}); });
// Creating a map object // Creating a map object
let map = new L.map('map', mapOptions); let map = new L.map('map', mapOptions);
// Creating a Layer object // Creating a Layer object
let layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { let layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@ -25,15 +25,15 @@ map.addLayer(layer);
// Marker // Marker
let marker = null; let marker = null;
map.on('click', (event)=> { map.on('click', (event) => {
if(marker !== null){ if (marker !== null) {
map.removeLayer(marker); map.removeLayer(marker);
} }
marker = L.marker([event.latlng.lat , event.latlng.lng], {icon: defaultIcon}).addTo(map); marker = L.marker([event.latlng.lat, event.latlng.lng], {icon: defaultIcon}).addTo(map);
document.getElementById('lat').value = event.latlng.lat; document.getElementById('lat').value = event.latlng.lat;
document.getElementById('long').value = event.latlng.lng; document.getElementById('long').value = event.latlng.lng;
}) })

201
public/assets/style.css
View File

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

4
views/pages/error.ejs
View File

@ -13,10 +13,10 @@
</p> </p>
<p class="h3 text-danger"> <p class="h3 text-danger">
<%= errorMessage %> <%= errorMessage %>
</p> </p>
</div> </div>
<div class="debugContainer"> <div class="debugContainer">
<details> <details>

4
views/pages/success.ejs
View File

@ -22,9 +22,9 @@
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<span>You may have to wait awhile after uploading for Google to process the image.</span> <span>You may have to wait awhile after uploading for Google to process the image.</span>
</div> </div>
</div> </div>
<div class="debugContainer"> <div class="debugContainer">
<details> <details>

81
views/pages/upload.ejs
View File

@ -3,68 +3,75 @@
<div class="column shadow-sm p-3 m-4 bg-dark-3 text-light"> <div class="column shadow-sm p-3 m-4 bg-dark-3 text-light">
<div align="left"> <div align="left">
<h1>Upload</h1> <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"> <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>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>
</div> </div>
<div class="alert alert-warning" role="alert"> <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> <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>
<form name="uploadForm" action="/upload" method="POST" enctype="multipart/form-data"> <form name="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
<div class="form-group"> <div class="form-group">
<legend>Upload a 360 image</legend> <legend>Upload a 360 image</legend>
<div class="file-upload"> <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
<div class="image-upload-wrap"> </button>
<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"> <div class="image-upload-wrap">
<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">
<span class="material-symbols-outlined" style="font-size: 5vw;"> <span class="material-symbols-outlined" style="font-size: 5vw;">
upload upload
</span> </span>
<h3>Drag and drop a file or select add Image</h3>
</div> <h3>Drag and drop a file or select add Image</h3>
</div> </div>
</div> </div>
<div class="file-upload-content"> </div>
<img class="file-upload-image" src="" alt="Uploaded Image" /> <div class="file-upload-content">
<div class="image-title-wrap"> <img class="file-upload-image" src="" alt="Uploaded Image"/>
<button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button> <div class="image-title-wrap">
</div> <button type="button" onclick="removeUpload()" class="remove-image">Remove <span
class="image-title">Uploaded Image</span></button>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="map" class="text-light">Map</label> <label for="map" class="text-light">Map</label>
<div id="map" class="leaflet-container" style="max-width: 100%; height: 500px"></div> <div id="map" class="leaflet-container" style="max-width: 100%; height: 500px"></div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="lat" class="text-light">Latitude</label> <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"
</div> required/>
<div class="form-control"> </div>
<label for="long" class="text-light">Longitude</label> <div class="form-control">
<input type="text" id="long" name="long" placeholder="Longitude coordinates" class="form-control" required /> <label for="long" class="text-light">Longitude</label>
</div> <input type="text" id="long" name="long" placeholder="Longitude coordinates" class="form-control"
required/>
</div>
<button type="submit" class="ripple">UPLOAD</button> <button type="submit" class="ripple">UPLOAD</button>
</form> </form>
</div> </div>
</div> </div>
<script> <script>
</script> </script>
<%- include('../partials/footer'); %> <%- include('../partials/footer'); %>

43
views/partials/footer.ejs
View File

@ -1,27 +1,28 @@
<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> </div>
<!-- LEAFLET JS --> <script src="/assets/drag-and-drop.js"></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>
<!-- Optional JavaScript --> <!-- LEAFLET JS -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="/assets/leaflet/js/map.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>
<!-- Then Material JavaScript on top of Bootstrap JavaScript --> <!-- Optional JavaScript -->
<script src="/assets/material/material.min.js"></script> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<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>
<!-- Then Material JavaScript on top of Bootstrap JavaScript -->
<script src="/assets/material/material.min.js"></script>
</body> </body>
</html> </html>

30
views/partials/header.ejs
View File

@ -9,34 +9,38 @@
<link rel="stylesheet" href="/assets/style.css"> <link rel="stylesheet" href="/assets/style.css">
<!-- Add Material font (Roboto) and Material icon as needed --> <!-- 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"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Add Material CSS, replace Bootstrap CSS --> <!-- Add Material CSS, replace Bootstrap CSS -->
<link href="/assets/material/material.min.css" rel="stylesheet"> <link href="/assets/material/material.min.css" rel="stylesheet">
<!-- GOOGLE ICONS --> <!-- 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 --> <!-- 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"
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.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> <title>PhotoSphereStudio - Upload 360° Photos to Google Maps</title>
</head> </head>
<body class="bg-dark-2"> <body class="bg-dark-2">
<header> <header>
<nav class="navbar navbar-expand-lg navbar-dark bg-info"> <nav class="navbar navbar-expand-lg navbar-dark bg-info">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
<span> <span>
<img src="/assets/icons/icon.png" alt="Icon" id="icon"> <img src="/assets/icons/icon.png" alt="Icon" id="icon">
PhotoSphereStudio PhotoSphereStudio
</span></a> </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"
<span class="navbar-toggler-icon"></span> aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
</nav> </button>
</header> </nav>
</header>
<div align="center"> <div align="center">