comparison Applications/StoneWebViewer/WebApplication/index.html @ 1561:cf652990abb1

tunable mouse actions
author Sebastien Jodogne <s.jodogne@gmail.com>
date Thu, 20 Aug 2020 17:44:35 +0200
parents 8898f8f755c8
children 2a4a6b967053
comparison
equal deleted inserted replaced
1560:b4ccd4963d37 1561:cf652990abb1
253 <div class="ng-scope inline-object"> 253 <div class="ng-scope inline-object">
254 <div class="tbGroup"> 254 <div class="tbGroup">
255 <div class="tbGroup__toggl"> 255 <div class="tbGroup__toggl">
256 <button class="wvButton" 256 <button class="wvButton"
257 v-bind:class="{ 'wvButton--underline' : !viewportLayoutButtonsVisible }" 257 v-bind:class="{ 'wvButton--underline' : !viewportLayoutButtonsVisible }"
258 @click="viewportLayoutButtonsVisible = !viewportLayoutButtonsVisible"> 258 data-toggle="tooltip" data-title="Change layout"
259 @click="viewportLayoutButtonsVisible = !viewportLayoutButtonsVisible;HideAllTooltips()">
259 <i class="fa fa-th"></i> 260 <i class="fa fa-th"></i>
260 </button> 261 </button>
261 </div> 262 </div>
262 263
263 <div class="tbGroup__buttons--bottom" v-show="viewportLayoutButtonsVisible"> 264 <div class="tbGroup__buttons--bottom" v-show="viewportLayoutButtonsVisible">
283 </div> 284 </div>
284 </div> 285 </div>
285 </div> 286 </div>
286 </div> 287 </div>
287 288
289
290 <div class="ng-scope inline-object">
291 <div class="tbGroup">
292 <div class="tbGroup__toggl">
293 <button class="wvButton"
294 v-bind:class="{ 'wvButton--underline' : !mouseActionsVisible }"
295 data-toggle="tooltip" data-title="Mouse actions"
296 @click="mouseActionsVisible = !mouseActionsVisible;HideAllTooltips()">
297 <i class="fa fa-mouse-pointer"></i>
298 </button>
299 </div>
300
301 <div class="tbGroup__buttons--bottom" v-show="mouseActionsVisible">
302 <div class="inline-object">
303 <button class="wvButton"
304 data-toggle="tooltip" data-title="Combined tool"
305 @click="SetMouseButtonActions(stone.MouseAction.GRAYSCALE_WINDOWING, stone.MouseAction.PAN, stone.MouseAction.ZOOM)">
306 <i class="far fa-hand-point-up"></i>
307 </button>
308 </div>
309 <div class="inline-object">
310 <button class="wvButton"
311 data-toggle="tooltip" data-title="Zoom"
312 @click="SetMouseButtonActions(stone.MouseAction.ZOOM, stone.MouseAction.ZOOM, stone.MouseAction.ZOOM)">
313 <i class="fas fa-search"></i>
314 </button>
315 </div>
316 <div class="inline-object">
317 <button class="wvButton"
318 data-toggle="tooltip" data-title="Pan"
319 @click="SetMouseButtonActions(stone.MouseAction.PAN, stone.MouseAction.PAN, stone.MouseAction.PAN)">
320 <i class="fas fa-arrows-alt"></i>
321 </button>
322 </div>
323 </div>
324 </div>
325 </div>
326
327
328
288 <!--div class="ng-scope inline-object"> 329 <!--div class="ng-scope inline-object">
289 <button class="wvButton--underline text-center active"> 330 <button class="wvButton--underline text-center active">
290 <i class="fa fa-hand-pointer-o"></i> 331 <i class="fa fa-hand-pointer-o"></i>
291 </button> 332 </button>
292 </div> 333 </div>
303 </button> 344 </button>
304 </div--> 345 </div-->
305 346
306 <div class="ng-scope inline-object"> 347 <div class="ng-scope inline-object">
307 <button class="wvButton--underline text-center" 348 <button class="wvButton--underline text-center"
349 data-toggle="tooltip" data-title="Invert contrast"
308 v-on:click="InvertContrast()"> 350 v-on:click="InvertContrast()">
309 <i class="fa fa-adjust"></i> 351 <i class="fa fa-adjust"></i>
310 </button> 352 </button>
311 </div> 353 </div>
312 354
313 <div class="ng-scope inline-object"> 355 <div class="ng-scope inline-object">
314 <button class="wvButton--underline text-center" id="windowing-popover"> 356 <button class="wvButton--underline text-center"
357 data-toggle="tooltip" data-title="Change windowing"
358 id="windowing-popover">
315 <i class="fa fa-sun"></i> 359 <i class="fa fa-sun"></i>
316 </button> 360 </button>
317 </div> 361 </div>
318 362
319 <div class="ng-scope inline-object"> 363 <div class="ng-scope inline-object">
320 <button class="wvButton--underline text-center" v-on:click="FlipX()"> 364 <button class="wvButton--underline text-center"
365 data-toggle="tooltip" data-title="Flip horizontally"
366 v-on:click="FlipX()">
321 <i class="fas fa-exchange-alt"></i> 367 <i class="fas fa-exchange-alt"></i>
322 </button> 368 </button>
323 </div> 369 </div>
324 370
325 <div class="ng-scope inline-object"> 371 <div class="ng-scope inline-object">
326 <button class="wvButton--underline text-center" v-on:click="FlipY()"> 372 <button class="wvButton--underline text-center"
373 data-toggle="tooltip" data-title="Flip vertically"
374 v-on:click="FlipY()">
327 <i class="fas fa-exchange-alt fa-rotate-90"></i> 375 <i class="fas fa-exchange-alt fa-rotate-90"></i>
328 </button> 376 </button>
329 </div> 377 </div>
330 378
331 <div class="ng-scope inline-object"> 379 <div class="ng-scope inline-object">
332 <button class="wvButton--underline text-center" 380 <button class="wvButton--underline text-center"
381 data-toggle="tooltip" data-title="Show image information"
333 v-bind:class="{ 'active' : showInfo }" 382 v-bind:class="{ 'active' : showInfo }"
334 v-on:click="showInfo = !showInfo"> 383 v-on:click="showInfo = !showInfo">
335 <i class="fa fa-info-circle"></i> 384 <i class="fa fa-info-circle"></i>
336 </button> 385 </button>
337 </div> 386 </div>
338 387
339 <div class="ng-scope inline-object"> 388 <div class="ng-scope inline-object">
340 <button class="wvButton--underline text-center" 389 <button class="wvButton--underline text-center"
390 data-toggle="tooltip" data-title="Reference lines"
341 v-bind:class="{ 'active' : showReferenceLines }" 391 v-bind:class="{ 'active' : showReferenceLines }"
342 v-on:click="showReferenceLines = !showReferenceLines"> 392 v-on:click="showReferenceLines = !showReferenceLines">
343 <i class="fa fa-bars"></i> 393 <i class="fa fa-bars"></i>
344 </button> 394 </button>
345 </div> 395 </div>
346 396
347 <div class="ng-scope inline-object"> 397 <div class="ng-scope inline-object">
348 <button class="wvButton--underline text-center" 398 <button class="wvButton--underline text-center"
399 data-toggle="tooltip" data-title="User preferences"
349 v-on:click="modalPreferences = true"> 400 v-on:click="modalPreferences = true">
350 <i class="fa fa-user"></i> 401 <i class="fa fa-user"></i>
351 </button> 402 </button>
352 </div> 403 </div>
353 </div> 404 </div>