New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

moqq

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

moqq

Create device mockups from URLs or screenshots.

1.0.3
latest
npm
Version published
Maintainers
1
Created
Source

moqq - minimalistic device mockups.

This package utilizes Jimp to compose device mockups. Currently only mockups with a pc are supported.

In action: andreev.work/projects

JS Docs

Classes
Moqq

Interfacing class

Typedefs
ImageInput : path | Jimp | ArrayBuffer

Moqq

Interfacing class

moqq.up(options) ⇒ string | Jimp

Composes a Jimp image consisting of devices with complementary screenshots as declared in options. Returns path to that image or the Jimp instance.

Kind: instance method of Moqq
Returns: string | Jimp - Path to resulting image or resulting Jimp instance

ParamTypeDefaultDescription
optionsobject
options.screenshotsobject.<string, ImageInput>object with deviceNames as keys and paths, ArrayBuffers or Jimps as values.
[options.resPath]stringpath to resulting image (relative to caller location).
[options.w]number1280width of resulting image.
[options.h]number720height of resulting image.
[options.returnJimp]booleanfalseIf true, a Jimp instance is returned. Otherwise image is saved to resPath.
[options.background]string | number"0x00000000"Background color as css string or hex number (0xrrggbbaa).
[options.statusBar]numberWhat style status bar to add (moqq.STATUSBAR_LIGHT or moqq.STATUSBAR_DARK). Currently only vertical iPhone X is supported.
[options.paddingX]number0.8Horizontal padding relative to image width (0.0 - 1.0)
[options.paddingY]number0.8Vertical padding relative to image height (0.0 - 1.0)

JS Usage
const moqq = new (require('moqq'))();
moqq.up({
  screenshots: {
    pc: 'path/to/pc.png',
    iphone_x: 'path/to/iphone_x.png'
  },
  resPath: 'path/to/result.png',
  w: 800,
  h: 600,
  statusBar: moqq.STATUSBAR_LIGHT,
  background: 'white'
}).then((fPath) => {
  console.log(fPath);
);

CLI

moqq-up [options]

Generate mock up from provided screenshots.

Options:
  --version         Show version number                                [boolean]
  --pc              Provide screenshot for PC.                          [string]
  --iphone_x        Provide screenshot for iPhone X.                    [string]
  --iphone_6/7/8    Provide screenshot for iPhone 6/7/8.                [string]
  --ipad            Provide screenshot for iPad.                        [string]
  -w, --width       Width of resulting image.           [number] [default: 1280]
  -h, --height      Height of resulting image.           [number] [default: 720]
  -b, --background  Background of resulting image as a css color string.
                                               [string] [default: "transparent"]
  -s, --statusbar   Style of status bar to add (none/light/dark). Currently only
                    supported for vertical iPhone X.  [string] [default: "none"]
  -o, --output      File to write resulting image to.
                                             [string] [default: "./mock-up.png"]
  --help            Show help                                          [boolean
CLI Usage:

Take a screenshot of your website using Chrome DevTools for all devices you need (choose device, Shift+Ctrl+P, type "Capture Screenshot"). Then feed them to the cli:

moqq-up --pc pc-screenshot.png --iphone_x mobile-screenshot.png -w 800 -h 600 -b transparent -o result.png

Keywords

mock

FAQs

Package last updated on 05 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts