mountain-displaypad

mountain-displaypad is a Node.js library for interfacing with Mountain's 6×2 button Displaypad.

❗ Please note that mountain-displaypad is NOT a standalone application. Instead, mountain-displaypad is a code library, which developers can use to make their own applications which interface with the Displaypad.

References

This library is based on infinitton-idisplay, which is a modified version of elgato-stream-deck that does not have dependencies to image libraries, and that talks to the Infinitton device instead of the Elgato Stream Deck.

Install

$ npm install --save mountain-displaypad

Example

const Displaypad = require('./mountain-displaypad')

pad = new Displaypad()

pad.on('up', (key) => {console.log('Button up:', key)})
pad.on('down', (key) => {console.log('Button down:', key)})

pad.clearAllKeys()

pad.fillColor(0, 255,   0,   0)
pad.fillColor(1, 0,   255,   0)
pad.fillColor(2, 0,     0, 255)

// Create a new image with a light red line from the top left to the bottom right corner
image = Buffer.alloc(Displaypad.ICON_SIZE * Displaypad.ICON_SIZE * 3)

for (let i = 0; i < Displaypad.ICON_SIZE; i++) {
    offset = i * Displaypad.ICON_SIZE * 3 + i * 3
    image[offset]   = 0xff
    image[offset+1] = 0x7f
    image[offset+2] = 0x7f
}

pad.fillImage(9, image)

Async example

const Displaypad = require('./mountain-displaypad')

async function main() {
        pad = await Displaypad.openAsync()

        pad.on('up', (key) => {console.log('Button up:', key)})
        pad.on('down', (key) => {console.log('Button down:', key)})

        pad.fillColor(0,255,0,0)
        pad.fillColor(1,0,255,0)
        pad.fillColor(2,0,0,255)
}

main()

How to display images

Hey, thanks so much for making this! My Displaypad can now finally be put to good use. I'm hoping Companion integration is possible at some point. For now I'm using it to toggle a smart fan on and off that is running ESPHome.

I'd like to use a png image instead of solid colours. Would you be able to point me in the right direction? When I try to use a png I get errors saying the image buffer size is wrong. My png's are 128x128px.

Here's my current code:

// Import necessary modules
const Displaypad = require('mountain-displaypad');
const axios = require('axios');

// Create a new Displaypad instance
const pad = new Displaypad();

// Function to toggle the fan state
async function toggleFanState() {
    try {
        // Perform HTTP POST request to toggle the fan
        await axios.post('http://192.168.1.113/fan/tower_fan/toggle');
    } catch (error) {
        console.error('Error toggling fan state:', error.message);
    }
}

// Function to get the fan state
async function getFanState() {
    try {
        // Fetch the updated fan state
        const response = await axios.get('http://192.168.1.113/fan/tower_fan/');
        
        // Return the fan state
        return response.data.state;
    } catch (error) {
        console.error('Error fetching fan state:', error.message);
        return null;
    }
}

// Function to update button color and image based on fan state
async function updateButtonColorAndImage() {
    try {
        // Fetch the updated fan state
        const fanState = await getFanState();
        
        // Set button color based on fan state
        if (fanState === 'ON') {
            pad.fillColor(0, 0, 0, 255); // Blue color
        } else {
            pad.fillColor(0, 255, 255, 255); // White color
        }
        
        // Log the fan state
        console.log('Fan state:', fanState);
        
        // Update fan image based on fan state
        updateFanImage(fanState);
    } catch (error) {
        console.error('Error updating button color and image:', error.message);
    }
}

// Function to update fan image based on fan state
function updateFanImage(fanState) {
    // Create a new image buffer
    const imageBuffer = Buffer.alloc(Displaypad.ICON_SIZE * Displaypad.ICON_SIZE * 3);

    // Fill the image buffer with appropriate color for fan state
    const color = fanState === 'ON' ? [0, 0, 255] : [255, 255, 255]; // Blue for 'ON', White for 'OFF'
    for (let i = 0; i < Displaypad.ICON_SIZE; i++) {
        const offset = i * Displaypad.ICON_SIZE * 3;
        imageBuffer[offset] = color[0];
        imageBuffer[offset + 1] = color[1];
        imageBuffer[offset + 2] = color[2];
    }

    // Display the image on the button
    pad.fillImage(9, imageBuffer);
}

// Handle button press event
pad.on('down', async (key) => {
    console.log('Button down:', key);
    
    try {
        // Toggle the fan state
        await toggleFanState();
        
        // Log the button press and toggle
        console.log('Button press: toggling fan state');
        
        // Wait for 500 milliseconds before updating button color and image
        setTimeout(updateButtonColorAndImage, 500);
    } catch (error) {
        // Log any errors that occur during the button press event
        console.error('Error during button press:', error.message);
    }
});

// Set initial button color to white and display fan image
pad.fillColor(0, 255, 255, 255); // White color
updateFanImage('OFF'); // Display fan image for 'OFF' state

// Update button color and image every 5 seconds
setInterval(updateButtonColorAndImage, 5000);

Here's the modified code to try to get png's to display

// Function to update fan image based on fan state
function updateFanImage(fanState) {
    // Read the image file
    let imageBuffer;
    if (fanState === 'ON') {
        imageBuffer = fs.readFileSync('fan_on.png'); // Path to the image file for 'ON' state
    } else {
        imageBuffer = fs.readFileSync('fan_off.png'); // Path to the image file for 'OFF' state
    }

    // Display the image on the button
    pad.fillImage(9, imageBuffer);
}

And here is the error I get

                        throw new RangeError(`Expected image buffer of length ${NUM_TOTAL_PIXELS*3}, got length ${imageBuffer.length}`);
                        ^

RangeError: Expected image buffer of length 31212, got length 5683
    at Displaypad.fillImage (G:\Documents\Scripts\node_modules\mountain-displaypad\index.js:176:10)
    at updateFanImage (G:\Documents\Scripts\Displaypad\display_pad_async_ESPhome.js:67:9)
    at Object.<anonymous> (G:\Documents\Scripts\Displaypad\display_pad_async_ESPhome.js:91:1)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47

Node.js v20.9.0

I did use ChatGPT heavily to make this so it's probably quite bad. Let me know what you think.
Cheers!

jeluf / mountain-displaypad Goto Github PK