@jjlmoya/utils-hardware 1.16.0 → 1.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/category/i18n/de.ts +4 -4
- package/src/category/i18n/id.ts +3 -3
- package/src/category/i18n/it.ts +3 -3
- package/src/category/i18n/nl.ts +3 -3
- package/src/category/i18n/pl.ts +4 -4
- package/src/category/i18n/pt.ts +3 -3
- package/src/category/i18n/ru.ts +6 -6
- package/src/category/i18n/sv.ts +3 -3
- package/src/category/i18n/tr.ts +3 -3
- package/src/category/i18n/zh.ts +3 -3
- package/src/category/index.ts +2 -1
- package/src/entries.ts +4 -1
- package/src/index.ts +1 -0
- package/src/layouts/PreviewLayout.astro +1 -0
- package/src/tests/diacritics_density.test.ts +118 -0
- package/src/tests/inverted_punctuation.test.ts +84 -0
- package/src/tests/locale_completeness.test.ts +2 -2
- package/src/tests/no_en_dash.test.ts +70 -0
- package/src/tests/no_h1_in_components.test.ts +1 -1
- package/src/tests/script_density.test.ts +94 -0
- package/src/tests/tool_validation.test.ts +2 -2
- package/src/tool/batteryHealthEstimator/bibliography.ts +8 -8
- package/src/tool/batteryHealthEstimator/i18n/de.ts +1 -1
- package/src/tool/batteryHealthEstimator/i18n/en.ts +1 -1
- package/src/tool/batteryHealthEstimator/i18n/fr.ts +5 -5
- package/src/tool/batteryHealthEstimator/i18n/id.ts +1 -1
- package/src/tool/batteryHealthEstimator/i18n/nl.ts +1 -1
- package/src/tool/batteryHealthEstimator/i18n/pl.ts +2 -2
- package/src/tool/batteryHealthEstimator/i18n/pt.ts +1 -1
- package/src/tool/batteryHealthEstimator/i18n/ru.ts +5 -5
- package/src/tool/batteryHealthEstimator/i18n/sv.ts +1 -1
- package/src/tool/batteryHealthEstimator/i18n/tr.ts +1 -1
- package/src/tool/batteryHealthEstimator/i18n/zh.ts +1 -1
- package/src/tool/colorAccuracyTest/bibliography.astro +14 -0
- package/src/tool/colorAccuracyTest/bibliography.ts +16 -0
- package/src/tool/colorAccuracyTest/color-accuracy-test.css +841 -0
- package/src/tool/colorAccuracyTest/component.astro +157 -0
- package/src/tool/colorAccuracyTest/entry.ts +29 -0
- package/src/tool/colorAccuracyTest/i18n/de.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/en.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/es.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/fr.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/id.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/it.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/ja.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/ko.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/nl.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/pl.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/pt.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/ru.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/sv.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/tr.ts +284 -0
- package/src/tool/colorAccuracyTest/i18n/zh.ts +284 -0
- package/src/tool/colorAccuracyTest/index.ts +9 -0
- package/src/tool/colorAccuracyTest/logic.ts +226 -0
- package/src/tool/colorAccuracyTest/seo.astro +15 -0
- package/src/tool/colorAccuracyTest/ui.ts +27 -0
- package/src/tool/deadPixelTest/i18n/ru.ts +6 -6
- package/src/tool/deadPixelTest/i18n/sv.ts +1 -1
- package/src/tool/deadPixelTest/i18n/zh.ts +5 -5
- package/src/tool/gamepadTest/gamepad-test.css +171 -3
- package/src/tool/gamepadTest/i18n/es.ts +4 -4
- package/src/tool/gamepadTest/i18n/ru.ts +2 -2
- package/src/tool/gamepadTest/i18n/zh.ts +1 -1
- package/src/tool/gamepadVibrationTester/bibliography.ts +8 -8
- package/src/tool/gamepadVibrationTester/i18n/es.ts +1 -1
- package/src/tool/gamepadVibrationTester/i18n/fr.ts +2 -2
- package/src/tool/gamepadVibrationTester/i18n/ru.ts +3 -3
- package/src/tool/keyboardTest/keyboard-test.css +115 -2
- package/src/tool/mousePollingTest/bibliography.ts +8 -8
- package/src/tool/mousePollingTest/i18n/de.ts +1 -1
- package/src/tool/mousePollingTest/i18n/en.ts +1 -1
- package/src/tool/mousePollingTest/i18n/es.ts +1 -1
- package/src/tool/mousePollingTest/i18n/fr.ts +3 -3
- package/src/tool/mousePollingTest/i18n/id.ts +1 -1
- package/src/tool/mousePollingTest/i18n/it.ts +1 -1
- package/src/tool/mousePollingTest/i18n/ja.ts +1 -1
- package/src/tool/mousePollingTest/i18n/ko.ts +1 -1
- package/src/tool/mousePollingTest/i18n/nl.ts +1 -1
- package/src/tool/mousePollingTest/i18n/pl.ts +2 -2
- package/src/tool/mousePollingTest/i18n/pt.ts +1 -1
- package/src/tool/mousePollingTest/i18n/ru.ts +3 -3
- package/src/tool/mousePollingTest/i18n/sv.ts +1 -1
- package/src/tool/mousePollingTest/i18n/tr.ts +1 -1
- package/src/tool/mousePollingTest/i18n/zh.ts +2 -2
- package/src/tool/refreshRateDetector/bibliography.ts +3 -11
- package/src/tool/refreshRateDetector/i18n/de.ts +3 -3
- package/src/tool/refreshRateDetector/i18n/en.ts +3 -3
- package/src/tool/refreshRateDetector/i18n/fr.ts +7 -7
- package/src/tool/refreshRateDetector/i18n/id.ts +3 -3
- package/src/tool/refreshRateDetector/i18n/nl.ts +3 -3
- package/src/tool/refreshRateDetector/i18n/pl.ts +2 -2
- package/src/tool/refreshRateDetector/i18n/pt.ts +3 -3
- package/src/tool/refreshRateDetector/i18n/ru.ts +4 -4
- package/src/tool/refreshRateDetector/i18n/sv.ts +3 -3
- package/src/tool/refreshRateDetector/i18n/tr.ts +2 -2
- package/src/tool/refreshRateDetector/i18n/zh.ts +2 -2
- package/src/tool/toneGenerator/bibliography.ts +8 -8
- package/src/tool/toneGenerator/i18n/de.ts +1 -1
- package/src/tool/toneGenerator/i18n/en.ts +1 -1
- package/src/tool/toneGenerator/i18n/fr.ts +3 -3
- package/src/tool/toneGenerator/i18n/id.ts +1 -1
- package/src/tool/toneGenerator/i18n/it.ts +1 -1
- package/src/tool/toneGenerator/i18n/nl.ts +1 -1
- package/src/tool/toneGenerator/i18n/pl.ts +2 -2
- package/src/tool/toneGenerator/i18n/pt.ts +1 -1
- package/src/tool/toneGenerator/i18n/ru.ts +4 -4
- package/src/tool/toneGenerator/i18n/sv.ts +1 -1
- package/src/tool/toneGenerator/i18n/zh.ts +3 -3
- package/src/tools.ts +2 -1
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { KnownLocale } from '../../types';
|
|
3
|
+
import type { SpectrumCanvasUI } from './ui';
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
locale?: KnownLocale;
|
|
7
|
+
ui?: Record<string, unknown>;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const { ui } = Astro.props;
|
|
11
|
+
const t = (ui ?? {}) as SpectrumCanvasUI;
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
<div class="sc-root">
|
|
15
|
+
<div class="sc-wrapper">
|
|
16
|
+
<div class="sc-dashboard" id="dashboard">
|
|
17
|
+
<div class="sc-grid">
|
|
18
|
+
<div class="sc-content">
|
|
19
|
+
<div class="sc-config">
|
|
20
|
+
<div class="sc-gamut-selector">
|
|
21
|
+
<label class="sc-gamut-label">{t.gamutToggle}</label>
|
|
22
|
+
<div class="sc-gamut-toggle">
|
|
23
|
+
<button class="sc-gamut-btn sc-gamut-active" data-gamut="srgb">
|
|
24
|
+
{t.gamutSRGB}
|
|
25
|
+
</button>
|
|
26
|
+
<button class="sc-gamut-btn" data-gamut="dcip3">
|
|
27
|
+
{t.gamutDCIP3}
|
|
28
|
+
</button>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<div class="sc-buttons">
|
|
34
|
+
<button id="btn-start-calibration" class="sc-btn sc-btn-primary">
|
|
35
|
+
<svg class="sc-btn-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
36
|
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
37
|
+
</svg>
|
|
38
|
+
{t.btnStartCalibration}
|
|
39
|
+
</button>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div class="sc-shortcuts">
|
|
43
|
+
<div class="sc-shortcut">
|
|
44
|
+
<kbd class="sc-kbd">{t.kbdFullscreen}</kbd>
|
|
45
|
+
<span>{t.kbdFullscreenLabel}</span>
|
|
46
|
+
</div>
|
|
47
|
+
<span>•</span>
|
|
48
|
+
<div class="sc-shortcut">
|
|
49
|
+
<kbd class="sc-kbd">{t.kbdReset}</kbd>
|
|
50
|
+
<span>{t.kbdResetLabel}</span>
|
|
51
|
+
</div>
|
|
52
|
+
<span>•</span>
|
|
53
|
+
<div class="sc-shortcut">
|
|
54
|
+
<kbd class="sc-kbd">{t.kbdEsc}</kbd>
|
|
55
|
+
<span>{t.kbdEscLabel}</span>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div class="sc-preview-wrapper">
|
|
61
|
+
<div class="sc-preview-canvas" id="preview-canvas">
|
|
62
|
+
<div class="sc-preview-gradient"></div>
|
|
63
|
+
<div class="sc-preview-label">Spectrum Preview</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div id="test-overlay" style="display: none;">
|
|
70
|
+
<div id="test-bg" class="sc-overlay-bg"></div>
|
|
71
|
+
<div id="test-controls" class="sc-controls">
|
|
72
|
+
<button id="close-test" class="sc-close-test">×</button>
|
|
73
|
+
|
|
74
|
+
<p id="test-description" class="sc-test-description">
|
|
75
|
+
Observe each color carefully. Look for any color shifts, banding, or inconsistencies across the screen.
|
|
76
|
+
</p>
|
|
77
|
+
|
|
78
|
+
<div class="sc-test-progress" id="test-progress">
|
|
79
|
+
<div class="sc-progress-bar"></div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="sc-test-actions">
|
|
83
|
+
<button id="btn-prev-color" class="sc-action-btn sc-action-secondary">
|
|
84
|
+
Previous
|
|
85
|
+
</button>
|
|
86
|
+
<button id="btn-next-color" class="sc-action-btn sc-action-primary">
|
|
87
|
+
Next
|
|
88
|
+
</button>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div class="sc-keyboard-hints sc-kbd-desktop">
|
|
92
|
+
<small>
|
|
93
|
+
Keyboard: SPACE = Next, R = Reset, ESC = Exit
|
|
94
|
+
</small>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<script>
|
|
102
|
+
import { SpectrumCanvasTest } from './logic';
|
|
103
|
+
|
|
104
|
+
function setupTest() {
|
|
105
|
+
const startBtn = document.getElementById('btn-start-calibration');
|
|
106
|
+
const testOverlay = document.getElementById('test-overlay');
|
|
107
|
+
const closeTestBtn = document.getElementById('close-test');
|
|
108
|
+
const nextColorBtn = document.getElementById('btn-next-color');
|
|
109
|
+
const prevColorBtn = document.getElementById('btn-prev-color');
|
|
110
|
+
const gamutBtns = document.querySelectorAll('.sc-gamut-btn');
|
|
111
|
+
|
|
112
|
+
let selectedGamut: 'srgb' | 'dcip3' = 'srgb';
|
|
113
|
+
let test: SpectrumCanvasTest;
|
|
114
|
+
|
|
115
|
+
setupGamutButtons(gamutBtns, (gamut) => { selectedGamut = gamut; });
|
|
116
|
+
setupStartButton(startBtn, testOverlay, selectedGamut, (t) => { test = t; });
|
|
117
|
+
setupControlButtons({ closeTestBtn, nextColorBtn, prevColorBtn, testOverlay, getTest: () => test });
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
function setupGamutButtons(btns: NodeListOf<Element>, onChange: (gamut: 'srgb' | 'dcip3') => void) {
|
|
121
|
+
btns.forEach((btn) => {
|
|
122
|
+
btn.addEventListener('click', () => {
|
|
123
|
+
btns.forEach((b) => b.classList.remove('sc-gamut-active'));
|
|
124
|
+
btn.classList.add('sc-gamut-active');
|
|
125
|
+
onChange((btn.getAttribute('data-gamut') as 'srgb' | 'dcip3') || 'srgb');
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
function setupStartButton(btn: HTMLElement | null, overlay: HTMLElement | null, gamut: 'srgb' | 'dcip3', setTest: (t: SpectrumCanvasTest) => void) {
|
|
131
|
+
if (btn) {
|
|
132
|
+
btn.addEventListener('click', () => {
|
|
133
|
+
if (overlay) overlay.style.display = 'flex';
|
|
134
|
+
const test = new SpectrumCanvasTest();
|
|
135
|
+
test.start(gamut);
|
|
136
|
+
setTest(test);
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
function setupControlButtons(opts: { closeTestBtn: HTMLElement | null; nextColorBtn: HTMLElement | null; prevColorBtn: HTMLElement | null; testOverlay: HTMLElement | null; getTest: () => SpectrumCanvasTest }) {
|
|
142
|
+
if (opts.closeTestBtn) {
|
|
143
|
+
opts.closeTestBtn.addEventListener('click', () => {
|
|
144
|
+
opts.getTest().finish();
|
|
145
|
+
if (opts.testOverlay) opts.testOverlay.style.display = 'none';
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
if (opts.nextColorBtn) {
|
|
149
|
+
opts.nextColorBtn.addEventListener('click', () => opts.getTest().nextColor());
|
|
150
|
+
}
|
|
151
|
+
if (opts.prevColorBtn) {
|
|
152
|
+
opts.prevColorBtn.addEventListener('click', () => opts.getTest().prevColor());
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
document.addEventListener('DOMContentLoaded', setupTest);
|
|
157
|
+
</script>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { HardwareToolEntry, ToolLocaleContent } from '../../types';
|
|
2
|
+
|
|
3
|
+
import type { SpectrumCanvasUI } from './ui';
|
|
4
|
+
export type SpectrumCanvasLocaleContent = ToolLocaleContent<SpectrumCanvasUI>;
|
|
5
|
+
|
|
6
|
+
export const spectrumCanvas: HardwareToolEntry<SpectrumCanvasUI> = {
|
|
7
|
+
id: 'color-accuracy-test',
|
|
8
|
+
icons: {
|
|
9
|
+
bg: 'mdi:palette',
|
|
10
|
+
fg: 'mdi:palette-advanced',
|
|
11
|
+
},
|
|
12
|
+
i18n: {
|
|
13
|
+
en: () => import('./i18n/en').then((m) => m.content),
|
|
14
|
+
es: () => import('./i18n/es').then((m) => m.content),
|
|
15
|
+
fr: () => import('./i18n/fr').then((m) => m.content),
|
|
16
|
+
de: () => import('./i18n/de').then((m) => m.content),
|
|
17
|
+
it: () => import('./i18n/it').then((m) => m.content),
|
|
18
|
+
pt: () => import('./i18n/pt').then((m) => m.content),
|
|
19
|
+
nl: () => import('./i18n/nl').then((m) => m.content),
|
|
20
|
+
pl: () => import('./i18n/pl').then((m) => m.content),
|
|
21
|
+
sv: () => import('./i18n/sv').then((m) => m.content),
|
|
22
|
+
tr: () => import('./i18n/tr').then((m) => m.content),
|
|
23
|
+
ru: () => import('./i18n/ru').then((m) => m.content),
|
|
24
|
+
id: () => import('./i18n/id').then((m) => m.content),
|
|
25
|
+
ja: () => import('./i18n/ja').then((m) => m.content),
|
|
26
|
+
ko: () => import('./i18n/ko').then((m) => m.content),
|
|
27
|
+
zh: () => import('./i18n/zh').then((m) => m.content),
|
|
28
|
+
},
|
|
29
|
+
};
|
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
3
|
+
import type { SpectrumCanvasUI } from '../ui';
|
|
4
|
+
import { bibliography } from '../bibliography';
|
|
5
|
+
|
|
6
|
+
const slug = 'farbgenauigkeit-test';
|
|
7
|
+
const title = 'Farbgenauigkeitstest: Spectrum Canvas';
|
|
8
|
+
const description =
|
|
9
|
+
'Kalibrieren Sie Ihr Display mit Präzision. Testen Sie sRGB- und DCI-P3-Farbräume, erkennen Sie Farbverschiebungen, messen Sie die Genauigkeit mit Delta-E-Metriken und erstellen Sie professionelle Kalibrierungsberichte.';
|
|
10
|
+
|
|
11
|
+
const faqData = [
|
|
12
|
+
{
|
|
13
|
+
question: 'Was ist Farbgenauigkeit und warum ist sie wichtig?',
|
|
14
|
+
answer:
|
|
15
|
+
'Farbgenauigkeit misst, wie originalgetreu ein Display Farben im Vergleich zu einer Standardreferenz wiedergibt. Für Designer, Fotografen und Content-Ersteller sind genaue Farben unerlässlich, um sicherzustellen, dass ihre Arbeit auf verschiedenen Geräten konsistent aussieht.',
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
question: 'Was ist der Unterschied zwischen sRGB und DCI-P3?',
|
|
19
|
+
answer:
|
|
20
|
+
'sRGB ist der Standardfarbraum für das Web und Consumer-Displays. DCI-P3 ist ein breiterer Farbraum, der im digitalen Kino und bei professionellen Displays verwendet wird. DCI-P3 deckt etwa 25 % mehr Farben ab als sRGB.',
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
question: 'Was ist Delta E und wie wird es gemessen?',
|
|
24
|
+
answer:
|
|
25
|
+
'Delta E (ΔE) ist ein numerisches Maß für den vom menschlichen Auge wahrgenommenen Farbunterschied. Ein Delta E unter 1 ist nicht wahrnehmbar, unter 2 ist sehr gut, unter 4 ist akzeptabel und über 4 wird es deutlich sichtbar. Unser Test verwendet CIE 1976 Delta-E-Berechnungen.',
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
question: 'Kann ich dieses Tool zur Hardware-Kalibrierung verwenden?',
|
|
29
|
+
answer:
|
|
30
|
+
'Dieses Tool bietet eine visuelle Kalibrierungsreferenz und Genauigkeitsmessungen. Für eine professionelle Kalibrierung sollten Sie diese Ergebnisse mit Hardware-Kalibrierungstools (Kolorimetern) und spezieller Software wie ColorThink oder Datacolor SpyderCheckr kombinieren.',
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
question: 'Welche Farbräume werden getestet?',
|
|
34
|
+
answer:
|
|
35
|
+
'Wir testen sRGB (Standard), DCI-P3 (Kino) und die Weißpunktgenauigkeit über die Standard-Lichtarten D65 (6500K) und D93 (9300K). Der Test umfasst auch die Überprüfung der Gammakorrektur.',
|
|
36
|
+
},
|
|
37
|
+
];
|
|
38
|
+
|
|
39
|
+
const howToData = [
|
|
40
|
+
{
|
|
41
|
+
name: 'Farbumfang auswählen',
|
|
42
|
+
text: 'Wählen Sie zwischen sRGB (Standard Web/Consumer) oder DCI-P3 (professionelles Kino). Ihr Display passt seine Testpalette entsprechend an.',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: 'Hardware benennen (optional)',
|
|
46
|
+
text: 'Geben Sie einen aussagekräftigen Namen für Ihren Monitor oder Ihr Gerät ein (z. B. "MacBook Pro 16 M1"). Dies personalisiert Ihren Bericht.',
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
name: 'Vollbildmodus aktivieren',
|
|
50
|
+
text: 'Drücken Sie F11 oder die Vollbild-Schaltfläche, um die Browser-Benutzeroberfläche auszublenden und die maximale Anzeigefläche für präzise Tests zu gewährleisten.',
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
name: 'Farbtests durchführen',
|
|
54
|
+
text: 'Führen Sie die Tests für spektrale Reinheit (Vollfarben), Gradientendynamik (fließende Übergänge), Black Crush Detection (Schattendetails) und Weißpunktkalibrierung durch.',
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: 'Ergebnisse prüfen & exportieren',
|
|
58
|
+
text: 'Erstellen Sie einen visuellen Bericht mit 3D-Gamut-Visualisierung, Delta-E-Metriken und Kalibrierungsempfehlungen. Exportieren Sie diesen als PDF zur Archivierung.',
|
|
59
|
+
},
|
|
60
|
+
];
|
|
61
|
+
|
|
62
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
63
|
+
'@context': 'https://schema.org',
|
|
64
|
+
'@type': 'FAQPage',
|
|
65
|
+
mainEntity: faqData.map((item) => ({
|
|
66
|
+
'@type': 'Question',
|
|
67
|
+
name: item.question,
|
|
68
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
69
|
+
})),
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
const howToSchema: WithContext<HowTo> = {
|
|
73
|
+
'@context': 'https://schema.org',
|
|
74
|
+
'@type': 'HowTo',
|
|
75
|
+
name: title,
|
|
76
|
+
description,
|
|
77
|
+
step: howToData.map((step, i) => ({
|
|
78
|
+
'@type': 'HowToStep',
|
|
79
|
+
position: i + 1,
|
|
80
|
+
name: step.name,
|
|
81
|
+
text: step.text,
|
|
82
|
+
})),
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
86
|
+
'@context': 'https://schema.org',
|
|
87
|
+
'@type': 'SoftwareApplication',
|
|
88
|
+
name: title,
|
|
89
|
+
description,
|
|
90
|
+
applicationCategory: 'UtilityApplication',
|
|
91
|
+
operatingSystem: 'All',
|
|
92
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
|
|
93
|
+
inLanguage: 'de',
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
export const content: ToolLocaleContent<SpectrumCanvasUI> = {
|
|
97
|
+
slug,
|
|
98
|
+
title,
|
|
99
|
+
description,
|
|
100
|
+
faq: faqData,
|
|
101
|
+
howTo: howToData,
|
|
102
|
+
schemas: [faqSchema, howToSchema, appSchema],
|
|
103
|
+
bibliography,
|
|
104
|
+
seo: [
|
|
105
|
+
{
|
|
106
|
+
type: 'title',
|
|
107
|
+
text: 'Professioneller Farbgenauigkeitstest: Kalibrieren Sie Ihr Display präzise',
|
|
108
|
+
level: 2,
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
type: 'paragraph',
|
|
112
|
+
html: 'Der Spectrum Canvas ist ein professionelles Testtool für Farbgenauigkeit, das für alle entwickelt wurde, die auf farbkritische Arbeit angewiesen sind. Egal, ob Sie Fotograf, Designer, Content-Ersteller oder Hardware-Enthusiast sind, dieses Tool hilft Ihnen dabei, <strong>Farbverschiebungen zu diagnostizieren</strong>, die <strong>Anzeigegenauigkeit zu messen</strong> und <strong>Kalibrierungsberichte zu erstellen</strong>.',
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
type: 'title',
|
|
116
|
+
text: 'Warum Farbgenauigkeit wichtig ist',
|
|
117
|
+
level: 3,
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
type: 'paragraph',
|
|
121
|
+
html: 'Schon ein Unterschied von einem Prozentpunkt bei der Farbwiedergabe kann den Unterschied zwischen einem "Wow"-Moment und einer Reaktion wie "das sieht irgendwie falsch aus" ausmachen. Professionelle Displays liefern eine Genauigkeit innerhalb von <strong>Delta E < 2</strong>. Consumer-Displays driften oft in einen Bereich von Delta E 4-6+ ab, was folgendes verursacht:',
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
type: 'paragraph',
|
|
125
|
+
html: '<ul><li>Fotos, die auf Ihrem Monitor lebendig aussehen, im Druck aber stumpf wirken</li><li>Videobearbeitungen, die nicht den Erwartungen des Kunden entsprechen</li><li>Webdesign-Mockups, die nicht den Markenspezifikationen entsprechen</li><li>Hardware-Projekte, bei denen Farbindikatoren falsch interpretiert werden</li></ul>',
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: 'title',
|
|
129
|
+
text: 'Farbräume verstehen: sRGB vs. DCI-P3',
|
|
130
|
+
level: 3,
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
type: 'title',
|
|
134
|
+
text: 'sRGB (Standard-Farbraum)',
|
|
135
|
+
level: 4,
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
type: 'paragraph',
|
|
139
|
+
html: 'sRGB wurde 1996 von Microsoft und HP entwickelt und ist der <strong>universelle Standard für Unterhaltungselektronik</strong> und das Web. Er verwendet einen dreieckigen Farbumfang, der durch drei Primärfarben definiert ist (Rot: 0,6400x 0,3300, Grün: 0,3000 0,6000, Blau: 0,1500 0,0600).',
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
type: 'paragraph',
|
|
143
|
+
html: '<strong>Merkmale:</strong><ul><li>Deckt ~35 % des sichtbaren Farbspektrums ab</li><li>Optimiert für typische Umgebungslichtbedingungen</li><li>Gamma: 2,2 (entspricht den meisten Consumer-Displays)</li><li>Geeignet für: Web, soziale Medien, Urlaubsfotos</li></ul>',
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
type: 'title',
|
|
147
|
+
text: 'DCI-P3 (Digital Cinema Gamut)',
|
|
148
|
+
level: 4,
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
type: 'paragraph',
|
|
152
|
+
html: 'DCI-P3 wurde vom Digital Cinema Initiatives-Konsortium entwickelt und ist ein <strong>Farbraum in Kinoqualität</strong>, der für Theaterprojektionen und professionelle Displays konzipiert wurde. Er umfasst ~25 % mehr Farben als sRGB.',
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
type: 'paragraph',
|
|
156
|
+
html: '<strong>Merkmale:</strong><ul><li>Deckt ~53 % des sichtbaren Farbspektrums ab</li><li>Optimiert für dunkle Kino-Umgebungen</li><li>Gamma: 2,6 (gamma-korrigiert für hohen Kontrast)</li><li>Geeignet für: Filmemachen, professionelle Fotografie, HDR-Inhalte</li></ul>',
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
type: 'title',
|
|
160
|
+
text: 'Was ist Delta E? Farbunterschiede quantifizieren',
|
|
161
|
+
level: 3,
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
type: 'paragraph',
|
|
165
|
+
html: 'Delta E (ΔE) ist die <strong>Metrik für den vom Menschen wahrnehmbaren Farbunterschied</strong> im CIE-LAB-Farbraum. Sie gibt an, wie nah die Ausgabe Ihres Displays an einer Standardreferenzfarbe liegt.',
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
type: 'paragraph',
|
|
169
|
+
html: '<strong>Delta-E-Skala (CIE 1976):</strong><ul><li>0-1: Vom menschlichen Auge nicht wahrnehmbar</li><li>1-2: Kaum wahrnehmbar</li><li>2-4: Wahrnehmbar, aber für den allgemeinen Gebrauch akzeptabel</li><li>4-6: Deutliche Farbverschiebung</li><li>>6: Sehr offensichtlicher Unterschied</li></ul>',
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
type: 'paragraph',
|
|
173
|
+
html: 'Professionelle Displays sind so kalibriert, dass sie ein <strong>Delta E < 2</strong> über den gesamten sichtbaren Bereich beibehalten. Consumer-Displays erreichen typischerweise ein Delta E von 3-5.',
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
type: 'title',
|
|
177
|
+
text: 'Die Spectrum Canvas Test-Suite',
|
|
178
|
+
level: 3,
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
type: 'title',
|
|
182
|
+
text: 'Spektrale Reinheitsprüfung',
|
|
183
|
+
level: 4,
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
type: 'paragraph',
|
|
187
|
+
html: 'Zeigt reine Primär- und Sekundärfarben (Rot, Grün, Blau, Cyan, Magenta, Gelb) an und misst, wie Ihr Monitor diese wiedergibt. Farb-"Flut"-Animationen zeigen eine konsistente Farbwiedergabe auf dem gesamten Bildschirm.',
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
type: 'title',
|
|
191
|
+
text: 'Gradientendynamik',
|
|
192
|
+
level: 4,
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
type: 'paragraph',
|
|
196
|
+
html: 'Sanfte Gradienten, die durch den gesamten Farbraum übergehen. Achten Sie auf <strong>Banding-Artefakte</strong> (sichtbare Stufen statt sanfter Übergänge), die auf eine unzureichende Farbbittiefe oder eine schlechte Gammakorrektur hinweisen.',
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
type: 'title',
|
|
200
|
+
text: 'Black Crush Detection (Schwarzes-Loch-Test)',
|
|
201
|
+
level: 4,
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
type: 'paragraph',
|
|
205
|
+
html: 'Reiner schwarzer (0,0,0) Hintergrund mit kaum sichtbaren, fast schwarzen Tönen. Wenn Schattendetails "zerquetscht" werden, verliert Ihr Monitor Informationen in dunklen Tönen - häufig bei Mobilgeräten und günstigen Panels.',
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
type: 'title',
|
|
209
|
+
text: 'Weißpunktkalibrierung',
|
|
210
|
+
level: 4,
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
type: 'paragraph',
|
|
214
|
+
html: 'Testet verschiedene korrelierte Farbtemperaturen (D65 bei 6500K = Tageslicht, D93 bei 9300K = Studio) und deckt Farbtemperaturdrift oder thermische Instabilität auf.',
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
type: 'title',
|
|
218
|
+
text: 'Interpretation Ihrer Ergebnisse',
|
|
219
|
+
level: 3,
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
type: 'paragraph',
|
|
223
|
+
html: 'Der Spectrum Canvas erstellt einen ansprechenden, druckfreundlichen Bericht mit:',
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
type: 'paragraph',
|
|
227
|
+
html: '<ul><li><strong>3D-Gamut-Visualisierung:</strong> Ein rotierender 3D-Plot, der das tatsächliche Farbvolumen Ihres Displays im Vergleich zum Referenzstandard zeigt</li><li><strong>Delta-E-Heatmap:</strong> Wo im Spektrum Ihr Display abweicht</li><li><strong>Gammakurve:</strong> Helligkeitslinearität über den Bereich von 0-255</li><li><strong>Kalibrierungs-Score:</strong> Eine einzige "Spectrum Grade" (Elite, Cinematic, Studio, Standard) basierend auf der Gesamtgenauigkeit</li></ul>',
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
type: 'title',
|
|
231
|
+
text: 'Fortgeschritten: Tipps zur manuellen Kalibrierung',
|
|
232
|
+
level: 3,
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
type: 'paragraph',
|
|
236
|
+
html: 'Wenn Ihre Ergebnisse Abweichungen zeigen, versuchen Sie diese Einstellungen im OSD-Menü (On-Screen Display) Ihres Monitors:',
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
type: 'paragraph',
|
|
240
|
+
html: '<ul><li><strong>Farbtemperatur:</strong> In Richtung "Warm" verschieben, wenn die Farben zu kühl/blau wirken; in Richtung "Kühl", wenn sie zu warm/gelb wirken</li><li><strong>Kontrast:</strong> Erhöhen, wenn Schwarztöne verwaschen aussehen; verringern, wenn Details "zerquetscht" werden</li><li><strong>Helligkeit:</strong> So einstellen, dass ein neutrales Grau ohne Farbstich bei 50 % Helligkeit erreicht wird</li><li><strong>Sättigung:</strong> Wenn Farben übersättigt sind, verringern; wenn sie stumpf wirken, erhöhen</li></ul>',
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
type: 'title',
|
|
244
|
+
text: 'Einschränkungen und Best Practices',
|
|
245
|
+
level: 3,
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
type: 'paragraph',
|
|
249
|
+
html: '<strong>Dieses Tool bietet visuelle und statistische Referenzwerte</strong>. Für professionelle Arbeiten, die eine zertifizierte Kalibrierung erfordern, verwenden Sie Hardware-Farbmessgeräte (Spektrophotometer oder Kolorimeter) und eine spezielle Kalibrierungssoftware.',
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
type: 'paragraph',
|
|
253
|
+
html: '<strong>Best Practices:</strong><ul><li>Lassen Sie Ihren Monitor vor dem Test 30 Minuten lang aufwärmen (thermische Drift stabilisiert sich)</li><li>Testen Sie bei gleichbleibenden Umgebungslichtbedingungen</li><li>Vermeiden Sie Blendung; verwenden Sie nach Möglichkeit eine Monitorblende</li><li>Wiederholen Sie die Tests wöchentlich, um Drifts über die Zeit zu verfolgen</li><li>Führen Sie ein digitales Archiv der Berichte für zukünftige Vergleiche</li></ul>',
|
|
254
|
+
},
|
|
255
|
+
],
|
|
256
|
+
ui: {
|
|
257
|
+
badge: 'Display-Kalibrierung',
|
|
258
|
+
title: 'Spectrum Canvas: Farbgenauigkeitstest',
|
|
259
|
+
description:
|
|
260
|
+
'Professionelle Display-Kalibrierung trifft auf Kino-Ästhetik. Testen Sie sRGB und DCI-P3, messen Sie die Delta-E-Genauigkeit, erkennen Sie Farbverschiebungen und erstellen Sie einen visuellen Bericht, der Daten in Erkenntnisse verwandelt.',
|
|
261
|
+
btnStartCalibration: 'Kalibrierung starten',
|
|
262
|
+
btnFullscreen: 'Vollbild',
|
|
263
|
+
kbdFullscreen: 'F11',
|
|
264
|
+
kbdFullscreenLabel: 'Vollbildmodus',
|
|
265
|
+
kbdReset: 'R',
|
|
266
|
+
kbdResetLabel: 'Test zurücksetzen',
|
|
267
|
+
kbdEsc: 'ESC',
|
|
268
|
+
kbdEscLabel: 'Beenden',
|
|
269
|
+
gamutSRGB: 'sRGB',
|
|
270
|
+
gamutDCIP3: 'DCI-P3',
|
|
271
|
+
gamutToggle: 'Farbraum',
|
|
272
|
+
hardwareName: 'Hardware-/Monitor-Name',
|
|
273
|
+
hardwareNamePlaceholder: 'z. B. MacBook Pro 16" M1 Max',
|
|
274
|
+
purityTest: 'Spektrale Reinheit',
|
|
275
|
+
gradientTest: 'Gradientendynamik',
|
|
276
|
+
blackHoleTest: 'Black Crush Detection',
|
|
277
|
+
whitePointTest: 'Weißpunktkalibrierung',
|
|
278
|
+
colorCheckpoint: 'Farb-Kontrollpunkt',
|
|
279
|
+
generateReport: 'Bericht erstellen',
|
|
280
|
+
viewResults: 'Ergebnisse anzeigen',
|
|
281
|
+
btnExit: 'Beenden (ESC)',
|
|
282
|
+
compareSideBySide: 'Nebeneinander vergleichen',
|
|
283
|
+
},
|
|
284
|
+
};
|