Difference between revisions of "Team:Madrid-OLM/prueba"

Line 1: Line 1:
 
{{Madrid-OLM/1}}
 
{{Madrid-OLM/1}}
 
<html lang="en">
 
<html lang="en">
−
    <style>
 
−
        .tittle-secc{
 
−
            padding-top: 12em !important;
 
−
        }
 
−
        .figureimage{
 
−
            margin-bottom: 0.5em
 
−
            }
 
−
        .ourlist{ 
 
−
            font-size: 80% !important;
 
−
        }
 
−
        .nomargin{
 
−
            margin-bottom: 0.3em !important;
 
−
        }
 
−
        .red{
 
−
            color: red;
 
−
        }
 
−
   
 
−
    </style>
 
−
   
 
−
    <head>
 
−
        <meta charset="utf-8">
 
−
        <title>Electronic part of the device</title>
 
−
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
−
        <meta name="description" content="Site Description Here">
 
−
    </head>
 
 
     <body class=" ">
 
     <body class=" ">
 
         <a id="start"></a>
 
         <a id="start"></a>
 +
        <div class="nav-container ">
 +
            <nav class="bar bar-4 bar--transparent bar--absolute" data-fixed-at="200">
 +
                <div class="container">
 +
                    <div class="row">
 +
                        <div class="col-lg-1 col-md-2 col-md-offset-0 col-4">
 +
                            <div class="bar__module">
 +
                                <a href="index.html">
 +
                                    <img class="logo logo-dark" alt="logo" src="img/logo-dark.png" />
 +
                                    <img class="logo logo-light" alt="logo" src="img/logo-light.png" />
 +
                                </a>
 +
                            </div>
 +
                            <!--end module-->
 +
                        </div>
 +
                        <div class="col-lg-4 col-lg-offset-0 col-md-5 col-md-offset-0 col-8 col-offset-2">
 +
                            <div class="bar__module">
 +
                                <a class="btn btn--sm type--uppercase" href="#">
 +
                                    <span class="btn__text">
 +
                                        Try Builder
 +
                                    </span>
 +
                                </a>
 +
                                <a class="btn btn--sm btn--primary type--uppercase" href="#">
 +
                                    <span class="btn__text">
 +
                                        Buy Now
 +
                                    </span>
 +
                                </a>
 +
                            </div>
 +
                            <!--end module-->
 +
                        </div>
 +
                    </div>
 +
                    <!--end of row-->
 +
                </div>
 +
                <!--end of container-->
 +
            </nav>
 +
            <!--end bar-->
 +
        </div>
 
         <div class="main-container">
 
         <div class="main-container">
−
             <section class="page-navigator">
+
             <section class="imageblock switchable switchable--switch feature-large bg--dark space--sm">
−
                 <ul>
+
                 <div class="imageblock__content col-lg-6 col-md-4 pos-right">
−
                     <li>
+
                     <div class="background-image-holder">
−
                         <a href="#home" class="inner-link" data-title="Home"></a>
+
                         <img alt="image" src="img/landing-15.jpg" />
−
                    </li>
+
                    </div>
−
                     <li>
+
                </div>
−
                         <a href="#hard" class="inner-link" data-title="Hardware"></a>
+
                <div class="container">
−
                    </li>
+
                     <div class="row">
−
                    <li>
+
                         <div class="col-lg-5 col-md-7 mt--2">
−
                        <a href="#soft" class="inner-link" data-title="Software"></a>
+
                            <h1>Streamline your workflow with Stack</h1>
−
                     </li>
+
                            <p class="lead">
−
                      
+
                                Clean and contemporary style to suit a range of purposes from corporate, tech startup, marketing
−
                 </ul>
