Yazdırılabilir sayfalar (A4)

Bitmiş bir şekil yazdırılabilir de: makineyi kâğıt üzerinde anlatan, canlı şekille aynı sayfadan ve aynı modelden çizilen tek bir A4 (ya da ABD Letter) PDF. Bunu yalnızca kullanıcı yazdırılabilir bir şey istediğinde yapın: bir el notu, bir poster, bir PDF, bir A4 ya da Letter sayfa, bir sınıf duvarı ya da klasör için bir şey.

İşi scripts/print.mjs yapar. Derlenmiş açık tema sayfasını başsız (headless) Chrome'da açar, listelediğiniz pozları oynatır ve her pozu vektör SVG olarak dondurur (WebGL katmanları 2× PNG olarak). Ardından durağan görüntüleri üç biçimden birinde yerleştirir ve PDF'i Chrome ile yazdırır.

node scripts/print.mjs examples/raptor-engine/sheet.mjs                 # poster, A4
node scripts/print.mjs examples/raptor-engine/sheet.mjs --format all --png
node scripts/print.mjs examples/arcade-cabinet/sheet.mjs --format detailed --letter

Spesifikasyonun yanına <out>-<format>-a4.pdf ve .html yazar (--letter ile -letter), --png ile ayrıca bir önizleme .png'si üretir. Bir biçim sayfa sayısını aşarsa 1 koduyla çıkar.

Bu sitede Türkçe sayfalar scripts/print-tr.mjs ile aynı hattan üretilir: İngilizce spesifikasyonun pozlarını ve seçicilerini kullanır, yalnızca sözcükleri scripts/i18n/sheets/ içindeki Türkçe karşılıklarıyla değiştirir.

Üç biçim

Biçim	Sayfa	Üzerinde ne var	Ne için
`poster` (varsayılan)	1	Büyük yazılmış ad, soru ve kısa bir giriş, büyük sayılardan oluşan bir sütun, numaralı iğneli şekil, ardından her parça ve ne yaptığına dair birer satır	Bir duvar, bir kapak sayfası, ilk bakış
`drawing`	1	Numaralı bir çizim başlığı, iğneli şekil, bir parça listesi, bir spesifikasyon, başka bir pozun küçük bir iç görüntüsü, ardından çalışan parçaların aydınlatıldığı bir adım şeridi	Teknik bir el notu
`detailed`	2	Sayfa 1: iğneli ve harfli yakın çekim işaretli şekil, soru, giriş, sayılar, satırıyla her parça ve şeklin altında yuvarlak yakın çekimler. Sayfa 2: iki üç cümleyle her adım büyük ve aydınlatılmış bir durağan görüntü olarak, "neden" kutusu ve spesifikasyon	Ödev, bir klasör, tam olarak anlamak isteyen biri

Üçü de sadedir ve siyah beyaz iyi basılır: kılcal çizgiler, sözcükler için tek bir sans yazı tipi, yalnızca etiketler için büyük harfli mono, siyah iğneler ve beyaz kâğıt üzerinde açık temada şekil.

Spesifikasyon

Bir sayfa, örneğin yanındaki bir modüldür: sheet.mjs. Varsayılan dışa aktarımı sayfanın nerede olduğunu, neyin yakalanacağını ve ne söyleneceğini belirtir. İçindeki her sayı ve cümle şeklin modelinden ya da açıklamasından gelmelidir; bu, şeklin kendisiyle aynı doğruluk kuralıdır.

export default {
  page: "raptor-engine-light.html",             // derlenmiş açık tema sayfası, bu dosyaya göre
  out: "raptor-engine",                         // çıktı temel adı
  layers: ".rp-stage > svg.rp-back, .rp-stage > svg.rp-front", // dondurulacak SVG katmanları, arkadan öne
  rasterSelector: ".rp-stage",                  // WebGL görüntülerinin kırpıldığı kutu
  strip: [".rp-deckglow"],                      // her durağan görüntüden çıkarılacak öğeler
  reduced: true,                                // azaltılmış hareketi taklit et (sakin, tur yok); animasyonu yakalamak için false
  views: {                                      // pozlar, bu sırayla, her biri kendi eylemlerinden sonra yakalanır
    rest: {},
    apart: { actions: [["key", " "], ["wait", 2500]], reset: [["key", " "], ["wait", 2500]] },
    firing: { actions: [["key", "i"], ["wait", 3500]], raster: { region: [250, 150, 432, 530] } },
  },
  name, title, number, tagline, question, lead, quote,
  numbers: [["230", "tf", "thrust at sea level"]],
  spec: [["Chamber", "300 bar"]],
  why: { title: "Why full flow?", text: "…" },
  parts: [{ id: "otp", name: "Oxygen turbopump", say: "…", select: '.it[data-piece="otp"]', at: [x, y] }],
  main: { view: "apart", crop: [x, y, w, h], layers: [1], hide: ["stand"] },
  inset: { label: "Assembled", view: "rest", crop: [x, y, w, h] },
  steps: [{ view: "apart", title: "…", text: "…", focus: ["otp", "ftp"] }],
  details: [{ title: "…", text: "…", around: ["otp"], focus: ["otp"] }],
};

