omero-iviewer/src/controls/dimension-slider.html at 448d042a58da05a522531356cc58c1e35b5744d9 · ome/omero-iviewer · 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
<!--
    Copyright (C) 2017 University of Dundee & Open Microscopy Environment.
    All rights reserved.

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<template>
    <template if.bind="dim === 'z'">
        <span class='dim-size'>
            ${image_config.image_info.projection === INTMAX ?
                    image_config.image_info.projection_opts.end+1 :
                    image_config.image_info.dimensions['max_' + dim]}
        </span>
        <div class="dim-arrows glyphicon glyphicon-chevron-up"
             click.delegate="onArrowClick(1)">
        </div>
        <div name="dim"><span class='slider-value'></span></div>
        <div class="dim-arrows glyphicon glyphicon-chevron-down"
             click.delegate="onArrowClick(-1)">
        </div>
        <span class='dim-current'>
            ${image_config.image_info.projection === INTMAX ?
                    image_config.image_info.projection_opts.start+1 :
                    image_config.image_info.dimensions[dim]+1}
        </span>
        <span class="dim-projection
                     ${getZProjectionDisabled(player_info.handle, player_info.forwards) ? 'disabled-color' : ''}"
              title="${getZProjectionDisabled(player_info.handle, player_info.forwards) ? getZProjectionTooltip() :
                            image_config.image_info.projection === INTMAX ?
                                'Turn off projection' : 'Turn on projection'}"
              css="${image_config.image_info.projection === INTMAX ?
                        'background-color: rgba(85, 85, 85, 0.50)' : ''}"
              click.delegate="toggleProjection()">
        </span>
        <div class="dim-arrows glyphicon
                ${player_info.handle !== null && player_info.dim === dim &&
                  player_info.forwards ? 'glyphicon-stop' : 'glyphicon-play'}
                ${image_config.image_info.projection === INTMAX ?
                    'disabled-color' : ''}"
             title="${image_config.image_info.projection === INTMAX ? 'Play disabled' :
                    player_info.handle !== null && player_info.dim === dim &&
                    player_info.forwards ? 'Stop' : 'Play'}"
             click.delegate="playDimension(true)">
        </div>
        <span class='dim-label'>${dim.toUpperCase()}</span>
    </template>

    <template if.bind="dim === 't'">
        <span class='dim-label'>${dim.toUpperCase()}</span>
        <div class="dim-arrows glyphicon
                ${player_info.handle !== null && player_info.dim === dim &&
                  player_info.forwards ? 'glyphicon-stop' : 'glyphicon-play'}"
              title="${player_info.handle !== null && player_info.dim === dim &&
                player_info.forwards ? 'Stop' : 'Play'}"
             click.delegate="playDimension(true)">
        </div>
        <span class='dim-current'>${image_config.image_info.dimensions[dim]+1}</span>
        <div class="dim-arrows glyphicon glyphicon-chevron-left"
             click.delegate="onArrowClick(-1)">
        </div>
        <div name="dim">
            <span class='slider-value'></span>
        </div>
        <div class="dim-arrows glyphicon glyphicon-chevron-right"
             click.delegate="onArrowClick(1)">
        </div>
        <span class='dim-size'>
            ${image_config.image_info.dimensions['max_' + dim]}
        </span>
        <span show.bind="image_config.image_info.image_delta_t.length > 0"
            title="${image_config.image_info.formatDeltaT(image_config.image_info.image_delta_t[image_config.image_info.dimensions[dim]], true)}"
            class="timestamp">
            ${image_config.image_info.formatDeltaT(image_config.image_info.image_delta_t[image_config.image_info.dimensions[dim]])}
        </span>
    </template>
</template>