EMC/src/pages/index.vue

<script setup>
defineOptions({
  name: 'IndexPage',
})

let currentImgUrl = $ref('')
const getPrimaryImg = async () => {
  const imgBase64 = (await window.pywebview.api.getPrimaryImg()) // 前端调用Python暴露的方法
  currentImgUrl = `data:image/jpg;base64,${imgBase64}`
}

const settings = reactive({
  toggleSetting: false,
  tipSetting: false,
  controlSetting: false,
})
const getIndexSetting = async () => {
  [settings.toggleSetting, settings.tipSetting, settings.controlSetting] = await window.pywebview.api.getIndexSetting()
}

let timer
let isShowImgOnTime = $ref(false)
let eyeOpen = $ref(false)
let mouthOpen = $ref(false)
const setImgShow = () => {
  timer = setInterval(async () => {
    const [time, result, imgBase64] = await window.pywebview.api.getDetectImg()
    currentImgUrl = `data:image/jpg;base64,${imgBase64}`
    isShowImgOnTime = true
    for (let i = 0; i < result.length; i++) {
      switch (result[i].classid) {
        case ('closed_eye'):
          eyeOpen = false
          break
        case ('open_eye'):
          eyeOpen = true
          break
        case ('closed_mouth'):
          mouthOpen = false
          break
        case ('open_mouth'):
          mouthOpen = true
          break
      }
    }
  }, 50)
}

watch(() => settings, async () => {
  await window.pywebview.api.changeSetting({
    toggle: settings.toggleSetting,
    tip: settings.tipSetting,
    control: settings.controlSetting,
  })
},
{
  deep: true,
})

const { t } = useI18n()

onBeforeUnmount(() => {
  clearInterval(timer)
})
onBeforeMount(async () => {
  await getPrimaryImg()
  await getIndexSetting()
})
</script>

<template>
  <div class="flex justify-center ">
    <div class="">
      <div class="pr-9">
        <div class="text-5xl bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-sky-400 font-extrabold">
          EMC
        </div>
        <div class="text-gray-400">
          眼控/嘴控小工具
        </div>
        <div class="bg-gray-100 p-3 rounded-md mt-4">
          <div>实时情况:</div>
          <d-toggle text="眼开" class="pt-2" :disabled="true" :checked="eyeOpen" />
          <d-toggle text="嘴张" class="pt-2" :disabled="true" :checked="mouthOpen" />
        </div>
        <d-toggle v-model:checked="settings.toggleSetting" text="启用" class="pt-4" />
        <d-toggle v-model:checked="settings.tipSetting" text="触发提醒" class="pt-4" />
        <d-select v-model:options="settings.controlSetting" class="select select-bordered select-primary mt-5" />
      </div>
      <div class="item-center flex flex-col pr-9 mt-5">
        <div>
          <router-link to="/AdvancedSettings" class="hover:underline hover:link-primary">
            {{ t('Settings.Advanced') }}
          </router-link>
        </div>
        <div>
          <router-link to="/Personalization" class="hover:underline mt-3 hover:link-primary">
            {{ t('Settings.Personalization') }}
          </router-link>
        </div>
      </div>
    </div>

    <div class="flex justify-center">
      <figure class="max-w-lg ">
        <div class="indicator max-w-lg ">
          <div class="indicator-item indicator-bottom">
            <button v-if="!isShowImgOnTime" class="btn btn-primary" @click="setImgShow">
              实时显示
            </button>
          </div>
          <div class="card border">
            <img class="max-w-full h-auto rounded-lg bg-contain bg-clip-border" :src="currentImgUrl" alt="image description">
          </div>
        </div>

        <figcaption class="mt-2 text-sm text-center text-gray-500 dark:text-gray-400">
          {{ isShowImgOnTime ? '实时图像' : '当前图像' }}
        </figcaption>
      </figure>
    </div>
  </div>
</template>

<style scoped>

</style>

<route lang="yaml">
meta:
  layout: home
</route>