Add script to generate RRD vs. screenshots comparisons (#3946)

### What This PR introduces a script that builds a local, web-based comparison between our various example code and the screenshot we provide along them, to help identify discrepancies. ``` ❯ python scripts/screenshot_compare/build_screenshot_compare.py --help usage: build_screenshot_compare.py [-h] [--serve] [--skip-build] [--skip-example-build] Generate comparison between examples and their related screenshots. This script builds/gather RRDs and corresponding screenshots and displays them side-by-side. It pulls from the following sources: - The screenshots listed in .fbs files (crates/re_types/definitions/rerun/**/*.fbs), and the corresponding code examples in the docs (docs/code-examples/*.rs) - The `demo.rerun.io` examples, as built by the `build_demo_app.py` script. The comparison is generated in the `compare_screenshot` directory. Use the `--serve` option to show them in a browser. options: -h, --help show this help message and exit --serve Serve the app on this port after building [default: 8080] --skip-build Skip building the Python SDK and web viewer Wasm. --skip-example-build Skip building the RRDs. ``` <img width="2089" alt="image" src="https://github.com/rerun-io/rerun/assets/49431240/9db91c0e-b5c1-4fc0-a2b4-4f6a583ad91d"> ### Checklist * [x] I have read and agree to [Contributor Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and the [Code of Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md) * [x] I've included a screenshot or gif (if applicable) * [x] ~~I have tested [demo.rerun.io](https://demo.rerun.io/pr/3946) (if applicable)~~ * [x] The PR title and labels are set such as to maximize their usefulness for the next release's CHANGELOG - [PR Build Summary](https://build.rerun.io/pr/3946) - [Docs preview](https://rerun.io/preview/69d73db71693a32d77b3c89a5dfc3b432484f179/docs)  - [Examples preview](https://rerun.io/preview/69d73db71693a32d77b3c89a5dfc3b432484f179/examples)  - [Recent benchmark results](https://ref.rerun.io/dev/bench/) - [Wasm size tracking](https://ref.rerun.io/dev/sizes/) --------- Co-authored-by: Jeremy Leibs <[email protected]>
rerun-io · Oct 23, 2023 · 14206ed · 14206ed
1 parent fe913c9
commit 14206ed
Show file tree

Hide file tree

Showing 5 changed files with 393 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -44,5 +44,8 @@ screenshot*.png
 # Web demo app build
 web_demo
 
+# Screenshot comparison build
+/compare_screenshot
+
 .nox/
 *.rrd
diff --git a/scripts/screenshot_compare/assets/static/index.css b/scripts/screenshot_compare/assets/static/index.css
@@ -0,0 +1,51 @@
+html {
+  /* Remove touch delay: */
+  touch-action: manipulation;
+}
+
+body {
+  background: #0d1011;
+}
+
+html,
+body {
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+  height: 100%;
+  width: 100%;
+}
+
+.screen_splitter {
+  position: absolute;
+  height: 100vh;
+  width: 50vw;
+}
+
+.screen_splitter img {
+  position: absolute;
+  left: 50vw;
+  width: 50vw;
+}
+
+iframe {
+  margin-right: auto;
+  margin-left: auto;
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 100vh;
+
+  border: none;
+
+  /* canvas must be on top when visible */
+  z-index: 1000;
+}
+
+* {
+  font-family: sans-serif;
+  color: #cad8de;
+}
diff --git a/scripts/screenshot_compare/assets/templates/example.html b/scripts/screenshot_compare/assets/templates/example.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+  <!-- Disable zooming: -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+
+  <head>
+    <title>Compare Screenshot</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+
+  <body>
+    <div class="screen_splitter">
+      <iframe id="iframe" allowfullscreen src=""></iframe>
+      <img alt="" src="{{ example.screenshot_url }}" >
+    </div>
+
+
+
+    <script>
+      // set the iframe URL
+      let encodedUrl = encodeURIComponent(
+          window.location.protocol + "//" + window.location.host + "/examples/{{ example.name }}/data.rrd");
+      document.getElementById('iframe').src = "http://127.0.0.1:9090/?url=" + encodedUrl;
+    </script>
+  </body>
+</html>
+
+
diff --git a/scripts/screenshot_compare/assets/templates/index.html b/scripts/screenshot_compare/assets/templates/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+  <!-- Disable zooming: -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+
+  <head>
+    <title>Screenshot compare</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+
+  <body>
+
+    <ul>
+        {% for entry in examples %}
+            <li>
+            <a href="examples/{{ entry.name }}">{{ entry.name }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+  </body>
+</html>