v2.0.7

Cleanup

README.md

@@ -26,6 +26,38 @@ But with My Ui Pro app you can recover it easily, just follow the get started in
 
 Well, the guys from Soundcraft expose it in plain text, and it can be retrieved with ease by just connecting to the mixer via websocket connection.
 
+### How to use it on iPad?
+
+The only way I've found so far to open the HTML file on an iPad or iOS device is by using Microsoft Edge Browser, if you find a better way, please let me know.
+
+- Download the HTML file to your iPad storage
+- Press and hold your finger on the file using the Files app in your iPad.
+- Touch the share icon
+- Select Edge Browser
+- Select Open in Microsoft Edge
+- Done
+
+You'll have to do this every time you want to use the HTML file.
+
+Please only use Edge, Chrome, Safari, or Firefox
+
+![IMG_0002](https://github.com/user-attachments/assets/9ef84104-a361-4a1b-8cf8-d538734d8fd4)
+
+![IMG_0003](https://github.com/user-attachments/assets/5b958641-aada-404f-97d8-b41e110b55e0)
+
+![IMG_0004](https://github.com/user-attachments/assets/011bc3e5-eb3b-459d-a360-b6c459f45de6)
+
+![IMG_0005](https://github.com/user-attachments/assets/5b3efd31-de86-4e77-add8-e49bd1adfe91)
+
+![IMG_0007](https://github.com/user-attachments/assets/50ba7544-b17a-451c-9c75-e4b047f6679f)
+
+
+
+### How to use it on MacOS, Windows or Linux?
+
+- Download the HTML file to your computer
+- Open the file
+- Done
 
 ## Limitations
 * Keyboard shortcuts won't work and will never work, this is a known limitation for iframes.
@@ -44,7 +76,6 @@ Well, the guys from Soundcraft expose it in plain text, and it can be retrieved
 The idea is to be able to map some functions to midi devices.
 * Shortcuts Modal Window:
 A modal window where you'll have some shortcuts ready to use
-* Design your own multi-frame layouts
 
 ## Want to support my job?
 ### [Buy me a coffee](https://www.paypal.com/donate/?hosted_button_id=A8MKF5RNGQ77U).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-ui-pro",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Soundcraft Ui Multiframe Wrapper",
   "productName": "My Ui Pro",
   "author": "Josue Orozco A. <[email protected]>",

src/components/IFrame.vue

@@ -1,13 +1,11 @@
 <template>
-<!--  {{layoutsStore.selectedLayout}}-->
   <div v-for="(section, index) in layoutsStore.selectedLayout" :key="index" class="parent" :style="{height: section.height}">
-    <template v-if="section.frameIDs">
-      <div v-for="(frame, frameIndex) in section.frameIDs" :key="frameIndex" class="full-height">
-<!--        Frame SRC: {{mixerStore.mixerSrc + getID(frame)}}-->
+    <template v-if="section.subFrames">
+      <div v-for="(subFrame) in section.subFrames" :key="'subFrame' + subFrame">
         <iframe
           :allowFullScreen="false"
           class="full-width full-height"
-          :src="mixerStore.mixerSrc + getID(frame)"
+          :src="mixerStore.mixerSrc"
         />
       </div>
     </template>
@@ -16,9 +14,8 @@
       :key="index"
       :allowFullScreen="false"
       class="full-width"
-      :src="mixerStore.mixerSrc + getID(section.id)"
+      :src="mixerStore.mixerSrc"
     />
-<!--    Section SRC: {{mixerStore.mixerSrc + getID(section.id)}}-->
   </div>
 </template>
 
@@ -31,14 +28,4 @@ const mixerStore = useMixerStore();
 
 const layoutsStore = useLayoutsStore()
 
-const default_id = 'SYNC_ID'
-
-const getID = (id: string) => {
-  if (layoutsStore.defaultSyncID) {
-    return default_id
-  } else {
-    return id
-  }
-}
-
 </script>

src/components/LayoutSelector.vue

@@ -11,19 +11,13 @@
       <q-card-section>
         <q-scroll-area dark class="q-pa-sm" :visible="false" style="height: 600px; max-width: 500px;">
           <div class="row q-col-gutter-sm">
-<!--            <div class="col-12 text-center">-->
-<!--              <q-toggle-->
-<!--                v-model="layoutsStore.defaultSyncID"-->
-<!--                label="Sync ALL Frames"-->
-<!--              />-->
-<!--            </div>-->
             <div class="col-12 text-center">
               <q-expansion-item
                 dense
                 class="shadow-1 overflow-hidden q-my-md"
                 style="border-radius: 5px"
                 icon="explore"
-                label="Important"
+                label="Sync Frames"
                 header-class="bg-black text-white"
                 expand-icon-class="text-white"
               >
@@ -34,41 +28,26 @@
                       the feature in your mixer settings first. Settings => Local => turn Sync Selected Channel <b>ON</b>.
                     </p>
                     <p>
-                      Then, set the SYNC_ID right in your mixer on each frame, and you'll have it synchronized.
+                      Then, set the SYNC_ID right in your mixer on each frame, you can have multiple frames synced in
+                      groups or all together please, refer to your mixer manual for more information.
                     </p>
-
-<!--                    <p>-->
-<!--                      Don't change the SYNC ID in the mixer's settings,-->
-<!--                      set one or multiple ID's on the layout selector on each frame,-->
-<!--                      you can pair as many frames as you want in any combination you might need.-->
-<!--                    </p>-->
                   </q-card-section>
                 </q-card>
               </q-expansion-item>
             </div>
-            <div @click="selectLayout('singleFrame')" class="col-6 row  q-col-gutter-xs text-center">
+            <div @click="selectLayout('one')" class="col-6 row  q-col-gutter-xs text-center">
               <div class="col-12">1 Frame</div>
               <div class="col-12">
                 <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="100px" />
               </div>
             </div>
-            <div @click="selectLayout('doubleFrame')" class="col-6 row  q-col-gutter-xs text-center">
+            <div @click="selectLayout('two')" class="col-6 row  q-col-gutter-xs text-center">
               <div class="col-12">2 Frames</div>
               <div class="col-12">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px">
-<!--                  <div class="absolute-center">{{layoutsStore.layoutOptions.doubleFrame[0].id || defaultID}}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.doubleFrame[0].id" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
               </div>
               <div class="col-12">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px">
-<!--                  <div class="absolute-center">{{layoutsStore.layoutOptions.doubleFrame[1].id || defaultID}}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.doubleFrame[1].id" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
               </div>
             </div>
           </div>
@@ -78,58 +57,28 @@
           </div>
 
           <div class="row q-col-gutter-sm">
-            <div class="col-6 row q-col-gutter-xs text-center" @click="selectLayout('tripleFrameV1')">
+            <div class="col-6 row q-col-gutter-xs text-center" @click="selectLayout('threeV1')">
               <div class="col-12">3 Frames (v1)</div>
               <div class="col-6">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px">
-<!--                  <div class="absolute-center">{{layoutsStore.layoutOptions.tripleFrameV1[0].frameIDs[0] || defaultID}}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.tripleFrameV1[0].frameIDs[0]" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
               </div>
               <div class="col-6">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px">
-<!--                  <div class="absolute-center">{{layoutsStore.layoutOptions.tripleFrameV1[0].frameIDs[1] || defaultID}}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.tripleFrameV1[0].frameIDs[1]" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
               </div>
               <div class="col-12">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px">
-<!--                  <div class="absolute-center">{{layoutsStore.layoutOptions.tripleFrameV1[1].id || defaultID}}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.tripleFrameV1[1].id" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
               </div>
             </div>
-            <div class="col-6 row  q-col-gutter-xs text-center" @click="selectLayout('tripleFrameV2')">
+            <div class="col-6 row  q-col-gutter-xs text-center" @click="selectLayout('threeV2')">
               <div class="col-12">3 Frames (v2)</div>
               <div class="col-12">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px">
-<!--                  <div class="absolute-center">{{layoutsStore.layoutOptions.tripleFrameV2[0].id || defaultID}}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.tripleFrameV2[0].id" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
               </div>
               <div class="col-6">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px">
-<!--                  <div class="absolute-center">{{layoutsStore.layoutOptions.tripleFrameV2[1].frameIDs[0] || defaultID}}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.tripleFrameV2[1].frameIDs[0]" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
               </div>
               <div class="col-6">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px">
-<!--                  <div class="absolute-center">{{layoutsStore.layoutOptions.tripleFrameV2[1].frameIDs[1] || defaultID}}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.tripleFrameV2[1].frameIDs[1]" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
               </div>
             </div>
           </div>
@@ -140,51 +89,38 @@
 
           <div class="row q-col-gutter-sm">
             <!-- Quad Frame -->
-            <div @click="selectLayout('quadFrame')" class="col-6 row  q-col-gutter-xs text-center">
+            <div @click="selectLayout('four')" class="col-6 row  q-col-gutter-xs text-center">
               <div class="col-12">4 Frames</div>
-              <div class="col-6" v-for="(frameID, index) in layoutsStore.layoutOptions.quadFrame[0].frameIDs" :key="'quadFrame-0-' + index">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px">
-<!--                  <div class="absolute-center">{{ layoutsStore.layoutOptions.quadFrame[0].frameIDs[index] || defaultID }}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.quadFrame[0].frameIDs[index]" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
-              </div>
-              <div class="col-6" v-for="(frameID, index) in layoutsStore.layoutOptions.quadFrame[1].frameIDs" :key="'quadFrame-1-' + index">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px">
-<!--                  <div class="absolute-center">{{ layoutsStore.layoutOptions.quadFrame[1].frameIDs[index] || defaultID }}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.quadFrame[1].frameIDs[index]" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
+              <div class="col-6">
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
+              </div>
+              <div class="col-6">
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
+              </div>
+              <div class="col-6">
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
+              </div>
+              <div class="col-6">
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="50px" />
               </div>
             </div>
             <!-- Quintuple Frame V1 -->
-            <div @click="selectLayout('quintupleFrameV1')" class="col-6 row  q-col-gutter-xs text-center">
+            <div @click="selectLayout('fiveV1')" class="col-6 row  q-col-gutter-xs text-center">
               <div class="col-12">5 Frames (v1)</div>
               <div class="col-12">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="33px">
-<!--                  <div class="absolute-center">{{ layoutsStore.layoutOptions.quintupleFrameV1[0].id || defaultID }}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.quintupleFrameV1[0].id" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
-              </div>
-              <div v-for="(frameID, index) in layoutsStore.layoutOptions.quintupleFrameV1[1].frameIDs" :key="'quintupleFrameV1-1-' + index" class="col-6">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="33px">
-<!--                  <div class="absolute-center">{{ frameID || defaultID }}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.quintupleFrameV1[1].frameIDs[index]" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
-              </div>
-              <div v-for="(frameID, index) in layoutsStore.layoutOptions.quintupleFrameV1[2].frameIDs" :key="'quintupleFrameV1-2-' + index" class="col-6">
-                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="33px">
-<!--                  <div class="absolute-center">{{ frameID || defaultID }}</div>-->
-<!--                  <q-popup-edit style="width: 10px" :disable="layoutsStore.defaultSyncID" class="q-pa-sm" v-model="layoutsStore.layoutOptions.quintupleFrameV1[2].frameIDs[index]" auto-save v-slot="scope">-->
-<!--                    <q-input outlined color="teal" label="SYNC ID" v-model="scope.value" dense autofocus @keyup.enter="scope.set" />-->
-<!--                  </q-popup-edit>-->
-                </q-skeleton>
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="33px" />
+              </div>
+              <div class="col-6">
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="33px" />
+              </div>
+              <div class="col-6">
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="33px" />
+              </div>
+              <div class="col-6">
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="33px" />
+              </div>
+              <div class="col-6">
+                <q-skeleton animation-speed="0" class="cursor-pointer" bordered height="33px" />
               </div>
             </div>
           </div>
@@ -206,6 +142,4 @@ const selectLayout = (value:any) => {
   layoutsStore.selectedLayout = layoutsStore.layoutOptions[value]
 }
 
-const defaultID = 'SYNC_ID'
-
 </script>

src/components/TopBar.vue

@@ -20,7 +20,6 @@
           <span class="text-h6">
             Firmware version: {{mixerStore.mixerInfo.firmware}}
           </span>
-
         </q-tooltip>
       </div>
       <div class="text-red text-bold" v-show="mixerStore.isDemoMode">DEMO MODE</div>

src/pages/IndexPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-page class="bg-dark">
+  <q-page style="min-height: 100%" class="bg-dark">
     <div v-if="showMixerContent" class="disable-hardware-acceleration" :class="disableClass">
       <div class="q-pa-xs" :style="{height: `calc(100vh - ${commonStore.barSize})`}">
         <IFrame />
@@ -57,10 +57,8 @@ const getPlaylist = () => {
 
 const disableClass = ref<string>('');
 
-// Compute whether to show the mixer content
 const showMixerContent = computed(() =>
-  true
-  // mixerStore.isConnected || mixerStore.isDemoMode
+  mixerStore.isConnected || mixerStore.isDemoMode
 );
 
 onMounted(async () => {