Add watermark option

docs/api/viewport.md

@@ -19,6 +19,7 @@ Create a new viewport with the specified `settings`.
     * `canvas: HTMLCanvasElement, optional`. An existing canvas on which the virtual scene will be drawn. The engine automatically creates a canvas. You should only specify an existing canvas if you must. Experimental.
     * `style: string, optional`. The [viewport style](#style). *Since:* 0.3.0
     * `fullscreenUI: boolean, optional`. Whether or not to include, as a convenience, the built-in fullscreen button on platforms in which the fullscreen mode is [available](#fullscreenavailable). Defaults to `true`. *Since:* 0.3.0
+    * `watermark: boolean, optional`. Whether or not to display the encantar.js watermark and the accompanying about box. *Since:* 0.4.4
 
 **Returns**
 

plugins/aframe-with-encantar.js

@@ -1064,6 +1064,7 @@ AFRAME.registerComponent('ar-viewport', ARComponent({
         const scene = this.el.sceneEl;
         const huds = [];
         const fullscreenUI = this.el.components['ar-viewport-fullscreen-ui'];
+        const watermark = this.el.components['ar-viewport-watermark'];
 
         for(const child of this.el.children) {
             if(child.components !== undefined) {
@@ -1088,7 +1089,8 @@ AFRAME.registerComponent('ar-viewport', ARComponent({
                 resolution: this.data.resolution,
                 style: this.data.style,
             },
-            !fullscreenUI ? {} : { fullscreenUI: fullscreenUI.data.enabled }
+            !fullscreenUI ? {} : { fullscreenUI: fullscreenUI.data.enabled },
+            !watermark ? {} : { watermark: watermark.data.visible }
         ));
     },
 
@@ -1101,7 +1103,8 @@ AFRAME.registerPrimitive('ar-viewport', {
     mappings: {
         'resolution': 'ar-viewport.resolution',
         'style': 'ar-viewport.style',
-        'fullscreen-ui': 'ar-viewport-fullscreen-ui'
+        'fullscreen-ui': 'ar-viewport-fullscreen-ui',
+        'watermark': 'ar-viewport-watermark'
     }
 });
 
@@ -1116,6 +1119,17 @@ AFRAME.registerComponent('ar-viewport-fullscreen-ui', ARComponent({
 
 }));
 
+AFRAME.registerComponent('ar-viewport-watermark', ARComponent({
+
+    schema: {
+
+        /** whether or not to display the encantar.js watermark */
+        'visible': { type: 'boolean', default: true },
+
+    }
+
+}));
+
 /**
  * AR Heads-Up Display
  */

src/core/hud.ts

@@ -128,14 +128,15 @@ export class HUD
      * @param zIndex the z-index of the container
      * @param wantStatsPanel
      * @param wantFullscreenButton
+     * @param wantWatermark
      * @internal
      */
-    _init(zIndex: number, wantStatsPanel: boolean, wantFullscreenButton: boolean): void
+    _init(zIndex: number, wantStatsPanel: boolean, wantFullscreenButton: boolean, wantWatermark: boolean): void
     {
         const parent = this._internalContainer;
         this.#statsPanel.init(parent, wantStatsPanel);
         this.#fullscreenButton.init(parent, wantFullscreenButton);
-        this.#watermark.init(parent);
+        this.#watermark.init(parent, wantWatermark);
 
         for(const element of parent.children as any as HTMLElement[]) {
             if(element.style.getPropertyValue('pointer-events') == '')

src/core/viewport.ts

@@ -76,6 +76,9 @@ export interface ViewportSettings
 
     /** Whether or not to include the built-in fullscreen button */
     fullscreenUI?: boolean;
+
+    /** Whether or not to display the encantar.js watermark */
+    watermark?: boolean;
 }
 
 /** Default viewport constructor settings */
@@ -86,6 +89,7 @@ const DEFAULT_VIEWPORT_SETTINGS: Readonly<Required<ViewportSettings>> = {
     style: 'best-fit',
     canvas: null,
     fullscreenUI: true,
+    watermark: true,
 };
 
 
@@ -1227,7 +1231,8 @@ export class Viewport extends AREventTarget<ViewportEvent>
 
         // initialize the HUD
         const wantFullscreenButton = this.fullscreenAvailable && this._settings.fullscreenUI;
-        this._hud._init(HUD_ZINDEX, wantStatsPanel, wantFullscreenButton);
+        const wantWatermark = this._settings.watermark;
+        this._hud._init(HUD_ZINDEX, wantStatsPanel, wantFullscreenButton, wantWatermark);
     }
 
     /**

src/ui/watermark.ts

@@ -51,9 +51,11 @@ export class Watermark
     /**
      * Initialize
      * @param parent parent node
+     * @param isVisible
      */
-    init(parent: Node): void
+    init(parent: Node, isVisible: boolean): void
     {
+        this._graphic.hidden = !isVisible;
         parent.appendChild(this._graphic);
 
         if(this._dialog !== null)
@@ -84,26 +86,24 @@ export class Watermark
         button.style.width = '20%';
         button.style.minWidth = '128px';
 
-        button.style.opacity = '0.4';
         button.style.cursor = 'pointer';
         button.style.outline = 'none';
         button.style.border = 'none';
         button.style.background = 'none';
         (button.style as any)['-webkit-tap-highlight-color'] = 'transparent';
         button.draggable = false;
-        button.hidden = !!(__AR_FLAGS__ & 1);
 
         img.style.width = '100%';
         img.style.pointerEvents = 'none';
-        img.style.filter = 'none';
+        img.style.filter = 'opacity(40%)';
         img.src = GRAPHIC;
         button.appendChild(img);
 
         const setPressed = (isPressed: boolean) => (() => {
             if(isPressed)
-                img.style.filter = 'brightness(0) invert(72%) sepia(41%) saturate(1108%) hue-rotate(359deg) brightness(109%) contrast(106%)';
+                img.style.filter = 'brightness(0) invert(72%) sepia(41%) saturate(1108%) hue-rotate(359deg) brightness(109%) contrast(106%) opacity(90%)';
             else
-                img.style.filter = 'none';
+                img.style.filter = 'opacity(40%)';
         });
 
         button.addEventListener('pointerdown', setPressed(true));
@@ -158,8 +158,7 @@ export class Watermark
 
         logo.src = GRAPHIC;
         logo.style.maxWidth = '100%';
-        logo.style.filter = 'invert(36%) sepia(90%) saturate(7472%) hue-rotate(268deg) brightness(92%) contrast(92%)';
-        logo.style.opacity = '0.7';
+        logo.style.filter = 'invert(36%) sepia(90%) saturate(7472%) hue-rotate(268deg) brightness(92%) contrast(92%) opacity(70%)';
         wrapper.appendChild(logo);
 
         copyrightText.innerText = 'Copyright \u00A9 2022-present Alexandre Martins';