Browse Source

Add watermark option

customisations
alemart 3 months ago
parent
commit
da4a5e95f8
5 changed files with 33 additions and 13 deletions
  1. 1
    0
      docs/api/viewport.md
  2. 16
    2
      plugins/aframe-with-encantar.js
  3. 3
    2
      src/core/hud.ts
  4. 6
    1
      src/core/viewport.ts
  5. 7
    8
      src/ui/watermark.ts

+ 1
- 0
docs/api/viewport.md View File

19
     * `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.
19
     * `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.
20
     * `style: string, optional`. The [viewport style](#style). *Since:* 0.3.0
20
     * `style: string, optional`. The [viewport style](#style). *Since:* 0.3.0
21
     * `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
21
     * `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
22
+    * `watermark: boolean, optional`. Whether or not to display the encantar.js watermark and the accompanying about box. *Since:* 0.4.4
22
 
23
 
23
 **Returns**
24
 **Returns**
24
 
25
 

+ 16
- 2
plugins/aframe-with-encantar.js View File

1064
         const scene = this.el.sceneEl;
1064
         const scene = this.el.sceneEl;
1065
         const huds = [];
1065
         const huds = [];
1066
         const fullscreenUI = this.el.components['ar-viewport-fullscreen-ui'];
1066
         const fullscreenUI = this.el.components['ar-viewport-fullscreen-ui'];
1067
+        const watermark = this.el.components['ar-viewport-watermark'];
1067
 
1068
 
1068
         for(const child of this.el.children) {
1069
         for(const child of this.el.children) {
1069
             if(child.components !== undefined) {
1070
             if(child.components !== undefined) {
1088
                 resolution: this.data.resolution,
1089
                 resolution: this.data.resolution,
1089
                 style: this.data.style,
1090
                 style: this.data.style,
1090
             },
1091
             },
1091
-            !fullscreenUI ? {} : { fullscreenUI: fullscreenUI.data.enabled }
1092
+            !fullscreenUI ? {} : { fullscreenUI: fullscreenUI.data.enabled },
1093
+            !watermark ? {} : { watermark: watermark.data.visible }
1092
         ));
1094
         ));
1093
     },
1095
     },
1094
 
1096
 
1101
     mappings: {
1103
     mappings: {
1102
         'resolution': 'ar-viewport.resolution',
1104
         'resolution': 'ar-viewport.resolution',
1103
         'style': 'ar-viewport.style',
1105
         'style': 'ar-viewport.style',
1104
-        'fullscreen-ui': 'ar-viewport-fullscreen-ui'
1106
+        'fullscreen-ui': 'ar-viewport-fullscreen-ui',
1107
+        'watermark': 'ar-viewport-watermark'
1105
     }
1108
     }
1106
 });
1109
 });
1107
 
1110
 
1116
 
1119
 
1117
 }));
1120
 }));
1118
 
1121
 
1122
+AFRAME.registerComponent('ar-viewport-watermark', ARComponent({
1123
+
1124
+    schema: {
1125
+
1126
+        /** whether or not to display the encantar.js watermark */
1127
+        'visible': { type: 'boolean', default: true },
1128
+
1129
+    }
1130
+
1131
+}));
1132
+
1119
 /**
1133
 /**
1120
  * AR Heads-Up Display
1134
  * AR Heads-Up Display
1121
  */
1135
  */

+ 3
- 2
src/core/hud.ts View File

128
      * @param zIndex the z-index of the container
128
      * @param zIndex the z-index of the container
129
      * @param wantStatsPanel
129
      * @param wantStatsPanel
130
      * @param wantFullscreenButton
130
      * @param wantFullscreenButton
131
+     * @param wantWatermark
131
      * @internal
132
      * @internal
132
      */
133
      */
133
-    _init(zIndex: number, wantStatsPanel: boolean, wantFullscreenButton: boolean): void
134
+    _init(zIndex: number, wantStatsPanel: boolean, wantFullscreenButton: boolean, wantWatermark: boolean): void
134
     {
135
     {
135
         const parent = this._internalContainer;
136
         const parent = this._internalContainer;
136
         this.#statsPanel.init(parent, wantStatsPanel);
137
         this.#statsPanel.init(parent, wantStatsPanel);
137
         this.#fullscreenButton.init(parent, wantFullscreenButton);
138
         this.#fullscreenButton.init(parent, wantFullscreenButton);
138
-        this.#watermark.init(parent);
139
+        this.#watermark.init(parent, wantWatermark);
139
 
140
 
140
         for(const element of parent.children as any as HTMLElement[]) {
141
         for(const element of parent.children as any as HTMLElement[]) {
141
             if(element.style.getPropertyValue('pointer-events') == '')
142
             if(element.style.getPropertyValue('pointer-events') == '')

+ 6
- 1
src/core/viewport.ts View File

76
 
76
 
77
     /** Whether or not to include the built-in fullscreen button */
77
     /** Whether or not to include the built-in fullscreen button */
78
     fullscreenUI?: boolean;
78
     fullscreenUI?: boolean;
79
+
80
+    /** Whether or not to display the encantar.js watermark */
81
+    watermark?: boolean;
79
 }
82
 }
80
 
83
 
81
 /** Default viewport constructor settings */
84
 /** Default viewport constructor settings */
86
     style: 'best-fit',
89
     style: 'best-fit',
87
     canvas: null,
90
     canvas: null,
88
     fullscreenUI: true,
91
     fullscreenUI: true,
92
+    watermark: true,
89
 };
93
 };
