frameit doesn't support iPhone 14 Pro screen size

[futuretap]

New Issue Checklist

• [x ] Updated fastlane to the latest version
• [x ] I read the Contribution Guidelines
• [x ] I read docs.fastlane.tools
• [x ] I searched for existing GitHub issues

Issue Description

An error is shown: Unsupported screen size [1290, 2796] for path

Command executed

fastlane frameit

env

✅ fastlane environment ✅

Stack

Key	Value
OS	12.6
Ruby	3.0.2
Bundler?	false
Git	git version 2.37.0 (Apple Git-136)
Installation Source	~/.rbenv/versions/3.0.2/bin/fastlane
Host	macOS 12.6 (21G115)
Ruby Lib Dir	~/.rbenv/versions/3.0.2/lib
OpenSSL Version	OpenSSL 1.1.1l 24 Aug 2021
Is contained	false
Is homebrew	false
Is installed via Fabric.app	false
Xcode Path	/Applications/Xcode-14.0.1-Release.Candidate.app/Contents/Developer/
Xcode Version	14.0.1
Swift Version	5.7

System Locale

Variable	Value
LANG	de_DE.UTF-8	✅
LC_ALL
LANGUAGE

fastlane files:

No Fastfile found

No Appfile found

fastlane gems

Gem	Version	Update-Status
fastlane	2.210.1	✅ Up-To-Date

Loaded fastlane plugins:

No plugins Loaded

Loaded gems

Gem	Version
did_you_mean	1.5.0
atomos	0.1.3
rexml	3.2.5
CFPropertyList	3.0.5
claide	1.1.0
colored2	3.1.2
nanaimo	0.3.0
xcodeproj	1.21.0
rouge	2.0.7
xcpretty	0.3.0
terminal-notifier	2.0.0
unicode-display_width	1.8.0
terminal-table	1.8.0
plist	3.6.0
public_suffix	4.0.7
addressable	2.8.0
multipart-post	2.0.0
word_wrap	1.0.0
optparse	0.1.1
tty-screen	0.8.1
tty-cursor	0.7.1
tty-spinner	0.9.3
artifactory	3.0.15
babosa	1.0.4
colored	1.2
highline	2.0.3
commander	4.6.0
excon	0.91.0
faraday-em_http	1.0.0
faraday-em_synchrony	1.0.0
faraday-excon	1.1.0
faraday-httpclient	1.0.1
faraday-multipart	1.0.3
faraday-net_http	1.0.1
faraday-net_http_persistent	1.2.0
faraday-patron	1.0.0
faraday-rack	1.0.0
faraday-retry	1.0.3
ruby2_keywords	0.0.5
faraday	1.9.3
unf_ext	0.0.8
unf	0.1.4
domain_name	0.5.20190701
http-cookie	1.0.4
faraday-cookie_jar	0.0.7
faraday_middleware	1.2.0
fastimage	2.2.6
gh_inspector	1.1.3
json	2.5.1
mini_magick	4.11.0
naturally	2.2.1
rubyzip	2.3.2
security	0.1.3
xcpretty-travis-formatter	1.0.1
dotenv	2.7.6
bundler	2.2.22
simctl	1.6.8
jwt	2.5.0
uber	0.1.0
declarative	0.0.20
trailblazer-option	0.1.2
representable	3.1.1
retriable	3.1.2
mini_mime	1.1.2
memoist	0.16.2
multi_json	1.15.0
os	1.1.4
signet	0.16.0
googleauth	1.1.0
httpclient	2.8.3
webrick	1.7.0
google-apis-core	0.4.2
google-apis-playcustomapp_v1	0.7.0
google-apis-androidpublisher_v3	0.16.0
google-cloud-env	1.5.0
google-cloud-errors	1.2.0
google-cloud-core	1.6.0
google-apis-iamcredentials_v1	0.10.0
google-apis-storage_v1	0.11.0
rake	13.0.3
digest-crc	0.6.4
google-cloud-storage	1.36.0
emoji_regex	3.2.3
jmespath	1.5.0
aws-partitions	1.553.0
aws-eventstream	1.2.0
aws-sigv4	1.4.0
aws-sdk-core	3.126.0
aws-sdk-kms	1.54.0
aws-sdk-s3	1.112.0
tsort	0.1.0
uri	0.10.1
set	1.0.1
forwardable	1.3.2
logger	1.4.3
pathname	0.1.0
shellwords	0.1.0
cgi	0.2.0
date	3.1.0
timeout	0.1.1
stringio	3.0.0
securerandom	0.1.0
openssl	2.2.0
io-nonblock	0.1.0
ipaddr	1.2.2
io-wait	0.1.0
zlib	1.1.0
resolv	0.2.0
digest	3.0.0
time	0.1.0
open-uri	0.1.0
mutex_m	0.1.1
net-protocol	0.1.0
ostruct	0.3.1
english	0.7.1
erb	2.2.0
strscan	3.0.0
abbrev	0.1.0
io-console	0.5.7
tempfile	0.1.1
delegate	0.2.0
fileutils	1.5.0
tmpdir	0.1.2
base64	0.1.0
singleton	0.1.1
net-http	0.1.1
open3	0.1.1
nkf	0.1.0
prettyprint	0.1.0
pp	0.1.0
find	0.1.0
yaml	0.1.1
psych	3.3.0

