Browse Source

Relaxed report init

master
Apostolos Fanakis 6 years ago
parent
commit
23eaab0927
  1. 1
      .gitignore
  2. 1
      report/0_intro.pug
  3. 37
      report/1_low_pass/1_low_pass.pug
  4. 2
      report/config.yaml
  5. 6
      report/diagrams/diagram.mermaid
  6. 7
      report/diagrams/diagram.svg
  7. 1
      report/diagrams/plot.svg
  8. 18
      report/diagrams/plot.vegalite.json
  9. BIN
      report/report.pdf
  10. 137
      report/report.pug
  11. 174
      report/report.scss
  12. 308
      report/report_temp.htm

1
.gitignore

@ -0,0 +1 @@
*.ms14 (Security copy)

1
report/0_intro.pug

@ -0,0 +1 @@
p yada

37
report/1_low_pass/1_low_pass.pug

@ -0,0 +1,37 @@
h2 Κατωδιαβατό φίλτρο Inverse Chebyshev
br
p.
Με βάση το ΑΕΜ (8261), υπολογίστηκαν οι προδιαγραφές του κατωδιαβατού φίλτρου προς σχεδίαση:
figure.block-center.width-15cm
table.ui.celled.structured.table.teal.striped.center.aligned
thead
tr
th Προδιαγραφή
th(colspan="2") Τιμή
tbody
tr
td f#[sub pass]
td 1000
td 500
tr
td f#[sub stop]
td 1200
td 500
tr
td a#[sub max]
td(colspan="2") 0.6
tr
td a#[sub min]
td(colspan="2") 24
figcaption
.reference Πίνακας 1
.caption.
Προδιαγραφές σχεδίασης κατωδιαβατού φίλτρου
h3 Σχεδίαση φίλτρου
//h4 Υπολογισμός συνάρτησης μεταφοράς
//h4 Υλοποίηση συνάρτησης μεταφοράς
//h4 Ρύθμιση κέρδους
h3 Μελέτη συνάρτησης μεταφοράς στο Matlab
h3 Υλοποίηση κυκλώματος στο Multisim

2
report/config.yaml

@ -0,0 +1,2 @@
plugins:
- mathjax

6
report/diagrams/diagram.mermaid

@ -0,0 +1,6 @@
graph LR
mermaid --> svg
vega-lite --> svg
svg --> html
pug --> html
html -->|Chrome| pdf

7
report/diagrams/diagram.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 9.8 KiB

1
report/diagrams/plot.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 10 KiB

18
report/diagrams/plot.vegalite.json

