Skip to content

Commit

Permalink
Update the demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@baku89
baku89 committed Sep 27, 2023
1 parent 2c563e3 commit 5279eaa
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 172 deletions.
273 changes: 140 additions & 133 deletions demo/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,151 +14,153 @@
</main>

<aside>
<button @click="toggleCameraConnection">
<button class="connect-button" @click="toggleCameraConnection">
{{ camera ? 'Disconnect' : 'Connect' }}
</button>

<h2>Actions</h2>
<dl v-if="camera">
<template v-if="configs.canTakePhoto.value">
<dt>saveFolder</dt>
<dd>
<button @click="setupSaveFolder">
{{ folderHandler ? folderHandler.name : '(None)' }}
</button>
</dd>
<dt>takePhoto</dt>
<dd><button class="red" @click="takePhoto">Shutter</button></dd>
</template>
<template v-if="configs.canRunAutoFocus.value">
<dt>autoFocus</dt>
<dd><button @click="runAutoFocus">Run</button></dd>
</template>
<template v-if="configs.canRunManualFocus.value">
<dt>manualFocus</dt>
<dd
style="
display: grid;
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;
"
>
<button
v-if="configs.manualFocusOptions.value?.includes('far:1')"
@click="camera.runManualFocus('far:1')"
<template v-if="camera">
<h2>Actions</h2>
<dl>
<template v-if="configs.canTakePhoto.value">
<dt>saveFolder</dt>
<dd>
<button @click="setupSaveFolder">
{{ folderHandler ? folderHandler.name : '(None)' }}
</button>
</dd>
<dt>takePhoto</dt>
<dd><button class="red" @click="takePhoto">Shutter</button></dd>
</template>
<template v-if="configs.canRunAutoFocus.value">
<dt>autoFocus</dt>
<dd><button @click="runAutoFocus">Run</button></dd>
</template>
<template v-if="configs.canRunManualFocus.value">
<dt>manualFocus</dt>
<dd
style="
display: grid;
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;
"
>
↑
</button>
<button
v-if="configs.manualFocusOptions.value?.includes('near:1')"
@click="camera.runManualFocus('near:1')"
>
↓
</button>
<button
v-if="configs.manualFocusOptions.value?.includes('far:2')"
@click="camera.runManualFocus('far:2')"
>
↑↑
</button>
<button
v-if="configs.manualFocusOptions.value?.includes('near:2')"
@click="camera.runManualFocus('near:2')"
>
↓↓
</button>
<button
v-if="configs.manualFocusOptions.value?.includes('far:3')"
@click="camera.runManualFocus('far:3')"
>
↑↑↑
</button>
<button
v-if="configs.manualFocusOptions.value?.includes('near:3')"
@click="camera.runManualFocus('near:3')"
>
↓↓↓
</button>
</dd>
</template>
<template v-if="configs.canStartLiveview.value">
<dt>liveview</dt>
<dd>
<button @click="toggleLiveview">
{{ configs.liveviewEnabled.value ? 'Stop' : 'Start' }}
</button>
</dd>
</template>
</dl>

<h2>Configs</h2>
<dl>
<TethrConfig
v-for="(config, name) in configs"
:key="name"
:label="name"
:config="config"
/>
</dl>
<button
v-if="configs.manualFocusOptions.value?.includes('far:1')"
@click="camera.runManualFocus('far:1')"
>
↑
</button>
<button
v-if="configs.manualFocusOptions.value?.includes('near:1')"
@click="camera.runManualFocus('near:1')"
>
↓
</button>
<button
v-if="configs.manualFocusOptions.value?.includes('far:2')"
@click="camera.runManualFocus('far:2')"
>
↑↑
</button>
<button
v-if="configs.manualFocusOptions.value?.includes('near:2')"
@click="camera.runManualFocus('near:2')"
>
↓↓
</button>
<button
v-if="configs.manualFocusOptions.value?.includes('far:3')"
@click="camera.runManualFocus('far:3')"
>
↑↑↑
</button>
<button
v-if="configs.manualFocusOptions.value?.includes('near:3')"
@click="camera.runManualFocus('near:3')"
>
↓↓↓
</button>
</dd>
</template>
<template v-if="configs.canStartLiveview.value">
<dt>liveview</dt>
<dd>
<button @click="toggleLiveview">
{{ configs.liveviewEnabled.value ? 'Stop' : 'Start' }}
</button>
</dd>
</template>
</dl>

<h2>Configs</h2>
<dl>
<template v-for="(config, name) in configs">
<TethrConfig
v-if="config.value !== null"
:key="name"
:label="name"
:config="(config as any)"
/>
</template>
</dl>
</template>
</aside>
</div>
</template>

<script lang="ts">
<script lang="ts" setup>
import {saveAs} from 'file-saver'
import {TethrObject} from 'tethr'
import {defineComponent, ref} from 'vue'
import {ref} from 'vue'
import TethrConfig from './TethrConfig.vue'
import {useTethr} from './useTethr'
export default defineComponent({
components: {
TethrConfig,
},
setup() {
const folderHandler = ref<FileSystemDirectoryHandle | null>(null)
const setupSaveFolder = async () => {
const handler = await window.showDirectoryPicker({
id: 'saveFile',
})
const option: FileSystemHandlePermissionDescriptor = {
mode: 'readwrite',
}
const permission = await handler.queryPermission(option)
if (permission !== 'granted') {
await handler.requestPermission(option)
}
folderHandler.value = handler
}
const onSave = async (object: TethrObject) => {
if (folderHandler.value) {
// Use File System Access API
const h = await folderHandler.value.getFileHandle(object.filename, {
create: true,
})
const w = await h.createWritable()
await w.write(object.blob)
await w.close()
} else {
// Just download to the default directory
saveAs(object.blob, object.filename)
}
}
return {
setupSaveFolder,
folderHandler,
...useTethr(onSave),
}
},
})
const folderHandler = ref<FileSystemDirectoryHandle | null>(null)
async function setupSaveFolder() {
const handler = await window.showDirectoryPicker({
id: 'saveFile',
})
const option: FileSystemHandlePermissionDescriptor = {
mode: 'readwrite',
}
const permission = await handler.queryPermission(option)
if (permission !== 'granted') {
await handler.requestPermission(option)
}
folderHandler.value = handler
}
async function onSave(object: TethrObject) {
if (folderHandler.value) {
// Use File System Access API
const h = await folderHandler.value.getFileHandle(object.filename, {
create: true,
})
const w = await h.createWritable()
await w.write(object.blob)
await w.close()
} else {
// Just download to the default directory
saveAs(object.blob, object.filename)
}
}
const {
camera,
configs,
liveviewMediaStream,
photoURL,
runAutoFocus,
toggleCameraConnection,
toggleLiveview,
takePhoto,
} = useTethr(onSave)
</script>

<style lang="stylus" scoped>
Expand All @@ -174,8 +176,13 @@ export default defineComponent({
padding 1em
aside
display grid
overflow-y scroll
border-left 2px solid #2b2b2b
grid-template-columns min-content 1fr
.connect-button, h2, dl
grid-column 1 / 3
h2
margin 2em 0 0.5em
Expand All @@ -192,8 +199,8 @@ h2
dl
display grid
column-gap 0.5em
row-gap 1em
grid-template-columns 13rem 1fr
row-gap 1rem
grid-template-columns subgrid
&:deep(dt)
height 2em
Expand Down
Loading

0 comments on commit 5279eaa

Please sign in to comment.