generated on: 2022-09-26

[fastlane-bot]

It seems like you have not included the output of fastlane env To make it easier for us help you resolve this issue, please update the issue to include the output of fastlane env :+1:

[kmentrobin]

Hi I have own fork where I made it all work if you want I can create PR but it doesn't use Facebook Device because it is not yet supported but my own. I have support for iPhone 14 Pro and iPhone 14 Pro Max with device frames in Deep purple, Golf, black and silver. But my designs of iPhone 14 Pro and iPhone 14 Pro are slightly modified because the screen doesn't fit there :D Thanks apple.

So I well make the sides bigger to fit the screenshot in next iteration I will play around with adding corner radius to the screen shot to all rounded devices.

But it looks good I think

[futuretap]

Yeah, I noticed the big corner radius that lets the rectangular screen overlap the device bezel. I'd love to test your solution once you've figured out the masking.

[kmentrobin]

Yeah right now I went with the bigger bezel :D Making the corner radius would be bit harder for me and I have some more stuff to do now :D So it will be maybe next week or so :) So if you need it and you are okay with bigger bezels let me know and I will make the Prs and updates :)

[robinjanke]

Hey @kmentrobin i just saw your Fork and would also be happy if you can create a PR. Are you using the iPhone 13 Pro Max Device for the iPhone 14 Pro Max Frame in your current fork if i get this right?

[kmentrobin]

HI @robinjanke what a lovely name you got :D . Here is the code to support the device https://github.com/kmentrobin/fastlane/commit/fd93c119bf03068ee86db63834d7edd6f6548a20 But it also need to update frames here https://github.com/fastlane/frameit-frames

Im using iPhone 14 Pro Max frame which I found somewhere on Figma and have to make the bezels thicker a bit to fit the screen. But it is own frame you can take a look on it here

[robinjanke]

@kmentrobin Thanks you very much for your fast response, i like your name too! :D

Right now i just updated fastlane with this line in my gemfile to your version: gem 'fastlane', :git => 'https://github.com/kmentrobin/fastlane.git', :ref => '950bb820237d52e15690408083e328f739ac0ef3' But i just got stuck with the same error message as before. Would it be enough to just download the frame that you sent and put it into the right folder or do i need to do something else like editing the offsets.json file?

[kmentrobin]

@robinjanke Yeah it is quite tricky right :D Well for now you have to put the frame to /Users/username/.fastlane/frameit/letest And add following to the offsets.json to the end. And you should be golden :D

"iPhone 14 Pro Max": { "offset": "+81+68", "width": 1290 }, "iPhone 14 Pro Max Deep Purple": { "offset": "+81+68", "width": 1290 }

