From 11d9b1156f844190eb719301a142a5908e1a990b Mon Sep 17 00:00:00 2001
From: yayunhuang <a29853935@gmail.com>
Date: Wed, 21 Aug 2024 11:01:56 +0800
Subject: [PATCH 1/2] Fix image didn't fill screen area issue

---
 mockup_package/mockup/image_generator.py |   9 ++++++---
 public/mockup.zip                        | Bin 5492 -> 5538 bytes
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/mockup_package/mockup/image_generator.py b/mockup_package/mockup/image_generator.py
index 45f4534..425d5d7 100755
--- a/mockup_package/mockup/image_generator.py
+++ b/mockup_package/mockup/image_generator.py
@@ -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])
             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)
 
@@ -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)
 
diff --git a/public/mockup.zip b/public/mockup.zip
index b87e746dfebdabd90bace16666feea0eaa70d8bd..c3fc509260d8dd9597d3fc1a7baac7d876e9e693 100644
GIT binary patch
delta 2992
zcmY+`c{tQv8wYUvK7^SDWgXkt_g%(rh>$%c$`HNQ7#jI8_AN2lvu{H*S+isrOA?;Q
zO!j064~eWHdi6f<_MH2=|2Wt8oclU|oIgH$5+#x#OEYR3CW_zd$PSVQx(r3z_oI~0
zd!G_a@jC=lFq{`M4FRXSaoB@$I!yC*rIvQOkTxz#f7aKDdehfgPsv6@iNsx?6{U0j
z*O3M-T0t6WDhCMeHlqxn=+KY)-M=R`Io|M{ZDS8VBnYU;P8(syG@t``<{!&t7NbS-
z9EXDrYkneLSp(^Ked|wT#+`Xh;UK{v|Jf2{>|_ZlRzF}R&sRJbl5E!3$E^&wOFa}%
z`Vv`2yFld{$?C!A!QFPc$4yo!RCq0R<=C%ekoVK8>M>xc;z&`pp~U)KsDE&9Fy?fF
zP<R#^^}_Pyt=_<=Zi2}fm(n>Oi!5b%FobheVse+1%BHSJz0`{M<9@4Kxs++E)XwSE
zB!8i`LSZ_%oa<oDcMA)YA;TSa3Hp*#`^Wyu>kcuLup*H}>LH}~hX4XivfbtCs)eKQ
z=Y`iY1nMyWm|aYm4fZBvHpO)Kkfy>-DXZjCg^<#KB__q4!T5<}ATUrRkjcrNgsisd
z`X$%dFRbfo5-8C-$|-FAbD`q+BU9LDNEth2M)b%CoJ(_4+~HM0W_pa_mysJt<-z*Z
z5nW`R66+nQx+kxb%RFWxY%z+80;t`B+ByNQ<P>wjrO@Q?GgFhX(ze6Nc-2S>@XSDJ
z$i!z4r7c^iR<=6jJ5p6R^|aMd^5aNXFLqfi3d}NyG=JM?y*X$NhG)nvgPNbO{`900
zxv(*RX-4Pbyk;CAb(}+X$~CR4Oio$7b*b}-ghRSq<OMo-W@dW*tjT&jpAlSu!F}XS
z-clRj;yd<^o1wWjx0!Z_2b)<V(5lK8y6fJzW85Ri)A{LV07!mxIwZ2QZZD10jKD2h
zx2EYIC#E|)VX^Ks5T$exu{8?3ry2C}%4+@2*mp!JbvivZ_!%$l!kS>*Jj1GdqTgdb
zxFek@yTv$@KOJ5CMOB&C2=x<cml8I@L?obm^x~-#K8Jo*AI`~90aMpV=lQOwf8|F~
zfS#K$x9J+A6`n~=mRvJb<*0^~8Pk2I=lsG>Z*eV>*en9q>|sSc*D)0$dG$-Eb%nI6
z>#*5P1G!sJHJ7zesIdeav$yxf5&?E|@dT)n%LTkjlC^kBN%{qICq9YZk|H=mGJp{c
z4f<2qsiy_w5PD-E6Fs3ipUGCn@oCofgFLPUdzhIa-G<fMF29rw+7DXPyQ}j|oj|G=
z;4tT-kivT~J8$HW*KYUhvWsnWtE^m&4<YtX(=*fdjgfg}6TI`wt{=>6ji0S-0v^8>
za}MUsbHpm+!5pViHvDRFfic5EK;_WFC+Xs0CS_R5@jHI?8R&kWJPhHO9WDImL4cDc
zLI`Oi%4CuTGrunE$wU>8A2hzNXVD0+i*t}hYe3i6V(>9v9p-Xf+MjOPd2`SbHv)g6
zb}x24Y``2IxOGe!_{x-k9>W5@%OGX2%VdpPjC{2bskPrc-KgsEx58L~TOE9ARup6F
z`LP1M`+-*@Z5w+TV{$!Qi?RFJC_w}R$=i0mxD2zB>{XLrn&lasOZ?SgPi)pC6eHzC
zhJ-|X<cIwhKw&ge#1H(eI-Aeo34ARo=papk=&5)0yU{kd3~b3RMV@%+*Q}kKt9Qqy
z1x*jvR`lxA_I`X<;2!WwQhKANxl(QM#w*?qng9jsfM-cq#>JcuNBcu_`*U&IbJOtT
zEq|Vjd)M<#3M6v#s%#>KzX;Q*;EN{mp_yx-b+qi8v-Lz8ZT5KOiBQV&9me3#4qKM)
zPlU!%v3x9QMj-cGoz}QT$_;b_!)bqk_qWmlgVC&)rIQ*F8)|@2J2+8pTDObx(X$O(
z{CrINBeTeW01}JG%FNL2*i|zp(gd0QBmAzfZLEF^Gw<Dh{3?T<;%?QBqO!l9j=Stx
z00twbCxf;O2#hZliZ*>l0Ss0C*cE?7-Yn>Mc10H_I_OrX7*5_b%O2B;mVlyufD3xw
zjrYv8R!>xlQUF1~y|`MtfO)4e`~%6u%{S!D4((T?^aEX4dJBexN47eN*Yd+`;6ml(
zO^XS0*u*dgw7dPzdrhMJdO2Kj<-M1W^vslZw${U0se5#Jm#-D(WH9qH+VAruYR1G`
zPz9=lb6F45kY9uA4A_Kgmc`w)?6dgyvvauK`cYDr$^+8Zm$_TQSgunS9C;<<Zqnv*
z+b9}(H=(Y^+;ujWLq3~tP{@ilhQHi~*^;Ox6(=t4H6<y)9P3PwLSiXl@0y(FtYiUb
zH=<afqK{CeliXlUftK&Cu@AG6wB&V4&K}!plWv;kdMh3`E+@`fNeiN>WFiMis(l$U
z4i-k70+8THAqdEoic_voblZeJ!V+g-QPn*vw9u#xnLCQ7mWgLo>^QAX-do}OxOJc>
zA{%ky@7&7pK!+j|Q<S~2dBKm=lB9k|PbS;kVVzm~Ua%&WQ^nl3IWBEXq|Z(y{dB^@
z+7Bj7z-sCA>U$EaQB#zMm#<NiDr~xAz`>3dXvKn}YBlGRGh(QRCJUApE&r5yT8>{Z
zN*hkyG$TMg&fbnaF!E-xv}bB+g01vRe@^leU%NvH)9_r;lnJF<ywRwHpA%Sl`!M#p
zaq5n?8TVn0eP{UY+0d%2ORtMhr%wdk)f~CIx(n%y8XL7yt;ejri~JfVOI%Or5DTxw
zfN$vVC_~#e>KXR3d$3VsyKig^Vi898R;3?DO>wuqj67!|>h&&x2TaYPnyCUP3=EA^
zqxH0L5ne}EVm_wwT)w{zkQ$p-Eawo>DgJq8t!T{gI^H-zN>Ta*lc3VQwLTNT4>G_O
zm=MapgX8}M@+Jtzq3@q=DW?Wvd%RBpPZTCL|1mP<6Z2zSm6cV}HS-UpNF#FlKkS7L
z6)}D)%jT@@_3j`$)|T{M{P7M^k@3SLzt$k6^%C9B1DnUs2aXUW!QIb)h978}^@tJP
zBy^^r*afV}CT{M21JsbIhR+oTc&jN^2g0McoBWn@m|Qltef`+}D89%m`NCje*vaK)
z&3JUh_TW%3dJEN%v-?w4H(fy)n!hhyNn{D4_jYppEF3|-VglAB#s)rk@8f&NCk~uS
zieG@$&&slQ*k;X$PkQ!F^;lk{6|Ko`B%_-PX<-xNI)m`QmoMvJ$DAiuUe7nDD7)Mj
z9XVZ2bUsa%sk*0136W0Cs#pcS-oCG0cx{@;TYI2+jF9)H!Ug+qiYjlMB}jG_S$Xg(
zxJWhYU|MRu8h4ri!W3duzS`sLl-8#iNxZ~u1%3H57AP!*WDuf0J^FIZKy@TtNOw9d
zTv)Yb%};3ZQ9NXIrudi}a#{5@aXlJUq(r2&|Ayc+gxvV3rC06}Yy%v3x*Rq4=BtuU
zuJz<>uk+qqZ|v%trO=E)i)45BLCCRCsak8#>OQ##8FPZaq{~{`(DrgY=~W?x3Z7r~
zKu6m_WhV0(^skF7YKj^5yvC@1h`jit(#JGU8R3!hsYgR=Q=TWJ@@QZ(QyokaXKPvA
z$D;~Es~2=V!>{KzECOh5tKqt{MbR@hxsxu$`FG>AspH`Ff6*ZmgOu!8K4{ka{#;|G
z<%y;7L3yjGau%l|NN{vBEA(!sP4c*%VrlM+qegqp$}3w$T=RZtEQ#LxCN)xqv}zjK
z?PQR3^$EM0B9sEp=Qo$za&c{Is$mSX$h57ayITxuBF;^P$rPL^$@!fymeq3C?(ck^
zw=|<?z<mWWea_i?6Gm~4TuLek^?wbFJK~gp{0G5*W&b8HP7SOI{mZ~TsQ*vSHH?b|
zD?$Fv;lE`_+<UN+&|fV6`>k^xJO1w-I1z|E-+!cRX+}%;o8+|T^?;Isf(!h6_fM|f
Bgm(Y{

delta 2945
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
G&He?43~yop


From 84dc9165cdd17e8184011f050076b497575e401c Mon Sep 17 00:00:00 2001
From: yayunhuang <a29853935@gmail.com>
Date: Wed, 21 Aug 2024 17:18:31 +0800
Subject: [PATCH 2/2] Add docs to explain why add padding when generating
 mockup

---
 docs/generate_mockup.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 docs/generate_mockup.md

diff --git a/docs/generate_mockup.md b/docs/generate_mockup.md
new file mode 100644
index 0000000..c85ab6f
--- /dev/null
+++ b/docs/generate_mockup.md
@@ -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)