Reworked inputs phase-dependent visibility (6872c56f) · Commits · GREYC-DDA / IVOIRe

.prettierrc

+2 −2

Changes for .prettierrc: 2 added lines, 2 removed lines.
Original line number	Diff line number	Diff line
		{
		"singleQuote": true,
		"printWidth": 80,
		"tabWidth": 2
		"printWidth": 120,
		"tabWidth": 4
		}

index.html

+36 −46

Changes for index.html: 36 added lines, 46 removed lines.
Original line number	Diff line number	Diff line
		@@ -7,7 +7,7 @@
		<link rel="stylesheet" href="src/style.sass">
		</head>
		<body>

		<div class="body-content">
		<h1 class="title" title="Image Viewer with Online Interactive Relighting">IVOIRe</h1>

		<header class="navbar">
		@@ -26,53 +26,53 @@
		</button>
		</div>
		<div>
		<button class="btn-dark btn-icon hidden" id="button-fullscreen" aria-label="Fullscreen" title="Fullscreen">
		<svg class="icon" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
		<use href="/icons.svg#fullscreen"/>
		</svg>
		</button>
		<button class="btn-dark btn-icon hidden" id="button-fullscreen" aria-label="Fullscreen"
		title="Fullscreen" data-icon="fullscreen"></button>
		<button class="btn-dark hidden" id="button-export" data-i18n="content:export.button">Export</button>
		<select aria-label="Language" class="btn-dark" name="lang" id="select-lang"></select>
		<button class="btn-dark" id="button-help">
		<span data-i18n="content:help.button">Help / About</span>
		<svg class="icon" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
		<use href="/icons.svg#help"/>
		</svg>
		<svg data-icon="help"></svg>
		</button>
		</div>
		</header>

		<div class="controls">
		<label class="hidden" for="select-rendermode"><span data-i18n="content:controls.rendermode">Render mode</span>
		<label data-phase="render" for="select-rendermode"><span data-i18n="content:controls.rendermode">Render mode</span>
		<span data-i18n="content:colon">:</span></label>
		<select class="hidden" name="rendermode" id="select-rendermode">
		<select data-phase="render" name="rendermode" id="select-rendermode">
		<option value="relight" data-i18n="content:controls.mode.relight">Relighting (with color)</option>
		<option value="relight_nocolor" data-i18n="content:controls.mode.relightnocolor">Relighting (no color)</option>
		<option value="albedo" data-i18n="content:controls.mode.albedo">Albedo</option>
		<option value="normals" data-i18n="content:controls.mode.normals">Normal map</option>
		</select>
		<label class="hidden" for="input-specular"><span data-i18n="content:controls.specular">Specular reflection</span>
		<div class="input-box" data-phase="render">
		<label for="input-specular"><span
		data-i18n="content:controls.specular">Specular reflection</span>
		<span data-i18n="content:colon">:</span>
		<span class="value"></span></label>
		<input class="hidden" type="range" name="specular" id="input-specular" min="0" max="1" value="0" step=".01"/>
		<label class="hidden" for="input-diffuse"><span data-i18n="content:controls.diffuse">Diffuse reflection</span>
		<input type="range" name="specular" id="input-specular" min="0" max="1" value="0" step=".01"/>
		</div>
		<div class="input-box" data-phase="render">
		<label for="input-diffuse"><span data-i18n="content:controls.diffuse">Diffuse reflection</span>
		<span data-i18n="content:colon">:</span>
		<span class="value"></span></label>
		<input class="hidden" type="range" name="diffuse" id="input-diffuse" min="0" max="1" value="0" step=".01"/>
		<label class="hidden" for="input-shine"><span data-i18n="content:controls.shine">Shine</span>
		<input type="range" name="diffuse" id="input-diffuse" min="0" max="1" value="0" step=".01"/>
		</div>
		<div class="input-box" data-phase="render">
		<label for="input-shine"><span data-i18n="content:controls.shine">Shine</span>
		<span data-i18n="content:colon">:</span>
		<span class="value"></span></label>
		<input class="hidden" type="range" name="shine" id="input-shine" min="1" max="100" value="1" step="1"/>
		<label class="hidden" for="input-ambiant"><span data-i18n="content:controls.ambiant">Ambiant lighting</span>
		<input type="range" name="shine" id="input-shine" min="1" max="100" value="1" step="1"/>
		</div>
		<div class="input-box" data-phase="render">
		<label for="input-ambiant"><span data-i18n="content:controls.ambiant">Ambiant lighting</span>
		<span data-i18n="content:colon">:</span>
		<span class="value"></span></label>
		<input class="hidden" type="range" name="ambiant" id="input-ambiant" min="0" max="1" value="0" step=".01"/>
		<span>
		<button class="btn-dark btn-icon" id="button-reset-controls">
		<svg class="icon" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
		<use href="/icons.svg#reset"/>
		</svg>
		</button>
		<input type="range" name="ambiant" id="input-ambiant" min="0" max="1" value="0" step=".01"/>
		</div>
		<span data-phase="render">
		<button class="btn-dark btn-icon" id="button-reset-controls" data-icon="reset"></button>
		<label for="button-reset-controls" data-i18n="content:controls.reset">Reset light settings</label>
		</span>
		<div class="description-container">
		@@ -86,11 +86,7 @@
		<canvas id="ivoire-lightball"></canvas>
		<div class="reset-button-container">
		<button class="btn-dark btn-icon" id="button-reset-lightball" title="Reset light direction settings"
		data-i18n="attr:title:controls.resetlightball">
		<svg class="icon" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
		<use href="/icons.svg#reset"/>
		</svg>
		</button>
		data-i18n="attr:title:controls.resetlightball" data-icon="reset"></button>
		</div>
		</div>
		</div>
		@@ -98,28 +94,17 @@
		<main id="app">
		<div class="view-controls">
		<button class="btn-dark btn-icon" id="button-zoom-fit"
		title="Fit view" data-i18n="attr:title:controls.fitview">
		<svg class="icon" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
		<use href="/icons.svg#zoom-fit"/>
		</svg>
		</button>
		title="Fit view" data-i18n="attr:title:controls.fitview" data-icon="zoom-fit"></button>
		<button class="btn-dark btn-icon" id="button-zoom-vfit"
		title="Fit view vertically" data-i18n="attr:title:controls.fitviewv">
		<svg class="icon" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
		<use href="/icons.svg#zoom-vfit"/>
		</svg>
		</button>
		title="Fit view vertically" data-i18n="attr:title:controls.fitviewv" data-icon="zoom-vfit"></button>
		<button class="btn-dark btn-icon" id="button-zoom-hfit"
		title="Fit view horizontally" data-i18n="attr:title:controls.fitviewh">
		<svg class="icon" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
		<use href="/icons.svg#zoom-hfit"/>
		</svg>
		</button>
		title="Fit view horizontally" data-i18n="attr:title:controls.fitviewh" data-icon="zoom-hfit"></button>
		</div>
		<canvas id="ivoire-display"></canvas>
		<progress aria-label="Downloading data" id="load-progress" class="hidden" max="100"></progress>
		<canvas id="debug-albedo" style="position: absolute; bottom: 0; left: 0;"></canvas>
		</main>
		</div>

		<dialog id="message" class="drop-shadow">
		<h1></h1>
		@@ -159,7 +144,7 @@
		<a href="" id="export-download-anchor" class="hidden"></a>
		</dialog>
		<dialog id="documentation">
		<button type="reset" class="btn-close">X</button>
		<button type="reset" class="btn-close btn-icon" data-icon="close"></button>
		<div class="logos">
		<a target="_blank" href="https://www.greyc.fr">
		<img src="/images/greyc-en.svg" data-i18n="attr:src:help.logos.greyc" alt="GREYC logo"></a>
		@@ -193,5 +178,10 @@
		</div>
		</dialog>
		<script type="module" src="/src/main.ts"></script>
		<template id="svg-icon">
		<svg class="icon" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
		<use href="/icons.svg#{{icon}}"/>
		</svg>
		</template>
		</body>
		</html>

