Skip to content

Commit

Permalink
[add] arbitrary box sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@NaokiHori
NaokiHori committed Aug 28, 2024
1 parent 5c5187b commit 9c062bb
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 24 deletions.
15 changes: 15 additions & 0 deletions CameraAdjuster/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,21 @@ <h1 id="header">
</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>
Expand Down
5 changes: 5 additions & 0 deletions CameraAdjuster/src/component/canvas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,11 @@ export function updateCanvas(config: Config) {
screenVertical,
screenNormal,
screenCenter,
{
x: config.boxSizeX,
y: config.boxSizeY,
z: config.boxSizeZ,
} satisfies Vector3D,
imageData,
);
drawAxes(
Expand Down
49 changes: 25 additions & 24 deletions CameraAdjuster/src/component/canvas/drawLineSegments.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export function drawLineSegments(
screenVertical: Vector3D,
screenNormal: Vector3D,
screenCenter: Vector3D,
boxSizes: Vector3D,
imageData: ImageData,
) {
const width: number = imageData.width;
Expand All @@ -16,54 +17,54 @@ export function drawLineSegments(
const lineSegments: LineSegment[] = [
// in x
{
s: { x: -0.5, y: -0.5, z: -0.5 },
e: { x: +0.5, y: -0.5, z: -0.5 },
s: { x: -0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
e: { x: +0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
},
{
s: { x: -0.5, y: +0.5, z: -0.5 },
e: { x: +0.5, y: +0.5, z: -0.5 },
s: { x: -0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
e: { x: +0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
},
{
s: { x: -0.5, y: -0.5, z: +0.5 },
e: { x: +0.5, y: -0.5, z: +0.5 },
s: { x: -0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
e: { x: +0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
},
{
s: { x: -0.5, y: +0.5, z: +0.5 },
e: { x: +0.5, y: +0.5, z: +0.5 },
s: { x: -0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
e: { x: +0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
},
// in y
{
s: { x: -0.5, y: -0.5, z: -0.5 },
e: { x: -0.5, y: +0.5, z: -0.5 },
s: { x: -0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
e: { x: -0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
},
{
s: { x: +0.5, y: -0.5, z: -0.5 },
e: { x: +0.5, y: +0.5, z: -0.5 },
s: { x: +0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
e: { x: +0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
},
{
s: { x: -0.5, y: -0.5, z: +0.5 },
e: { x: -0.5, y: +0.5, z: +0.5 },
s: { x: -0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
e: { x: -0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
},
{
s: { x: +0.5, y: -0.5, z: +0.5 },
e: { x: +0.5, y: +0.5, z: +0.5 },
s: { x: +0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
e: { x: +0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
},
// in z
{
s: { x: -0.5, y: -0.5, z: -0.5 },
e: { x: -0.5, y: -0.5, z: +0.5 },
s: { x: -0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
e: { x: -0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
},
{
s: { x: +0.5, y: -0.5, z: -0.5 },
e: { x: +0.5, y: -0.5, z: +0.5 },
s: { x: +0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
e: { x: +0.5 * boxSizes.x, y: -0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
},
{
s: { x: -0.5, y: +0.5, z: -0.5 },
e: { x: -0.5, y: +0.5, z: +0.5 },
s: { x: -0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
e: { x: -0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
},
{
s: { x: +0.5, y: +0.5, z: -0.5 },
e: { x: +0.5, y: +0.5, z: +0.5 },
s: { x: +0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: -0.5 * boxSizes.z },
e: { x: +0.5 * boxSizes.x, y: +0.5 * boxSizes.y, z: +0.5 * boxSizes.z },
},
];
for (const lineSegment of lineSegments) {
Expand Down
4 changes: 4 additions & 0 deletions CameraAdjuster/src/component/inputText.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,7 @@ export const screenHeight = new InputText("screen-height");

export const focalScreenDistance = new InputText("focal-screen-distance");
export const focalCameraDistance = new InputText("focal-camera-distance");

export const boxSizeX = new InputText("box-size-x");
export const boxSizeY = new InputText("box-size-y");
export const boxSizeZ = new InputText("box-size-z");
1 change: 1 addition & 0 deletions CameraAdjuster/src/component/menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { getElementByIdUnwrap } from "./getElement";
const menuItems = [
getElementByIdUnwrap("screen-size") as HTMLDivElement,
getElementByIdUnwrap("distance") as HTMLDivElement,
getElementByIdUnwrap("box-size") as HTMLDivElement,
getElementByIdUnwrap("angle") as HTMLDivElement,
];
const numberOfItems = menuItems.length;
Expand Down
31 changes: 31 additions & 0 deletions CameraAdjuster/src/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ export class Config {
// distance
private _focalScreenDistance: number;
private _focalCameraDistance: number;
// box sizes
private _boxSizeX: number;
private _boxSizeY: number;
private _boxSizeZ: number;

public constructor() {
// NOTE: give tentative default values,
Expand All @@ -44,6 +48,9 @@ export class Config {
};
this._focalScreenDistance = 1;
this._focalCameraDistance = 2;
this._boxSizeX = 1;
this._boxSizeY = 1;
this._boxSizeZ = 1;
}

public get elevation(): number {
Expand All @@ -70,6 +77,30 @@ export class Config {
this._roll = roll;
}

public get boxSizeX(): number {
return this._boxSizeX;
}

public set boxSizeX(boxSizeX: number) {
this._boxSizeX = boxSizeX;
}

public get boxSizeY(): number {
return this._boxSizeY;
}

public set boxSizeY(boxSizeY: number) {
this._boxSizeY = boxSizeY;
}

public get boxSizeZ(): number {
return this._boxSizeZ;
}

public set boxSizeZ(boxSizeZ: number) {
this._boxSizeZ = boxSizeZ;
}

public get screenWidth(): number {
return this._screen.width;
}
Expand Down
21 changes: 21 additions & 0 deletions CameraAdjuster/src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import {
screenHeight,
focalScreenDistance,
focalCameraDistance,
boxSizeX,
boxSizeY,
boxSizeZ,
} from "./component/inputText";
import { elevation, azimuth, roll } from "./component/inputRange";
import { syncCanvasSize, updateCanvas } from "./component/canvas";
Expand All @@ -29,6 +32,18 @@ const handleFocalCameraDistanceInput = (inputValue: string): void => {
config.focalCameraDistance = Number(inputValue);
updateCanvas(config);
};
const handleBoxSizeXInput = (inputValue: string): void => {
config.boxSizeX = Number(inputValue);
updateCanvas(config);
};
const handleBoxSizeYInput = (inputValue: string): void => {
config.boxSizeY = Number(inputValue);
updateCanvas(config);
};
const handleBoxSizeZInput = (inputValue: string): void => {
config.boxSizeZ = Number(inputValue);
updateCanvas(config);
};
const handleElevationInput = (inputValue: string): void => {
config.elevation = Number(inputValue);
updateCanvas(config);
Expand All @@ -46,6 +61,9 @@ screenWidth.onValidInput(handleScreenWidthInput);
screenHeight.onValidInput(handleScreenHeightInput);
focalScreenDistance.onValidInput(handleFocalScreenDistanceInput);
focalCameraDistance.onValidInput(handleFocalCameraDistanceInput);
boxSizeX.onValidInput(handleBoxSizeXInput);
boxSizeY.onValidInput(handleBoxSizeYInput);
boxSizeZ.onValidInput(handleBoxSizeZInput);
elevation.onInput(handleElevationInput);
azimuth.onInput(handleAzimuthInput);
roll.onInput(handleRollInput);
Expand All @@ -59,6 +77,9 @@ window.addEventListener("load", () => {
screenHeight.onWindowLoad(handleScreenHeightInput);
focalScreenDistance.onWindowLoad(handleFocalScreenDistanceInput);
focalCameraDistance.onWindowLoad(handleFocalCameraDistanceInput);
boxSizeX.onWindowLoad(handleBoxSizeXInput);
boxSizeY.onWindowLoad(handleBoxSizeYInput);
boxSizeZ.onWindowLoad(handleBoxSizeZInput);
elevation.onWindowLoad(handleElevationInput);
azimuth.onWindowLoad(handleAzimuthInput);
roll.onWindowLoad(handleRollInput);
Expand Down

0 comments on commit 9c062bb

Please sign in to comment.