c0bra / deviceframe Goto Github PK

View Code? Open in Web Editor NEW

569.0 14.0 32.0 1.31 MB

:iphone: Put device frames around your mobile/web/progressive app screenshots.

License: Other

JavaScript 100.00%

screenshot frame mobile automation ios android

deviceframe's Introduction

Put device frames around your mobile/web/progressive app screenshots.

This tool is in active development. If something seems off, file an issue!

Get it

npm install -g deviceframe

Use it

Pass in filenames, file globs, websites urls, or image urls. In any combination or order.

$ dframe cat.jpg
$ dframe http://github.com
$ dframe http://github.com dog.png https://i.imgur.com/aw2bc01.jpg *.bmp

deviceframe will prompt you for the frames you want to use. You can select multiple frames and search by typing. Once you have selected all the frames you want to use, hit ESC.

The frames will be downloaded from a CDN and cached locally in case you want to re-use them.

If you want to use it non-interactively you can pass frames in with the --frame flag:

$ dframe cat.jpg --frame "iphone 6"
$ dframe cat.jpg --frame "iphone 7 silver" --frame "iphone 5 blue"

You can also use one flag and separate the devices by commas:

$ dframe cat.jpg --frame "iphone 6s, macbook air"

Mobile Apps

Coming Soon

Hybrid Apps

Make a screenshot of an Ionic app locally:

$ ionic serve

In another terminal:

$ dframe --delay 5 http://localhost:8100

Websites

For website URLs, deviceframe will load the page with the aspect ratio and pixel density of selected device(s).

Here's Product Hunt's website on a Macbook Air, iPad, and iPhone:

Devices

Currently 52 unique devices. Run dframe --devices to get a list

166 phone + color combinations (Apple, Google, Samsung, HTC, Motorola)
6 tablets (iPad, Surface, Nexus 9)
9 computers (Apple, Dell, Microsoft)
5 monitors
4 watches (Apple Watch 1+2, Moto 360, Sony SmartWatch 3) either open or closed.

Notes

deviceframe caches frame images in a cache directory using env-paths
Pixel ratio information comes from https://mydevice.io/devices/
iPhone X renders the image below the notch.

Attributions

Logo icon created by Vallone Design from the Noun Project

deviceframe's People

Contributors

Stargazers

Watchers

Forkers

tuananh hbcbh1999 evandroguedes arunabhdas l2js robin7331 dolthead achubutkin popey productinfo juandqt gillestasse aguerot coreymakes f69 aurakomputer

deviceframe's Issues

Ability to add GIFs?

An ability to be able to add device frame around a short GIF demonstrating how to use the app would be great.

Add possibility to scroll

First of all: AWESOME TOOL!

Can you add the feature to scroll x pixels or scroll to #id?

Add flag for saving frames in user config

stuck at download frame.

stuck at here.
(node:42467) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
Downloading frame Apple Macbook Air 11" [shadow] [ ] 50/bps 1% 2.0s

xingjiudeMBP:Downloads xj$ telnet 31.13.97.245 443
Trying 31.13.97.245...
can not getting any response.

visiting the https://www.mydevice.io/devices reports below:

AccessDenied
Access Denied
E6C2C48A1D0E5037

yb3EfAMcLQqILZlHhWqC4dSEX4uDPUey/d6Q72bq7RL2oK4Behi1RwFNlgEqIY3Dt79FaUI4ArY=

while
https://cdn.rawgit.com/c0bra/deviceframe-frames/2.0.1/Computers/Apple%20Macbook%20Pro/15%22/Device/Apple%20Macbook%20Pro%2015%22.png
download fine.

looks like the cdn is crashed, or my network problem.
any idea about this?

Downloading frames is broken

Try using S3. git cdns are directing to localhost

Wrong screen size ?

Hey! What an amazing tool you got here!
I tried it a few times today, and most of the screenshots I've seen are a bit odd.

See, this is the result of our website on an iphone 7+ :
https://puu.sh/z9hAP/00c3ab0bdb.png

And it should render like this:

https://puu.sh/z9hDl/a58003853f.png

Not sure how you can fix it, but I felt like opening an issue was the right thing to do!

README broken

Markdown seems to be not recognized since the latest commit.

When I roll back to the previous commit where the file is named 'README.md' instead of 'README' it works

Invalid callback crash

Whenever I try to generate a framed image, I get the same error:

Downloading frame Apple iPhone 7 Plus Jet Black [                   ] Infinity/bps 1% 0.0s
fs.js:154
    throw new ERR_INVALID_CALLBACK(cb);
    ^
TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
    at makeCallback (fs.js:154:11)
    at Object.unlink (fs.js:1035:14)
    at DuplexWrapper.<anonymous> (/usr/local/lib/node_modules/deviceframe/cli.js:338:43)
    at DuplexWrapper.emit (events.js:209:13)
    at EventEmitter.emit (events.js:209:13)
    at ClientRequest.<anonymous> (/usr/local/lib/node_modules/deviceframe/node_modules/got/index.js:111:7)
    at Object.onceWrapper (events.js:299:26)
    at ClientRequest.emit (events.js:209:13)
    at TLSSocket.socketErrorListener (_http_client.js:406:9)
    at TLSSocket.emit (events.js:209:13)

I've tried with different device frames with no luck...

I'm running the command:

$ dframe iPhone_1.png

Thunderbolt display and other displays are duplicated due to shadow (probably)

Support for horizontal tablets?

Add custom devices

It would be awesome if i could add some custom devices, maybe create a custom json with custom devices and and base64 images.

Licence

I'm working on a project that will be implementing framing like this. The gist is it renders react native apps to images without a simulator.

I wanted to add a <Frame> component so somebody could frame the screenshot, and then use other react native components to annotate it (screenshot titles etc.) You can see a gist here

To do this, it would be really handy to use your frames.json and device-dimensions.json files. However, the GPL license will make it hard for people to use this project. Would it be possible to re-licence this file with a permissive license like MIT?

Add status bar flag to embed compliant status bar over screenshot

提示连接失败

Downloading frame Apple Macbook Pro 15" [ ] 32/bps 1% 3.1s{ RequestError: connect ECONNREFUSED 31.13.86.8:443
at ClientRequest.req.once.err (*/Developer/NodeJS/lib/node_modules/deviceframe/node_modules/got/index.js:111:21)
at Object.onceWrapper (events.js:315:30)
at emitOne (events.js:116:13)
at ClientRequest.emit (events.js:211:7)
at TLSSocket.socketErrorListener (_http_client.js:387:9)
at emitOne (events.js:116:13)
at TLSSocket.emit (events.js:211:7)
at emitErrorNT (internal/streams/destroy.js:64:8)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
name: 'RequestError',
code: 'ECONNREFUSED',
host: 'cdn.rawgit.com',
hostname: 'cdn.rawgit.com',
method: 'GET',
path: '/c0bra/deviceframe-frames/2.0.1/Computers/Apple%20Macbook%20Pro/15%22/Device/Apple%20Macbook%20Pro%2015%22.png',
protocol: 'https:',
url: 'https://cdn.rawgit.com/c0bra/deviceframe-frames/2.0.1/Computers/Apple%20Macbook%20Pro/15%22/Device/Apple%20Macbook%20Pro%2015%22.png' }
(node:4629) [DEP0013] DeprecationWarning: Calling an asynchronous function without callback is deprecated.

Add cli switch to clear cache

If frames get updated and are cached then they'll need to be cleaned out.

Folder name with double quote in path (") causes command to fail

installed today on Windows 10
node v12.18.4
npm 6.14.6

executed command dframe *.png --frame "Apple Macbook Pro"

command fails with following errors :

❯ dframe *.png --frame "Apple Macbook Pro"
Downloading frame Apple Macbook Pro 13" [shadow] [                    ] Infinity/bps 1% 0.0s
× Error: EINVAL: invalid argument, mkdir 'C:\Users\antho\AppData\Local\deviceframe-nodejs\Cache\frames\Computers\Apple Macbook Pro\13"'

❯ dframe *.png --frame "Dell XPS 15"
Downloading frame Dell XPS 15" [shadow] [                    ] Infinity/bps 1% 0.0sevents.js:292
      throw er; // Unhandled 'error' event
      ^

Error: ENOENT: no such file or directory, open 'C:\Users\antho\AppData\Local\deviceframe-nodejs\Cache\frames\Computers\Dell XPS 15\Device with shadow\Dell XPS 15".png'
Emitted 'error' event on WriteStream instance at:
    at errorOrDestroy (internal/streams/destroy.js:108:12)
    at WriteStream.onerror (_stream_readable.js:752:7)
    at WriteStream.emit (events.js:315:20)
    at internal/fs/streams.js:361:12
    at FSReqCallback.oncomplete (fs.js:156:23) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Users\\me\\AppData\\Local\\deviceframe-nodejs\\Cache\\frames\\Computers\\Dell XPS 15\\Device with shadow\\Dell XPS 15".png'
}

dframe *.png --frame "Microsoft Surface Book" works as there is no " in filename

Folders on Windows can not contain "

Any way I can workaround this ?

iPhone X notch

First of all very good work on the tool, it's really helpful!

I created a small script for dealing with the images going under the notch and thought it would be nice to share here for anyone facing the same problems. For me it was a deal-breaker because it was hiding content.

The basic concept is to create a new image using ImageMagick and then append it on the top of your screenshot so when the framing time comes your content starts below the notch.

Expanding on that idea maybe a good feature would be to give the ability to the user to select a color to fill the notch space or even recognize the top part of the screenshot colors and generate it automatically.

Add new devices

Like iPhone X or iPad Pro 10.5