Add resolutions: xl, xl+, xxl, xxl+

docs/api/resolution.md

@@ -1,16 +1,20 @@
 # Resolution
 
-A `Resolution` is a setting defined by a string. It is mapped to a size measured in pixels according to special rules. You may use it to change the resolution in pixels of a video captured by a webcam, or to adjust the resolution in pixels of the videos that are processed by a tracker for example.
+A `Resolution` is a setting defined by a string. It is mapped to a size measured in pixels according to special rules. You may use it, for example, to change the resolution of a video captured by a webcam, to adjust the resolution of a video when it is processed by a tracker, or to set the resolution of the virtual scene when it is rendered.
 
 The table below shows examples of how resolution strings are converted to pixels:
 
-| Resolution string | 16:9 landscape | 16:10 landscape | 4:3 landscape |
-| ----------------- | -------------- | --------------- | ------------- |
-| `"xs"` | 212x120 | 192x120 | 160x120 |
-| `"xs+"` | 284x160 | 256x160 | 212x160 |
-| `"sm"` | 356x200 | 320x200 | 266x200 | 
-| `"sm+"` | 426x240 | 384x240 | 320x240 |
-| `"md"` | 568x320 | 512x320 | 426x320 |
-| `"md+"` | 640x360 | 576x360 | 480x360 |
-| `"lg"` | 852x480 | 768x480 | 640x480 |
-| `"lg+"` | 1066x600 | 960x600 | 800x600 |
+| Resolution | 16:9 landscape | 16:10 landscape | 4:3 landscape | Notes |
+| ---------- | -------------- | --------------- | ------------- | ----- |
+| `"xs"` | 212x120 | 192x120 | 160x120 | |
+| `"xs+"` | 284x160 | 256x160 | 212x160 | |
+| `"sm"` | 356x200 | 320x200 | 266x200 | |
+| `"sm+"` | 426x240 | 384x240 | 320x240 | |
+| `"md"` | 568x320 | 512x320 | 426x320 | |
+| `"md+"` | 640x360 | 576x360 | 480x360 | |
+| `"lg"` | 852x480 | 768x480 | 640x480 | 480p |
+| `"lg+"` | 1066x600 | 960x600 | 800x600 | |
+| `"xl"` | 1280x720 | 1152x720 | 960x720 | 720p |
+| `"xl+"` | 1364x768 | 1228x768 | 1024x768 | |
+| `"xxl"` | 1600x900 | 1440x900 | 1200x900 | |
+| `"xxl+"` | 1706x960 | 1536x960 | 1280x960 | 960p |

plugins/aframe-with-encantar.js

@@ -592,7 +592,7 @@ AFRAME.registerComponent('ar-camera-source', ARComponent({
 
     schema: {
 
-        /** video resolution: "xs" | "xs+" | "sm" | "sm+" | "md" | "md+" | "lg" | "lg+" */
+        /** video resolution: "xs" | "xs+" | "sm" | "sm+" | "md" | "md+" | "lg" | "lg+" | "xl" | "xl+" | "xxl" | "xxl+" */
         'resolution': { type: 'string', default: 'md' },
 
         /** facing mode: "environment" | "user" */
@@ -741,7 +741,7 @@ AFRAME.registerComponent('ar-image-tracker', ARComponent({
 
     schema: {
 
-        /** resolution of the tracker: "xs" | "xs+" | "sm" | "sm+" | "md" | "md+" | "lg" | "lg+" */
+        /** resolution of the tracker: "xs" | "xs+" | "sm" | "sm+" | "md" | "md+" | "lg" | "lg+" | "xl" | "xl+" | "xxl" | "xxl+" */
         'resolution': { type: 'string', default: 'sm+' },
 
     },
@@ -836,7 +836,7 @@ AFRAME.registerComponent('ar-viewport', ARComponent({
 
     schema: {
 
-        /** viewport resolution: "xs" | "xs+" | "sm" | "sm+" | "md" | "md+" | "lg" | "lg+" */
+        /** viewport resolution: "xs" | "xs+" | "sm" | "sm+" | "md" | "md+" | "lg" | "lg+" | "xl" | "xl+" | "xxl" | "xxl+" */
         'resolution': { type: 'string', default: 'lg' },
 
         /** viewport style: "best-fit" | "stretch" | "inline" */

src/utils/resolution.ts

@@ -25,7 +25,7 @@ import { SpeedySize } from 'speedy-vision/types/core/speedy-size';
 import { IllegalArgumentError } from './errors';
 
 /** Resolution type */
-export type Resolution = 'xs' | 'xs+' | 'sm' | 'sm+' | 'md' | 'md+' | 'lg' | 'lg+';
+export type Resolution = 'xs' | 'xs+' | 'sm' | 'sm+' | 'md' | 'md+' | 'lg' | 'lg+' | 'xl' | 'xl+' | 'xxl' | 'xxl+';
 
 /** Reference heights when in landscape mode, measured in pixels */
 const REFERENCE_HEIGHT: { readonly [R in Resolution]: number } = {
@@ -37,6 +37,13 @@ const REFERENCE_HEIGHT: { readonly [R in Resolution]: number } = {
     'md+': 360,
     'lg' : 480,
     'lg+': 600,
+    'xl' : 720, // should we define an alias, "hd"?
+    'xl+': 768,
+    'xxl': 900,
+    'xxl+':960,
+    //'ul-': 1024,
+    //'ul': 1080, // what should we call this? xxxl? ul? (ultra large?)
+    //'ul+': 1200,
 };
 
 /**