[add] camera adjuster

NaokiHori · Aug 27, 2024 · ea6d490 · ea6d490
1 parent fb96db0
commit ea6d490
Show file tree

Hide file tree

Showing 34 changed files with 4,294 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,83 @@
+<!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">Camera Adjuster</h1>
+
+ <div id="screen-size-controller">
+ <div class="input-text-container">
+ <label for="screen-width">Screen width</label>
+ <input id="screen-width" type="text" value="1" />
+ </div>
+ <div class="input-text-container">
+ <label for="screen-height">Screen height</label>
+ <input id="screen-height" type="text" value="0.75" />
+ </div>
+ </div>
+
+ <div id="angle-controller">
+ <div class="input-range-container">
+ <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-container">
+ <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-container">
+ <label id="roll-label" for="roll-input"></label>
+ <input
+ id="roll-input"
+ type="range"
+ min="-180"
+ max="179"
+ step="1"
+ value="0"
+ />
+ </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-container">
+ <div>Pixels per unit length</div>
+ <input id="pixels-per-unit-length" type="text" value="1080" />
+ </div>
+ <div id="code-space"></div>
+ </dialog>
+
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>