Allows to set click and clack on same timer

Also allows to set delay between them and set which triggers first

Author: megastary

README.md

@@ -29,6 +29,7 @@ allows you to set:
 From main window, you can click on:
 - mouse icon, which opens mouse settings
 - keyboard icon, which opens special keys
+- clock icon, which opens timer settings
 
 From window toolbar, you can click on:
 - settings icon, which opens application settings
@@ -49,6 +50,15 @@ allows you to set:
 
 <img src="keyboard-settings.png" alt="Keyboard settings window"/>
 
+### Timer settings
+
+allows you to set:
+- whether mouse and keyboard share same timer
+- whether mouse clicks first or keyboard clacks first in shared timer mode
+- delay between each action in shared timer mode
+
+<img src="timer-settings.png" alt="Timer settings window"/>
+
 ### Application settings
 
 allows you to set:

main-window.png

@@ -1,6 +1,6 @@
 {
   "name": "clickandclack",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Super simple application for clicking mouse button and clacking key button in defined interval.",
   "productName": "Click and Clack",
   "cordovaId": "eu.houby_studio.clickandclack",

package.json

@@ -106,6 +106,12 @@
   </q-layout>
 </template>
 
+<style>
+body {
+  overflow: hidden;
+}
+</style>
+
 <script>
 import { sync } from 'vuex-pathify'
 

src/layouts/MainLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <q-page class="flex flex-center">
-    <!-- Mouse Dialog -->
+    <!-- Mouse dialog -->
     <q-dialog
       v-model="mouseSettings"
       transition-show="scale"
@@ -20,7 +20,7 @@
             toggle-color="primary"
             :options="[
               {label: 'Left', value: 'left'},
-              {label: 'Right', value: 'right'},
+              {label: 'Right', value: 'right'}
             ]"
           />
         </q-card-section>
@@ -32,7 +32,7 @@
             toggle-color="primary"
             :options="[
               {label: 'Yes', value: true},
-              {label: 'No', value: false},
+              {label: 'No', value: false}
             ]"
           />
         </q-card-section>
@@ -91,6 +91,95 @@
         </q-page-sticky>
       </q-card>
     </q-dialog>
+    <!-- Timer dialog -->
+    <q-dialog
+      v-model="timerSettings"
+      transition-show="scale"
+      transition-hide="scale"
+      full-width
+      full-height
+    >
+      <q-card class="full-width">
+        <q-card-section class="q-py-xs">
+          <div class="text-h6 text-center">Timer settings</div>
+        </q-card-section>
+        <q-card-section class="q-py-sm">
+          <!-- If Yes, mouse and keyboard share same interval; If No, each has separate interval -->
+          <div class="text-h6 text-center">Click & Clack together</div>
+          <q-btn-toggle
+            v-model="clickAndClackTogether"
+            spread
+            toggle-color="primary"
+            :options="[
+              { label: 'Yes', value: true },
+              { label: 'No', value: false }
+            ]"
+          />
+        </q-card-section>
+        <q-card-section class="q-py-sm">
+          <!-- If true, mouse clicks first, then delay, then keyboard; If false, keyboard clacks first, then delay, then mouse -->
+          <div class="text-h6 text-center">Trigger order</div>
+          <q-btn-toggle
+            v-model="clickFirst"
+            spread
+            toggle-color="primary"
+            :disable="!clickAndClackTogether"
+            :options="[
+              { value: true, slot: 'clickthenclack' },
+              { value: false, slot: 'clackthenclick' }
+            ]"
+          >
+            <template v-slot:clickthenclack>
+              1.
+              <q-icon name="mouse" />
+              2.
+              <q-icon name="keyboard" />
+              <q-tooltip :delay="1000">Click then clack</q-tooltip>
+            </template>
+            <template v-slot:clackthenclick>
+              1.
+              <q-icon name="keyboard" />
+              2.
+              <q-icon name="mouse" />
+              <q-tooltip :delay="1000">Clack then click</q-tooltip>
+            </template>
+          </q-btn-toggle>
+        </q-card-section>
+        <q-card-section class="q-py-sm">
+          <!-- Number in seconds, which sets delay between 1st action and 2nd action on each interval cycle -->
+          <q-input
+            type="number"
+            lazy-rules
+            v-model="delaySeconds"
+            no-error-icon
+            label="Delay in seconds"
+            :disable="!clickAndClackTogether"
+            :rules="[
+              val => val !== null && val !== '' || 'Set delay!',
+              val => val => 0 || 'Must be positive!'
+            ]"
+          >
+            <template v-slot:append>
+              <q-icon name="schedule" />
+            </template>
+          </q-input>
+        </q-card-section>
+        <q-page-sticky
+          position="bottom"
+          :offset="[0, 0]"
+        >
+          <q-card-actions>
+            <q-btn
+              icon="close"
+              round
+              color="primary"
+              v-close-popup
+            >
+            </q-btn>
+          </q-card-actions>
+        </q-page-sticky>
+      </q-card>
+    </q-dialog>
     <!-- Main page -->
     <q-card
       square
