Measure Display View
This is a small utility to let the user measure their display from a credit card.
Install with NPM or Yarn
npm add @quentinroy/measure-display-viewThe library exports an ES module as its default package export, as well as style.css.
Both must be imported in your project for the view to work.
Using a package manager like npm or yarn, it is easier to use the library with a bundler that enables importing css files from you JS modules. For example:
import MeasureDisplayView from "@quentinroy/measure-display-view"
import "@quentinroy/measure-display-view/style.css"Install from sources
Download the repository. All relevant files are in the lib folder. Import index.js as an ES module. Include measure-display-view.css as a stylesheet in your HTML.
API
import MeasureDisplayView, { Directions } from "path/to/lib/index.js"
let mdv = MeasureDisplayView({
// Required: where to mount the view.
node: document.querySelector("#target-node"),
// Optional: Whether vertical or horizontal rulers should be used.
rulersOrientation: Directions.horizontal,
// Optional: function to call when the ratio has changed.
onChange(newPxMmRatio) {},
// Optional: the initial ratio.
ratio: 1,
})
mdv.setRatio(2.1)
console.log("ratio:", mdv.getRatio())
let { width: displayWidth, heigh: displayHeight } = mdv.getDisplayDimensions()
console.log("dimensions:", `${displayWidth} × ${displayHeight}`)
mdv.remove()