npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@24hr/image-to-nanoleaf

v0.7.0

Published

A simple tool to convert an image to a Nanoleaf Canvas setup. This tool was created so that multiple Nanoleaft controllers can be used together to form a single big canvas of pixels.

Downloads

27

Readme

ImageToNanoleaf

A simple tool to convert an image to a Nanoleaf Canvas setup. This tool was created so that multiple Nanoleaft controllers can be used together to form a single big canvas of pixels.

How it works

  1. Setup your Nanoleaf Canvas

  2. Get all the IPs for each controller

  3. Create tokens for each controller by calling the following url after pressing the on/off button for about 5-7 seconds

    curl -X POST http://yournanoleaf.ip.num.ber:16021/api/v1/new

  4. Write down each IP with each AUTH_TOKEN.

  5. Now create the first part of config object:

const path = require('path');
const imageToNanoleaf = require('image-to-nanoleaf');

const options = {
    controllers: [
        {
            id: 'p1', // Your identifier, can be anything
            token: 'token_for_the_controller_with_the_ip',
            ip: 'yournanoleaf.ip.num.ber',
        },
        {
            id: 'p2',
            token: 'token_for_the_controller_with_the_ip',
            ip: 'yournanoleaf.ip.num.ber2',
        }, 
        {
            id: 'p3',
            token: 'token_for_the_controller_with_the_ip',
            ip: 'yournanoleaf.ip.num.ber2',
        },
    ],
};

(async () => {
     const ids = await imageToNanoleaf.getPanelIds(options);
     console.log(ids);
})();
  1. This will give you a list of all the panels and their ids for each controller.
  2. Now extend your options object with:
const path = require('path');
const imageToNanoleaf = require('image-to-nanoleaf');

const options = {
    controllers: [
        {
            id: 'p1', // Your identifier, can be anything
            token: 'token_for_the_controller_with_the_ip',
            ip: 'yournanoleaf.ip.num.ber',
        },
        {
            id: 'p2',
            token: 'token_for_the_controller_with_the_ip',
            ip: 'yournanoleaf.ip.num.ber2',
        }, 
        {
            id: 'p3',
            token: 'token_for_the_controller_with_the_ip',
            ip: 'yournanoleaf.ip.num.ber2',
        },
    ],
    matrix: `
          p1:8154   p2:61636   p3:22085 
          p1:42476  p2:48715   p3:39187 
          p1:35035  p2:39141   p3:37982 
          p1:3027   p2:8817    p3:29486 
          p1:6111   p2:62103   p3:44457 
    `,

    buffer: false, // if se to true, you need to call the render function after draw

};

(async () => {
     await imageToNanoleaf.draw(options, path.join(__dirname, './tree.png'));
})();

buffering

If you want to send all data with as few requests as possible, typically wehn an image should be draw all at once, set the buffer option to true.

const path = require('path');
const imageToNanoleaf = require('image-to-nanoleaf');

const options = {
    controllers: [
        {
            id: 'p1', // Your identifier, can be anything
            token: 'token_for_the_controller_with_the_ip',
            ip: 'yournanoleaf.ip.num.ber',
        },
        {
            id: 'p2',
            token: 'token_for_the_controller_with_the_ip',
            ip: 'yournanoleaf.ip.num.ber2',
        }, 
        {
            id: 'p3',
            token: 'token_for_the_controller_with_the_ip',
            ip: 'yournanoleaf.ip.num.ber2',
        },
    ],
    matrix: `
          p1:8154   p2:61636   p3:22085 
          p1:42476  p2:48715   p3:39187 
          p1:35035  p2:39141   p3:37982 
          p1:3027   p2:8817    p3:29486 
          p1:6111   p2:62103   p3:44457 
    `,

    buffer: true,

};

(async () => {
     const control = await imageToNanoleaf.draw(options, path.join(__dirname, './tree.png'));
     await control.render();
})();
  1. Behold your beautiful image

The module uses Jimp to process the image, so whatever Jimp can read, this module can read,

In other words, this works as well:

 await imageToNanoleaf.draw(options, 'https://art.pixilart.com/d9a597fded1f8e6.png'); 

or

 await imageToNanoleaf.draw(options, yourCoolBuffer);

Final comment

This has only been tested with Nanoleaf Canvas.

Change Log

  • 2020-10-24 - v0.6.0 : Added a bufffer mode so that you can add all info to all panels but draw them all at the same time (sending just one requesr for each controller)