Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix image didn't fill screen area issue #100

Merged
merged 2 commits into from
Aug 21, 2024
Merged

Fix image didn't fill screen area issue #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11d9b11
Fix image didn't fill screen area issue
YayunHuang Aug 21, 2024
84dc916
Add docs to explain why add padding when generating mockup
YayunHuang Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions docs/generate_mockup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
## Why add padding in `create_fit_coord_image`

Because there will see weird triangle in the corner for some deivces because there is a black area between the phone frame and the display area

![samsung-s24-ultra-right](https://github.com/user-attachments/assets/75936a3a-89b9-4885-874f-dfac4a0d1d0d)

| type | Before | After |
| --------- | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| landscape | ![samsung-s24-ultra-landscape](https://github.com/user-attachments/assets/b3ec7528-20a7-4508-b8c2-f7b6308e59c8) | ![samsung-s24-ultra-landscape](https://github.com/user-attachments/assets/bb508211-edd4-4dc3-b5d1-ed228150c12b) |
| portrait | ![samsung-s24-ultra-portrait](https://github.com/user-attachments/assets/a9f56fec-6524-4983-9d21-2c598e1094a5) | ![samsung-s24-ultra-portrait](https://github.com/user-attachments/assets/96c6046e-be8e-4b36-8a2f-b374ffbe7d79) |
| left | ![samsung-s24-ultra-left](https://github.com/user-attachments/assets/5e90d39b-40ff-44b8-96c1-e8479a17a9f5) | ![samsung-s24-ultra-left](https://github.com/user-attachments/assets/e33e5a43-69d9-494c-acae-dc371abe7406) |
| right | ![samsung-s24-ultra-right](https://github.com/user-attachments/assets/8d258f18-bfd9-47a9-8258-3285f1a01b8a) | ![samsung-s24-ultra-right](https://github.com/user-attachments/assets/15768da2-e0af-442e-9c62-f99510c485e4) |

For the portrait one, the gray area on the top disappear after the update, but I think that should be expected, I guess the `coords` in `device_info.json` is incorrect so the image is pasted slightly to the bottom than expected , but it is not related to the current issue. (not sure if we need to spend some time checking that all model templates and configurations are correct)

## why shift mask position in `create_mockup_image`

After adding padding in `create_fit_coord_image`, we need to shift mask too get correct mockup
![image](https://github.com/user-attachments/assets/c751f8a2-4ff5-4a53-8eff-d58432b2f48a)
9 changes: 6 additions & 3 deletions mockup_package/mockup/image_generator.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,15 +190,16 @@ def create_mockup_image(self, device_path, device_mask_path_prefix, result_path)
tmp = self.target_points[0].copy()
self.target_points[0] = self.target_points[1]
self.target_points[1] = tmp
shifted_points = self.target_points + np.array([PADDING, PADDING])
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: How does adding padding and shifting points not affect the pictures fitting the phone?

e.g. if imageA fits perfectly on a phone (say moto-e) before. after adding padding, does imageA still fits perfectly? If so, how?

Thanks~

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shows why it become incorrect before this update:
image

in #79 we adjusted the position of the pasted image if is_mockup_image_at_front, but forgot to update the other cases

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks yayun! This explanation looks amazing. Can you put it in mockuphone.com/docs? 🙇

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pkong-ds add docs to explain why we add padding when generating mockup ~

mask = np.zeros(basemap.shape[:2], np.uint8)
cv2.polylines(
mask,
pts=[self.target_points],
pts=[shifted_points],
isClosed=True,
color=(255, 0, 0),
thickness=3,
)
cv2.fillPoly(mask, [self.target_points], 255)
cv2.fillPoly(mask, [shifted_points], 255)
mask = cv2.cvtColor(mask, cv2.COLOR_BGR2RGBA)
mask = Image.fromarray(mask)

Expand All @@ -209,7 +210,9 @@ def create_mockup_image(self, device_path, device_mask_path_prefix, result_path)
# If you want to use the mask directly with the first argument of the "paste" function, # noqa: E501
# you need to convert it to the "L" mode and ensure that it has the same size as the first argument. # noqa: E501
device_image.paste(
tmp_result_image, (self.xyset[0], self.xyset[2]), mask.convert("L")
tmp_result_image,
(self.xyset[0] - PADDING, self.xyset[2] - PADDING),
mask.convert("L"),
)
device_image.save(result_path)

Expand Down
Binary file modified public/mockup.zip
View file
Open in desktop
Binary file not shown.
Loading