rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implemented basic stream preview

Browse source
This commit is contained in:
Joel Collins 2019-02-07 17:15:20 +00:00
parent 79f094066e
commit 473fff799d
4 changed files with 86 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/App.vue
View file

@ -1,6 +1,6 @@
<template>
<div id="app">
<div v-bind:class="responsiveToggleButton" id="overlay-toggle">
<div id="overlay-toggle">
<a href="" class="uk-icon-button" uk-icon="menu" uk-toggle="target: .toggle-hidden; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
</div>
<div uk-grid class="uk-height-1-1" margin=0>
@ -11,7 +11,9 @@
<panelLeft/>
</div>
<div class="uk-width-expand">
<div class="uk-card uk-card-default uk-card-body uk-height-1-1">Width: {{ window.width }}</div>
<div class="uk-card uk-card-default uk-card-body uk-height-1-1">
<panelDisplay/>
</div>
</div>
</div>
</div>
@ -28,13 +30,15 @@ UIkit.use(Icons);
// Import components
import panelLeft from './components/panelLeft.vue'
import panelDisplay from './components/panelDisplay.vue'
// Export main app
export default {
name: 'app',
components: {
panelLeft
panelLeft,
panelDisplay
},
data: function () {
@ -69,11 +73,6 @@ export default {
//'uk-hidden': this.window.width<850,
'overlay-panel': this.window.width<850
}
},
responsiveToggleButton: function () {
return {
//'uk-hidden': this.window.width>=850,
}
}
}

32
src/components/paneConnectComponents/hostDisplay.vue
View file

@ -1,19 +1,19 @@
<template>
<div class="host-display">
<h2>Debug</h2>
<div v-if="$store.state.connected">
<p><b>Host:</b> {{ $store.state.host }}</p>
<p><b>Base URI:</b> {{ $store.getters.uri }}</p>
<p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>
<div class="host-display">
<h2>Debug</h2>
<div v-if="$store.state.connected">
<p><b>Host:</b> {{ $store.state.host }}</p>
<p><b>Base URI:</b> {{ $store.getters.uri }}</p>
<p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>
</div>
<div v-else-if="$store.state.waiting">
<div uk-spinner></div>
</div>
<div v-else-if="$store.state.error">
<b>Error:</b> {{ $store.state.error }}
</div>
<div v-else>
Enter a hostname and connect to start.
</div>
</div>
<div v-else-if="$store.state.waiting">
<div uk-spinner></div>
</div>
<div v-else-if="$store.state.error">
<b>Error:</b> {{ $store.state.error }}
</div>
<div v-else>
Enter a hostname and connect to start.
</div>
</div>
</template>

36
src/components/paneDisplayComponents/streamDisplay.vue Normal file
View file

@ -0,0 +1,36 @@
<template>
<div class="streamDisplay">
<div class="streamContainer" v-if="$store.state.connected">
<img v-bind:src="streamImgUri" alt="Stream">
</div>
</div>
</template>
<script>
// Export main app
export default {
name: 'streanmDisplay',
computed: {
// a computed getter
streamImgUri: function () {
// `this` points to the vm instance
return this.$store.getters.uri + "/stream"
}
}
}
</script>
<style scoped lang="less">
.streamContainer img {
width: 100%;
height: 100%;
object-fit: contain
}
.streamContainer, .streamDisplay {
width: 100%;
height: 100%;
}
</style>

27
src/components/panelDisplay.vue Normal file
View file

@ -0,0 +1,27 @@
<template>
<div id="panelDisplay">
<streamDisplay/>
</div>
</template>
<script>
// Import components
import streamDisplay from './paneDisplayComponents/streamDisplay.vue'
// Export main app
export default {
name: 'panelDisplay',
components: {
streamDisplay
}
}
</script>
<style lang="less">
#panelDisplay {
width: 100%;
height: 100%;
}
</style>