npm - p5-phone - Versions diffs - 1.9.0 → 1.9.1 - Mend

p5-phone 1.9.0 → 1.9.1

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.

Files changed (92) hide show

package/README.md CHANGED Viewed

@@ -102,10 +102,10 @@ p5-phone automatically detects the p5.js version and adjusts its internal touch
 ```html
 <!-- Minified version (recommended) -->
-<script src="https://cdn.jsdelivr.net/npm/p5-phone@1.9.0/dist/p5-phone.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/p5-phone@1.9.1/dist/p5-phone.min.js"></script>
 <!-- Development version (larger, with comments) -->
-<!-- <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.9.0/dist/p5-phone.js"></script> -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.9.1/dist/p5-phone.js"></script> -->
 ```
 ### Basic Setup
@@ -134,7 +134,7 @@ p5-phone automatically detects the p5.js version and adjusts its internal touch
   <!-- For p5.js 2.0: <script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script> -->
   <!-- Load p5-phone library -->
-  <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.9.0/dist/p5-phone.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.9.1/dist/p5-phone.min.js"></script>
 </head>
 <body>
@@ -305,6 +305,8 @@ this.enableGyroTap('Tap to start');
 - `window.speechEnabled` - Boolean indicating if speech recognition is active
 - `window.vibrationEnabled` - Boolean indicating if vibration is available (Android only)
 - `window.nfcEnabled` - Boolean indicating if NFC scanning is active (Android only)