+
                                <br class="hidden-xs hidden-sm" /> site to digital storefront.
 +
                            </p>
 +
                            <div class="modal-instance block">
 +
                                <div class="video-play-icon video-play-icon--sm modal-trigger"></div>
 +
                                <span>
 +
                                    <strong>Watch Overview</strong>&nbsp;&nbsp;&nbsp;104 Seconds</span>
 +
                                <div class="modal-container">
 +
                                    <div class="modal-content bg-dark" data-width="60%" data-height="60%">
 +
                                        <iframe data-src="https://www.youtube.com/embed/6p45ooZOOPo?autoplay=1" allowfullscreen="allowfullscreen"></iframe>
 +
                                    </div>
 +
                                    <!--end of modal-content-->
 +
                                </div>
 +
                                <!--end of modal-container-->
 +
                            </div>
 +
                            <!--end of modal instance-->
 +
                        </div>
 +
                     </div>
 +
                     <!--end of row-->
 +
                 </div>
 +
                <!--end of container-->
 
             </section>
 
             </section>
−
           
+
             <section class="imageblock switchable feature-large space--sm bg--secondary">
−
             <section id="home" class="tittle-secc text-center switchable feature-large">
+
                <div class="imageblock__content col-lg-6 col-md-4 pos-right">
 +
                    <div class="background-image-holder">
 +
                        <img alt="image" src="img/landing-19.jpg" />
 +
                    </div>
 +
                </div>
 
                 <div class="container">
 
                 <div class="container">
−
                     <div class="row justify-content-around">
+
                     <div class="row">
−
                         <div class="col-md-8 col-lg-8">
+
                         <div class="col-lg-5 col-md-7">
−
                             <h1 id="Teamtittle">Electronics</h1>
+
                             <h2>Build flexible, design-driven websites with ease.</h2>
−
                             <p class="lead">The final version of the device integrates multiples features. Each one of these characteristics come with its own platform and its own firmware.</p>
+
                             <p class="lead">
−
                             <p class="lead">We have chosen each one of them with the essential characteristic of being Arduino compatible. The final device looks like a patchwork, with all the different platforms working together to accomplish the main objective: automate the measurement of the electrode.</p>
+
                                Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away &mdash; Customizing your site in the included Variant Page Builder makes experimenting with styles and content arrangements dead simple.
 +
                             </p>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
Line 57: Line 91:
 
                 <!--end of container-->
 
                 <!--end of container-->
 
             </section>
 
             </section>
−
           
+
             <section class="text-center cta cta-4 space--xxs border--bottom ">
−
             <section id="hard" class="text-center">
+
 
                 <div class="container">
 
                 <div class="container">
 
                     <div class="row">
 
                     <div class="row">
−
                         <div class="col-md-10 col-lg-8 boxed boxed--border bg--secondary boxed--lg box-shadow">
+
                         <div class="col-md-12">
−
                             <h2>Hardware</h2>
+
                             <span class="label label--inline">Hot!</span>
−
                            <p class="lead">The hardware is mainly composed of different modules, interconnected for two main purposes: distributing the powers rails through all the modules and communicating each module with the main controller.</p>
+
                             <span>Over 290 interface blocks, 140 demo pages and Variant Page Builder.
−
                            <p class="lead">The hardware is mainly composed of different modules, interconnected for two main purposes: distributing the powers rails through all the modules and communicating each module with the main controller.</p>
+
                                 <a href="#">Purchase Stack</a> for $18 USD.</span>
−
                            <img class= "figureimage" alt="Figure1" src="https://static.igem.org/mediawiki/2018/1/10/T--Madrid-OLM--Device--FinalPrototype--BSA.png" style="width:70%;"/>
+
−
                            <p class="lead" style="margin-left:15%; margin-right:10%;">Figure 1: Diagram of the different platforms that run the system.</p>
+
−
                             <p class="lead">Broadly the system is composed of four main sections: </p>
+
−
                            <ol class="ourlist">
+
−
                                <li><p class="lead">A pump system on a microlitre scale. Composed of eight stepper motors, controlling the syringe’s pumps. It is in charge of injecting and removing the fluid from the chips. This system is directly connected to a 12V power supply and controlled through the digital pins from the main controller, Arduino Mega.</p></li>