@ -0,0 +1,18 @@
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
"data": {
"values": [
{"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
{"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
{"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52},
{"a": "J","b": 19}, {"a": "K","b": 87}, {"a": "L","b": 52},
{"a": "M","b": 19}, {"a": "N","b": 87}, {"a": "O","b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"color": {"value": "#b4588c"}
}
}

BIN
report/report.pdf

Binary file not shown.

137
report/report.pug

@ -0,0 +1,137 @@
.report-sidebar: p Σύνθεση Ενεργών και Παθητικών Κυκλωμάτων
br
br
br
div.center
h2.no-count ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ
h2.no-count ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ
h2.no-count ΤΟΜΕΑΣ ΗΛΕΚΤΡΟΝΙΚΗΣ
br
br
br
br
h1#title ΣΥΝΘΕΣΗ ΕΝΕΡΓΩΝ ΚΑΙ ΠΑΘΗΤΙΚΩΝ ΚΥΚΛΩΜΑΤΩΝ
h3.no-count 7ο εξάμηνο
br
br
br
br
h3.no-count.
Εισηγητής: Θεοχάρης Ι.<br/>
Φανάκης Απόστολος, 8261
br
span Θεσσαλονίκη 2018
div(style="page-break-before:always")
//Insert components table here!
include 0_intro
include 1_low_pass/1_low_pass
//- include 2_band_pass
//- include 3_band_elimination
//- include 4_high_pass
.summary.ui.piled.segment: span.
We tend to prefer mark-up languages (Markdown, LaTeX, etc.) to interfaced document editors like MS Office or Google Docs, because they make it easier to quickly write documents with consistent style. However, Markdown is limited to the title/sections/paragraphs structure, and LaTeX has obscure syntax and errors that also make it difficult to go off the beaten tracks.
This report introduces ReLaXed, a solution using Pug and SCSS for document definition and Google Chrome for rendering.
:markdown-it
## Web technologies have never looked so good
Plenty of CSS frameworks will make sure your documents will look clean and modern. Javascript frameworks can plot schemas, highlight code, or render maths equations the same way LaTeX does. Millions of people (and growing) are now fluent in these technologies. Shorthand languages like Pug and SCSS are finally making it fun to write HTML and CSS. (Headless) web browsers can easily turn all these technologies into PDF, on any platform.
As an illustration, it took just one line to import the Semantic UI framework and style this document. Now look at this gorgeous table (don't pay attention to the content, it's place-holder)
p Here is another cool component provided by Semantic UI:
.ui.container
.ui.icon.message.yellow.block-center
i.lightbulb.outline.icon
.content
.header Give it a try !
p
| The ReLaXed homepage is at
a(href='https://github.com/RelaxedJS/ReLaXed') github.com/RelaxedJS/ReLaXed
figure.float-left.width-8cm.ui.raised.segment
.panel
.label A
include diagrams/plot.svg
.panel
.label B
.top-5mm
include diagrams/diagram.svg
figcaption
.reference Figure 1
.title Examples of graphics generated by web frameworks.
.caption.
This also demonstrates figure composition into panels - suck it, markdown !
#[b A. ] Graph defined as a JSON and transformed to SVG using Vega-lite and Chrome.
#[b B. ] Graph generated using Mermaid and Chrome.
:markdown-it(html=true)
Next we will have a look at some differences between ReLaXed and other frameworks.
## ReLaXed vs other solutions
Here are a few highlights of what you may win, or lose, using ReLaXed instead
of another solution. This section is of course open to contributions.
Let us start with Markdown. This widely supported language (Github, NPM, etc.)
became very popular due to its simple and friendly syntax close to plain text.
Markdown also has cool editors and extensions. One example is
[``markdown-preview-enhanced``](https://atom.io/packages/markdown-preview-enhanced)
which can render plots, flowcharts, and equations.
ReLaXed has been specially extended so that it could support plot, flowchart,
and equations (using the same underlying libraries as
markdown-preview-enhanced), as illustrated in Figure 1. In addition, ReLaXed
allows you to write any kind of layout with boxes, sidebars, etc. HTML
elements are more fun to write with Pug (in markdown, HTML elements must be
written in plain HTML). You can define macros, use conditionals and loops, use
computed expressions using Javascript , and ReLaXed supports (S)CSS which is
pretty cool. Last but not least, you can write parts in markdown if you want
to <i class="em em-wink"></i> . Yep, that was an emoji. Cost us one line of
code, to import [Emoji CSS](https://afeld.github.io/emoji-css/) as a
stylesheet.
Now what about LaTeX ? Sure, LaTeX is wide-spread in academic and publishing
communities, where it's typography and layout optimizations, and its
bibliography management tool are very appreciated. But LaTeX is also known for
its cryptic errors, its complex advanced syntax which not many make the effort
to learn, and as a consequence not many LaTeX venture on the creative side
with their own themes and layouts.
div(style="page-break-before:always")
:markdown-it(html=true)
Certainly the letter and paragraph spacings won't be as nice in ReLaXed (but
Google Chrome is still doing a very good job), but the syntax, clear error
messages, etc. will certainly make you happier. ReLaXed is also possibly
faster to render big documents (not entirely sure though <i class="em
em-thinking_face"></i>).
template#page-footer
style(type='text/css').
.pdfheader {
font-size: 10px;
color: #aaa;
font-family: Helvetica;
font-weight: bold;
width: 1000px;
border-top: 1px solid #aaa;
margin-left: 10%;
margin-right: 10%;
padding-top: 1mm;
margin-bottom: -1mm;
text-align: center;
}
.pdfheader Page #[span.pageNumber] / #[span.totalPages]
style
include:scss report.scss

174
report/report.scss

@ -0,0 +1,174 @@
@import 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css';
@import 'https://afeld.github.io/emoji-css/emoji.css';
$primary_color: #009688;
$page-width: 17cm;
@page {
margin: 1cm 1cm 2cm 0cm;
}
html {
padding-left: 1cm;
padding-right: 1cm;
font-family: 'Lato';
font-size: 14px !important;
}
body {
margin-left: 1cm;
counter-reset: h2;
}
#title {
font-weight: bold;
font-size: 2.5em;
}
.summary {
background-color: lighten($primary_color, 33%);
}
h2 {
font-size: 1.8em;
counter-reset: h3;
}
h2:before {
counter-increment: h2;
content: counter(h2) ". "
}
h3:before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". "
}
h2.no-count:before, h3.no-count:before {
content: "";
counter-increment: none;
}
p {
line-height: 1.5em;
font-size: 1.1em !important;
text-align: justify;
}
a {
text-decoration: underline;
color: inherit;
}
$sidebar-width: 0.25in;
$sidebar-height: 943px;
.report-sidebar {
position: fixed;
left: -$sidebar-width;
top: 0;
width: $sidebar-width;
height: $sidebar-height;
writing-mode: vertical-rl;
border-top: $sidebar-width solid transparent;
border-left: $sidebar-width solid lighten($primary_color, 10%);
border-bottom: $sidebar-width solid transparent;
p {
text-align: center;
color: lighten($primary_color, 30%);
margin-top: -1.55em;
}
}
.block-center {
display: block;
margin: 0 auto;
}
.mermaid-svg {
max-width: 100%;
height: auto;
display: block;
.node {
rect {
fill: none;
rx: 5px;
ry: 5px;
stroke: black;
}
}
.edgelabel {
background: white;
color: #444;
}
}
.message, figure {
page-break-inside: avoid;
}
.message {
margin-bottom: 1em !important;
}
figure {
margin-top: 0.5em;
margin-bottom: 1em;
padding: 0.5em;
&> .panel {
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
&> .label {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
}
}
&.float-left {
margin-left: -1em !important;
margin-right: 2em !important;
margin-top: 1em;
margin-bottom: 1em;
float: left;
}
figcaption {
font-size: 0.75em;
text-align: justify;
width: 100%;
margin-top: 1em;
&> .reference, .title {
font-weight: bold;
display: inline;
margin-right: 0.5em;
}
&> .reference {
color: darken($primary_color, 50%);
&::after {
content: ': ';
}
}
&> .title {
color: darken($primary_color, 40%);
}
&> .caption {
display: inline;
}
}
}
@for $i from 1 to 20 {
.width-#{$i}cm { width: #{10 * $i}mm !important; }
}
@for $i from 1 to 20 {
.top-#{$i}mm { margin-top: #{$i}mm; }
}
.center {
text-align: center;
}

308
report/report_temp.htm

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save