ui-tools-light.html 5.21 KB
Newer Older
Roberto Toro's avatar
Roberto Toro committed
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
<html>
<body style='background:#222'>
<link rel="stylesheet" type="text/css" href="../css/ui.css" />

<style>
* {
    box-sizing: border-box;
}
</style>

<div id='toolsSide' style='display:block;height:100%'>
    <div id='tools-maximized' style='display:flex;flex-direction:column;height:100%'>
        <!-- tools hide/show, display left/right -->
        <div id='toolbarHeaderBlock' style='flex:0 1 28px;background:#333'>

            <div style='display:flex'>
                <div style='flex:0 0 28px'><div id='display-minimize' title='Minimize toolbar' class='a push noBorder'><img class='icon' src='../svg/times-circle.svg' /></div></div>
                <div style='flex:1 1 auto'></div>
                <div style='flex:0 0 28px'><div id='display-left' title='Display to the left' class='a push noBorder'><img class='icon' src='../svg/caret-square-o-left.svg' /></div></div>
                <div style='flex:0 0 28px'><div id='display-right' title='Display to the right' class='a push noBorder'><img class='icon' src='../svg/caret-square-o-right.svg' /></div></div>
            </div>

        </div>

        <!-- slider -->
        <div id='sliderBlock' style='flex:0 0 28px'>
            <div style='display:flex'>
                <div style='flex:0 0 28px'>
                    <div id='prev' class='a push'>-</div>
                </div>
                <div style='flex:1 0 28px;display:flex'>
                    <div style='flex:1;position:relative'>
                        <div id='slice' class='slider' data-max=100 data-val=0 style='position:absolute;height:100%;margin-left:10px;width:calc(100% - 20px)'>
                            <div class='track' style='position:absolute;left:0;top:50%;width:100%;border-top:1px solid #fff;padding:0;display:inline-block'></div>
                            <div class='thumb' style='position:absolute;left:0;top:50%;transform:translate(-10px,-10px);border-radius:10px;padding:0;width:20px;height:20px;background:#fff;display:inline-block'></div>
                        </div>
                    </div>
                </div>
                <div style='flex:0 0 28px'>
                    <div id='next' class='a push'>+</div>
                </div>
            </div>
        </div>

        <!-- buttons -->
        <div id='buttonsBlock' style='flex:0 0 auto'>
            <div style='display:flex'>

                <div style='flex:1 0 30px;width:50px'>
                    <div id='plane' style='display:flex' class='chose'>
                        <div style='flex:1'><div id='sag' title='Sagittal' class='a pressed'>Sag</div></div>
                        <div style='flex:1'><div id='cor' title='Coronal' class='a'>Cor</div></div>
                        <div style='flex:1'><div id='axi' title='Axial' class='a'>Axi</div></div>
                    </div>
                </div>

                <div style='flex:1 0 30px;width:50px'>
                    <div style='display:flex'>
                        <div style='flex:1'><div id='fullscreen' title='Full screen' class='a toggle'><img class='icon' src='../svg/fullscreen.svg' /></div></div>
                        <div style='flex:1'><div id='3drender' title='3D render' class='a push'><img class='icon' src='../svg/3drender.svg' /></div></div>
                        <div style='flex:1'><div id='link' title='Link' class='a push'><img class='icon' src='../svg/link.svg' /></div></div>
                    </div>
                </div>

                <div style='flex:1 0 30px;width:50px'>
                    <div id='paint' style='display:flex' class='chose'>
                        <div style='flex:1'><div title='Show' class='a pressed'><img class='icon' src='../svg/show.svg' /></div></div>
                        <div style='flex:1'><div title='Adjust' class='a'><img class='icon' src='../svg/adjust.svg' /></div></div>
                        <div style='flex:1'><div title='Eyedrop' class='a'><img class='icon' src='../svg/eyedropper.svg' /></div></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script src='../../downloads/jquery-3.2.1.min.js'></script>
r03ert0's avatar
r03ert0 committed
79
<script src='../atlasmaker-ui.js'></script>
Roberto Toro's avatar
Roberto Toro committed
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<script>
    const mui = AtlasMakerUI;
    mui.push($("#display-minimize"),()=>console.log("minimize"));
    mui.push($("#display-left"),()=>console.log("left"));
    mui.push($("#display-right"),()=>console.log("right"));

    mui.slider($("#slice"),()=>{});
    mui.push($("#prev"),()=>console.log("prev"));
    mui.push($("#next"),()=>console.log("next"));

    mui.chose($("#plane"),()=>console.log("plane"));

    mui.chose($("#paint"),()=>console.log("paint"));

    mui.chose($("#penSize"),()=>console.log("size"));
    mui.toggle($("#precise"),()=>console.log("precise"));
    mui.toggle($("#fullscreen"),()=>console.log("full"));
    mui.toggle($("#bubble"),()=>console.log("chat"));
    mui.push($("#3drender"),()=>console.log("3d"));
    mui.push($("#link"),()=>console.log("link"));
    mui.push($("#upload"),()=>console.log("upload"));
    mui.push($("#download"),()=>console.log("download"));

    mui.push($("#color"),()=>console.log("color"));
    mui.toggle($("#fill"),()=>console.log("fill"));
    mui.push($("#undo"),()=>console.log("undo"));
    mui.push($("#save"),()=>console.log("save"));
</script>

</body>
</html>