Skip to content

New features #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maxwase merged 13 commits into from
Jan 31, 2026
Merged

New features #9

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
543820d
Refactor + double side
maxwase Jan 29, 2026
dd680c2
Multicolor flip
maxwase Jan 29, 2026
49d4b91
Move style to settings
maxwase Jan 29, 2026
f6199d6
Fix rendering of double-sided paper
maxwase Jan 31, 2026
a65972e
Fir rotation and flip orientation
maxwase Jan 31, 2026
c0c5ebb
Fix disappearing polygons during the fold
maxwase Jan 31, 2026
0a2b667
Custom aspect ratio
maxwase Jan 31, 2026
02a8d50
Move debug info
maxwase Jan 31, 2026
f16bf63
Fix layout
maxwase Jan 31, 2026
006482f
Reset fix
maxwase Jan 31, 2026
45e7f8c
Remove deadcode
maxwase Jan 31, 2026
80033bb
Remove outer
maxwase Jan 31, 2026
5a2fff7
Reset text
maxwase Jan 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 95 additions & 60 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<div id="action-island">
<div class="action-btn-group">
<button id="resetActive" type="button" title="Reset">
<span class="material-symbols-outlined">restart_alt</span>
<span class="material-symbols-outlined">delete_outline</span>
<span>Reset</span>
</button>
<button id="undo" type="button" disabled title="Undo">
Expand All @@ -40,22 +40,15 @@
<span class="material-symbols-outlined">devices_fold</span>
<span>Fold</span>
</button>
<button id="flipPaper" type="button" title="Flip">
<span class="material-symbols-outlined">flip</span>
<span>Flip</span>
</button>
</div>
</div>

<!-- Settings & Info Buttons -->
<div id="settings-btn-container">
<button
id="toggleStyle"
type="button"
aria-controls="stylePanel"
aria-pressed="false"
aria-label="Style"
title="Style"
>
<span class="material-symbols-outlined">palette</span>
<span>Style</span>
</button>
<button
id="toggleSettings"
type="button"
Expand All @@ -81,48 +74,6 @@
</div>
</div>

<!-- Style Panel -->
<div id="stylePanel" class="settings-panel" style="display: none">
<h3>Style</h3>

<div class="settings-section">
<h4>Format</h4>
<div class="input-group">
<div class="paper-size-selector">
<div class="toggle-group">
<label
><input type="radio" name="paperSize" value="a4" checked /> A4</label
>
<label
><input type="radio" name="paperSize" value="square" /> Square</label
>
</div>
</div>
<label class="checkbox-label">
<input type="checkbox" id="showPaperBorder" checked />
Show paper border
</label>
</div>
</div>

<div class="settings-section">
<h4>Color</h4>
<div class="input-group">
<div class="input-row">
<label for="paperColor">Paper Color</label>
<div class="color-picker-wrapper">
<input id="paperColor" type="color" value="#ffffff" />
<div
class="color-picker-display"
id="paperColorDisplay"
style="background-color: #ffffff"
></div>
</div>
</div>
</div>
</div>
</div>

<!-- Settings Panel -->
<div id="settingsPanel" class="settings-panel" style="display: none">
<h3>Settings</h3>
Expand Down Expand Up @@ -154,7 +105,17 @@ <h4>Motion</h4>
</div>

<div class="settings-section">
<h4>Hinge</h4>
<div class="section-header">
<h4>Hinge</h4>
<button
id="resetHinge"
type="button"
class="reset-inline-btn"
title="Reset axis"
>
<span class="material-symbols-outlined icon-small">restart_alt</span>
</button>
</div>
<div class="input-group">
<div class="input-row mono">
<span class="hinge-label"
Expand Down Expand Up @@ -188,11 +149,80 @@ <h4>Hinge</h4>
<input id="manualHingeFlip" type="checkbox" />
Flip hinge line
</label>
<div class="mono hinge-status" id="hingeStatus" role="status"></div>
<button id="resetHinge" type="button" class="reset-hinge-btn">
<span class="material-symbols-outlined icon-small">restart_alt</span>
<span>Reset axis</span>
</button>
</div>
</div>

<div class="settings-section">
<h4>Style</h4>
<div class="input-group">
<div class="paper-size-selector">
<div class="toggle-group">
<label
><input type="radio" name="paperSize" value="a4" checked /> A4</label
>
<label
><input type="radio" name="paperSize" value="square" /> Square</label
>
<label
><input type="radio" name="paperSize" value="custom" /> Custom</label
>
</div>
<div
id="customAspectInputs"
class="custom-aspect-inputs"
style="display: none"
>
<div class="input-row mono">
<label for="customWidth">W:</label>
<input
id="customWidth"
type="number"
min="0.1"
max="100"
step="0.1"
value="3"
class="aspect-input"
/>
<span>:</span>
<label for="customHeight">H:</label>
<input
id="customHeight"
type="number"
min="0.1"
max="100"
step="0.1"
value="4"
class="aspect-input"
/>
</div>
</div>
</div>
<label class="checkbox-label">
<input type="checkbox" id="showPaperBorder" checked />
Show paper border
</label>
<div class="input-row">
<label for="paperFrontColor">Front color</label>
<div class="color-picker-wrapper">
<input id="paperFrontColor" type="color" value="#ffffff" />
<div
class="color-picker-display"
id="paperFrontColorDisplay"
style="background-color: #ffffff"
></div>
</div>
</div>
<div class="input-row">
<label for="paperBackColor">Back color</label>
<div class="color-picker-wrapper">
<input id="paperBackColor" type="color" value="#f0f0f0" />
<div
class="color-picker-display"
id="paperBackColorDisplay"
style="background-color: #f0f0f0"
></div>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -207,6 +237,11 @@ <h3>Info</h3>
<div class="mono" id="status" role="status" aria-live="polite"></div>
</div>

<details class="debug-spoiler">
<summary>Debug</summary>
<div class="mono" id="debugStatus" role="status"></div>
</details>

<div class="settings-footer">
<a id="buyCoffee" href="https://www.buymeacoffee.com/maxwase" target="_blank">
<img
Expand Down
10 changes: 5 additions & 5 deletions src/device/posture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,20 @@ export enum FoldState {
}

export interface HelpCopy {
fold: string;
controls: string;
gesture: string;
}

export function helpCopyForSupport(support: PostureSupport): HelpCopy {
if (support === PostureSupport.Available) {
return {
fold: "<b>Fold</b>: close/open the device hinge to trigger a fold along the hinge line.",
gesture: "<b>One finger</b>: move. <b>Two fingers</b>: move + rotate.",
controls: "<b>Fold</b>: close/open the device hinge.",
gesture: "<b>One finger</b>: move.<br><b>Two fingers</b>: move + rotate.",
};
}
return {
fold: "<b>Fold</b>: press Space.",
gesture: "<b>Drag</b>: move. <b>Alt/Opt + drag</b>: rotate.",
controls: "<b>Space</b>: fold.<br><b>F</b>: flip.<br><b>R</b>: reset.",
gesture: "<b>Drag</b>: move.<br><b>Alt/Opt + drag</b>: rotate.",
};
}

Expand Down
Loading
Loading