Commit e070b660 authored by josh's avatar josh
Browse files

image viewer

parent 545e15b0
......@@ -7,7 +7,7 @@ function showDBViewer( data=false )
{
var imageList = data["data"];
var dbViewer = new DBViewer();
var dbViewer = new DBViewer( imageList );
// clear main content
$( "#main-content" ).empty();
......@@ -24,22 +24,7 @@ function showDBViewer( data=false )
const DBViewerTemplate = document.createElement( "template" );
DBViewerTemplate.innerHTML = `
<div class="db-view-container">
<!--
<div id="image-file-list">
<ul>
</div>
<div id="image-view">
<div id="slice-image">
<img src="static/default.jpg">
</div>
</div>
-->
<div id="original-image" style="display:none;">
<img id="image" src="static/GeoEyeLarge-2.jpg">
</div>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
</canvas>
</div>
`;
......@@ -48,13 +33,17 @@ DBViewerTemplate.innerHTML = `
* DB Viewer Class
*/
class DBViewer extends HTMLElement {
constructor() {
constructor( imageList ) {
super();
this.appendChild( DBViewerTemplate.content.cloneNode( true ) );
this._imageList = imageList;
this.appendChild( DBViewerTemplate.content.cloneNode( true ) );
}
get imageList() { return this._imageList; }
set imageList( imageList ) { this._imageList = imageList; }
copyImageToStatic( newImage ) {
copyToStatic( newImage, this.updateImage, false );
}
......@@ -64,15 +53,79 @@ class DBViewer extends HTMLElement {
$("#original-image").attr( "src", newImageUrl );
}
newImageSelected( ev ) {
var select = document.getElementById( "image-select" );
console.log( select.value );
}
connectedCallback() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = document.getElementById('image');
console.log( image )
image.addEventListener('load', e => {
console.log( "test" );
ctx.drawImage( image, 0, 0 );
});
// create image controllers
var dbViewerCont = document.getElementsByClassName( "db-view-container" )[0];
var originalImage = new ImageController( "original-image", 800, 800, "static/GeoEye.jpg" );
originalImage.id = "originalImage";
originalImage.style.gridArea = "original";
var sliceImage = new ImageController( "slice-image", 500, 500, "static/Slice.jpg" );
sliceImage.id = "sliceImage";
sliceImage.style.gridArea = "slice";
var processedSlice = new ImageController( "processed-image", 500, 500, "static/MeanShift.jpg" );
processedSlice.id = "processedSlice";
processedSlice.style.gridArea = "processed";
var toolBar = document.createElement( "div" );
toolBar.style.backgroundColor = "tomato";
toolBar.style.gridArea = "toolbar";
console.log( this._imageList )
var select = document.createElement( "select" );
select.name = "image-select";
select.id = "image-select"
select.addEventListener( "change", ( ev ) => this.newImageSelected( ev ) );
var option = document.createElement( "option" );
option.value = "Not Selected";
option.text = option.value.charAt( 0 ).toUpperCase() + option.value.slice( 1 );
select.appendChild( option );
for ( const image of this._imageList ) {
option = document.createElement( "option" );
option.value = image;
option.text = image.charAt( 0 ).toUpperCase() + image.slice( 1 );
select.appendChild( option );
}
var label = document.createElement( "label" );
label.innerHTML = "Available Images: "
label.htmlFor = "image-select";
toolBar.appendChild(label).appendChild(select);
dbViewerCont.appendChild( originalImage );
dbViewerCont.appendChild( sliceImage );
dbViewerCont.appendChild( processedSlice );
dbViewerCont.appendChild( toolBar );
dbViewerCont.style.display = "grid";
dbViewerCont.style.gridTemplateRows = "100px 50px 512px 1fr";
dbViewerCont.style.gridTemplateColumns = "800px 50px 512px 1fr";
dbViewerCont.style.gridTemplateAreas = `"toolbar toolbar toolbar toolbar"
". . . . "
"original . slice . "
"original . processed . "`;
/*
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 75px 1fr;
grid-template-areas:
"header"
"content";
*/
//this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() );
}
......
......@@ -12,13 +12,6 @@ db-viewer {
width: 100%;
height: 100%;
/*
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"image-view";*/
}
#image-file-list {
......@@ -39,17 +32,9 @@ db-viewer {
background-color: white;
}
#image-view {
#image-container {
grid-area: image-view;
background-color: white;
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"slice-img original-img"
}
#original-image {
......
/* Mask Toolbar template */
const ImageControllerTemplate = document.createElement( "template" );
ImageControllerTemplate.innerHTML = `
<div id="original-image" style="display:none;">
<img id="image" src="static/GeoEyeLarge-2.jpg">
</div>
<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #000000;"></canvas>
`;
/*
* DB Viewer Class
*/
class ImageController extends HTMLElement {
constructor( id, w, h, imageUrl ) {
super();
//this.appendChild( ImageControllerTemplate.content.cloneNode( true ) );
this._canvasID = id + "-canvas";
this._imageID = id + "-image";
this._id = id;
this._canvas = false;
this._context = false;
this._image = false;
this._clicked = false;
this._mousePosX = 0;
this._mousePosY = 0;
this._canvCornerX = 0;
this._canvCornerY = 0;
this._scale = 1.0;
this._imgMaxWidth = 0;
this._imgMaxHeight = 0;
this._imgCurrentWidth = 0;
this._imgCurrentHeight = 0;
this.innerHTML = `
<div id="image-container" style="display:none;">
<img id="${this._imageID}" src="${imageUrl}">
</div>
<canvas id="${this._canvasID}" width="${w}" height="${h}" ></canvas>
`;
}
//get id() { return this._id; }
clicked( ev ) {
this._clicked = true;
this._mousePosX = ev.clientX - this._canvas.offsetLeft;
this._mousePosY = ev.clientY - this._canvas.offsetTop;
}
released( ev ) {
this._clicked = false;
this._mousePosX = ev.clientX - this._canvas.offsetLeft;
this._mousePosY = ev.clientY - this._canvas.offsetTop;
}
mouseMoved( ev ) {
var prevX = this._mousePosX;
var prevY = this._mousePosY;
this._mousePosX = ev.clientX - this._canvas.offsetLeft;
this._mousePosY = ev.clientY - this._canvas.offsetTop;
if ( this._clicked ) {
var offsetX = this._mousePosX - prevX;
var offsetY = this._mousePosY - prevY;
this._canvCornerX += offsetX;
this._canvCornerY += offsetY;
// Redraw
this._context.clearRect( 0, 0, this._canvas.width, this._canvas.height );
this._context.drawImage( this._image,
this._canvCornerX,
this._canvCornerY ,
this._imgMaxWidth * this._scale,
this._imgMaxHeight * this._scale );
}
}
wheel( ev ) {
ev.preventDefault();
this._scale += ev.deltaY * -0.01;
// Restrict scale
this._scale = Math.min( Math.max( .125, this._scale), 4 );
// Redraw
this._context.clearRect( 0, 0, this._canvas.width, this._canvas.height );
this._context.drawImage( this._image,
this._canvCornerX,
this._canvCornerY ,
this._imgMaxWidth * this._scale,
this._imgMaxHeight * this._scale );
}
connectedCallback() {
this._canvas = document.getElementById( this._canvasID );
this._context = this._canvas.getContext( "2d" );
this._image = document.getElementById( this._imageID );
this._image.addEventListener('load', e => {
this._imgMaxWidth = this._image.width;
this._imgMaxHeight = this._image.height;
this._imgCurrentWidth = this._image.width;
this._imgCurrentHeight = this._image.height;
this._context.drawImage( this._image, 0, 0 );
});
// Mouse Click Events
this._canvas.addEventListener( "mousedown", ( ev ) => this.clicked( ev ) );
this._canvas.addEventListener( "mouseup", ( ev ) => this.released( ev ) );
this._canvas.addEventListener( "mousemove", ( ev ) => this.mouseMoved( ev ) );
// Mouse Wheel Events
this._canvas.addEventListener( "wheel", ( ev ) => this.wheel( ev ) );
//this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() );
}
disconnectedCallback() {
//this.shadowRoot.querySelector("button1").removeEventListener();
}
}
window.customElements.define( "image-controller", ImageController );
image-controller {
}
\ No newline at end of file
......@@ -10,9 +10,14 @@
}
html, body {
html {
width: 100%;
height: 100%;
background-color: #ecf0f1;
}
body {
min-height: 100%;
}
.mainGrid {
......
......@@ -9,6 +9,7 @@
<link rel="stylesheet" href="static/styles.css">
<link rel="stylesheet" href="static/dbViewerStyles.css">
<link rel="stylesheet" href="static/imageControllerStyles.css">
</head>
......@@ -17,6 +18,7 @@
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="static/index.js"></script>
<script src="static/dbViewer.js"></script>
<script src="static/imageController.js"></script>
<div class="mainGrid">
<div class="header">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment