Skip to content

Commit

Permalink
[frameit] iPhone 14 Frames (#21727)
Browse files Browse the repository at this point in the history 
* update for iPhone 14

* added support for iPhone 14 lineup

* fix test

* revert unused frame attribute in frame.composite call

* use correct iphone 14 pro frame size

* [Frameit] apply rounded corners before framing

* Update Rakefile

---------

Co-authored-by: Guglielmo Faglioni <guglielmo@gorillatech.io>
Co-authored-by: Sascha Thöni <sascha.thoeni@helsana.ch>
Co-authored-by: Aaron Brager <789577+getaaron@users.noreply.github.com>
  • Loading branch information
@sathoeni @guidev @getaaron
4 people committed Jan 17, 2024
1 parent 2beac83 commit eccd410
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 12 deletions.
30 changes: 21 additions & 9 deletions frameit/frames_generator/Rakefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,12 +176,20 @@ end

# Facebook's device naming is inconsistent. This method fixes the file names.
def sanitize_filename(filename)
perform_ipad_renaming(filename
.gsub('Grey', 'Gray') # some Apple devices have "Grey" instead of "Gray" color -> unify
.gsub(' - Portrait', '') # iPads Pro include Portrait and Landscape - we just need Portrait; Landscape filtered via DEVICES_TO_SKIP
.gsub(' - ', ' ') # Google Pixel device names are separated from their colors by a dash -> remove
.gsub('Note10', 'Note 10') # Samsung Galaxy Note 10 is missing a space in "Note10"
.gsub('Mi Mix Alpha Front', 'Mi Mix Alpha')) # Xiaomi Mi Mix Alpha contains the words "Front", "Back" and "Side" => back and side are filtered via DEVICES_TO_SKIP, "Front" removed from the name here
renamed = filename
.gsub('Grey', 'Gray') # some Apple devices have "Grey" instead of "Gray" color -> unify
.gsub('Golden', 'Gold') # some Apple devices have "Golden" instead of "Gold" color -> unify
.gsub('(PRODUCT)Red', 'Red') # some Apple devices have "(Product)Red" instead of "Red" -> unify
.gsub('(PRODUCT)RED', 'Red') # some Apple devices have "(Product)Red" instead of "Red" -> unify
.gsub('Space Black', 'Black') # "iPhone 14 Pro and Pro Max use "Space Black" instead of "Black" -> unify
.gsub('Deep Purple', 'Purple') # "iPhone 14 Pro and Pro Max use "Deep Purple" instead of "Purple" -> unify
.gsub(' - Portrait', '') # iPads Pro include Portrait and Landscape - we just need Portrait; Landscape filtered via DEVICES_TO_SKIP
.gsub(' - ', ' ') # Google Pixel device names are separated from their colors by a dash -> remove
.gsub(' – ', ' ') # some Apple devices are separated from their colors by an en dash -> remove
.gsub(' — ', ' ') # some Apple devices are separated from their colors by an em dash -> remove
.gsub('Note10', 'Note 10') # Samsung Galaxy Note 10 is missing a space in "Note10"
.gsub('Mi Mix Alpha Front', 'Mi Mix Alpha')
perform_ipad_renaming(renamed) # Xiaomi Mi Mix Alpha contains the words "Front", "Back" and "Side" => back and side are filtered via DEVICES_TO_SKIP, "Front" removed from the name here
end

# Facebook doesn't include versions in iPad files - this function makes sure the correct versions are added
Expand Down Expand Up @@ -262,9 +270,13 @@ def measure_slot(path)
end

def sanitize_device_name(filename)
basename = File.basename(filename, File.extname(filename))
basename = basename.gsub("Apple", "")
basename = basename.gsub("-", " ")
basename = File
.basename(filename, File.extname(filename))
.gsub("Apple", "")
.gsub("-", " ")
.gsub(' - ', ' ') # Google Pixel device names are separated from their colors by a dash -> remove
.gsub(' – ', ' ') # some Apple devices are separated from their colors by this weird dash -> remove
.gsub(' — ', ' ') # some Apple devices are separated from their colors by this weird dash -> remove

# Directory is named "Nexus 5X" but file named "Nexus 5x"
# Need to rename to "Nexus 5X"
Expand Down
4 changes: 4 additions & 0 deletions frameit/lib/frameit/device_types.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,10 @@ module Devices
IPHONE_13_PRO ||= Frameit::Device.new("iphone-13-pro", "Apple iPhone 13 Pro", 11, [[1170, 2532], [2532, 1170]], 460, Color::GRAPHITE, Platform::IOS)
IPHONE_13_PRO_MAX ||= Frameit::Device.new("iphone13-pro-max", "Apple iPhone 13 Pro Max", 11, [[1284, 2778], [2778, 1284]], 458, Color::GRAPHITE, Platform::IOS)
IPHONE_13_MINI ||= Frameit::Device.new("iphone-13-mini", "Apple iPhone 13 Mini", 11, [[1080, 2340], [2340, 1080]], 476, Color::MIDNIGHT, Platform::IOS)
IPHONE_14 ||= Frameit::Device.new("iphone-14", "Apple iPhone 14", 12, [[1170, 2532], [2532, 1170]], 460, Color::MIDNIGHT, Platform::IOS)
IPHONE_14_PLUS ||= Frameit::Device.new("iphone-14-plus", "Apple iPhone 14 Plus", 12, [[1284, 2778], [2778, 1284]], 458, Color::MIDNIGHT, Platform::IOS)
IPHONE_14_PRO ||= Frameit::Device.new("iphone-14-pro", "Apple iPhone 14 Pro", 12, [[1178, 2556], [2556, 1178]], 460, Color::PURPLE, Platform::IOS)
IPHONE_14_PRO_MAX ||= Frameit::Device.new("iphone14-pro-max", "Apple iPhone 14 Pro Max", 12, [[1290, 2796], [2796, 1290]], 458, Color::PURPLE, Platform::IOS)
IPAD_10_2 ||= Frameit::Device.new("ipad-10-2", "Apple iPad 10.2", 1, [[1620, 2160], [2160, 1620]], 264, Color::SPACE_GRAY, Platform::IOS)
IPAD_AIR_2 ||= Frameit::Device.new("ipad-air-2", "Apple iPad Air 2", 1, [[1536, 2048], [2048, 1536]], 264, Color::SPACE_GRAY, Platform::IOS, Deliver::AppScreenshot::ScreenSize::IOS_IPAD)
IPAD_AIR_2019 ||= Frameit::Device.new("ipad-air-2019", "Apple iPad Air (2019)", 2, [[1668, 2224], [2224, 1668]], 265, Color::SPACE_GRAY, Platform::IOS)
Expand Down
20 changes: 20 additions & 0 deletions frameit/lib/frameit/editor.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,26 @@ def put_into_frame
end
end

# Apply rounded corners for all iPhone 14 devices
if screenshot.device.id.to_s.include?("iphone-14") || screenshot.device.id.to_s.include?("iphone14")

maskData = MiniMagick::Tool::Convert.new do |img|
img.size("#{screenshot.size[0]}x#{screenshot.size[1]}")
img.canvas('none')
img.draw("roundrectangle 0,0,#{screenshot.size[0]},#{screenshot.size[1]},100,100")
img << 'png:-'
end

# Create a mask
mask = MiniMagick::Image.read(maskData)

@image = @image.composite(mask, "png") do |c|
c.channel("A")
c.compose("DstIn")
c.alpha("on")
end
end

@image = frame.composite(image, "png") do |c|
c.compose("DstOver")
c.geometry(offset['offset'])
Expand Down
6 changes: 3 additions & 3 deletions frameit/spec/device_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ def expect_forced_screen_size(value)
expect_screen_size_from_file("Apple iPhone XS-Landscape{2436x1125}.jpg", Platform::IOS).to eq(Devices::IPHONE_XS)
end

it "should detect iPhone 13 in portrait and landscape based on priority" do
expect_screen_size_from_file("screenshot-Portrait{1170x2532}.jpg", Platform::IOS).to eq(Devices::IPHONE_13_PRO)
expect_screen_size_from_file("screenshot-Landscape{2532x1170}.jpg", Platform::IOS).to eq(Devices::IPHONE_13_PRO)
it "should detect iPhone 14 in portrait and landscape based on priority" do
expect_screen_size_from_file("screenshot-Portrait{1170x2532}.jpg", Platform::IOS).to eq(Devices::IPHONE_14)
expect_screen_size_from_file("screenshot-Landscape{2532x1170}.jpg", Platform::IOS).to eq(Devices::IPHONE_14)
end

it "should detect iPhone X instead of iPhone XS because of the file name containing device name" do
Expand Down

0 comments on commit eccd410

Please sign in to comment.