KIOT Miscellaneous Utilities

Miscellaneous utilities for Cordova applications including EdgeToEdge display support and cross-platform Haptic feedback.

Features

• EdgeToEdge - Modern edge-to-edge display support for Android 11+ with thread-safe implementation
• Haptic - Cross-platform haptic feedback for Android and iOS

Installation

cordova plugin add kiot-cordova-plugin-misc

Platform Support

| Feature | Android | iOS | |---------|---------|-----| | EdgeToEdge | ✅ API 21+ (optimal on 30+) | ❌ N/A | | Haptic | ✅ API 21+ | ✅ iOS 10+ |

Quick Start

EdgeToEdge

// Detect if edge-to-edge is active
window.EdgeToEdge.detectEdgeToEdge(
    function(result) {
        console.log('Edge-to-edge active:', result.isEdgeToEdge);
        console.log('Status bar height:', result.statusBarHeight + 'px');
        console.log('Navigation bar height:', result.navigationBarHeight + 'px');
    },
    function(error) {
        console.error('Detection failed:', error);
    }
);

// Setup edge-to-edge display
window.EdgeToEdge.setupEdgeToEdge(
    function(result) {
        console.log('Edge-to-edge setup complete');
    },
    function(error) {
        console.error('Setup failed:', error);
    }
);

Haptic

// Impact feedback
cordova.plugins.haptic.impact('medium',
    function() { console.log('Impact feedback triggered'); },
    function(err) { console.error('Haptic failed:', err); }
);

// Notification feedback
cordova.plugins.haptic.notification('success',
    function() { console.log('Success feedback triggered'); },
    function(err) { console.error('Haptic failed:', err); }
);

// Selection feedback
cordova.plugins.haptic.selection(
    function() { console.log('Selection feedback triggered'); },
    function(err) { console.error('Haptic failed:', err); }
);

TypeScript/Ionic Support

The plugin includes full TypeScript definitions for type-safe development:

import { EdgeToEdge, Haptic } from 'kiot-cordova-plugin-misc';

// EdgeToEdge with async/await
async function setupDisplay() {
    try {
        const detection = await EdgeToEdge.detectEdgeToEdge();
        console.log('Edge-to-edge:', detection.isEdgeToEdge);

        if (detection.isEdgeToEdge) {
            await EdgeToEdge.setupEdgeToEdge();
            console.log('Display configured for edge-to-edge');
        }
    } catch (error) {
        console.error('EdgeToEdge error:', error);
    }
}

// Haptic with async/await
async function triggerFeedback() {
    try {
        await Haptic.impactMedium();
        await Haptic.notificationSuccess();
        await Haptic.selection();
    } catch (error) {
        console.error('Haptic error:', error);
    }
}

EdgeToEdge API

Detection

detectEdgeToEdge(success, error)

Detect if edge-to-edge display is active.

Returns:

{
    isEdgeToEdge: boolean,
    apiLevel: number,
    detectionMethod: string,
    reason: string,
    totalScreenHeight: number,
    webViewHeight: number,
    statusBarHeight: number,
    navigationBarHeight: number,
    density: number
}

getSystemBarHeights(success, error)

Get current system bar heights.

Returns:

{
    statusBarHeight: number,
    navigationBarHeight: number,
    totalSystemBarHeight: number,
    statusBarHeightDp: number,
    navigationBarHeightDp: number,
    isGestureNavigation: boolean,
    navigationMode: 'gesture' | 'three-button'
}

Setup & Adjustment

adjustViewForEdgeToEdge(success, error)

Adjust the view to support edge-to-edge display.

setupEdgeToEdge(success, error)

Complete edge-to-edge setup (detect + adjust + get heights).

resetToNormalView(success, error)

Reset view to normal (non-edge-to-edge) mode.

System Bar Customization

setSystemBarColors(colors, success, error)

Set custom system bar colors.

window.EdgeToEdge.setSystemBarColors({
    statusBar: '#FF5722',
    navigationBar: '#FF5722',
    statusBarStyle: 'light', // 'light' or 'dark'
    navigationBarStyle: 'light'
});

forceStatusBarColor(color, style)

Force status bar to a specific color.

window.EdgeToEdge.forceStatusBarColor('#FF5722', 'light');

CSS Variables

EdgeToEdge automatically injects CSS variables:

