add live on pointer block

allow to show pointer

static/css/main.css

@@ -67,8 +67,10 @@ a {
     top: calc(33px + 38px);
     margin: auto;
     background: #ccc;
+    background-size: contain;
+    background-repeat: no-repeat;
     position: absolute;
-    width: 100%;
+    width: calc(100% - 50px);
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -142,3 +144,14 @@ a {
     margin-top: 10px;
     cursor: pointer;
 }
+
+#mouse-screenshot-live {
+  display: inline-block;
+  width: 80px;
+  padding-left: 5px;
+}
+
+#mouse-text-live {
+  display: inline-block;
+  width: calc(100% - 100px);
+}

static/js/main.js

@@ -3,7 +3,9 @@ let pointer, scroller, response, screenshotImg
 let scrollLastTimestamp, scrollLastValue
 let mousePosX, mousePosY, mouseInitPosX, mouseInitPosY
 let isLive = false
+let isPointerLive = false
 let isScreenshotWaiting = false
+let isPointerScreenshotWaiting = false
 
 function createWebSocketConnection() {
   const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
@@ -31,8 +33,19 @@ function createWebSocketConnection() {
         response.style.display = 'none'
       }, 2500)
     } else if (data.type === 'screenshot') {
-      isScreenshotWaiting = false
-      screenshotImg.setAttribute('src', 'data:image/png;base64, ' + data.value)
+      if (isScreenshotWaiting) {
+        isScreenshotWaiting = false
+        screenshotImg.setAttribute('src', 'data:image/png;base64, ' + data.value)
+      }
+
+      let pointer = document.querySelector('#pointer')
+
+      if (isPointerScreenshotWaiting) {
+        pointer.style.backgroundImage = `url('data:image/png;base64, ${data.value}')`
+        isPointerScreenshotWaiting = false
+      } else {
+        pointer.style.backgroundImage = 'none'
+      }
     }
   }
 }
@@ -63,9 +76,7 @@ function shortcutClearClickHandler(e) {
   document.querySelector('#shortcut-key').value = ''
 
   Array.from(document.querySelectorAll('#shortcuts_special_keys input:checked')).forEach((item) => {
-    console.log(item.checked)
     item.checked = false
-    console.log(item.checked)
     item.change()
   })
 }
@@ -167,6 +178,30 @@ function pointerTouchStartHandler(e) {
   mouseInitPosY = touch.pageY
 }
 