90
 
94
 
91
 
95
 
1227
 
1231
 
1228
         // initialize the HUD
1232
         // initialize the HUD
1229
         const wantFullscreenButton = this.fullscreenAvailable && this._settings.fullscreenUI;
1233
         const wantFullscreenButton = this.fullscreenAvailable && this._settings.fullscreenUI;
1230
-        this._hud._init(HUD_ZINDEX, wantStatsPanel, wantFullscreenButton);
1234
+        const wantWatermark = this._settings.watermark;
1235
+        this._hud._init(HUD_ZINDEX, wantStatsPanel, wantFullscreenButton, wantWatermark);
1231
     }
1236
     }
1232
 
1237
 
1233
     /**
1238
     /**

+ 7
- 8
src/ui/watermark.ts View File

51
     /**
51
     /**
52
      * Initialize
52
      * Initialize
53
      * @param parent parent node
53
      * @param parent parent node
54
+     * @param isVisible
54
      */
55
      */
55
-    init(parent: Node): void
56
+    init(parent: Node, isVisible: boolean): void
56
     {
57
     {
58
+        this._graphic.hidden = !isVisible;
57
         parent.appendChild(this._graphic);
59
         parent.appendChild(this._graphic);
58
 
60
 
59
         if(this._dialog !== null)
61
         if(this._dialog !== null)
84
         button.style.width = '20%';
86
         button.style.width = '20%';
85
         button.style.minWidth = '128px';
87
         button.style.minWidth = '128px';
86
 
88
 
87
-        button.style.opacity = '0.4';
88
         button.style.cursor = 'pointer';
89
         button.style.cursor = 'pointer';
89
         button.style.outline = 'none';
90
         button.style.outline = 'none';
90
         button.style.border = 'none';
91
         button.style.border = 'none';
91
         button.style.background = 'none';
92
         button.style.background = 'none';
92
         (button.style as any)['-webkit-tap-highlight-color'] = 'transparent';
93
         (button.style as any)['-webkit-tap-highlight-color'] = 'transparent';
93
         button.draggable = false;
94
         button.draggable = false;
94
-        button.hidden = !!(__AR_FLAGS__ & 1);
95
 
95
 
96
         img.style.width = '100%';
96
         img.style.width = '100%';
97
         img.style.pointerEvents = 'none';
97
         img.style.pointerEvents = 'none';
98
-        img.style.filter = 'none';
98
+        img.style.filter = 'opacity(40%)';
99
         img.src = GRAPHIC;
99
         img.src = GRAPHIC;
100
         button.appendChild(img);
100
         button.appendChild(img);
101
 
101
 
102
         const setPressed = (isPressed: boolean) => (() => {
102
         const setPressed = (isPressed: boolean) => (() => {
103
             if(isPressed)
103
             if(isPressed)
104
-                img.style.filter = 'brightness(0) invert(72%) sepia(41%) saturate(1108%) hue-rotate(359deg) brightness(109%) contrast(106%)';
104
+                img.style.filter = 'brightness(0) invert(72%) sepia(41%) saturate(1108%) hue-rotate(359deg) brightness(109%) contrast(106%) opacity(90%)';
105
             else
105
             else
106
-                img.style.filter = 'none';
106
+                img.style.filter = 'opacity(40%)';
107
         });
107
         });
108
 
108
 
109
         button.addEventListener('pointerdown', setPressed(true));
109
         button.addEventListener('pointerdown', setPressed(true));
158
 
158
 
159
         logo.src = GRAPHIC;
159
         logo.src = GRAPHIC;
160
         logo.style.maxWidth = '100%';
160
         logo.style.maxWidth = '100%';
161
-        logo.style.filter = 'invert(36%) sepia(90%) saturate(7472%) hue-rotate(268deg) brightness(92%) contrast(92%)';
162
-        logo.style.opacity = '0.7';
161
+        logo.style.filter = 'invert(36%) sepia(90%) saturate(7472%) hue-rotate(268deg) brightness(92%) contrast(92%) opacity(70%)';
163
         wrapper.appendChild(logo);
162
         wrapper.appendChild(logo);
164
 
163
 
165
         copyrightText.innerText = 'Copyright \u00A9 2022-present Alexandre Martins';
164
         copyrightText.innerText = 'Copyright \u00A9 2022-present Alexandre Martins';

Loading…
Cancel
Save