Skip to main content
This guide will walk you through creating a simple kiosk dashboard that displays device information and allows control of hardware features.

​
What We’ll Build

We’ll create a kiosk dashboard that:
  • Displays real-time battery level and charging status
  • Shows device information and display metrics
  • Controls screen brightness with a slider
  • Monitors WiFi connectivity

​
Step-by-Step Guide

1

Create a new component

Create a new file KioskDashboard.tsx in your components directory:
import React from 'react';
import {
  useBatteryLevel,
  useCharging,
  useDeviceName,
  useDisplaySize,
  useScreenBrightness,
  useWifi,
} from 'fullykiosk';

export function KioskDashboard() {
  return (
    <div>
      <h1>Kiosk Dashboard</h1>
    </div>
  );
}
2

Add battery monitoring

Use useBatteryLevel and useCharging to monitor power status:
export function KioskDashboard() {
  const { batteryLevel } = useBatteryLevel();
  const { charging, chargeState } = useCharging();
  
  return (
    <div className="dashboard">
      <h1>Kiosk Dashboard</h1>
      
      <section className="battery-status">
        <h2>Power Status</h2>
        {batteryLevel !== undefined ? (
          <>
            <p>Battery Level: {batteryLevel}%</p>
            <p>Charging: {charging ? 'Yes' : 'No'}</p>
            {chargeState && <p>Charge State: {chargeState}</p>}
          </>
        ) : (
          <p>Battery info not available</p>
        )}
      </section>
    </div>
  );
}
useBatteryLevel automatically updates when the battery level changes. The hook binds to the onBatteryLevelChanged event and cleans up automatically when the component unmounts.
3

Display device information

Add device name and display size using useDeviceName and useDisplaySize:
export function KioskDashboard() {
  const { batteryLevel } = useBatteryLevel();
  const { charging, chargeState } = useCharging();
  const deviceName = useDeviceName();
  const { width, height } = useDisplaySize();
  
  return (
    <div className="dashboard">
      <h1>Kiosk Dashboard</h1>
      
      {/* Battery Status section */}
      <section className="battery-status">
        <h2>Power Status</h2>
        {batteryLevel !== undefined ? (
          <>
            <p>Battery Level: {batteryLevel}%</p>
            <p>Charging: {charging ? 'Yes' : 'No'}</p>
            {chargeState && <p>Charge State: {chargeState}</p>}
          </>
        ) : (
          <p>Battery info not available</p>
        )}
      </section>
      
      {/* Device Info section */}
      <section className="device-info">
        <h2>Device Information</h2>
        <p>Device Name: {deviceName ?? 'Unknown'}</p>
        <p>Display: {width ?? '?'} x {height ?? '?'} pixels</p>
      </section>
    </div>
  );
}
4

Add brightness control

Use useScreenBrightness to display and control screen brightness:
export function KioskDashboard() {
  const { batteryLevel } = useBatteryLevel();
  const { charging, chargeState } = useCharging();
  const deviceName = useDeviceName();
  const { width, height } = useDisplaySize();
  const { brightness, setBrightness } = useScreenBrightness();
  
  const handleBrightnessChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value);
    setBrightness(value);
  };
  
  return (
    <div className="dashboard">
      <h1>Kiosk Dashboard</h1>
      
      {/* Previous sections... */}
      
      {/* Brightness Control section */}
      <section className="brightness-control">
        <h2>Screen Brightness</h2>
        {brightness !== undefined ? (
          <>
            <p>Current: {brightness}/255</p>
            <input
              type="range"
              min="0"
              max="255"
              value={brightness}
              onChange={handleBrightnessChange}
            />
          </>
        ) : (
          <p>Brightness control not available</p>
        )}
      </section>
    </div>
  );
}
The brightness value ranges from 0 to 255, where 0 is the dimmest and 255 is the brightest. The setBrightness function updates both the device brightness and the local state.
5

Monitor WiFi connectivity

Add WiFi status using useWifi hook:
export function KioskDashboard() {
  const { batteryLevel } = useBatteryLevel();
  const { charging, chargeState } = useCharging();
  const deviceName = useDeviceName();
  const { width, height } = useDisplaySize();
  const { brightness, setBrightness } = useScreenBrightness();
  const {
    wifiEnabled,
    wifiConnected,
    networkConnected,
    enableWifi,
    disableWifi,
  } = useWifi();
  
  const handleBrightnessChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value);
    setBrightness(value);
  };
  
  return (
    <div className="dashboard">
      <h1>Kiosk Dashboard</h1>
      
      {/* Battery Status */}
      <section className="battery-status">
        <h2>Power Status</h2>
        {batteryLevel !== undefined ? (
          <>
            <p>Battery Level: {batteryLevel}%</p>
            <p>Charging: {charging ? 'Yes' : 'No'}</p>
            {chargeState && <p>Charge State: {chargeState}</p>}
          </>
        ) : (
          <p>Battery info not available</p>
        )}
      </section>
      
      {/* Device Info */}
      <section className="device-info">
        <h2>Device Information</h2>
        <p>Device Name: {deviceName ?? 'Unknown'}</p>
        <p>Display: {width ?? '?'} x {height ?? '?'} pixels</p>
      </section>
      
      {/* Brightness Control */}
      <section className="brightness-control">
        <h2>Screen Brightness</h2>
        {brightness !== undefined ? (
          <>
            <p>Current: {brightness}/255</p>
            <input
              type="range"
              min="0"
              max="255"
              value={brightness}
              onChange={handleBrightnessChange}
            />
          </>
        ) : (
          <p>Brightness control not available</p>
        )}
      </section>
      
      {/* WiFi Status */}
      <section className="wifi-status">
        <h2>Network Status</h2>
        {wifiEnabled !== undefined ? (
          <>
            <p>WiFi Enabled: {wifiEnabled ? 'Yes' : 'No'}</p>
            <p>WiFi Connected: {wifiConnected ? 'Yes' : 'No'}</p>
            <p>Network Connected: {networkConnected ? 'Yes' : 'No'}</p>
            <button onClick={wifiEnabled ? disableWifi : enableWifi}>
              {wifiEnabled ? 'Disable WiFi' : 'Enable WiFi'}
            </button>
          </>
        ) : (
          <p>WiFi status not available</p>
        )}
      </section>
    </div>
  );
}
On Android 10+, WiFi control (enable/disable) only works on provisioned devices. The buttons will have no effect on non-provisioned devices.
6

