@qispace/vue3-player 0.0.5

package/src/components/buildingPicker/QiBuildingChooserRasterOverlay.vue

@@ -0,0 +1,96 @@
+<template>
+  <canvas ref="canvas" class="overlay" v-bind="dimensions" />
+</template>
+
+<script>
+import { ResourceLoader } from '@/lib/shared/ResourceLoader'
+
+export default {
+  name: 'QiBuildingChooserRasterOverlay',
+  props: {
+    imageUrl: { type: String, required: true },
+    dimensions: { type: Object, required: true },
+    color: {
+      type: Object,
+      default: () => ({ r: 108, g: 0, b: 108, a: 144, s: 2 }),
+    },
+  },
+  data() {
+    return {
+      isLoaded: false,
+      overlayImage: undefined,
+      resourceLoader: new ResourceLoader(),
+      context: undefined,
+      imageData: undefined,
+      imageDataIndices: [],
+    }
+  },
+  watch: {
+    color(oldValue, newValue) {
+      if (
+        oldValue.r !== newValue.r ||
+        oldValue.g !== newValue.g ||
+        oldValue.b !== newValue.b ||
+        oldValue.a !== newValue.a
+      ) {
+        this.draw()
+      }
+    },
+  },
+  async mounted() {
+    this.overlayImage = await this.resourceLoader.loadImage(this.imageUrl)
+    this.setupDraw()
+  },
+  methods: {
+    setupDraw() {
+      if (!this.overlayImage || !this.$refs.canvas) {
+        return
+      }
+
+      const { width, height } = this.dimensions
+      if (width === 0 || height === 0) {
+        return
+      }
+
+      this.context = this.$refs.canvas.getContext('2d', {
+        willReadFrequently: true,
+      })
+      this.context.drawImage(this.overlayImage, 0, 0, width, height)
+      this.imageData = this.context.getImageData(0, 0, width, height)
+      for (let i = 3; i < this.imageData.data.length; i += 4) {
+        if (this.imageData.data[i] !== 0) {
+          this.imageDataIndices.push(i)
+        }
+      }
+      this.draw()
+      this.isLoaded = true
+    },
+    draw() {
+      if (this.context && this.imageData) {
+        this.applyColor()
+        this.context.putImageData(this.imageData, 0, 0)
+      }
+    },
+    applyColor() {
+      if (this.color) {
+        for (let i = 0; i < this.imageDataIndices.length; i++) {
+          this.imageData.data[this.imageDataIndices[i] - 3] = this.color.r
+          this.imageData.data[this.imageDataIndices[i] - 2] = this.color.g
+          this.imageData.data[this.imageDataIndices[i] - 1] = this.color.b
+          this.imageData.data[this.imageDataIndices[i]] = this.color.a
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.overlay {
+  z-index: 1 !important;
+  opacity: 1;
+  transition-property: opacity;
+  transition-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+</style>

package/src/components/buildingPicker/QiBuildingChooserSceneImageStack.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <img
+      ref="baseImage"
+      class="image-instance zero"
+      :style="{ opacity: 1, borderRadius: 50 }"
+      @load="onPreloaded"
+    />
+    <div
+      v-if="state === 'preloaded' || state === 'loaded'"
+      v-show="state === `loaded`"
+    >
+      <img
+        v-for="(url, index) in imageUrls"
+        :key="index"
+        :class="{ 'image-instance': true, active: index === activeIndex }"
+        :src="url"
+        @load="loadTracker.partLoaded()"
+      />
+      Here
+    </div>
+  </div>
+</template>
+
+<script>
+import { BatchLoadTracker } from "@/lib/shared/BatchLoadTracker";
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  setup() {},
+  name: "QiBuildingChooserSceneImageStack",
+  props: {
+    imageUrls: { type: Array, required: true },
+    activeIndex: { type: Number, required: true },
+  },
+  emits: ["resize", "ready", "preloaded", "reset"],
+  data() {
+    return {
+      state: "init",
+      activeStates: ["preloaded", "loaded"],
+      loadTracker: new BatchLoadTracker(0),
+    };
+  },
+  watch: {
+    imageUrls(newImages) {
+      this.$emit("reset");
+      this.loadImages(newImages);
+    },
+  },
+  mounted() {
+    this.loadImages(this.imageUrls);
+    new ResizeObserver((entries) => {
+      window.requestAnimationFrame(() => {
+        const width = entries[0].contentRect.width;
+        const height = entries[0].contentRect.height;
+        this.$emit("resize", { width, height });
+      });
+    }).observe(this.$refs.baseImage);
+  },
+  methods: {
+    onPreloaded() {
+      this.state = "preloaded";
+      this.$emit("preloaded");
+    },
+    loadImages(imageUrls) {
+      this.state = "init";
+      this.$refs.baseImage.src = imageUrls[0];
+      this.loadTracker = new BatchLoadTracker(imageUrls.length).onLoadFinished(
+        () => {
+          this.state = "loaded";
+          this.$emit("ready");
+        }
+      );
+    },
+  },
+});
+</script>
+
+<style scoped>
+.image-instance {
+  position: absolute;
+  width: 100%;
+  opacity: 0;
+}
+
+.image-instance.active {
+  opacity: 1;
+}
+</style>

package/src/components/buildingPicker/QiBuildingChooserSunSimControl.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="sunsim-bar-wrapper">
+    <div class="sunsim-date d-flex align-center pl-5 pr-5">
+      <v-icon
+        color="black"
+        class="mr-2"
+        icon="mdi-calendar-blank-outline"
+      ></v-icon>
+      <v-select
+        v-if="dateSelector.hasMultipleDates"
+        v-model="currentDate"
+        :items="dates"
+        density="compact"
+        variant="underlined"
+        hide-details
+        class="day-selector"
+      />
+      <span v-else class="text-center text-body-1">{{ selectedDate }}</span>
+    </div>
+    <div class="sunsim-wrapper d-flex align-center px-3">
+      <span class="sunsim-time-label text-body-1 font-weight-normal ml-2">
+        {{ currentValueString }}
+      </span>
+      <v-icon medium class="ml-2 mr-2 icon">mdi-white-balance-sunny</v-icon>
+      <v-progress-linear
+        v-if="isLoading"
+        indeterminate
+        rounded
+        height="6"
+        color="grey lighten-1"
+        class="mr-2"
+      />
+      <v-slider
+        v-else
+        v-model="currentValue"
+        :min="0"
+        :max="47"
+        :step="1"
+        :thumb-label="false"
+        :hide-details="true"
+        thumb-color="white"
+        thumb-size="25"
+        track-size="7"
+        track-fill-color="transparent"
+        class="sunsim-slider mr-1"
+      ></v-slider>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+
+function formatDate(date) {
+  return date.toLocaleString("en-no", {
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export default defineComponent({
+  setup() {},
+  name: "QiBuildingChooserSunSimControl",
+  props: {
+    modelValue: { type: Number, required: true },
+    dateSelector: { type: Object, required: true },
+    isLoading: { type: Boolean, default: false },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      currentValue: this.modelValue,
+      currentDate: null,
+    };
+  },
+  computed: {
+    currentValueString() {
+      const hour = Math.floor(this.currentValue / 2)
+        .toString()
+        .padStart(2, "0");
+      const minutes = this.currentValue % 2 === 0 ? "00" : "30";
+      return `${hour}:${minutes}`;
+    },
+    dates() {
+      return this.dateSelector.dates.map(formatDate);
+    },
+    selectedDate: {
+      get() {
+        return formatDate(this.dateSelector.selectedDate);
+      },
+      set(value) {
+        this.dateSelector.selectIndex(this.dates.indexOf(value));
+      },
+    },
+  },
+  watch: {
+    currentValue(newValue) {
+      this.$emit("update:modelValue", newValue);
+    },
+    modelValue(newValue) {
+      this.currentValue = Math.floor(newValue);
+    },
+    dates: {
+      handler(newValue) {
+        this.currentDate = formatDate(this.dateSelector.selectedDate);
+      },
+      immediate: true,
+    },
+    currentDate(newValue) {
+      this.dateSelector.selectIndex(this.dates.indexOf(newValue));
+    },
+  },
+  methods: {},
+});
+</script>
+
+<style scoped>
+.sunsim-time-label {
+  color: #000;
+  vertical-align: top;
+}
+
+.sunsim-date {
+  background: #fff;
+  border-radius: 30px;
+  min-height: 36px;
+  min-width: 170px;
+  display: flex;
+  align-content: center;
+  white-space: nowrap;
+}
+
+.day-selector {
+  margin-top: 0px;
+}
+
+.day-selector :deep(.v-field__outline) {
+  display: none;
+}
+
+.day-selector :deep(.v-field__input) {
+  padding-top: 2px;
+}
+
+.day-selector :deep(.v-field__append-inner) {
+  padding-top: 5px !important;
+}
+
+.day-selector.v-text-field :deep(.v-input__control > .v-input__slot:before) {
+  border-style: none;
+}
+
+.day-selector.v-text-field :deep(.v-input__control > .v-input__slot:after) {
+  border-style: none;
+}
+
+.sunsim-slider :deep(.v-slider-track__background) {
+  background: linear-gradient(
+    270deg,
+    #8183c2 0%,
+    #ffb9b9 20.01%,
+    #b2dfff 40.1%,
+    #b2dfff 59.85%,
+    #ffba96 79.96%,
+    #8183c2 100%
+  ) !important;
+}
+</style>
+
+<style>
+.sunsim-bar-wrapper {
+  display: flex;
+  position: absolute;
+  width: calc(60%);
+  min-width: 400px;
+  top: 12px;
+  left: 0px;
+  z-index: 3;
+  touch-action: none;
+  pointer-events: none;
+}
+
+.sunsim-wrapper {
+  width: 100%;
+  background: #fff;
+  border-radius: 30px;
+  padding: 5px;
+  min-height: 16px;
+  z-index: 3;
+}
+.sunsim-bar-wrapper .sunsim-date {
+  margin-right: 12px;
+  margin-left: 12px;
+}
+.sunsim-wrapper,
+.sunsim-date {
+  touch-action: auto;
+  pointer-events: all;
+}
+
+.sunsim-wrapper .mdi-white-balance-sunny {
+  color: #ffab02;
+  vertical-align: baseline;
+  font-size: 20px;
+}
+
+@media only screen and (max-width: 980px) and (min-width: 500px) {
+  .sunsim-bar-wrapper {
+    top: 101%;
+    width: 100%;
+  }
+  .sunsim-bar-wrapper .sunsim-date {
+    margin-left: 0;
+  }
+}
+
+@media only screen and (max-width: 980px) and (min-width: 500px) and (orientation: landscape) {
+  .sunsim-bar-wrapper {
+    top: calc(100% + 8px);
+    width: 100%;
+  }
+  .sunsim-bar-wrapper .sunsim-date {
+    margin-left: 0;
+  }
+  .sunsim-bar-wrapper .sunsim-date,
+  .sunsim-bar-wrapper .sunsim-wrapper {
+    box-shadow: 0px 0px 7px 1px #aaa;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .sunsim-bar-wrapper {
+    height: calc(100% + 84px);
+    top: 0;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: -42px 0 0 0;
+    padding: 0;
+    left: 0;
+    z-index: 0;
+    min-width: 100%;
+  }
+  .sunsim-bar-wrapper .sunsim-date {
+    margin-right: 0;
+    margin-left: 0;
+  }
+  .sunsim-bar-wrapper .sunsim-date,
+  .sunsim-bar-wrapper .sunsim-wrapper {
+    width: 100%;
+    border-radius: 0;
+    left: 0;
+    margin-left: 0 !important;
+    box-shadow: 0px 0px 7px 1px #aaa;
+  }
+}
+</style>