frameit doesn't support iPhone 14 Pro screen size #20703
Comments
|
It seems like you have not included the output of |
|
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 |
|
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. |
|
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 :) |
|
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? |
|
HI @robinjanke what a lovely name you got :D . 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 |
|
@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: |
|
@robinjanke Yeah it is quite tricky right :D Well for now you have to put the frame to
|
|
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 Friendly reminder: contributions are always welcome! Check out CONTRIBUTING.md for more information on how to help with This issue will be auto-closed if there is no reply within 1 month. |
|
Still no iPhone 14 Pro or iPhone 14 Pro Max on the Meta website. Is there any other source to use? |
|
@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 |
|
I just created a pr here with the files from @kmentrobin You can use my fork or wait for the pr to get approved |
|
Apple also provides bezels in their design resources. @kmentrobin maybe you could add the other device colours to your PR? |
|
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 😂 |
|
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? |
|
Sounds good to me! |
|
@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. fastlane/frameit/lib/frameit/editor.rb Line 112 in e8e617c |
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. |
|
iPhone 14 pro Max is now available on the Meta site |
|
for anyone hacking at this - I did the following
there is a very slight box artefact around the corners of the frame. |
|
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 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. |
|
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) 2 in that same folder ~/.frameit/devices_frames_2/latest edit offsets.rb by adding 3 added the following line to device_types.rb in the fastlane gem 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. |
|
^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. |
|
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 |
|
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:
fastlane/frameit-frames#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:
#20703 (comment)
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
<#20703 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAAY5MKBVKUA5XP2CTA23RTXI6VA7ANCNFSM6AAAAAAQV56NXA>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
|
My problem is that even with these steps, I keep getting the error message: I have modified the offset.json, added the images but still getting the error. What am I missing? |
|
You forgot this step:
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) |
Update
|
|
You can also have a look at https://github.com/joshluongo/frameme, which I'm seriously considering to use instead of frameit |
|
It was the device_types change that I was missing, great answer @yonicsurny as I was quite lost with Ruby. |
|
FrameKit is another alternative: https://github.com/ainame/FrameKit you compose layouts in SwiftUI |
Following @yonicsurny I had to go to /opt/homebrew/Cellar/fastlane/2.216.0/libexec/gems/fastlane-2.216.0/bin/fastlane instead of the location he mentioned since I installed my fast lane using home-brew. And then after adding those two lines, it also required me to run |
|
I tried to combine FrameKit (for laying screenshots out into app store screenshot frames of various sizes, composing screenshots and anything else you want via SwiftUI) and ShotPlan (for running testplan for taking screenshots across devices/platforms). It works for me and here is my synthesis of the two: https://github.com/lake-of-fire/FramedScreenshotsTool but I haven't documented it |
Can you please post here the script which rounds the corners of the 14 Pro Max before running frameit? |
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 |
|
@mindthefrog Here is a final code if someone is looking for the same script. Create a Makefile, put the code below in it: Explanation:
Place this Makefile script in the same directory as your project (where your |
@guidev Tried that locally and on the CI with the latest version of ImageMagick as well with ImageMagick v6.
|
|
After 3 months, I "cooked" another app update, and I needed to make screenshots again. 1. Prepare your screenshots for iPhone 14 Pro Max (Portrait 1290x2796)
3. In Terminal, type this command 6. Clone or download -> Enjoy! |
|
You can also use the fork/branch mentioned here: |
New Issue Checklist
Issue Description
An error is shown:
Unsupported screen size [1290, 2796] for pathCommand executed
fastlane frameitenv
✅ fastlane environment ✅
Stack
System Locale
fastlane files:
No Fastfile found
No Appfile found
fastlane gems
Loaded fastlane plugins:
No plugins Loaded
Loaded gems
generated on: 2022-09-26
The text was updated successfully, but these errors were encountered: