ct-cropper/index.html at master · UnlockingHistory/ct-cropper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CTCropper</title>

    <link rel="stylesheet" type="text/css" href="dependencies/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="dependencies/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="dependencies/flat-ui.min.css">

    <script type="text/javascript" src="dependencies/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="dependencies/jquery-ui.min.js"></script>
    <script type="text/javascript" src="dependencies/flat-ui.min.js"></script>
    <script type="text/javascript" src="dependencies/underscore-min.js"></script>
    <script type="text/javascript" src="dependencies/three.min.js"></script>
    <script type="text/javascript" src="dependencies/OrbitControls.js"></script>
    <script type="text/javascript" src="dependencies/StreamSaver.js"></script>
    <script type="text/javascript" src="dependencies/polyfill.min.js"></script>
    <script type="text/javascript" src="dependencies/FileSaver.min.js"></script>

    <link rel="stylesheet" type="text/css" href="main.css">

    <script type="text/javascript" src="js/threeView.js"></script>
    <script type="text/javascript" src="js/dataView.js"></script>
    <script type="text/javascript" src="js/controls.js"></script>
    <script type="text/javascript" src="js/ControlPoint.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

</head>
<body>
<div id="threeContainer"></div>
<input type="file" id="fileSelector"/>
<div id="controlsLeft">
    <a href="#" id="about" class="btn btn-lg btn-default">About</a><br/><br/>
    <a href="#" id="upload" class="btn btn-lg btn-success">Select File</a><br/><br/>
    <div id="fileInfo">
        <b>Name:</b>&nbsp;&nbsp; <span id="currentFileName"></span><br/>
        <b>Length:</b>&nbsp;&nbsp; <span id="currentFileSize"></span> bytes<br/><br/>
        <b>Size (XYZ):</b>&nbsp;&nbsp; <input id="sizeX" value="" placeholder="" class="form-control int" type="text">
            &nbsp; <input id="sizeY" value="" placeholder="" class="form-control int" type="text">
            &nbsp; <input id="sizeZ" value="" placeholder="" class="form-control int" type="text"><br/><br/>
        <b>Header Length:</b>&nbsp;&nbsp; <input id="headerLength" value="" placeholder="" class="form-control int" type="text"> &nbsp;bytes<br/><br/>
        <b>Current Layer:</b>&nbsp;&nbsp; <input id="layerNumber" value="" placeholder="" class="form-control int" type="text"><br/><br/>
        <div id="initOptions">
            <a href="#" id="start" class="btn btn-lg btn-success">Add Boundary</a>&nbsp;&nbsp; <b>Num Vertices:</b>&nbsp;&nbsp; <input id="numVerticesInit" value="" placeholder="" class="form-control int" type="text"><br/><br/>
        </div>
        <div id="profileUI"></div><br/>
        <div class="indent" id="bounds">
            <b>Upper Bound:</b>&nbsp;&nbsp; <input id="upperBound" value="" placeholder="" class="form-control int" type="text"><br/><br/>
            <b>Lower Bound:</b>&nbsp;&nbsp; <input id="lowerBound" value="" placeholder="" class="form-control int" type="text"><br/><br/>
        </div>
        <a href="#" id="savePNG" class="btn btn-lg btn-block btn-default">Save Current Layer as PNG</a><br/><br/>
        <a href="#" id="save" class="btn btn-lg btn-block btn-success">Save Cropped .tom As...</a><br/><br/><br/>
        <div class="extraSpace"></div>
    </div>
</div>
<div id="flythroughSlider">
    <a href="#" id="layerUp"><span class="fui-triangle-up"></span></a>
    <span class="label-slider"></span><div class="flat-slider ui-slider ui-corner-all ui-slider-vertical ui-widget ui-widget-content"></div>
    <a href="#" id="layerDown"><span class="fui-triangle-down"></span></a>
</div>

<div class="modal fade" id="saveAsModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <p class="modal-title" ><b>Save As (.tom)</b></p>
            </div>
            <div class="modal-body">
                <b>Name:</b> &nbsp;&nbsp;<input id="saveAsFileName" type="text" placeholder="Enter file name" class="form-control filename"><br/><br/>
                <b>File Dimensions (XYZ):</b> <span id="outputFileDimensions"></span>&nbsp;px<br/><br/>
                <b>File Size:</b> <span id="outputFileSize"></span>&nbsp;bytes<br/><br/>
                <b>Fill empty regions with:</b> &nbsp;&nbsp;<input id="fillVal" type="text" placeholder="" class="form-control"><br/><br/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" id="saveAsTOMModal" class="btn btn-success">Save</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <b>CTCropper</b><br/><br/>
                Tool for cropping and masking arbitrary profiles from CT volumetric data in .tom
                file format.  Only currently supported on Chrome.  More documentation coming soon.<br/><br/>
                By <a href="http://www.amandaghassaei.com/" target="_blank">Amanda Ghassaei</a>, code on <a href="https://github.com/amandaghassaei/CTCropper" target="_blank">Github</a>.
                <br/><br/>
            </div>
        </div>
    </div>
</div>
</body>
</html>