diff options
Diffstat (limited to 'electron/src/renderer/components/Simulator.vue')
| -rw-r--r-- | electron/src/renderer/components/Simulator.vue | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/electron/src/renderer/components/Simulator.vue b/electron/src/renderer/components/Simulator.vue new file mode 100644 index 00000000..c6a190fb --- /dev/null +++ b/electron/src/renderer/components/Simulator.vue @@ -0,0 +1,268 @@ +<template> + <div ref="simulator" class="simulator vld-parent"> + <fieldset> + <div class="window-controls"> + <div ref="controlInfoButton" class="control-info-button" v-on:click="toggleInfo"> + <font-awesome-icon icon="info"/> + <collapse-transition> + <div class="control-info" v-show="infoExpanded" v-bind:style="{'max-height': infoMaxHeight + 'px'}"> + <h1> + <font-awesome-icon icon="info" class="info-icon"/> + <translate>Simulator Shortcut Keys</translate> + </h1> + <div> + <div> + <p> + <translate>Button</translate> + </p> + <p> + <translate>Function</translate> + </p> + <p> + <translate>Shortcut Key</translate> + </p> + </div> + <div> + <p> + <font-awesome-icon icon="pause" class="fa-button"/> + </p> + <p> + <translate>Pause</translate> + </p> + <p> + <translate>Space</translate> + </p> + </div> + <div> + <p> + <font-awesome-icon icon="play" class="fa-button"/> + </p> + <p> + <translate>Play</translate> + </p> + <p>P</p> + </div> + <div> + <p> + <font-awesome-icon icon="angle-double-left" class="fa-button"/> + </p> + <p> + <translate>Play backward</translate> + </p> + <p> + <translate translate-comment="name for left arrow keyboard key">← Arrow left</translate> + </p> + </div> + <div> + <p> + <font-awesome-icon icon="angle-double-right" class="fa-button"/> + </p> + <p> + <translate>Play forward</translate> + </p> + <p> + <translate translate-comment="name for right arrow keyboard key">→ Arrow right</translate> + </p> + </div> + <div> + <p> + <font-awesome-icon icon="shoe-prints" class="fa-button fa-flip-horizontal"/> + </p> + <p> + <translate translate-comment="description of keyboard shortcut that moves one stitch backward in simulator"> + One step backward + </translate> + </p> + <p>- + <translate translate-comment="name for this keyboard key: -">Minus</translate> + </p> + </div> + <div> + <p> + <font-awesome-icon icon="shoe-prints" class="fa-button"/> + </p> + <p> + <translate translate-comment="description of keyboard shortcut that moves one stitch forward in simulator"> + One step forward + </translate> + </p> + <p> + <translate translate-comment="name for this keyboard key: +">+ Plus</translate> + </p> + </div> + <div> + <p> + <font-awesome-icon icon="step-backward" class="fa-button"/> + </p> + <p> + <translate>Jump to previous command</translate> + </p> + <p><translate translate-comment="name for page down keyboard key">Page down (PgDn)</translate></p> + </div> + <div> + <p> + <font-awesome-icon icon="step-forward" class="fa-button"/> + </p> + <p> + <translate>Jump to next command</translate> + </p> + <p><translate translate-comment="name for page up keyboard key">Page up (PgUp)</translate></p> + </div> + <div> + <p> + <font-awesome-icon icon="hippo" class="fa-button"/> + </p> + <p> + <translate>Slow down</translate> + </p> + <p> + <translate translate-comment="name for down arrow keyboard key">↓ Arrow down</translate> + </p> + </div> + <div> + <p> + <font-awesome-icon icon="horse" class="fa-button"/> + </p> + <p> + <translate>Speed up</translate> + </p> + <p> + <translate translate-comment="name for up arrow keyboard key">↑ Arrow up</translate> + </p> + </div> + </div> + </div> + </collapse-transition> + </div> + <div class="toggle-controls" v-on:click="toggleControls"> + <font-awesome-icon v-if="controlsExpanded" icon="minus"/> + <font-awesome-icon v-else icon="plus"/> + </div> + </div> + <collapse-transition> + <div class="panel" v-show="controlsExpanded"> + <fieldset class="controls"> + <legend> + <translate>Controls</translate> + </legend> + <button v-on:click="stop" :class="{pressed: paused}" :title="$gettext('Pause (space)')"> + <font-awesome-icon icon="pause" size="2x" class="fa-button"/> + </button> + <button v-on:click="start" :class="{pressed: animating}" :title="$gettext('Play (arrow left | arrow right)')"> + <font-awesome-icon icon="play" size="2x" class="fa-button"/> + </button> + <button v-on:click="animationReverse" :class="{pressed: reverse}" :title="$gettext('Play backward (arrow left)')"> + <font-awesome-icon icon="angle-double-left" size="2x" class="fa-button" :mask="['fas', 'stop']"/> + </button> + <button v-on:click="animationForward" :class="{pressed: forward}" :title="$gettext('Play forward (arrow right)')"> + <font-awesome-icon icon="angle-double-right" size="2x" class="fa-button" :mask="['fas', 'stop']"/> + </button> + <button v-on:click="animationBackwardOneStitch" :title="$gettext('One step backward (-)')"> + <font-awesome-icon icon="shoe-prints" size="2x" class="fa-button fa-flip-horizontal"/> + </button> + <button v-on:click="animationForwardOneStitch" :title="$gettext('One step forward (+)')"> + <font-awesome-icon icon="shoe-prints" size="2x" class="fa-button"/> + </button> + <button v-on:click="animationPreviousCommand" :title="$gettext('Jump to previous command (Page down)')"> + <font-awesome-icon icon="step-backward" size="2x" class="fa-button"/> + </button> + <button v-on:click="animationNextCommand" :title="$gettext('Jump to next command (Page up)')"> + <font-awesome-icon icon="step-forward" size="2x" class="fa-button"/> + </button> + </fieldset> + <fieldset class="speed"> + <legend> + <translate :translate-n="speed" translate-plural="Speed: %{speed} stitches/sec">Speed: %{speed} stitch/sec</translate> + </legend> + <button v-on:click="animationSlowDown" :title="$gettext('Slow down (arrow down)')"> + <font-awesome-icon icon="hippo" size="2x" class="fa-button"/> + </button> + <button v-on:click="animationSpeedUp" :title="$gettext('Speed up (arrow up)')"> + <font-awesome-icon icon="align-right" class="fa-motion-lines"/> + <font-awesome-icon icon="horse" size="2x" class="fa-button fa-fast"/> + </button> + </fieldset> + <fieldset class="command"> + <legend> + <translate>Command</translate> + </legend> + <span class="current-command">{{currentCommand}}</span> + </fieldset> + <fieldset class="show-commands"> + <legend>Show</legend> + <span> + <input id="trim-checkbox" type="checkbox" v-model="showTrims"/> + <label for="trim-checkbox"><font-awesome-icon icon="cut"/> <translate>trims</translate></label> + <br/> + <input id="jump-checkbox" type="checkbox" v-model="showJumps"/> + <label for="jump-checkbox"><font-awesome-icon icon="frog"/> <translate>jumps</translate></label> + </span> + <span> + <input id="color-change-checkbox" type="checkbox" v-model="showColorChanges"/> + <label for="color-change-checkbox"><font-awesome-icon icon="exchange-alt"/> <translate>color changes</translate></label> + <br/> + <input id="stop-checkbox" type="checkbox" v-model="showStops"/> + <label for="stop-checkbox"><font-awesome-icon icon="pause"/> <translate>stops</translate></label> + </span> + <span class="npp"> + <input id="npp-checkbox" type="checkbox" v-model="showNeedlePenetrationPoints"/> + <label for="npp-checkbox"> + <font-awesome-layers> + <font-awesome-icon icon="circle" transform="shrink-9"/> + <font-awesome-icon icon="minus" class="fa-thin-line"/> + </font-awesome-layers> + <span v-translate>needle<br/>points</span> + </label> + </span> + <span> + <input id="realistic-checkbox" type="checkbox" v-model="showRealisticPreview"/> + <label for="realistic-checkbox"><font-awesome-icon icon="eye"/> <span v-translate>realistic</span></label> + <br/> + <input id="cursor-checkbox" type="checkbox" v-model="showCursor"/> + <label for="cursor-checkbox"><font-awesome-icon icon="plus"/> <span v-translate>cursor</span></label> + </span> + </fieldset> + </div> + </collapse-transition> + <div class="slider-container"> + <span>1</span> + <span class="slider-box"> + <vue-slider + :value="currentStitchDisplay" + @change="setCurrentStitch" + :min="0" + :max="numStitches" + :duration="0" + :marks="sliderMarks" + :process="sliderProcess"> + <template v-slot:label="mark"> + <div :class="['vue-slider-mark-label', `slider-label-${mark.command}`, { active: mark.active }]"> + <font-awesome-icon :icon="mark.icon"/> + </div> + </template> + </vue-slider> + </span> + <span>{{numStitches}}</span> + <input ref="currentStitchInput" + class="current-stitch-input" + :value="currentStitchDisplay" + @change="onCurrentStitchEntered" + @focus="stop"/> + </div> + </fieldset> + <loading :active.sync="loading" :is-full-page="false"> + <div class="loading"> + <div class="loading-icon"> + <font-awesome-icon icon="spinner" size="4x" pulse/> + </div> + <div class="loading-text"> + <translate>Rendering stitch-plan...</translate> + </div> + </div> + </loading> + </div> +</template> + +<script src="../assets/js/simulator.js"></script> + +<style src="../assets/style/simulator.css" scoped></style> |