Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Caillat Michel
yafits
Commits
82eae948
Commit
82eae948
authored
Feb 26, 2020
by
Caillat Michel
Browse files
An enhanced (?) version of the 2D viewer
parent
b55cdf58
Changes
1
Hide whitespace changes
Inline
Side-by-side
yafitsv/views/olqv_2-5d.ejs
0 → 100644
View file @
82eae948
<!DOCTYPE html>
<html
lang=
"en"
dir=
"ltr"
>
<head>
<meta
charset=
"utf-8"
>
<title><
%=
title
%
></title>
<script
src=
"https://kit.fontawesome.com/33cc1a1919.js"
crossorigin=
"anonymous"
></script>
<link
href=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"
rel=
"stylesheet"
/>
<script
src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
type=
"text/javascript"
></script>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin=
"anonymous"
></script>
<script
src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin=
"anonymous"
></script>
<link
rel=
"stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin=
"anonymous"
>
<link
rel=
"stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
>
<script
src=
"https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"
></script>
<link
rel=
"stylesheet"
href=
"https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"/stylesheets/overlay.css"
>
<script
src=
"../javascript/FITSHeaderTable.js"
></script>
<script
src=
"../javascript/olqv_utils.js"
></script>
<script
src=
"../javascript/olqv_customcontrols.js"
></script>
<script
src=
"../javascript/olqv_infosblock.js"
></script>
<script
src=
"../javascript/olqv_reset.js"
></script>
<script
src=
"../javascript/olqv_settings.js"
></script>
<script
src=
"../javascript/olqv_shapes.js"
></script>
<script
src=
"../javascript/olqv_contours.js"
></script>
<script
src=
"../javascript/olqv_samp_publisher.js"
></script>
<script
src=
"../javascript/olqv_boxes.js"
></script>
<script
src=
"../javascript/olqv_markers.js"
></script>
<script
src=
"../javascript/olqv_keyboardevents.js"
></script>
<script
src=
"../javascript/olqv_viewer.js"
></script>
<script
src=
"https://code.highcharts.com/highcharts.js"
></script>
<!--
<%if(useSAMP){%>
-->
<script
src=
"../javascript/samp.js"
></script>
<script
src=
"../javascript/samp_utils.js"
></script>
<!--
<%}%>
-->
<style>
#loading
{
display
:
block
;
position
:
absolute
;
top
:
0
;
left
:
0
;
z-index
:
100
;
width
:
100vw
;
height
:
100vh
;
background-color
:
rgba
(
192
,
192
,
192
,
0.5
);
background-image
:
url("../MnyxU.gif")
;
background-repeat
:
no-repeat
;
background-position
:
center
;
}
#info
{
z-index
:
1
;
opacity
:
0
;
position
:
absolute
;
top
:
100%
;
left
:
0
;
margin
:
0
;
background
:
rgba
(
0
,
60
,
136
,
0.7
);
color
:
white
;
border
:
0
;
transition
:
opacity
100ms
ease-in
;
}
th
,
td
{
padding
:
0px
;
margin
:
0px
;
font-size
:
16px
;
height
:
20px
;
font-family
:
sans-serif
}
.list-group
{
flex-direction
:
row
;
}
.map
:-moz-full-screen
{
height
:
85%
;
z-index
:
1000
;
float
:
top
;
}
.map
:-webkit-full-screen
{
height
:
85%
;
z-index
:
1000
;
}
.map
:-ms-fullscreen
{
height
:
85%
;
z-index
:
1000
;
}
.map
:fullscreen
{
height
:
85%
;
z-index
:
1000
;
}
.map
{
background-color
:
black
;
}
.fullscreen
{
width
:
100%
;
height
:
400px
;
}
.sidepanel
{
background
:
#0000
;
width
:
100%
;
height
:
15%
;
}
.modal
{
overflow
:
visible
!important
;
*
display
:
block
!important
;
z-index
:
99999
;
}
.modal-body
{
height
:
500px
;
overflow-y
:
auto
;
z-index
:
99999
;
}
.samp-publish-png
{
top
:
65px
;
left
:
.5em
;
display
:
none
;
}
.ol-touch
.samp-publish-png
{
top
:
80px
}
.yafitscontourscontrol
{
top
:
140px
;
left
:
.5em
;
}
.customcontrols
{
position
:
absolute
;
top
:
.5em
;
left
:
.5em
;
}
.settingscontrol
{
top
:
200px
;
left
:
.5em
;
}
.ol-mouse-position
{
background-color
:
white
;
top
:
8px
;
right
:
100px
;
position
:
absolute
}
</style>
</head>
<body>
<div
id=
"loading"
></div>
<div
id=
"FITSHDR"
class=
"overlay"
style=
"overflow:scroll"
></div>
<div
id=
"fullscreen"
class=
"fullscreen"
>
<div
class=
"sidepanel"
>
<nav
class=
"navbar navbar-dark bg-dark"
>
<img
src=
"../samphub.png"
style=
"width:30px; height:30px"
data-toggle=
"collapse"
data-target=
"#sampRegistry"
aria-controls=
"sampRegistry"
aria-expanded=
"false"
aria-label=
"Toggle navigation"
/>
<div><a
href=
"http://artemix.obspm.fr/fits/browse"
target=
"_blank"
>
See more FITS files...
</a></div>
<div
id=
"cubeInfos"
style=
"font-size:15px; color: white"
></div>
</nav>
<div>
<table
style=
"width: 100%"
>
<tr>
<td
align=
'center'
>
<div
id=
"infos-line"
style=
"height:20; width:384; background-color: lightgray"
>
Integrated flux: ...
</div>
</td>
</tr>
</table>
<table
style=
'display: none'
>
<tr>
<td><canvas
id=
"hiddenSlice"
></canvas></td>
</tr>
</table>
</div>
</div>
<div
id=
"slice"
class=
"map"
></div>
</div>
</body>
<script>
var
enter
=
function
(
what
)
{
console
.
group
(
what
);
}
var
exit
=
function
()
{
console
.
groupEnd
();
}
class
CoordinatesFormatter
{
static
enter
(
what
)
{
console
.
group
(
this
.
name
+
"
.
"
+
what
);
}
static
exit
()
{
console
.
groupEnd
();
}
constructor
(
canvas
,
raLabelFormatter
,
decLabelFormatter
)
{
CoordinatesFormatter
.
enter
(
this
.
constructor
.
name
);
this
.
canvas
=
canvas
;
this
.
raLabelFormatter
=
raLabelFormatter
;
this
.
decLabelFormatter
=
decLabelFormatter
;
this
.
dataSteps
=
null
;
CoordinatesFormatter
.
exit
();
}
format
(
olc
)
{
//CoordinatesFormatter.enter(this.format.name);
let
result
;
var
ctx
=
this
.
canvas
.
getContext
(
'
2d
'
);
var
pixelAtPosition
=
ctx
.
getImageData
(
olc
[
0
],
height
-
olc
[
1
],
1
,
1
).
data
;
if
(
pixelAtPosition
)
{
var
dataStepsIndex
=
pixelAtPosition
.
slice
(
0
,
3
).
join
(
'
_
'
);
result
=
'
iRA=
'
+
Math
.
round
(
olc
[
0
])
+
'
iDEC=
'
+
Math
.
round
(
olc
[
1
])
+
'
RA=
'
+
this
.
raLabelFormatter
.
format
(
olc
[
0
])
+
'
DEC=
'
+
this
.
decLabelFormatter
.
format
(
olc
[
1
]);
if
(
this
.
dataSteps
&&
this
.
dataSteps
[
dataStepsIndex
])
{
result
+=
'
- Flux density :
'
+
this
.
dataSteps
[
dataStepsIndex
].
toExponential
(
4
)
+
'
Jy/beam
'
;
}
}
else
{
result
=
"
???
"
;
}
//CoordinatesFormatter.exit();
return
result
;
}
getRaLabelFormatter
()
{
return
this
.
raLabelFormatter
;
}
getDecLabelFormatter
()
{
return
this
.
decLabelFormatter
;
}
setDataSteps
(
dataSteps
)
{
this
.
dataSteps
=
dataSteps
;
}
}
// This is the (hidden) canvas where the images are actually drawn.
let
hiddenCanvas
=
document
.
getElementById
(
"
hiddenSlice
"
);
// This is the function describing the actions performed when an image is loaded
var
imageLoadFunction
=
function
(
image
,
src
)
{
enter
(
imageLoadFunction
.
name
);
document
.
getElementById
(
'
loading
'
).
style
.
display
=
'
block
'
;
image
.
getImage
().
addEventListener
(
'
load
'
,
function
()
{
document
.
getElementById
(
'
loading
'
).
style
.
display
=
'
none
'
;
hiddenCanvas
.
getContext
(
'
2d
'
).
drawImage
(
image
.
getImage
(),
0
,
0
);
});
image
.
getImage
().
src
=
src
;
image
.
getImage
().
crossOrigin
=
"
Anonymous
"
;
exit
()
};
var
updateViewer
=
function
(
relFITSFilePath
,
sliceIndex
,
viewer
)
{
enter
(
updateViewer
.
name
);
document
.
getElementById
(
'
loading
'
).
style
.
display
=
"
block
"
;
ittName
=
$
(
'
#ITTSelector
'
).
find
(
'
:selected
'
).
text
().
trim
();
lutName
=
$
(
'
#LUTSelector
'
).
find
(
'
:selected
'
).
text
().
trim
();
vmName
=
$
(
'
#VideoModeSelector
'
).
find
(
'
:selected
'
).
text
().
trim
();
document
.
getElementById
(
'
loading
'
).
style
.
display
=
'
block
'
;
$
.
post
(
'
png
'
,
{
'
si
'
:
sliceIndex
,
'
relFITSFilePath
'
:
relFITSFilePath
,
'
ittName
'
:
ittName
,
'
lutName
'
:
lutName
,
'
vmName
'
:
vmName
}).
done
(
function
(
resp
)
{
console
.
log
(
"
$.post('/png', {'si': _sliceIndex, 'relFITSFilePath': _relFITSFilePath}).done(: entering
"
);
document
.
getElementById
(
'
loading
'
).
style
.
display
=
'
none
'
;
if
(
resp
[
"
status
"
]
==
false
)
{
alert
(
"
Something went wrong during the generation of the image. The message was '
"
+
resp
[
"
message
"
]
+
"
'
"
);
}
else
{
let
dataSteps
=
resp
[
"
result
"
][
"
data_steps
"
];
let
statistics
=
resp
[
"
result
"
][
"
statistics
"
];
var
path_to_png
=
resp
[
"
result
"
][
"
path_to_png
"
];
var
imageURL
=
"
<%=urlRoot%>/
"
+
path_to_png
;
console
.
log
(
"
Image's URL is
"
+
imageURL
);
viewer
.
display
(
imageURL
,
[
sliceIndex
],
dataSteps
,
statistics
);
}
/*if (_box_infos_1.length == 0) {
//_getSumOverSliceRectAreaWithPOST(_relFITSFilePath, 0, 0, extent);
}*/
document
.
getElementById
(
'
loading
'
).
style
.
display
=
"
none
"
;
console
.
log
(
"
$.post('/png', {'si': _sliceIndex, 'relFITSFilePath': _relFITSFilePath}).done(: exiting
"
);
}
)
exit
();
};
var
getSumOverSliceRectArea
=
function
(
relFITSFilePath
,
sliceIndex
,
extent
,
box_index
=
null
)
{
console
.
log
(
"
_getSumOverSliceRectAreaWithPOST: entering
"
);
$
.
post
(
""
,
{
"
method
"
:
"
getSumOverSliceRectArea
"
,
"
relFITSFilePath
"
:
relFITSFilePath
,
"
sessionID
"
:
0
,
"
sliceIndex
"
:
sliceIndex
,
"
RAPix0
"
:
extent
[
0
],
"
RAPix1
"
:
extent
[
2
],
"
DECPix0
"
:
extent
[
1
],
"
DECPix1
"
:
extent
[
3
]
}).
done
(
function
(
resp
)
{
console
.
log
(
"
getSumOverSliceRectArea callback: entering
"
);
console
.
log
(
JSON
.
stringify
(
resp
,
0
,
4
));
var
x
=
JSON
.
parse
(
resp
);
if
(
x
[
"
status
"
]
==
false
)
{
alert
(
x
[
"
message
"
]);
}
else
{
document
.
getElementById
(
'
infos-line
'
).
innerHTML
=
'
Integrated flux :
'
+
x
[
'
result
'
].
toExponential
(
4
)
+
'
Jy
'
;
}
console
.
log
(
"
getSumOverSliceRectArea callback: exiting
"
);
}
);
console
.
log
(
"
_getSumOverSliceRectAreaWithPOST: exiting
"
);
};
var
contoursFactory
;
var
contoursFactoryGUI
;
var
reset
;
var
settings
;
var
boxTool
;
var
keyCodeProcessor
;
var
header
=
{};
/*
<% for (var i in header) {%>
*/
header
[
"
<%=i%>
"
]
=
"
<%=header[i]%>
"
/*
<%}%>
*/
var
relFITSFilePath
=
"
<%=relFITSFilePath%>
"
;
var
width
=
header
[
'
NAXIS1
'
];
var
height
=
header
[
'
NAXIS2
'
];
var
product
=
"
<%=product%>
"
;
var
sAMPPublisher
;
$
(
document
).
ready
(
function
()
{
console
.
log
(
"
$( document ).ready(function() {: entering
"
);
$
(
'
[data-tooltip="tooltip"]
'
).
tooltip
();
let
FITSHDR
=
new
FITSHeaderTable
(
document
.
getElementById
(
"
FITSHDR
"
),
header
);
var
FITSSummary
=
'
<strong>
'
+
product
+
'
</strong> - OBJECT = <strong>
'
+
header
[
'
OBJECT
'
]
+
'
</strong> - NAXIS = <strong>
'
+
header
[
'
NAXIS
'
]
+
'
</strong> - NAXIS1 = <strong>
'
+
header
[
'
NAXIS1
'
]
+
'
</strong> - NAXIS2 = <strong>
'
+
header
[
'
NAXIS2
'
]
+
'
</strong> - NAXIS3 = <strong>
'
+
header
[
'
NAXIS3
'
]
+
'
</strong>
'
;
if
(
'
NAXIS4
'
in
header
)
{
FITSSummary
+=
'
- NAXIS4 = <strong>
'
+
header
[
'
NAXIS4
'
]
+
'
</strong>
'
;
}
FITSSummary
+=
"
<a id='showFITSHEADER' href='#'> etc.</a>
"
;
$
(
"
#cubeInfos
"
).
html
(
FITSSummary
);
$
(
"
cubeInfos
"
).
css
(
'
font-family: monospace; font-size=x-small
'
);
$
(
'
#showFITSHEADER
'
).
click
(
function
()
{
FITSHDR
.
show
()
});
document
.
getElementById
(
'
loading
'
).
style
.
display
=
'
block
'
;
$
.
post
(
""
,
{
"
method
"
:
"
RADECRangeInDegrees
"
,
"
relFITSFilePath
"
:
relFITSFilePath
,
"
sessionID
"
:
0
}).
done
(
function
(
resp
)
{
console
.
log
(
'
$.post("", {"method": "RADECRangeInDegrees", "relFITSFilePath": relFITSFilePath}).done(function (resp) { : entering
'
);
document
.
getElementById
(
'
loading
'
).
style
.
display
=
'
none
'
;
RADECRangeInDegrees
=
resp
.
data
[
"
result
"
];
/* Keep things square */
if
(
width
>
height
)
{
height
=
width
;
}
else
if
(
width
<
height
)
{
width
=
height
;
}
$
(
'
#LUTSelector
'
).
prop
(
'
selectedIndex
'
,
<%=
renderingCapabilities
[
"
default_lut_index
"
]
%>
);
console
.
log
(
"
Data of '
"
+
relFITSFilePath
+
"
' are contained in
"
+
JSON
.
stringify
(
resp
.
data
[
"
result
"
]));
let
extent
=
[
0
,
0
,
width
-
1
,
height
-
1
];
let
raDDtoPixelConverter
=
new
RADDtoPixelConverter
(
RADECRangeInDegrees
[
0
][
0
],
RADECRangeInDegrees
[
2
][
0
],
extent
[
0
],
extent
[
2
]);
let
decDDtoPixelConverter
=
new
DECDDtoPixelConverter
(
RADECRangeInDegrees
[
0
][
1
],
RADECRangeInDegrees
[
2
][
1
],
extent
[
1
],
extent
[
3
]);
let
naxis
=
parseInt
(
header
[
"
NAXIS
"
]);
let
naxis1
=
parseInt
(
header
[
"
NAXIS1
"
]);
let
naxis2
=
parseInt
(
header
[
"
NAXIS2
"
]);
let
naxis3
=
1
;
if
(
naxis
>
2
)
{
naxis3
=
parseInt
(
header
[
"
NAXIS3
"
]);
}
let
naxis4
=
1
;
if
(
naxis
>
4
)
{
naxis4
=
parseInt
(
header
[
"
NAXIS4
"
]);
}
let
crpix
=
[
parseFloat
(
header
[
"
CRPIX1
"
]),
parseFloat
(
header
[
"
CRPIX2
"
])];
let
crval
=
[
parseFloat
(
header
[
"
CRVAL1
"
]),
parseFloat
(
header
[
"
CRVAL2
"
])];
let
cdelt
=
[
parseFloat
(
header
[
"
CDELT1
"
]),
parseFloat
(
header
[
"
CDELT2
"
])];
let
ra0
=
RADECRangeInDegrees
[
0
][
0
];
let
ra1
=
RADECRangeInDegrees
[
2
][
0
];
console
.
log
(
"
ra0 =
"
+
DecDeg2HMS
(
ra0
)
+
"
ra1 =
"
+
DecDeg2HMS
(
ra1
));
let
dec0
=
RADECRangeInDegrees
[
0
][
1
];
let
dec1
=
RADECRangeInDegrees
[
2
][
1
];
let
raLabelFormatter
=
new
RaLabelFormatter
(
extent
[
0
],
extent
[
2
],
ra0
,
ra1
);
let
decLabelFormatter
=
new
DecLabelFormatter
(
extent
[
1
],
extent
[
3
],
dec0
,
dec1
);
let
coordinatesFormatter
=
new
CoordinatesFormatter
(
hiddenCanvas
,
raLabelFormatter
,
decLabelFormatter
)
var
is3D
=
(
naxis
==
3
&&
naxis3
>
1
)
||
(
naxis
==
4
&&
naxis3
>
1
&&
naxis4
==
1
);
var
viewer
=
new
Viewer
(
relFITSFilePath
,
width
,
height
,
"
slice
"
,
"
hiddenSlice
"
,
coordinatesFormatter
,
is3D
);
updateViewer
(
relFITSFilePath
,
0
,
viewer
);
let
keyCodeProcessor
=
new
KeyCodeProcessor
(
viewer
);
keyCodeProcessor
.
open
();
let
infosBlock
=
new
InfosBlock
(
viewer
,
document
.
getElementById
(
"
infos-line
"
));
let
customControls
=
new
CustomControls
(
"
slice
"
);
let
reset
=
new
Reset
(
viewer
);
customControls
.
addButton
(
reset
.
getButton
());
let
settings
=
new
Settings
(
viewer
);
/*<% renderingCapabilities["luts"].forEach(function (lut) { %>*/
settings
.
setLUT
(
"
<%=lut%>
"
);
/*<% }) %>*/
/*<% renderingCapabilities["itts"].forEach(function (itt) { %>*/
settings
.
setITT
(
"
<%=itt%>
"
);
/*<% }) %>*/
/*<% renderingCapabilities["vmodes"].forEach(function (vmode) { %>*/
settings
.
setVM
(
"
<%=vmode%>
"
);
/*<% }) %>*/
customControls
.
addButton
(
settings
.
getButton
());
let
markersFactory
=
new
MarkersFactory
(
viewer
);
customControls
.
addButton
(
markersFactory
.
getButton
());
let
contoursFactory
=
new
ContoursFactory
(
viewer
,
infosBlock
);
customControls
.
addButton
(
contoursFactory
.
getButton
());
let
contoursFactoryGUI
=
new
ContoursFactoryGUI
(
viewer
);
contoursFactoryGUI
.
connect
(
contoursFactory
);
let
boxesFactory
=
new
BoxesFactory
(
viewer
,
infosBlock
);
customControls
.
addButton
(
boxesFactory
.
getButton
());
$
(
'
a#rccap
'
).
click
(
function
()
{
updateViewer
(
relFITSFilePath
,
0
,
viewer
);
});
console
.
log
(
'
$.post("", {"method": "RADECRangeInDegrees", "fileName": relFITSFilePath}).done(function (resp) { : exiting
'
);
//activate_markers(viewer);
});
console
.
log
(
"
$( document ).ready(function() {: exiting
"
);
});
</script>
</html>
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment