Skip to content

Commit

Permalink
Create PAP.html
Browse files Browse the repository at this point in the history
  • Loading branch information
dgrosen authored Sep 21, 2024
1 parent 09d3da3 commit 674c536
Showing 1 changed file with 207 additions and 0 deletions.
207 changes: 207 additions & 0 deletions PAP.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenFlexure Viewer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.0/openseadragon.min.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
#viewer {
width: 100%;
height: 100%;
position: absolute;
}
#toolbar {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.5);
padding: 10px;
border-radius: 5px;
z-index: 1000;
}
.tool-button {
background-color: #C5247F;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
#info-panel {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.7);
padding: 5px;
border-radius: 1px;
z-index: 1000;
}
#upload-container {
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 5px;
z-index: 1000;
}
#image-upload {
display: none;
}
#upload-label {
background-color: #C5247F;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
#upload-label:hover {
background-color: #007B9A;
}
#filename-display {
margin-top: 10px;
font-style: italic;
}
</style>
</head>
<body>

<div id="viewer"></div>

<div id="toolbar">
<button id="zoom-in" class="tool-button">Zoom In</button>
<button id="zoom-out" class="tool-button">Zoom Out</button>
<button id="home" class="tool-button">Full View</button>
</div>

<div id="info-panel">
<img id="logo" src="images/OFM_logo.png" alt="OpenFlexure Microscope Logo" width="100" height="auto">
<p>Zoom: <span id="zoom-level">1.00x</span></p>
<p>File: <span id="filename-display"></span></p>
</div>
<div id="upload-container">
<input type="file" id="image-upload" accept="image/*">
<label for="image-upload" id="upload-label">Upload Image</label>
</div>

<script>
let viewer;

function initializeViewer(imageSrc) {
if (viewer) {
viewer.destroy();
}

viewer = OpenSeadragon({
id: "viewer",
prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.0/images/",
tileSources: {
type: 'image',
url: imageSrc || 'images/PAP.jpg',
buildPyramid: false
},
showNavigationControl: false,
maxZoomPixelRatio: 10,
gestureSettingsMouse: {
clickToZoom: false
}
});

viewer.addHandler('zoom', function() {
updateZoomLevel();
});
}

function updateZoomLevel() {
const zoomLevel = viewer.viewport.getZoom();
document.getElementById('zoom-level').textContent = zoomLevel.toFixed(2) + 'x';
}

function displayFileName(fileName) {
document.getElementById('info-panel').innerHTML = `
<img id="logo" src="images/OFM_logo.png" alt="OpenFlexure Microscope Logo" width="100" height="auto">
<p>File: ${fileName}</p>
<p>Zoom: <span id="zoom-level">1.00x</span></p>
`;
}

function updatePosition() {
const center = viewer.viewport.getCenter();
document.getElementById('position').textContent =
`${center.x.toFixed(2)}, ${center.y.toFixed(2)}`;
}

function displayFileName(fileName) {
document.getElementById('info-panel').innerHTML = `
<img id="logo" src="images/OFM_logo.png" alt="OpenFlexure Microscope Logo" width="100" height="auto">
<p>File: ${fileName}</p>
<p>Zoom: <span id="zoom-level">1.00x</span></p>
`;
}

function dropHandler(ev) {
console.log('File(s) dropped');
ev.preventDefault();

if (ev.dataTransfer.items) {
[...ev.dataTransfer.items].forEach((item, i) => {
if (item.kind === 'file') {
const file = item.getAsFile();
console.log(`… file[${i}].name = ${file.name}`);
displayFileName(file.name);
// Process the file here (e.g., display it in the viewer)
}
});
} else {
[...ev.dataTransfer.files].forEach((file, i) => {
console.log(`… file[${i}].name = ${file.name}`);
displayFileName(file.name);
// Process the file here (e.g., display it in the viewer)
});
}

ev.target.classList.remove('dragover');
}


document.getElementById('zoom-in').addEventListener('click', function() {
viewer.viewport.zoomBy(1.5);
});

document.getElementById('zoom-out').addEventListener('click', function() {
viewer.viewport.zoomBy(0.67);
});

document.getElementById('home').addEventListener('click', function() {
viewer.viewport.goHome();
});

document.getElementById('image-upload').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
initializeViewer(event.target.result);
displayFileName(file.name);
};
reader.readAsDataURL(file);
}
});

initializeViewer();
</script>
</body>
</html>

0 comments on commit 674c536

Please sign in to comment.