:root {
    --status-bar-height: 24px;
    --navigation-bar-height: 48px;
    --safe-area-inset-top: 24px;
    --safe-area-inset-bottom: 48px;
}

Use in your CSS:

.header {
    padding-top: var(--safe-area-inset-top);
}

.footer {
    padding-bottom: var(--safe-area-inset-bottom);
}

Haptic API

Impact Feedback

impact(intensity, success, error)

Trigger impact feedback.

• Intensity: 'light', 'medium', 'heavy'

cordova.plugins.haptic.impact('heavy');

Convenience methods:

cordova.plugins.haptic.impactLight();
cordova.plugins.haptic.impactMedium();
cordova.plugins.haptic.impactHeavy();

Notification Feedback

notification(type, success, error)

Trigger notification feedback.

• Type: 'success', 'warning', 'error'

cordova.plugins.haptic.notification('success');

Convenience methods:

cordova.plugins.haptic.notificationSuccess();
cordova.plugins.haptic.notificationWarning();
cordova.plugins.haptic.notificationError();

Selection Feedback

selection(success, error)

Trigger selection feedback (subtle, quick tap).

cordova.plugins.haptic.selection();

Custom Vibration

vibrate(duration, success, error)

Custom vibration duration in milliseconds.

cordova.plugins.haptic.vibrate(200); // 200ms vibration

Platform-Specific Behavior

EdgeToEdge (Android Only)

• Android 11+ (API 30+): Full edge-to-edge support with thread-safe implementation
• Android 5.0-10 (API 21-29): Limited edge-to-edge with system UI flags
• iOS: Not applicable (iOS uses safe area insets natively)

Haptic (Cross-Platform)

Android:

• API 26+: Uses VibrationEffect API with waveform patterns
• API 21-25: Falls back to legacy Vibrator API
• Emulates iOS haptic patterns (impact, notification, selection)

iOS:

• iOS 10+: Uses UIImpactFeedbackGenerator, UINotificationFeedbackGenerator, UISelectionFeedbackGenerator
• iOS <10: Falls back to basic vibration (kSystemSoundID_Vibrate)

Documentation

• EdgeToEdge Detailed Documentation
• Haptic Detailed Documentation

Example Usage

Ionic/Angular Component

import { Component } from '@angular/core';
import { EdgeToEdge, Haptic } from 'kiot-cordova-plugin-misc';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html'
})
export class HomePage {
    async ionViewDidEnter() {
        // Setup edge-to-edge display
        try {
            const result = await EdgeToEdge.setupEdgeToEdge();
            console.log('Edge-to-edge setup:', result);
        } catch (error) {
            console.error('EdgeToEdge error:', error);
        }
    }

    async onButtonClick() {
        // Trigger haptic feedback
        try {
            await Haptic.impactMedium();
        } catch (error) {
            console.error('Haptic error:', error);
        }
    }

    async onSuccessAction() {
        try {
            await Haptic.notificationSuccess();
        } catch (error) {
            console.error('Haptic error:', error);
        }
    }
}

React Component

import React, { useEffect } from 'react';
import { EdgeToEdge, Haptic } from 'kiot-cordova-plugin-misc';

function App() {
    useEffect(() => {
        // Setup edge-to-edge on mount
        EdgeToEdge.setupEdgeToEdge()
            .then(result => console.log('Edge-to-edge setup:', result))
            .catch(error => console.error('EdgeToEdge error:', error));
    }, []);

    const handleButtonClick = async () => {
        try {
            await Haptic.impactMedium();
        } catch (error) {
            console.error('Haptic error:', error);
        }
    };

    return (
        <div>
            <button onClick={handleButtonClick}>
                Click for Haptic Feedback
            </button>
        </div>
    );
}

export default App;

Requirements

• Cordova: 9.0.0+
• Cordova-Android: 9.0.0+ (for EdgeToEdge)
• Android: API 21+ (Lollipop 5.0+)
• iOS: 10.0+ (for haptic feedback)

License

MIT License - Copyright (c) 2025 KIOT Innovations Pvt Ltd

Support

For issues, feature requests, or contributions:

• GitHub: https://github.com/kiot-innovations/kiot-cordova-plugin-misc/issues

Credits

Developed and maintained by KIOT Innovations Pvt Ltd