+
−
                                 <li><p class="lead">A potentiostatic measurement system, the <a href="http://iorodeo.com/products/potentiostat-shield">Rodeostat</a>, directly connected to the microfluidic chip. It connects directly to the Arduino (Which governs the device) through Serial communication. For that purpose, the pins 26 and 31 of the P14 connector in the RodeoStat have been connected to the RX2 and TX2 pins on the Arduino Mega. The system is supplied by the 5V pin of the Arduino Mega power converter. For a more detailed description of the system, connection checks <a href="http://forum.iorodeo.com/topic/91/arduino-communication/17">this</a> threat where we have explained to the RodeoStat community our set up.</p></li>
+
−
                                <li><p class="lead">A WiFi module, designed and developed by ourselves. The system is based on the board ESP8266, broadly extended in IoT applications. It communicates to Arduino through Serial protocol through its RX3 and TX3 pins. The purpose of this module is to uploads the data sent by Arduino to an external cloud server on FireBase. You could go over all the schematic and board designs on <a href="https://github.com/OpenLabMadrid/iGEM-Madrid-OLM/tree/master/Electronics/Final%20version/WiFi%20Module">our GitHub.</a></p></li>
+
−
+
−
<img class= "figureimage" alt="Figure1" src="https://static.igem.org/mediawiki/2018/7/74/T--Madrid-OLM--Device--FirstPrototype--wifimodule.png" style="width:40%;"/>
+
−
<li class= "mt--1">
+
−
<p class="lead">The main controller which operates the rest of the components, Arduino Mega 2560.</p>
+
−
<p class="lead nomargin"><spam class="red mt--1">CAUTION</spam>: The controllers has several modifications that allow it to work in the device. Trying to replicate it without the modifications is dangerous and can imply the universe destruction:</p>
+
−
<ol class="ourlist">
+
−
+
−
<li class="mt--1"><p class="lead">Arduino’s M7 diode, which job is to avoid an eventual situation of reverse current, has been removed. This is because of his inability to stand the 4 amperes that go through the system when the 8 motors are at their full capacity. In its position, we have solder a IRLZ44N transistor, able to stand up to 50 A. To do it, the pins of the source and drain were connected in a similar way as the pins of the diode and the gate pin was connected to the 12V  power supply. A heat sink was also put in the upper side.</p></li>
+
−
<img class= "figureimage mt--1" alt="Figure1" src="https://static.igem.org/mediawiki/2018/a/ad/T--Madrid-OLM--Device--FirstPrototype--MOsfet.png" style="width:80%;"/>
+
−
<li><p class="lead mt--1">An Arduino Shield was mounted to increase the total of pins to 8 Vin an 8 GND, to connects the power of the motor drivers.</p></li>
+
−
</ol>
+
−
<img class= "figureimage mt--1" alt="Figure1" src="https://static.igem.org/mediawiki/2018/5/57/T--Madrid-OLM--Device--FirstPrototype--Shield.png" style="width:50%;"/>
+
−
</li>
+
−
</ol>
+
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
Line 92: Line 104:
 
                 <!--end of container-->
 
                 <!--end of container-->
 
             </section>
 
             </section>
−
+
            <section class="text-center">
−
            <section id="soft" class="text-center">
+
 
                 <div class="container">
 
                 <div class="container">
−
<div class="col-md-10 col-lg-8 boxed boxed--border bg--secondary boxed--lg box-shadow">
+
                    <div class="row justify-content-center">
−
<span class="h2">Software</span>
+
                        <div class="col-md-10 col-lg-8">
−
<p class="lead">
+
                            <h2>All the tools you'll need</h2>
−
As we have introduced in the previous section, our system is like a patchwork, with several different platforms including actuators, sensors and control elements.
+
                            <p class="lead">
−
</p>
+
                                Whether you’re building a welcome mat for your SaaS or a clean, corporate portfolio, Stack has your design needs covered.
−
<p class="lead">
+
                            </p>
−
Although is essential to correctly choose the programming language for the different platforms, it is mandatory to keep an eye choosing the communication protocols between all of the device’s platforms.
+
                        </div>
−
</p>
+
                    </div>
