diff --git a/MaterialPlane.js b/MaterialPlane.js index 076c7f0..b817db3 100644 --- a/MaterialPlane.js +++ b/MaterialPlane.js @@ -215,6 +215,9 @@ Hooks.on('ready', async ()=>{ else if (payload.msgType == 'refresh') { window.location.reload(); } + else if (payload.msgType == 'calConfig') { + calibrationProgress.configureElements(payload.config, true) + } if (game.user.isGM) { if (payload.msgType == "controlToken") { lastToken = game.canvas.tokens.get(payload.tokenId); @@ -324,8 +327,6 @@ Hooks.on('closempConfig',() => { Hooks.on('closecalibrationProgressScreen',() => { removeOverlay(); calibrationProgress.setCalibrationRunning(false) - console.log('stopping calibration') - sendWS({event:"calibration", state:"cancel"}); }); diff --git a/changelog.md b/changelog.md index ced99ed..61f827f 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,23 @@ # Changelog Material Plane Foundry Module +### v3.2.1 - 26-09-2024 + +Additions: + + +Fixes: + + +Other: + + ### v3.2.0 - 16-08-2024 Additions: diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..cb9fd9d --- /dev/null +++ b/css/style.css @@ -0,0 +1,270 @@ +.mpConfigTab { + overflow: hidden; + display:flex; +} + +.mpConfigTab button { + background-color: #ccc; + float: left; + border: 1px solid black; + outline: none; + cursor: pointer; + transition: 0.3s; + border-radius: 5px 5px 0px 0px; +} + +.mpConfigTab button:hover { + background-color: #ddd; + +} + +.mpConfigTab button.active { + background-color: inherit; + border: 1px solid black; + border-bottom: none; +} + +.mpConfigTabContent { + padding: 6px 12px; + border: 1px solid black; + border-top: none; + min-height: 300px; + max-height: 700px; + overflow: auto; +} + +.mpContentSensor { + height: 500px; + max-height: 500px; + overflow: hidden; +} + +.mpConfigFormElements{ + width: 100%; + display: flex; + margin-bottom: 1px; + align-items: center; +} + +.mpConfigFormElements label { + width: 50%; +} + +.mpConfigFormElements .mpConfigFormVal, +.mpConfigFormElements .mpConfigFormValRange, +.mpConfigFormElements .mpConfigFormBtn { + position: relative; + display: flex; + justify-content: flex-end; + width: 50%; +} + +.mpConfigFormElements .mpConfigFormVal input[type='text'], +.mpConfigFormElements .mpConfigFormVal input[type='number'], +.mpConfigFormElements .mpConfigFormVal select, +.mpConfigFormElements .mpConfigFormValRange input[type='range'] { + flex-grow: 4; +} + +.mpConfigFormElements .mpConfigFormValRange input[type='number'] { + width: 25%; + margin-left: 5px; +} + +.mpConfigFormElements .mpConfigFormBtn button { + width: 100%; + margin-left: 5px; +} + +.mpConfigFormElements .mpConfigFormBtn select { + min-width: 50%; + transform: translateY(10%); +} + +.mpConfigNotes { + font-size: 0.85em; + font-style: italic; + color: grey; + margin-bottom: 5px; +} + +.mpNotes { + font-size: 0.9em; + color: black; + margin-bottom: 5px; +} + +.mpBaseTableId { + flex: 0 0 10%; +} +.mpBaseTableName { + flex: 0 0 20%; +} +.mpBaseTableLink { + text-align: center; + flex: 0 0 7%; +} +header.mpBaseTableHeader { + background: rgba(0, 0, 0, 0.5); + width: 100%; + padding: 5px; + border: 1px solid #191813; + text-align: left; + font-weight: bold; + color: #f0f0e0; + font-weight: bold; + text-shadow: 1px 1px #000; +} +.mpIrTableName { + flex: 0 0 25%; +} + +.mpIrTableProtocol{ + flex: 0 0 12.5% +} + +.mpIrTableCode{ + flex: 0 0 15%; +} + +.mpIrTableMacro{ + flex: 0 0 15%; +} + +.mpIrTableArgument{ + flex: 0 0 12.5%; +} + +.mpIrTableDelay{ + flex: 0 0 7.5%; +} + +.mpIrTableLink{ + flex: 0 0 5%; +} + +.mpConfigContent table, +.mpConfigContent th, +.mpConfigContent td { + border: 1px solid black; +} +.mpConfigContent canvas { + border: 2px solid rgb(151, 149, 149); +} +.mpExpandable { + cursor: pointer; +} +.mpCollapsed { + display:none; +} +.mpExpandableIcon { + border: none; +} + +.mpConfigColumn { + float: left; + width: 48%; + margin: 1%; +} + +.mpConfigColumnLeft { + height: 425px; + overflow: auto; +} + +.mpConfigColumn label { + width: 35%; +} + +.mpConfigColumn .mpConfigFormVal, +.mpConfigColumn .mpConfigFormValRange, +.mpConfigColumn .mpConfigFormBtn { + width: 65%; +} + +/* Clear floats after the columns */ +.mpConfigRow:after { + content: ""; + display: table; + clear: both; +} + +.mpDownloadsTable, +.mpDownloadsTable th, +.mpDownloadsTable td { + border: none; +} + +.mpDownloadsColumnLabel { + width:25%; + text-align: left; +} +.mpDownloadsColumnVersion { + width:15%; + text-align: center; +} +.mpDownloadsColumnOS { + width:15%; + text-align: center; +} +.mpDownloadsColumnButton { + width:15%; + text-align: center; +} +.mpDownloadsBtn { + width:50%; +} + +/* Tooltip container */ +.mpTooltip { + position: relative; + display: inline-block; + cursor: default; + overflow: visible; + max-width: 100%; +} + +/* Tooltip text */ +.mpTooltip .mpTooltiptext { + visibility: hidden; + background-color: black; + text-align: center; + padding: 5px; + margin-left: 5px; + border-radius: 6px; + min-width: 200px; + max-width: 200px; + opacity: 0.75; + + top: -15px; + position: absolute; + z-index: 1; + font-size: 12px; + font-style: italic; + font-weight: normal; + color: darkgrey; +} + +/* Show the tooltip text when you mouse over the tooltip container */ +.mpTooltip:hover .mpTooltiptext { + visibility: visible; +} + +.MaterialPlane_Config { + max-height: 500px; +} + +.mpBaseListContainer { + min-height: 150px; + max-height: 150px; + overflow-y: scroll; +} + +.mpCalError { + background-color: orange; + border: solid 1px black; + border-radius: 10px; + margin: 5px; + padding: 5px; + font-size: 0.9em; +} \ No newline at end of file diff --git a/img/.thumb/MaterialFoundry2560x1440.jpg.jpg b/img/.thumb/MaterialFoundry2560x1440.jpg.jpg new file mode 100644 index 0000000..87e2aaa Binary files /dev/null and b/img/.thumb/MaterialFoundry2560x1440.jpg.jpg differ diff --git a/img/.thumb/macro.png.jpg b/img/.thumb/macro.png.jpg new file mode 100644 index 0000000..12ff474 Binary files /dev/null and b/img/.thumb/macro.png.jpg differ diff --git a/lang/en.json b/lang/en.json index 517441f..e49c444 100644 --- a/lang/en.json +++ b/lang/en.json @@ -247,6 +247,8 @@ "MaterialPlane.Notifications.BatteryLowSensor": "Sensor battery low.", "MaterialPlane.Notifications.NoDrawingPermission": "User lacks permission to create drawings.", "MaterialPlane.Notifications.NoTemplatePermission": "User lacks permission to create templates.", + "MaterialPlane.Notifications.AutoCalibrationStarting": "Performing auto calibration", + "MaterialPlane.Notifications.AutoCalibrationDone": "Auto calibration done", "MaterialPlane.CalDialog.Singlepoint1": "Single-point calibration", "MaterialPlane.CalDialog.Singlepoint2": "Please calibrate each corner of you screen.", diff --git a/module.json b/module.json index 1c70e3e..4d83fe2 100644 --- a/module.json +++ b/module.json @@ -1,7 +1,7 @@ { "title": "Material Plane", "description": "Module for tracking physical minis. By using an IR tracking camera and mini bases with IR LED's this module can be used to move tokens in Foundry by moving physical tokens on top of a horizontally mounted TV", - "version": "3.2.0", + "version": "3.2.1", "authors": [ { "name": "CDeenen", @@ -14,6 +14,9 @@ "esmodules": [ "MaterialPlane.js" ], + "styles": [ + "./css/style.css" + ], "socket": true, "flags": { "minimumSensorVersion": "3.0.0", @@ -52,7 +55,7 @@ ], "url": "https://github.com/MaterialFoundry/MaterialPlane_Foundry", "manifest": "https://github.com/MaterialFoundry/MaterialPlane_Foundry/releases/latest/download/module.json", - "download": "https://github.com/MaterialFoundry/MaterialPlane_Foundry/releases/download/v3.1.1/module.zip", + "download": "https://github.com/MaterialFoundry/MaterialPlane_Foundry/releases/download/v3.2.1/module.zip", "id": "MaterialPlane", "compatibility": { "minimum": "11", diff --git a/src/Communication/websocket.js b/src/Communication/websocket.js index f03e92e..f07c7bb 100644 --- a/src/Communication/websocket.js +++ b/src/Communication/websocket.js @@ -17,17 +17,14 @@ let connectionAttempts = 0; * @param {*} msg Message received from the IR tracker */ async function analyzeWSmessage(msg,passthrough = false){ - //console.log('raw',msg); debug('wsRaw',msg); let data; try { data = JSON.parse(msg); debug('ws',data); - //console.log('data',data); } catch (error) { - console.warn('could not parse JSON',error, msg); - //console.log(msg); + console.warn('could not parse JSON. Message: "', msg , '". Error: ', error); return; } if (data.status == "debug") { @@ -57,11 +54,19 @@ async function analyzeWSmessage(msg,passthrough = false){ configDialog.setIrSettings(data.ir); } else if (data.status == 'calibration') { - if (data.state == 'init') calibrationProgress.init(); - else if (data.state == 'starting') calibrationProgress.start(data.mode, data.onScreen); - else if (data.state == 'done') calibrationProgress.done(); - else if (data.state == 'cancelled') calibrationProgress.cancel(); - else if (data.state == 'newPoint') calibrationProgress.setPoint(data); + if (data.mode == 'Auto') { + if (data.state == 'starting') + ui.notifications.info("Material Plane: "+game.i18n.localize("MaterialPlane.Notifications.AutoCalibrationStarting")); + else if (data.state == 'done') + ui.notifications.info("Material Plane: "+game.i18n.localize("MaterialPlane.Notifications.AutoCalibrationDone")); + } + else { + if (data.state == 'init') calibrationProgress.init(); + else if (data.state == 'starting') calibrationProgress.start(data.mode, data.onScreen); + else if (data.state == 'done') calibrationProgress.done(); + else if (data.state == 'cancelled') calibrationProgress.cancel(); + else if (data.state == 'newPoint') calibrationProgress.setPoint(data); + } } else if (data.status == 'sensorConnected') { ui.notifications.info(`Material Plane: ${game.i18n.localize("MaterialPlane.Notifications.ConnectedMSS")}: ${game.settings.get(moduleName,'IP')}`); @@ -158,7 +163,6 @@ function resetWS(){ } export function sendWS(data){ - //console.log('SendWS',wsOpen,data) if (wsOpen) { if (game.settings.get(moduleName,'ConnectionMode') == 'materialCompanion') { ws.send(JSON.stringify({ @@ -168,7 +172,6 @@ export function sendWS(data){ })); } else ws.send(JSON.stringify(data)); - //console.log('data',data) } } \ No newline at end of file diff --git a/src/IRtoken/tokenHelpers.js b/src/IRtoken/tokenHelpers.js index 22ed546..6a9c407 100644 --- a/src/IRtoken/tokenHelpers.js +++ b/src/IRtoken/tokenHelpers.js @@ -160,10 +160,8 @@ export function getGridCenter(coords, token) { x: coords.x + 0.5*gridSize, y: coords.y + 0.5*gridSize } - //const center = + return compatibilityHandler('gridCenter', newCoords.x, newCoords.y); - //console.log('center',center) - //return {x: center[0], y: center[1]}; } /** diff --git a/src/Misc/compatibilityHandler.js b/src/Misc/compatibilityHandler.js index 31b2b5e..ccaaee0 100644 --- a/src/Misc/compatibilityHandler.js +++ b/src/Misc/compatibilityHandler.js @@ -20,8 +20,6 @@ export function compatibilityInit() { } export function compatibilityHandler(id, ...args) { - //console.log('combatibiliyHandler',id, args) - if (id == 'mergeObject') return mergeObj(args); else if (id == 'tokenCenter') return tokenCenter(args[0], args[1], args[2]); else if (id == 'gridCenter') return gridCenter(args[0], args[1]); @@ -79,7 +77,6 @@ function getGridOffset(x, y) { } function getTopLeftPoint(x, y) { - //console.log('TLP',canvas.grid.grid.getPixelsFromGridPosition(x, y),canvas.grid.getTopLeftPoint({i:x, j:y})) if (isV12) { const topLeftPoint = canvas.grid.getTopLeftPoint({i:x, j:y}); return [topLeftPoint.x, topLeftPoint.y]; diff --git a/src/Misc/misc.js b/src/Misc/misc.js index 7d33d32..d0ca6a9 100644 --- a/src/Misc/misc.js +++ b/src/Misc/misc.js @@ -16,6 +16,22 @@ let debugSettings = { let batteryNotificationTimer = 0; +export function hideElement(id) { + const elmnt = document.getElementById(id); + if (elmnt) elmnt.style.display = 'none'; +} + +export function showElement(id) { + const elmnt = document.getElementById(id); + if (elmnt) elmnt.style.display = ''; +} + +export function setSelectElement(id, value) { + if (value == undefined) return; + const elmnt = document.getElementById(id); + if (elmnt) elmnt.value = value; +} + export function roundFloat(num, significance) { const multiplier = Math.pow(10, significance); return Math.round(multiplier*num)/multiplier; diff --git a/src/analyzeTouch.js b/src/analyzeTouch.js index 6fbe342..250340f 100644 --- a/src/analyzeTouch.js +++ b/src/analyzeTouch.js @@ -11,9 +11,7 @@ let touchesTimer = [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]; let pauseTimeoutCheck = false; export async function analyzeTouch(type,data) { - //console.log('data',type,data) - //debug('touchDetect',{type,data}); - + debug('touchDetect',{type,data}); if (game.paused) { if (!pauseTimeoutCheck) { diff --git a/src/calibration.js b/src/calibration.js index 31d86b2..46610a4 100644 --- a/src/calibration.js +++ b/src/calibration.js @@ -1,17 +1,21 @@ import { sendWS } from "./Communication/websocket.js"; import { moduleName, calibrationProgress } from "../MaterialPlane.js"; import { compatibilityHandler } from "./Misc/compatibilityHandler.js"; +import { hideElement, showElement, setSelectElement } from "./Misc/misc.js"; let countdownCount = 5; let countdown; + export let calOverlay = undefined; export class calibrationProgressScreen extends FormApplication { + config = {}; + calibrationRunning = false; + pointCount = 0; + calibrationMode = 'single'; + constructor(data, options) { super(data, options); - this.calibrationRunning = false; - this.pointCount = 0; - this.calibrationMode = 'single'; } /** @@ -50,108 +54,140 @@ export class calibrationProgressScreen extends FormApplication { } - activateListeners(html) { - super.activateListeners(html); - - html.find("select[id='mpCalMethodSel']").on("change", event => { - document.getElementById('mpCalStartButton').style.display = 'none'; - document.getElementById('mpCalOffsetSelector').style.display = 'none'; - document.getElementById('mpCalSinglepointSelector').style.display = 'none'; - document.getElementById('mpCalLocationSelector').style.display = 'none'; - - document.getElementById('mpCalMethodExplanation').style.display = 'none'; - - document.getElementById('mpCalOffsetSel').value = ''; - document.getElementById('mpCalSinglepointSel').value = ''; - document.getElementById('mpCalLocationSel').value = ''; - - if (game.settings.get(moduleName,'ActiveUser') == game.userId) calOverlay.init(''); + configureElements(config, socket=false) { + this.config = config; + + hideElement("mpCalMethodExplanation"); + hideElement("mpCalSinglepointSelector"); + hideElement("mpCalSinglepointDescription"); + hideElement('mpCalOffsetSelector'); + hideElement('mpCalOffsetDescription'); + hideElement('mpCalStartButton'); + hideElement('mpCalLocationDescription'); + hideElement('mpCalLocationSelector'); + hideElement('mpCalOffsetDescription'); + + if (socket) { + setSelectElement("mpCalMethodSel", config.methodSel); + setSelectElement("mpCalOffsetSel", config.customMode); + setSelectElement("mpCalSinglepointSel", config.pointMode); + setSelectElement("mpCalLocationSel", config.location); + } + + if (config.methodSel === '') { + showElement("mpCalMethodExplanation"); + if (game.settings.get(moduleName,'ActiveUser') === game.userId) calOverlay.init(''); + } + else if (config.methodSel === 'Normal') { + showElement("mpCalSinglepointSelector"); + showElement("mpCalSinglepointDescription"); - if (event.target.value == '') { - document.getElementById('mpCalMethodExplanation').style.display = ''; + if (config.pointMode === '') { + showElement('mpCalSinglepointDescription'); + if (game.settings.get(moduleName,'ActiveUser') === game.userId) calOverlay.init(''); + } + else if (config.pointMode) { + hideElement('mpCalSinglepointDescription'); + showElement('mpCalLocationDescription'); + showElement('mpCalLocationSelector'); + if (game.settings.get(moduleName,'ActiveUser') === game.userId) calOverlay.init('both'); + } + + if (config.location === '') { + showElement('mpCalLocationDescription'); + } + else if (config.location) { + showElement('mpCalStartButton'); } + + if (config.pointMode != '') { + if (config.location === 'On-Screen') { + if (game.settings.get(moduleName,'ActiveUser') === game.userId) calOverlay.init('onScreen'); + } + else if (config.location === 'Corner') { + if (game.settings.get(moduleName,'ActiveUser') === game.userId) calOverlay.init('corners'); + } + } + } + else if (config.methodSel == 'Custom') { + showElement('mpCalOffsetSelector'); + showElement('mpCalOffsetDescription'); - if (event.target.value == 'Normal') { - document.getElementById('mpCalSinglepointSelector').style.display = ''; - document.getElementById('mpCalSinglepointDescription').style.display = ''; + if (config.customMode === '') { + showElement('mpCalOffsetDescription'); } - else if (event.target.value == 'Custom') { - document.getElementById('mpCalOffsetSelector').style.display = ''; - document.getElementById('mpCalOffsetDescription').style.display = ''; + else if (config.customMode === 'Custom') { + showElement('mpCalStartButton'); + hideElement('mpCalOffsetDescription'); } + else if (config.customMode === 'Calibrate') { + hideElement('mpCalOffsetDescription'); + showElement('mpCalSinglepointSelector'); + showElement('mpCalSinglepointDescription'); - this.setHeight(); + if (config.pointMode === '') { + showElement('mpCalSinglepointDescription'); + } + else if (config.pointMode) { + hideElement('mpCalSinglepointDescription'); + showElement('mpCalLocationDescription'); + showElement('mpCalLocationSelector'); + if (game.settings.get(moduleName,'ActiveUser') === game.userId) calOverlay.init('both'); + } + + if (config.location === '') { + showElement('mpCalLocationDescription'); + } + else if (config.location) { + showElement('mpCalStartButton'); + } + + if (config.pointMode != '') { + if (config.location === 'On-Screen') { + if (game.settings.get(moduleName,'ActiveUser') === game.userId) calOverlay.init('onScreen'); + } + else if (config.location === 'Corner') { + if (game.settings.get(moduleName,'ActiveUser') === game.userId) calOverlay.init('corners'); + } + } + } + } + + this.setHeight(); + + if (!socket) game.socket.emit(`module.MaterialPlane`, { + msgType: "calConfig", + config }); + } - html.find("select[id='mpCalOffsetSel']").on("change", event => { - document.getElementById('mpCalLocationSel').value = ''; - document.getElementById('mpCalLocationSelector').style.display = 'none'; - document.getElementById('mpCalStartButton').style.display = 'none'; - document.getElementById('mpCalSinglepointSelector').style.display = 'none'; + - document.getElementById('mpCalOffsetDescription').style.display = 'none'; - if (game.settings.get(moduleName,'ActiveUser') == game.userId) calOverlay.init(''); + activateListeners(html) { + super.activateListeners(html); - if (event.target.value == '') { - document.getElementById('mpCalOffsetDescription').style.display = ''; - } + html.find("select[id='mpCalMethodSel']").on("change", event => { + if (game.settings.get(moduleName,'ActiveUser') == game.userId) calOverlay.init(''); + this.config.methodSel = event.target.value; + this.configureElements(this.config); + }); - if (event.target.value == 'Custom') { - document.getElementById('mpCalStartButton').style.display = ''; - document.getElementById('mpCalSinglepointSelector').style.display = ''; - document.getElementById('mpCalSinglepointDescription').style.display = ''; - } - else if (event.target.value == 'Calibrate') { - document.getElementById('mpCalStartButton').style.display = ''; - } + html.find("select[id='mpCalOffsetSel']").on("change", event => { + if (game.settings.get(moduleName,'ActiveUser') == game.userId) calOverlay.init(''); + this.config.customMode = event.target.value; + this.configureElements(this.config); }); html.find("select[id='mpCalLocationSel']").on("change", event => { - document.getElementById('mpCalLocationDescription').style.display = 'none'; - document.getElementById('mpCalStartButton').style.display = 'none'; if (game.settings.get(moduleName,'ActiveUser') == game.userId) calOverlay.init('both'); - - if (event.target.value == '') { - document.getElementById('mpCalLocationDescription').style.display = ''; - } - else { - document.getElementById('mpCalStartButton').style.display = ''; - } - - if (event.target.value == 'On-Screen') { - if (game.settings.get(moduleName,'ActiveUser') == game.userId) calOverlay.init('onScreen'); - } - else if (event.target.value == 'Corner') { - if (game.settings.get(moduleName,'ActiveUser') == game.userId) calOverlay.init('corners'); - } + this.config.location = event.target.value; + this.configureElements(this.config); + }); html.find("select[id='mpCalSinglepointSel']").on("change", event => { - document.getElementById('mpCalLocationDescription').style.display = 'none'; - document.getElementById('mpCalLocationSelector').style.display = 'none'; - document.getElementById('mpCalLocationSel').value = ''; - - const calMode = document.getElementById('mpCalMethodSel').value; - - if (calMode == 'Normal') { - if (event.target.value == '') { - document.getElementById('mpCalSinglepointDescription').style.display = ''; - } - else { - document.getElementById('mpCalSinglepointDescription').style.display = 'none'; - document.getElementById('mpCalLocationDescription').style.display = ''; - document.getElementById('mpCalLocationSelector').style.display = ''; - if (game.settings.get(moduleName,'ActiveUser') == game.userId) calOverlay.init('both'); - } - } - else { - if (event.target.value == '') { - document.getElementById('mpCalSinglepointDescription').style.display = ''; - } - else { - document.getElementById('mpCalSinglepointDescription').style.display = 'none'; - } - } + this.config.pointMode = event.target.value; + this.configureElements(this.config); }); html.find("button[name='mpStartCalibration']").on("click", event => { @@ -177,9 +213,9 @@ export class calibrationProgressScreen extends FormApplication { mode } - if (mode != 'Offset' && locationSel == 'On-Screen') { + if (locationSel == 'On-Screen') msg.calibrationBounds = calibrationBounds; - } + sendWS(msg); }); @@ -200,6 +236,7 @@ export class calibrationProgressScreen extends FormApplication { init() { if (game.settings.get(moduleName,'ActiveUser') != game.userId && !game.user.isGM) return; + this.config = {}; this.calibrationMode = 'init'; this.calibrationRunning = true; this.render(true); @@ -389,6 +426,7 @@ export class calibrationProgressScreen extends FormApplication { export function removeOverlay(){ if (game.settings.get(moduleName,'ActiveUser') != game.userId) return; if (calOverlay == undefined) return; + window.removeEventListener("mouseout", calOverlay.mouseOutEventHandler); canvas.stage.removeChild(calOverlay); calOverlay.remove(); calOverlay = undefined; @@ -480,44 +518,36 @@ export class calibrationOverlay extends ControlsLayer { $('#players').hide(); $('#hotbar').hide(); - var interval; - let oldScreenLeft = window.screenLeft; - let oldScreenTop = window.screenTop; - this.activeScreenXOffset = 0; - this.activeScreenYOffset = 0; - let counter = 0; - let parent = this; - window.addEventListener("mouseout", function(evt){ - if (evt.toElement === null && evt.relatedTarget === null) { - interval = setInterval(function () { - if (counter > 40 || oldScreenLeft != window.screenLeft || oldScreenTop != window.screenTop) { - counter = 0; - oldScreenLeft = window.screenLeft; - oldScreenTop = window.screenTop; - - parent.update(); - } - counter++; - }, 25); - } else { - clearInterval(interval); - } + window.addEventListener("resize", (evt) => { + if (!calOverlay) return; + calOverlay.update() }); } - + update() { - const activeScreenX = Math.floor((window.screenLeft+window.outerWidth/2)/screen.width); - const activeScreenY = Math.floor((window.screenTop+window.outerHeight/2)/screen.height); - this.activeScreenXOffset = (window.screenLeft - (activeScreenX + 0.5)*screen.width + window.outerWidth/2)/canvas.scene._viewPosition.scale; - this.activeScreenYOffset = (window.screenTop - (activeScreenY + 0.5)*screen.height + window.outerHeight/2)/canvas.scene._viewPosition.scale; + if (document.getElementById("mpCalError")) { + //Check if window is fullscreen + const isNotFullScreen = screen.width != window.innerWidth || screen.height != window.innerHeight; + + //Check for browser zoom or display scaling + const isScaled = window.devicePixelRatio != 1; + + if (isNotFullScreen || isScaled) + document.getElementById("mpCalError").style.display = ""; + else + document.getElementById("mpCalError").style.display = "none"; + + document.getElementById("MaterialPlane_CalProgMenu").style.height = "auto" + } + //Calculate the amount of pixels that are visible on the screen const horVisible = screen.width/canvas.scene._viewPosition.scale; const vertVisible = screen.height/canvas.scene._viewPosition.scale; - const x = canvas.scene._viewPosition.x - this.activeScreenXOffset; - let y = canvas.scene._viewPosition.y - this.activeScreenYOffset; - + const x = canvas.scene._viewPosition.x; + let y = canvas.scene._viewPosition.y; + if (this.mode == 'onScreen' || this.mode == 'both') { const xOffset = 2*horVisible/5; const yOffset = 2*vertVisible/6; @@ -595,6 +625,7 @@ export class calibrationOverlay extends ControlsLayer { * Remove the marker */ remove() { + window.removeEventListener("resize", calOverlay.update()) this.container.removeChildren(); $('#MaterialPlane_CalMenu').show(); $('#logo').show(); diff --git a/templates/calibrationProgressScreen.html b/templates/calibrationProgressScreen.html index 5ee097a..c3140d5 100644 --- a/templates/calibrationProgressScreen.html +++ b/templates/calibrationProgressScreen.html @@ -44,7 +44,7 @@

Calibration Configuration

  1. Calibrate using your chosen custom calibration points by selecting 'Custom Points'.
    2. -
  2. Calibrate to pre-defined calibration points so the sensor knows where these points are related relative to your display, by selecting 'Calibrate Custom Points'
    3. +
  3. Calibrate to pre-defined calibration points (display corner or on-screen points) so the sensor knows where these points are related relative to your display, by selecting 'Calibrate Custom Points'
After that, you only need to perform step 1, unless a different display is used, or the relative location of the sensor to the display is changed significantly. @@ -73,7 +73,7 @@

Calibration Configuration

-