How to override available devices? ==> Adding new screens

[orestesgaolin]

I'd like to use iPhone 6s and some other Android emulator in my tests, but they're commented out in screens.yaml.

When trying to use either emulator called pixel_2 or iPhone 6s I see following error:

Error: no device attached or simulator installed for device 'iPhone 6S' in screenshots.yaml.

Guide:
  Attached devices:
Unhandled exception:
ProcessException: No such file or directory
  Command: emulator -list-avds
#0      _ProcessImpl._runAndWait (dart:io-patch/process_patch.dart:489:7)
#1      _runNonInteractiveProcessSync (dart:io-patch/process_patch.dart:634:18)
#2      Process.runSync (dart:io-patch/process_patch.dart:66:12)
#3      cmd (package:screenshots/src/run.dart:531:26)
#4      getAvdNames (package:screenshots/src/utils.dart:135:10)
#5      Config.generateConfigGuide (package:screenshots/src/config.dart:180:31)
#6      Config.validate (package:screenshots/src/config.dart:133:11)
<asynchronous suspension>
#7      run (package:screenshots/src/run.dart:49:16)
<asynchronous suspension>
#8      main (file:///Users/dominik/.pub-cache/hosted/pub.dartlang.org/screenshots-1.3.0/bin/main.dart:85:9)
<asynchronous suspension>
#9      _startIsolate.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:298:32)
#10     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:171:12)

Is there any way to override screens.yaml or define which simulator should be used explicitly?

[mmcc007]

It's possible to use devices unknown to Screenshots if you disable framing for the device. See https://github.com/mmcc007/screenshots#device-parameters (will add comment to this section to mention this feature)

Make sure the simulator for iPhone 6s and the emulator for pixel_2 are installed and the naming matches the naming in your screenshots.yaml.

Also, it looks like 'emulator' is not in your path. The following command should work from the command line:

emulator -list-avds

Let me know if you get this working

[orestesgaolin]

Thank you for the answer. emulator was not in the PATH indeed.

I'd like to contribute some emulator skins like Google Pixel 3 XL that has its silhouette available on Wikipedia .

Could you please briefly explain how to properly size the image and screens.yaml properties? I tried to implement pixel_3xl on my own, but the image does not look correct:

  6.3inch:
    size: 1440x2960
    resize: 100%
    resources:
      statusbar: resources/android/1440/statusbar.png
      statusbar black: resources/android/1440/statusbar.png
      statusbar white: resources/android/1440/statusbar.png
      navbar: resources/android/1440/navbar_black.png
      frame: resources/android/phones/pixel3xl.png
    offset: +0+0
    destName: phone
    devices:
      - pixel_3_xl

[mmcc007]

Facebook provides frames suitable for upload to stores. You can find the frame for Google Pixel 3 XL here: https://facebook.design/devices

Inserting a flutter screenshot from an android device into a frame requires 3 images specific to the device and the screen size of the device:

1. the frame
2. the navigation bar
3. the status bar

In this case, we have the frame via Facebook. The images for the navigation and status bars have to be created or sourced on web. In the past, I have found navigation and status bars created in Sketch on web. Had to resize some to fit the device screen size and then convert to PNG.

Once all the images are in place, a new screen can be configured in screens.yaml. Then can experiment with parameters in screens.yaml, by using a test or similar, until the screenshot is correct.

Happy to help. Let me know how it goes.

[orestesgaolin]

Then can experiment with parameters in screens.yaml, by using a test or similar, until the screenshot is correct.

Do you have any tick to tweak the size faster than just by reruning the simulator? I'd love to contribute some device frames, but don't want to spend too much time on this particular paramtere.

[mmcc007]

Sure. Can put together a test to run framing.

This requires a sample flutter screenshot from the device/emulator (similar to https://github.com/mmcc007/screenshots/blob/master/test/resources/0.png). If you have a screenshot already post it here.

[orestesgaolin]

Can put together a test to run framing

Should I base my tests on frame_test.dart?

[mmcc007]

Added a new utility for testing framing of new screens:

git clone https://github.com/mmcc007/screenshots.git
cd screenshots
git checkout add_frames
pub run test/resources/frame.dart -s test/resources/screenshot_Nexus_6P.png -d 'Nexus 6P'
or 
dart test/resources/frame.dart -s test/resources/screenshot_Nexus_6P.png -d 'Nexus 6P'

Get new flutter screenshot, add new images to lib/resources, add new screen to lib/resources/screens.yaml. Then run frame.dart to see the result of framing.

[orestesgaolin]

Thanks for the reply!

While running the command i get FileSystemException no matter which one I use. The file screenshot_Nexus_6P.png of course exists.

 ~/Projects/screenshots  [add_frames]:  dart test/resources/frame.dart -s test/resources/screenshot_Nexus_6P.png -d 'Nexus 6P'

Unhandled exception:
FileSystemException: Cannot copy file to '/tmp/frame_test/framed_screenshot.png', path = 'test/resources/screenshot_Nexus_6P.png' (OS Error: No such file or directory, errno = 2)
#0      _File.copy.<anonymous closure> (dart:io/file_impl.dart:336:9)
#1      _RootZone.runUnary (dart:async/zone.dart:1379:54)
#2      _FutureListener.handleValue (dart:async/future_impl.dart:126:18)
#3      Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:639:45)
#4      Future._propagateToListeners (dart:async/future_impl.dart:668:32)
#5      Future._completeWithValue (dart:async/future_impl.dart:483:5)
#6      Future._asyncComplete.<anonymous closure> (dart:async/future_impl.dart:513:7)
#7      _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
#8      _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
#9      _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:115:13)
#10     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:172:5)

[mmcc007]

Added fix. Should work after a git pull.

[orestesgaolin]

Works great! I'll try to submit my Pixel 3 XL config soon™️.