admin
9a55f0bbc7
gates / gates (push) Successful in 4m43s
The app is no longer the unmeasured view. Solved against the laptop frame, your Facebook Lite shot gives a visible window of x 349..1290 and your Chrome-mobile shot x 349..1291 -- the LITE APP CROPS EXACTLY LIKE SIGNED-IN MOBILE WEB, and both agree with the emulator's 351..1289. Their profile circle is at x 645..1021 from y 451, LOWER than the emulator's y 369, so that figure was pessimistic rather than wrong and the margin it bought was real. Five views measured now; the signed-out one is still the binding constraint. Cover C follows your draft: the wordmark big on top (88 px, was 44), a small gap, then the catchphrase. The catchphrase is ONE line, not the two you drew, and the measurement forces it: with the signed-out circle starting at y 232, a wordmark that size plus two catchphrase lines cannot both sit above it. Drawn as two lines it measured 392 sampled text pixels behind that circle -- "saját szabályaid" read "saját szab" there, which is the R-919 defect itself. Sizing the two lines to fit instead drops the capital to 25 px, the legibility floor. One line keeps the wordmark big, the capital at 34 px and every measured view clean: 0 text pixels behind any circle. The laptop moved right and shrank to 540 px to free the width; 64% of it is cropped or covered somewhere, which the build reports and which is what the decor layer is for.
655 lines
33 KiB
Python
655 lines
33 KiB
Python
#!/usr/bin/env python3
|
||
# -*- coding: utf-8 -*-
|
||
"""build.py — the Felhom.eu Facebook Page pictures: two profile pictures, three covers, one preview page.
|
||
|
||
Run: python3 marketing/facebook/build.py
|
||
Exit: 0 every image built and every check passed · 1 a check failed · 2 a render failed
|
||
|
||
The brand lockup. The headline is set the way the WEBSITE sets its own h1 - `site.css`
|
||
`.page-index .hero-text h1` is `font-weight: 700; letter-spacing: -0.03em` - so HEADLINE_WEIGHT is Bold, not
|
||
ExtraBold, and HEADLINE_TRACK is -0.03 em. „felhom.eu" is NOT typed in Plus Jakarta Sans: it is the logo's own
|
||
lettering, cropped out of logo.png, because that lettering is set in „M+ 2c" / „Vremena Grotesk" (fonts this
|
||
machine does not have, R-916) and typing it in another face is a different wordmark. The website hero shows the
|
||
same logo.png on the same dark background, so the cover matches the page. The PROFILE picture carries the MARK
|
||
only - at 176 px the mark plus the wordmark left both too small to read (operator, 2026-10-09).
|
||
|
||
Renderer: Pillow only (shapes, text, compositing). Text is set in the website's own Plus Jakarta Sans
|
||
(website/assets/fonts/*.woff2), which Pillow reads through FreeType. NOT librsvg: tried 2026-10-08 — pango fell back
|
||
to DejaVu for the woff2 fonts, and logo.svg's own lettering is live <text> in 'M+ 2c' / 'Vremena Grotesk', fonts
|
||
DooPlex does not have, so the SVG renders with the wrong letters. The logo master is therefore website/assets/logo.png
|
||
(645 x 408, the file the site itself shows), placed unscaled.
|
||
|
||
Checks (each prints its numbers; a failure exits 1):
|
||
circle every logo pixel of a profile picture lies inside radius 0.42 x width of the centre (8 % margin).
|
||
Shown failing first on the shape the Page has today (logo.png, full size, on a square).
|
||
safe every pixel of a cover's CONTENT layer (text, logo, drawings — not the background) lies inside the
|
||
area both desktop and phone show, and outside the places the profile circle covers. Shown failing
|
||
first on the covers as committed at a76207945e — all three were cut on phones (R-919).
|
||
cap a cover's headline is set at a capital-letter height of at least CAP_MIN, so it stays readable
|
||
once the phone has shrunk the cover to 412 px wide.
|
||
size each PNG's size is read back from the file, never taken from the constants here.
|
||
|
||
Sizes. The COMPUTER figures are graded READ, second-hand (820 x 312; built at 2 x = 1640 x 624; the
|
||
profile circle 16 px from the left, 176 px from the top, 176 px across). The PHONE figures are graded
|
||
MEASURED — see the constants block: one device (Pixel 9 emulated, 412 x 924, the mobile WEBSITE), NOT the
|
||
Facebook app and no other width. Meta's own help page claims 2,4:1 for the phone cover and is wrong; that
|
||
figure is what cut „saját szabályaid" down to „aját szabályaid" on every phone (R-919). The profile picture
|
||
is shown 176 px (computer) / 196 px (phone) and is built at the size where logo.png fits unscaled.
|
||
"""
|
||
import base64
|
||
import math
|
||
import os
|
||
import sys
|
||
|
||
from PIL import Image, ImageDraw, ImageFilter, ImageFont
|
||
|
||
HERE = os.path.dirname(os.path.abspath(__file__))
|
||
ROOT = os.path.dirname(os.path.dirname(HERE))
|
||
sys.path.insert(0, HERE)
|
||
|
||
ASSETS = os.path.join(ROOT, "website", "assets")
|
||
OUT = os.path.join(HERE, "out")
|
||
LOGO_PNG = os.path.join(ASSETS, "logo.png")
|
||
SHOT = os.path.join(ASSETS, "dashboard-backups-hu.webp")
|
||
PJS = os.path.join(ASSETS, "fonts", "pjs-latin.woff2")
|
||
PJS_EXT = os.path.join(ASSETS, "fonts", "pjs-latin-ext.woff2")
|
||
|
||
|
||
def hexc(h, a=255):
|
||
h = h.lstrip("#")
|
||
return (int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16), a)
|
||
|
||
|
||
# website/assets/site.css :root — design system v2 tokens, verbatim (the site is dark-only).
|
||
BG0, BG1, BG2 = hexc("#0A1220"), hexc("#0F1B2E"), hexc("#16263F")
|
||
LINE = hexc("#22344F")
|
||
TEXT1, TEXT2, TEXT3 = hexc("#EDF2F9"), hexc("#94A6BF"), hexc("#5E7392")
|
||
BLUE, BLUE_BRIGHT = hexc("#0083D8"), hexc("#2EA8F5")
|
||
WHITE = hexc("#FFFFFF")
|
||
|
||
# The site's headline (index.html hero), from escapes (brief section 9.7).
|
||
L1 = "Saj\u00e1t felh\u0151d,"
|
||
L2 = "saj\u00e1t szab\u00e1lyaid"
|
||
SLOGAN = L1 + " " + L2
|
||
# No DOMAIN constant: „felhom.eu" is never typed. wordmark() draws the logo's own lettering, so the
|
||
# brand name on a cover is the same artwork as on the website, not a look-alike in another face.
|
||
|
||
# The website's own h1, read from website/assets/site.css (.page-index .hero-text h1).
|
||
HEADLINE_WEIGHT = "Bold" # font-weight: 700 - NOT ExtraBold, which is what this file used to use
|
||
HEADLINE_TRACK = -0.03 # letter-spacing: -0.03em
|
||
# logo.png is one image holding two things: the mark, then a blank band, then the „felhom.eu" lettering.
|
||
# MEASURED on the file 2026-10-09: ink runs y 5..289, the band is y 290..295, the wordmark y 296..403.
|
||
LOGO_SPLIT_Y = 293
|
||
CIRCLE_R = 0.42 # brief §7 A: the check radius, as a fraction of the width
|
||
LOGO_R = 0.40 # where the logo's farthest pixel is placed (inside the check radius)
|
||
CW, CH = 1640, 624 # cover, 2 x the 820 x 312 computer display
|
||
SCALE = CW / 820.0
|
||
|
||
# --- the phone views: MEASURED, and there are TWO of them (R-919) ------------------------------------
|
||
# A phone does NOT show the cover one way. Both of these are measured on the live Page:
|
||
#
|
||
# SIGNED IN 2026-10-08 in Chrome DevTools device mode (Pixel 9, mobile UA, after a reload - without
|
||
# one Facebook keeps serving the desktop bundle), and CONFIRMED 2026-10-09 on the
|
||
# operator's own phone (Chrome on Android, 1080 px). Facebook keeps the cover's FULL
|
||
# HEIGHT and shows only the centre ~948 px of its width. Solving the real-phone shot
|
||
# against the laptop frame put the window at x 351..1298 where the emulator said
|
||
# 351..1289 - the left edge to the pixel. Profile circle: x 637..1030 from y 369
|
||
# (emulated), x 649..1028 from y 450 (real phone).
|
||
# SIGNED OUT 2026-10-09, measured from the operator's screenshot. The FULL width is shown - nothing
|
||
# is cut at the sides - but the cover is top-anchored and only the TOP 525 px survives;
|
||
# the bottom 99 px is cut. The circle is much bigger and much higher: x 486..1150 from
|
||
# y 232.
|
||
#
|
||
# So the SIDES are cut for a signed-in visitor and the BOTTOM for a signed-out one, and a cover has to
|
||
# survive both. Meta's own help page describes neither. Evidence and the recipe to re-measure:
|
||
# documentation/audits/facebook-page-setup-2026-10-08/.
|
||
# STILL NOT MEASURED: the Facebook app. That is why MARGIN is deliberate and why the operator's check
|
||
# in the app remains the acceptance step rather than this build.
|
||
PHONE_IN_X = (351.0, 1289.0) # signed in: the visible width, at full height
|
||
PHONE_OUT_Y = 525.0 # signed out: the visible height, at full width
|
||
MARGIN = 40
|
||
SAFE = (int(math.ceil(PHONE_IN_X[0] + MARGIN)), MARGIN,
|
||
int(PHONE_IN_X[1] - MARGIN), int(PHONE_OUT_Y - MARGIN))
|
||
PAD = 24
|
||
# x, y, diameter in cover pixels. The COMPUTER circle is UNCHANGED (second-hand, and left-anchored: it
|
||
# sits against the cover's left edge, so everything to its left is under it too). On 2026-10-08 the
|
||
# computer circle was measured to sit 16 px BELOW the cover and to overlap nothing - this stays as a
|
||
# deliberate conservatism, not because it is still true.
|
||
DESK_CIRCLE = (16 * SCALE, 176 * SCALE, 176 * SCALE)
|
||
# The two phone circles, as MEASURED. They are discs, and modelling them as rectangles that reach the
|
||
# bottom threw away most of the cover for nothing: near its top a disc is only a few pixels wide.
|
||
PHONE_CIRCLES = [(637.0, 369.0, 393.0), # signed in
|
||
(486.0, 232.0, 669.0)] # signed out - bigger and higher, so it is the binding one
|
||
DISCS = [(c[0] + c[2] / 2.0, c[1] + c[2] / 2.0, c[2] / 2.0 + PAD) for c in PHONE_CIRCLES]
|
||
QUIET = [(0, DESK_CIRCLE[1] - PAD, DESK_CIRCLE[0] + DESK_CIRCLE[2] + PAD, CH)]
|
||
# The band a CENTRED block may use: inside SAFE, clear of the computer circle, above the higher of the
|
||
# two phone circles. A block that stays to one side may go lower - the disc test is the real arbiter.
|
||
BAND = (max(SAFE[0], int(math.ceil(DESK_CIRCLE[0] + DESK_CIRCLE[2] + PAD))), SAFE[1] + 8,
|
||
SAFE[2], int(min(d[1] - d[2] for d in DISCS)))
|
||
CAP_MIN = int(round(0.04 * CH)) # a headline capital is at least 4 % of the cover height (25 px at 624)
|
||
# What this file believed before R-919: that a phone shows 640 x 360 of the cover. Kept ONLY so the
|
||
# control below can convict it - a check that has never been seen failing is a wish, not a check.
|
||
OLD_SAFE_X0 = (CW - CH * 640.0 / 360.0) / 2.0 + MARGIN
|
||
|
||
FAILS = []
|
||
|
||
|
||
def check(ok, msg):
|
||
print((" ok " if ok else " FAIL ") + msg)
|
||
if not ok:
|
||
FAILS.append(msg)
|
||
|
||
|
||
# ------------------------------------------------------------------ text in the site font
|
||
|
||
_fonts = {}
|
||
|
||
|
||
def font(size, weight, ext):
|
||
key = (size, weight, ext)
|
||
if key not in _fonts:
|
||
f = ImageFont.truetype(PJS_EXT if ext else PJS, size)
|
||
f.set_variation_by_name(weight)
|
||
_fonts[key] = f
|
||
return _fonts[key]
|
||
|
||
|
||
def runs(text):
|
||
"""Split into runs by the CSS unicode-range of the two woff2 files (latin-ext = U+0100–02BA)."""
|
||
out = []
|
||
for ch in text:
|
||
ext = 0x100 <= ord(ch) <= 0x2BA
|
||
if out and out[-1][0] == ext:
|
||
out[-1][1] += ch
|
||
else:
|
||
out.append([ext, ch])
|
||
return out
|
||
|
||
|
||
def text_width(text, size, weight):
|
||
return sum(font(size, weight, e).getlength(s) for e, s in runs(text))
|
||
|
||
|
||
def text_width_tracked(text, size, weight, track=0.0):
|
||
"""Width with letter-spacing, the way the site puts -0.03em on its h1. `track` is in pixels."""
|
||
if not track:
|
||
return text_width(text, size, weight)
|
||
w = 0.0
|
||
for e, s in runs(text):
|
||
f = font(size, weight, e)
|
||
for ch in s:
|
||
w += f.getlength(ch) + track
|
||
return w - track
|
||
|
||
|
||
def draw_text(img, x, y, text, size, weight, fill, align="left", track=0.0):
|
||
"""Draw at baseline y; x is the left edge, or the centre with align='center'. Returns the width.
|
||
With `track` the glyphs are placed one at a time, so letter-spacing is real and not faked by scaling."""
|
||
w = text_width_tracked(text, size, weight, track)
|
||
if align == "center":
|
||
x -= w / 2.0
|
||
d = ImageDraw.Draw(img)
|
||
for e, s in runs(text):
|
||
f = font(size, weight, e)
|
||
if track:
|
||
for ch in s:
|
||
d.text((x, y), ch, font=f, fill=fill, anchor="ls")
|
||
x += f.getlength(ch) + track
|
||
else:
|
||
d.text((x, y), s, font=f, fill=fill, anchor="ls")
|
||
x += f.getlength(s)
|
||
return w
|
||
|
||
|
||
def fit_size(text, weight, max_w, start, track_em=0.0):
|
||
"""The largest size at or below `start` whose tracked width fits max_w."""
|
||
size = start
|
||
while text_width_tracked(text, size, weight, track_em * size) > max_w:
|
||
size -= 1
|
||
return size
|
||
|
||
|
||
def headline(c, x, y, text, size, fill, align="left"):
|
||
"""One run of headline text in the website's weight and tracking. Returns the PEN x after it, so the
|
||
second, blue half of the line starts exactly where the first ended - tracking makes `x + width` wrong
|
||
by one letter-space."""
|
||
tr = HEADLINE_TRACK * size
|
||
w = draw_text(c, x, y, text, size, HEADLINE_WEIGHT, fill, align=align, track=tr)
|
||
if align == "center":
|
||
x -= w / 2.0
|
||
return x + w + tr
|
||
|
||
|
||
def headline_fit(text, max_w, start):
|
||
return fit_size(text, HEADLINE_WEIGHT, max_w, start, HEADLINE_TRACK)
|
||
|
||
|
||
def headline_width(text, size):
|
||
return text_width_tracked(text, size, HEADLINE_WEIGHT, HEADLINE_TRACK * size)
|
||
|
||
|
||
# ------------------------------------------------------------------ the logo
|
||
|
||
def alpha_points(img, thr=16):
|
||
a = img.getchannel("A")
|
||
w, h = img.size
|
||
px = a.load()
|
||
return [(x, y) for y in range(h) for x in range(w) if px[x, y] > thr]
|
||
|
||
|
||
def outside_circle(img, bg, r_frac):
|
||
"""Count pixels that differ from the background and lie outside radius r_frac x width of the centre."""
|
||
w, h = img.size
|
||
cx, cy, r = (w - 1) / 2.0, (h - 1) / 2.0, r_frac * w
|
||
rgb = img.convert("RGB").load()
|
||
n = 0
|
||
for y in range(h):
|
||
dy2 = (y - cy) ** 2
|
||
for x in range(w):
|
||
p = rgb[x, y]
|
||
if max(abs(p[0] - bg[0]), abs(p[1] - bg[1]), abs(p[2] - bg[2])) > 24 and (x - cx) ** 2 + dy2 > r * r:
|
||
n += 1
|
||
return n
|
||
|
||
|
||
_logo_parts = []
|
||
|
||
|
||
def logo_parts():
|
||
"""logo.png split into (mark, wordmark), each tightened to its own ink. The split row is MEASURED."""
|
||
if _logo_parts:
|
||
return _logo_parts[0]
|
||
src = Image.open(LOGO_PNG).convert("RGBA")
|
||
out = []
|
||
for box in ((0, 0, src.width, LOGO_SPLIT_Y), (0, LOGO_SPLIT_Y, src.width, src.height)):
|
||
part = src.crop(box)
|
||
out.append(part.crop(part.getchannel("A").point(lambda v: 255 if v > 16 else 0).getbbox()))
|
||
_logo_parts.append((out[0], out[1]))
|
||
return _logo_parts[0]
|
||
|
||
|
||
def wordmark(c, x, y, height, align="left"):
|
||
"""Draw „felhom.eu" as the logo's own lettering, scaled to `height`. Returns its width."""
|
||
art = logo_parts()[1]
|
||
w = int(round(art.width * float(height) / art.height))
|
||
art = art.resize((w, int(height)), Image.LANCZOS)
|
||
c.alpha_composite(art, (int(round(x - w / 2.0)) if align == "center" else int(round(x)), int(round(y))))
|
||
return w
|
||
|
||
|
||
def today_shape():
|
||
"""The Page today: logo.png at full size, unscaled, centred on a white square of its own width."""
|
||
src = Image.open(LOGO_PNG).convert("RGBA")
|
||
w, h = src.size
|
||
sq = Image.new("RGBA", (w, w), WHITE)
|
||
sq.alpha_composite(src, (0, (w - h) // 2))
|
||
return sq
|
||
|
||
|
||
def profile_width():
|
||
"""The square size at which the MARK fits radius LOGO_R x width UNSCALED (never upsampled).
|
||
Floor 640 = twice the 320 x 320 Meta recommends as a source, so there is resolution to spare at the
|
||
176 / 196 px Facebook actually shows. It used to be 720, which was above what the mark alone needs and
|
||
would have shrunk the mark inside the circle for no gain."""
|
||
src = logo_parts()[0]
|
||
pts = alpha_points(src)
|
||
xs, ys = [p[0] for p in pts], [p[1] for p in pts]
|
||
cx, cy = (min(xs) + max(xs)) / 2.0, (min(ys) + max(ys)) / 2.0
|
||
dmax = max(math.hypot(x - cx, y - cy) for x, y in pts) + 1
|
||
return max(640, int(math.ceil(dmax / LOGO_R / 2.0)) * 2), (cx, cy)
|
||
|
||
|
||
def build_profile(bg, name):
|
||
w, (cx, cy) = profile_width()
|
||
logo = logo_parts()[0]
|
||
img = Image.new("RGBA", (w, w), bg)
|
||
img.alpha_composite(logo, (int(round(w / 2.0 - cx)), int(round(w / 2.0 - cy))))
|
||
path = os.path.join(OUT, name)
|
||
img.convert("RGB").save(path, optimize=True)
|
||
return path
|
||
|
||
|
||
# ------------------------------------------------------------------ covers
|
||
|
||
def background(glow_at=(0.78, 0.25)):
|
||
"""bg-0 with the site's 50 px grid (3 % blue, index.html) and the og-image's soft blue glow; top blue rule."""
|
||
img = Image.new("RGBA", (CW, CH), BG0)
|
||
glow = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
|
||
gd = ImageDraw.Draw(glow)
|
||
gx, gy, gr = glow_at[0] * CW, glow_at[1] * CH, 520
|
||
gd.ellipse((gx - gr, gy - gr, gx + gr, gy + gr), fill=(0, 131, 216, 46))
|
||
img.alpha_composite(glow.filter(ImageFilter.GaussianBlur(180)))
|
||
grid = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
|
||
d = ImageDraw.Draw(grid)
|
||
step = int(50 * SCALE)
|
||
for x in range(0, CW, step):
|
||
d.line((x, 0, x, CH), fill=(0, 131, 216, 9), width=2)
|
||
for y in range(0, CH, step):
|
||
d.line((0, y, CW, y), fill=(0, 131, 216, 9), width=2)
|
||
img.alpha_composite(grid)
|
||
ImageDraw.Draw(img).rectangle((0, 0, CW, 8), fill=BLUE)
|
||
return img
|
||
|
||
|
||
def content_a():
|
||
"""Calm: the one line, centred in the band, with the wordmark under it. No decor by design."""
|
||
c = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
|
||
mid = (BAND[0] + BAND[2]) / 2.0
|
||
size = headline_fit(SLOGAN, (BAND[2] - BAND[0]) - 20, 86)
|
||
x = mid - headline_width(SLOGAN, size) / 2.0
|
||
x = headline(c, x, 118, L1 + " ", size, TEXT1)
|
||
headline(c, x, 118, L2, size, BLUE_BRIGHT)
|
||
wordmark(c, mid, 134, round(size * 0.95), align="center")
|
||
return c, None, size
|
||
|
||
|
||
def rack(d, x, y, w, h, fill, dot):
|
||
"""Three stacked server units with status dots — the logo's own motif, drawn as plain shapes."""
|
||
uh = (h - 2 * 8) / 3.0
|
||
for i in range(3):
|
||
ty = y + i * (uh + 8)
|
||
d.rectangle((x, ty, x + w, ty + uh), fill=fill)
|
||
for j in range(3):
|
||
cx = x + 20 + j * 22
|
||
d.ellipse((cx - 5, ty + uh / 2 - 5, cx + 5, ty + uh / 2 + 5), fill=dot)
|
||
|
||
|
||
def tile(d, cx, cy, s, kind):
|
||
"""A plain app tile (no third-party logo): a square with a simple generic glyph."""
|
||
x0, y0, x1, y1 = cx - s / 2, cy - s / 2, cx + s / 2, cy + s / 2
|
||
d.rectangle((x0, y0, x1, y1), fill=BG2, outline=LINE, width=3)
|
||
g = s * 0.28
|
||
if kind == "photo":
|
||
d.polygon([(cx - g, cy + g * 0.7), (cx - g * 0.2, cy - g * 0.5), (cx + g * 0.3, cy + g * 0.2),
|
||
(cx + g * 0.6, cy - g * 0.1), (cx + g, cy + g * 0.7)], fill=BLUE_BRIGHT)
|
||
d.ellipse((cx + g * 0.35, cy - g, cx + g * 0.85, cy - g * 0.5), fill=TEXT2)
|
||
elif kind == "doc":
|
||
d.rectangle((cx - g * 0.75, cy - g, cx + g * 0.75, cy + g), outline=TEXT1, width=5)
|
||
for i in range(3):
|
||
yy = cy - g * 0.45 + i * g * 0.45
|
||
d.line((cx - g * 0.45, yy, cx + g * 0.45, yy), fill=BLUE_BRIGHT, width=5)
|
||
elif kind == "play":
|
||
d.polygon([(cx - g * 0.6, cy - g), (cx + g, cy), (cx - g * 0.6, cy + g)], fill=BLUE_BRIGHT)
|
||
elif kind == "lock":
|
||
d.arc((cx - g * 0.6, cy - g * 1.2, cx + g * 0.6, cy), 180, 360, fill=TEXT1, width=6)
|
||
d.rectangle((cx - g * 0.85, cy - g * 0.6, cx + g * 0.85, cy + g * 0.9), fill=TEXT1)
|
||
d.ellipse((cx - g * 0.18, cy - g * 0.1, cx + g * 0.18, cy + g * 0.26), fill=BG2)
|
||
elif kind == "folder":
|
||
d.polygon([(cx - g, cy - g * 0.7), (cx - g * 0.2, cy - g * 0.7), (cx, cy - g * 0.4), (cx + g, cy - g * 0.4),
|
||
(cx + g, cy + g * 0.8), (cx - g, cy + g * 0.8)], fill=BLUE_BRIGHT)
|
||
|
||
|
||
def content_b():
|
||
"""The idea: the headline on the left, a home with its server and its apps on the right. Both
|
||
columns live inside BAND -- the phone hides the cover's bottom middle behind the profile circle,
|
||
so nothing is drawn down there any more (R-919)."""
|
||
c = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
|
||
d = ImageDraw.Draw(c)
|
||
tx = BAND[0] + 12
|
||
size = headline_fit(L2, 430, 58) # the READ column; the motif gets the rest
|
||
headline(c, tx, 100, L1, size, TEXT1)
|
||
headline(c, tx, 100 + size + 12, L2, size, BLUE_BRIGHT)
|
||
wordmark(c, tx, 100 + size + 26, round(size * 0.72))
|
||
# DECOR: the home with its server and its apps, free to run past the crop and under the circles
|
||
dec = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
|
||
d = ImageDraw.Draw(dec)
|
||
hx, hy, hw = 1080, 210, 230 # house body: left, top, width
|
||
tiles = [(960, 96, "photo"), (1150, 70, "doc"), (1400, 150, "play"), (1430, 360, "lock"),
|
||
(905, 300, "folder"), (1230, 520, "photo"), (980, 505, "doc")]
|
||
for x, y, _ in tiles:
|
||
d.line((hx + hw / 2, hy + 110, x, y), fill=(46, 168, 245, 110), width=5)
|
||
d.rectangle((hx, hy, hx + hw, hy + 200), fill=BG1, outline=BLUE_BRIGHT, width=7)
|
||
d.polygon([(hx - 46, hy + 5), (hx + hw / 2, hy - 130), (hx + hw + 46, hy + 5)], fill=BG1, outline=BLUE_BRIGHT)
|
||
d.line([(hx - 46, hy + 5), (hx + hw / 2, hy - 130), (hx + hw + 46, hy + 5)], fill=BLUE_BRIGHT, width=7, joint="curve")
|
||
rack(d, hx + 42, hy + 42, hw - 84, 116, BLUE, TEXT1)
|
||
for x, y, kind in tiles:
|
||
tile(d, x, y, 92, kind)
|
||
return c, dec, size
|
||
|
||
|
||
def content_c():
|
||
"""The product: the headline on the left, the demo box's own dashboard on the right. Both inside
|
||
BAND -- the screen used to run past the phone's right crop edge and into the phone circle."""
|
||
c = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
|
||
d = ImageDraw.Draw(c)
|
||
tx = BAND[0] + 12
|
||
# The operator's layout (2026-10-09): the wordmark BIG on top, a small gap, then the catchphrase.
|
||
# The catchphrase is ONE line, not the two he drew, and that is forced by the measurement: the
|
||
# SIGNED-OUT circle starts at y 232, and a wordmark this size plus two catchphrase lines cannot
|
||
# both sit above it. Drawn as two lines it measured 392 sampled text pixels behind that circle -
|
||
# „saj\u00e1t szab\u00e1lyaid" read „saj\u00e1t szab" there, which is the very defect R-919 is about. Sizing the
|
||
# two lines to fit instead pushes the catchphrase to a 25 px capital, the legibility floor. One
|
||
# line keeps the wordmark big, the catchphrase readable and every measured view clean.
|
||
wordmark(c, tx, 50, 88)
|
||
size = headline_fit(SLOGAN, 580, 48)
|
||
x = headline(c, tx, 190, L1 + " ", size, TEXT1)
|
||
headline(c, x, 190, L2, size, BLUE_BRIGHT)
|
||
# DECOR: the dashboard, now big enough to read, running off the right edge and under the circles
|
||
dec = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
|
||
d = ImageDraw.Draw(dec)
|
||
shot = Image.open(SHOT).convert("RGBA")
|
||
# The domain chip next to the title names the demo box; covered with the page colour (copy only, source unchanged).
|
||
ImageDraw.Draw(shot).rectangle((684, 32, 826, 70), fill=hexc("#0B1322"))
|
||
sw = 540 # smaller than before: the one-line catchphrase
|
||
sh = int(round(sw * shot.height / shot.width)) # needs the width, so the laptop moves right
|
||
shot = shot.resize((sw, sh), Image.LANCZOS)
|
||
fx, fy, b = 1055, 46, 24 # frame left/top, bezel
|
||
d.rectangle((fx, fy, fx + sw + 2 * b, fy + sh + 2 * b), fill=BG2, outline=LINE, width=3)
|
||
dec.alpha_composite(shot, (fx + b, fy + b))
|
||
base_y = fy + sh + 2 * b
|
||
d.polygon([(fx - 52, base_y + 38), (fx + sw + 2 * b + 52, base_y + 38), (fx + sw + 2 * b, base_y),
|
||
(fx, base_y)], fill=LINE)
|
||
return c, dec, size
|
||
|
||
|
||
def cap_height(size):
|
||
"""The height of a capital letter at this size, read from the font rather than assumed."""
|
||
bb = font(size, HEADLINE_WEIGHT, 0).getbbox("S")
|
||
return bb[3] - bb[1]
|
||
|
||
|
||
def control_old_window():
|
||
"""Draw the headline where the OLD 640 x 360 assumption put it - which is where every shipped cover
|
||
had it - and return whether the measured check rejects that. It must. On the live Page the phone cut
|
||
18 px off exactly this layout: „saj\u00e1t szab\u00e1lyaid" read „aj\u00e1t szab\u00e1lyaid" (R-919)."""
|
||
c = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
|
||
draw_text(c, OLD_SAFE_X0 + 24, 180, L1, 52, "ExtraBold", TEXT1)
|
||
x0 = min(p[0] * 4 for p in alpha_points(c.resize((CW // 4, CH // 4)), thr=8))
|
||
return x0 < SAFE[0], x0
|
||
|
||
|
||
def decor_cost(dec):
|
||
"""How much of the decor layer a visitor never sees: cut by the signed-in crop, cut by the
|
||
signed-out bottom, or behind a profile circle. Reported, never failed - decor is allowed to go
|
||
there, and that is the whole point of having a second layer."""
|
||
if dec is None:
|
||
return 0, 0
|
||
pts = alpha_points(dec.resize((CW // 4, CH // 4)), thr=8)
|
||
if not pts:
|
||
return 0, 0
|
||
tot = len(pts)
|
||
lost = 0
|
||
for q in pts:
|
||
x, y = q[0] * 4, q[1] * 4
|
||
if x < PHONE_IN_X[0] or x > PHONE_IN_X[1] or y > PHONE_OUT_Y:
|
||
lost += 1
|
||
continue
|
||
if any((x - cx) ** 2 + (y - cy) ** 2 <= r * r for cx, cy, r in DISCS):
|
||
lost += 1
|
||
return tot, lost
|
||
|
||
|
||
def check_safe(name, content, headline):
|
||
pts = alpha_points(content.resize((CW // 4, CH // 4)), thr=8)
|
||
xs = [p[0] * 4 for p in pts]
|
||
ys = [p[1] * 4 for p in pts]
|
||
bbox = (min(xs), min(ys), max(xs) + 3, max(ys) + 3)
|
||
inside = bbox[0] >= SAFE[0] and bbox[1] >= SAFE[1] and bbox[2] <= SAFE[2] and bbox[3] <= SAFE[3]
|
||
check(inside, "%s: content box %s inside the safe area %s" % (name, bbox, SAFE))
|
||
q = QUIET[0]
|
||
desk = sum(1 for x, y in zip(xs, ys) if q[0] <= x <= q[2] and q[1] <= y <= q[3])
|
||
phone = 0
|
||
for cx, cy, r in DISCS:
|
||
phone += sum(1 for x, y in zip(xs, ys) if (x - cx) ** 2 + (y - cy) ** 2 <= r * r)
|
||
check(desk + phone == 0, "%s: %d content pixels under the computer circle, %d under a phone circle"
|
||
% (name, desk, phone))
|
||
cap = cap_height(headline)
|
||
check(cap >= CAP_MIN, "%s: headline size %d, capital height %d px (at least %d)"
|
||
% (name, headline, cap, CAP_MIN))
|
||
|
||
|
||
def build_cover(name, content, dec, glow):
|
||
img = background(glow)
|
||
if dec is not None:
|
||
img.alpha_composite(dec)
|
||
img.alpha_composite(content)
|
||
path = os.path.join(OUT, name)
|
||
img.convert("RGB").save(path, optimize=True)
|
||
return path
|
||
|
||
|
||
# ------------------------------------------------------------------ preview
|
||
|
||
def b64(path):
|
||
with open(path, "rb") as fh:
|
||
return "data:image/png;base64," + base64.b64encode(fh.read()).decode()
|
||
|
||
|
||
def preview(profiles, covers):
|
||
dk = DESK_CIRCLE
|
||
sx0, sy0, sx1, sy1 = SAFE
|
||
pct = lambda v, tot: "%.3f%%" % (100.0 * v / tot) # noqa: E731
|
||
prof_html = "".join(
|
||
'<figure><div class="row"><img class="pc" src="%s" alt=""><img class="pc sm" src="%s" alt="">'
|
||
'<img class="pc xs" src="%s" alt=""></div><figcaption>%s \u2014 176 px, 96 px, 40 px (the mark only)</figcaption></figure>'
|
||
% (b64(p), b64(p), b64(p), label) for label, p in profiles)
|
||
cov = []
|
||
rec = profiles[0][1]
|
||
|
||
def phone_panel(src, vx0, vx1, vy1, circ):
|
||
"""One phone view: the window (vx0..vx1 of the width, 0..vy1 of the height) with its circle."""
|
||
vw, vh = vx1 - vx0, vy1
|
||
return ('<div class="phone" style="aspect-ratio:%.2f/%.2f"><div class="crop">'
|
||
'<img src="%s" alt="" style="width:%.3f%%;left:-%.3f%%;height:%.3f%%">'
|
||
'</div><img class="ov" src="%s" alt="" style="left:%s;top:%s;width:%s"></div>'
|
||
% (vw, vh, src, CW / vw * 100.0, vx0 / vw * 100.0, CH / vh * 100.0, b64(rec),
|
||
pct(circ[0] - vx0, vw), pct(circ[1], vh), pct(circ[2], vw)))
|
||
|
||
for label, p in covers:
|
||
src = b64(p)
|
||
safe = ('<div class="safe" style="left:%s;top:%s;width:%s;height:%s"></div>'
|
||
% (pct(sx0, CW), pct(sy0, CH), pct(sx1 - sx0, CW), pct(sy1 - sy0, CH)))
|
||
desk = ('<div class="desk"><img src="%s" alt="">%s<img class="ov" src="%s" alt="" '
|
||
'style="left:%s;top:%s;width:%s"></div>'
|
||
% (src, safe, b64(rec), pct(dk[0], CW), pct(dk[1], CH), pct(dk[2], CW)))
|
||
pin = phone_panel(src, PHONE_IN_X[0], PHONE_IN_X[1], CH, PHONE_CIRCLES[0])
|
||
pout = phone_panel(src, 0.0, float(CW), PHONE_OUT_Y, PHONE_CIRCLES[1])
|
||
cov.append('<section><h2>%s</h2>'
|
||
'<p class="k">Computer \u2014 the whole picture, and the profile circle sits BELOW it. '
|
||
'Dashed = the safe area (preview only).</p>%s'
|
||
'<div class="pair">'
|
||
'<figure><figcaption>Phone, <b>signed in</b> \u2014 the centre %d px of %d, full height'
|
||
'</figcaption>%s</figure>'
|
||
'<figure><figcaption>Phone, <b>signed out</b> \u2014 the full width, but only the top %d px'
|
||
'</figcaption>%s</figure></div></section>'
|
||
% (label, desk, round(PHONE_IN_X[1] - PHONE_IN_X[0]), CW, pin, round(PHONE_OUT_Y), pout))
|
||
html = """<!doctype html>
|
||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Facebook Page pictures</title>
|
||
<style>
|
||
:root{--bg-0:#0A1220;--bg-1:#0F1B2E;--line:#22344F;--text-1:#EDF2F9;--text-2:#94A6BF;--blue:#0083D8}
|
||
body{margin:0;background:var(--bg-0);color:var(--text-1);font:15px/1.5 -apple-system,'Segoe UI',sans-serif;padding:24px 16px}
|
||
main{max-width:980px;margin:0 auto}h1{font-size:22px;margin:0 0 4px}h2{font-size:17px;margin:34px 0 8px}
|
||
.k{color:var(--text-2);margin:12px 0 6px;font-size:13px}figure{margin:16px 0}.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
|
||
.pc{width:176px;height:176px;border-radius:50%%;border:4px solid #fff;display:block}.sm{width:96px;height:96px;border-width:3px}
|
||
.xs{width:40px;height:40px;border-width:1px}figcaption{color:var(--text-2);font-size:13px;margin-top:6px}
|
||
.desk{position:relative;max-width:820px;margin-bottom:24px}.desk>img:first-child{width:100%%;display:block}
|
||
.ov{position:absolute;border-radius:50%%;border:3px solid #fff;box-sizing:border-box}
|
||
.safe{position:absolute;border:2px dashed #E0A93E;box-sizing:border-box;pointer-events:none}
|
||
.pair{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:40px}
|
||
.phone{position:relative;width:min(412px,100%%);overflow:hidden}
|
||
.crop{position:absolute;inset:0;overflow:hidden}.crop img{position:absolute;top:0;left:0}
|
||
b{color:#2EA8F5}
|
||
</style></head><body><main>
|
||
<h1>Felhom.eu - Facebook pictures</h1>
|
||
<p class="k">A phone does NOT show the cover one way, so each cover is shown twice below. Both are MEASURED
|
||
on the live Page (R-919). <b>Signed in</b>: the centre %d px of the %d-pixel width, at full height - confirmed
|
||
on a real phone, where the window solved to x 351..1298 against the emulator's 351..1289. <b>Signed out</b>:
|
||
the full width, but top-anchored and only the top %d px - the bottom %d px is cut - with a bigger, higher
|
||
circle. So the sides are cut for one visitor and the bottom for the other. The Facebook APP is still not
|
||
measured - please check there.</p>
|
||
<p class="k">Profile picture: the logo MARK only \u2014 no \u201efelhom.eu\u201d lettering. At the 176 px Facebook shows (and
|
||
40 px in a comment) the mark plus the lettering left both too small to read, so the lettering was dropped and the
|
||
mark grew to %d %% of the circle. BOTH backgrounds now read at 40 px, which was not true while the lettering was
|
||
there: dark matches the covers and the Page as it stands, white separates the circle from the dark cover. The
|
||
covers below show the dark one.</p>
|
||
<h2>Profile picture</h2>%s
|
||
%s
|
||
</main></body></html>
|
||
""" % (round(PHONE_IN_X[1] - PHONE_IN_X[0]), CW, round(PHONE_OUT_Y), CH - round(PHONE_OUT_Y),
|
||
round(100.0 * logo_parts()[0].width / profile_width()[0]), prof_html, "".join(cov))
|
||
path = os.path.join(OUT, "preview.html")
|
||
with open(path, "w", encoding="utf-8") as fh:
|
||
fh.write(html)
|
||
return path
|
||
|
||
|
||
# ------------------------------------------------------------------ main
|
||
|
||
def main():
|
||
os.makedirs(OUT, exist_ok=True)
|
||
print("circle check (radius %.2f x width)" % CIRCLE_R)
|
||
try:
|
||
before = today_shape()
|
||
n0 = outside_circle(before, WHITE, CIRCLE_R)
|
||
print(" today's shape (logo.png %dx%d on a %d square): %d logo pixels outside the circle — expected > 0"
|
||
% (Image.open(LOGO_PNG).width, Image.open(LOGO_PNG).height, before.width, n0))
|
||
check(n0 > 0, "the check convicts today's shape (control)")
|
||
prof = [("profile-white.png", WHITE), ("profile-dark.png", BG0)]
|
||
built = []
|
||
for name, bg in prof:
|
||
p = build_profile(bg, name)
|
||
n = outside_circle(Image.open(p), bg, CIRCLE_R)
|
||
check(n == 0, "%s: %d logo pixels outside the circle" % (name, n))
|
||
built.append(p)
|
||
print("safe-area check (computer %d x %d; signed in a phone shows x %d..%d at full height, signed"
|
||
% (CW, CH, round(PHONE_IN_X[0]), round(PHONE_IN_X[1])))
|
||
print(" out the full width but only the top %d px - all MEASURED, R-919)" % round(PHONE_OUT_Y))
|
||
print(" safe %s, band %s, both profile circles kept clear" % (SAFE, BAND))
|
||
convicted, old_x0 = control_old_window()
|
||
print(" the pre-R-919 layout put the headline at x %d. The phone's crop edge is x %d, so %d px of it"
|
||
% (old_x0, round(PHONE_IN_X[0]), round(PHONE_IN_X[0]) - old_x0))
|
||
print(" were CUT on every phone; the measured safe edge is x %d, %d px further in (MARGIN %d)."
|
||
% (SAFE[0], SAFE[0] - old_x0, MARGIN))
|
||
check(convicted, "the safe check convicts the pre-R-919 layout (control)")
|
||
covers = [("cover-a.png", content_a(), (0.50, 0.78)), ("cover-b.png", content_b(), (0.68, 0.70)),
|
||
("cover-c.png", content_c(), (0.30, 0.74))]
|
||
cpaths = []
|
||
for name, (content, dec, headline), glow in covers:
|
||
check_safe(name, content, headline)
|
||
tot, lost = decor_cost(dec)
|
||
if tot:
|
||
print(" %s: decor %d px, %d (%d %%) cropped or behind a circle in some view - allowed"
|
||
% (name, tot, lost, round(100.0 * lost / tot)))
|
||
cpaths.append(build_cover(name, content, dec, glow))
|
||
except RuntimeError as e:
|
||
print("RENDER FAILED: %s" % e)
|
||
return 2
|
||
print("sizes read back from the files")
|
||
for p in built + cpaths:
|
||
w, h = Image.open(p).size
|
||
want = (profile_width()[0],) * 2 if "profile" in p else (CW, CH)
|
||
check((w, h) == want, "%s: %d x %d" % (os.path.basename(p), w, h))
|
||
pv = preview([("Dark background (recommended)", built[1]), ("White background", built[0])],
|
||
[("A - calm", cpaths[0]), ("B - the idea", cpaths[1]), ("C - the product", cpaths[2])])
|
||
print("preview: %s (%d KB)" % (os.path.relpath(pv, ROOT), os.path.getsize(pv) // 1024))
|
||
if FAILS:
|
||
print("FAILED: %d check(s)" % len(FAILS))
|
||
return 1
|
||
print("all checks passed")
|
||
return 0
|
||
|
||
|
||
if __name__ == "__main__":
|
||
sys.exit(main())
|