[fastlane-bot]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.

Please make sure to update to the latest fastlane version and check if that solves the issue. Let us know if that works for you by adding a comment :+1:

Friendly reminder: contributions are always welcome! Check out CONTRIBUTING.md for more information on how to help with fastlane and feel free to tackle this issue yourself :muscle:

This issue will be auto-closed if there is no reply within 1 month.

[yonicsurny]

Still no iPhone 14 Pro or iPhone 14 Pro Max on the Meta website. Is there any other source to use?

[robinjanke]

@yonicsurny I got this fixed by using my own offets.json and by downloading these files into the correct directory like @kmentrobin mentioned and it seems to work well. For the iPhone 14 Screenshots i just use an online image resize tool because the dimension of these devices is (nearly) the same

[robinjanke]

I just created a pr here with the files from @kmentrobin https://github.com/fastlane/frameit-frames/pull/30

You can use my fork or wait for the pr to get approved

[BPHvZ]

Apple also provides bezels in their design resources. Download: iPhone 14 device bezels.

@kmentrobin maybe you could add the other device colours to your PR?

[kmentrobin]

Actually @robinjanke is making the PR. But I think it make much more sense to use Apple frames as source of truth for upcoming frames 🤔 The main issue there is borders of the iPhone 14 and fitting there rectangle 😅 still try to find time to change fastlane to add corner radius to images, but probably during Christmas 🎄 as small present for me 😂

[mindthefrog]

Thanks @kmentrobin @guidev @robinjanke.

Have people had a discussion/agreement on a good way to round the screenshot corners on the new thinner rounded bezel iPhones? Not a fastlane or IM expert but first thought would be to add an optional "rounded corner" attribute in the offsets file for these devices and convert screenshots prior to dropping them into the device frame using one of the methods detailed there: http://www.imagemagick.org/Usage/thumbnails/#rounded

Thoughts?

[futuretap]

Sounds good to me!

[guidev]

@mindthefrog I've solved it in https://github.com/fastlane/fastlane/pull/20917 using the frame as a mask, that way the screenshot will be clipped automatically and not "bleed" outside of the frame.

https://github.com/fastlane/fastlane/blob/e8e617cf19d2e27b8d493ee80d30b29b877b94e3/frameit/lib/frameit/editor.rb#L112

[mindthefrog]

@mindthefrog I've solved it in #20917 using the frame as a mask, that way the screenshot will be clipped automatically and not "bleed" outside of the frame.

https://github.com/fastlane/fastlane/blob/e8e617cf19d2e27b8d493ee80d30b29b877b94e3/frameit/lib/frameit/editor.rb#L112

Thanks @guidev. I had seen and tried your change before posting. I am probably doing something wrong but that change does not work for me. Not only are the corners still visible beyond the frame, the screen itself is another copy of the frame with a black screen. This is on the most recent macOS.

Can masking the screenshot with the frame really work? The frames seem to be transparent both inside and outside the bezel. I am probably missing something but it's not working for me?

My solution for now is to run a script that rounds the iPhone 14 screenshot corners before I run frameit.

[ConfusedVorlon]

iPhone 14 pro Max is now available on the Meta site

https://design.facebook.com/toolsandresources/devices/

[ConfusedVorlon]

for anyone hacking at this - I did the following

1. downloaded new frames from this pull request (I just replaced the latest folder on my HD) https://github.com/fastlane/frameit-frames/pull/31

2. added the following line to device_types.rb in the fastlane gem IPHONE_14_PRO_MAX ||= Frameit::Device.new("iphone14-pro-max", "Apple iPhone 14 Pro Max", 11, [[1290, 2796], [2796, 1290]], 458, Color::BLACK, Platform::IOS)

there is a very slight box artefact around the corners of the frame. Probably because I haven't done this quite correctly. I'm ok to live with that for now...

[Danbana]