@@ -120,16 +209,22 @@
             <template v-slot:prepend>
               <q-btn
                 icon="mouse"
+                size="small"
                 round
                 @click="showMouseSettings"
               />
             </template>
             <template v-slot:append>
-              <q-icon name="schedule" />
+              <q-btn
+                icon="schedule"
+                size="small"
+                round
+                @click="showTimerSettings"
+              />
             </template>
           </q-input>
           <div class="row">
-            <div class="col-7">
+            <div :class="clickAndClackTogether ? 'col-12' : 'col-7'">
               <!-- Key to press input -->
               <q-input
                 class="q-my-xs"
@@ -146,13 +241,17 @@
                 <template v-slot:prepend>
                   <q-btn
                     icon="keyboard"
+                    size="small"
                     round
                     @click="showKeyboardSettings"
                   />
                 </template>
               </q-input>
             </div>
-            <div class="col-5">
+            <div
+              class="col-5"
+              v-show="!clickAndClackTogether"
+            >
               <!-- Key timer input -->
               <q-input
                 class="q-my-xs"
@@ -162,14 +261,19 @@
                 no-error-icon
                 stack-label
                 label="Seconds"
-                :disable="workflowRunning"
+                :disable="workflowRunning || clickAndClackTogether"
                 :rules="[
               val => val !== null && val !== '' || 'Set interval!',
               val => val > 0 || 'Must be positive!'
             ]"
               >
                 <template v-slot:append>
-                  <q-icon name="schedule" />
+                  <q-btn
+                    icon="schedule"
+                    size="small"
+                    round
+                    @click="showTimerSettings"
+                  />
                 </template>
               </q-input>
             </div>
@@ -180,11 +284,16 @@
           <q-btn
             @click="buttonPress"
             unelevated
-            label="Alt + C"
+            :label="workflowRunning ? 'STOP' : 'START'"
             color="primary"
             size="lg"
             class="full-width"
-          />
+          >
+            <q-tooltip
+              transition-show="jump-up"
+              transition-hide="jump-down"
+            >Press <b>Alt + C</b> to {{ workflowRunning ? 'STOP' : 'START' }}</q-tooltip>
+          </q-btn>
         </q-card-actions>
       </q-form>
     </q-card>
@@ -205,9 +314,10 @@ export default {
       workflowRunning: false, // When button was pressed and either mouse, keyboard or both are running
       mouseInterval: {}, // Holds object for time interval on mouse
       keyInterval: {}, // Holds object for time interval on keyboard
-      progress: 0, // Holds progress value
+      randomNum: 0, // Holds random delay value
       mouseSettings: false, // Dialog visibility for mouse settings
       keyboardSettings: false, // Dialog visibility for keyboard settings
+      timerSettings: false, // Dialog visibility for mouse timer settings
       specialKeys: ['space', 'enter', 'tab', 'escape', 'control', 'alt', 'shift'] // Special keys which user can define
     }
   },
@@ -218,10 +328,13 @@ export default {
     },
     mouseTimer: sync('store/mouseTimer'), // Seconds to press mouse
     keyTimer: sync('store/keyTimer'), // Seconds to press key
+    clickAndClackTogether: sync('store/clickAndClackTogether'), // Timer settings - share same timer for clicking and clacking
+    clickFirst: sync('store/clickFirst'), // Timer settings - whether order is click>clack or clack>click
+    delaySeconds: sync('store/delaySeconds'), // Timer settings - Delay between click and clack when timer is shared
     key: sync('store/key'), // Key to press
     mouseButton: sync('store/mouseButton'), // Left or Right button
     doubleClick: sync('store/doubleClick'), // Double click or Single click
-    randomDelay: sync('store/randomDelay'), // Apply random delay up to 5 seconds
+    randomDelay: sync('store/randomDelay'), // Apply random delay, up to 5 seconds
     clicking: sync('store/clicking'), // Should mouse be clicking
     clacking: sync('store/clacking') // Should key be clacking
   },
