Update app.py

app.py

@@ -354,94 +354,79 @@ def capture_screen(scale=0.6, quality=70) -> str:
 
 def capture_screen_with_grid(scale=0.65, quality=72) -> dict:
     """
-    يلتقط الشاشة ويُعيد صورة مزدوجة:
-    - يسار: صورة نظيفة بدون خطوط
-    - يمين: نفس الصورة مع شبكة احداثيات شفافة وأرقام
-    يُعيد أيضاً: احداثيات الشاشة الحقيقية + موقع الماوس
+    يلتقط الشاشة ويُعيد صورة واحدة فقط مع شبكة إحداثيات واضحة.
+    الإحداثيات في الصورة تطابق إحداثيات الشاشة الحقيقية (1:1 mapping).
+    الخطوط كل 100px — الأرقام تُظهر الـ X/Y الحقيقي للنقر.
     """
     try:
-        from PIL import Image, ImageDraw, ImageFont
+        from PIL import Image, ImageDraw
         img, orig_w, orig_h = capture_screen_raw()
         if img is None:
             return {"data": "", "width": 1920, "height": 1080, "mouse_x": 0, "mouse_y": 0}
 
         mx, my = _get_mouse_pos()
 
-        # حجم كل نصف بعد الـ scale
+        # resize للعرض فقط — الإحداثيات تبقى للشاشة الأصلية
         sw = int(orig_w * scale)
         sh = int(orig_h * scale)
-        clean = img.resize((sw, sh), Image.LANCZOS)
-
-        # نسخة مع grid
-        grid_img = clean.copy()
+        grid_img = img.resize((sw, sh), Image.LANCZOS)
         draw = ImageDraw.Draw(grid_img, "RGBA")
 
