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

pixelcanvas-scraper

v1.0.6

Published

A pixelcanvas.io scraper

Downloads

12

Readme

Pixelcanvas.io Scraper

This package allows it to scrape a specific area of pixelcanvas' canvas in an easy way without complex parsing.

Have Fun :)

Installation

Just execute npm install pixelcanvas-scraper and require it like this:

const Scraper = require('pixelcanvas-scraper');

Quickstart

Start right away with this example:

const Scraper = require("pixelcanvas-scraper");

const scraper = new Scraper("your-fingerprint", { x: -513, y: 2780, w: 32, h: 32 });

var canvas;

scraper.get().then(canvasMatrix => { // initially get the whole area
  canvas = canvasMatrix;
});

scraper.connectEventSource(); // connect to pixelcanvas
scraper.on("update", data => { 
  console.log("Pixel updated: ", data);
  canvas.update(data.x, data.y, data.color);
});

// The newest data is available in the getColor method
setTimeout(() => {
  console.log(scraper.getColor(-513, 2780));
}, 2000);

For a whole api server look into the index.js and index.html file.

API

new Scraper(fingerprint, area)

Creates a new Scraper object.

Parameters:

  • fingerprint: Your pixelcanvas.io fingerprint. How to aquire a fingerprint
  • area: The area to scrape. Containing the top left corner (x, y) and the width and the height of the area (w, h).

Example:

const area = {
  x: -513,
  y: 2780,
  w: 32,
  h: 32
}
const scraper = new Scraper("fingerprint", area);

scraper.get()

This function will scrape the current state of the area along with some pixels around it.

scraper.getColor(x, y)

This function returns the color of the pixel at the given coordinates. This will always contain the newest version of the color data.

Returns: Color

scraper.connectEventSource()

Connect to the pixelcanvas eventSource. If you don't call this function, the scraper will not receive any events and will not update the pixels.

scraper.on(event, callback)

Lets you listen to events. Available events are:

  • update: This event is triggered, when a pixel in the area has been changed. It will be triggered with the following data:
    • x: The x position of the pixel
    • y: The y position of the pixel
    • color: The color of the pixel
  • connectionReady: This event will fire when the eventSource connects to pixelcanvas. It delivers the event object provided by the EventSource package.
  • connectionError: This event will fire when the eventSource fails to connect to pixelcanvas. It delivers the event object provided by the EventSource package.

Types

PixelMatrix

An object that contains data about pixels and their color.

Functions:

  • getColor(x, y): Returns the color of the pixel at the given coordinates.

Advanced use:

You can access pixels of the matrix manually by accessing the .matrix property. It's a 2-dimensional array where the first index is the x coordinate of a pixel and the second index is the y coordinate of a pixel.

Example:

matrix.matrix[20][10]; // this will return the pixel at the coordinates x = 20 and y = 10

Also you can update a specific pixel by calling the .update(x, y, color) function. This won't work if the pixel is not in the area specified on constructing.

EnumColor

An utility class that deals with the colors needed for pixelcanas

Properties/Methods:

  • EnumColor.ENUM: An array of all colors that are valid for pixelcanvas.
  • EnumColor.index(i): Returns the color that has the same pixelcanvas index like i.

Color

A color object that contains the color information.

Properties:

  • .name: The name of the color
  • .index: The index of the color as it is indexed on pixelcanvas
  • .rgb: The rgb values of the color.

Aquire a Fingerprint

Please look at this.

Terms of Usage

You can use this for free of course. I'd love to see modifications of this.

Just credit me, ShadowLp174, as the author :)