It's so frustrating that this always happens for the latest device. Fixing frameit is a part of the workflow. Anyhow it still saves time. Perhaps I should be more frustrated with Apple changing the size and adding more required devices.

A great item to add to the docs for frameit/snapshot would be the latest simulators to snap on for the latest device screenshots requirements.

Now Apple is requiring the iPhone 14 Pro Max (for 6.7" Display requirement), iPhone 8 Plus (for 5.5", not a default simulator), iPad Pro (6th generation), and iPad Pro (2nd Generation, not a default simulator).

Which I guess means I'll just not be updating the screenshots for the devices which don't have default simulators anymore.

Anyhow I have 25 languages supported in my app, The Photo Investigator and I appreciate this project. I guess it's time to nut up, fix it, and submit a PR for everyone else; although the availability of the frames seems to be a main sticking point every year for the latest device.

[Danbana]

OK I got it working using a combo of the other's directions above:

1 downloaded new frames from this pull request (my frames are in ~/.frameit/devices_frames_2/latest) https://github.com/fastlane/frameit-frames/pull/31

2 in that same folder ~/.frameit/devices_frames_2/latest edit offsets.rb by adding "iPhone 14 Pro Max": { "offset": "+81+68", "width": 1290 }, "iPhone 14 Pro Max Black": { "offset": "+81+68", "width": 1290 }

3 added the following line to device_types.rb in the fastlane gem IPHONE_14_PRO_MAX ||= Frameit::Device.new("iphone14-pro-max", "Apple iPhone 14 Pro Max", 11, [[1290, 2796], [2796, 1290]], 458, Color::BLACK, Platform::IOS)

Not sure if (3) was necessary, as I had to do (2) after that anyway to get things working. but since it was in the same directory as the step 1 I ordered them like such.

[fith]

^I'm having trouble even with that method. Things aren't sizing correctly.

But this is also a bump to say the Facebook library is updated. All the colors and styles of iPhone 14 / Plus / Pro / Max.

https://design.facebook.com/toolsandresources/devices/

[RodrigoExtremoTabares]

I'm quite new to fastlane and the lack iPhone 14 Pro Max support is giving me trouble. Can anyone give some instructions on how the hack works? As the change of offset.json doesn't work for me

[fith]

Yup, no problem. Fastlane can be annoyingly delicate, but it is still always worth the effort.

This mostly deals with the command fastlane frameit which takes the raw screenshots and adds devices frames, a background image, and some localized text. Docs: https://docs.fastlane.tools/actions/frameit/

I forgot to include some steps. Sorry about that.

Overview:

1. patching in the missing iphone 14 frames
2. custom mask script i wrote to deal with iphone 14 corners
3. run frameit
4. deliver - upload the screenshots