−
<img class= "figureimage mt--1" alt="Figure1" src="https://static.igem.org/mediawiki/2018/9/96/T--Madrid-OLM--Device--FinalPrototype--SoftwareProto.png" style="width:90%;"/>
+
−
<p class="lead" style="margin-left:5%; margin-right:5%;">Figure 3: The platform’s programming languages employed and the communication protocols between all of them.</p>
+
−
</br>
+
−
+
−
<p class="lead mt--1"><b>In our circuit there are five platforms liable to be programmed: </b></p>
+
−
 
+
−
<ol class="ourlist">
+
−
<li><p class="lead">The <b>ESP8266</b>, module in charge of all the wifi communications. We have kept the original firmware because we didn’t have time to reprogramme it during this call.</p></li>
+
−
<li><p class="lead">In the <b>Rodeostat</b>, potentiostat responsible of the electrochemical measurements of the sensor, we modify the original firmware so it could be controlled through the Arduino Mega, instead of a computer.</p></li>
+
−
<li><p class="lead">The <b>Arduino Mega</b> controls all the device, handling the motors, receiving the Rodeostat measurements and sending them to the cloud through the WiFi module or the serial communication with the PC.</p></li>
+
−
<li><p class="lead">Outside the device, the data go to <b>Firebase server</b>. The server, on one hand, gets all the data and send them to an <b>iOS design app</b>, where the final user can watch the development of the data in real time.</p></li>
+
−
<li><p class="lead">Finally, a <b>PC program</b>, written in python with Qt creator, is able to communicate through the serial protocol with the device. The application let you configure 8 different motors, run protocols sequentially or inject liquid in the microfluidic chips.</p></li>
+
−
</ol>
+
−
</br>
+
−
<div class="slider box--shadow-wide border--round mt--1">
+
−
<ul class="slides">
+
−
<li>
+
−
<img alt="img" src="https://static.igem.org/mediawiki/2018/9/96/T--Madrid-OLM--Device--FinalPrototype--SoftwareProto.png" />
+
−
</li>
+
−
<li>
+
−
<img alt="img" src="https://static.igem.org/mediawiki/2018/6/62/T--Madrid-OLM--Device--FinalPrototype--CapturProgram.png" />
+
−
</li>
+
−
<li>
+
−
<img alt="img" src="img/software-4.jpg" />
+
−
</li>
+
−
</ul>
+
−
</div>
+
−
<div class="row justify-content-around">
+
−
<div class="col-md-6 col-lg-5 mt--1">
+
−
<span class="h5">Codes</span>
+
−
<p class="lead">You can find the code for the PC app, the Arduino control and the Rodeostat’s modified firmware in <a href="http://github.com/OpenLabMadrid/iGEM-Madrid-OLM">our GitHub.</a> </p>
+
−
</div>
+
−
<div class="col-lg-6 col-md-6 mt--1">
+
−
<span class="h5">Acknowledgements</span>
+
−
<p class="lead">
+
−
Both the iOS app and the firebase server was set up thanks to the help of <b>Marcos Hernández Cifuentes</b>. </p>
+
−
</div>
+
−
</div>
+
−
+
−
</div>
+
 
                     <!--end of row-->
 
                     <!--end of row-->
 
                 </div>
 
                 </div>
 
                 <!--end of container-->
 
                 <!--end of container-->
 
             </section>
 
             </section>
−
 
