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

quirematrix

v1.2.0

Published

An easy to use, dependency-less software to visualize in the browser the layout of quires, using a very intuitive notation system

Downloads

10

Readme

quireMatrix

An easy to use, dependency-less software to visualize in the browser the layout of quires, using a very intuitive notation system.

Demo

A working demo is shipped within the project files (file docs/index.html). Download and open in a web browser to test the software.

If you don't want to run your own copy a freely accessible demo is available on our website at https://paths-erc.github.io/quireMatrix/

Browser compatibility

Your favorite browser is the only software you need to run quireMatrix, which uses the canvas element.

All modern browsers have a good support for the canvas element, but if you want to make it will work on yours, check here.

Usage

The software takes a formatted string describing the first (left) half of a quire and uses it to reconstruct the second half. It then builds the matrix view.

  1. Download from Github

  2. Require the library

<script type="text/javascript" src="quireMatrix.js"></script>

or use a CDN version

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/paths-erc/quireMatrix/quireMatrix.min.js"></script>
  1. Create a new instance
  var m = new Matrix('canvas');

where canvas is the id attribute of the canvas element, eg.

<canvas id="canvas" width="400" height="50"></canvas>
  1. Parse a string
  m.parseString('string', 'second_half');

where string id the string to parse and second_half is the id of the element that will contain the second part of the quire, eg:

<input type="text" id="string">
<span id="second_half"></span>
  1. Or add a listener to an input element to get data from user
  m.observeInput('input', 'second_half');

where input id the id attribute of the input element (it can be a textarea, input, etc.).

  1. Done!

Full example

A full working example can be found in the demo/index.html file. A minimal, working example of both the HTML and JS code needed to get a working environment:

<!-- Input element -->
<input type="text" id="input">

<!-- container of reconstructed second-half data -->
<div id="second_half"></div>

<!-- Canvas element -->
<canvas id="canvas" width="400" height="50"></canvas>

<!-- Include script -->
<script type="text/javascript" src="quireMatrix.js"></script>

<!-- Run script -->
<script type="text/javascript" ></script>
  var m = new Matrix('canvas');
  m.observeInput('input', 'second_half');
</script>

Check also our working demo on GitHub Pages

API

quireMatrix has only three public methods

  • Matrix.clear: clears the canvas
  • Matrix.parseString(val, secondHalfId): parses the notated string passed in val and puts the reconstructed (right) half in right half element passed as id (string) or as jQuery element in secondHalfId.
  • Matrix.observeInput(inputId, secondHalfId): sets an observer on inputId element passed as id (string) or as jQuery element.

Notation system

quireMatrix uses a very simple notation system to describe the first half of a quire, that will be used to infer the second (specular) half structure.

Pages should be separated by a forward slash (/). Each page must be describes by one of the following:

  • 0 (infers on right 1) left: nothing; right: singleton
  • 1 (infers on right 0) left: singleton; right: nothing
  • 0* (infers on right 1*) left: lost singleton (dashed line); right: singleton
  • 1* (infers on right 0*) left: singleton; right: lost singleton (dashed line)
  • 1x* (infers on right 1x*) lost union (dashed line)
  • 0+ (infers on right 1+) left: stub; right: singleton
  • 1+ (infers on right 0+) left: singleton; right: stub
  • 0+* (infers on right 1+*) left: lost stub; right: lost singleton
  • 1+* (infers on right 0+*) left: lost singleton; right: lost stub
  • 1x (infers on right 1x) union, ie. left: singleton; right: singleton
  • 2 (infers on right 0) union on the left side; right: nothing
  • 2* (infers on right 0) lost union on the left side (dashed); right: nothing
  • 3 (infers on right 0) union and singleton on the left side; right: nothing
  • 3* (infers on right 0) lost union and singleton on the left side (dashed); right: nothing
  • 4 (infers on right 0) two union on the left side; right: nothing
  • 4* (infers on right 0) two lost union on the left side (dashed); right: nothing

Notation example

The notation syntax describes the left half of the quire and contains information useful to reconstruct the second part of it. Its if formed by several elements divided by forward slashes (/). Each element describes a leaf/layer and is formed by a number (1, 2, 3 or 4) that indicates the leaf on the left side followed by one or many indicators, that tell more about its conservation, consistency and correspondence to the right side. The available indicators are:

  • x, to be used only with number 1, indicating perfect correspondence on both sides of the quire
  • * indicates that the leaf is not preserved, but that we have decisive clues that it existed
  • +, indicates that on the other side of the leaf only a stub is visible Left (user input): 1x/1*/1/1x/1x/0+/1x* infers on right side: 1x*/1+/1x/1*/1/1x/1x. The inferred right side will have a reversed order if compared to the left half. This is easily explained by considering that the overall descriptions follows a clockwise direction or reading order.

Verbose description:

  • 1 - 1 singleton on left side
  • 1x - 1x binion
  • 1* - 0* binion with right page lost
  • 1+ - 0+ singleton on left side with stub on right side
  • 1x* - 1x* lost binion
  • 1+* - 0+* lost singleton with stub

How to cite

This software is archived in Zenodo. Please cite it by referring the DOI: 10.5281/zenodo.1453362

DOI

License

MIT License. See LICENSE file

Copyright

Copyright (c) 2017 Julian Bogdani, PAThs