Show page

Differences

This shows you the differences between two versions of the page.

--- pm:prj2024:mdinica:andrei.anghelescu [2024/05/17 00:47]
andrei.anghelescu
+++ pm:prj2024:mdinica:andrei.anghelescu [2024/05/30 01:30] (current)
andrei.anghelescu
@@ Line 1: / Line 1: @@
 ====== Swarm Adaptive Network ======
 <html>
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.5">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&family=Roboto:wght@100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrQd1LD1OYR7+NqD3B5bBqWh76VzGy8xFUmTfhfK6Ob1EJwFZP+cJYyJlcKtZpA2BjKZff7Dh3DC8QeP+w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
         body {
             font-family: 'Roboto', sans-serif;
-            background-color: #f9f9f9;
+            background-color: #fff;
             color: #333;
             line-height: 1.6;
@@ Line 17: / Line 19: @@
             padding: 0;
         }
+        .github-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: #0366d6;
+    font-size: 1.2em;
+    border: 2px solid #0366d6;
+    padding: 10px 20px;
+    border-radius: 5px;
+    transition: background-color 0.3s, color 0.3s;
+}
+.github-link:hover {
+    background-color: #0366d6;
+    color: white;
+}
+.github-logo {
+    width: 32px;
+    height: 32px;
+    margin-right: 10px;
+}
         h1, h2, h3 {
@@ Line 64: / Line 88: @@
         .content {
-            max-width: 900px;
+            max-width: 1500px;
             margin: 0 auto;
             padding: 2em;
             background: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .section {
+            margin-bottom: 2em;
+        }
+        .section h2 {
+            margin-bottom: 1em;
+        }
+        .section-icon {
+            color: #0056b3;
+            margin-right: 10px;
+        }
+        .section p {
+            font-size: 1.1em;
+            margin-bottom: 1em;
+        }
+        .section p strong {
+            display: block;
+            font-size: 1.2em;
+            margin-bottom: 0.5em;
         }
@@ Line 87: / Line 135: @@
         }
-        img {
+        .custom-img {
             max-width: 100%;
             height: auto;
@@ Line 111: / Line 159: @@
         }
-        @media screen and (max-width: 600px) {
+        .intro {
+            background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet);
+            background-size: 1400% 1400%;
+            color: white;
+            padding: 2em;
+            text-align: center;
+            margin-bottom: 2em;
+            border-radius: 8px;
+            animation: gradientAnimation 10s ease infinite;
+            animation: fadeIn 2s ease-in-out, gradientAnimation 10s ease infinite;
+        }
+        .intro ceva {
+            font-size: 2.5em;
+            margin-bottom: 0.5em;
+            color: #fff;
+        }
+        .intro p {
+            font-size: 1.2em;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @keyframes gradientAnimation {
+% { background-position: 0% 50%; }
+% { background-position: 100% 50%; }
+% { background-position: 0% 50%; }
+        }
+        .ripple {
+            position: relative;
+            overflow: hidden;
+        }
+        .ripple::after {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            background-image: radial-gradient(circle, #000000 10%, transparent 10%);
+            background-repeat: no-repeat;
+            background-position: 50%;
+            transform: scale(10, 10);
+            opacity: 0;
+            transition: transform 0.5s, opacity 1s;
+        }
+        .ripple:active::after {
+            transform: scale(0, 0);
+            opacity: 0.3;
+            transition: 0s;
+        }
+        @media screen and (max-width: 800px) {
             .content {
-                padding: 1em;
+                padding: 2em;
+            }
+            .intro ceva {
+                font-size: 2em;
+            }
+            .intro p {
+                font-size: 1em;
             }
         }
@@ Line 120: / Line 235: @@
 <body>
     <div class="content">
-        <h1 id="swarm-adaptive-network">Swarm Adaptive Network</h1>
+        <div class="intro">
+            <ceva>Swarm Adaptive Network</ceva>
+            <p>Autor: <strong>Andrei Anghelescu</strong></p>
+            <p>Grupa: <strong>332CA</strong></p>
+        </div>
+        <div class="section">
+            <h2><i class="fas fa-info-circle section-icon"></i>Prezentarea proiectului</h2>
+            <p><strong>Ce face sistemul?</strong> Swarm Adaptive Network facilitează crearea unei rețele de plăcuțe care comunică autonom, funcționând fără conexiune WiFi pe întreaga zonă. Sistemul este capabil să suporte și să se recupereze după diverse anomalii.</p>
+            <p><strong>Scopul sistemului?</strong> Dezvoltarea unui ecosistem robust, optimizat pentru consum redus de energie și utilizarea cu microcontrolere.</p>
+            <p><strong>Sursa de inspirație?</strong> Inspirat de interacțiunea flawless între dispozitivele Apple, mi-am propus să creez un sistem similar aplicabil în diverse scenarii.</p>
+            <p><strong>Utilitate?</strong> Demonstrarea utilității sistemului prin dezvoltarea unei aplicații practice: un sistem de urmărire și răcire pentru zone vaste fără acoperire WiFi completă, cum ar fi un câmp de panouri solare.</p>
+        </div>
-        <h2 id="introducere">Introducere</h2>
+        <p><img class="custom-img" src="https://i.imgur.com/RohBySY.png" alt="Schematicul"></p>
-        <p>Autor: <strong>Andrei Anghelescu</strong></p>
-        <p><strong>Ce face sistemul?</strong> Swarm Adaptive Network facilitează crearea unei rețele de plăcuțe care comunică autonom, funcționând fără conexiune WiFi pe întreaga zonă. Sistemul este capabil să suporte și să se recupereze după diverse anomalii.</p>
-        <p><strong>Scopul sistemului?</strong> Dezvoltarea unui ecosistem robust, optimizat pentru consum redus de energie și utilizarea cu microcontrolere.</p>
-        <p><strong>Sursa de inspirație?</strong> Inspirat de interacțiunea flawless între dispozitivele Apple, mi-am propus să creez un sistem similar aplicabil în diverse scenarii.</p>
-        <p><strong>Utilitate?</strong> Demonstrarea utilității sistemului prin dezvoltarea unei aplicații practice: un sistem de urmărire și răcire pentru zone vaste fără acoperire WiFi completă, cum ar fi un câmp de panouri solare.</p>
-        <p><img src="https://i.imgur.com/RohBySY.png" alt="Diagrama proiectului"></p>
         <h2 id="hardware-design">Hardware Design</h2>
-        <p><img src="https://i.imgur.com/HihIpfx.png" alt="Schematicul"></p>
+        <p><img class="custom-img" src="https://i.imgur.com/HihIpfx.png" alt="Schematicul"></p>
         <p>Tabelul cu piesele folosite se poate vedea mai jos.</p>
         <table>
@@ Line 151: / Line 271: @@
                 <tr>
                     <td>Display</td>
-                    <td>OKY4020 </td>
+                    <td>OKY4020</td>
                     <td>I2C</td>
                 </tr>
@@ Line 157: / Line 277: @@
                     <td>LED</td>
                     <td>-</td>
-                    <td>PWN</td>
+                    <td>PWM</td>
                 </tr>
                 <tr>
@@ Line 165: / Line 285: @@
                 </tr>
             </tbody>
         </table>
-        <p><img src="https://i.imgur.com/d3sSLo4.png" alt="Schematicul"></p>
+        <p><img class="custom-img" src="https://i.imgur.com/d3sSLo4.png" alt="Schematicul"></p>
         <h2 id="software-design">Software Design</h2>
-        <div class="note tip">
+        <div class="section">
-            <p>Descrierea codului aplicației (firmware):</p>
+            <p><strong>Motivati alegerea bibliotecilor folosite in cadrul proiectului</strong>
-            <ul>
+				* ESP8266HTTPClient - pentru a putea face request-uri HTTP catre serverul de baza
-                <li>Mediu de dezvoltare (e.g. AVR Studio, CodeVisionAVR)</li>
+				* ESP8266WiFi - pentru a putea conecta placa la un router WiFi
-                <li>Librării și surse 3rd-party (e.g. Procyon AVRlib)</li>
+				* ESP8266WebServer - pentru a putea crea un server, pentru setup-ul initial al placi
-                <li>Algoritmi și structuri implementate</li>
+				* U8g2lib - pentru a putea controla display-ul OLED, mai eficienta decat libraria Adafruit din punct de vedere al gestionarii memoriei
-                <li>(Etapa 3) Surse și funcții implementate</li>
+				* ESP8266mDNS si ArduinOTA - pentru a putea face update-uri Over The Air
-            </ul>
+				* espnow - pentru a putea comunica intre placi fara a avea nevoie de un router WiFi
+				* ArduinoJson - pentru a putea manipula JSON-uri
+			</p>
+            <p><strong>Evidentiati elementul de noutate al proiectului</strong>
+				Comunicarea intre un Network de placi fara a avea nevoie de un router WiFi, folosind ESP-NOW. (Exemplu de utilizare: sistem de monitorizare a unui camp de panouri solare)
+				Esp-now are o distanta de acoperire de 3 ori mai mare ca WIFI-ul.
+				Utilizarea foarte simpla a unui sistem de 100 de dispozitive fara a fi nevoie de configurare manuala a fiecarei placi.
+			</p>
+            <p><strong>Justificati utilizarea functionalitatilor din laborator in cadrul proiectului.</strong>
+				Am folosit notiunile din laborator mai mult ca si o baza, proiectul fiind axact foart mult pe partea de sofware.</p>
+            <p><strong>Explicati scheletul proiectului, interactiunea dintre functionalitati si modul in care a fost validat ca acestea functioneaza conform</strong>
+				Scheletul implementeaza un cod universal care se afla pe fiecare placa, placile pot intra in mai multe moduri pentru a asigurare o extindere si o asigurare a transmiterii informatiei.</p>
+			<p><strong>Explicati cum, de ce si unde ati realizat optimizari</strong>
+				Am realizat optimizari in ceea ce priveste consumul de energie, am folosit ESP-NOW pentru a comunica intre placi, fara a avea nevoie de un router WiFi, astfel consumul de energie este mult mai mic.
+				Am incercat ca nodurile finale sa intre in sleep mode cat mai des posibil, pentru a economisi cat mai multa energie.
+			</p>
         </div>
+        <a href="https://github.com/GemDeKaise/Swarm-Adaptive-Network" class="github-link">
+        <img src="https://imgur.com/D87ugoP.png" alt="GitHub Logo" class="github-logo">
+        GitHub cu codul sursa
+        </a>
+        <p><img class="custom-img" src="https://i.imgur.com/WsTXQMV.png" alt="Schematicul"></p>
+        <p><img class="custom-img" src="https://i.imgur.com/8mVh6K6.png" alt="Schematicul"></p>
+        <a href="https://youtu.be/Hn-F_uv3Nug" class="github-link">
+        <img src="https://imgur.com/QGi9FAo.png" alt="GitHubasLogo" class="github-logo">
+        DEMO!
+        </a>
         <h2 id="rezultate-obtinute">Rezultate Obținute</h2>
@@ Line 206: / Line 355: @@
         <p><a class="media mediafile mf_pdf" href="?do=export_pdf">Export to PDF</a></p>
+        <div class="ripple" style="width: 200px; height: 200px; background: #ff6347; margin: 20px auto; border-radius: 50%;"></div>
     </div>
+    <iframe src="https://giphy.com/embed/Ssr2HaSSqw8ggmLHUO" width="480" height="347" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
+    <p><a href="https://giphy.com/gifs/robotistan-project-electronic-arduino-Ssr2HaSSqw8ggmLHUO">via GIPHY</a></p>
 </body>
 </html>