medsurf-draw
Version:
Draw annotations on jpg/zoomify images, based on PIXI.js
172 lines (146 loc) • 6.89 kB
HTML
<html lang="de-CH"><head><meta charset="utf-8"><title>MEDSURF PIXI</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css"><style>canvas {
image-rendering: pixelated;
cursor: none;
}
div {
color: #373737;
font-size: 1.2em;
}</style><script id="vertex_dotted_line" type="x-shader">attribute vec2 aVertexPosition;
uniform mat3 projectionMatrix;
varying vec2 vTextureCoord;
varying float vLineDistance;
uniform vec4 inputSize;
uniform vec4 outputFrame;
vec4 filterVertexPosition( void )
{
vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;
return vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0, 1.0);
}
vec2 filterTextureCoord( void )
{
return aVertexPosition * (outputFrame.zw * inputSize.zw);
}
void main(void)
{
gl_Position = filterVertexPosition();
vTextureCoord = filterTextureCoord();
// vLineDistance = 60.0 * dot(vTextureCoord.x, vTextureCoord.y);
vLineDistance = 100.0 * dot(vTextureCoord.x, vTextureCoord.y);
// vLineDistance = 60.0 * vTextureCoord.x;
}</script><script id="fragment_dotted_line" type="x-shader">precision mediump float;
uniform sampler2D uSampler;
uniform float totalSize;
uniform float dashSize;
varying vec2 vTextureCoord;
varying float vLineDistance;
void main() {
if ( mod( vLineDistance, totalSize ) > dashSize ) {
discard;
}
gl_FragColor = texture2D(uSampler, vTextureCoord);
}</script><script id="vertex_linedashed" type="x-shader">// https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/linedashed_vert.glsl.js
uniform float scale;
// uniform mat4 modelViewMatrix; // TODO
// uniform mat4 projectionMatrix; // TODO
uniform float lineDistance;
attribute vec3 position; // TODO
varying float vLineDistance;
/*
#include <common>
#include <color_pars_vertex>
#include <fog_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
*/
void main() {
// #include <color_vertex>
vLineDistance = scale * lineDistance;
vec4 mvPosition = /*modelViewMatrix * */vec4( position, 1.0 );
gl_Position = /*projectionMatrix * */mvPosition;
/*
#include <logdepthbuf_vertex>
#include <clipping_planes_vertex>
#include <fog_vertex>
*/
}</script><script id="fragment_linedashed" type="x-shader">// https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/linedashed_frag.glsl.js
uniform vec3 diffuse;
uniform float opacity;
uniform float dashSize;
uniform float totalSize;
varying float vLineDistance;
/*
#include <common>
#include <color_pars_fragment>
#include <fog_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>
*/
void main() {
// #include <clipping_planes_fragment>
if ( mod( vLineDistance, totalSize ) > dashSize ) {
discard;
}
vec3 outgoingLight = vec3( 0.0 );
vec4 diffuseColor = vec4( diffuse, opacity );
/*
#include <logdepthbuf_fragment>
#include <color_fragment>
*/
outgoingLight = diffuseColor.rgb;
gl_FragColor = vec4( outgoingLight, diffuseColor.a );
/*
#include <premultiplied_alpha_fragment>
#include <tonemapping_fragment>
#include <encodings_fragment>
#include <fog_fragment>
*/
}</script><style>.color_picker_div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -150px;
width: 300px;
height: 200px;
pointer-events: none;
}
.color_picker {
opacity: 0;
}
/* TEST */
* {
box-sizing: border-box;
}
.container {
display: flex;
width: 98vw;
height: 98vh;
flex-flow: row wrap;
}
[class*="box--"] {
display: flex;
margin: .25rem;
height: 45vh;
padding: .25rem;
color: white;
}
.box--full {
/*background: red;*/
flex: 1 1 100%;
height: 10vh;
}
.box--triple {
/*background: green;*/
flex: 1 1 50%;
height: 80vh;
}
.box--half {
/*background: blue;*/
flex: 1 1 30%;
height: 70vh;
}
.box--single {
/*background: yellow;*/
flex: 1 1 10%;
height: 80vh;
}</style><script defer="defer" src="main.js?95a9b66c8d18112d751d"></script></head><body style="background-color: black"><div style="top: 1vh; left:1vw; width:98vw; height: 3vh; position: absolute"><button id="button_default">Default</button> <button id="button_marker">Marker</button> <button id="button_selftest">Selftest</button> <button id="button_author">Author</button> <button id="button_model">Model</button> <button id="button_change">Change Image</button> <button id="button_filter">Apply Filter</button> <button id="button_position">Position</button> <button id="button_virtual-poiner">Virtual Pointer</button> <button id="button_test">Test</button> <button id="button_test2">Test2</button> <button id="button_test3">Test3</button></div><div class="container"><div class="box--full">1</div><div class="box--single">2</div><div class="box--triple"><div id="medsurf_canvas_div" style="height: 100%; width: 100%"><canvas id="medsurf_canvas" oncontextmenu="return false;"></canvas></div></div></div></body></html>