From 65f4b600bcd5ab57580d89c9a29f59e7d1744c2d Mon Sep 17 00:00:00 2001 From: Philip Rideout Date: Thu, 4 Mar 2021 15:00:06 -0800 Subject: [PATCH] Polish up the Remote Control page. --- libs/filagui/include/filagui/ImGuiHelper.h | 3 +-- libs/viewer/include/viewer/SimpleViewer.h | 2 +- libs/viewer/src/SimpleViewer.cpp | 7 ++++--- web/samples/remote.html | 20 +++++++++++++++----- 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/libs/filagui/include/filagui/ImGuiHelper.h b/libs/filagui/include/filagui/ImGuiHelper.h index d093836fd1..e6ffe2386e 100644 --- a/libs/filagui/include/filagui/ImGuiHelper.h +++ b/libs/filagui/include/filagui/ImGuiHelper.h @@ -50,8 +50,7 @@ public: ImGuiHelper(filament::Engine* engine, filament::View* view, const utils::Path& fontPath); ~ImGuiHelper(); - // Informs ImGui of the current display size, as well as the pixel ratio for high DPI displays. - // The display size is given in terms of virtual pixels, not physical pixels. + // Informs ImGui of the current display size, as well as a scaling factor when scissoring. void setDisplaySize(int width, int height, float scaleX = 1.0f, float scaleY = 1.0f); // High-level utility method that takes a callback for creating all ImGui windows and widgets. diff --git a/libs/viewer/include/viewer/SimpleViewer.h b/libs/viewer/include/viewer/SimpleViewer.h index a5a56f8e79..a84fccbfcd 100644 --- a/libs/viewer/include/viewer/SimpleViewer.h +++ b/libs/viewer/include/viewer/SimpleViewer.h @@ -123,7 +123,7 @@ public: * internal ImGuiHelper instance. */ void renderUserInterface(float timeStepInSeconds, filament::View* guiView, float pixelRatio, - float mouseX, float mouseY, bool mouseButton); + float mouseX, float mouseY, bool mouseButton, float mouseWheelY); /** * Retrieves the current width of the ImGui "window" which we are using as a sidebar. diff --git a/libs/viewer/src/SimpleViewer.cpp b/libs/viewer/src/SimpleViewer.cpp index fbc02b8254..a0283faa43 100644 --- a/libs/viewer/src/SimpleViewer.cpp +++ b/libs/viewer/src/SimpleViewer.cpp @@ -173,7 +173,7 @@ void SimpleViewer::applyAnimation(double currentTime) { } void SimpleViewer::renderUserInterface(float timeStepInSeconds, View* guiView, float pixelRatio, - float mouseX, float mouseY, bool mouseButton) { + float mouseX, float mouseY, bool mouseButton, float mouseWheelY) { if (mImGuiHelper == nullptr) { mImGuiHelper = new ImGuiHelper(mEngine, guiView, ""); @@ -185,11 +185,12 @@ void SimpleViewer::renderUserInterface(float timeStepInSeconds, View* guiView, f } const auto size = guiView->getViewport(); - mImGuiHelper->setDisplaySize(size.width, size.height, pixelRatio, pixelRatio); + mImGuiHelper->setDisplaySize(size.width, size.height, 1, 1); ImGuiIO& io = ImGui::GetIO(); io.MousePos.x = mouseX; io.MousePos.y = mouseY; + io.MouseWheel += mouseWheelY; io.MouseDown[0] = mouseButton; io.MouseDown[1] = false; io.MouseDown[2] = false; @@ -394,7 +395,7 @@ void SimpleViewer::updateUserInterface() { ImGui::Unindent(); } - if (ImGui::CollapsingHeader("Fog")) { + if (ImGui::CollapsingHeader("Fog", ImGuiTreeNodeFlags_DefaultOpen)) { ImGui::Indent(); ImGui::Checkbox("Enable fog", &mSettings.view.fog.enabled); ImGui::SliderFloat("Start", &mSettings.view.fog.distance, 0.0f, 100.0f); diff --git a/web/samples/remote.html b/web/samples/remote.html index 9a6baf2b91..dc4f52421c 100644 --- a/web/samples/remote.html +++ b/web/samples/remote.html @@ -116,7 +116,7 @@ class App { this.dropbox = document.getElementById("dropbox"); this.status = document.getElementById("status"); - this.canvas = document.getElementsByTagName('canvas')[0]; + this.canvas = document.getElementsByTagName("canvas")[0]; const engine = this.engine = Filament.Engine.create(this.canvas); const scene = this.scene = engine.createScene(); @@ -145,6 +145,8 @@ class App { this.mouseX = -1; this.mouseY = -1; this.mouseButton = false; + this.mouseButtonEvents = []; + this.mouseWheelY = 0; Object.seal(this); @@ -154,8 +156,9 @@ class App { this.mouseX = e.offsetX * window.devicePixelRatio; this.mouseY = e.offsetY * window.devicePixelRatio; }); - this.canvas.addEventListener("pointerup", e => this.mouseButton = false); - this.canvas.addEventListener("pointerdown", e => this.mouseButton = true); + this.canvas.addEventListener("pointerup", e => this.mouseButtonEvents.push(false)); + this.canvas.addEventListener("pointerdown", e => this.mouseButtonEvents.push(true)); + this.canvas.addEventListener("mousewheel", e => this.mouseWheelY = e.deltaY / 8); const resize = () => { const dpr = window.devicePixelRatio; @@ -163,7 +166,7 @@ class App { const height = this.canvas.clientHeight * dpr; this.resize(width, height); }; - window.addEventListener('resize', resize); + window.addEventListener("resize", resize); resize(); const dropbox = this.dropbox; @@ -257,8 +260,15 @@ class App { render() { const dt = 1.0 / 60.0; + // We only process only a single mouse button event here because we want ImGui to detect + // a touch event even when a down-up pair occurs between consecutive frames. + let mouseButton = this.mouseButton; + if (this.mouseButtonEvents.length > 0) { + this.mouseButton = this.mouseButtonEvents.shift(); + } this.simpleViewer.renderUserInterface(dt, this.uiview, window.devicePixelRatio, - this.mouseX, this.mouseY, this.mouseButton); + this.mouseX, this.mouseY, this.mouseButton, this.mouseWheelY); + this.mouseWheelY = 0; this.renderer.beginFrame(this.swapChain); this.renderer.renderView(this.view);