-        # شبكة كل 100px على الأصل (مقاسة للـ scale)
-        step_x_orig = 100
-        step_y_orig = 100
-        step_x = int(step_x_orig * scale)
-        step_y = int(step_y_orig * scale)
-
-        grid_color = (255, 255, 255, 35)   # شبكة شفافة جداً
-        label_color = (0, 255, 200, 120)   # أرقام بلون سماوي شفاف
-
-        # خطوط عمودية + أرقام X
-        x_pos = step_x
-        x_orig = step_x_orig
-        while x_pos < sw:
-            draw.line([(x_pos, 0), (x_pos, sh)], fill=grid_color, width=1)
-            draw.text((x_pos + 2, 2), str(x_orig), fill=label_color)
-            x_pos += step_x
-            x_orig += step_x_orig
-
-        # خطوط أفقية + أرقام Y
-        y_pos = step_y
-        y_orig = step_y_orig
-        while y_pos < sh:
-            draw.line([(0, y_pos), (sw, y_pos)], fill=grid_color, width=1)
-            draw.text((2, y_pos + 2), str(y_orig), fill=label_color)
-            y_pos += step_y
-            y_orig += step_y_orig
-
-        # موقع الماوس على الصورة المُقلّصة
-        mouse_sx = int(mx * scale)
-        mouse_sy = int(my * scale)
-        # دائرة حمراء للماوس
-        r_size = 8
-        draw.ellipse(
-            [(mouse_sx - r_size, mouse_sy - r_size), (mouse_sx + r_size, mouse_sy + r_size)],
-            outline=(255, 50, 50, 220), width=2
-        )
-        draw.line([(mouse_sx - 12, mouse_sy), (mouse_sx + 12, mouse_sy)], fill=(255, 50, 50, 180), width=1)
-        draw.line([(mouse_sx, mouse_sy - 12), (mouse_sx, mouse_sy + 12)], fill=(255, 50, 50, 180), width=1)
-
-        # أنشئ صورة مزدوجة جنباً إلى جنب
-        gap = 4
-        combined_w = sw * 2 + gap
-        combined_h = sh
-        combined = Image.new("RGB", (combined_w, combined_h), (15, 15, 15))
-
-        # يسار = نظيفة، يمين = grid
-        combined.paste(clean, (0, 0))
-        combined.paste(grid_img.convert("RGB"), (sw + gap, 0))
-
-        # شريط فاصل
-        draw2 = ImageDraw.Draw(combined)
-        draw2.line([(sw, 0), (sw, sh)], fill=(60, 60, 60), width=gap)
-
-        # تسميات صغيرة في الأعلى
-        draw2.rectangle([(0, 0), (sw, 16)], fill=(0, 0, 0, 180))
-        draw2.text((4, 2), "CLEAN VIEW", fill=(150, 150, 150))
-        draw2.rectangle([(sw + gap, 0), (combined_w, 16)], fill=(0, 0, 0, 180))
-        draw2.text((sw + gap + 4, 2), f"GRID VIEW  mouse:({mx},{my})", fill=(0, 220, 180))
-
-        # معلومات الشاشة في الزاوية السفلية اليمنى
-        info_text = f"Screen: {orig_w}x{orig_h} | Mouse: ({mx},{my})"
-        draw2.rectangle([(combined_w - 280, combined_h - 18), (combined_w, combined_h)], fill=(0, 0, 0))
-        draw2.text((combined_w - 278, combined_h - 16), info_text, fill=(100, 200, 100))
+        # شبكة كل 100px بإحداثيات الشاشة الحقيقية
+        step_orig = 100
+        step_scaled_x = int(step_orig * sw / orig_w)
+        step_scaled_y = int(step_orig * sh / orig_h)
+
+        grid_color  = (255, 255, 255, 45)   # خطوط بيضاء شفافة
+        label_color = (0, 255, 180, 200)    # أرقام خضراء واضحة
+
+        # خطوط عمودية + أرقام X الحقيقية
+        x_sc = step_scaled_x
+        x_real = step_orig
+        while x_sc < sw:
+            draw.line([(x_sc, 0), (x_sc, sh)], fill=grid_color, width=1)
+            draw.rectangle([(x_sc + 1, 2), (x_sc + 32, 14)], fill=(0, 0, 0, 160))
+            draw.text((x_sc + 2, 3), str(x_real), fill=label_color)
+            x_sc   += step_scaled_x
+            x_real += step_orig
+
+        # خطوط أفقية + أرقام Y الحقيقية
+        y_sc = step_scaled_y
+        y_real = step_orig
+        while y_sc < sh:
+            draw.line([(0, y_sc), (sw, y_sc)], fill=grid_color, width=1)
+            draw.rectangle([(2, y_sc + 1), (36, y_sc + 13)], fill=(0, 0, 0, 160))
+            draw.text((3, y_sc + 2), str(y_real), fill=label_color)
+            y_sc   += step_scaled_y
+            y_real += step_orig
+
+        # موقع الماوس الحقيقي — دائرة حمراء
+        mouse_sx = int(mx * sw / orig_w)
+        mouse_sy = int(my * sh / orig_h)
+        r = 10
+        draw.ellipse([(mouse_sx-r, mouse_sy-r), (mouse_sx+r, mouse_sy+r)],
+                     outline=(255, 60, 60, 240), width=2)
+        draw.line([(mouse_sx-16, mouse_sy), (mouse_sx+16, mouse_sy)],
+                  fill=(255, 60, 60, 200), width=1)
+        draw.line([(mouse_sx, mouse_sy-16), (mouse_sx, mouse_sy+16)],
+                  fill=(255, 60, 60, 200), width=1)
+
+        # شريط معلومات في الأعلى
+        final = grid_img.convert("RGB")
+        draw2 = ImageDraw.Draw(final)
+        draw2.rectangle([(0, 0), (sw, 18)], fill=(0, 0, 0))
+        hdr = (f"SCREEN {orig_w}x{orig_h} | MOUSE:({mx},{my}) | "
+               f"GRID=100px | CLICK COORDS = numbers on grid lines")
+        draw2.text((4, 2), hdr, fill=(0, 220, 160))
+
+        # شريط معلومات في الأسفل
+        draw2.rectangle([(0, sh-18), (sw, sh)], fill=(0, 0, 0))
+        draw2.text((4, sh-16),
+                   f"USE REAL COORDS: e.g. click x=500 y=300 means the '500' vertical line + '300' horizontal line",
+                   fill=(180, 180, 80))
 
         buf = io.BytesIO()
-        combined.save(buf, format="JPEG", quality=quality, optimize=True)
+        final.save(buf, format="JPEG", quality=quality, optimize=True)
         data = base64.b64encode(buf.getvalue()).decode()
 
         return {
@@ -454,7 +439,6 @@ def capture_screen_with_grid(scale=0.65, quality=72) -> dict:
 
     except Exception as e:
         print(f"[capture_grid] {e}")
-        # fallback
         plain = capture_screen(scale=scale, quality=quality)
         mx, my = _get_mouse_pos()
         w, h = _get_screen_size()