<template>
  <transition name="dialog">
    <div class="dialog-mask">
      <div class="dialog-container">
        <h1>ANTARSTICK</h1>
        <close-icon
          class="icon close-button"
          @click="close"
          v-on:keyup.enter="close"
          v-on:keyup.esc="close"
        />
        <p style="grid-column: 1/3;">
          Welcome to Antarstick, the revision system for snow height data from
          time-lapse cameras. The trail cameras are pointed to a location with
          several snow height markers (or stakes) made from bamboo stalks. Every
          stake is tracked individually, and its snow height is visualized in
          several ways. The tool consists of three interconnected views:
        </p>
        <h2 style="grid-column: 1/3;">Camera view</h2>
        <p>
          The camera view shows the <b>moving averages</b> of individual stakes.
          The <b>dark rectangles</b> show the absence of measurement at this
          time. The darker the color, the more stakes weren't found. This could
          indicate bad conditions when taking the picture. Also, the high spread
          of averages and abrupt changes (spikes) could point towards faulty
          detection.
        </p>
        <img src="HelpDialog/camera-view.png" alt="" />

        <h2 style="grid-column: 1/3;">Stake view</h2>
        <p>
          The stake view is the central part of the whole tool. It shows an
          overview of a single stake, its moving average values, and the
          original data in the form of a <b>point chart</b>. If the stake is
          visible from <b>multiple cameras</b>, every view is shown
          individually. When selecting an individual point, the
          <b>summary chart</b> on the right is replaced by a
          <b>original image preview</b>. When you click on the image, you'll get
          to the image's <b>detailed view</b>.
        </p>
        <img src="HelpDialog/stick-view.png" alt="" />

        <h2 style="grid-column: 1/3;">Image detail</h2>
        <p>
          The detail view allows precise control over the measured data, shown
          as the image overlaid with detected stakes' positions and
          <b>snow height</b>. The image is zoomable, and you can move every
          stake marker around. The changes get submitted when closing the window
          or moving to a different picture. Until then, it's possible to
          <b>undo</b>
          the changes.
        </p>
        <img src="HelpDialog/image-detail.png" alt="" />
        <h3 style="grid-column: 1/3;">Show/hide panel</h3>
        <p>
          Toggle the <b>visibility</b> of stakes, snow markers, or stake labels.
        </p>
        <img src="HelpDialog/show-hide.png" alt="" />
        <h3 style="grid-column: 1/3;">Add or remove a stake</h3>
        <p>
          Select appropriate stake from the drop-down menu and <b>add</b> or
          <b>remove</b> it. (Internally, it only changes the visibility, so no
          data is lost.)
        </p>
        <img src="HelpDialog/add-remove.png" alt="" />
        <h3 style="grid-column: 1/3;">Undo button</h3>
        <p>
          While the image is open, you can <b>undo</b> the changes you made.
          Once you <b>close</b> the image or <b>switch</b> to a different one,
          the changes get applied.
        </p>
        <img src="HelpDialog/undo.png" alt="" />
        <h3 style="grid-column: 1/3;">Time shift</h3>
        <p>
          You can select a new date and time for the image.
          <b>Important!</b> When changing the date and time, the whole
          time-lapse of this camera changes with it! This is useful when the
          cameras weren't synchronized in the field.
        </p>
        <img src="HelpDialog/time-shift.png" alt="" />
        <h3 style="grid-column: 1/3;">Approve/discard an image</h3>
        <p>
          Every time you edit the data, the image gets <b>approved</b>, and its
          <b>datapoint</b> changes color. If you need to leave the image, you
          can uncheck the approved checkbox and come back later.
          <br />
          When you <b>discard</b> the image (usually due to poor quality), it is
          marked in the <b>film strip</b> view below, and its datapoint changes.
        </p>
        <img src="HelpDialog/approve-discard.png" alt="" />
        <h3 style="grid-column: 1/3;">Image and stake info</h3>
        <p>
          These boxes show information about the <b>image</b> and the selected
          <b>stake</b>.
        </p>
        <img src="HelpDialog/info.png" alt="" />
        <h3 style="grid-column: 1/3;">Film strip</h3>
        <p>
          Preview of near images. The preview also shows approved or discarded
          images. Pressing <b>left</b> and <b>right</b> arrows everywhere in the
          tool moves the active point.
        </p>
        <img src="HelpDialog/gallery.png" alt="" />

        <h2 style="grid-column: 1/3;">Other features</h2>
        <h3 style="grid-column: 1/3;">Timeline overview</h3>
        <p>
          Shows the full view of the selected stake, as in the stake view. The
          current <b>viewport</b> is displayed on the chart in the form of a
          <b>brush</b>. It's possible to move the brush to navigate in the
          timeline.
        </p>
        <img src="HelpDialog/timeline-overview.png" alt="" />
        <h3 style="grid-column: 1/3;">Filters</h3>
        <div>
          <p>
            Accessible at the <b>top bar</b>, the filters allow showing and
            hiding data based on selected criteria. It doesn't alter the data in
            any way. When setting <i>All</i> from the drop-down menu, you are
            disabling the current filter.
          </p>
          <h4>Snow found</h4>
          <p>
            To improve its accuracy, the automatic classifier checks for the
            presence of snow. If it doesn't find any, it doesn't search the
            image further. This prevents many mislabeled stakes due to rough,
            textured terrain. However, some of the <i>no snow</i> images may be
            mislabeled. It's then a good idea to check some of them, especially
            if they appear in the clusters of <i>snowy</i> pictures.
          </p>
          <h4>Manually edited</h4>
          <p>
            This filter takes into account individually touched-up stakes as
            well as <b>approved</b> images.
          </p>
        </div>
        <img src="HelpDialog/filters.png" alt="" />
        <h3 style="grid-column: 1/3;">Legend</h3>
        <p>
          The legend button is also located in the top bar and shows the color
          and symbol encoding of the dataset.
        </p>
        <img src="HelpDialog/legend.png" alt="" />
        <h3 style="grid-column: 1/3;">Save</h3>
        <p>
          Saves the edited dataset to disc.
        </p>
        <img src="HelpDialog/save.png" alt="" />
        <p style="grid-column: 1/3; font-size:10px;">
          Matěj Lang, 2021. Don't panic.
        </p>
      </div>
    </div>
  </transition>
</template>

<script>
import CloseIcon from 'icons/Close'

export default {
  name: 'HelpDialog',
  components: {
    CloseIcon
  },
  computed: {},
  methods: {
    close() {
      this.$store.dispatch('setShowHelpDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-mask {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.15s ease;
}

.dialog-container {
  width: 70%;
  margin: 20px auto;
  padding: 30px;
  background-color: var(--color-background);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;

  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;

  max-height: 85vh;
  overflow: auto;
}

.dialog-enter {
  opacity: 0;
}

.dialog-leave-active {
  opacity: 0;
}

.dialog-enter .dialog-container,
.dialog-leave-active .dialog-container {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.close-button {
  align-self: top;
  justify-self: right;
}

h1 {
  margin: 10px 0;
}
h2,
h3 {
  margin: 5px 0;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  // align-self: top;
  justify-self: center;
}
</style>