@@ -232,6 +345,9 @@ export default {
     showKeyboardSettings () {
       this.keyboardSettings = !this.keyboardSettings // Show or hide keyboard settings dialog
     },
+    showTimerSettings () {
+      this.timerSettings = !this.timerSettings // Show or hide mouse timer settings dialog
+    },
     setCustomKey (keyName) {
       this.key = keyName // Set custom key from keyboard dialog
     },
@@ -240,51 +356,61 @@ export default {
     },
     buttonPress () {
       // Activated with button press or global shortcut. Toggle between on and off.
-      // Example: If you set 10 seconds for mouse click, it triggers 10 times each second to update progress. 10. trigger also fires mouse.
-      // Keyboard trigger has separate timer and does not reflect on progress bar
       if (this.workflowRunning) {
         // If workflow is already running, stop it
         this.workflowRunning = false
         this.browserWindow.setProgressBar(-1) // Disables progress on taskbar
-        this.progress = 0
         clearInterval(this.mouseInterval) // Stop cycling intervals for mouse presses
         clearInterval(this.keyInterval) // Stop cycling intervals for key presses
       } else {
         // Start workflow
         this.workflowRunning = true
-        this.browserWindow.setProgressBar(0) // Start progress from 0
-        // Start mouse interval - Interval triggers 10 times to update progress bar, then fires click event, if clicking is enabled
+        this.browserWindow.setProgressBar(2) // Starts continuous progress on taskbar
+        // Start mouse interval - Simply waits certain number of seconds and then clicks, if clicking is enabled
         this.mouseInterval = setInterval(() => {
-          if (this.progress === 10) {
-            this.progress = 0
-            this.browserWindow.setProgressBar(0) // Start progress from 0
-            this.click()
+          this.randomNum = Math.floor(Math.random() * 5 * 1000) // Delay in miliseconds between 0ms and 5000ms (5s)
+          // If click and clack together is enabled, both happens in this mouse interval
+          if (this.clickAndClackTogether) {
+            if (this.clickFirst) {
+              // If mouse should click first, trigger it first, then keyboard clack with eventual delay
+              this.click()
+              setTimeout(() => { this.clack() }, this.delaySeconds * 1000)
+            } else {
+              // If keyboard should clack first, trigger it first, then mouse click with eventual delay
+              this.clack()
+              setTimeout(() => { this.click() }, this.delaySeconds * 1000)
+            }
           } else {
-            this.browserWindow.setProgressBar(this.progress / 10)
-            this.progress++
+            // If click and clack together is not enabled, only click
+            this.click()
           }
-        }, this.mouseTimer * 100)
-        // Start key interval - Simply waits certain number or seconds and then clacks if clacking is enabled
-        this.keyInterval = setInterval(() => {
-          this.clack()
-        }, this.keyTimer * 1000)
+        }, this.mouseTimer * 1000)
+        // Start key interval - Simply waits certain number of seconds and then clacks, if clacking is enabled
+        // If click and clack together is enabled, keyboard interval is not created
+        if (!this.clickAndClackTogether) {
+          this.keyInterval = setInterval(() => {
+            this.clack()
+          }, this.keyTimer * 1000)
+        }
       }
     },
     click () {
+      // If clicking is disabled in settings, do nothing
       if (this.clicking) {
         if (this.randomDelay) {
-          var delay = Math.floor(Math.random() * 5 * 1000) // Delay in miliseconds between 0ms and 5000ms (5s)
-          setTimeout(robot.mouseClick(this.mouseButton, this.doubleClick), delay) // Clicks with either left or right button and either single click or double click with random delay
+          // If random delay should be applied, start timeout, otherwise immediately click
+          setTimeout(robot.mouseClick(this.mouseButton, this.doubleClick), this.randomNum) // Clicks with either left or right button and either single click or double click with random delay
         } else {
           robot.mouseClick(this.mouseButton, this.doubleClick) // Clicks with either left or right button and either single click or double click without delay
         }
       }
     },
     clack () {
+      // If clacking is disabled in settings, do nothing
       if (this.clacking) {
+        // If random delay should be applied, start timeout, otherwise immediately clack
         if (this.randomDelay) {
-          var delay = Math.floor(Math.random() * 5 * 1000) // Delay in miliseconds between 0ms and 5000ms (5s)
-          setTimeout(robot.keyTap(this.key), delay) // Presses defined button with random delay
+          setTimeout(robot.keyTap(this.key), this.randomNum) // Presses defined button with random delay
         } else {
           robot.keyTap(this.key) // Presses defined button without delay
         }

src/pages/Index.vue

@@ -4,6 +4,9 @@ export default function () {
     keyTimer: 40,
     key: 'A',
     mouseButton: 'left',
+    clickAndClackTogether: false,
+    clickFirst: true,
+    delaySeconds: 1,
     doubleClick: false,
     alwaysOnTop: false,
     randomDelay: false,