Eylemler drive.mjs eylemleridir. ["slow", 0.03] ve ardından ["until", js], bir animasyonun bir anını tam olarak yakalar (atari kabinindeki kanaldaki jeton); reset bir sonraki görünümden önce sayfayı eski haline getirir.
Parçalar canlı SVG üzerindeki CSS seçicileridir; bu yüzden her şekil çalışır: Raptor'un montaj grupları .it[data-piece] gruplarıdır, atari kabininkiler kaydedici adlarından gelen [data-name^="mech"] önekleridir. name'i olmayan bir parça listelenmez ve iğnelenmez, ama adımlar onu yine de aydınlatabilir (coin) ya da gizleyebilir (stand). İğne, parçanın en büyük şeklinin merkezine oturur; bu boş bir alana denk geliyorsa at (viewBox birimleri) verin. Birbirine sıkışan iğneler açılır ve noktalarına kılcal bir çizgi çizer.
Odak (focus) listelenen parçaları aydınlatır (siyah çizgiler) ve etiketli olsun olmasın diğer her şeyi griye çeker. Gizle (hide) bir parçayı o durağan görüntüden çıkarır: bir yakın çekimin önünde duranı gizleyin (atari kabininde mekanizmanın önündeki jeton kapağı).
Kırpmalar şeklin viewBox birimlerindedir. Kırpma yoksa ana görünüm çizilen içeriğe göre kırpılır; adımlar ve yakın çekimler odak ya da around parçalarının çevresinden kırpılır, ama asla ana kırpmanın genişliğinin %42'sinin altına inmez.
Raster görüntüler yalnızca WebGL içindir. Görünümü, çekilecek viewBox region'ı ile raster olarak işaretleyin; alev vektör sayfanın içinde 2× PNG olarak basılır.
Metin sığmalıdır: adımlar için en fazla beş sözcüklük başlıklar, her parça için bir satır, her adım için iki üç cümle. Bir biçim başka bir sayfaya taşarsa betik başarısız olur.

Kontrol edin

Önce açık tema sayfasını derleyin (node build.mjs --light).
--format all --png ile çalıştırın ve her PNG'yi okuyun. Boş alana düşen iğnelere, yanlış parçayı gösteren bir yakın çekime, başka bir parçanın arkasında kalmış aydınlatılmış bir parçaya ve sayfanın dibinde kesilen metne bakın.
PDF'e ya da HTML'e 4× yakınlaşın (<name>.html?print üzerinde drive.mjs ["shot", out, ".ps", 4, [x, y, w, h]]): çizgiler vektör ve keskin olmalı, aydınlatılmış parçalar bir adım görüntüsü boyutunda öne çıkmalıdır.
Yapabiliyorsanız bir sayfa yazdırın. Açık gri soluk tonlar ve kılcal çizgiler sıradan bir ofis lazer yazıcısında da okunmalıdır.

Şekil üzerinde bir PDF bağlantısı

kit/pdf-button.mjs, pdfButton(href)'i dışa aktarır: kartın sağ üstünde simgeli küçük bir "PDF" bağlantısı; kendi CSS'ini taşır, böylece onu kullanmayan sayfalar değişmez. Onu kart gövdesinin en başına ve yalnızca dosya varsa koyun (examples/push-button/build.mjs). Sıra: açık tema sayfasını derleyin, yazdırın, ardından düğme görünsün diye yeniden derleyin.

Daha uzun ayrıntılı sayfalar

detailed spesifikasyona göre 2–4 sayfa sürer:

Genel bakış (her zaman): iğneli şekil, sayılar, birer satırlık parçalar, yuvarlak yakın çekimler (details).
Nasıl çalışır: sayfa başına altı adım, son yuvayı why alır; daha fazla adım başka bir sayfaya akar.
Montaj grupları (spesifikasyonda assemblies varsa): sayfa başına en fazla dört; her biri { title, text, parts: [ids] }, kendi iğneleri ve parça numaralarıyla büyük, aydınlatılmış bir yakın çekim olarak çizilir. On ya da daha fazla parçalı bir şekle üç dört grup verin.
Spesifikasyon son sayfayı kapatır.

maxPages (2–4, varsayılan 4) sayıyı sınırlar: önce montaj grubu sayfaları düşer; sınır için fazla adım olması bir hatadır. Referans examples/raptor-engine/sheet.mjs'tir (3 sayfa); push-button ve arcade-cabinet 2 sayfada kalır.