mirror of
https://github.com/TheGreyDiamond/open360viewer.git
synced 2026-03-31 19:30:24 +02:00
Finally some cool ui
This commit is contained in:
TheGreyDiamond
3
src/main.css
Normal file
3
src/main.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
43
src/main.js
Normal file
43
src/main.js
Normal file
@@ -0,0 +1,43 @@
|
||||
const { ipcRenderer, ipcMain } = require("electron");
|
||||
|
||||
ipcRenderer.on("FileData", function (event, data) {
|
||||
console.log(data);
|
||||
if (data.canceled == false) {
|
||||
// newPano(data.filePaths[0])
|
||||
document.getElementById("fakeDropzone").style.display = "none";
|
||||
document.getElementById("loadingBig").style.display = "block";
|
||||
document.getElementById("state").innerHTML =
|
||||
"Loading file. If this stays empty try another file.";
|
||||
loadImageFromSource(data.filePaths[0]);
|
||||
}
|
||||
});
|
||||
|
||||
function openFile() {
|
||||
ipcRenderer.sendSync("synchronous-message", "openFile");
|
||||
}
|
||||
|
||||
var viewer = new Marzipano.Viewer(document.getElementById("pano"));
|
||||
function newPano(path) {
|
||||
var sourceIm = Marzipano.ImageUrlSource.fromString(path);
|
||||
// Create scene.
|
||||
var scene = viewer.createScene({
|
||||
source: sourceIm,
|
||||
geometry: geometry,
|
||||
view: view,
|
||||
pinFirstLevel: true,
|
||||
});
|
||||
scene.switchTo();
|
||||
setTimeout(function () {
|
||||
scene.switchTo()
|
||||
}, 20);
|
||||
ipcRenderer.sendSync("synchronous-message", "resize");
|
||||
}
|
||||
|
||||
var geometry = new Marzipano.EquirectGeometry([{ width: 4000 }]);
|
||||
|
||||
// Create view.
|
||||
var limiter = Marzipano.RectilinearView.limit.traditional(
|
||||
4000,
|
||||
(120 * Math.PI) / 180
|
||||
);
|
||||
var view = new Marzipano.RectilinearView({ yaw: Math.PI }, limiter);
|
||||
23
src/ui_templates/about.html
Normal file
23
src/ui_templates/about.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Enlight - Starting</title>
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
||||
<link href="../static/default.css" rel="stylesheet"/>
|
||||
<link href="../static/fontawesome-free-5.15.1-web/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="">
|
||||
<center>
|
||||
|
||||
<!--<img src="static/icon.png" alt="Logo" height="40px"></img>-->
|
||||
<h1>360 Viewer </h1></center>
|
||||
<h3 id="current">1.0.0</h3>
|
||||
<h4>Made by TheGreydiamond.</h4>
|
||||
<small style="padding: 1px; margin: 0px;">
|
||||
We are using node <script>document.write(process.versions.node)</script>,
|
||||
Chrome <script>document.write(process.versions.chrome)</script>,
|
||||
and Electron <script>document.write(process.versions.electron)</script>.
|
||||
</small>
|
||||
</body>
|
||||
</html>
|
||||
146
src/ui_templates/index.html
Normal file
146
src/ui_templates/index.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>360 Viewer</title>
|
||||
<script src="../../node_modules/marzipano/dist/marzipano.js">
|
||||
</script>
|
||||
<link href="../output.css" rel="stylesheet">
|
||||
<link href="../../static/fontawesome-free-5.15.1-web/css/all.css" rel="stylesheet">
|
||||
<script src="../../node_modules/@themesberg/flowbite/dist/flowbite.bundle.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="dark:bg-gray-800">
|
||||
<center>
|
||||
<h1 id="state" style="display: none;"></h1>
|
||||
<div id="fakeDropzone"
|
||||
class="border-4 rounded-lg border-dashed border-gray-700 dark:border-white dark:text-white w-96 mt-12">
|
||||
<i class="far fa-folder-open text-2xl mt-6"></i><br>
|
||||
<a class="text-lg">Drag & Drop a file here</a><br>
|
||||
<des class="text-gray-700">or</des><br>
|
||||
<button onclick="openFile()" type="button"
|
||||
class="z-40 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Browse
|
||||
Files</button>
|
||||
</div>
|
||||
<div id="loadingBig" style="display: none;">
|
||||
<svg class="animate-spin h-5 w-5 h-24 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" id="loadingSpinner">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</center>
|
||||
|
||||
<div id="pano">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
document.getElementById("pano").style.display = "none";
|
||||
document.addEventListener('drop', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
document.getElementById("fakeDropzone").style.display = "none";
|
||||
document.getElementById("loadingBig").style.display = "block";
|
||||
document.getElementById("state").innerHTML = "Loading file. If this stays empty try another file."
|
||||
|
||||
const superFile = event.dataTransfer.files[0].path;
|
||||
loadImageFromSource(superFile)
|
||||
});
|
||||
|
||||
document.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
document.addEventListener('dragenter', (event) => {
|
||||
console.log('File is in the Drop Space');
|
||||
});
|
||||
|
||||
document.addEventListener('dragleave', (event) => {
|
||||
console.log('File has left the Drop Space');
|
||||
});
|
||||
|
||||
function loadImageFromSource(path) {
|
||||
testImage(path,
|
||||
function (e, suc) {
|
||||
if (suc == "success") {
|
||||
document.getElementById("pano").style.display = "block";
|
||||
setTimeout(function() {
|
||||
newPano(path)
|
||||
}, 50);
|
||||
|
||||
}
|
||||
else {
|
||||
document.getElementById("state").innerHTML = "Load failed."
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function testImage(url, callback, timeout) {
|
||||
timeout = timeout || 5000;
|
||||
var timedOut = false, timer;
|
||||
var img = new Image();
|
||||
img.onerror = img.onabort = function () {
|
||||
if (!timedOut) {
|
||||
clearTimeout(timer);
|
||||
callback(url, "error");
|
||||
}
|
||||
};
|
||||
img.onload = function () {
|
||||
if (!timedOut) {
|
||||
clearTimeout(timer);
|
||||
callback(url, "success");
|
||||
}
|
||||
};
|
||||
img.src = url;
|
||||
timer = setTimeout(function () {
|
||||
timedOut = true;
|
||||
// reset .src to invalid URL so it stops previous
|
||||
// loading, but doesn't trigger new load
|
||||
img.src = "//!!!!/test.jpg";
|
||||
document.getElementById("state").innerHTML = "Load failed."
|
||||
callback(url, "timeout");
|
||||
}, timeout);
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="../main.js"></script>
|
||||
<style>
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
-webkit-touch-callout: none;
|
||||
-ms-content-zooming: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#pano {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user