+
            <section class="text-center">
 +
                <div class="container">
 +
                    <div class="row">
 +
                        <div class="col-md-4">
 +
                            <div class="feature feature-1">
 +
                                <img alt="Image" src="img/landing-16.jpg" />
 +
                                <div class="feature__body boxed boxed--lg boxed--border">
 +
                                    <h4>Built With Blocks</h4>
 +
                                    <p class="lead">
 +
                                        Save time with over 240 carefully styled components designed to showcase your content
 +
                                    </p>
 +
                                    <a href="#">
 +
                                        Learn More
 +
                                    </a>
 +
                                </div>
 +
                            </div>
 +
                            <!--end feature-->
 +
                        </div>
 +
                        <div class="col-md-4">
 +
                            <div class="feature feature-1">
 +
                                <img alt="Image" src="img/landing-17.jpg" />
 +
                                <div class="feature__body boxed boxed--lg boxed--border">
 +
                                    <h4>Modern Aesthetic</h4>
 +
                                    <p class="lead">
 +
                                        Jump start your project with Stack's diverse array of beautiful pre-built templates
 +
                                    </p>
 +
                                    <a href="#">
 +
                                        Learn More
 +
                                    </a>
 +
                                </div>
 +
                            </div>
 +
                            <!--end feature-->
 +
                        </div>
 +
                        <div class="col-md-4">
 +
                            <div class="feature feature-1">
 +
                                <img alt="Image" src="img/landing-18.jpg" />
 +
                                <div class="feature__body boxed boxed--lg boxed--border">
 +
                                    <h4>Beautiful Markup</h4>
 +
                                    <p class="lead">
 +
                                        With fully documented elements pages that help you customize Stack to your needs
 +
                                    </p>
 +
                                    <a href="#">
 +
                                        Learn More
 +
                                    </a>
 +
                                </div>
 +
                            </div>
 +
                            <!--end feature-->
 +
                        </div>
 +
                    </div>
 +
                    <!--end of row-->
 +
                </div>
 +
                <!--end of container-->
 +
            </section>
 +
            <section class="subscribe-form-2 space--xs">
 +
                <div class="container">
 +
                    <div class="row justify-content-around">
 +
                        <div class="col-lg-4">
 +
                            <p class="lead">Subscribe for our monthly newsletter</p>
 +
                        </div>
 +
                        <div class="col-lg-7">
 +
                            <form action="//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=f300c9cce8" data-success="Thanks for signing up.  Please check your inbox for a confirmation email." data-error="Please provide your email address.">
 +
                                <div class="row">
 +
                                    <div class="col-md-6">
 +
                                        <input class="validate-required validate-email" type="email" name="EMAIL" placeholder="Email Address" />
 +
                                    </div>
 +
                                    <div class="col-lg-4 col-md-6">
 +
                                        <button class="btn btn--primary type--uppercase" type="submit">Subscribe</button>
 +
                                    </div>
 +
                                </div>
 +
                                <div style="position: absolute; left: -5000px;" aria-hidden="true">
 +
                                    <input type="text" name="b_77142ece814d3cff52058a51f_f300c9cce8" tabindex="-1" value="">
 +
                                </div>
 +
                            </form>
 +
                        </div>
 +
                    </div>
 +
                    <!--end of row-->
 +
                </div>
 +
                <!--end of container-->
 +
            </section>
 +
            <section class="text-center bg--secondary">
 +
                <div class="container">
 +
                    <div class="row">
 +
                        <div class="col-md-12">
 +
                            <div class="heading-block">
 +
                                <h2>Follow us for updates and more</h2>
 +
                            </div>
 +
                            <div class="instafeed" data-user-name="mediumrarethemes" data-amount="6" data-grid="6"></div>
 +
                            <a class="btn btn--icon bg--instagram type--uppercase" href="#">
 +
                                <span class="btn__text">
 +
                                    <i class="socicon socicon-instagram"></i>
 +
                                    Follow @mrareweb
 +
                                </span>
 +
                            </a>
 +
                        </div>
 +
                    </div>
 +
                    <!--end row-->
 +
                </div>
 +
                <!--end of container-->
 +
            </section>
 +
            <section class="text-center imagebg" data-overlay="3">
 +
                <div class="background-image-holder">
 +
                    <img alt="background" src="img/landing-20.jpg" />
 +
                </div>
 +
                <div class="container">
 +
                    <div class="row justify-content-center">
 +
                        <div class="col-md-8 col-lg-6">
 +
                            <div class="cta">
 +
                                <h2 class="h1">Build yours now.</h2>
 +
                                <p class="lead">
 +
                                    Each purchase of Stack comes with six months free support &mdash; and a lifetime of free content and bug-fix updates.
 +
                                </p>
 +
                                <a class="btn btn--primary type--uppercase" href="#">
 +
                                    <span class="btn__text">
 +
                                        Purchase on Envato
 +
                                    </span>
 +
                                    <span class="label">$18 USD</span>
 +
                                </a>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <!--end of row-->
 +
                </div>
 +
                <!--end of container-->
 +
            </section>
 +
            <footer class="text-center space--sm footer-5 bg--dark  ">
 +
                <div class="container">
 +
                    <div class="row">
 +
                        <div class="col-md-12">
 +
                            <div class="heading-block">
 +
                                <ul class="list-inline list--hover">
 +
                                    <li>
 +
                                        <a href="#">
 +
                                            <span>Our Company</span>
 +
                                        </a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="#">
 +
                                            <span>Locations</span>
 +
                                        </a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="#">
 +
                                            <span>Products</span>
 +
                                        </a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="#">
 +
                                            <span>Work With Us</span>
 +
                                        </a>
 +
                                    </li>
 +
                                </ul>
 +
                            </div>
 +
                            <div>
 +
                                <ul class="social-list list-inline list--hover">
 +
                                    <li>
 +
                                        <a href="#">
 +
                                            <i class="socicon socicon-google icon icon--xs"></i>
 +
                                        </a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="#">
 +
                                            <i class="socicon socicon-twitter icon icon--xs"></i>
 +
                                        </a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="#">
 +
                                            <i class="socicon socicon-facebook icon icon--xs"></i>
 +
                                        </a>
 +
                                    </li>
 +
                                    <li>
 +
                                        <a href="#">
 +
                                            <i class="socicon socicon-instagram icon icon--xs"></i>
 +
                                        </a>
 +
                                    </li>
 +
                                </ul>
 +
                            </div>
 +
                            <div>
 +
                                <span class="type--fine-print">Made in Melbourne</span>
 +
                                <img alt="Image" class="flag" src="img/flag-2.png" />
 +
                            </div>
 +
                            <div>
 +
                                <span class="type--fine-print">&copy;
 +
                                    <span class="update-year"></span> Stack Inc.</span>
 +
                                <a class="type--fine-print" href="#">Privacy Policy</a>
 +
                                <a class="type--fine-print" href="#">Legal</a>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <!--end of row-->
 +
                </div>
 +
                <!--end of container-->
 +
            </footer>
 
         </div>
 
         </div>
 
         <!--<div class="loader"></div>-->
 
         <!--<div class="loader"></div>-->
