{% extends "!layout.html" %}

{%- block content %}
 <div id="navbar" class="{{ theme_navbar_class }} navbar-default {% if theme_navbar_fixed_top|tobool -%} navbar-fixed-top{%- endif -%}">
    <div class="container">
      <div class="navbar-header">
        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="{{ pathto('index') }}">
          {%- block sidebarlogo %}
            {%- if logo %}<span><img src="{{ pathto('_static/' + logo, 1) }}"></span>{%- endif %}
          {%- endblock %}
          {% if theme_navbar_title -%}{{ theme_navbar_title|e }}{%- else -%}{{ project|e }}{%- endif -%}
        </a>
        <span class="navbar-text navbar-version pull-left"><b>{{ version|e }}</b></span>
      </div>
	{% include "navbar.html" %}
            </div>
  </div>
  <div class="jumbotron">
      <div class="container">
        <h1 >Moho</h1>
        
		<p class='lead-sm'>Moho is an open source software framework for the rapid development of Rich Internet Applications written in Python.
		Inspired by <a href = https://ipywidgets.readthedocs.io/en/stable/>ipywidgets</a>, - famous package for fast building of GUI components 
		for Jupyter notebooks and <a href="https://kivy.org">Kivy project</a> - cross-platform Python library for rapid development of applications
		with multitouch support, Moho combines the ideas of both libraries. The GUI components of an application are developed in Python,
		a knowledge of HTML and Javascript for general cases is not required. The event-slot model, borrowed from Kivy project, can be used effectively for
		remote (browser-server) and local (server components) events.
		
		If you are familiar with Kivy framework you will notice that design of Moho applications is very similar
        to Kivy with the only difference, instead of running an OpenGL based desktop application you run a server-client application.
		</p>
		<p class='lead-sm'>Moho is written in Python and Cython, with Tornado running a server application and Bootstrap as a base for
		the frontend components with rich variety of widgets. The 2D (SVG) and 3D (X3dom) graphics support together with
		<a href="https://matplotlib.org/">Matplotlib</a> library
		integration makes Moho a perfect choice for <b>scientific</b> or <b>instrumental</b> control applications.
		</p>
		<p>
		  <a class="btn btn-primary btn-md" href="{{ pathto('gettingstarted/first_app') }}" role="button">First application &raquo;</a>
		  <a class="btn btn-default btn-md" href="{{ pathto('install') }}" role="button">Installation &raquo;</a>
		  <a class="btn btn-default btn-md" href="showcase/" role="button">Live Showcase (WASM) &raquo;</a>
		  <a class="btn btn-default btn-md" href="https://gitlab.com/escape-projects/moho-framework/" role="button">Check on gitlab &raquo;</a>
		</p>
      </div>
    </div>

<!--    <div class="container">
      
      <div class="row">
        <div class="col-md-4">
          <h2>Why?</h2>
          <p class='lead-sm'>
		  ......
		 </p> 
        </div>
        <div class="col-md-4">
          <h2>How?</h2>
          <p class='lead-sm'>
			.......
		  </p>
       </div>
        <div class="col-md-4">
          <h2>Who can use?</h2>
          <p class='lead-sm'>
		  
		  </p>
        </div>
      </div>
    </div> -->
     
	 
	 <!-- START THE FEATURETTES -->
