https://github.com/quentinroy/measure-display-view
A small view to measure the physical size of a display
https://github.com/quentinroy/measure-display-view
Last synced: 3 months ago
JSON representation
A small view to measure the physical size of a display
- Host: GitHub
- URL: https://github.com/quentinroy/measure-display-view
- Owner: QuentinRoy
- Created: 2020-04-14T19:14:09.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T21:44:12.000Z (almost 2 years ago)
- Last Synced: 2025-01-07T08:27:43.975Z (4 months ago)
- Language: JavaScript
- Size: 357 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Measure Display View
This is a small utility to let the user measure their display from a credit
card.
## Install with NPM or Yarn
```sh
npm add @quentinroy/measure-display-view
```
The 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:
```js
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
```js
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()
```