2424< link rel ="stylesheet " href ="styles/console.css ">
2525< meta name ="description " content ="PLOTFLOW is an independent pen-plotter studio. Machine-drawn studies and original commissioned pieces, in pigment ink on Bristol. ">
2626< link rel ="canonical " href ="https://plotflow.io/ ">
27- < meta name ="theme-color " content ="#43463e ">
27+ < meta name ="theme-color " content ="#33362b ">
2828< link rel ="icon " href ="/favicon.svg " type ="image/svg+xml ">
2929< link rel ="apple-touch-icon " href ="/apple-touch-icon.png ">
3030< meta property ="og:type " content ="website ">
4040</ head >
4141< body >
4242
43- <!-- CONSOLE BAR -->
44- < header class ="pf-bar ">
43+ <!-- TOP BAR -->
44+ < nav > < div class ="nav-in ">
4545 < a href ="/ " class ="brand "> PLOTFLOW< i > *</ i > </ a >
46- < span class ="pf-job "> CONSOLE · PLOTTING < b id ="pfJobCode "> —</ b > · LIVE SIMULATION</ span >
47- < div class ="pf-nav ">
48- < a href ="#shop "> Studies</ a > < a href ="commissions.html "> Commissions</ a > < a href ="#process "> Process</ a > < a href ="about.html "> Studio</ a >
49- </ div >
50- </ header >
51-
52- <!-- WORKSPACE / LIVE PLOT -->
53- < section class ="pf-ws " id ="feature ">
54- < aside class ="pf-side ">
55- < div class ="pf-tabs "> < span > SCENE</ span > < span class ="on "> PLOT</ span > < span > QUEUE</ span > < span > LOG</ span > </ div >
56-
57- < div class ="pf-sec ">
58- < h5 > STUDY QUEUE · < span class ="jp "> 習作</ span > </ h5 >
59- < div id ="pfQueue "> </ div >
60- </ div >
46+ < div class ="nav-links "> < a href ="#shop "> Studies</ a > < a href ="commissions.html "> Commissions</ a > < a href ="#process "> Process</ a > < a href ="about.html "> Studio</ a > </ div >
47+ < a class ="cart " href ="commissions.html "> Commission →</ a >
48+ </ div > </ nav >
6149
62- < div class ="pf-sec ">
63- < h5 > SPEED · SIMULATION</ h5 >
64- < div class ="seg " id ="speed "> < button data-s ="0.5 "> 0.5×</ button > < button data-s ="1 " class ="on "> 1×</ button > < button data-s ="2 "> 2×</ button > < button data-s ="4 "> 4×</ button > </ div >
65- < p class ="pf-note " id ="simx "> </ p >
66- < p class ="pf-note "> SIMULATION PACE ONLY — THE REAL PLOT TIME SHOWS IN THE LIVE PLOT CARD.</ p >
50+ <!-- MASTHEAD -->
51+ < header class ="mast ">
52+ < span class ="reg l "> +</ span > < span class ="reg r "> +</ span >
53+ < div class ="wrap mast-in ">
54+ < div >
55+ < div class ="mast-label "> STUDY ARCHIVE ｜< span class ="jp "> 習作</ span > · LIVE SIMULATION</ div >
56+ < h1 > Plots on paper,< br > drawn line by line.</ h1 >
57+ < p class ="mast-lede "> A pen-plotter studio. Universal-Century studies are catalogued below and
58+ displayed, not sold — original linework is taken on through commissions.</ p >
6759 </ div >
68-
69- < div class ="pf-sec pf-machine ">
70- < h5 > MACHINE STATE · < b > PLOTTING</ b > </ h5 >
71- < button class ="pf-big " id ="play "> Pause</ button >
72- < div class ="pf-row2 "> < button class ="pf-btn " id ="restart "> Restart</ button > < button class ="pf-btn " id ="skip "> Skip ▸︎▸︎</ button > </ div >
60+ < div class ="mast-side ">
61+ < img src ="assets/logo-seal.svg " alt ="" width ="92 " height ="92 ">
62+ < span class ="jp "> ペンプロッター</ span >
7363 </ div >
64+ </ div >
65+ </ header >
7466
75- < div class ="selwrap " hidden > < select id ="suit " aria-label ="Edition "> </ select > </ div >
76- </ aside >
77-
78- < div class ="pf-stage ">
67+ <!-- LIVE PLOT — the sheet, full-bleed -->
68+ < section class ="plot " id ="feature ">
69+ < div class ="plot-stage ">
70+ < span class ="bl " id ="bedlabel "> BED 01 · ARCHIVAL</ span >
71+ < span class ="pf-view "> PROGRAM VIEW · DRAWN IN EXECUTION ORDER · INK 0.30 MM</ span >
7972 < div class ="bed " id ="bed ">
8073 < span class ="corner c-tl "> </ span > < span class ="corner c-tr "> </ span > < span class ="corner c-bl "> </ span > < span class ="corner c-br "> </ span >
81- < span class ="bl " id ="bedlabel "> BED 01 · ARCHIVAL</ span >
82- < span class ="pf-view "> PROGRAM VIEW · DRAWN IN EXECUTION ORDER · INK 0.30 MM</ span >
8374 < canvas id ="pcanvas "> </ canvas >
8475 < svg id ="stage " viewBox ="0 0 1493 801 " preserveAspectRatio ="xMidYMid meet ">
8576 < path id ="ppath " d =""> </ path >
@@ -88,27 +79,27 @@ <h5>MACHINE STATE · <b>PLOTTING</b></h5>
8879 < path id ="pen-x " d ="" stroke ="#15140f " stroke-width ="1.6 " vector-effect ="non-scaling-stroke "> </ path >
8980 </ g >
9081 </ svg >
91- < img class ="pf-seal " src ="assets/logo-seal.svg " alt ="" width ="48 " height ="48 ">
9282 </ div >
83+ < img class ="pf-seal " src ="assets/logo-seal.svg " alt ="" width ="48 " height ="48 ">
84+ </ div >
9385
94- < aside class ="pf-card ">
95- < div class ="hd "> < b > LIVE PLOT*</ b > < span > MACHINE</ span > </ div >
96- < div class ="big "> < label > PROGRESS</ label > < b > < span id ="pct "> 0</ span > < i > %</ i > </ b > </ div >
97- < div class ="pbar "> < b id ="pbar "> </ b > </ div >
98- < div class ="grid ">
99- < div > < label > INK LAID</ label > < b > < span id ="ink "> 0.00</ span > < i > / < span id ="inktot "> 0.00</ span > m</ i > </ b > </ div >
100- < div > < label > POSITION</ label > < b > < span id ="cx "> 000</ span > · < span id ="cy "> 000</ span > < i > mm</ i > </ b > </ div >
101- < div > < label > ELAPSED</ label > < b > < span id ="elapsed "> 00:00</ span > </ b > </ div >
102- < div > < label > PLOT TIME</ label > < b > < span id ="total "> 00:00</ span > </ b > </ div >
103- </ div >
104- </ aside >
86+ < div class ="plot-strip ">
87+ < div class ="pbar "> < b id ="pbar "> </ b > </ div >
88+ < span class ="strip-live "> ● PLOTTING</ span >
89+ < span class ="strip-cap " id ="capName "> —</ span >
90+ < span class ="strip-stat "> < b > < span id ="pct "> 0</ span > %</ b > </ span >
91+ < span class ="strip-stat "> INK < b > < span id ="ink "> 0.00</ span > </ b > / < span id ="inktot "> 0.00</ span > m</ span >
92+ < span class ="strip-stat tm "> < b > < span id ="elapsed "> 00:00</ span > </ b > / < span id ="total "> 00:00</ span > </ span >
93+ < span class ="strip-stat pos "> X < b id ="cx "> 000</ b > · Y < b id ="cy "> 000</ b > mm</ span >
94+ < span class ="strip-sp "> </ span >
95+ < span class ="strip-note " id ="simx "> </ span >
96+ < button class ="strip-btn " id ="play "> Pause</ button >
97+ < button class ="strip-btn " id ="restart "> Restart</ button >
98+ < button class ="strip-btn " id ="skip "> Skip ▸︎▸︎</ button >
99+ < div class ="seg " id ="speed "> < button data-s ="0.5 "> 0.5×</ button > < button data-s ="1 " class ="on "> 1×</ button > < button data-s ="2 "> 2×</ button > < button data-s ="4 "> 4×</ button > </ div >
100+ < div class ="selwrap " hidden > < select id ="suit " aria-label ="Edition "> </ select > </ div >
105101 </ div >
106102</ section >
107- < div class ="pf-status ">
108- < span > PEN 0.3 MM · RED</ span > < span > FEED 1100 MM/MIN</ span > < span > SHEET 11×14″ BRISTOL</ span >
109- < span class ="sp "> </ span >
110- < span > AXIDRAW · SIMULATED</ span >
111- </ div >
112103
113104<!-- MANIFESTO -->
114105< section class ="mani ">
@@ -139,15 +130,18 @@ <h2>Studies<span class="star">*</span></h2><span class="jp">習作</span>
139130</ section >
140131
141132<!-- COMMISSIONS -->
142- < section class ="comm " id ="commissions ">
143- < div class ="grain "> </ div >
144- < div class ="wrap comm-in ">
145- < div > < h2 > Commissions< span class ="star "> *</ span > </ h2 > < div class ="jp "> 特注制作</ div > </ div >
146- < div >
147- < p > The studies above are fan works and are not sold. Commissioned work is original:
148- a machine designed for the sheet, rebuilt as vector line work, and drawn by the
149- plotter — one drawing, one owner. From $350 for 11×14″.</ p >
150- < a class ="comm-cta " href ="commissions.html "> Commission a piece →</ a >
133+ < section id ="commissions ">
134+ < div class ="wrap ">
135+ < div class ="comm-box ">
136+ < img class ="seal " src ="assets/logo-seal.svg " alt ="" width ="52 " height ="52 ">
137+ < div >
138+ < div class ="comm-label "> COMMISSIONS ｜< span class ="jp "> 特注制作</ span > </ div >
139+ < h2 > Original linework to your spec.</ h2 >
140+ < p > The studies above are fan works and are not sold. Commissioned work is original:
141+ a machine designed for the sheet, rebuilt as vector line work, and drawn by the
142+ plotter — one drawing, one owner. From $350 · 11×14″ · 0.3 mm pigment on Strathmore Bristol.</ p >
143+ </ div >
144+ < a class ="comm-cta " href ="commissions.html "> Request a slot</ a >
151145 </ div >
152146 </ div >
153147</ section >
@@ -202,28 +196,17 @@ <h2>Notifications<span class="star">*</span></h2>
202196< script src ="scripts/shop.js "> </ script >
203197< script src ="scripts/plotter.js "> </ script >
204198< script >
205- // Sidebar edition queue — drives the same #suit select plotter.js listens to .
199+ // Control-strip caption — mirrors whichever study the plotter is drawing .
206200 ( function ( ) {
207- var sel = document . getElementById ( 'suit' ) , box = document . getElementById ( 'pfQueue' ) ;
208- var job = document . getElementById ( 'pfJobCode' ) ;
209- if ( ! sel || ! box || ! window . PLOTFLOW ) return ;
210- var S = PLOTFLOW . suits , ORDER = PLOTFLOW . plotterOrder || Object . keys ( S ) ;
211- function draw ( ) {
212- box . innerHTML = ORDER . map ( function ( k ) {
213- var s = S [ k ] , on = sel . value === k ;
214- return '<button class="pf-q' + ( on ? ' on' : '' ) + '" data-k="' + k + '">' +
215- '<span class="code">' + s . code + '</span><span class="nm">' + s . name + '</span>' +
216- '<span class="st">' + ( on ? 'PLOTTING' : 'ARCHIVE' ) + '</span></button>' ;
217- } ) . join ( '' ) ;
218- if ( job && S [ sel . value ] ) job . textContent = S [ sel . value ] . code ;
219- }
220- box . addEventListener ( 'click' , function ( e ) {
221- var b = e . target . closest ( '.pf-q' ) ; if ( ! b ) return ;
222- sel . value = b . dataset . k ;
223- sel . dispatchEvent ( new Event ( 'change' ) ) ;
224- draw ( ) ;
225- } ) ;
201+ var sel = document . getElementById ( 'suit' ) , cap = document . getElementById ( 'capName' ) ;
202+ if ( ! sel || ! cap || ! window . PLOTFLOW ) return ;
203+ var S = PLOTFLOW . suits ;
204+ function draw ( ) { var s = S [ sel . value ] ; if ( s ) cap . textContent = s . code + ' · ' + s . name ; }
226205 sel . addEventListener ( 'change' , draw ) ;
206+ if ( window . PlotflowPlotter ) {
207+ var orig = PlotflowPlotter . load ;
208+ PlotflowPlotter . load = function ( k ) { orig ( k ) ; draw ( ) ; } ;
209+ }
227210 draw ( ) ;
228211 } ) ( ) ;
229212</ script >
0 commit comments