package.json

+1 −1

Changes for package.json: 1 added line, 1 removed line.
Original line number	Diff line number	Diff line
		{
		"name": "IVOIRe",
		"name": "ivoire",
		"private": true,
		"version": "0.1.0",
		"type": "module",

src/app.ts

+232 −206

File changed.

Preview size limit exceeded, changes collapsed.

src/main.ts

+18 −7

Changes for src/main.ts: 18 added lines, 7 removed lines.
Original line number	Diff line number	Diff line
		import {App} from "./app.ts";
		import {DownloadManager} from "./download.ts";
		import { App } from './app.ts';
		import { DownloadManager } from './download.ts';
		import en from './lang/en.yaml'; // Import translation YAMLs here to avoid transitively inclucing them in Worker code
		import fr from './lang/fr.yaml';
		import {I18nManager} from "./i18n.ts";
		import { I18nManager } from './i18n.ts';

		function main() {
		DownloadManager.setBar( document.querySelector("progress#load-progress") as HTMLProgressElement);
		DownloadManager.setBar(document.querySelector('progress#load-progress') as HTMLProgressElement);

		new App(new I18nManager({en, fr}));
		const iconTpl = document.querySelector('template#svg-icon') as HTMLTemplateElement;
		for (const el of document.querySelectorAll('*[data-icon]')) {
		const icon = el.getAttribute('data-icon');
		if (!icon) throw new Error();
		const content = iconTpl.content.cloneNode(true) as HTMLElement;
		const useTag = content.querySelector('use')!;
		useTag.setAttribute('href', useTag.getAttribute('href')!.replace('{{icon}}', icon));
		if (el.tagName.toLowerCase() === 'svg') {
		el.parentElement!.replaceChild(content, el);
		} else {
		el.replaceChildren(content);
		el.removeAttribute('data-icon');
		}
		}

		window.addEventListener("DOMContentLoaded", main);
		new App(new I18nManager({ en, fr }));