Line 153: Line 315:
 
             <i class="stack-interface stack-up-open-big"></i>
 
             <i class="stack-interface stack-up-open-big"></i>
 
         </a>
 
         </a>
−
 
 
     </body>
 
     </body>
 
</html>
 
</html>
 
{{Madrid-OLM/footer}}
 
{{Madrid-OLM/footer}}

Revision as of 16:01, 17 October 2018

Madrid-OLM

image

Streamline your workflow with Stack

Clean and contemporary style to suit a range of purposes from corporate, tech startup, marketing site to digital storefront.

Watch Overview   104 Seconds
image

Build flexible, design-driven websites with ease.

Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away — Customizing your site in the included Variant Page Builder makes experimenting with styles and content arrangements dead simple.

Hot! Over 290 interface blocks, 140 demo pages and Variant Page Builder. Purchase Stack for $18 USD.

All the tools you'll need

Whether you’re building a welcome mat for your SaaS or a clean, corporate portfolio, Stack has your design needs covered.

Image

Built With Blocks

Save time with over 240 carefully styled components designed to showcase your content

Learn More
Image

Modern Aesthetic

Jump start your project with Stack's diverse array of beautiful pre-built templates

Learn More
Image

Beautiful Markup

With fully documented elements pages that help you customize Stack to your needs

Learn More

Follow us for updates and more

Follow @mrareweb
background

Build yours now.

Each purchase of Stack comes with six months free support — and a lifetime of free content and bug-fix updates.

Purchase on Envato $18 USD