node-red-ui-button-matrix

Node-RED UI button matrix module.

Features

• Fully customizable button grid (matrix)
• Emits events on button press
• Easy integration into Node-RED dashboards using custom UI nodes

Usage

Install

npm install node-red-ui-button-matrix

Import and Register

import { createApp } from 'vue'
import ButtonMatrix from 'node-red-ui-button-matrix'

const app = createApp(App)
app.component('ButtonMatrix', ButtonMatrix)

Example

<template>
  <ButtonMatrix
    :matrix="buttonMatrix"
    @button-pressed="onButtonPressed"
  />
</template>

<script setup>
const buttonMatrix = [
  [{ label: 'A1' }, { label: 'A2' }, { label: 'A3' }],
  [{ label: 'B1' }, { label: 'B2' }, { label: 'B3' }]
];

function onButtonPressed({ row, col, button }) {
  console.log('Button pressed:', row, col, button);
}
</script>

Props

| Name | Type | Description | |---------------|---------|-----------------------------------| | matrix | Array | 2D array of button objects | | activeButtons | Array | 2D array of booleans (optional) |

Events

| Name | Payload | |----------------|-------------------------------------| | button-pressed | { row, col, button } |

License

MIT