add live on pointer block
allow to show pointer
This commit is contained in:
parent
5aab502a76
commit
ae53fe1ab7
16
rice-box.go
16
rice-box.go
File diff suppressed because one or more lines are too long
|
@ -67,8 +67,10 @@ a {
|
||||||
top: calc(33px + 38px);
|
top: calc(33px + 38px);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background: #ccc;
|
background: #ccc;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: calc(100% - 50px);
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
|
@ -142,3 +144,14 @@ a {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#mouse-screenshot-live {
|
||||||
|
display: inline-block;
|
||||||
|
width: 80px;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mouse-text-live {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
}
|
||||||
|
|
|
@ -3,7 +3,9 @@ let pointer, scroller, response, screenshotImg
|
||||||
let scrollLastTimestamp, scrollLastValue
|
let scrollLastTimestamp, scrollLastValue
|
||||||
let mousePosX, mousePosY, mouseInitPosX, mouseInitPosY
|
let mousePosX, mousePosY, mouseInitPosX, mouseInitPosY
|
||||||
let isLive = false
|
let isLive = false
|
||||||
|
let isPointerLive = false
|
||||||
let isScreenshotWaiting = false
|
let isScreenshotWaiting = false
|
||||||
|
let isPointerScreenshotWaiting = false
|
||||||
|
|
||||||
function createWebSocketConnection() {
|
function createWebSocketConnection() {
|
||||||
const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
|
const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
|
||||||
|
@ -31,8 +33,19 @@ function createWebSocketConnection() {
|
||||||
response.style.display = 'none'
|
response.style.display = 'none'
|
||||||
}, 2500)
|
}, 2500)
|
||||||
} else if (data.type === 'screenshot') {
|
} else if (data.type === 'screenshot') {
|
||||||
isScreenshotWaiting = false
|
if (isScreenshotWaiting) {
|
||||||
screenshotImg.setAttribute('src', 'data:image/png;base64, ' + data.value)
|
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 = ''
|
document.querySelector('#shortcut-key').value = ''
|
||||||
|
|
||||||
Array.from(document.querySelectorAll('#shortcuts_special_keys input:checked')).forEach((item) => {
|
Array.from(document.querySelectorAll('#shortcuts_special_keys input:checked')).forEach((item) => {
|
||||||
console.log(item.checked)
|
|
||||||
item.checked = false
|
item.checked = false
|
||||||
console.log(item.checked)
|
|
||||||
item.change()
|
item.change()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -167,6 +178,30 @@ function pointerTouchStartHandler(e) {
|
||||||
mouseInitPosY = touch.pageY
|
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) {
|
function pointerTouchMoveHandler(e) {
|
||||||
if (e.changedTouches.length === 2) {
|
if (e.changedTouches.length === 2) {
|
||||||
return scrollerTouchMoveHandler(e)
|
return scrollerTouchMoveHandler(e)
|
||||||
|
@ -199,6 +234,7 @@ function liveClickHandler(e, quality) {
|
||||||
if (isLive) {
|
if (isLive) {
|
||||||
isLive = false
|
isLive = false
|
||||||
isScreenshotWaiting = false
|
isScreenshotWaiting = false
|
||||||
|
|
||||||
document.querySelector('#live-hq').innerText = 'Live HQ'
|
document.querySelector('#live-hq').innerText = 'Live HQ'
|
||||||
document.querySelector('#live-lq').innerText = 'Live LQ'
|
document.querySelector('#live-lq').innerText = 'Live LQ'
|
||||||
|
|
||||||
|
@ -291,6 +327,7 @@ function addListeners() {
|
||||||
addEventListenerOn(pointer, 'click', pointerClickHandler)
|
addEventListenerOn(pointer, 'click', pointerClickHandler)
|
||||||
addEventListenerOn(pointer, 'touchstart', pointerTouchStartHandler)
|
addEventListenerOn(pointer, 'touchstart', pointerTouchStartHandler)
|
||||||
addEventListenerOn(pointer, 'touchmove', pointerTouchMoveHandler)
|
addEventListenerOn(pointer, 'touchmove', pointerTouchMoveHandler)
|
||||||
|
addEventListenerOn('#mouse-screenshot-live input', 'change', pointerLiveHandler)
|
||||||
|
|
||||||
addEventListenerOn('#live-hq', 'click', liveHqClickHandler)
|
addEventListenerOn('#live-hq', 'click', liveHqClickHandler)
|
||||||
addEventListenerOn('#live-lq', 'click', liveLqClickHandler)
|
addEventListenerOn('#live-lq', 'click', liveLqClickHandler)
|
||||||
|
|
|
@ -74,6 +74,10 @@
|
||||||
<input type="checkbox" value="alt" id="shortcuts_special_key_alt">
|
<input type="checkbox" value="alt" id="shortcuts_special_key_alt">
|
||||||
alt
|
alt
|
||||||
</label>
|
</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">
|
<label class="btn btn-secondary mb-1" for="shortcuts_special_key_win">
|
||||||
<input type="checkbox" value="win" id="shortcuts_special_key_win">
|
<input type="checkbox" value="win" id="shortcuts_special_key_win">
|
||||||
win
|
win
|
||||||
|
@ -112,8 +116,13 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
{{if eq $value.Type "mouse"}}
|
{{if eq $value.Type "mouse"}}
|
||||||
<div class="form-group col-12">
|
<div class="form-group col-12" id="mouse">
|
||||||
<input type="text" class="form-control live-text" placeholder="Live text" name="text">
|
<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/>
|
||||||
<div id="scrollbar"></div>
|
<div id="scrollbar"></div>
|
||||||
<div id="pointer"></div>
|
<div id="pointer"></div>
|
||||||
|
|
|
@ -8,7 +8,9 @@ import (
|
||||||
"github.com/gorilla/websocket"
|
"github.com/gorilla/websocket"
|
||||||
"github.com/kbinani/screenshot"
|
"github.com/kbinani/screenshot"
|
||||||
"github.com/labstack/echo/v4"
|
"github.com/labstack/echo/v4"
|
||||||
|
"image/color"
|
||||||
"image/jpeg"
|
"image/jpeg"
|
||||||
|
"math"
|
||||||
"os/exec"
|
"os/exec"
|
||||||
"strconv"
|
"strconv"
|
||||||
"strings"
|
"strings"
|
||||||
|
@ -37,6 +39,7 @@ type MessagesData struct {
|
||||||
|
|
||||||
type ScreenshotMessageData struct {
|
type ScreenshotMessageData struct {
|
||||||
Quality string `json:quality`
|
Quality string `json:quality`
|
||||||
|
Pointer bool `json:pointer`
|
||||||
}
|
}
|
||||||
|
|
||||||
type MessageResponse struct {
|
type MessageResponse struct {
|
||||||
|
@ -56,6 +59,24 @@ func sendMessageResponse(ws *websocket.Conn, r MessageResponse) {
|
||||||
ws.WriteMessage(websocket.TextMessage, value)
|
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 {
|
func createActions() Actions {
|
||||||
actions := Actions{
|
actions := Actions{
|
||||||
Functions: make(map[string]func(ws *websocket.Conn, msg []byte) error),
|
Functions: make(map[string]func(ws *websocket.Conn, msg []byte) error),
|
||||||
|
@ -83,19 +104,7 @@ func createActions() Actions {
|
||||||
return cmd.Run()
|
return cmd.Run()
|
||||||
}
|
}
|
||||||
|
|
||||||
location := exec.Command("xdotool", "getmouselocation")
|
currentX, currentY := getPointerPosition()
|
||||||
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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
newX, _ := strconv.ParseFloat(data.X, 32)
|
newX, _ := strconv.ParseFloat(data.X, 32)
|
||||||
newY, _ := strconv.ParseFloat(data.Y, 32)
|
newY, _ := strconv.ParseFloat(data.Y, 32)
|
||||||
|
@ -253,6 +262,8 @@ func createActions() Actions {
|
||||||
key = "Control_L"
|
key = "Control_L"
|
||||||
} else if key == "alt" {
|
} else if key == "alt" {
|
||||||
key = "Alt_L"
|
key = "Alt_L"
|
||||||
|
} else if key == "tab" {
|
||||||
|
key = "Tab"
|
||||||
}
|
}
|
||||||
|
|
||||||
if key != "" {
|
if key != "" {
|
||||||
|
@ -325,6 +336,24 @@ func createActions() Actions {
|
||||||
quality = 90
|
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)
|
buff := new(bytes.Buffer)
|
||||||
jpeg.Encode(buff, img, &jpeg.Options{Quality: quality})
|
jpeg.Encode(buff, img, &jpeg.Options{Quality: quality})
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue