[add] camera adjuster

NaokiHori · Aug 28, 2024 · f694857 · f694857
1 parent fb96db0
commit f694857
Show file tree

Hide file tree

Showing 34 changed files with 4,451 additions and 108 deletions.
diff --git a/.github/workflows/webapp.yml b/.github/workflows/webapp.yml
@@ -0,0 +1,48 @@
+name: WebApp
+
+on:
+
+  push:
+    branches:
+      - main
+    paths:
+      - CameraAdjuster/**
+
+jobs:
+
+  build-and-deploy:
+    name: Build and deploy application
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    concurrency:
+      group: "pages"
+      cancel-in-progress: true
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@main
+      - name: Setup node
+        uses: actions/setup-node@main
+      - name: Install dependencies
+        run: |
+          cd CameraAdjuster
+          npm install
+      - name: Build
+        run: |
+          cd CameraAdjuster
+          npm run build-prod
+      - name: Setup GitHub Pages
+        uses: actions/configure-pages@main
+      - name: Upload HTML
+        uses: actions/upload-pages-artifact@main
+        with:
+          path: CameraAdjuster/dist
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@main
+
diff --git a/CameraAdjuster/.husky/pre-commit b/CameraAdjuster/.husky/pre-commit
@@ -0,0 +1,2 @@
+cd CameraAdjuster
+npx lint-staged
diff --git a/CameraAdjuster/.prettierignore b/CameraAdjuster/.prettierignore
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+dist
+node_modules
diff --git a/CameraAdjuster/.prettierrc b/CameraAdjuster/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/CameraAdjuster/README.md b/CameraAdjuster/README.md
@@ -0,0 +1,6 @@
+# Camera Adjuster
+
+> [!NOTE]  
+> Under construction.
+
+[A simple web application](https://naokihori.github.io/Contour3D/index.html) to adjust positions and orientations of the screen and camera interactively.
diff --git a/CameraAdjuster/eslint.config.js b/CameraAdjuster/eslint.config.js
@@ -0,0 +1,21 @@
+// @ts-check
+
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.strictTypeChecked,
+  ...tseslint.configs.stylisticTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    ignores: ["node_modules/*", "dist/*", "eslint.config.js"],
+  },
+);
diff --git a/CameraAdjuster/index.html b/CameraAdjuster/index.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta
+      name="description"
+      content="A web application to adjust screen and camera interactively, designed for my Contour3D library"
+    />
+    <link rel="stylesheet" href="/style/main.css" />
+    <title>Camera Adjuster</title>
+  </head>
+
+  <body id="body">
+    <h1 id="header">
+      <button id="menu-go-to-left">&lt;-</button>
+      Camera Adjuster
+      <button id="menu-go-to-right">-&gt;</button>
+    </h1>
+
+    <div id="menu">
+      <div id="screen-size" class="input-container" style="display: flex">
+        <div class="input-text">
+          <label for="screen-width">Screen width</label>
+          <input id="screen-width" type="text" value="1" />
+        </div>
+        <div class="input-text">
+          <label for="screen-height">Screen height</label>
+          <input id="screen-height" type="text" value="0.75" />
+        </div>
+      </div>
+
+      <div id="distance" class="input-container" style="display: none">
+        <div class="input-text">
+          <label for="focal-screen-distance">Focal-screen distance</label>
+          <input id="focal-screen-distance" type="text" value="2" />
+        </div>
+        <div class="input-text">
+          <label for="focal-camera-distance">Focal-camera distance</label>
+          <input id="focal-camera-distance" type="text" value="3" />
+        </div>
+      </div>
+
+      <div id="box-size" class="input-container" style="display: none">
+        <div class="input-text">
+          <label for="box-size-x">Box size (x)</label>
+          <input id="box-size-x" type="text" value="1" />
+        </div>
+        <div class="input-text">
+          <label for="box-size-y">Box size (y)</label>
+          <input id="box-size-y" type="text" value="1" />
+        </div>
+        <div class="input-text">
+          <label for="box-size-z">Box size (z)</label>
+          <input id="box-size-z" type="text" value="1" />
+        </div>
+      </div>
+
+      <div id="angle" class="input-container" style="display: none">
+        <div class="input-range">
+          <label id="elevation-label" for="elevation-input"></label>
+          <input
+            id="elevation-input"
+            type="range"
+            min="-180"
+            max="179"
+            step="1"
+            value="60"
+          />
+        </div>
+        <div class="input-range">
+          <label id="azimuth-label" for="azimuth-input"></label>
+          <input
+            id="azimuth-input"
+            type="range"
+            min="-180"
+            max="179"
+            step="1"
+            value="30"
+          />
+        </div>
+        <div class="input-range">
+          <label id="roll-label" for="roll-input"></label>
+          <input
+            id="roll-input"
+            type="range"
+            min="-180"
+            max="179"
+            step="1"
+            value="0"
+          />
+        </div>
+      </div>
+    </div>
+
+    <canvas id="main-canvas"> Cannot use canvas element </canvas>
+
+    <footer>
+      <a href="https://github.com/NaokiHori/Contour3D">
+        &copy; 2024, Naoki Hori
+      </a>
+    </footer>
+
+    <dialog id="code-modal">
+      <button id="code-modal-close-button">Close</button>
+      <div class="input-text">
+        <div>Pixels per unit length</div>
+        <input id="pixels-per-unit-length" type="text" value="1440" />
+      </div>
+      <div id="code-space"></div>
+    </dialog>
+
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>