More updates

Author: cmahnke

README.md

@@ -15,7 +15,7 @@ All changes and a bit of context are part of the [release notes for 0.1.0](docs/
 Import the required function(s):
 
 ```javascript
-import { checkHDR, checkHDRCanvas } from "hdr-canvas";
+import { checkHDR, checkHDRCanvas, checkHDRVideo(), checkFloat16Array } from "hdr-canvas";
 ```
 
 ## Example `checkHDRCanvas()`
@@ -37,7 +37,7 @@ This can be useful to add a warning (using the [`fillText()`](https://developer.
 ## Example `checkHDRCanvas()`
 
 ```javascript
-const hdrCanvasStatus = document.getElementById("hdr-check-status")! as HTMLDivElement;
+const hdrCanvasStatus = document.getElementById("hdr-canvas-check")! as HTMLDivElement;
 if (checkHDRCanvas()) {
   hdrCanvasStatus.innerText = "HDR Canvas are supported";
   hdrCanvasStatus.style.color = "green";
@@ -50,7 +50,7 @@ if (checkHDRCanvas()) {
 ## Example `checkHDRVideo()`
 
 ```javascript
-const hdrCanvasStatus = document.getElementById("hdr-check-status")! as HTMLDivElement;
+const hdrCanvasStatus = document.getElementById("hdr-video-check")! as HTMLDivElement;
 if (checkHDRVideo()) {
   hdrCanvasStatus.innerText = "HDR Video is supported";
   hdrCanvasStatus.style.color = "green";
@@ -60,6 +60,19 @@ if (checkHDRVideo()) {
 }
 ```
 
+## Example `checkFloat16Array()`
+
+```javascript
+const float16ArrayStatus = document.getElementById("float16array-check")! as HTMLDivElement;
+if (checkHDRVideo()) {
+  hdrCanvasStatus.innerText = "Float16Array in Image constructor is supported";
+  hdrCanvasStatus.style.color = "green";
+} else {
+  hdrCanvasStatus.innerText = "Float16Array in Image constructor is not supported";
+  hdrCanvasStatus.style.color = "red";
+}
+```
+
 # Canvas
 
 **Note: Currently the Chrome flag `enable-experimental-web-platform-features` needs to be enabled to have HDR support for the `canvas` element. You need to tell your visitors about that.**
@@ -223,17 +236,12 @@ All examples requires a Chromium based browser (like Chrome, Edge, Opera and Bra
 
 The following things might be improved:
 
-- [x] Change `pixelFormat` in `HTMLCanvasElement.getContext("2d")` to `colorType` (["unorm8", "float16"]) while keeping some downward compatibility - [#151](https://github.com/cmahnke/hdr-canvas/issues/151)
-- [ ] Try to detect change of screen for HDR detection - [#107](https://github.com/cmahnke/hdr-canvas/issues/107)
-- [ ] Remove `Uint16Image`
+- [x] Try to detect change of screen for HDR detection - [#107](https://github.com/cmahnke/hdr-canvas/issues/107) - implemented but not documented
 - [ ] Improve speed
   - [ ] Provide WebWorker
 - [ ] Documentation
   - [ ] Link to browser HDR support
-  - [x] Document `Uint16Image`
-- [ ] Tests and examples
-  - [x] Provide examples from blog
-  - [x] Provide simple sanity tests
+  - [ ] Give a overview on current status
 
 # References
 

src/hdr-check.ts

@@ -68,7 +68,7 @@ export function checkHDRCanvas(): boolean {
   return false;
 }
 
-/** Check if Float16Array is supported, to e used in {ImageData}
+/** Check if Float16Array is supported, to be used in {ImageData}
  * @returns {boolean}
  */
 export function checkFloat16Array(): boolean {
@@ -80,3 +80,12 @@ export function checkFloat16Array(): boolean {
   }
   return true;
 }
+
+/** Check if the supported bit depth is larger then 8
+ * @returns {boolean}
+ */
+export function checkHDRBitDepth(): boolean {
+  const bitsPerChannel: number = screen.colorDepth / 3;
+  const hdrSupported: boolean = bitsPerChannel > 8;
+  return hdrSupported;
+}

tests/site/assets/ts/main.ts

@@ -1,11 +1,13 @@
-import { checkHDR, checkHDRVideo, checkHDRCanvas } from "~/hdr-canvas/hdr-check";
+import { checkHDR, checkHDRVideo, checkHDRCanvas, checkFloat16Array, checkHDRBitDepth } from "~/hdr-canvas/hdr-check";
 import { initModel } from "./hdr-three.js";
 import { initCanvas } from "./image-slider.js";
 
 document.addEventListener("DOMContentLoaded", function () {
   const hdrCheck = document.getElementById("hdr-check")! as HTMLDivElement;
   const hdrVideoCheck = document.getElementById("hdr-video-check")! as HTMLDivElement;
   const hdrCanvasCheck = document.getElementById("hdr-canvas-check")! as HTMLDivElement;
+  const float16arrayCheck = document.getElementById("float16array-check")! as HTMLDivElement;
+  const screenCheck = document.getElementById("screen-check")! as HTMLDivElement;
 
   if (checkHDR()) {
     hdrCheck.classList.add("success");
@@ -25,6 +27,20 @@ document.addEventListener("DOMContentLoaded", function () {
     hdrCanvasCheck.classList.add("fail");
   }
 
+  if (checkFloat16Array()) {
+    float16arrayCheck.classList.add("success");
+  } else {
+    float16arrayCheck.classList.add("fail");
+  }
+
+  setInterval(() => {
+    if (checkHDRBitDepth()) {
+      screenCheck.classList.add("success");
+    } else {
+      screenCheck.classList.add("fail");
+    }
+  }, 500);
+
   try {
     const modelUrl = "glb/uranium.glb";
     const canvas = document.getElementById("canvas-renderer")! as HTMLCanvasElement;

tests/site/index.html

@@ -20,6 +20,8 @@ <h2>Feature detection</h2>
           <li><div class="hdr-check-result" id="hdr-check">Check for HDR Support</div></li>
           <li><div class="hdr-check-result" id="hdr-video-check">Check for HDR Video Support</div></li>
           <li><div class="hdr-check-result" id="hdr-canvas-check">Check for Canvas with HDR Support</div></li>
+          <li><div class="hdr-check-result" id="float16array-check">Check for Float16Array Image constructor Support</div></li>
+          <li><div class="hdr-check-result" id="screen-check">Check for screen hardware HDR Support</div></li>
         </ul>
       </div>
       <div class="model">