Commit 02b2c48b authored by Paul Asmuth's avatar Paul Asmuth
Browse files

update readme, documentation css

parent 1406a2c2

examples/other/demo.ptx

+117 −130
Original line number Diff line number Diff line
@@ -158,33 +158,60 @@ box { 
  height: 420px;



  box {

    position: top;

    height: 130px;

    margin-bottom: 1em;

    width: 490px;

    position: right;

    margin-right: .5em;

    height: 340px;



    box {

      position: left;

      width: 320px;

      height: 120px;

      margin-left: 1em;

      margin-right: 1em;

      margin-top: 30px;

    scale-y-min: 0;

    scale-y-max: 55;

    scale-x-min: -3.5;

    scale-x-max: 3.5;



      box {

        margin-top: 10px;

        margin-bottom: 10px;

        border-bottom-width: 1px;

        border-bottom-color: #ccc;

        border-top-width: 1px;

        border-top-color: #ccc;

    bars {

      xs: -3, -2, -1, 0, 1, 2, 3;

      ys: 10, 28, 20, 26, 41, 44, 37;

      size: .6em;

      offset: .45em;

      color: #4572a7;

    }



        box {

          background-color: #f2f2f2;

    bars {

      xs: -3, -2, -1, 0, 1, 2, 3;

      ys: 12, 19, 23, 30, 35, 43, 33;

      size: .6em;

      offset: -.45em;

      color: #aa4643;

    }



    legend {

      position: top left inside;

      items: A, B;

      colors: #4572a7, #aa4643;

    }



    axis {

      position: bottom;

      layout: linear(1, align -3);

    }



    axis {

      position: top;

    }



    axis {

      position: right;

      width: 60px;

      layout: linear(10);

    }



  }



  box {

    position: top;

    width: 900px;

    height: 130px;

    margin-bottom: 1em;

    scale-y-min: 0;

    scale-y-max: 140;
@@ -201,8 +228,9 @@ box { 
    }



    axis {

        position: right;

      position: left;

      width: 60px;

      layout: linear(40);

    }



    legend {
@@ -210,36 +238,14 @@ box { 
      items: "Channel 1";

      colors: #4572a7;

    }

    }



  }



  box {

    position: top;

    width: 900px;

    height: 100px;

    margin-bottom: 1em;



    box {

      position: left;

      width: 320px;

      height: 90px;

      margin-left: 1em;

      margin-right: 1em;



      box {

        margin-top: 10px;

        margin-bottom: 10px;

        border-top-width: 1px;

        border-top-color: #ccc;

        border-bottom-width: 1px;

        border-bottom-color: #ccc;



        box {

          background-color: #f2f2f2;

        }

      }

    }



    box {

    scale-y-min: 0;

    scale-y-max: 140;
@@ -250,8 +256,9 @@ box { 
    }



    axis {

        position: right;

      position: left;

      width: 60px;

      layout: linear(40);

    }



    legend {
@@ -260,31 +267,11 @@ box { 
      colors: #4572a7;

    }

  }

  }

  box {

    position: top;

    width: 900px;

    height: 130px;

    margin-bottom: 1em;



    box {

      position: left;

      width: 320px;

      height: 80px;

      margin-left: 1em;

      margin-right: 1em;



      box {

        border-bottom-width: 1px;

        border-bottom-color: #ccc;

        margin-bottom: 10px;



        box {

          background-color: #f2f2f2;

        }

      }

    }



    box {

    scale-y-min: 0;

    scale-y-max: 140;
@@ -301,8 +288,9 @@ box { 
    }



    axis {

        position: right;

      position: left;

      width: 60px;

      layout: linear(40);

    }



    legend {
@@ -311,7 +299,6 @@ box { 
      colors: #4572a7;

    }

  }

  }





}

examples/other/demo.svg

+133 −102

File changed.

Preview size limit exceeded, changes collapsed.

extra/web/build_layout.py

+44 −42
Original line number Diff line number Diff line
@@ -9,7 +9,7 @@ tpl = """ 
<!DOCTYPE html>

<html>

  <head>

    <title>{{title}}</title>

    <title>{{title_seo}}</title>

    <link href='/documentation.css' type='text/css' rel='stylesheet' />

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
@@ -17,19 +17,9 @@ tpl = """ 
    <meta name="google-site-verification" content="GxeOO-JtsPc9Doi_WQTvQFI-b7TQgCYxjsVTNtsA7Rc" />

  </head>

  <body>

    <div id="header" class="border">

      <div class="doc_wrap">

        <a href="/"><img src="/logo.png" alt="PlotFX" class="logo" /></a>

        <a class="menu {{menu_active_documentation}}" href="/">Documentation</a>

        <a class="menu {{menu_active_examples}}" href="/examples">Examples</a>

        <a class="menu {{menu_active_download}}" href="/download">Download</a>

        <a class="menu github" href="http://github.com/plotfx/plotfx" target="_blank">View on <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png" style="height: 12px; position: relative; top: 1px; left: 1px;"></a>

      </div>

    </div>



    <div class="doc_wrap">

      <div class="doc_container">

    <div id="navigation">

      <a href="/" style="display: block; margin-bottom: -.4em; "><img src="/logo.png" alt="PlotFX" class="logo"/></a>



      {{#toc}}

        <a class="nav_title">{{title}}</a>

        <ul>
@@ -49,22 +39,33 @@ tpl = """ 
      {{/toc}}

    </div>



        <div id="documentation">

          <a target="_blank" href="https://github.com/plotfx/plotfx/blob/master/manual" style="float: right; margin-top:18px; font-size: 80%;">

            Edit this page on GitHub

    <article>

      <div class="header">

        <a style="display: block; text-decoration: none; color: #666; float: right; margin-top: 2em;" href="http://github.com/plotfx/plotfx" target="_blank">

          View on <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png" style="height: 12px; position: relative; top: 1px; margin-left: 2px;">

        </a>



          {{{content}}}

        <ul class="crumbs">

          <li><a>Documentation</a></li>

          <li><a>{{title}}</a></li>

        </ul>

      </div>



      <div id="documentation">

        {{{content}}}

      </div>



      <div style="text-align: right; margin-top: 10em; font-size: 80%;">

        <a class="link" target="_blank" href="https://github.com/plotfx/plotfx/blob/master/manual">

          Edit this page on GitHub

        </a>

      </div>



      <div id="footer">

      <div class="wrap">

        Copyright &copy; 2011-2018 Paul Asmuth, Laura Schlimmer et al. &mdash;

        PlotFX is free software licensed under a 3-Clause BSD License

      </div>

    </div>

    </article>

  </body>

</html>

"""
@@ -81,8 +82,9 @@ def build_layout(url, content, title=""): 
  toc = yaml.load(Path("manual/toc.yaml").read_text())["documentation"]

  toc = map(lambda x: extend_toc(x), toc)



  if title != "PlotFX":

    title += " - PlotFX"

  title_seo = title

  if title_seo != "PlotFX":

    title_seo += " - PlotFX"



  return TPL.render(tpl, {

    "content": content,

extra/web/documentation.css

+57 −55
Original line number Diff line number Diff line 
html {

  margin: 0;

  padding: 0;

  min-height: 100%;

}



body {
@@ -12,7 +13,9 @@ body { 
  background-color: #fff;

  color: #000;

  text-rendering: optimizelegibility;

  /*text-shadow:0 0 1px #000;*/

  display: flex;

  flex-direction: row;

  min-height: 100vh;

}



h1, h2, h3, h4, h5, h6 {
@@ -83,66 +86,47 @@ ul li p { 
  margin: 0;

}



.wrap {

  max-width: 1100px;

  margin: auto;

}



.doc_wrap {

  max-width: 1100px;

  margin: auto;

  min-height: 100vh;

}



@media (max-width: 1260px) {

  .wrap {

    margin:0 30px;

  }

.logo, #documentation .logo {

  height: 24px;

  width: 87.5px;

}



#header {

  margin: 0;

  padding: 1px 0 0 0;

  height: 56px;

  line-height: 56px;

.header {

  border-bottom: 1px solid #ddd;

  overflow: auto;

  padding-bottom: 1em;

  margin-bottom: 1em;

}



#header {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

.header ul.crumbs {

  margin: 2em 0 0 0;

  padding: 0;

}



#header .logo {

  height: 24px;

  width: 87.5px;

  margin-top: 16px;

  margin-right: 122px;

  float: left;

.header ul.crumbs li {

  display: inline-block;

  list-style-type: none;

}



#header a.menu {

  text-decoration:none;

  padding: 0 10px;

  margin-left: 10px;

  line-height: 32px;

  margin-top: 12px;

  color: #04f;

.header ul.crumbs li:after {

  margin-left: .5em;

  margin-right: .2em;

  content: "›";

}



#header a.menu.github {

  font-size: 10pt;

  color: #333;

  float: right;

.header ul.crumbs li:last-child:after {

  content: "";

}



#header a.menu.github:hover {

.header ul.crumbs li:hover a {

  color: #04f;

  cursor: pointer;

}



#header a.menu.active {

  color: #333;

}





.notice {

  margin-top: 2em;

  margin-bottom: 3em;
@@ -163,6 +147,7 @@ ul li p { 
  font-size: 90%;

  color:#777;

  border-top: 1px solid #ddd;

  margin-top: 1em;

}



#footer a {
@@ -171,16 +156,27 @@ ul li p { 


#navigation {

  padding: 2em 2em 0 0;

  width: 200px;

  top: 65px;

  font-size: 16px;

  border-right: 1px solid #e8e8e8;

  margin-right: 4em;

  padding-left: 2em;

  max-width: 160px;

  flex: 1;

}



#navigation h1 {

  font-size: 18pt;

}



#navigation h1 span {

  display: block;

  font-size: 12pt;

}



#navigation ul {

  list-style-type:none;

  margin: 0;

  border-left: 1px solid #ddd;

  padding: 0 0 0 1em;

  padding: 0 0 0 0;

  margin-left: 2px;

}
@@ -188,16 +184,17 @@ ul li p { 
  padding-left: 29px;

  margin-bottom: .4em;

  list-style-type: disc;

  border-left: none;

  border-left: 1px solid #eee;

}



#navigation ul ul li {

  line-height: 24px;

  display: none;

}



#navigation ul li {

  font-size: 14px;

  line-height: 28px;

  line-height: 24px;

}



#navigation a.nav_title:first-child  {
@@ -232,25 +229,30 @@ ul li p { 
  display: flex;

  overflow: auto;

  margin-bottom: 2em;

  border-top: 1px solid #ddd;

  padding-top: 10px;

}



#documentation {

article {

  max-width: 860px;

  display: flex;

  flex: 1;

  flex-direction: column;

}



#documentation {

  color: #000;

  background: #fff;

  font-size: 14.5px;

  font-weight: 400;

  margin: 0;

  padding: 16px 0 50px 0;

  padding-top: 1em;

  overflow: hidden;

  flex: 1;

}



#documentation h1 {

  margin-bottom: 0.6em;

  padding-bottom: 0;

  font-size: 28px;

  font-size: 30px;

  font-weight: 500;

}
@@ -312,12 +314,12 @@ ul li p { 
  border-bottom: 1px solid #eee;

}



#documentation a {

#documentation a, a.link {

  color: #04f;

  text-decoration: none;

}



#documentation a:hover {

#documentation a:hover, a.link:hover {

  text-decoration: underline;

}

manual/gettingstarted.txt

+40 −0
Original line number Diff line number Diff line
@@ -35,3 +35,43 @@ tool like Inkscape than to a chart generator. 




### Diving deeper





----



[![A simple line chart](./examples/linecharts/simple_timeseries.svg)](./examples/linecharts/simple_timeseries)



The simple line chart from above was generated with PlotFX using the following

command line:



    $ plotfx --in example_chart.ptx --out example_chart.svg



Here is the input file from which the above plot was generated (`example_chart.ptx`):



    width: 1200px;

    height: 280px;



    scale-y-min: 0;

    scale-y-max: 140;



    lines {

      xs: csv('measurement.csv', time);

      ys: csv('measurement.csv', value2);

      colors: #06c;

    }



    axis {

      position: bottom;

      format: datetime("%H:%M:%S");

    }



    axis {

      position: left;

      layout: linear(20);

    }





More examples can be found on [the examples page](https://github.com/plotfx/plotfx/tree/master/examples).

For a more detailed introduction to PlotFX, see the [Getting Started](/documentation/getting-started) page. 

If you have any questions please don't hesitate to reach out via [the PlotFX email group](http://groups.google.com/group/plotfx).

CRA Git | Maintained and supported by SUSTech CRA and CCSE