<div class="container">
    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-5">
        <h2 class="featurette-heading">Buttons and Toolbars</h2>
        <p class="lead-sm"> Moho provides support for standard Bootstrap buttons and toolbars with vertical and horizontal orientation. 
		Tooltips or Popovers are activated using corresponding Button properties.
		</p>
        <p class="lead-sm">See the full <a href="{{ pathto('showcase_gallery') }}">showcase gallery</a>
        for every widget screen.</p>
      </div>
      <div class="col-md-7">
		<a href="_static/images/showcase_buttons.png">
        <img src="_static/images/showcase_buttons.png" class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="600" role="img" aria-label="Buttons">
		</a>
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-5">
        <h2 class="featurette-heading">Code input</h2>
        <p class="lead-sm">The CodeInput widget is a dual-layer monospace editor with
        server-side Pygments highlighting (light and monokai themes).</p>
      </div>
      <div class="col-md-7">
	  <a href="_static/images/showcase_codeinput.png">
        <img src="_static/images/showcase_codeinput.png" class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="600" role="img" aria-label="CodeInput">
      </a>
	  </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-5">
        <h2 class="featurette-heading">Inputs</h2>
        <p class="lead-sm">Different types of inputs are supported by Moho when input from a user is required.</p>
      </div>
      <div class="col-md-7">
	  <a href="_static/images/showcase_textinputs.png">
        <img src="_static/images/showcase_textinputs.png" class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="600" role="img" aria-label="Inputs">
      </a>
	  </div>
    </div>
	
	<div class="row featurette">
      <div class="col-md-5">
        <h2 class="featurette-heading">Plots</h2>
        <p class="lead-sm">Matplotlib and Plotly are integrated into Moho. Matplotlib figures are
        rendered on the server; Plotly canvases stream interactive figures to the browser.
		Plots for each client are rendered in their own canvas instances.</p>
      </div>
      <div class="col-md-7">
	  <a href="_static/images/showcase_matplotlib.png">
        <img src="_static/images/showcase_matplotlib.png" class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="600" role="img" aria-label="Plots">
      </a>
	  <a href="_static/images/showcase_plotly.png">
        <img src="_static/images/showcase_plotly.png" class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="600" role="img" aria-label="Plotly">
      </a>
	  </div>
    </div>
	
	<div class="row featurette">
      <div class="col-md-5">
        <h2 class="featurette-heading">Graphics</h2>
        <p class="lead-sm">For 2D graphics Moho uses vector graphics, i.e. SVG. Each SVG shape, like Rectangle or Circle has its python implementation with
		corresponding attributes of this shape, like centre coordinates or radius. Developer can easily bind this attributes to other GUI components, like sliders, for example. 
		The events are bound on server side and all clients will get an update for changed SVG shape.</p>
		<p class="lead-sm">X3dom library is used for 3D graphics. X3dom components have the same look and feel as SVG components and fit perfectly to Moho concept.</p>
      </div>
      <div class="col-md-7">
	  
	  <a href="_static/images/showcase_svg.png">
        <img src="_static/images/showcase_svg.png" class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="600" role="img" aria-label="Svg">
		</a>
		<a href="_static/images/showcase_x3d.png">
	<img src="_static/images/showcase_x3d.png" class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="600" role="img" aria-label="X3D">
      </a>
	  </div>
    </div>

    <hr class="featurette-divider">
</div>
    <!-- /END THE FEATURETTES -->

{%- endblock %}

{%- block footer %}
<footer class="footer">
  <div class="container">
    <p class="pull-right">
      <a href="#">Back to top</a>
      {% if theme_source_link_position == "footer" %}
        <br/>
        {% include "sourcelink.html" %}
      {% endif %}
    </p>
    <p>
    <a href="http://escape-app.net/impressum.html">Impressum</a><br/>
    {%- if show_copyright %}
      {%- if hasdoc('copyright') %}
        {% trans path=pathto('copyright'), copyright=copyright|e %}&copy; <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}<br/>
      {%- else %}
        {% trans copyright=copyright|e %}&copy; Copyright {{ copyright }}.{% endtrans %}<br/>
      {%- endif %}
    {%- endif %}
    {%- if last_updated %}
      {% trans last_updated=last_updated|e %}Last updated on {{ last_updated }}.{% endtrans %}<br/>
    {%- endif %}
    {%- if show_sphinx %}
      {% trans sphinx_version=sphinx_version|e %}Created using <a href="http://sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}.{% endtrans %}<br/>
    {%- endif %}
    </p>
  </div>
</footer>
{%- endblock %}