@engr.nazrul/device-temperature-monitor

Vue 3 + Quasar helper to display and monitor device temperature readings. It ships:

• <DeviceTemperatureBanner> — a small status banner that color-codes the reading.
• useDeviceTemperature — a composable that derives level, labels, and messages from a temperature source.

Installation

npm install @engr.nazrul/device-temperature-monitor
# peer deps
npm install vue quasar

Quick start (banner)

<template>
  <DeviceTemperatureBanner
    :temperature="temperature"
    :limits="{ normalMax: 40, warningMax: 50 }"
    :hide-when-normal="true"
  />
</template>

<script setup lang="ts">
import { DeviceTemperatureBanner } from '@engr.nazrul/device-temperature-monitor';

// Replace with your native bridge / API value
const temperature = 42.3;
</script>

Quick start (composable)

import { useDeviceTemperature } from '@engr.nazrul/device-temperature-monitor';

const { temperature, level, colorClass, label, message, start, stop, setManualTemperature } =
  useDeviceTemperature({
    limits: { normalMax: 40, warningMax: 50 },
    fetchTemperature: async () => {
      // Example: fetch from native bridge / API
      return await window.nativeTemperature?.getCelsius?.() ?? null;
    },
    intervalMs: 10_000,
  });

Key behaviors:

• Defaults: limits { normalMax: 40, warningMax: 50 }, intervalMs 10_000 ms.
• start() begins polling when fetchTemperature is provided; stop() clears it.
• setManualTemperature lets you override the value (e.g., from an event callback).
• Helpers: level, colorClass, label, and message derived from the current temperature.

Component props

• temperature?: number | null — current reading in °C.
• limits?: TemperatureLimits — thresholds (normalMax: 40, warningMax: 50 by default).
• hideWhenNormal?: boolean — hide banner when level is normal (default false).
• floating?: boolean — render the banner as a fixed overlay at the top center (default false).

Banner visuals:

• Colors: normal bg-green-7, warning bg-yellow-7, dangerous bg-red-7, unknown bg-grey-7.
• Icons: normal check_circle, warning warning, dangerous report_problem, unknown device_unknown.

Types

type TemperatureLevel = 'unknown' | 'normal' | 'warning' | 'dangerous';

interface TemperatureLimits {
  normalMax: number;
  warningMax: number;
}

interface UseDeviceTemperatureOptions {
  limits?: TemperatureLimits;
  fetchTemperature?: () => Promise<number | null>;
  intervalMs?: number;
}

Building locally

npm install
npm run build

Outputs are written to dist/ (ESM, CJS, and type declarations). Quasar and Vue are externalized as peer dependencies.