Skip to content

Mouse keyboard controls #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 11, 2024
Merged

Mouse keyboard controls #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2c040e2
Add a component with the available mouse/keyboard controls
bnmajor Jan 11, 2024
c839c20
Add controls container to the label setup page
bnmajor Jan 11, 2024
8844464
Add the controls component to the keyboard shortcuts component
bnmajor Jan 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion ...beling/web_client/views/vue/components/ActiveLearning/ActiveLearningKeyboardShortcuts.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@ import _ from 'underscore';

import { store, previousCard, nextCard } from './store.js';

import MouseAndKeyboardControls from '../MouseAndKeyboardControls.vue';

export default Vue.extend({
components: {
MouseAndKeyboardControls
},
data() {
return {
showShortcuts: true
Expand Down Expand Up @@ -54,6 +59,7 @@ export default Vue.extend({

<template>
<div class="h-hotkeys-container">
<mouse-and-keyboard-controls :active-learning-setup="false" />
<div class="h-hotkeys-header">
<h5>Hotkeys</h5>
<button
Expand Down Expand Up @@ -98,7 +104,8 @@ export default Vue.extend({
top: 5px;
left: 5px;
padding: 5px;
min-width: 200px;
min-width: 250px;
max-width: 250px;
display: flex;
flex-direction: column;
background-color: white;
Expand All @@ -120,4 +127,8 @@ export default Vue.extend({
font-size: 12px;
display: flex;
}

.h-bindings {
font-size: 12px;
}
</style>
197 changes: 104 additions & 93 deletions ...eling/web_client/views/vue/components/ActiveLearningSetup/ActiveLearningInitialLabels.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { restRequest } from '@girder/core/rest';
import { ViewerWidget } from '@girder/large_image_annotation/views';
import ColorPickerInput from '@girder/histomicsui/vue/components/ColorPickerInput.vue';

import MouseAndKeyboardControls from '../MouseAndKeyboardControls.vue';

// Define some helpful constants for adding categories
const boundaryColor = 'rgba(0, 0, 0, 1)';
const defaultNewCategoryColor = 'rgba(255, 0, 0, 0.5)';
Expand All @@ -18,7 +20,8 @@ const colorPattern = /^(#[0-9a-fA-F]{3,4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}|rgb\(\

export default Vue.extend({
components: {
ColorPickerInput
ColorPickerInput,
MouseAndKeyboardControls
},
props: ['backboneParent', 'imageNamesById', 'annotationsByImageId'],
data() {
Expand Down Expand Up @@ -400,105 +403,110 @@ export default Vue.extend({
<template>
<div class="h-al-setup-categories">
<div
v-if="pixelmapRendered"
class="h-add-new-category"
class="h-setup-categories-body"
>
<div class="h-category-form">
<div class="h-form-controls">
<div class="form-group">
<label for="category-label">Label</label>
<input
id="category-label"
v-model="currentCategoryLabel"
class="form-control input-sm h-active-learning-input"
>
</div>
<div class="form-group">
<label for="fill-color">Fill Color</label>
<color-picker-input
:key="categoryIndex"
v-model="currentCategoryFillColor"
class="h-active-learning-input"
:color="currentCategoryFillColor"
/>
<div
v-if="pixelmapRendered"
class="h-add-new-category"
>
<div class="h-category-form">
<div class="h-form-controls">
<div class="form-group">
<label for="category-label">Label</label>
<input
id="category-label"
v-model="currentCategoryLabel"
class="form-control input-sm h-active-learning-input"
>
</div>
<div class="form-group">
<label for="fill-color">Fill Color</label>
<color-picker-input
:key="categoryIndex"
v-model="currentCategoryFillColor"
class="h-active-learning-input"
:color="currentCategoryFillColor"
/>
</div>
</div>
</div>
<div class="h-error-messages">
<p
v-if="!currentCategoryFormValid || !currentLabelsValid"
class="form-validation-error"
>
Please fix all errors to continue
</p>
<ul v-if="currentFormErrors.length > 0">
<li
v-for="error in currentFormErrors"
:key="error"
class="form-validation-error"
>
{{ error }}
</li>
</ul>
<ul v-if="currentLabelingErrors.length > 0">
<li
v-for="error in currentLabelingErrors"
:key="error"
<div class="h-error-messages">
<p
v-if="!currentCategoryFormValid || !currentLabelsValid"
class="form-validation-error"
>
{{ error }}
</li>
</ul>
Please fix all errors to continue
</p>
<ul v-if="currentFormErrors.length > 0">
<li
v-for="error in currentFormErrors"
:key="error"
class="form-validation-error"
>
{{ error }}
</li>
</ul>
<ul v-if="currentLabelingErrors.length > 0">
<li
v-for="error in currentLabelingErrors"
:key="error"
class="form-validation-error"
>
{{ error }}
</li>
</ul>
</div>
</div>
</div>
<button
class="btn btn-primary h-previous-category-btn"
:disabled="categoryIndex === 0 || !currentCategoryFormValid"
@click="previousCategory"
>
Previous
</button>
<button
class="btn btn-primary h-next-category-btn"
:disabled="categoryIndex >= categories.length - 1 || !currentCategoryFormValid"
@click="nextCategory"
>
Next
</button>
<button
class="btn btn-primary h-add-category-btn"
:disabled="!currentCategoryFormValid"
@click="addCategory"
>
Add Category
</button>
<button
class="btn btn-primary h-start-training-btn"
:disabled="!currentCategoryFormValid || !currentLabelsValid"
@click="beginTraining"
>
Begin training
</button>
<div class="h-al-image-selector">
<span>Image: </span>
<select
v-model="currentImageId"
class="h-al-image-select"
<button
class="btn btn-primary h-previous-category-btn"
:disabled="categoryIndex === 0 || !currentCategoryFormValid"
@click="previousCategory"
>
Previous
</button>
<button
class="btn btn-primary h-next-category-btn"
:disabled="categoryIndex >= categories.length - 1 || !currentCategoryFormValid"
@click="nextCategory"
>
<option
v-for="imageId in Object.keys(imageNamesById)"
:key="imageId"
:value="imageId"
Next
</button>
<button
class="btn btn-primary h-add-category-btn"
:disabled="!currentCategoryFormValid"
@click="addCategory"
>
Add Category
</button>
<button
class="btn btn-primary h-start-training-btn"
:disabled="!currentCategoryFormValid || !currentLabelsValid"
@click="beginTraining"
>
Begin training
</button>
<div class="h-al-image-selector">
<span>Image: </span>
<select
v-model="currentImageId"
class="h-al-image-select"
>
{{ imageNamesById[imageId] }}
</option>
</select>
<option
v-for="imageId in Object.keys(imageNamesById)"
:key="imageId"
:value="imageId"
>
{{ imageNamesById[imageId] }}
</option>
</select>
</div>
</div>
</div>
<div class="h-setup-categories-body">
<div
ref="map"
class="h-setup-categories-map"
/>
</div>
<div class="h-setup-categories-information">
<mouse-and-keyboard-controls :active-learning-setup="true" />
<div class="h-category-setup-progress">
<div
v-for="(key, index) in Object.keys(labeledSuperpixelCounts)"
Expand All @@ -517,16 +525,19 @@ export default Vue.extend({
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
}
.h-setup-categories-body {
width: 100%;
.h-setup-categories-information {
width: 33%;
height: 100%;
display: flex;
flex-direction: row;
flex-direction: column;
}
.h-setup-categories-map {

.h-setup-categories-body {
width: 67%;
}

.h-setup-categories-map {
height: 600px;
border: 1px solid #f0f0f0;
}
Expand Down
107 changes: 107 additions & 0 deletions wsi_superpixel_guided_labeling/web_client/views/vue/components/MouseAndKeyboardControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<script>
import Vue from 'vue';

export default Vue.extend({
props: ['activeLearningSetup'],
data() {
return {
showControls: true
};
},
mounted() {
// Default to hidden when we are not in the setup step
this.showControls = this.activeLearningSetup;
}
});
</script>

<template>
<div :class="{'h-controls-container': activeLearningSetup}">
<div class="h-controls-header">
<h5>Mouse and Keyboard Controls</h5>
<button
class="h-controls-toggle"
@click="showControls = !showControls"
>
<i
v-if="showControls"
class="icon-up-open"
/>
<i
v-else
class="icon-down-open"
/>
</button>
</div>
<div v-if="showControls">
<h6 v-if="activeLearningSetup">
Annotations
</h6>
<ul
v-if="activeLearningSetup"
class="h-controls"
>
<li>Left-click: Label single superpixel</li>
<li>Shift-left-drag: Continuously label superpixels</li>
</ul>
<h6>Pan</h6>
<ul class="h-controls">
<li>Left-drag</li>
<li>Middle-drag: This works even when editing annotations.</li>
<li>Single touch drag</li>
<li v-if="activeLearningSetup">
Arrow keys / Shift-arrow keys / Shift-ctrl-arrow keys
</li>
</ul>
<h6>Zoom</h6>
<ul class="h-controls">
<li>Right-drag</li>
<li>Mouse wheel</li>
<li>Multi-touch spread or contract</li>
<li v-if="activeLearningSetup">
Plus, minus / Shift-plus, shift-minus / Shift-ctrl-plus, shift-ctrl-minus
</li>
<li v-if="activeLearningSetup">
1 - 7: The number keys 1 - 7 will zoom to discrete zoom levels.
</li>
<li>Shift-left-drag, shift-right-drag: Zoom into or out of the selected rectangle</li>
</ul>
<h6>Rotate</h6>
<ul class="h-controls">
<li>Left-ctrl-drag</li>
<li>Ctrl-mouse wheel</li>
<li>Multi-touch rotate</li>
<li v-if="activeLearningSetup">
&lt;, &gt; (also . or ,) rotate the image a small amount. If shift is held down, &lt; and &gt; rotate the image 90 degrees.
</li>
<li v-if="activeLearningSetup">
0: 0 returns the image to the default orientation.
</li>
</ul>
</div>
</div>
</template>

<style scoped>
.h-controls-container {
margin-right: 15px;
}

.h-controls-header {
display: flex;
justify-content: space-between;
}

.h-controls-toggle {
background-color: transparent;
border: none;
}

.h-controls {
font-size: 12px;
}

h6 {
margin-bottom: 0px;
}
</style>