Client Devices & Endpoints Icons

from drawlib.canvas import save, setup
from drawlib.icons import client, original_client
from drawlib.shapes import rectangle
from drawlib.styles import Styles
from drawlib.text import text

setup(width=144, height=68)

columns = [
    (
        26.0,
        "1. Official Brand",
        "client (60 Logos)",
        Styles.Neutral,
        [
            ("Chrome", client.chrome),
            ("Apple", client.apple),
            ("Android", client.android),
            ("Tesla", client.tesla),
        ],
    ),
    (
        72.0,
        "2. 2D Pastel Brand",
        "original_client (60 Twins)",
        Styles.PrimaryNeutral,
        [
            ("Chrome", original_client.chrome),
            ("Apple", original_client.apple),
            ("Android", original_client.android),
            ("Tesla", original_client.tesla),
        ],
    ),
    (
        118.0,
        "3. 2D Pastel Concept",
        "original_client (+32 Generic)",
        Styles.SecondaryNeutral,
        [
            ("Laptop", original_client.laptop),
            ("Smartphone", original_client.smartphone),
            ("Vehicle", original_client.connected_car),
            ("Robotics", original_client.industrial_robot),
        ],
    ),
]

for cx, title, subtitle, card_style, icons_list in columns:
    rectangle((cx, 34), width=42.0, height=60, style=card_style.patch(shape_r=2.5))
    text((cx, 58.5), title, style=Styles.DarkBold.patch(text_size=11.0))
    text((cx, 53.2), subtitle, style=Styles.Muted.patch(text_size=10.0))

    offsets = [(-9.8, 40.5), (9.8, 40.5), (-9.8, 19.5), (9.8, 19.5)]
    sub_card_style = Styles.White.patch(shape_r=1.5, line_width=0.6)
    for (dx, iy), (lbl, fn) in zip(offsets, icons_list, strict=True):
        ix = cx + dx
        rectangle((ix, iy - 2.0), width=17.5, height=17.5, style=sub_card_style)
        fn((ix, iy + 1.2), width=7.5, style=Styles.Primary)
        text((ix, iy - 6.8), lbl, style=Styles.DarkBold.patch(text_size=10.0))

save()

from drawlib.canvas import save, setup
from drawlib.icons import client
from drawlib.shapes import rectangle
from drawlib.styles import Styles
from drawlib.text import text

setup(width=144, height=62)

row1 = [
    ("chrome", "Web Browser", client.chrome, Styles.Neutral),
    ("safari", "Web Browser", client.safari, Styles.PrimaryNeutral),
    ("firefox", "Web Browser", client.firefox, Styles.Neutral),
    ("windows", "Desktop OS", client.windows, Styles.SecondaryNeutral),
    ("macos", "Desktop OS", client.macos, Styles.Neutral),
]

row2 = [
    ("ios", "Mobile OS", client.ios, Styles.PrimaryNeutral),
    ("android", "Mobile OS", client.android, Styles.Neutral),
    ("linux", "Kernel / OS", client.linux, Styles.SecondaryNeutral),
    ("playstation", "Game Console", client.playstation, Styles.Neutral),
    ("tesla", "Connected EV", client.tesla, Styles.PrimaryNeutral),
]

for row_idx, items in enumerate([row1, row2]):
    cy = 45.0 if row_idx == 0 else 17.0
    for col_idx, (name, cat, icon_fn, card_st) in enumerate(items):
        cx = 18.4 + col_idx * 26.8
        rectangle((cx, cy), width=24.8, height=24.0, style=card_st.patch(shape_r=2))
        icon_fn((cx, cy + 4.5), width=8.0, style=Styles.Primary)
        text((cx, cy - 3.2), name, style=Styles.DarkBold.patch(text_size=10.0))
        text((cx, cy - 8.0), cat, style=Styles.Muted.patch(text_size=10.0))

save()

from drawlib.canvas import save, setup
from drawlib.icons import original_client
from drawlib.shapes import rectangle
from drawlib.styles import Styles
from drawlib.text import text

setup(width=144, height=62)

row1 = [
    ("laptop", "Workstation", original_client.laptop, Styles.Neutral),
    ("desktop_pc", "Desktop PC", original_client.desktop_pc, Styles.PrimaryNeutral),
    ("smartphone", "Mobile App", original_client.smartphone, Styles.Neutral),
    ("tablet", "Tablet Client", original_client.tablet, Styles.SecondaryNeutral),
    ("smartwatch", "Wearable", original_client.smartwatch, Styles.Neutral),
]

row2 = [
    ("vr_headset", "XR / Spatial", original_client.vr_headset, Styles.PrimaryNeutral),
    ("pos_terminal", "Retail POS", original_client.pos_terminal, Styles.Neutral),
    ("connected_car", "V2X Telemetry", original_client.connected_car, Styles.SecondaryNeutral),
    ("drone", "Autonomous UAV", original_client.drone, Styles.Neutral),
    ("industrial_robot", "Factory OT", original_client.industrial_robot, Styles.PrimaryNeutral),
]

for row_idx, items in enumerate([row1, row2]):
    cy = 45.0 if row_idx == 0 else 17.0
    for col_idx, (name, role, icon_fn, card_st) in enumerate(items):
        cx = 18.4 + col_idx * 26.8
        rectangle((cx, cy), width=24.8, height=24.0, style=card_st.patch(shape_r=2))
        icon_fn((cx, cy + 4.5), width=8.0, style=Styles.Primary)
        text((cx, cy - 3.2), name, style=Styles.DarkBold.patch(text_size=10.0))
        text((cx, cy - 8.0), role, style=Styles.Muted.patch(text_size=10.0))

save()