diff --git a/web/mouse.html b/web/mouse.html index 5701baee..d5d399f4 100644 --- a/web/mouse.html +++ b/web/mouse.html @@ -117,7 +117,6 @@ overflow-x: hidden; overflow-y: hidden; overflow: hidden; - } iframe { @@ -128,8 +127,6 @@ border: 0px; z-index: 1; overflow: hidden; - zoom: 0.25; - } @@ -145,18 +142,6 @@ margin: 20px; float: left; } - - - - #saveSettings { - width: 100%; - height: 100%; - font-size: large; - cursor: pointer; - text-align: center; - text-decoration: none; - background-color: #4CAF50; - } @@ -195,18 +180,28 @@ } #settings>div { - border: 2px dashed rgba(0, 0, 0, 0.4); + border: 2px solid rgba(0, 0, 0, 0.4); + border-radius: 10px; margin: 0px; overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + font-size: klarge; + background-color: rgb(173, 157, 130); } #settingsWindowLabel1 { grid-area: 1 / 1 / 2 / 2; } - #settingsWindow1 { + #saveSettings { grid-area: 1 / 2 / 2 / 6; + cursor: pointer; + text-align: center; + text-decoration: none; + color: #ff0000; } #settingsWindowLabel2 { @@ -245,7 +240,7 @@ grid-area: 6 / 1 / 7 / 2; } - #settingsWindow6 { + #fullscreenToggle { grid-area: 6 / 2 / 7 / 4; } @@ -270,10 +265,8 @@
- -
-
- +
+ Close Settings
@@ -284,21 +277,22 @@ .6
-
Toggel Tabs
-
Toggle objects overlay
-
Toggle menues
+
+ Toggle fullscreen mode + ⛶ +
diff --git a/web/mouse/checkIfMobile.js b/web/mouse/checkIfMobile.js index 02997214..f61d7ac8 100644 --- a/web/mouse/checkIfMobile.js +++ b/web/mouse/checkIfMobile.js @@ -1,22 +1,22 @@ - // check for common mobile user agents - if ( - navigator.userAgent.match(/Android/i) || - navigator.userAgent.match(/webOS/i) || - navigator.userAgent.match(/iPhone/i) || - navigator.userAgent.match(/iPad/i) || - navigator.userAgent.match(/iPod/i) || - navigator.userAgent.match(/BlackBerry/i) || - navigator.userAgent.match(/Windows Phone/i) - ) { - // the user is using a mobile device, so redirect to the mobile version of the website - try { - //detect iframe parent and see if it is the mobile mouse - //if frame is loaded in mouse page do nothing otherwise redirect to mouse page - if ( window.location.pathname == window.parent.location.pathname ) { - //test if parent is mobile mouse emulator page and redirect if not - if (!window.parent.location.pathname.includes("/mouse.html")){ - window.location = "./mouse.html" + window.location.search; - } - } - } catch { } - } \ No newline at end of file +// check for common mobile user agents +if ( + navigator.userAgent.match(/Android/i) || + navigator.userAgent.match(/webOS/i) || + navigator.userAgent.match(/iPhone/i) || + navigator.userAgent.match(/iPad/i) || + navigator.userAgent.match(/iPod/i) || + navigator.userAgent.match(/BlackBerry/i) || + navigator.userAgent.match(/Windows Phone/i) +) { + // the user is using a mobile device, so redirect to the mobile version of the website + try { + //detect iframe parent and see if it is the mobile mouse + //if frame is loaded in mouse page do nothing otherwise redirect to mouse page + if (window.location.pathname == window.parent.location.pathname) { + //test if parent is mobile mouse emulator page and redirect if not + if (!window.parent.location.pathname.includes("/mouse.html")) { + window.location = "./mouse.html" + window.location.search; + } + } + } catch {} +} diff --git a/web/mouse/mouseController.js b/web/mouse/mouseController.js index d04de372..1b7afed1 100644 --- a/web/mouse/mouseController.js +++ b/web/mouse/mouseController.js @@ -38,25 +38,20 @@ function sendNewEvent(eventType) { } document.getElementById("touchpadArea").addEventListener("touchstart", function (event) { - if (window.innerHeight !== screen.height) document.body.requestFullscreen(); - - if (event.touches.length == 1){ + if (event.touches.length == 1) { lastTouchX = event.touches[0].clientX; lastTouchY = event.touches[0].clientY; } - if (event.touches.length ==2){ + if (event.touches.length == 2) { lastScrollY = event.touches[0].clientY; zooming = true; event.preventDefault(); - } - }); - document.getElementById("touchpadArea").addEventListener("touchend", function (event) { - if (event.touches.length ==2){ + if (event.touches.length == 2) { zooming = false; mouseObject.deltaY = 0; lastScrollY = 0; @@ -65,10 +60,6 @@ document.getElementById("touchpadArea").addEventListener("touchend", function (e }); document.getElementById("touchpadArea").addEventListener("click", async function (event) { - // //alert(await sendNewEvent("whatUnderTouchLocation")); - // let bla = await sendNewEvent("whatUnderTouchLocation"); - // console.log(bla) - document.getElementById("leftMouseButton").click(); }); @@ -85,31 +76,31 @@ document.getElementById("touchpadArea").addEventListener("contextmenu", function document.getElementById("touchpadArea").addEventListener("touchmove", function (event) { event.preventDefault(); - if (event.touches.length == 1){ + if (event.touches.length == 1) { let x = event.touches[0].clientX; let y = event.touches[0].clientY; - + let difrenceX = x - lastTouchX; let difrenceY = y - lastTouchY; - + lastTouchX = x; lastTouchY = y; - + mouseObject.absoluteX = mouseObject.absoluteX + difrenceX * speed; mouseObject.absoluteY = mouseObject.absoluteY + difrenceY * speed; - + mouseObject.absoluteX = mouseObject.absoluteX > 0 ? mouseObject.absoluteX : 1; mouseObject.absoluteY = mouseObject.absoluteY > 0 ? mouseObject.absoluteY : 1; - + cursor.style.left = mouseObject.absoluteX + "px"; cursor.style.top = mouseObject.absoluteY + "px"; - + sendNewEvent("mousemove"); } - if (event.touches.length == 2){ + if (event.touches.length == 2) { //zoom zoom zoom - console.log("zoom zoom zoom") + console.log("zoom zoom zoom"); let y = event.touches[0].clientY; let difrenceY = y - lastScrollY; @@ -167,7 +158,7 @@ document.getElementById("rightMouseButton").addEventListener("click", function ( mouseObject.rightMouseDown = false; event.target.style.backgroundColor = InactiveButtonBackgroundColor; sendNewEvent("mousemove"); - }else{ + } else { doRightClick(); } }); @@ -255,12 +246,10 @@ window.addEventListener("message", function (event) { if (event.data == "showTouchpad") toggleMousepad("show"); }); - - pointerTarget.onload = function () { const elem = document.createElement(`script`); elem.src = "./mouse/virtualMousePointer.js"; - elem.type="module"; + elem.type = "module"; pointerTarget.contentDocument.body.appendChild(elem); @@ -298,3 +287,11 @@ document.getElementById("settingsButton").onclick = function (event) { document.getElementById("settings").style.display = ""; //console.log("dats the window locations", window.location.search); }; + +document.getElementById("fullscreenToggle").onclick = (event) => { + if (document.fullscreenElement) { + document.exitFullscreen(); + } else { + document.documentElement.requestFullscreen(); + } +}; diff --git a/web/mouse/virtualMousePointer.js b/web/mouse/virtualMousePointer.js index 328b93c4..1a67c479 100644 --- a/web/mouse/virtualMousePointer.js +++ b/web/mouse/virtualMousePointer.js @@ -60,11 +60,11 @@ let scaleFactor = 2; let absoluteX = 0; let absoluteY = 0; let deltaY; -let eventType;; +let eventType; window.addEventListener( "message", - (event) => { + (event) => { const thingToDo = event.data; if (typeof thingToDo !== "object") return; @@ -78,7 +78,7 @@ window.addEventListener( if (mouseDebugger) console.log(absoluteX, absoluteY); deltaY = thingToDo.deltaY ? thingToDo.deltaY : ""; - eventType = thingToDo.eventType ? thingToDo.eventType : ""; + eventType = thingToDo.eventType ? thingToDo.eventType : ""; if (eventType == "toggleUItabs") { uiElementsToggle.toggleUItabs = uiElementsToggle.toggleUItabs == "none" ? "" : "none"; @@ -161,12 +161,10 @@ window.addEventListener( eventType = "click"; } - lastThingToDo = thingToDo; - //let stoplooping = ""; - + const itemsUnderMouse = document.elementsFromPoint(absoluteX, absoluteY); doTheProperEvents(itemsUnderMouse[0]); @@ -178,31 +176,21 @@ window.addEventListener( // }); // } - let mouseOutObjects = []; - - let newMouseOverList = []; mouseOverList.forEach((item, key) => { - if (!itemsUnderMouse.includes(item)){ + if (!itemsUnderMouse.includes(item)) { mouseOutObjects.push(item); - }else{ + } else { newMouseOverList.push(item); } }); mouseOverList = newMouseOverList; - mouseOutObjects.forEach((item, key) => { - exicuteEvents(item, [ - "mouseleave", - "mouseout", - "mouseexit", - "pointerleave", - "pointerout", - ]); + exicuteEvents(item, ["mouseleave", "mouseout", "mouseexit", "pointerleave", "pointerout"]); }); __CAD_APP.pickControlService.pickListMode = false; @@ -210,13 +198,13 @@ window.addEventListener( true ); - function doTheProperEvents(item) { +function doTheProperEvents(item) { if (eventType == "mousemove") { - exicuteEvents(item, ["mousemove", "mouseover"]); + exicuteEvents(item, ["mousemove", "mouseover"]); if (!mouseOverList.includes(item)) { mouseOverList.push(item); - exicuteEvents(item, ["mouseenter", "pointerenter"]); + exicuteEvents(item, ["mouseenter", "pointerenter"]); } } @@ -229,7 +217,7 @@ window.addEventListener( } if (eventType == "rightDragStart") { - exicuteEvents(item, ["contextmenu","auxclick", "mousedown", "pointerdown"], { button: 2 }); + exicuteEvents(item, ["contextmenu", "auxclick", "mousedown", "pointerdown"], { button: 2 }); } if (eventType == "rightDragEnd") { @@ -252,7 +240,7 @@ window.addEventListener( } } - function exicuteEvent(TargetElement, eventToSend = {}) { +function exicuteEvent(TargetElement, eventToSend = {}) { eventToSend.clientX = absoluteX; eventToSend.clientY = absoluteY; eventToSend.x = absoluteX; @@ -266,7 +254,7 @@ window.addEventListener( eventToSend = new MouseEvent(eventToSend.type, eventToSend); try { - testResult = TargetElement.dispatchEvent(eventToSend); + testResult = TargetElement.dispatchEvent(eventToSend); if (mouseDebugger) if (!testResult) console.log("event trigger failed", testResult, TargetElement, eventToSend); //if (TargetElement.dispatchEvent(eventToSend) == false) console.log("event trigger failed", TargetElement, eventToSend); return testResult; @@ -276,10 +264,10 @@ window.addEventListener( } } - function exicuteEvents(TargetElement, eventTypes, eventToSend = {}) { +function exicuteEvents(TargetElement, eventTypes, eventToSend = {}) { const eventTemplate = JSON.parse(JSON.stringify(eventToSend)); - eventTypes.forEach( (enenvtToFire, key) => { + eventTypes.forEach((enenvtToFire, key) => { eventTemplate.type = enenvtToFire; - exicuteEvent(TargetElement, eventTemplate); + exicuteEvent(TargetElement, eventTemplate); }); }