[projet_perso-PIC] Add PIC page

Update css to have stong link
Add images
main
Mickaël Tansorier 8 years ago
parent c368dffd4d
commit a37428598f

@ -1623,7 +1623,7 @@
font-style: italic; font-style: italic;
} }
a { a, a > strong {
color: #ef7073; color: #ef7073;
border-bottom: solid 1px rgba(128, 128, 128, 0.15); border-bottom: solid 1px rgba(128, 128, 128, 0.15);
text-decoration: none; text-decoration: none;
@ -1633,7 +1633,7 @@
transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
} }
a:hover { a:hover, a:hover > strong {
color: #60636B; color: #60636B;
border-bottom-color: transparent; border-bottom-color: transparent;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

@ -57,11 +57,11 @@
<a href="projet_perso.html">Projet Perso.</a> <a href="projet_perso.html">Projet Perso.</a>
<ul> <ul>
<li> <li>
<a href="#">Projets PIC ...</a> <a href="projet_perso-PIC.html">Projets PIC ...</a>
<ul> <ul>
<li><a href="#">Table dillusion infinie PIC16F87</a></li> <li><a href="projet_perso-PIC.html#table_infini">Table dillusion infinie PIC16F87</a></li>
<li><a href="#">Télécommande infrarouge PIC16F87</a></li> <li><a href="projet_perso-PIC.html#telecommande_IR">Télécommande infrarouge PIC16F87</a></li>
<li><a href="#">Feu tricolore de présence PIC16F87</a></li> <li><a href="projet_perso-PIC.html#feu_tricolore">Feu tricolore de présence PIC16F87</a></li>
</ul> </ul>
</li> </li>
<li> <li>
@ -138,25 +138,25 @@
</article> </article>
<article> <article>
<a href="#" class="image featured"><img src="images/PIC_Table_infinie.jpg" alt="" /></a> <a href="projet_perso-PIC.html#table_infini" class="image featured"><img src="images/PIC_Table_infinie.jpg" alt="Table dillusion infinie" /></a>
<header> <header>
<h3><a href="#">Table dillusion infinie</a></h3> <h3><a href="projet_perso-PIC.html#table_infini">Table dillusion infinie</a></h3>
</header> </header>
<p>Microcontrolleur PIC16F87 — C — PCB — Électronique</p> <p>Microcontrolleur PIC16F87 — C — PCB — Électronique</p>
</article> </article>
<article> <article>
<a href="#" class="image featured"><img src="images/PIC_IR.jpg" alt="" /></a> <a href="projet_perso-PIC.html#telecommande_IR" class="image featured"><img src="images/PIC_IR.jpg" alt="Télécommande infrarouge" /></a>
<header> <header>
<h3><a href="#">Télécommande infrarouge</a></h3> <h3><a href="projet_perso-PIC.html#telecommande_IR">Télécommande infrarouge</a></h3>
</header> </header>
<p>Microcontrolleur PIC16F87 — C — PCB — Électronique</p> <p>Microcontrolleur PIC16F87 — C — PCB — Électronique</p>
</article> </article>
<article> <article>
<a href="#" class="image featured"><img src="images/PIC_Feu.jpg" alt="" /></a> <a href="projet_perso-PIC.html#feu_tricolore" class="image featured"><img src="images/PIC_Feu.jpg" alt="Feu tricolore de présence" /></a>
<header> <header>
<h3><a href="#">Feu tricolore de présence</a></h3> <h3><a href="projet_perso-PIC.html#feu_tricolore">Feu tricolore de présence</a></h3>
</header> </header>
<p>Microcontrolleur PIC16F87 — C — PCB — Électronique</p> <p>Microcontrolleur PIC16F87 — C — PCB — Électronique</p>
</article> </article>

@ -0,0 +1,296 @@
<!DOCTYPE HTML>
<!--
Helios by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Projets PIC</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<link rel="icon" type="image/png" href="images/favicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
</head>
<body class="left-sidebar">
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner">
<header>
<h1>Projets PIC</h1>
</header>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">Accueil</a></li>
<li>
<a href="projet_pro.html">Projet Pro.</a>
<ul>
<li><a href="projet_pro-xen.html">Virtualisation XEN</a></li>
<li><a href="projet_pro-fpga.html">Traitement dimages sur FPGA</a></li>
<li>
<a href="#">OpenWide/Smile ...</a>
<ul>
<li><a href="#">IRT-systemX: Xvisor</a></li>
<li><a href="#">Quantaflow: Quantium v2</a></li>
<li><a href="#">Hutchinson: AVAC</a></li>
<li><a href="#">Canal+: Intégrateur Yocto</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="projet_perso.html">Projet Perso.</a>
<ul>
<li>
<a href="projet_perso-PIC.html">Projets PIC ...</a>
<ul>
<li><a href="projet_perso-PIC.html#table_infini">Table dillusion infinie PIC16F87</a></li>
<li><a href="projet_perso-PIC.html#telecommande_IR">Télécommande infrarouge PIC16F87</a></li>
<li><a href="projet_perso-PIC.html#feu_tricolore">Feu tricolore de présence PIC16F87</a></li>
</ul>
</li>
<li>
<a href="projet_perso-sites_web.html">Sites Web ...</a>
<ul>
<li><a href="projet_perso-sites_web.html#AJC72">Antonnière Judo Club 72</a></li>
<li><a href="projet_perso-sites_web.html#SMMP">Service Moules et Mécanique de Précision</a></li>
<li><a href="projet_perso-sites_web.html#TANSORIER">Site presonnel</a></li>
<li><a href="projet_perso-sites_web.html#CDJS">Forum pour le Comité Départemental de Judo de la Sarthe</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Judo</a></li>
<li><a href="#">Associations</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<!-- Main -->
<div class="wrapper style1">
<div class="container">
<div class="row 200%">
<!-- left part -->
<div class="3u 12u(mobile)" id="sidebar">
<hr class="first" />
<section>
<header>
<h3>Projets PIC</h3>
</header>
<ul class="leftmenu">
<li><a href="projet_perso-PIC.html#table_infini">Table dillusion infinie PIC16F87</a></li>
<li><a href="projet_perso-PIC.html#telecommande_IR">Télécommande infrarouge PIC16F87</a></li>
<li><a href="projet_perso-PIC.html#feu_tricolore">Feu tricolore de présence PIC16F87</a></li>
</ul>
</section>
<hr />
</div>
<!-- right part -->
<div class="7u 12u(mobile) important(mobile)" id="content">
<article id="main">
<header>
<h3>Jai réalisé plusieurs projets à base de microcontrôleur PIC de chez Microchip:</h3>
<p>
<ul class="default">
<li>Table dillusion infinie</li>
<li>Télécommande infrarouge</li>
<li>Feu tricolore de présence</li>
</ul>
</p>
<p>
Ces projets sont décrits ci-dessous.
</p>
</header>
<section id="table_infini">
<header>
<h3><u>Table dillusion infinie PIC16F87</u></h3>
</header>
<p>
Ce projet a pour objectif de créer une illusion doptique par un effet de jeu de réflexion lumineuse.<br />
Cest cette vidéo qui ma inspiré ce projet: <a href="https://www.youtube.com/watch?v=urLXxOH-Tqg">https://www.youtube.com/watch?v=urLXxOH-Tqg</a><br />
Jai repris le même principe que dans la vidéo ci-dessus, plutôt que dutiliser un ruban de LED déjà fait, jai préféré concevoir moi-même un ensemble de LED (RGB) contrôlé par microcontrôleur PIC afin de créer mes propres modulations de couleur.
</p>
<div class="image centered" style="width: 631px; ">
<img src="images/projet_perso-PIC/table_infini_01.jpg" alt="Effet trou infini" style="width: 412px; float: left; padding-right: 4px;" />
<img src="images/projet_perso-PIC/table_infini_02.jpg" alt="Effet trou infini" style="width: 211px; float: left; padding-bottom: 4px;" />
<img src="images/projet_perso-PIC/table_infini_03.jpg" alt="Effet trou infini" style="width: 211px;" />
</div>
<h4>Partie non électronique:</h4>
<p>
Le principe lumineux qui créer cette sensation de trou infini vient de lassociation dun miroir et dun miroir sans tain. Le miroir reflète la totalité de la lumière reçue, alors que le miroir sans tain reflète environ 70% de la lumière émise, le reste (les 30%) passe au travers.
</p>
<div class="image centered" style="width: 623px">
<img src="images/projet_perso-PIC/table_infini_04.png" alt="Représentation de l'effet de réflexion lumineuse" />
</div>
<p>
Ainsi une partie de la lumière qui est reflétée plusieurs fois entre les deux miroirs (en rouge) ressort à un moment donné (en vert) pour venir jusquà nos yeux.<br />
Pour ce qui est de la construction, il faut une table, un miroir, une vitre avec un filtre sans tain, et un ensemble de baguettes servant à y mettre les différentes LED.
</p>
<div class="image centered" style="width: 217px">
<img src="images/projet_perso-PIC/table_infini_05.jpg" alt="Représentation de l'effet de réflexion lumineuse" />
</div>
<h4>Partie électronique:</h4>
<p>
Pour la gestion lumineuse, jai utilisé un microcontrôleur PIC16F87.<br />
Lobjectif de ce microcontrôleur est de fournir un signal modulé (PWM) afin de pouvoir faire varier la couleur émise par les différentes LEDs.<br />
Le microcontrôleur permet aussi de créer différents modes, un peu comme les différents modes dune guirlande de noël.<br />
Lensemble des 20 LEDs ont été branchées sur un PCB.
</p>
<div class="image centered" style="width: 623px; ">
<img src="images/projet_perso-PIC/table_infini_06.jpg" alt="Effet trou infini" style="width: 274 px; float: left; padding-right: 4px;" />
<img src="images/projet_perso-PIC/table_infini_07.jpg" alt="Effet trou infini" style="width: 337px;" />
</div>
<p>
<a href="https://github.com/mtansorier/infini-table.git" class="icon fa-github" title="GitHub"><span class="label">GitHub</span> Sources disponible sur GitHub</a>
</p>
</section>
<section id="telecommande_IR">
<header>
<h3><u>Télécommande infrarouge PIC16F87</u></h3>
</header>
<p>
Ce projet a pour but de créer une télécommande infrarouge permettant de contrôler à distance des relais afin de gérer lalimentation de prises secteurs.
</p>
<div class="image centered" style="width: 296px">
<img src="images/projet_perso-PIC/infra_rouge_01.jpg" alt="Boitiers secteurs et télécommande" />
</div>
<p>
La télécommande infrarouge génère un code transmis par infrarouge au récepteur relié au module de prise secteur.<br />
Il y a deux boutons avec deux codes différents contrôlant deux prises secteurs différentes.<br />
Sur limage ci-dessus on peut voir le témoin lumineux en vert indiquant que la prise secteur de gauche est alimentée.
</p>
<div class="image centered" style="width: 275px">
<img src="images/projet_perso-PIC/infra_rouge_02.jpg" alt="Télécommande" />
</div>
<p>
Le protocole de communication est basé sur le protocole RS-232. Il a donc 1 bit de start, 8 bits de données et un bit de stop.
</p>
<p>
<a href="https://github.com/mtansorier/IR-Transmitor.git" class="icon fa-github" title="GitHub"><span class="label">GitHub</span> Sources du <strong>transmiteur</strong> disponible sur GitHub</a><br />
<a href="https://github.com/mtansorier/IR-Receptor.git" class="icon fa-github" title="GitHub"><span class="label">GitHub</span> Sources du <strong>recepteur</strong> disponible sur GitHub</a>
</p>
</section>
<section id="feu_tricolore">
<header>
<h3><u>Feu tricolore de présence PIC16F87</u></h3>
</header>
<p>
Cest un projet de feux tricolore permettant de gérer la présence ou non dune personne dans des toilettes à laide de trois boutons poussoirs.
</p>
<div class="image centered" style="width: 623px; ">
<img src="images/projet_perso-PIC/feu_tricolore_01.jpg" alt="microcontrôleur" style="width: 472px; float: left; padding-right: 4px;" />
<img src="images/projet_perso-PIC/feu_tricolore_02.jpg" alt="Boitiers feux" style="width: 139px;" />
</div>
<p>
Le premier bouton indique que les toilettes sont occupées (passe au rouge), le deuxième indique quelles sont libres (passe au orange puis au vert), et le dernier indique quil faut mieux attendre un moment avant daller aux toilettes (passe au orange pendant 1minute puis au vert).
</p>
<div class="image centered" style="width: 623px; ">
<img src="images/projet_perso-PIC/feu_tricolore_03.jpg" alt="feu vert" style="width: 205px; float: left; padding-right: 4px;" />
<img src="images/projet_perso-PIC/feu_tricolore_04.jpg" alt="feu orange" style="width: 205px; float: left; padding-right: 4px;" />
<img src="images/projet_perso-PIC/feu_tricolore_05.jpg" alt="feu rouge" style="width: 201px;" />
</div>
<p>
<a href="https://github.com/mtansorier/wc-traffic-lights.git" class="icon fa-github" title="GitHub"><span class="label">GitHub</span> Sources disponible sur GitHub</a>
</p>
</section>
</article>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="12u">
<!-- Contact -->
<section class="contact">
<header>
<h3>Vous pouvez me retrouver sur:</h3>
</header>
<ul class="icons">
<li><a href="https://www.linkedin.com/in/micka%C3%ABl-tansorier-78b5549a/" class="icon fa-linkedin" title="LinkedIn"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/mtansorier" class="icon fa-github" title="GitHub"><span class="label">GitHub</span></a></li>
<li><a href="https://mickaeltansorier.wordpress.com/" class="icon fa-wordpress" title="Wordpress"><span class="label">Wordpress</span></a></li>
<li><a href="mailto:mickael@tansorier.fr" class="icon fa-envelope-o" title="E-mail"><span class="label">E-mail</span></a></li>
<li><a href="docs/Curriculum_Vitae_-_TANSORIER.pdf" class="icon fa-download" title="Curriculum Vitae"><span class="label">Curriculum Vitae</span></a></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li><img src="images/by.svg" /></li><li>Mickaël TANSORIER</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.onvisible.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>

@ -54,9 +54,9 @@
<li> <li>
<a href="projet_perso-PIC.html">Projets PIC ...</a> <a href="projet_perso-PIC.html">Projets PIC ...</a>
<ul> <ul>
<li><a href="#">Table dillusion infinie PIC16F87</a></li> <li><a href="projet_perso-PIC.html#table_infini">Table dillusion infinie PIC16F87</a></li>
<li><a href="#">Télécommande infrarouge PIC16F87</a></li> <li><a href="projet_perso-PIC.html#telecommande_IR">Télécommande infrarouge PIC16F87</a></li>
<li><a href="#">Feu tricolore de présence PIC16F87</a></li> <li><a href="projet_perso-PIC.html#feu_tricolore">Feu tricolore de présence PIC16F87</a></li>
</ul> </ul>
</li> </li>
<li> <li>

@ -52,11 +52,11 @@
<a href="projet_perso.html">Projet Perso.</a> <a href="projet_perso.html">Projet Perso.</a>
<ul> <ul>
<li> <li>
<a href="#">Projets PIC ...</a> <a href="projet_perso-PIC.html">Projets PIC ...</a>
<ul> <ul>
<li><a href="#">Table dillusion infinie PIC16F87</a></li> <li><a href="projet_perso-PIC.html#table_infini">Table dillusion infinie PIC16F87</a></li>
<li><a href="#">Télécommande infrarouge PIC16F87</a></li> <li><a href="projet_perso-PIC.html#telecommande_IR">Télécommande infrarouge PIC16F87</a></li>
<li><a href="#">Feu tricolore de présence PIC16F87</a></li> <li><a href="projet_perso-PIC.html#feu_tricolore">Feu tricolore de présence PIC16F87</a></li>
</ul> </ul>
</li> </li>
<li> <li>
@ -89,7 +89,7 @@
<section> <section>
<header> <header>
<h3 class="projet-titre"><a href="#">Projet microcontrolleur PIC</a></h3> <h3 class="projet-titre"><a href="projet_perso-PIC.html">Projet microcontrolleur PIC</a></h3>
<h3 class="projet-date">2015</h3> <h3 class="projet-date">2015</h3>
</header> </header>
<p> <p>

@ -52,11 +52,11 @@
<a href="projet_perso.html">Projet Perso.</a> <a href="projet_perso.html">Projet Perso.</a>
<ul> <ul>
<li> <li>
<a href="#">Projets PIC ...</a> <a href="projet_perso-PIC.html">Projets PIC ...</a>
<ul> <ul>
<li><a href="#">Table dillusion infinie PIC16F87</a></li> <li><a href="projet_perso-PIC.html#table_infini">Table dillusion infinie PIC16F87</a></li>
<li><a href="#">Télécommande infrarouge PIC16F87</a></li> <li><a href="projet_perso-PIC.html#telecommande_IR">Télécommande infrarouge PIC16F87</a></li>
<li><a href="#">Feu tricolore de présence PIC16F87</a></li> <li><a href="projet_perso-PIC.html#feu_tricolore">Feu tricolore de présence PIC16F87</a></li>
</ul> </ul>
</li> </li>
<li> <li>

@ -52,11 +52,11 @@
<a href="projet_perso.html">Projet Perso.</a> <a href="projet_perso.html">Projet Perso.</a>
<ul> <ul>
<li> <li>
<a href="#">Projets PIC ...</a> <a href="projet_perso-PIC.html">Projets PIC ...</a>
<ul> <ul>
<li><a href="#">Table dillusion infinie PIC16F87</a></li> <li><a href="projet_perso-PIC.html#table_infini">Table dillusion infinie PIC16F87</a></li>
<li><a href="#">Télécommande infrarouge PIC16F87</a></li> <li><a href="projet_perso-PIC.html#telecommande_IR">Télécommande infrarouge PIC16F87</a></li>
<li><a href="#">Feu tricolore de présence PIC16F87</a></li> <li><a href="projet_perso-PIC.html#feu_tricolore">Feu tricolore de présence PIC16F87</a></li>
</ul> </ul>
</li> </li>
<li> <li>

@ -52,11 +52,11 @@
<a href="projet_perso.html">Projet Perso.</a> <a href="projet_perso.html">Projet Perso.</a>
<ul> <ul>
<li> <li>
<a href="#">Projets PIC ...</a> <a href="projet_perso-PIC.html">Projets PIC ...</a>
<ul> <ul>
<li><a href="#">Table dillusion infinie PIC16F87</a></li> <li><a href="projet_perso-PIC.html#table_infini">Table dillusion infinie PIC16F87</a></li>
<li><a href="#">Télécommande infrarouge PIC16F87</a></li> <li><a href="projet_perso-PIC.html#telecommande_IR">Télécommande infrarouge PIC16F87</a></li>
<li><a href="#">Feu tricolore de présence PIC16F87</a></li> <li><a href="projet_perso-PIC.html#feu_tricolore">Feu tricolore de présence PIC16F87</a></li>
</ul> </ul>
</li> </li>
<li> <li>

Loading…
Cancel
Save