+- `window.lastNfcSerialNumber` - Serial number string for the most recently read NFC tag
+- `window.lastNfcAlias` - Alias string for the most recently read NFC tag, if one has been set
 **Usage:**
 ```javascript
@@ -337,11 +339,10 @@ function draw() {
 }
 // You can also use them for conditional UI
-function setup() {
-  enableGyroTap('Tap to enable motion');
-  // Show different instructions based on status
-  if (!window.sensorsEnabled) {
+function draw() {
+  if (window.sensorsEnabled) {
+    debug("Motion sensors enabled");
+  } else {
     debug("Motion sensors not yet enabled");
   }
 }
@@ -661,11 +662,23 @@ function gameOver() {
 - `enableNfcTap(message)` - Tap anywhere on screen to enable NFC scanning
 - `enableNfcButton(text)` - Creates a button with custom text to enable NFC
 - `stopNfc()` - Stop NFC scanning
+- `setNfcTagAlias(serialNumber, alias)` - Give a tag ID a human-friendly name
+- `getNfcTagAlias(serialNumber)` - Get a saved alias for a tag ID
+- `isNfcTag(aliasOrSerialNumber)` - Check whether the most recently read tag matches an alias or ID
 **Status Variables:**
 - `window.nfcEnabled` - Boolean indicating if NFC scanning is active
+- `window.nfcStatus` - String describing NFC startup/read status
+- `window.nfcError` - String containing the latest NFC startup/read error
+- `window.nfcTagAliases` - Object mapping tag IDs to aliases
 - `window.lastNfcMessage` - Object containing the most recently read tag's data
 - `window.lastNfcSerialNumber` - Serial number string of the most recently read tag
+- `window.lastNfcAlias` - Alias string for the most recently read tag, if one has been set
+**Two-step workflow:**
+1. Open the NFC identifier example, scan each physical tag, type an alias, then download the tag list.
+2. Paste the generated `setNfcTagAlias()` lines into your sketch and use `isNfcTag()` in conditionals.
 **User Callback:**
@@ -674,6 +687,7 @@ Define an `nfcRead()` function in your sketch to receive tag data when a tag is
 ```javascript
 function nfcRead(message, serialNumber) {
   // message.serialNumber — tag serial number
+  // message.alias — saved alias, or '' if unnamed
   // message.records — array of NDEF records, each with:
   //   .recordType — 'text', 'url', 'mime', etc.
   //   .data — decoded content (string for text/url, object for JSON, raw for others)
@@ -690,6 +704,11 @@ let tagText = 'No tag scanned yet';
 function setup() {
   createCanvas(windowWidth, windowHeight);
   lockGestures();
+  // Paste IDs from the NFC identifier example.
+  setNfcTagAlias('04:85:2a:1b:9f:61:80', 'paintbrush');
+  setNfcTagAlias('04:42:18:3c:9f:61:80', 'desk');
   enableNfcTap('Tap to enable NFC');
 }
@@ -698,16 +717,29 @@ function draw() {
   textAlign(CENTER, CENTER);
   textSize(20);
-  if (!window.nfcEnabled) {
-    text('NFC not active', width / 2, height / 2);
+  if (window.nfcEnabled) {
+    if (isNfcTag('paintbrush')) {
+      background(120, 220, 160);
+      text('Paintbrush tag read', width / 2, height / 2);
+    } else if (isNfcTag('desk')) {
+      background(140, 180, 240);
+      text('Desk tag read', width / 2, height / 2);
+    } else {
+      text(tagText, width / 2, height / 2);
+      text('Hold an NFC tag near your phone', width / 2, height / 2 + 40);
+    }
   } else {
-    text(tagText, width / 2, height / 2);
-    text('Hold an NFC tag near your phone', width / 2, height / 2 + 40);
+    text('NFC not active', width / 2, height / 2);
   }
 }
 function nfcRead(message, serialNumber) {
-  tagText = 'Tag: ' + serialNumber;
+  tagText = 'Tag: ' + (message.alias || serialNumber);
+  if (isNfcTag('paintbrush', serialNumber)) {
+    // This runs once when the paintbrush tag is scanned.
+  }
   for (let record of message.records) {
     if (record.recordType === 'text' || record.recordType === 'url') {
       tagText += '\n' + record.data;
@@ -730,6 +762,7 @@ NFC tags contain NDEF records. The most common types are:
 **Best Practices:**
 - Always check `window.nfcEnabled` before relying on NFC features
 - Use the `nfcRead()` callback for real-time tag processing
+- Use `setNfcTagAlias()` and `isNfcTag()` when a sketch should respond to named physical objects
 - Use `window.lastNfcMessage` in `draw()` for displaying the most recent tag
 - Test on Android devices with Chrome — NFC is not available on iOS or desktop browsers
 - Tags must be NDEF-formatted to be read by the Web NFC API
@@ -810,10 +843,10 @@ function draw() {
 ### PhoneCamera (ML5 Integration)
-**Purpose:** Simplified camera access optimized for ML5.js machine learning models (FaceMesh, HandPose, BodyPose, etc.). Handles camera initialization, coordinate mapping, mirroring, and display modes automatically.
+**Purpose:** Simplified camera access optimized for ML5.js machine learning models (FaceMesh, HandPose, BodyPose, ObjectDetection, etc.). Handles camera initialization, coordinate mapping, mirroring, and display modes automatically.
 **Key Features:**
-- **Automatic Coordinate Mapping** - ML5 keypoints automatically mapped to canvas coordinates
+- **Automatic Coordinate Mapping** - ML5 keypoints and bounding boxes automatically mapped to canvas coordinates
 - **Mirror Support** - Handles front camera mirroring for natural interaction
 - **Display Modes** - Multiple video sizing options (fitHeight, cover, contain, fixed)
 - **ML5 Optimized** - Direct integration with ML5 v1.x models
@@ -828,6 +861,8 @@ function draw() {
 | `cam.onReady(callback)` | Execute code when camera ready | Callback function |
 | `cam.mapKeypoint(keypoint)` | Map single ML5 keypoint to screen | ML5 keypoint object |
 | `cam.mapKeypoints(keypoints)` | Map array of ML5 keypoints | Array of ML5 keypoints |
+| `cam.mapBox(box)` | Map single ML5 bounding box to screen | ML5 detection object with x, y, width, height |
+| `cam.mapBoxes(boxes)` | Map array of ML5 bounding boxes | Array of ML5 detection objects |
 **Properties:**
@@ -861,7 +896,7 @@ function setup() {
     let options = {
       maxFaces: 1,
       refineLandmarks: false,
-      flipHorizontal: false  // cam.mapKeypoint() handles mirroring
+      flipped: false  // cam.mapKeypoint() handles mirroring
     };
     facemesh = ml5.faceMesh(options, modelLoaded);
@@ -914,7 +949,7 @@ function draw() {
 **Coordinate Mapping:**
-The `mapKeypoint()` and `mapKeypoints()` functions automatically handle:
+The `mapKeypoint()`, `mapKeypoints()`, `mapBox()`, and `mapBoxes()` functions automatically handle:
 - Video-to-canvas scaling
 - Mirror transformation (for front camera)
 - Offset positioning (for different display modes)
@@ -930,26 +965,34 @@ let hands = cam.mapKeypoints(hand.keypoints);
 hands.forEach(point => {
   circle(point.x, point.y, 5);
 });
+// Object detection bounding box
+let mappedObject = cam.mapBox(detection);
+rect(mappedObject.x, mappedObject.y, mappedObject.width, mappedObject.height);
 ```
 **ML5 Model Examples:**
 ```javascript
 // FaceMesh (468 keypoints)
-let options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: false };
+let options = { maxFaces: 1, refineLandmarks: false, flipped: false };
 facemesh = ml5.faceMesh(options, modelLoaded);
 // HandPose (21 keypoints per hand)
-let options = { maxHands: 2, runtime: 'mediapipe', flipHorizontal: false };
+let options = { maxHands: 2, runtime: 'mediapipe', flipped: false };
 handpose = ml5.handPose(options, modelLoaded);
 // BodyPose (33 keypoints with 3D)
 let options = { modelType: 'MULTIPOSE_LIGHTNING', flipped: false };
 bodypose = ml5.bodyPose('BlazePose', options, modelLoaded);
+// ObjectDetection (bounding boxes)
+objectDetector = await ml5.objectDetection('cocossd');
+objectDetector.detectStart(cam.videoElement, gotDetections);
 ```
 **Important Notes:**
-- Always set `flipHorizontal: false` in ML5 options (PhoneCamera handles mirroring)
+- Always set `flipped: false` in ML5 options when available (PhoneCamera handles mirroring)
 - Use `cam.videoElement` (native HTML video element) when passing to ML5's `detectStart()`
 - Check `cam.ready` before using video or drawing keypoints
 - Call `enableCameraTap()` to handle camera permissions automatically
@@ -1033,9 +1076,11 @@ function setup() {
 }
 function draw() {
-  if (!window.sensorsEnabled) return;
   background(220);
-  circle(width/2 + rotationY * 3, height/2 + rotationX * 3, 50);
+  if (window.sensorsEnabled) {
+    circle(width/2 + rotationY * 3, height/2 + rotationX * 3, 50);
+  }
 }
 ```
@@ -1095,9 +1140,11 @@ function setup() {
 }
 function draw() {
-  if (!window.sensorsEnabled) return;
   background(220);
-  circle(width/2 + rotationY * 3, height/2 + rotationX * 3, 50);
+  if (window.sensorsEnabled) {
+    circle(width/2 + rotationY * 3, height/2 + rotationX * 3, 50);
+  }
 }
 ```

package/dist/p5-phone.js CHANGED Viewed

@@ -88,8 +88,12 @@ window.gesturesLocked = false;
 window.vibrationEnabled = false;
 window.speechEnabled = false;
 window.nfcEnabled = false;
+window.nfcError = '';
+window.nfcStatus = 'idle';
+window.nfcTagAliases = {};
 window.lastNfcMessage = null;
 window.lastNfcSerialNumber = null;
+window.lastNfcAlias = '';
 // Internal state
 let _micInstance = null;
@@ -557,9 +561,80 @@ function stopNfc() {
   }
   _nfcReader = null;
   window.nfcEnabled = false;
+  window.nfcStatus = 'stopped';
   console.log('NFC scanning stopped');
 }
+function _normalizeNfcText(value) {
+  return value == null ? '' : String(value).trim();
+}
+function _normalizeNfcTagId(serialNumber) {
+  return _normalizeNfcText(serialNumber).toLowerCase();
+}
+function _nfcTextMatches(firstValue, secondValue) {
+  const firstText = _normalizeNfcText(firstValue).toLowerCase();
+  const secondText = _normalizeNfcText(secondValue).toLowerCase();
+  return firstText !== '' && firstText === secondText;
+}
+/**
+ * Give an NFC tag a human-friendly alias.
+ * Pass an empty alias to remove the stored name for a tag.
+ */
+function setNfcTagAlias(serialNumber, alias) {
+  const tagId = _normalizeNfcTagId(serialNumber);
+  const tagAlias = _normalizeNfcText(alias);
+  if (!tagId) {
+    console.warn('p5-phone: setNfcTagAlias() needs an NFC serial number');
+    return '';
+  }
+  if (!tagAlias) {
+    delete window.nfcTagAliases[tagId];
+  } else {
+    window.nfcTagAliases[tagId] = tagAlias;
+  }
+  if (_normalizeNfcTagId(window.lastNfcSerialNumber) === tagId) {
+    window.lastNfcAlias = tagAlias;
+    if (window.lastNfcMessage) {
+      window.lastNfcMessage.alias = tagAlias;
+    }
+  }
+  return tagAlias;
+}
+/**
+ * Get the human-friendly alias for an NFC tag serial number.
+ */
+function getNfcTagAlias(serialNumber = window.lastNfcSerialNumber) {
+  const tagId = _normalizeNfcTagId(serialNumber);
+  return tagId ? (window.nfcTagAliases[tagId] || '') : '';
+}
+/**
+ * Check whether the most recently read NFC tag matches an alias or serial number.
+ * Optionally pass a serial number from nfcRead(message, serialNumber) as the second argument.
+ */
+function isNfcTag(aliasOrSerialNumber, serialNumber = window.lastNfcSerialNumber) {
+  const tagId = _normalizeNfcTagId(serialNumber);
+  const targetText = _normalizeNfcText(aliasOrSerialNumber);
+  if (!tagId || !targetText) {
+    return false;
+  }
+  if (tagId === _normalizeNfcTagId(targetText)) {
+    return true;
+  }
+  return _nfcTextMatches(getNfcTagAlias(serialNumber), targetText);
+}
 // =========================================
 // INTERNAL PERMISSION HANDLERS
 // =========================================
@@ -687,6 +762,13 @@ async function _requestVibrationPermissionCore() {
 async function _requestNfcPermissionCore() {
   try {
+    if (window.nfcEnabled && _nfcReader) {
+      return true;
+    }
+    window.nfcError = '';
+    window.nfcStatus = 'starting';
     // Check if Web NFC API is supported
     if (!('NDEFReader' in window)) {
       console.warn('⚠️ Web NFC API not supported on this device/browser (Android Chrome 89+ required)');
@@ -694,9 +776,14 @@ async function _requestNfcPermissionCore() {
         debugWarn('Web NFC not supported on this device/browser');
       }
       window.nfcEnabled = false;
-      return;
+      window.nfcStatus = 'unsupported';
+      window.nfcError = window.isSecureContext === false
+        ? 'NFC requires HTTPS. Serve this sketch from an HTTPS URL, not plain HTTP.'
+        : 'Web NFC is not supported in this browser. Use Android Chrome 89+ over HTTPS.';
+      return false;
     }
+    window.nfcStatus = 'requesting-permission';
     _nfcAbortController = new AbortController();
     _nfcReader = new NDEFReader();
@@ -734,9 +821,13 @@ async function _requestNfcPermissionCore() {
         records.push(entry);
       }
-      const message = { serialNumber: serialNumber, records: records };
+      const alias = getNfcTagAlias(serialNumber);
+      const message = { serialNumber: serialNumber, alias: alias, records: records };
       window.lastNfcMessage = message;
       window.lastNfcSerialNumber = serialNumber;
+      window.lastNfcAlias = alias;
+      window.nfcStatus = 'tag-read';
+      window.nfcError = '';
       // Call user-defined callback if it exists
       if (typeof nfcRead === 'function') {
@@ -751,6 +842,7 @@ async function _requestNfcPermissionCore() {
     _nfcReader.onreadingerror = (event) => {
       console.warn('⚠️ NFC read error — tag may be incompatible or out of range');
+      window.nfcError = 'NFC read error. Make sure the tag is NDEF formatted and hold it near the phone NFC antenna.';
       if (_debugVisible) {
         debugWarn('NFC read error — tag incompatible or out of range');
       }
@@ -758,26 +850,44 @@ async function _requestNfcPermissionCore() {
     await _nfcReader.scan({ signal: _nfcAbortController.signal });
     window.nfcEnabled = true;
+    window.nfcStatus = 'scanning';
     console.log('✅ NFC scanning active');
+    return true;
   } catch (error) {
     if (error.name === 'NotAllowedError') {
       console.warn('⚠️ NFC permission denied by user');
+      window.nfcStatus = 'permission-denied';
+      window.nfcError = 'NFC permission was denied. Reload and tap Allow if Chrome asks.';
       if (_debugVisible) {
         debugWarn('NFC permission denied');
       }
     } else if (error.name === 'NotSupportedError') {
       console.warn('⚠️ NFC not supported on this device');
+      window.nfcStatus = 'unsupported';
+      window.nfcError = 'NFC is not supported on this device/browser, or this page is not using HTTPS.';
       if (_debugVisible) {
         debugWarn('NFC not supported on this device');
       }
+    } else if (error.name === 'SecurityError') {
+      console.warn('⚠️ NFC requires a secure HTTPS context');
+      window.nfcStatus = 'secure-context-required';
+      window.nfcError = 'NFC requires HTTPS. Serve this sketch from an HTTPS URL, not plain HTTP.';
+      if (_debugVisible) {
+        debugWarn('NFC requires HTTPS');
+      }
     } else {
       console.error('NFC permission error:', error);
+      window.nfcStatus = 'error';
+      window.nfcError = error && error.message ? error.message : 'NFC could not start.';
       if (_debugVisible) {
         debugError('NFC error: ' + error.message);
       }
     }
     window.nfcEnabled = false;
+    _nfcReader = null;
+    _nfcAbortController = null;
+    return false;
   }
 }
@@ -808,8 +918,9 @@ async function _requestVibrationPermission() {
 }
 async function _requestNfcPermission() {
-  await _requestNfcPermissionCore();
+  const enabled = await _requestNfcPermissionCore();
   _notifySketchReady();
+  return enabled;
 }
 function _notifySketchReady() {
@@ -839,6 +950,7 @@ function _notifySketchReady() {
 function _createPermissionButton(buttonText, statusText, onClickHandler) {
   // Remove existing button if present
   _removeExistingUI();
+  let activating = false;
   // Create button
   const button = document.createElement('button');
@@ -891,7 +1003,8 @@ function _createPermissionButton(buttonText, statusText, onClickHandler) {
   // Add multiple event handlers to ensure responsiveness
   const handleButtonClick = async () => {
-    if (button.parentNode) {
+    if (!activating && button.parentNode) {
+      activating = true;
       button.style.display = 'none';
       status.style.display = 'block';
@@ -922,6 +1035,7 @@ function _createPermissionButton(buttonText, statusText, onClickHandler) {
 function _createTapToEnable(message, onTapHandler) {
   // Remove existing UI if present
   _removeExistingUI();
+  let activating = false;
   // Create overlay
   const overlay = document.createElement('div');
@@ -960,7 +1074,8 @@ function _createTapToEnable(message, onTapHandler) {
   // Add multiple event handlers to ensure responsiveness
   const handleActivation = async () => {
-    if (overlay.parentNode) {
+    if (!activating && overlay.parentNode) {
+      activating = true;
       messageDiv.textContent = 'Enabling...';
       await onTapHandler();
       if (overlay.parentNode) {
@@ -1074,6 +1189,7 @@ function _createCanvasToEnable(message, onActivateHandler) {
  */
 function _createBannerToEnable(message, position, onActivateHandler) {
   _removeExistingUI();
+  let activating = false;
   const banner = document.createElement('div');
   banner.id = 'permissionBanner';
@@ -1110,7 +1226,8 @@ function _createBannerToEnable(message, position, onActivateHandler) {
   });
   const handleActivation = async () => {
-    if (!banner.parentNode) return;
+    if (activating || !banner.parentNode) return;
+    activating = true;
     banner.textContent = 'Enabling...';
     banner.style.pointerEvents = 'none';
@@ -1574,6 +1691,9 @@ window.stopVibration = stopVibration;
 window.enableNfcTap = enableNfcTap;
 window.enableNfcButton = enableNfcButton;
 window.stopNfc = stopNfc;
+window.setNfcTagAlias = setNfcTagAlias;
+window.getNfcTagAlias = getNfcTagAlias;
+window.isNfcTag = isNfcTag;
 window.enableAllTap = enableAllTap;
 window.enableAllButton = enableAllButton;
@@ -2177,6 +2297,70 @@ class PhoneCamera {
     return keypoints.map(kp => this.mapKeypoint(kp));
   }
+  /**
+   * Map an ML5 bounding box object to display coordinates
+   * Handles scaling and mirroring automatically
+   * Preserves labels, confidence, and any other detection properties
+   * @param {object} box - ML5 box/detection { x, y, width, height, ... }
+   * @returns {object} - Box with mapped x, y, width, and height
+   */
+  mapBox(box) {
+    if (!box) {
+      console.warn('PhoneCamera.mapBox: invalid box', box);
+      return box;
+    }
+    const boxX = typeof box.x !== 'undefined' ? box.x : box.xMin;
+    const boxY = typeof box.y !== 'undefined' ? box.y : box.yMin;
+    const boxWidth = typeof box.width !== 'undefined' ? box.width : box.xMax - box.xMin;
+    const boxHeight = typeof box.height !== 'undefined' ? box.height : box.yMax - box.yMin;
+    const numericX = Number(boxX);
+    const numericY = Number(boxY);
+    const numericWidth = Number(boxWidth);
+    const numericHeight = Number(boxHeight);
+    if (!Number.isFinite(numericX) ||
+        !Number.isFinite(numericY) ||
+        !Number.isFinite(numericWidth) ||
+        !Number.isFinite(numericHeight)) {
+      console.warn('PhoneCamera.mapBox: invalid box', box);
+      return box;
+    }
+    const topLeft = this.mapPoint(numericX, numericY);
+    const bottomRight = this.mapPoint(numericX + numericWidth, numericY + numericHeight);
+    const mappedX = Math.min(topLeft.x, bottomRight.x);
+    const mappedY = Math.min(topLeft.y, bottomRight.y);
+    const mappedWidth = Math.abs(bottomRight.x - topLeft.x);
+    const mappedHeight = Math.abs(bottomRight.y - topLeft.y);
+    return {
+      ...box,
+      x: mappedX,
+      y: mappedY,
+      width: mappedWidth,
+      height: mappedHeight,
+      xMin: mappedX,
+      yMin: mappedY,
+      xMax: mappedX + mappedWidth,
+      yMax: mappedY + mappedHeight
+    };
+  }
+  /**
+   * Map an array of ML5 bounding boxes to display coordinates
+   * @param {array} boxes - Array of ML5 boxes/detections
+   * @returns {array} - Array of boxes with mapped coordinates
+   */
+  mapBoxes(boxes) {
+    if (!Array.isArray(boxes)) {
+      console.warn('PhoneCamera.mapBoxes: expected array, got', typeof boxes);
+      return boxes;
+    }
+    return boxes.map(box => this.mapBox(box));
+  }
   // ========================================
   // CANVAS DRAWING INTEGRATION
@@ -2362,6 +2546,9 @@ if (typeof p5 !== 'undefined' && p5.prototype) {
   p5.prototype.enableNfcTap = enableNfcTap;
   p5.prototype.enableNfcButton = enableNfcButton;
   p5.prototype.stopNfc = stopNfc;
+  p5.prototype.setNfcTagAlias = setNfcTagAlias;
+  p5.prototype.getNfcTagAlias = getNfcTagAlias;
+  p5.prototype.isNfcTag = isNfcTag;
   p5.prototype.enableAllTap = enableAllTap;
   p5.prototype.enableAllButton = enableAllButton;
@@ -2440,6 +2627,9 @@ if (typeof p5 !== 'undefined' && typeof p5.registerAddon === 'function') {
     fn.enableNfcTap = enableNfcTap;
     fn.enableNfcButton = enableNfcButton;
     fn.stopNfc = stopNfc;
+    fn.setNfcTagAlias = setNfcTagAlias;
+    fn.getNfcTagAlias = getNfcTagAlias;
+    fn.isNfcTag = isNfcTag;
     fn.enableAllTap = enableAllTap;
     fn.enableAllButton = enableAllButton;