Use the component

Import and use the KioskDashboard component in your app:
// App.tsx
import { KioskDashboard } from './components/KioskDashboard';

function App() {
  return (
    <div className="app">
      <KioskDashboard />
    </div>
  );
}

export default App;
7

Test in Fully Kiosk Browser

Build and deploy your application, then open it in Fully Kiosk Browser:
  1. Build your app: npm run build
  2. Host the build on a web server or locally
  3. Open the URL in Fully Kiosk Browser on your Android device
  4. Grant necessary permissions when prompted
You should see real-time device information and be able to control screen brightness and WiFi.

​
Complete Example

Here’s the complete component code:
KioskDashboard.tsx
import React from 'react';
import {
  useBatteryLevel,
  useCharging,
  useDeviceName,
  useDisplaySize,
  useScreenBrightness,
  useWifi,
} from 'fullykiosk';

export function KioskDashboard() {
  const { batteryLevel } = useBatteryLevel();
  const { charging, chargeState } = useCharging();
  const deviceName = useDeviceName();
  const { width, height } = useDisplaySize();
  const { brightness, setBrightness } = useScreenBrightness();
  const {
    wifiEnabled,
    wifiConnected,
    networkConnected,
    enableWifi,
    disableWifi,
  } = useWifi();
  
  const handleBrightnessChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value);
    setBrightness(value);
  };
  
  return (
    <div className="dashboard">
      <h1>Kiosk Dashboard</h1>
      
      <section className="battery-status">
        <h2>Power Status</h2>
        {batteryLevel !== undefined ? (
          <>
            <p>Battery Level: {batteryLevel}%</p>
            <p>Charging: {charging ? 'Yes' : 'No'}</p>
            {chargeState && <p>Charge State: {chargeState}</p>}
          </>
        ) : (
          <p>Battery info not available</p>
        )}
      </section>
      
      <section className="device-info">
        <h2>Device Information</h2>
        <p>Device Name: {deviceName ?? 'Unknown'}</p>
        <p>Display: {width ?? '?'} x {height ?? '?'} pixels</p>
      </section>
      
      <section className="brightness-control">
        <h2>Screen Brightness</h2>
        {brightness !== undefined ? (
          <>
            <p>Current: {brightness}/255</p>
            <input
              type="range"
              min="0"
              max="255"
              value={brightness}
              onChange={handleBrightnessChange}
            />
          </>
        ) : (
          <p>Brightness control not available</p>
        )}
      </section>
      
      <section className="wifi-status">
        <h2>Network Status</h2>
        {wifiEnabled !== undefined ? (
          <>
            <p>WiFi Enabled: {wifiEnabled ? 'Yes' : 'No'}</p>
            <p>WiFi Connected: {wifiConnected ? 'Yes' : 'No'}</p>
            <p>Network Connected: {networkConnected ? 'Yes' : 'No'}</p>
            <button onClick={wifiEnabled ? disableWifi : enableWifi}>
              {wifiEnabled ? 'Disable WiFi' : 'Enable WiFi'}
            </button>
          </>
        ) : (
          <p>WiFi status not available</p>
        )}
      </section>
    </div>
  );
}

​
Understanding the Code

​
Event Handling

Hooks like useBatteryLevel and useCharging automatically bind to Fully Kiosk events:
  • useBatteryLevel listens for onBatteryLevelChanged events
  • useCharging listens for unplugged, pluggedAC, pluggedUSB, and pluggedWireless events
  • useWifi listens for networkReconnect and networkDisconnect events
All event listeners are automatically cleaned up when components unmount.

​
State Management

Each hook manages its own internal state using React’s useState. When events fire, the state updates trigger re-renders of your component.

​
Control Functions

Hooks that control hardware (like useScreenBrightness and useWifi) return callback functions that you can use in event handlers. These functions interact directly with the Fully Kiosk API.

​
Next Steps

Now that you’ve built a basic kiosk dashboard, explore more advanced features:

Device Information

Access device IDs, serial numbers, and hardware details

Screen Control

Control brightness, orientation, and screen power

Network Connectivity

Monitor WiFi, IP addresses, and network status

Hardware Integration

Integrate with battery, Bluetooth, NFC, and QR scanners

Build docs developers (and LLMs) love

Get started for freeTalk to us