
diff --git a/.gitignore b/.gitignore index 56e3b9c..b1f7460 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ README.html /doc/ /Meta/ .DS_Store +docs/ diff --git a/docs/.nojekyll b/docs/.nojekyll deleted file mode 100644 index 8b13789..0000000 --- a/docs/.nojekyll +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/404.html b/docs/404.html deleted file mode 100644 index c2fcce0..0000000 --- a/docs/404.html +++ /dev/null @@ -1,92 +0,0 @@ - - -
- - - - -
--Disclaimer Some of the examples below are derived -from the Pikchr project.
-
# fontFamily: Abel
-
-/*
- Example 1. André Leite (leite@castlab.org)
- */
-/* 1 */ dimen_ = 1
-/* 2 */ Origem: (0,0)
-/* 3 */ B1:box "Microfone";
-/* 4 */ L1:line from B1.e right dimen_/2;
-/* 5 */ L2:line -> up dimen_/3.2 then right dimen_/2;
-/* 6 */ L3:line -> from L1.end down dimen_/3.2 then right dimen_/2;
-/* 7 */ B2:box "Filtro PF" "em f₀" with .w at L2.end;
-/* 8 */ B3:box "Filtro PF" "em f₁" with .w at L3.end;
-/* 9 */ L4:line -> from B2.e right dimen_/2 then down dimen_/3.2 \
-/* 10 */ then right dimen_/2
-/* 11 */ L4:line -> from B3.e right dimen_/2 then up dimen_/3.2 \
-/* 12 */ then right dimen_/2
-/* 13 */ B4: box "Rede" "Neural" with .w at (L4.end.x,L1.end.y) /*
- Example 2. André Leite (leite@castlab.org)
- */
-
-dimen_= .75
-Origem:(0,0)
-B1:box "Agente" "Externo";
-L1:line -> from B1.s down dimen_/4 \
- then left 1.5*dimen_ \
- then down dimen_/4;
-B2:box wid 1 "Sensores" "Digitais";
-L2:line -> from B1.s down dimen_/4 \
- then right 1.5*dimen_ \
- then down dimen_/4;
-B3:box wid 1 "Sensores" "Analógicos";
-L3:line -> from B2.s down dimen_/2;
-B4:box wid 1 "Transmissor" "FSK";
-L4:line -> from B3.s down dimen_/2;
-B5:box wid 1 "Transmissor" "FM";
-L5:line -> from B4.s down dimen_/2;
-B6:box wid 1 "Receptor" "FSK";
-L6:line -> from B5.s down dimen_/2;
-B7:box wid 1 "Receptor" "FM";
-L7:line -> from B6.s down .5*dimen_ then right 4.5*dimen_ \
- then up 3*dimen_ \
- then right .5*dimen_
-L8:line -> from B7.s down .25*dimen_ then right 1.25*dimen_ \
- then up 3*dimen_ \
- then right .75*dimen_
-B8:box wid 1 "Rede" big "Neural" big \
- with .w at 1/2<L7.end, L8.end> fill lightblue
-L9:line -> from B8.e right dimen_;
-B9:box wid 1 "Sistema de" "Controle" "de Acesso";
-L10:line -> from B8.e+(0,boxht/6) right dimen_/2 \
- then up dimen_ then right dimen_/2;
-B10:box wid 1 "Sistema de" "Alarme";
-L11:line -> from B8.e-(0,boxht/6) right dimen_/2 \
- then down dimen_ then right dimen_/2;
-B11:box wid 1 "Sistema de" "Anúncio"; /*
- Example 3. André Leite (leite@castlab.org)
- */
-$len = 175px;
-margin = 20px;
-/* First Stage */
- B1E: box rad 5px wid 2*$len fill white;
- LineCusto: line <- from B1E.n - ((2/3)*$len,0) up .25*$len;
- BoxCusto: box rad 5px "Custo" wid .5*$len ht .25*$len fill 0xFFD320;
-LineDistancia: line <- thick from BoxCusto.w + (0,.25*$len/6) \
- left .25*$len/2 \
- then up .25*$len/6 \
- then left .15*$len/2;
- box rad 10px "Distância" fit wid .35*$len fill 0xFFD320;
- LineTempo: line <- thick from BoxCusto.w - (0,.25*$len/6) \
- left .25*$len/2 \
- then down .25*$len/6 then left .15*$len/2 \
- color gray;
- box rad 10px "Tempo" fit wid .35*$len fill 0xFFD320;
- text "Primeiro Estágio" bold at B1E.c color black;
- LineNumMat: line <- from B1E.n - ((0)*$len,0) up .25*$len;
- NM: box rad 10px fill 0x004586 ht .25*$len wid .6*$len;
- LineDemRisco: line <- from B1E.n + ((2/3)*$len,0) up .25*$len;
- NR: box rad 10px wid .6*$len fill 0x7E0021 ht .25*$len;
- text "Número de Novas" "Maternidades" at NM.c color white;
- text "Nascimentos" "de risco" at NR.c color white;
-/*Second Stage */
- B2E: box rad 5px with .n at B1E.s - (0, (.6)*$len) \
- wid 2*$len fill white;
- LineOfeta: line <- from B2E.n up .2*$len;
- OF: box rad 10px "Nascimentos" "no município" fit \
- wid .5*$len fill 0xFF420E;
- LineDemanda: line <- from B2E.n - ((2/3)*$len,0) up .2*$len;
- DM: box rad 10px "Nascimentos" "de residentes" \
- fit wid .5*$len fill 0x83CAFF;
-LineResultado: line -> "Polos" aligned above italic from B2E.e \
- right .35*$len;
- RS: file "Resultado" bold ht .25*$len wid .5*$len fill 0x579D1C;
- LineSegEst: line -> "Macropolos" above italic aligned from B1E.s + \
- ((2/3)*$len,0) down .6*$len;
- text "Segundo Estágio" bold at B2E.c color black;
- BX: box thin dashed with .c at 1/2<OF.c,DM.c> \
- wid 1.35*$len ht OF.height + .2;
- text "Município" above at BX.n;
-/* Fim */ /*
- Example 4. André Leite (leite@castlab.org)
- */
-dimen_ = .75
-L1:line -> right dimen_/2;
-"RF" rjust at L1.w - (.05,0)
-C1:circle radius dimen_/4 with .w at L1.e
-L2:line -> from C1.e right dimen_/2
-B1:box " A " wid dimen_ ht dimen_*3/4
-L3:line -> right dimen_;
-L4:line -> from L3.c down dimen_*1 then left dimen_/2;
-B4:box "B" wid dimen_ ht dimen_*3/4
-L7:line -> left (B4.w.x-C1.c.x) then up to C1.s
-"+" at C1.c
-B2:box with .w at L3.e "Detetor de" "envelope" wid dimen_ ht dimen_*3/4
-L5:line -> from B2.e right dimen_/2;
-"BF" ljust at L5.end + (.05,0)
-L6:line <- from B1.n up dimen_/2;
-B3:box "oscilador" ht dimen_/2 wid dimen_*3/4 /*
- Example 5. André Leite (leite@castlab.org)
- */
-linethick *= 1.5
-dimen_ = 1
-j = dimen_*sqrt(3)/2
-i = dimen_/2
-define cell {
- move to ($2,$3)
- A:line up dimen_*sqrt(3)/2 right dimen_/2
- B:line right dimen_
- C:line down dimen_*sqrt(3)/2 right dimen_/2
- D:line down dimen_*sqrt(3)/2 left dimen_/2
- E:line left dimen_
- F:line up dimen_*sqrt(3)/2 left dimen_/2
- text $1 at A.start + (dimen_,0)
- move to C.end
-}
-
-cell("",0,0)
-dimen_ *= 0.5
-cell("",0,0)
-cell("",3*i/2,j/2)
-cell(,3*i/2,-j/2) /*
- Example 6. Original from pikchr.org and fossil-scm.org
- */
- scale = 0.8
- fill = white
- linewid *= 0.5
-C0: circle "C₀" fit
- circlerad = previous.radius
- arrow
-C1: circle "C₁"
- arrow
-C2: circle "C₂"
- arrow
-C4: circle "C₄"
- arrow
-C6: circle "C₆"
-C3: circle "C₃" at dist(C2,C4) heading 30 from C2
- arrow
-C5: circle "C₅"
- arrow from C2 to C3 chop
-C3P: circle "C₃\'" at dist(C4,C6) heading 30 from C6
- arrow right from C3P.e
-C5P: circle "C₅\'"
- arrow from C6 to C3P chop
-
- box height C3.y-C2.y \
- width (C5P.e.x-C0.w.x)+linewid \
- with .w at 0.5*linewid west of C0.w \
- behind C0 \
- fill 0xc6e2ff thin color gray
-
- box same width previous.e.x - C2.w.x \
- with .se at previous.ne \
- fill 0x9accfc
- "trunk" below at 2nd last box.s
- "feature branch" above at last box.n/*
- Example 7. Original from pikchr.org and fossil-scm.org
- */
-linewid *= 0.5
-circle "C0" fit
-circlerad = previous.radius
-arrow
-circle "C1"
-arrow
-circle "C2"
-arrow
-circle "C4"
-arrow
-circle "C6"
-circle "C3" at dist(C2,C4) heading 30 from C2
-
-d1 = dist(C2,C3.ne)+2mm
-line thin color gray from d1 heading 30 from C2 \
- to d1+1cm heading 30 from C2
-line thin color gray from d1 heading 0 from C2 \
- to d1+1cm heading 0 from C2
-spline thin color gray <-> \
- from d1+8mm heading 0 from C2 \
- to d1+8mm heading 10 from C2 \
- to d1+8mm heading 20 from C2 \
- to d1+8mm heading 30 from C2 \
- "30°" aligned below small
-
-X1: line thin color gray from circlerad+1mm heading 300 from C3 \
- to circlerad+6mm heading 300 from C3
-X2: line thin color gray from circlerad+1mm heading 300 from C2 \
- to circlerad+6mm heading 300 from C2
-line thin color gray <-> from X2 to X1 "distância" aligned above small \
- "C2 para C4" aligned below small/*
- Example 8. Original from pikchr.org and fossil-scm.org
- */
-lineht *= 0.4
-$margin = lineht*2.5
-scale = 0.75
-fontscale = 1.1
-charht *= 1.15
-down
-
-In: box "Interface" wid 150% ht 75% fill white
- arrow
-CP: box same "SQL Command" "Processor"
- arrow
-VM: box same "Virtual Machine"
- arrow down 1.25*$margin
-BT: box same "B-Tree"
- arrow
- box same "Pager"
- arrow
-OS: box same "OS Interface"
- box same with .w at 1.25*$margin east of 1st box.e "Tokenizer"
- arrow
- box same "Parser"
- arrow
-CG: box same ht 200% "Code" "Generator"
-UT: box same as 1st box at (Tokenizer,Pager) "Utilities"
- move lineht
-TC: box same "Test Code"
- arrow from CP to 1/4<Tokenizer.sw,Tokenizer.nw> chop
- arrow from 1/3<CG.nw,CG.sw> to CP chop
-
- box ht (In.n.y-VM.s.y)+$margin wid In.wid+$margin \
- at CP fill 0xd8ecd0 behind In
- line invis from 0.25*$margin east of last.sw up last.ht \
- "Core" italic aligned
-
- box ht (BT.n.y-OS.s.y)+$margin wid In.wid+$margin \
- at Pager fill 0xd0ece8 behind In
- line invis from 0.25*$margin east of last.sw up last.ht \
- "Backend" italic aligned
-
- box ht (Tokenizer.n.y-CG.s.y)+$margin wid In.wid+$margin \
- at 1/2<Tokenizer.n,CG.s> fill 0xe8d8d0 behind In
- line invis from 0.25*$margin west of last.se up last.ht \
- "SQL Compiler" italic aligned
-
- box ht (UT.n.y-TC.s.y)+$margin wid In.wid+$margin \
- at 1/2<UT,TC> fill 0xe0ecc8 behind In
- line invis from 0.25*$margin west of last.se up last.ht \
- "Accessories" italic aligned/*
- Example 9. Original from pikchr.org and fossil-scm.org
- */
-$r = 0.2in
-linerad = 0.75*$r
-linewid = 0.25
-
-# Start and end blocks
-#
-box "element" bold fit
-line down 50% from last box.sw
-dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-move right 3.9in
-box wid 5% ht 25% fill black
-X9: last.w - (0.3,0)
-arrow from X9 to last box.w
-
-
-# The main rule that goes straight through from start to finish
-#
-box "object-definition" italic fit at 11/16 way between X0 and X9
-arrow to X9
-arrow from X0 to last box.w
-
-# The LABEL: rule
-#
-arrow right $r from X0 then down 1.25*$r then right $r
-oval " LABEL " fit
-arrow 50%
-oval "':'" fit
-arrow 200%
-box "position" italic fit
-arrow
-line right until even with X9 - ($r,0) \
- then up until even with X9 then to X9
-arrow from last oval.e right $r*0.5 then up $r*0.8 right $r*0.8
-line up $r*0.45 right $r*0.45 then right
-
-# The VARIABLE = rule
-#
-arrow right $r from X0 then down 2.5*$r then right $r
-oval " VARIABLE " fit
-arrow 70%
-box "assignment-operator" italic fit
-arrow 70%
-box "expr" italic fit
-line right until even with X9 - ($r,0) \
- then up until even with X9 then to X9
-
-# The PRINT rule
-#
-arrow right $r from X0 then down 3.75*$r then right $r
-oval "'print'" fit
-arrow
-box "print-args" italic fit
-line right until even with X9 - ($r,0) \
- then up until even with X9 then to X9/*
- Example 10. Original from pikchr.org and fossil-scm.org
- */
- $laneh = 0.75
-
- # Draw the lanes
- down
- box width 3.5in height $laneh fill 0xacc9e3
- box same fill 0xc5d8ef
- box same as first box
- box same as 2nd box
- line from 1st box.sw+(0.2,0) up until even with 1st box.n \
- "Alan" above aligned
- line from 2nd box.sw+(0.2,0) up until even with 2nd box.n \
- "Betty" above aligned
- line from 3rd box.sw+(0.2,0) up until even with 3rd box.n \
- "Charlie" above aligned
- line from 4th box.sw+(0.2,0) up until even with 4th box.n \
- "Darlene" above aligned
-
- # fill in content for the Alice lane
- right
-A1: circle rad 0.1in at end of first line + (0.2,-0.2) \
- fill white thickness 1.5px "1"
- arrow right 50%
- circle same "2"
- arrow right until even with first box.e - (0.65,0.0)
- ellipse "future" fit fill white height 0.2 width 0.5 thickness 1.5px
-A3: circle same at A1+(0.8,-0.3) "3" fill 0xc0c0c0
- arrow from A1 to last circle chop "fork!" below aligned
-
- # content for the Betty lane
-B1: circle same as A1 at A1-(0,$laneh) "1"
- arrow right 50%
- circle same "2"
- arrow right until even with first ellipse.w
- ellipse same "future"
-B3: circle same at A3-(0,$laneh) "3"
- arrow right 50%
- circle same as A3 "4"
- arrow from B1 to 2nd last circle chop
-
- # content for the Charlie lane
-C1: circle same as A1 at B1-(0,$laneh) "1"
- arrow 50%
- circle same "2"
- arrow right 0.8in "goes" "offline"
-C5: circle same as A3 "5"
- arrow right until even with first ellipse.w \
- "back online" above "pushes 5" below "pulls 3 & 4" below
- ellipse same "future"
-
- # content for the Darlene lane
-D1: circle same as A1 at C1-(0,$laneh) "1"
- arrow 50%
- circle same "2"
- arrow right until even with C5.w
- circle same "5"
- arrow 50%
- circle same as A3 "6"
- arrow right until even with first ellipse.w
- ellipse same "future"
-D3: circle same as B3 at B3-(0,2*$laneh) "3"
- arrow 50%
- circle same "4"
- arrow from D1 to D3 chop/*
- Example 11. Original from pikchr.org and fossil-scm.org
- */
- arrow "source" "code"
-LA: box "lexical" "analyzer"
- arrow "tokens" above
-P: box "parser"
- arrow "intermediate" "code" wid 200%
-Sem: box "semantic" "checker"
- arrow
- arrow <-> up from top of LA
-LC: box "lexical" "corrector"
- arrow <-> up from top of P
-Syn: box "syntactic" "corrector"
- arrow up
-DMP: box "diagnostic" "message" "printer"
- arrow <-> right from east of DMP
-ST: box "symbol" "table"
- arrow from LC.ne to DMP.sw
- arrow from Sem.nw to DMP.se
- arrow <-> from Sem.top to ST.bot/*
- Exemplo 11. Original em pikchr.org e fossil-scm.org
- */
- filewid *= 1.2
-Src: file "pikchr.y"; move
-LemonSrc: file "lemon.c"; move
-Lempar: file "lempar.c"; move
- arrow down from LemonSrc.s
-CC1: oval "C-Compiler" ht 50%
- arrow " generates" ljust above
-Lemon: oval "lemon" ht 50%
- arrow from Src chop down until even with CC1 \
- then to Lemon.nw rad 20px
- "Pikchr source " rjust "code input " rjust \
- at 2nd vertex of previous
- arrow from Lempar chop down until even with CC1 \
- then to Lemon.ne rad 20px
- " parser template" ljust " resource file" ljust \
- at 2nd vertex of previous
-PikSrc: file "pikchr.c" with .n at lineht below Lemon.s
- arrow from Lemon to PikSrc chop
- arrow down from PikSrc.s
-CC2: oval "C-Compiler" ht 50%
- arrow
-Out: file "pikchr.o" "or" "pikchr.exe" wid 110% /*
- Example 12 André Leite (leite@castlab.org)
- */
-
-margin = .25cm
-$gr = 1.618
-$height = .25
-$width = 2
-
-B1: box "Arrival" rad .5 width $width height $height
-L1: line -> down .25 from B1.s + ($width/4,0)
-B2: box "Regulation" rad .05 fit
-L2: line -> down .25 from B1.s - ($width/4,0)
-B3: box "Spontaneous" rad .05 fit
-L3: line from B2.s down .25 then left until even with B3.s then to B3.s
-D1: dot at L3.s
-L4: line down .25 ->
- X: diamond wid .25 ht .25
-L5: line "Yes" small above ljust left from X.w ->
-B4: box "Emergency Room" rad .05 fit wid .6*$width
-L6: line -> down .25 from B4.s
-B5: box "Immediate Medical" "Assistance" bold fit rad .05 \
- fill 0xff6b6b color none wid .6*$width
-L7: line from X.e right -> "No" small above rjust
-B6: box "Reception" fit rad .05 wid .6*$width
-L8: line -> from B6.s down until even with B5.n
-B7: box "Vital Signs" "Nurse Assistant" small bold fit rad .1 wid .6*$width
-L9: line -> from B7.s down .25
-B8: box "Risk Classification" "Nurse" small bold fit rad .1 wid .6*$width
-L10: line right .125 from B8.e then down .6 ->
-X1: diamond wid .25 ht .25 fill 0x2171b5
-L11: line down .125 ->
-B9: box "Referral" "to UBS" fit rad .1 wid .5*$width
-L12: line from L10.end + (0, .25) left 1.25 then down .25 ->
-X2: diamond wid .25 ht .25 fill 0x74c476
-L11: line down .125 ->
-B10: box "Medical Assistance" "within 120 minutes" bold fit \
- rad .1 wid .5*$width
-L13: line from L12.nw left 1.25 then down .25 ->
-X3: diamond wid .25 ht .25 fill 0xfaff00
-L12: line down .125 ->
-B11: box "Medical Assistance" "within 60 minutes" bold fit \
- rad .1 wid .5*$width
-L14: line from L13.nw left 1.25 then down .25 ->
-X3: diamond wid .25 ht .25 fill 0xf16913
-L14: line down .125 ->
-B12: box "Medical Assistance" "within 10 minutes" bold fit \
- rad .1 wid .5*$width
- "Emergency?" small at X.s - (0, .075)/*
- Example 13. André Leite (leite@castlab.org)
- */
-$r = 0.2in
-linerad = 0.75*$r
-linewid = 0.25
-
-CMD2: [
-dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/rodovia" fit fill 0xE6B0AA
-A0:arrow from C1.w right 5.5*$r behind C1
-A1: box "código da rodovia" italic fit fill lightyellow
-
-move right 3.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A1.e to last box.w
-"ex. pe-114" italic above with .c at A1.n color gray
-]
-
-move to CMD2.sw then down 3*$r
-
-CMD3: [
-dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/notion" fit fill 0xE6B0AA
-A0:arrow from C1.w right 5.5*$r behind C1
-A1: box "texto para busca" italic fit fill lightyellow
-
-move right 3.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A1.e to last box.w
-"ex. aerodromo" italic above with .c at A1.n color gray
-]
-
-move to CMD3.sw then down 3*$r
-
-CMD4: [
-dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/cidade" fit fill 0xE6B0AA
-A0:arrow from C1.w right 5.5*$r behind C1
-A1: box "nome da cidade" italic fit fill lightyellow
-
-move right 3.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A1.e to last box.w
-"ex. arcoverde" italic above with .c at A1.n color gray
-]
-
-move to CMD4.sw then down 3*$r
-
-CMD5: [
-dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/subacao" fit fill 0xE6B0AA
-A0:arrow from C1.w right 5.5*$r behind C1
-A1: box "código da subação" italic fit fill lightyellow
-
-move right 3.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A1.e to last box.w
-"ex. 0620" italic above with .c at A1.n color gray
-]
-
-move to CMD5.sw then down 3*$r
-
-CMD6: [
-D0: dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/fonte" fit fill 0xE6B0AA
-A0:arrow from C1.w right 5.5*$r behind C1
-A1: box "código da fonte" italic fit fill lightyellow
-
-move right 3.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A1.e to last box.w
-"ex. 754" italic above with .c at A1.n color gray
-]
-
-START: line from CMD6.D0.c up 17.5*$r
-box "DER" bold big fit with .sw at START.end/*
- Exemplo 14. André Leite (leite@castlab.org)
- */
-$r = 0.2in
-linerad = 0.75*$r
-linewid = 0.25
-
-CMD1: [
-dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/efiscovalidade" fit fill lightgreen
-A0: arrow from C1.w right 5.5*$r behind C1
-A1: box "secretaria" italic fit fill 0xD7BDE2
-arrow from A0 right 9*$r behind A1
-A2: box "dias" italic fit fill lightyellow
-
-arrow from A1.e right $r*0.5 \
- then up $r*1.8 right $r*1.2 \
- then right until even with A2.w
-A3: box "inicio" italic fit fill lightyellow
-arrow $r
-A4: box "fim" italic fit fill lightyellow
-line right $r then down $r*1.8 right $r*1.2 then right
-move right 4.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A2.e to last box.w
-"ex. semobi" italic above with .c at A1.n color gray
-"ex. 7" italic above with .c at A2.n color gray
-"ex. –15" italic above with .c at A3.n color gray
-"ex. 15" italic above with .c at A4.n color gray
-]
-
-move to CMD1.sw then down 3*$r
-
-CMD2: [
-dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/efiscocredor" fit fill lightgreen
-A0:arrow from C1.w right 5.5*$r behind C1
-A1: box "secretaria" italic fit fill 0xD7BDE2
-arrow from A0 right 9*$r behind A1
-A2: box "nome ou cnpj" italic fit fill lightyellow
-
-move right 4.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A2.e to last box.w
-"ex. semobi" italic above with .c at A1.n color gray
-"ex. dix " italic above with .c at A2.n color gray
-]
-
-move to CMD2.sw then down 3*$r
-
-CMD3: [
-D0: dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/efiscoobjeto" fit fill lightgreen
-A0: arrow from C1.w right 5.5*$r behind C1
-A1: box "secretaria" italic fit fill 0xD7BDE2
-arrow from A0 right 9*$r behind A1
-A2: box "texto" italic fit fill lightyellow
-
-move right 4.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A2.e to last box.w
-"ex. semobi" italic above with .c at A1.n color gray
-"ex. obra " italic above with .c at A2.n color gray
-]
-
-move to CMD3.sw then down 3*$r
-
-CMD4: [
-D0: dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/efiscocontrato" fit fill lightgreen
-A0: arrow from C1.w right 5.5*$r behind C1
-A1: box "secretaria" italic fit fill 0xD7BDE2
-arrow from A0 right 9*$r behind A1
-A2: box "número/ano" italic fit fill lightyellow
-
-move right 4.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A2.e to last box.w
-"ex. semobi" italic above with .c at A1.n color gray
-"ex. 17/2023 " italic above with .c at A2.n color gray
-]
-
-move to CMD4.sw then down 3*$r
-
-CMD5: [
-D0: dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/efiscosubacao" fit fill lightgreen
-A0: arrow from C1.w right 5.5*$r behind C1
-A1: box "secretaria" italic fit fill 0xD7BDE2
-arrow from A0 right 9*$r behind A1
-A2: box "código da subação" italic fit fill lightyellow
-
-move right 4.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A2.e to last box.w
-"ex. semobi" italic above with .c at A1.n color gray
-"ex. 0000 " italic above with .c at A2.n color gray
-]
-
-move to CMD5.sw then down 3*$r
-
-CMD6: [
-D0: dot rad 250% color black
-X0: last.e + (0.3,0)
-arrow from last dot to X0
-right
-C1: oval "/efiscofonte" fit fill lightgreen
-A0: arrow from C1.w right 5.5*$r behind C1
-A1: box "secretaria" italic fit fill 0xD7BDE2
-arrow from A0 right 9*$r behind A1
-A2: box "código da fonte" italic fit fill lightyellow
-
-move right 4.2in from first dot .c
-box wid 5% ht 25% fill black
-line -> from A2.e to last box.w
-"ex. semobi" italic above with .c at A1.n color gray
-"ex. 754" italic above with .c at A2.n color gray
-]
-
-START: line from CMD6.D0.c up 22.5*$r
-box "e-Fisco" bold big fit with .sw at START.end/*
- Example 15. André Leite (leite@castlab.org)
- */
-
-$r = 0.2in
-linerad = 0.75*$r
-linewid = 0.25
-
-
-CMD1: [
- dot rad 250% color black
- X0: last.e + (0.3,0)
- arrow from last dot to X0
- right
- C1: oval "/tcevalidade" fit fill lightblue
- A0: arrow from C1.w right 5.5*$r behind C1
- A1: box "secretaria" italic fit fill 0xD7BDE2
- arrow from A0 right 9*$r behind A1
- A2: box "dias" italic fit fill lightyellow
-
- arrow from A1.e right $r*0.5 then up $r*1.8 right $r*1.2 \
- then right until even with A2.w
- A3: box "inicio" italic fit fill lightyellow
- arrow $r
- A4: box "fim" italic fit fill lightyellow
- line right $r then down $r*1.8 right $r*1.2 then right
- move right 4.2in from first dot .c
- box wid 5% ht 25% fill black
- line -> from A2.e to last box.w
- "ex. semobi" italic above with .c at A1.n color gray
- "ex. 7" italic above with .c at A2.n color gray
- "ex. –15" italic above with .c at A3.n color gray
- "ex. 15" italic above with .c at A4.n color gray
-]
-
-move to CMD1.sw then down 3*$r
-
-TCECDR: [
- dot rad 250% color black
- X0: last.e + (0.3,0)
- arrow from last dot to X0
- right
- C1: oval "/tcecredor" fit fill lightblue
- A0:arrow from C1.w right 5.5*$r behind C1
- A1: box "secretaria" italic fit fill 0xD7BDE2
- arrow from A0 right 9*$r behind A1
- A2: box "nome ou cnpj" italic fit fill lightyellow
-
- move right 4.2in from first dot .c
- box wid 5% ht 25% fill black
- line -> from A2.e to last box.w
- "ex. semobi" italic above with .c at A1.n color gray
- "ex. dix " italic above with .c at A2.n color gray
-]
-
-move to TCECDR.sw then down 3*$r
-
-TCEOBJ: [
- D0: dot rad 250% color black
- X0: last.e + (0.3,0)
- arrow from last dot to X0
- right
- C1: oval "/tceobjeto" fit fill lightblue
- A0: arrow from C1.w right 5.5*$r behind C1
- A1: box "secretaria" italic fit fill 0xD7BDE2
- arrow from A0 right 9*$r behind A1
- A2: box "texto para busca" italic fit fill lightyellow
-
- move right 4.2in from first dot .c
- box wid 5% ht 25% fill black
- line -> from A2.e to last box.w
- "ex. semobi" italic above with .c at A1.n color gray
- "ex. obra " italic above with .c at A2.n color gray
-]
-
-move to TCEOBJ.sw then down 3*$r
-
-TCECTT: [
- D0: dot rad 250% color black
- X0: last.e + (0.3,0)
- arrow from last dot to X0
- right
- C1: oval "/tcecontrato" fit fill lightblue
- A0: arrow from C1.w right 5.5*$r behind C1
- A1: box "secretaria" italic fit fill 0xD7BDE2
- arrow from A0 right 9*$r behind A1
- A2: box "número/ano" italic fit fill lightyellow
-
- move right 4.2in from first dot .c
- box wid 5% ht 25% fill black
- line -> from A2.e to last box.w
- "ex. semobi" italic above with .c at A1.n color gray
- "ex. 17/2023 " italic above with .c at A2.n color gray
-]
-
-START: line from TCECTT.D0.c up 14.5*$r
-box "Remessa TCE" bold big fit with .sw at START.end/*
- Example 16. André Leite (leite@castlab.org)
- */
-
-B1: box "Etapa 1" bold "Revisão Bibliográfica" wid 2 rad .1
-arrow
-B2: box "Etapa 2" bold "Definição do Objeto de Estudo" wid 2 rad .1
-arrow right then down 1 then left rad .2
-B3: box "Etapa 3" bold "Coleta de Dados" wid 2 rad .1
-arrow
-B4: box "Etapa 4" bold "Análise de Dados" wid 2 rad .1
-arrow left then down 1 then right rad .2
-B5: box "Etapa 5" bold "Propostas e Diretrizes" wid 2 rad .1
-arrow
-B6: box "Etapa 6" bold "Validação das Diretrizes" wid 2 rad .1
-arrow right then down 1 then left until even with B6.c rad .2
-B7: box "Etapa 7" bold "Apresentação dos Resultados" wid 2 rad .1# fontSize: 50%
-# fontFamily: Akronim
-
-/*
- Example 17. André Leite (leite@castlab.org)
- */
-
-lgt = .2
-
-define half_hex_down {
- A:line down $1*(sqrt(3)/2) right $1/2 \
- then left 2*$1 \
- then up $1*(sqrt(3)/2) right $1/2 \
- close color $3 fill $4
- text $2 at last .c color $5
-}
-
-define half_hex_up {
- A:line down $1*(sqrt(3)/2) left $1/2 \
- then left $1 \
- then up $1*(sqrt(3)/2) left $1/2 \
- close color $3 fill $4
- text $2 at last .c color $5
-}
-
-HD: [half_hex_down(lgt , "Rapid", 0x0070c0, white, 0x0070c0)]
-
-HU: [half_hex_up(lgt , "Fuzz" italic, 0x0070c0, 0x0070c0, white)] \
- with .n at .0175 above HD.s /*
- Example 18. André Leite (leite@castlab.org)
- */
-
-lgt = .2
-
-define hex_up {
- A:line right $1*(sqrt(3)/2) down $1/2 \
- then down $1 \
- then down $1/2 left $1*(sqrt(3)/2) \
- then up $1/2 left $1*(sqrt(3)/2) \
- then up $1 \
- then right $1*(sqrt(3)/2) up $1/2 \
- close color $3 fill $4
- text $2 at last .c color $5
-}
-
-define hex_dgr {
- P:(0,0)
- C1: circle rad .01 with .c at P.c thin color $2
- C2: circle rad .01 with .c at C1.c + ($1*(sqrt(3)/2), -$1/2) thin color $2
- C3: circle rad .01 with .c at C2.c + (0, -$1) thin color $2
- C4: circle rad .01 with .c at C3.c + (-$1*(sqrt(3)/2), -$1/2) thin color $2
- C5: circle rad .01 with .c at C4.c + (-$1*(sqrt(3)/2), $1/2) thin color $2
- C6: circle rad .01 with .c at C5.c + (0, $1) thin color $2
- L1: line from C1.se to C2.nw thin color $2
- L2: line from C2.s to C3.n thin color $2
- L3: line from C3.sw to C4.ne thin color $2
- L4: line from C4.nw to C5.se thin color $2
- L5: line from C5.n to C6.s thin color $2
- L6: line from C6.ne to C1.sw thin color $2
-
-}
-
-
-H2: [hex_up(lgt , "Pikchr" small, 0x196F3D, 0x27AE60, white)]
-H3: [hex_dgr(lgt*.8, 0x7DCEA0)] with .c at H2.c
-H4: [hex_dgr(lgt*.6, 0x52BE80)] with .c at H2.c
--Disclaimer The text of this manual was authored by -D. Richard Hipp and is available on the official pikchr.org website. All -links have been preserved to direct users to the original site for -further reference. We extend our sincere gratitude to D. Richard Hipp -for his outstanding work in adapting the original PIC language by Brian -Kernighan into the modern pikchr tool, bringing new accessibility and -utility to diagram generation.
-
This is a guide to generating diagrams using Pikchr, pronounced -“picture.” This guide is designed to teach you to use Pikchr in a more -accessible manner than you get by reading the grammar -specification. We leave discussion of the scope and purpose of -Pikchr to a separate -document.
-For more details and other perspectives, see the following -resources:
- -The design goal of Pikchr is to enable embedded line diagrams in -Markdown or other simple markup languages. The details on how to embed -Pikchr in Markdown is covered -separately. For the purpose of this tutorial, we will only write -pure Pikchr scripts without the surrounding markup. To experiment with -Pikchr, visit the /pikchrshow page on the -website hosting this document (preferably in a separate window). Type in -the following script and press the Preview button: -
- line; box "Hello," "World!"; arrow
-If you do this right, the output should appear as:
-So there you go: you’ve created and rendered your first diagram using -Pikchr! You will do well to keep that /pikchrshow screen handy, in a -separate browser window, so that you can try out scripts as you proceed -through this tutorial.
-For this particular document, you can click on any of the diagrams -rendered by Pikchr and the display will convert to showing you the -original Pikchr source text. Click again to go back to seeing the -rendered diagram.
-The click-to-change-view behavior is a property of this one -particular document and is not a general capability of Pikchr. On other -documents containing Pikchr diagrams that are generated using Fossil you -can use Ctrl-click (Option-click on Macs) to toggle the view. That is, -click on the diagram while holding down the Ctrl key or the Option key. -This is not possible if you are on a tablet or phone, since you don’t -have a Ctrl or Option key to hold down there. Other systems might not -implement the view-swapping behavior at all. This is a -platform-depending feature that is one layer above Pikchr itself.
-Pikchr is designed to be simple. A Pikchr script is just a sequence -of Pikchr statements, separated by either new-lines or semicolons. The -“Hello, world!” example above used three statements, a “line”, a “box”, -and an “arrow”, each separated by semicolons.
-Whitespace (other than newlines) and comments are ignored. Comments
-in pikchr can be in the style of TCL, C, or C++. That is to say,
-comments consist of a “#” or “//” and include
-all characters up to but not including the next new-line, or all text in
-between “/*” and the first following “*/”. The
-example script above could be rewritten with each statement on a
-separate line, and with comments describing what each statement is
-doing:
# The first component of the drawing is a line
- line
- // The second component is a box with text "Hello, World!"
- box "Hello," "World!"
- /* Finally an arrow */
- arrow
-Remember that new-lines separate statements. If you have a long -statement that needs to be split into multiple lines, escape the newline -with a backslash character and the new-line will be treated as any other -space:
- line
- box \
- "Hello," \
- "World!"
- arrow
-So, a Pikchr script is just a list of statements, but what is a -statement?
-Most statements are descriptions of a single graphic object -that becomes part of the diagram. The first token of the statement is -the object class-name. The following classes are currently -supported:
-A statement can be only the class-name and nothing else, but the -class-name is usually followed by one or more “attributes”. Attributes -are used to modify the appearance of the object, or to position the -object relative to prior objects.
-So to revisit the “Hello, World” demonstration -script above, we see that that script contains three object -descriptions:
-By default, objects are stacked beside each other from left to right. -The Pikchr layout engine keeps track of the “layout direction”, which -can be one of “right”, “down”, “left”, or “up”. The layout direction -defaults to “right”, but you can change it using a statement which -consists of just the name of the new direction. So, if we insert the -“down” statement in front of our test script, like this:
- down
- line
- box "Hello," "World!"
- arrow
-Then the objects are stacked moving downward:
-Or, you can change the layout direction to “left”:
-Or to “up”:
-It is common to stack line objects (lines, arrows, splines) against -block objects (boxes, circles, ovals, etc.), but this is not required. -You can stack a bunch of block objects together. For example:
- box; circle; cylinder
-Yields:
-More often, you want to put space in between the block objects. The -special “move” object exists for that purpose. Consider:
- box; move; circle; move; cylinder
-This script creates the same three block objects but with whitespace -in between them:
-Implementation note: a “move” is really just an invisible
-“line,” which is why the following script generates the
-same output as the previous. (Try
-it!)
box; line invisible; circle; line invisible; cylinder
-The automatic stacking of objects is convenient in many cases, but -most diagrams will want some objects placed somewhere other than -immediately adjacent to their predecessor. For that reason, layout -attributes are provided that allow precise placement of objects.
-To see how this works, consider the previous example of a box, -circle, and cylinder separated by some space. Suppose we want to draw an -arrow that goes downward out of the box, then right, then up into the -cylinder. The complete script might look something like this:
- box; move; circle; move; cylinder
- arrow from first box.s \
- down 1cm \
- then right until even with first cylinder \
- then to first cylinder.s
-This script results in the following diagram:
-That is indeed the image we want, but there are a lot of words on -that “arrow” statement! Don’t panic, though. It’s actually pretty -simple. We’ll take it apart and explain it piece by piece.
-First note that the “arrow” statement is broken up into four separate
-lines of text, with a “\” at the end of the first three
-lines to prevent the subsequent new-line from prematurely closing the
-statement. Splitting up the arrow into separate lines this way is purely
-for human readability. If you are more comfortable putting the whole
-statement on one line, that is fine too. Pikchr doesn’t care. Just be
-sure to remember the backslashes if you do split lines!
The attributes on the “arrow” statement describe the path taken by
-the arrow. The first attribute is “from first box.s”. This
-“from” attribute specifies where the arrow starts. In this case, it
-starts at the “s” (or “south”) anchor point of the “first box”. The
-“first box” part is probably self explanatory. (You can also write it as
-“1st box” instead of “first box”, and in fact legacy-PIC requires the
-use of “1st” instead of “first”.) But what is the “.s” part?
Every block object has eight anchor points on its perimeter that are -named for compass points, like this:
-As you can see, there is also a ninth point in the middle called -“.c”. Every block object has these anchor points; you can refer to them -when positioning the object itself, or when positioning other objects -relative to the block object.
-The next phrase on the “arrow” statement is “down 1cm”.
-As you might guess, this phrase causes the arrow to move downward from
-its previous position (its starting point) by 1 centimeter. This phrase
-highlights a key enhancement of Pikchr over PIC, which did everything in
-inches only. No units were allowed. Pikchr allows you to attach units to
-measurements, as in this case where it is “1cm”. Internally, Pikchr
-still keeps track of everything in inches for compatibility with PIC, so
-the “1cm” token is really just an alternative spelling for the numeric
-constant “0.39370078740157480316”, which is the inch-equivalent of 1
-centimeter. Surely you agree that “1cm” is much easier to read and
-write! Other units recognized by Pikchr are “px” for pixels, “pt” for
-points, “pc” for picas, “mm” for millimeters, and of course “in” for
-inches. Inches are assumed if no units are specified.
Back to our arrow: we have now established a path for the arrow down
-1 centimeter from the “.s” anchor of the box. The next phrase is:
-“then right until even with first cylinder”. You can
-perhaps guess that this means that the arrow should continue to the
-right until it is lined up below the first cylinder. You, the diagram
-designer, don’t know (and don’t really want to know) how far apart the
-box and the cylinder are, so you can’t tell it exactly how far to go.
-This phrase is a convenient way of telling Pikchr to “make the line long
-enough”.
Note that the “first cylinder” part of the “until even
-with” phrase is actually an abbreviation for
-“first cylinder.c” - the center of the cylinder. This is
-what we want. You could also write “first cylinder.s” if
-you want.
The “until even with” phrase is not found in the original version of
-PIC. In that system, you would have to do some extra math to figure out
-the distance for yourself, something like
-“then right (1st cylinder.s.x - 1st box.s.x)”. We think the
-“until even with” phrase is easier to use and understand.
The final phrase in the “arrow” statement is
-“then to first cylinder.s”. This phrase tells the arrow to
-go from wherever it is at the moment directly to the “.s” anchor of the
-cylinder.
Notice that our sample diagram contains no coordinates and only one -hard-coded distance, the “down 1cm” bit in the “arrow” statement. The -script is written in such a way that the script-writer does not have to -do a lot of distance calculation. The layout compensates -automatically.
-For example, suppose you come back to this script later and decide -you need to insert an ellipse in between the circle and the cylinder. -This is easily accomplished:
- box; move; circle; move; ellipse; move; cylinder
- arrow from first box.s \
- down 1cm \
- then right until even with first cylinder \
- then to first cylinder.s
-We simply add the ellipse (and an extra “move”) on the first line. -Even though the coordinate positions of the objects have adjusted, the -description of the arrow that connects the box to the cylinder is not -based on coordinates or absolute distances, so it does not have to -change at all. Pikchr compensates automatically:
-Both PIC and Pikchr allow you to specify hard-coded coordinates and -distances when laying out your diagram, but you are encouraged to avoid -that approach. Instead, place each new object you create relative to the -position of prior objects. Pikchr provides many mechanisms for -specifying the location of each object in terms of the locations of its -predecessors. With a little study of the syntax options available to you -(and discussed further below) you will be generating complex diagrams -using Pikchr in no time.
-Both Pikchr and PIC operate on a single-pass design. Objects can
-refer to other objects that occur before them in the script, but not to
-objects that occur later in the script. Any computations that go into
-placing an object occur as the object definition is parsed. As soon as
-the newline or semicolon that terminates the object definition is
-reached, the size, location, and characteristics of the object are fixed
-and cannot subsequently be altered. (One exception: sub-objects that are
-part of a []-container (discussed later) are placed
-relative to the origin of the container. Their shape and locations
-relative to each other are fixed, but their final absolute position is
-not fixed until the []-container itself is fixed.)
The single-pass approach contributes to the conceptual simplicity of -Pikchr (and PIC). There is no “solver” that has to work through forward -and backward layout constraints to find a solution. This simplicity of -design helps to keep Pikchr scripts easy to write and easy to -understand.
-The previous example used the phrases like “first box”
-and “first cylinder” to refer to particular objects. There
-are many variations on this naming scheme:
previous” ← the previous object regardless of its
-classlast circle” ← the most recently created circle
-object3rd last oval” ← the antepenultimate oval object17th ellipse” ← the seventeenth ellipse objectThese relative and ordinal references work, but they can be fragile. -If you go back later and insert a new object in the stream, you can mess -up the counting. Or, for that matter, you might just miscount.
-In a complex diagram, it often works better to assign symbolic names -to objects, which we call “labels” in Pikchr. A label begins with a -capital letter followed by some number of regular ASCII letters, digits -or underscores, followed by a colon. This must come immediately before -an object, without an intervening newline. Afterwards, the object can be -referred to by that label.
-Consider how this simplifies our previous example:
- B1: box; move;
- circle; move;
- ellipse; move;
- C1: cylinder
- arrow from B1.s \
- down 1cm \
- then right until even with C1 \
- then to C1.s
-By giving symbolic names to the box (B1) and cylinder (C1), the arrow -path description is simplified. Furthermore, if the ellipse gets changed -into another cylinder, the arrow still refers to the correct -cylinder.
-The indentation of the lines following each symbolic name above is -syntactically unimportant: it serves only to improve human readability. -Nevertheless, this is typical coding style for Pikchr and PIC before -it.
-For lines (and arrows and splines), you have to specify a path that -the line follows, a path that might involve multiple bends and turns. -Defining the location of block objects is easier: you just provide a -single location to place the object. Ideally, you should place the -object relative to some other object, of course.
-Let’s say you have a box and you want to position a circle 2
-centimeters to the right of that box. You simply use an
-“at” attribute on the circle to tell it to position itself
-2 cm to the right of the box:
B1: box
- circle at 2cm right of B1
-The resulting diagram is:
-(We’ve added gray dimension lines purely for illustration. Click the -diagram per the instructions above to see that -they do not change the example, only add to it.)
-The circle is positioned so that its center is 2 centimeters -to the right of the center of the box. If what you really -wanted is that the left (or west) side of the circle is 2 cm to the -right (or east) of the box, then just say so:
- B1: box
- C1: circle with .w at 2cm right of B1.e
-Normally an “at” clause will set the center of an
-object, but if you add a “with” prefix you can specify any
-other anchor point of the object to be the reference for positioning.
-The Pikchr script above is saying “make the C1.w point be 2 cm right of
-B1.e”. And we have:
That’s the whole story behind positioning block objects on a diagram. -You just add an attribute of the form:
---with reference-point at -position
-
And Pikchr will place the specified reference-point of the object at
-position. If you omit the “with” clause, the
-center of the object (“.c”) is used as the
-reference-point. The power of Pikchr comes from the fact that
-“position” can be a rather complex expression. The previous
-example used a relatively simple position of
-“2cm right of B1.e”. That was sufficient for our simple
-diagram. More complex diagrams can have more complex position
-phrases.
If you omit the “at” attribute from a block object, the
-object is positioned as if you had used the following:
---
with .start at previous.end
Except, the very first object in the script has no “previous” and so -it is positioned using:
----
with .c at (0,0)
Let’s talk little more about the usual case:
-“with .start at previous.end”. The “previous”
-keyword means the previous object in the script. (You can also use the
-keyword “last” for this purpose.) So we are positioning the
-current object relative to the previous object. But what about the
-“.start” and “.end”?
Remember that every object has 8 anchor points whose names correspond -to compass directions: “.n”, “.ne”, “.e”, “.se”, “.s”, “.sw”, “.w”, and -“.nw”, plus the ninth anchor, the center point “.c”. Every object also -has “.start” and “.end” anchor points, but their position varies -depending on the layout direction that is current when the object is -created.
-| -Layout Direction - | --.start - | --.end - | -
|---|---|---|
| -right - | --.w - | --.e - | -
| -down - | --.n - | --.s - | -
| -left - | --.e - | --.w - | -
| -up - | --.s - | --.n - | -
Recall the earlier example that consisted of three objects stacked -together:
- right; box; circle; cylinder
-(I added a “right” at the beginning to make the layout
-direction clear, but as “right” is the default layout direction, so it
-doesn’t change anything.)
Armed with our new knowledge of how “at”-less block
-objects are positioned, we can better understand what is going on. The
-box is the first object. It gets positioned with its center at (0,0),
-which we can show by putting a red dot at (0,0):
Because the layout direction is “right”, the start and end of the box -are the .w and .e anchor points. Prove this by putting more colored dots -at those points and rendering the result:
- -Similarly, we can show that the .start and .end of the circle are its -.w and .e anchor points. (Add new color dots to prove this to yourself, -if you like.) And clearly, the .start of the circle is directly on top -of the .end of the box.
-Now consider what happens if we change the layout direction after the -circle is created but before the cylinder is created:
- right; box; circle; down; cylinder
-This script works a little differently on Pikchr than it does on PIC. -The change in behavior is deliberate, because we feel that the Pikchr -approach is better. On PIC, the diagram above would be rendered like -this:
-But on Pikchr the placement of the cylinder is different:
-Let’s take apart what is happening here. In both systems, after the -“circle” object has been parsed and positioned, the .end of the circle -is the same as .e, because the layout direction is “right”. If we omit -the “down” and “cylinder” and draw a dot at the “.end” of circle to show -where it is, we can see this:
-The next statement is “down”. The “down” statement changes the layout -direction to “down” in both systems. In legacy PIC the .end of the -circle remains at the .e anchor. Then when the “cylinder” is positioned, -its “.start” is at .n because the layout direction is now “down”, so the -.n point of the cylinder is aligned to the .e point of the circle.
-Pikchr works like PIC with one important change: when the “down” -statement is evaluated, Pikchr also moves the “.end” of the previous -object to a new location that is appropriate for the new direction. In -other words, the down command moves the .end of the circle from .e to -.s. You can see this by setting a red dot at the .end of the circle -after the “down” command:
-Or, we can “print” the coordinates of the .end of the
-circle before and after the “down” command to see that they shift:
before: 0.875 , 0
after: 0.625 , -0.25
The size of every block object is controlled by three parameters:
-width (often abbreviated as wid)height (or ht)radius (or rad)There is also a fourth convenience parameter:
-diameterThe diameter is always twice the radius. Setting the
-diameter automatically changes the radius and
-setting the radius automatically changes the
-diameter.
Usually the meanings of these parameters are obvious.
-The radius parameter, however, sometimes has non-obvious
-meanings. For example, on a box, the radius determines the
-rounding of corners:
For a cylinder
-object the radius determines the thickness of the end
-caps:
For a file
-object the radius determines the size of the page
-fold-over in the upper-right corner:
For a circle -object, the width, height, and diameter are always the same, and the -radius is always half the diameter. Changing any parameter automatically -adjusts the other three.
-Even though they are curvy objects, the radius (and
-hence diameter) has no effect on ellipse
-and oval
-objects. The size of those objects is determined purely by their width
-and height:
Notice that with an oval object, the semicircular end-cap is always -on the narrow end of the object. In the default configuration where the -height is less than the width, the semicircular end-caps are on the left -and right, but if the width and height are modified so that the width is -less than the height, then semicircles appear on the top and bottom -instead.
-Although a diamond can in principle be rounded, same as
-Pikchr allows with a box, the current implementation does
-not respond to the radius parameter:
Block objects have default sizes, which are determined by variables.
-For example, the width of a box is initialized with the value of the
-boxwid variable, which defaults to 0.75in.
It is common for Pikchr scripts to change these default at or near -the beginning of a script in order to adjust the default sizes of -objects defined within that script.
-Use the “width” (or “wid”) attribute to
-change the width of an object. The argument to this attribute can be an
-expression — such as “1cm” or “0.75*boxwid” —
-or it can be a percentage of the prior value, such as
-“75%”. This also works for “height”,
-“radius”, and “diameter”.
If a block object contains text annotations, the “fit”
-attribute causes the width and height to be adjusted so that the object
-neatly encloses that text. The “fit” attribute only
-considers text that is previously defined for the object, or in other
-words text annotations that occur to the left of the “fit”
-keyword. The width and height can be adjusted further after the
-“fit” keyword, for example to provide a larger margin
-around the text. Click on the following script to see the difference
-that the “width 125%” at the end of the second box
-definition makes.
down
- box "Auto-fit text annotation" "as is" fit
- move 50%
- box "Auto-fix text annotation" "with 125% width" fit width 125%
-If at the end of a block object definition, either the width or -height of the object is less than or equal to zero, then that dimension -is increased so as to enclose all text annotations on the object. Thus, -for example, you can make all of the boxes in your diagram auto-fit -around their text annotations by prefacing your script with something -like:
- boxwid = 0; boxht = 0;
- box "Hello";
- move
- box "A longer label" "with multiple lines" "of label text"
-For all of these auto-fit features, Pikchr needs to know the
-dimensions of the text annotations after rendering. Unfortunately, that
-information is not readily available, as Pikchr runs long before the
-generated SVG reaches the web-browser in which it will be displayed.
-Hence, Pikchr has to guess at the text size. Usually it does a good job
-of this, but it can be a little off, especially for unusual (read:
-“non-ASCII”) characters or if the CSS for the rendering environment sets
-a non-standard font face or font size. To compensate, the
-“charwid” and “charht” variables can be
-adjusted or extra spaces can be added at the beginning or end of text
-strings.
These auto-fit features are a new innovation for Pikchr and are not -available in other PIC family interpreters, as far as we are aware.
-Various attributes can be added to both block and line objects to -influence how the objects are drawn.
-thickness dimension
-thickthininvisible (or invis)color color
-fill color
-The “thickness”, “thick”,
-“thin”, and “invisible” attributes control the
-stroke width of the lines that construct an object. The default stroke
-width for all objects is determined by the “thickness”
-variable, which defaults to “0.015in”. The
-“thick” and “thin” attributes increase or
-decrease the stroke width by fixed percentages. These attributes can be
-repeated to make the stroke width ever thicker or thinner, up to the
-limit of the object’s dimensions where the stroke fills the entire
-object. The “invisble” attribute simply sets the stroke
-width to 0.
Notice that “invisible” refers only to the object outline, not to the -whole object. You therefore cancel the “invisible” attribute with -“solid”, not “visible”:
- boxwid = 0
- boxht = 0
- box "fully visible"
- box invisible color gray "outline invisible"
- box same solid "outline visible again" fitThe “color” and “fill” attributes change
-the foreground and background colors of an object. Colors can be
-expressed using any of the
-148 standard CSS color names such as “Bisque” or “AliceBlue” or
-“LightGray”. Color names are not case sensitive, so “bisque”, “BISQUE”,
-and “Bisque” all mean the same thing. Color names can also be expressed
-as an integer which is interpreted as a 24-bit RGB value. It is
-convenient to express numeric color values using hexadecimal notation.
-“Bisque” is the same as “0xffe4c4”, which is the same as “16770244”.
Setting the “fill” to a negative number, to “None”, or
-to “Off” makes the background transparent. That is the default.
The default foreground color is black.
-The “fill” attribute does not affect the rendering of
-lines unless the route of the line is terminated by the
-“close” attribute. The “close” keyword
-converts the line into a polygon:
Polygons are not required to have a fill color. With the default fill
-of “none,” you can use the “close” keyword to convert a
-polygon into a line and leave the background transparent, but using
-“fill color” together with “close” is
-a common idiom.
Every object can have up to five lines of text annotation. Each -annotation is a string literal attribute on the object definition. By -default, the annotations are displayed around the center of the object, -from top to bottom, in the order that they appear in the input -script.
-The layout and font style of the annotations can be modified using -keywords that appear after each string literal. The following modifiers -are supported:
-The “above” and “below” keywords control
-the location of the text above or below the center point of the object
-with which the text is associated. If there is just one text on the
-object and the “above” and “below” keywords
-are omitted, the text is placed directly over the center of the object.
-This causes the text to appear in the middle of lines:
So, if there is just a single text label on a line, you probably want
-to include either the “above” or “below”
-keyword.
If there are two texts on the object, they straddle the center point
-above and below, even without the use of the “above” and
-“below” keywords:
The “above” and “below” attributes do not
-stack or accumulate. Each “above” or “below”
-overrides any previous “above” or “below” for
-the same text.
If there are multiple texts and all are marked “above”
-or “below”, then all are placed above or below the center
-point, in order of appearance.
As the “above” and “below” keywords control
-up and down positioning of the text, so the “ljust” and
-“rjust” keywords control left and right positioning.
For a line, the “ljust” means that the left side of the
-text is flush against the center point of the line, and
-“rjust” means that the right side of the text is flush
-against the center point of the line. (In the following diagram, the red
-dot is at the center of the line.)
For a block object, “ljust” shifts the text to be left
-justified against the left edge of the block (with a small margin) and
-“rjust” puts the text against the right side of the object
-(with the same margin).
The behavior of “ljust” and “rjust” for
-block objects in Pikchr differs from legacy PIC. In PIC, text is always
-justified around the center point, as in lines, but this means there is
-no easy way to left justify multiple lines of text within a “box” or
-“file”, so the behavior was changed for Pikchr.
Pikchr allows five separate text objects inside another object by
-combining “ljust”, “rjust”, and the default
-text centering:
The “center” attribute cancels all prior
-“above”, “below”, “ljust”, and
-“rjust” attributes for the current text object.
The “bold” and “italic” attributes cause
-the text object to use a bold or italic font. Fonts can be both bold and
-italic at the same time:
The “mono” or “monospace” attributes cause
-the text object to use a monospace font.
The “aligned” attribute causes text associated with a
-straight line to be rotated to align with that line:
To display rotated text not associated with a line, attach the text
-to a line that is marked “invisible”
Note that the direction of aligned text is the same as the direction -of the line itself, so if you draw a line from right to left, the -aligned text will appear upside down:
-If you need aligned text on an arrow that goes from right to left,
-and you do not want the text to be rendered upside-down, draw the arrow
-from left to right and include the “<-” attribute so
-that the arrowhead is at the beginning rather than at the end:
The “big” and “small” attributes cause the
-text to be a little larger or a little smaller, respectively. Two
-“big” attributes cause the text to be larger still;
-similarly, two “small” attributes make it
-smaller-than-small. Text size does not increase or decrease beyond two
-“big” or “small” keywords.
A “big” keyword cancels any prior “small”
-keywords on the same text, and a “small” keyword cancels
-any prior “big” keywords.
The anchor point for text annotations is usually the center of the -bounding box for the whole object. This is intuitive for block objects -and straight lines. But for multi-segment lines, the text might not be -near the line itself. For example, in the following four-segment arrow, -the red box is the bounding box and the red dot shows the center of the -bounding box. The text label is aligned relative to the center of the -bounding box, which is not close to any part of the actual line.
-If you need to position text beside one specific segment of a
-multi-segment line, consider creating a separate “invis”
-line over top of that line segment and attaching the text to the “invis”
-line instead. Here is the same arrow as before, but with the text
-attached to a separate “invis” line that overlays the second segment of
-the arrow:
The anchor point for text is usually the center of the -object, but in some cases, the anchor point might be fudged a little. -This happens, for example for cylinder objects:
-The red dot is on the center of the cylinder and the blue dot shows -the anchor point for the text. The text is a little lower for cylinders -because that looks better. With out this adjustment of the text center -point, the cylinder text would look goofy:
-A “container” is a list of one or more objects contained within
-“[…]”. A container is a collection of one or
-more objects that looks like a single object to the remainder of the
-script.
For example:
- A: [
- oval "Hello"
- arrow
- box "World" radius 4px
- ]
- Border: box thin width A.width+0.5in height A.height+0.5in at A.center
-The “A” container is composed of an oval, and arrow, and a box with -rounded corners. But to the subsequent “Border” box, the “A” container -appears to be a single object. The Border box can reference the overall -width and height and the center point of the A container in order to -size and position itself to enclose the container with a 0.25in -border:
-A container is mostly useful for adding a border around a collection -of objects, as shown above, or adding a caption to a diagram. The -following diagram shows what a caption might look like. (Click to see -the Pikchr source text.)
-In legacy PIC, layout direction changes (the “up”, “down”, “left”, -and “right” commands) and variable definitions within a container only -affect subsequent statements within the same container. Once the -container closes, the prior direction and variable values are restored. -Pikchr does not work this way. In Pikchr, layout direction changes and -variable definitions that occur within a container continue to be in -effect after the container.
-Objects are normally drawn in the order in which they are defined. -Thus objects that are toward the end of the script that overlap with -objects near the beginning will appear to be on top.
-Sometimes it is desirable for a later object to appear to be behind
-an early object. This is useful, for example, when using a box to form a
-colored background for a group of prior objects. The “behind”
-attribute with a argument that is the label for any prior object can
-be added to cause the object that holds the behind attribute to be drawn
-before the object that the behind attribute references.