+function pointerLiveHandler(e) {
+  if (!e.target.checked) {
+    isPointerLive = false
+    isPointerScreenshotWaiting = false
+
+    return
+  }
+
+  isPointerLive = true
+
+  let doScreenshot = function() {
+    if (isPointerLive) {
+      if (!isPointerScreenshotWaiting) {
+        isPointerScreenshotWaiting = true
+        ws.send(`{"type":"screenshot","quality":"lq","pointer":true}`)
+      }
+
+      window.setTimeout(doScreenshot, 300)
+    }
+  }
+
+  doScreenshot()
+}
+
 function pointerTouchMoveHandler(e) {
   if (e.changedTouches.length === 2) {
     return scrollerTouchMoveHandler(e)
@@ -199,6 +234,7 @@ function liveClickHandler(e, quality) {
   if (isLive) {
     isLive = false
     isScreenshotWaiting = false
+
     document.querySelector('#live-hq').innerText = 'Live HQ'
     document.querySelector('#live-lq').innerText = 'Live LQ'
 
@@ -291,6 +327,7 @@ function addListeners() {
   addEventListenerOn(pointer, 'click', pointerClickHandler)
   addEventListenerOn(pointer, 'touchstart', pointerTouchStartHandler)
   addEventListenerOn(pointer, 'touchmove', pointerTouchMoveHandler)
+  addEventListenerOn('#mouse-screenshot-live input', 'change', pointerLiveHandler)
 
   addEventListenerOn('#live-hq', 'click', liveHqClickHandler)
   addEventListenerOn('#live-lq', 'click', liveLqClickHandler)

views/page/home.html

@@ -74,6 +74,10 @@
                                     <input type="checkbox" value="alt" id="shortcuts_special_key_alt">
                                     alt
                                 </label>
+                                <label class="btn btn-secondary mb-1" for="shortcuts_special_key_tab">
+                                    <input type="checkbox" value="tab" id="shortcuts_special_key_tab">
+                                    tab
+                                </label>
                                 <label class="btn btn-secondary mb-1" for="shortcuts_special_key_win">
                                     <input type="checkbox" value="win" id="shortcuts_special_key_win">
                                     win
@@ -112,8 +116,13 @@
                         {{end}}
 
                         {{if eq $value.Type "mouse"}}
-                            <div class="form-group col-12">
-                                <input type="text" class="form-control live-text" placeholder="Live text" name="text">
+                            <div class="form-group col-12" id="mouse">
+                                <div id="mouse-screenshot-live">
+                                    <label>
+                                        <input type="checkbox"> Screen
+                                    </label>
+                                </div>
+                                <input type="text" id="mouse-text-live" class="form-control live-text" placeholder="Live text">
                             </div/>
                             <div id="scrollbar"></div>
                             <div id="pointer"></div>

ws_controller.go

@@ -8,7 +8,9 @@ import (
 	"github.com/gorilla/websocket"
 	"github.com/kbinani/screenshot"
 	"github.com/labstack/echo/v4"
+	"image/color"
 	"image/jpeg"
+	"math"
 	"os/exec"
 	"strconv"
 	"strings"
@@ -37,6 +39,7 @@ type MessagesData struct {
 
 type ScreenshotMessageData struct {
 	Quality string `json:quality`
+	Pointer bool   `json:pointer`
 }
 
 type MessageResponse struct {
@@ -56,6 +59,24 @@ func sendMessageResponse(ws *websocket.Conn, r MessageResponse) {
 	ws.WriteMessage(websocket.TextMessage, value)
 }
 
+func getPointerPosition() (float64, float64) {
+	location := exec.Command("xdotool", "getmouselocation")
+	output, _ := location.Output()
+	position := string(output)
+	currentX := 0.0
+	currentY := 0.0
+
+	for key, value := range strings.Split(position, " ") {
+		if key == 0 {
+			currentX, _ = strconv.ParseFloat(strings.Replace(value, "x:", "", 1), 32)
+		} else if key == 1 {
+			currentY, _ = strconv.ParseFloat(strings.Replace(value, "y:", "", 1), 32)
+		}
+	}
+
+	return currentX, currentY
+}
+
 func createActions() Actions {
 	actions := Actions{
 		Functions: make(map[string]func(ws *websocket.Conn, msg []byte) error),
@@ -83,19 +104,7 @@ func createActions() Actions {
 			return cmd.Run()
 		}
 
-		location := exec.Command("xdotool", "getmouselocation")
-		output, _ := location.Output()
-		position := string(output)
-		currentX := 0.0
-		currentY := 0.0
-
-		for key, value := range strings.Split(position, " ") {
-			if key == 0 {
-				currentX, _ = strconv.ParseFloat(strings.Replace(value, "x:", "", 1), 32)
-			} else if key == 1 {
-				currentY, _ = strconv.ParseFloat(strings.Replace(value, "y:", "", 1), 32)
-			}
-		}
+		currentX, currentY := getPointerPosition()
 
 		newX, _ := strconv.ParseFloat(data.X, 32)
 		newY, _ := strconv.ParseFloat(data.Y, 32)
@@ -253,6 +262,8 @@ func createActions() Actions {
 				key = "Control_L"
 			} else if key == "alt" {
 				key = "Alt_L"
+			} else if key == "tab" {
+				key = "Tab"
 			}
 
 			if key != "" {
@@ -325,6 +336,24 @@ func createActions() Actions {
 			quality = 90
 		}
 
+		if data.Pointer {
+			currentX, currentY := getPointerPosition()
+			pointerSize := 2 * 16.0
+
+			pixelColor := color.RGBA{
+				R: 255,
+				G: 0,
+				B: 0,
+				A: 255,
+			}
+
+			for x := math.Max(0.0, currentX-pointerSize/2); x <= currentX+3; x++ {
+				for y := math.Max(0.0, currentY-pointerSize/2); y < currentY+3; y++ {
+					img.SetRGBA(int(x), int(y), pixelColor)
+				}
+			}
+		}
+
 		buff := new(bytes.Buffer)
 		jpeg.Encode(buff, img, &jpeg.Options{Quality: quality})