first layer scan doc

TheSpaghettiDetective · Nov 17, 2023 · a87f414 · a87f414
1 parent 080e5b2
commit a87f414
Show file tree

Hide file tree

Showing 7 changed files with 34,740 additions and 7,010 deletions.
diff --git a/frontend/src/components/CollapsableDetails 2.vue b/frontend/src/components/CollapsableDetails 2.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <!-- Content -->
+    <b-collapse v-model="expanded">
+      <slot></slot>
+    </b-collapse>
+
+    <!-- Toggle -->
+    <button
+      class="collapse-toggle"
+      :class="expanded ? 'opened' : 'closed'"
+      @click="expanded = !expanded"
+    >
+      <span v-if="expanded">Show less</span>
+      <span v-else>Show more</span>
+      <font-awesome-icon :icon="['fas', 'chevron-down']" :class="{ rotated: expanded }" />
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CollapsableDetails',
+
+  data() {
+    return {
+      expanded: false,
+    }
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+.collapse-toggle
+  width: 100%
+  font-weight: bold
+  display: flex
+  align-items: center
+  justify-content: center
+  gap: .5rem
+  background: none
+  border: none
+  color: var(--color-text-primary)
+  margin-top: .5rem
+  svg
+    transition: all .3s ease-in-out
+    &.rotated
+      transform: rotate(180deg)
+</style>
diff --git a/frontend/src/components/SliderInput 2.vue b/frontend/src/components/SliderInput 2.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="slidecontainer">
+    <input
+      type="range"
+      :min="min"
+      :max="max"
+      :step="step"
+      :value="value"
+      class="slider"
+      @change="$emit('change', $event.target.value)"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SliderInput',
+
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+  },
+
+  computed: {},
+  methods: {},
+}
+</script>
+
+<style lang="sass" scoped>
+.slidecontainer
+  width: 100%
+
+.slider
+  -webkit-appearance: none
+  appearance: none
+  width: 100%
+  height: 5px
+  background: var(--color-input-background)
+  outline: none
+  border: none
+
+// The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
+.slider::-webkit-slider-thumb
+  -webkit-appearance: none
+  appearance: none
+  width: 25px
+  height: 25px
+  border-radius: 50%
+  background: var(--color-text-primary)
+  cursor: pointer
+  border: none
+
+.slider::-moz-range-thumb
+  width: 25px
+  height: 25px
+  border-radius: 50%
+  background: var(--color-text-primary)
+  cursor: pointer
+  border: none
+</style>
diff --git a/frontend/src/components/printer-control/TerminalWidget 2.vue b/frontend/src/components/printer-control/TerminalWidget 2.vue
@@ -0,0 +1,222 @@
+<template>
+  <widget-template>
+    <template #title>Printer Terminal</template>
+    <template #content>
+      <div class="actionWrap">
+        <a :href="`/printers/${printer.id}/terminal/`">
+          <div class="actionBtn">
+            <i class="fas fa-expand actionIcon"></i>
+          </div>
+        </a>
+        <div class="actionBtn" @click="clearFeed">
+          <i class="fas fa-trash actionIcon"></i>
+        </div>
+        <b-dropdown
+          right
+          no-caret
+          class="actionBtnNoP"
+          toggle-class="action-btn icon-btn"
+          menu-class="scrollable"
+          title="Filter"
+        >
+          <template #button-content>
+            <i class="fas fa-filter"></i>
+          </template>
+          <div>
+            <div>
+              <b-dropdown-text class="small text-secondary">Filter</b-dropdown-text>
+              <b-dropdown-item
+                @click.native.capture.stop.prevent="
+                  updateFilterPrefs('temperature', !hideTempMessages)
+                "
+              >
+                <div class="dropdown-text-group">
+                  <i
+                    class="fas fa-check text-primary"
+                    :style="{ visibility: hideTempMessages ? 'visible' : 'hidden' }"
+                  ></i>
+                  <div class="filterItemH">
+                    <i class="fas fa-fire"></i>
+                    <div class="text">Suppress Temperature</div>
+                  </div>
+                </div>
+              </b-dropdown-item>
+              <b-dropdown-item
+                @click.native.capture.stop.prevent="updateFilterPrefs('sd', !hideSDMessages)"
+              >
+                <div class="dropdown-text-group">
+                  <i
+                    class="fas fa-check text-primary"
+                    :style="{ visibility: hideSDMessages ? 'visible' : 'hidden' }"
+                  ></i>
+                  <div class="filterItemH">
+                    <i class="fas fa-sd-card"></i>
+                    <div class="text">Suppress SD Status Messages</div>
+                  </div>
+                </div>
+              </b-dropdown-item>
+              <b-dropdown-item
+                @click.native.capture.stop.prevent="updateFilterPrefs('gcode', !hideGCodeMessages)"
+              >
+                <div class="dropdown-text-group">
+                  <i
+                    class="fas fa-check text-primary"
+                    :style="{ visibility: hideGCodeMessages ? 'visible' : 'hidden' }"
+                  ></i>
+                  <div class="filterItemH">
+                    <i class="fas fa-code"></i>
+                    <div class="text">Suppress Position Messages</div>
+                  </div>
+                </div>
+              </b-dropdown-item>
+              <b-dropdown-item
+                @click.native.capture.stop.prevent="updateFilterPrefs('ok', !hideOKMessages)"
+              >
+                <div class="dropdown-text-group">
+                  <i
+                    class="fas fa-check text-primary"
+                    :style="{ visibility: hideOKMessages ? 'visible' : 'hidden' }"
+                  ></i>
+                  <div class="filterItemH">
+                    <i class="fas fa-thumbs-up"></i>
+                    <div class="text">Suppress 'OK' Messages</div>
+                  </div>
+                </div>
+              </b-dropdown-item>
+            </div>
+          </div>
+        </b-dropdown>
+      </div>
+      <div class="wrapper">
+        <terminal-window class="feedWrap" :terminal-feed-array="terminalFeedArray" />
+        <div class="inputWrap">
+          <input
+            v-model="inputValue"
+            type="text"
+            class="textInput"
+            placeholder="Enter code..."
+            @keyup.enter="sendMessage"
+          />
+          <b-button variant="outline-primary" class="sendBtn" @click="sendMessage"> Send </b-button>
+        </div>
+      </div>
+    </template>
+  </widget-template>
+</template>
+
+<script>
+import WidgetTemplate from '@src/components/printer-control/WidgetTemplate'
+import terminalMixin from '@src/components/terminal/terminal-mixin.js'
+import TerminalWindow from '@src/components/terminal/TerminalWindow'
+
+export default {
+  name: 'TerminalWidget',
+
+  components: {
+    WidgetTemplate,
+    TerminalWindow,
+  },
+
+  mixins: [terminalMixin],
+
+  props: {
+    printer: {
+      type: Object,
+      required: true,
+    },
+    printerComm: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  created() {
+    this.printerComm.onTerminalFeedReceived = this.onNextTerminalFeed
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  display: flex
+  flex-direction: column
+  align-items: center
+  gap: .825rem
+  padding-bottom: 1rem
+  height: 300px
+  position: relative
+
+.feedWrap
+  height: 250px
+  padding: 10px
+  width: 100%
+  background-color: var(--color-background)
+.feedWrap::-webkit-scrollbar
+  background-color: var(--color-background)
+.feedWrap::-webkit-scrollbar-thumb
+  background-color: var(--color-surface-primary)
+
+.inputWrap
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+  height: 50px
+  width: 100%
+  gap: 1rem
+
+.textInput
+  height: 100%
+  flex: 1
+  padding: 10px
+
+.sendBtn
+  height: 100%
+  width: auto
+
+.actionBtn
+  margin-left: 5px
+  margin-right: 5px
+  padding: 10px 16px
+  height: 100%
+  display: flex
+  align-items: center
+  justify-content: center
+  background-color: var(--color-surface-primary)
+  border-radius: var(--border-radius-sm)
+  &:hover
+    cursor: pointer
+
+.actionBtnNoP
+  margin-left: 5px
+  margin-right: 5px
+  height: 100%
+  display: flex
+  align-items: center
+  justify-content: center
+  background-color: var(--color-surface-primary)
+  border-radius: var(--border-radius-sm)
+  z-index: 1
+  &:hover
+    cursor: pointer
+
+.actionIcon
+  width: 16px
+  height: 16px
+  color: var(--color-text-primary)
+
+.actionWrap
+  position: absolute
+  display: flex
+  flex-direction: row
+  top: 0px
+  right: 15px
+  align-items: center
+  justify-content: flex-end
+  width: 100%
+  padding: 10px 15px
+
+.filterItemH
+  display: flex
+  flex-direction: row
+  align-items: center
+</style>