1. patching in the missing iphone 14 frames fastlane frameit download_frames will download a repository of device frames to your ~/.fastlane/frameit folder. The frames are their own git repo ( https://github.com/fastlane/frameit-frames ) that pull from a Facebook library ( https://design.facebook.com/toolsandresources/devices/ ) The frameit-frames repo is just out of date, but there's a PR with the newer frames. So just go in to your ~/.fastlane/frameit folder and overwrite your frames folder with a clone at this hash: https://github.com/fastlane/frameit-frames/pull/31

Now you'll have iPhone 14 frames.

2. custom mask script i wrote to deal with iphone 14 corners There is a problem with the iPhone 14 frames… 😅 The corners of the screen are so rounded that the 90° corner of the screenshot sticks outside the device frame. You can see a conversation about it here: https://github.com/fastlane/fastlane/issues/20703#issuecomment-1271173819

I didn't find a solution to that online, so I made a mask image, and wrote a Bash ImageMagick script ( cropcorners14promax.sh ) that applies the mask to all the screenshots BEFORE you run frameit. This should be pretty easy to edit to support regular 14 Pro (non-Max). You can add more device names in the Snapfile and re-run fastlane snapshot to generate more. You may have to look up the specific names it's looking for. (There's a big array of them somewhere in the fastlane ruby source code.)

run runcrop14promax.sh in the fastlane folder.

• runcrop14promax.sh finds all the files with "14 Pro Max"
• it sends each filename to to cropcorners14promax.sh
• cropcorners14promax.sh applies iphone14promax-mask.png to the alpha channel of the screenshot file

Then you run

3. Now you should be able to run fastlane frameit

Watch the files it's generating. If it's doing something weird, cancel it and make an adjustment. Once you have it set up and working you probably won't have to change anything with the toolchain until a new device size is released.

The downside to that is that it's hard to remember how it works when it breaks after 6 months. I highly suggest writing your own notes about this, your personal set up, links to the docs and git repos, and what set of commands works for you.

4. deliver

for uploading all the screenshots you use fastlane deliver

There's a .Deliverfile file that has some comments and options (some are commented out). The options are pretty self explanatory, but it's worth reading the docs too. http://docs.fastlane.tools/actions/deliver/#deliver

This will update every language with whatever is in the metadata folder for each language (i.e. privacy.txt, description.txt), and the localized screenshots.

It can also upload the build for you… but I never trusted it to do that. I did that manually via XCode -> Build -> Archive -> Upload. Sometimes it takes a few minutes for the build to show up in App Store Connect. I wait until it does, then I run fastlane deliver

That's a lot… and written quickly. But I think that's all the missing parts. Sorry I forgot the iPhone 14 support part.

Let me know if you get it working, or have more questions.

Thanks, Kevin

On Wed, May 31, 2023 at 1:48 PM Rodrigo Extremo Tabarés < @.***> wrote:

I'm quite new to fastlane and the lack iPhone 14 Pro Max support is giving me trouble. Can anyone give some instructions on how the hack works? As the change of offset.json doesn't work for me

— Reply to this email directly, view it on GitHub https://github.com/fastlane/fastlane/issues/20703#issuecomment-1570930911, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAY5MKBVKUA5XP2CTA23RTXI6VA7ANCNFSM6AAAAAAQV56NXA . You are receiving this because you commented.Message ID: @.***>

[RodrigoExtremoTabares]

My problem is that even with these steps, I keep getting the error message: [✔] 🚀 [13:17:37]: Using device frames version 'latest' [13:17:37]: Unsupported screen size [1290, 2796] for path './Simulator Screenshot - iPhone 14 Plus -SPLASH_framed_resized.png'

I have modified the offset.json, added the images but still getting the error. What am I missing?

[yonicsurny]

You forgot this step:

• Add the following line to device_types.rb in the fastlane gem

IPHONE_14_PRO_MAX ||= Frameit::Device.new("iphone14-pro-max", "Apple iPhone 14 Pro Max", 11, [[1290, 2796], [2796, 1290]], 458, Color::BLACK, Platform::IOS)

[yonicsurny]

Update device_types.rb

• Find the location of the lib

  fastlane frameit --version
  

  # example output
  /Users/me/.gem/ruby/2.6.0/gems/fastlane-2.212.1/bin/fastlane
  

• In Finder navigate to /Users/me/.gem/ruby/2.6.0/gems/fastlane-2.212.1/frameit/lib/frameit and open device_types.rb
• Add the following

  IPHONE_14_PRO ||= Frameit::Device.new("iphone14-pro", "Apple iPhone 14 Pro", 11, [[1179, 2556], [2556, 1179]], 458, Color::BLACK, Platform::IOS)
  IPHONE_14_PRO_MAX ||= Frameit::Device.new("iphone14-pro-max", "Apple iPhone 14 Pro Max", 11, [[1290, 2796], [2796, 1290]], 458, Color::BLACK, Platform::IOS)
  

[yonicsurny]

You can also have a look at https://github.com/joshluongo/frameme, which I'm seriously considering to use instead of frameit

[RodrigoExtremoTabares]

It was the device_types change that I was missing, great answer @yonicsurny as I was quite lost with Ruby. Thank you!