diff --git a/src/components/panelRight.vue b/src/components/panelRight.vue
index f1a75522..c8a3a964 100644
--- a/src/components/panelRight.vue
+++ b/src/components/panelRight.vue
@@ -9,24 +9,60 @@
class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center"
uk-tab="swiping: false"
>
-
Connect
-
- Live
+
+
+ Connect
-
- Gallery
+
+
+ Live
+
+
+
+ Gallery
-
- -
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
+
@@ -50,44 +86,69 @@ export default {
galleryDisplay
},
- mounted() {
- // Attach methods to UIkit events for tab switching
- var context = this;
-
- // Stream tab leave
- UIkit.util.on("#streamDisplayTab", "hidden", function() {
- console.log("Stream tab hidden");
- if (context.$store.state.globalSettings.trackWindow == true) {
- context.$root.$emit("globalTogglePreview", false);
- }
- });
-
- // Stream tab enter
- UIkit.util.on("#streamDisplayTab", "shown", function() {
- console.log("Stream tab entered");
- UIkit.update();
- if (context.$store.state.globalSettings.trackWindow == true) {
- context.$root.$emit("globalTogglePreview", true);
- }
- });
-
- // Gallery tab enter
- UIkit.util.on("#galleryDisplayTab", "shown", function() {
- console.log("Gallery tab entered");
- UIkit.update();
- context.$root.$emit("globalUpdateCaptureList");
- });
-
- // Create a global event to switch the active tab
- var switcherObj = UIkit.tab("#tabContainer");
- console.log(switcherObj);
- this.$root.$on("globalTogglePanelRightTab", state => {
- console.log(`Toggling panelRight tab to ${state}`);
- switcherObj.show(1);
- });
+ data: function() {
+ return {
+ selectedTab: 0,
+ unwatchStoreFunction: null
+ };
},
- methods: {}
+ watch: {
+ selectedTab: function(index) {
+ // If entering the gallery
+ if (index == 2) {
+ console.log("Gallery tab entered");
+ this.$root.$emit("globalUpdateCaptureList");
+ }
+ // If entering the stream
+ if (index == 1) {
+ console.log("Stream tab entered");
+ this.$root.$emit("globalTogglePreview", true);
+ }
+ // If leaving the stream
+ else {
+ console.log("Stream tab hidden");
+ this.$root.$emit("globalTogglePreview", false);
+ }
+ }
+ },
+
+ created: function() {
+ // Watch for host 'ready', then update status
+ this.unwatchStoreFunction = this.$store.watch(
+ (state, getters) => {
+ return getters.ready;
+ },
+ ready => {
+ if (ready) {
+ console.log("Right panel now ready");
+ this.selectedTab = 1;
+ } else {
+ console.log("Right panel now disabled");
+ this.selectedTab = 0;
+ }
+ }
+ );
+ },
+
+ beforeDestroy() {
+ // Then we call that function here to unwatch
+ if (this.unwatchStoreFunction) {
+ this.unwatchStoreFunction();
+ this.unwatchStoreFunction = null;
+ }
+ },
+
+ methods: {
+ switchTab: function(index) {
+ var switcherObj = UIkit.switcher("#tabContainer");
+ console.log(switcherObj);
+ console.log(switcherObj.toggles);
+ console.log(`Switching to ${index}`);
+ var a = switcherObj.show(index);
+ console.log(a);
+ }
+ }
};
diff --git a/src/components/viewComponents/connectDisplay.vue b/src/components/viewComponents/connectDisplay.vue
index b3f4071e..e54424ed 100644
--- a/src/components/viewComponents/connectDisplay.vue
+++ b/src/components/viewComponents/connectDisplay.vue
@@ -279,9 +279,6 @@ export default {
this.$store.commit("setConnected");
// Check client and server match
this.checkServerVersion();
- // Switch to live view tab
- // TODO: Not working for some reason?
- this.$root.$emit("globalTogglePanelRightTab", "preview");
} else {
// Error and no-connect if API v2 is missing
var ApiVersionError = Error(`Your microscope is running an old API version.\