fastlane: frameit doesn't support iPhone 14 Pro screen size

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.

@mindthefrog Thank you. Initially your script didn’t want to work. I used your code plus a lot of ChatGPT trial and error until I found a working solution.

Here is a final code if someone is looking for the same script. Create a Makefile, put the code below in it:

process_images:
	find . -not -name '*_framed.png' -name 'iPhone 14*.png' \
	-exec echo rounding {} \; \
	-exec convert {} '(' +clone -alpha extract -draw 'fill black polygon 0,0 0,45 45,0 fill white circle 45,45 45,0' '(' +clone -flip ')' -compose Multiply -composite '(' +clone -flop ')' -compose Multiply -composite ')' -alpha off -compose CopyOpacity -composite {} \;

.PHONY: process_images

Place this Makefile script in the same directory as your images. Then, in terminal, navigate to the directory with your Makefile and run this command: make process_images

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)
  

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 😄 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

Can you please post here the script which rounds the corners of the 14 Pro Max before running frameit? I’ve been trying to make it work for the last 8 hours and my script isn’t doing its job. I don’t know much Ruby, and I find it hard to make it work. I will really appreciate your help.

Yeah no problem.

It’s not very elegant. It’s a simple shell script that rounds the corners using convert which I run before executing frameit. It goes something like this:

#!/bin/zsh

find $1 -not -name *_framed.png -name iPhone\ 14*.png
-exec echo rounding {}
;
-exec convert {}
( +clone -alpha extract
-draw ‘fill black polygon 0,0 0,50 50,0 fill white circle 50,50 50,0’
( +clone -flip ) -compose Multiply -composite
( +clone -flop ) -compose Multiply -composite
) -alpha off -compose CopyOpacity -composite {}
;

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

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: @.***>

^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/

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

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?