c_meyer/pxt-calliope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adds full-page instruction printing

Browse Source
This commit is contained in:
darzu 2016-09-01 19:06:56 -07:00
parent b3d9c167e1
commit 359c456577
2 changed files with 32 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
sim/instructions/instructions.ts
View File

@ -20,34 +20,37 @@ namespace pxsim.instructions {
const LBL_LEFT_PAD = 5; const LBL_LEFT_PAD = 5;
const REQ_WIRE_HEIGHT = 45; const REQ_WIRE_HEIGHT = 45;
const REQ_CMP_HEIGHT = 55; const REQ_CMP_HEIGHT = 55;
const REQ_CMP_SCALE = 0.5; const REQ_CMP_SCALE = 0.5 * 4;
type Orientation = "landscape" | "portrait"; type Orientation = "landscape" | "portrait";
const ORIENTATION: Orientation = "portrait"; const ORIENTATION: Orientation = "portrait";
const PPI = 96.0; const PPI = 96.0;
const PAGE_SCALAR = 0.95;
const [FULL_PAGE_WIDTH, FULL_PAGE_HEIGHT] const [FULL_PAGE_WIDTH, FULL_PAGE_HEIGHT]
= (ORIENTATION == "portrait" ? [PPI * 8.5, PPI * 11.0] : [PPI * 11.0, PPI * 8.5]); = (ORIENTATION == "portrait" ? [PPI * 8.5 * PAGE_SCALAR, PPI * 11.0 * PAGE_SCALAR] : [PPI * 11.0 * PAGE_SCALAR, PPI * 8.5 * PAGE_SCALAR]);
const PAGE_MARGIN = PPI * 0.45; const PAGE_MARGIN = PPI * 0.45;
const PAGE_WIDTH = FULL_PAGE_WIDTH - PAGE_MARGIN * 2; const PAGE_WIDTH = FULL_PAGE_WIDTH - PAGE_MARGIN * 2;
const PAGE_HEIGHT = FULL_PAGE_HEIGHT - PAGE_MARGIN * 2; const PAGE_HEIGHT = FULL_PAGE_HEIGHT - PAGE_MARGIN * 2;
const BORDER_COLOR = "gray"; const BORDER_COLOR = "gray";
const BORDER_RADIUS = 5; const BORDER_RADIUS = 5 * 4;
const BORDER_WIDTH = 2; const BORDER_WIDTH = 2 * 2;
const [PANEL_ROWS, PANEL_COLS] = [2, 2]; const [PANEL_ROWS, PANEL_COLS] = [1, 1];
const PANEL_MARGIN = 20; const PANEL_MARGIN = 20;
const PANEL_PADDING = 8; const PANEL_PADDING = 8 * 3;
const PANEL_WIDTH = PAGE_WIDTH / PANEL_COLS - (PANEL_MARGIN + PANEL_PADDING + BORDER_WIDTH) * PANEL_COLS; const PANEL_WIDTH = PAGE_WIDTH / PANEL_COLS - (PANEL_MARGIN + PANEL_PADDING + BORDER_WIDTH) * PANEL_COLS;
const PANEL_HEIGHT = PAGE_HEIGHT / PANEL_ROWS - (PANEL_MARGIN + PANEL_PADDING + BORDER_WIDTH) * PANEL_ROWS; const PANEL_HEIGHT = PAGE_HEIGHT / PANEL_ROWS - (PANEL_MARGIN + PANEL_PADDING + BORDER_WIDTH) * PANEL_ROWS;
const BOARD_WIDTH = 240; const BOARD_WIDTH = 465;
const BOARD_LEFT = (PANEL_WIDTH - BOARD_WIDTH) / 2.0 + PANEL_PADDING; const BOARD_LEFT = (PANEL_WIDTH - BOARD_WIDTH) / 2.0 + PANEL_PADDING;
const BOARD_BOT = PANEL_PADDING; const BOARD_BOT = PANEL_PADDING;
const NUM_BOX_SIZE = 60; const NUM_BOX_SIZE = 120;
const NUM_FONT = 40; const NUM_FONT = 80;
const NUM_MARGIN = 5; const NUM_MARGIN = 10;
const FRONT_PAGE_BOARD_WIDTH = 200; const FRONT_PAGE_BOARD_WIDTH = 400;
const PART_SCALAR = 2.3
const PARTS_BOARD_SCALE = 0.17; const PARTS_BOARD_SCALE = 0.17;
const PARTS_BB_SCALE = 0.25; const PARTS_BB_SCALE = 0.25;
const PARTS_CMP_SCALE = 0.3; const PARTS_CMP_SCALE = 0.3;
const PARTS_WIRE_SCALE = 0.23; const PARTS_WIRE_SCALE = 0.23;
const BACK_PAGE_BOARD_WIDTH = PANEL_WIDTH - PANEL_PADDING * 1.5;
const STYLE = ` const STYLE = `
.instr-panel { .instr-panel {
margin: ${PANEL_MARGIN}px; margin: ${PANEL_MARGIN}px;
@ -56,11 +59,12 @@ namespace pxsim.instructions {
border-color: ${BORDER_COLOR}; border-color: ${BORDER_COLOR};
border-style: solid; border-style: solid;
border-radius: ${BORDER_RADIUS}px; border-radius: ${BORDER_RADIUS}px;
display: inline-block; display: block;
width: ${PANEL_WIDTH}px; width: ${PANEL_WIDTH}px;
height: ${PANEL_HEIGHT}px; height: ${PANEL_HEIGHT}px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
page-break-inside: avoid;
} }
.board-svg { .board-svg {
margin: 0 auto; margin: 0 auto;
@ -90,10 +94,11 @@ namespace pxsim.instructions {
} }
.reqs-div { .reqs-div {
margin-left: ${PANEL_PADDING + NUM_BOX_SIZE}px; margin-left: ${PANEL_PADDING + NUM_BOX_SIZE}px;
margin-top: 5px;
} }
.partslist-wire, .partslist-wire,
.partslist-cmp { .partslist-cmp {
margin: 5px; margin: 10px;
} }
.partslist-wire { .partslist-wire {
display: inline-block; display: inline-block;
@ -269,8 +274,8 @@ namespace pxsim.instructions {
let svgAtts = { let svgAtts = {
"viewBox": `${dims.l} ${dims.t} ${dims.w} ${dims.h}`, "viewBox": `${dims.l} ${dims.t} ${dims.w} ${dims.h}`,
"width": dims.w, "width": dims.w * PART_SCALAR,
"height": dims.h, "height": dims.h * PART_SCALAR,
"preserveAspectRatio": "xMidYMid", "preserveAspectRatio": "xMidYMid",
}; };
svg.hydrate(svgEl, svgAtts); svg.hydrate(svgEl, svgAtts);
@ -560,7 +565,6 @@ namespace pxsim.instructions {
return [panel, props]; return [panel, props];
} }
function mkFinalPanel(props: BoardProps) { function mkFinalPanel(props: BoardProps) {
const BACK_PAGE_BOARD_WIDTH = PANEL_WIDTH - 20;
let panel = mkPanel(); let panel = mkPanel();
addClass(panel, "back-panel"); addClass(panel, "back-panel");

24
sim/public/siminstructions.html
View File

@ -96,9 +96,9 @@
.organization { .organization {
position: absolute; position: absolute;
bottom: 1rem; bottom: 2rem;
right: 1rem; right: 2rem;
height: 2rem; height: 4rem;
} }
h1 { h1 {
@ -112,23 +112,23 @@
#front-panel .board-svg { #front-panel .board-svg {
position: absolute; position: absolute;
left: 1rem; left: 2rem;
width: 140px; width: 300px;
top: 8rem; top: 16rem;
} }
#proj-title { #proj-title {
top: 20px;
position: absolute;
width: 100%; width: 100%;
font-size: 70px;
margin-top: 20px;
} }
#proj-code { #proj-code {
width: 140px; width: 300px;
height: 200px; height: 400px;
position: absolute; position: absolute;
right: 1rem; right: 2rem;
top: 8rem; top: 16rem;
} }
#proj-code-container { #proj-code-container {
width: 100%; width: 100%;