diff --git a/experiment/simulation/Simulation 1/ledsim.html b/experiment/simulation/Simulation 1/ledsim.html new file mode 100644 index 0000000..a34ff30 --- /dev/null +++ b/experiment/simulation/Simulation 1/ledsim.html @@ -0,0 +1,140 @@ + + + + + + Virtual IoT Lab DEI + + + + + + + + +
+
+
+

IOT Virtual Lab

+
+
+
+ + + +
+
+

Simulation of establishing master slave model using Arduino and I2C Protocols :

+
+ interfacing + + +
+
+ + + +
+
+
+

ARDUINO CODE

+
+ + +
+ + + +
+ + + +
+

+ Start Simulation +

+ +
+ +
+ +
+ + + + diff --git a/experiment/simulation/Simulation 1/src/css/style.css b/experiment/simulation/Simulation 1/src/css/style.css new file mode 100644 index 0000000..f11ee95 --- /dev/null +++ b/experiment/simulation/Simulation 1/src/css/style.css @@ -0,0 +1,417 @@ +.text-container{ + border: 2px solid rgb(146, 146, 146); + width: 520px; + height: 480px; + position: relative; + top: 2px; + border-radius: 8px; + +} +#Code-slave{ + display: none; + padding: 20px; + width: 27vw; + height: 55vh; + resize: none; + position: relative; + top: -450px; + right: 0px; + +} +textarea{ + border-radius: 8px; + outline: none; + border: none; + color: green; +} + +#arduinoCode{ + padding: 20px; + width: 27vw; + height: 55vh; + resize: none; +} + +h1{ + background-color: beige; + margin: none; +} +a{ + cursor: pointer; +} + +header{ + height: 10vh; + border-bottom:4px solid cadetblue ; +} + +header h2{ + color: cadetblue; + display: inline-block; +} + +body{ + height: 100vh; + width: 100vw; + margin: 0; + + overflow: hidden; +} + +.p-head { + + font-family: Arial, Helvetica, sans-serif; + font-weight: 700; + letter-spacing: 1px; +} + +#pagechanger { + border: none; + color: cadetblue; + font-size: 20px; + outline: none; + position: relative; + top: 2.5vh; +} + +#pagechanger:hover{ + cursor: pointer; +} + +.exp-changer { + display: flex; + justify-content: center; +} + +.exp-changer-heading { + display: flex; + justify-content: center; + align-items: center; + color: grey; + font-family: Arial, Helvetica, sans-serif; + font-size: 20px; + outline: none; + position: relative; + top: 2.5vh; +} + +.navbar { + display: flex; + justify-content: space-between; +} + +.navbar1{ + width: 8vw; + height: 35px; + color: #ffffff; + background-color: rgba(4, 59, 79, 0.5); + font-size: 1.5vw; + border-radius: 0 0 20px 0; + font-family: "Raleway",sans-serif; + } + + .navbar1 a{ + margin-left: 10px; + color: #fff; + text-decoration: none; + } + + .navbar1 a:hover{ + text-decoration: none; + } + + +.navbar2{ + width: 8vw; + height: 35px; + color: #ffffff; + background-color: rgba(4, 59, 79, 0.5); + font-size: 1.5vw; + border-radius: 0 0 0 20px; + font-family: "Raleway",sans-serif; +} + +.navbar2 a{ + margin-left: 10px; + color: #fff; + text-decoration: none; +} + +.navbar2 a:hover{ + text-decoration: none; +} + + +/* SIMULATION TIMER DISPLAY START */ + +.timerDisplay { + position: relative; + width: 15%; + height: 35px; + display: flex; + justify-content: center; + color: #ffffff; + background-color: rgba(4, 59, 79, 0.5); + font-size: 1.4rem; + border-radius: 0 0 20px 20px; + font-family: "Roboto mono", monospace; + } + +.timerbuttons { + width: 90%; + margin: 60px auto 0 auto; + display: flex; + justify-content: space-around; +} +.timerbuttons button { + width: 120px; + height: 45px; + background-color: #205e94; + color: #ffffff; + border: none; + font-size: 18px; + border-radius: 5px; + cursor: pointer; + outline: none; +} + +/* TIMER DISPLAY END */ + + +.container { + height: 82vh; + width: 100%; + margin-top: 10px; + display: flex; + justify-content: space-evenly; + align-items: center; + background-color: #F4F5F7; +} +.nofled { + height: 80vh; + width: 100vw; + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +.nofledHead { + width: 100%; + height: 20vh; + margin-top: 3.5rem; + display: flex; + justify-content: center; + align-items: center; +} +.nofledBoxContainer { + width: 100%; + height: 10vh; + display: flex; + justify-content: center; + align-items: center; +} +.leds { + background-color: rgb(46, 64, 92, 0.9); + color: white; + width: 6.5rem; + text-decoration: none; + margin: 0 10px 0 10px; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + transform: scale(1); + transition: all ease-out 0.4s; +} +.leds:hover { + cursor: pointer; + background-color: rgb(46, 64, 92, 1); + transform: scale(1.1); + transition: all ease-out 0.4s; +} + +.separator { + border-radius: 20px; + height: 73vh; + + width: 8px; + background-color: rgba(4, 59, 79, 0.5); + transition: all 0.4s ease-in; + transform: scale(1.1); +} + + +.if-vid { + width: 100%; + height: 82vh; + padding: 3px; + /* background-color: rgba(4, 59, 79, 0.1); */ + /* border: 3px solid rgba(4, 59, 79, 0.3); */ + border-radius: 10px; + /* overflow: scroll;*/ + +} + +.interfacing { + margin-left: 400px; + width: 100; + /* max-width: 700px; */ + height: 100%; + max-height: 700px; + + /* border: 3px solid rgba(4, 59, 79, 0.3); */ + border-radius: 10px; + position: relative; +} + +.interfacing img { + transition: all 0.4s ease; + width: 1150px; + margin-left: -400px; + height: auto; +} +#pushbutton { + background-color: rgba(232, 11, 96, 0); + position: absolute; + z-index: 5; + width: 23px; + border: 5px; + height: 23px; + margin-left: -747px; + margin-top: 409px; + + cursor: pointer; +} + +#pushbutton2 { + background-color: rgba(239, 239, 18, 0); + position: absolute; + z-index: 5; + width: 25px; + border: none; + height: 30px; + margin-left: 362px; + margin-top: -426px; + cursor: pointer; +} + +#buzzerpushbutton { + background-color: rgba(255, 0, 0, 0); + position: absolute; + z-index: 5; + width: 25px; + border: none; + height: 25px; + margin-left: 389px; + margin-top: -158px; + cursor: pointer; +} + +.code { + width: 90vw; + height: 80vh; + padding: 3px; + /* border: 3px solid rgba(4, 59, 79, 0.3); */ + border-radius: 10px; + /* background-color: rgba(4, 59, 79, 0.1); */ +} + +.startStop h2{ + position: fixed; + bottom: 9px; + height:26px; + margin: 5px 42px; + right: 110px; + background-color: #009C4E; + color: #fff; + /* text-transform: uppercase; */ + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + padding: 5px 30px; + border-radius: 6px; + cursor: pointer; +} + + + +.code-head { + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + margin-bottom: 14px; +} + +#codeInput { + width: 700px; + height: 60vh; + + border-radius: 10px; + border: 1px solid rgba(4, 59, 79, 0.2); +} + + + + +@media screen and (max-width: 1000px) { + .navbar1 { + width: 14vw; + height: 27px; + font-size: 1.1rem; + } + + .navbar2 { + width: 17vw; + height: 27px; + font-size: 1.1rem; + } + .navbar-heading { + width: 0; + height: 0; + } +} + +/* Dropdown Button */ +.dropbtn { + background-color: #04AA6D; + color: white; + padding: 7px; + font-size: 16px; + border: none; + border-radius: 5px; + +} + +/* The container
- needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 100px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover {background-color: #ddd;} + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content {display: block;} + +/* Change the background color of the dropdown button when the dropdown content is shown */ +.dropdown:hover .dropbtn {background-color: #3e8e41;} diff --git a/experiment/simulation/Simulation 1/src/images/led/led_dis.png b/experiment/simulation/Simulation 1/src/images/led/led_dis.png new file mode 100644 index 0000000..030278a Binary files /dev/null and b/experiment/simulation/Simulation 1/src/images/led/led_dis.png differ diff --git a/experiment/simulation/Simulation 1/src/images/led/led_off.png b/experiment/simulation/Simulation 1/src/images/led/led_off.png new file mode 100644 index 0000000..cd7eb18 Binary files /dev/null and b/experiment/simulation/Simulation 1/src/images/led/led_off.png differ diff --git a/experiment/simulation/Simulation 1/src/images/led/led_on.png b/experiment/simulation/Simulation 1/src/images/led/led_on.png new file mode 100644 index 0000000..e06676c Binary files /dev/null and b/experiment/simulation/Simulation 1/src/images/led/led_on.png differ diff --git a/experiment/simulation/Simulation 1/src/images/led/ms_dis.png b/experiment/simulation/Simulation 1/src/images/led/ms_dis.png new file mode 100644 index 0000000..e7e23c9 Binary files /dev/null and b/experiment/simulation/Simulation 1/src/images/led/ms_dis.png differ diff --git a/experiment/simulation/Simulation 1/src/images/led/ms_dis1.png b/experiment/simulation/Simulation 1/src/images/led/ms_dis1.png new file mode 100644 index 0000000..952dceb Binary files /dev/null and b/experiment/simulation/Simulation 1/src/images/led/ms_dis1.png differ diff --git a/experiment/simulation/Simulation 1/src/images/led/ms_off.png b/experiment/simulation/Simulation 1/src/images/led/ms_off.png new file mode 100644 index 0000000..f3f9f8b Binary files /dev/null and b/experiment/simulation/Simulation 1/src/images/led/ms_off.png differ diff --git a/experiment/simulation/Simulation 1/src/js/main.js b/experiment/simulation/Simulation 1/src/js/main.js new file mode 100644 index 0000000..9c8ff80 --- /dev/null +++ b/experiment/simulation/Simulation 1/src/js/main.js @@ -0,0 +1,55 @@ + +let image_tracker = "dis"; + + +function changePower() { + let image = document.getElementById("ifimg"); + if (image_tracker == "dis") { + image.src = "./src/images/led/led_off.png"; + document.getElementById("pushbuttonPower").innerHTML = "Stop Simulation"; + document.getElementById("pushbuttonPower").style.backgroundColor = "red"; + image_tracker = "off"; + } else if (image_tracker == "off") { + image.src = "./src/images/led/led_dis.png"; + document.getElementById("pushbuttonPower").innerHTML = "Start Simulation"; + document.getElementById("pushbuttonPower").style.backgroundColor ="#009C4E"; + image_tracker = "dis"; + } +} + +function changeImage() { + let image = document.getElementById("ifimg"); + if (image_tracker == "off") { + image.src = "./src/images/led/led_on.png"; + image_tracker = "red"; + } else if (image_tracker == "red" || image_tracker == "green") { + image.src = "./src/images/led/led_off.png"; + image_tracker = "off"; + } +} + +//function changeLedColor() { + // let image = document.getElementById("ifimg"); + //if (image_tracker == "red") { + //image.src = "./src/images/led/led_green.png"; + //image_tracker = "green"; + //} else if (image_tracker == "green") { + //image.src = "./src/images/led/led_on.png"; + // image_tracker = "red"; + //} +//} + +// if (image_tracker == "dis") { +// document.getElementById("pushbuttonPower").addEventListener("click", () => { +// if (int !== null) { +// clearInterval(int); +// } +// int = setInterval(displayTimer, 10); +// }); +// } + +// document.getElementById("pushbuttonPower").addEventListener("click", () => { +// clearInterval(int); +// [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0]; +// document.getElementById("simTimer").innerHTML = "00 : 00 : 00 : 000 "; +// }); diff --git a/experiment/simulation/css/README.md b/experiment/simulation/css/README.md deleted file mode 100644 index 14b4fe3..0000000 --- a/experiment/simulation/css/README.md +++ /dev/null @@ -1 +0,0 @@ -### This folder contains all the css files used in the simulation. \ No newline at end of file diff --git a/experiment/simulation/css/main.css b/experiment/simulation/css/main.css deleted file mode 100644 index 20bf42b..0000000 --- a/experiment/simulation/css/main.css +++ /dev/null @@ -1 +0,0 @@ -/* You CSS goes in here */ \ No newline at end of file diff --git a/experiment/simulation/feedback.html b/experiment/simulation/feedback.html new file mode 100644 index 0000000..5349206 --- /dev/null +++ b/experiment/simulation/feedback.html @@ -0,0 +1,119 @@ + + + + + + + Virtual IoT Lab DEI + + + + + +
+ +
+
+

IoT Virtual Laboratory

+
+
+

+ Dear User,

+ Thanks for using Virtual Labs. Your opinion is valuable to us. To + help us improve, we'd like to ask you a few questions about your + experience. It will only take 3 minutes and your answers will help + us make Virtual Labs better for you and other users. +
+
+
+ Share Your Experience +
+
+
+ Thanks for your time !
+ The Virtual Labs Team +

+
+
+
+ + + + diff --git a/experiment/simulation/images/README.md b/experiment/simulation/images/README.md deleted file mode 100644 index 9b47fb5..0000000 --- a/experiment/simulation/images/README.md +++ /dev/null @@ -1,2 +0,0 @@ -### This folder contains all the image files used in the simulation. -### Create sub-directories, if needed. ex: gifs/ \ No newline at end of file diff --git a/experiment/simulation/index.html b/experiment/simulation/index.html index ee9be23..9e80cc6 100644 --- a/experiment/simulation/index.html +++ b/experiment/simulation/index.html @@ -1,13 +1,103 @@ - - - - - - + + + + + + Virtual IoT Lab DEI + + + + + + +
+ +
+
+

Aim

+
+
+

+ Simulation of establishing master slave model using Arduino and I2C Protocols. +

+
+
+
+ + + diff --git a/experiment/simulation/js/README.md b/experiment/simulation/js/README.md deleted file mode 100644 index b6e0cff..0000000 --- a/experiment/simulation/js/README.md +++ /dev/null @@ -1 +0,0 @@ -### This folder contains all the js files used in the simulation. \ No newline at end of file diff --git a/experiment/simulation/js/main.js b/experiment/simulation/js/main.js deleted file mode 100644 index 4dbe1cf..0000000 --- a/experiment/simulation/js/main.js +++ /dev/null @@ -1 +0,0 @@ -//Your JavaScript goes in here diff --git a/experiment/simulation/objective.html b/experiment/simulation/objective.html new file mode 100644 index 0000000..5391c6a --- /dev/null +++ b/experiment/simulation/objective.html @@ -0,0 +1,105 @@ + + + + + + + Virtual IoT Lab DEI + + + + + +
+ +
+
+

Objective

+
+
+

+ To interface: +

    +
  1. Establish I2C Communication
  2. +
  3. Connect two Arduinos in Master-Slave model
  4. + +
+ +

+
+
+
+ + + + \ No newline at end of file diff --git a/experiment/simulation/posttest.html b/experiment/simulation/posttest.html new file mode 100644 index 0000000..e29defc --- /dev/null +++ b/experiment/simulation/posttest.html @@ -0,0 +1,165 @@ + + + + + + + Virtual IoT Lab DEI + + + + + +
+ +
+
+

Posttest

+
+
+

+ What will be the zeroes,poles and gain of : $${ \frac{5s + + 4}{3s^2 + 1s - 2} }$$ +

+ + +
+ + +
+ + +
+ + +

+ What will be the transfer function with: + Zeroes = 1 + 2i, 1 - 2i; Poles = 3,2; Gain = 5 +

+ + +
+ + +
+ + +
+ + + +

+
+
+
+ + + + + diff --git a/experiment/simulation/pretest.html b/experiment/simulation/pretest.html new file mode 100644 index 0000000..1737c50 --- /dev/null +++ b/experiment/simulation/pretest.html @@ -0,0 +1,131 @@ + + + + + + + Virtual IoT Lab DEI + + + + + +
+ +
+
+

Pretest

+
+
+

+ How many types of Arduino do we have? +

+ + +
+ + +
+ + +
+ + +

+ What language is a typical Arduino code based on? +

+ + +
+ + +
+ + +
+ + + +

+
+
+
+ + + + + diff --git a/experiment/simulation/procedure.html b/experiment/simulation/procedure.html new file mode 100644 index 0000000..f0c172b --- /dev/null +++ b/experiment/simulation/procedure.html @@ -0,0 +1,104 @@ + + + + + + + Virtual IoT Lab DEI + + + + + +
+ +
+
+

Procedure

+
+
+

Procedure for the experiment is as follows: +

    +
  1. Select the experiment you want to perform.
  2. +
  3. Analyze the interfacing of different components.
  4. +
  5. Analyze the code for Arduino Compiler.
  6. +
  7. Click on the component itself to start the simulation.
  8. +
+

+
+
+
+ + + + \ No newline at end of file diff --git a/experiment/simulation/references.html b/experiment/simulation/references.html new file mode 100644 index 0000000..58adfe7 --- /dev/null +++ b/experiment/simulation/references.html @@ -0,0 +1,105 @@ + + + + + + + Virtual IoT Lab DEI + + + + + +
+ +
+
+

Reference

+
+
+

+ Follow these articles for reference : +

    +
  1. Master Slave I2C Connection
  2. +
  3. Arduino master-slave control using I2C protocol
  4. + +
+ +

+
+
+
+ + + + \ No newline at end of file diff --git a/experiment/simulation/src/css/expSelector.css b/experiment/simulation/src/css/expSelector.css new file mode 100644 index 0000000..84998e4 --- /dev/null +++ b/experiment/simulation/src/css/expSelector.css @@ -0,0 +1,237 @@ + + +h1{ + background-color: beige; + margin: none; + } + header{ + height: 10vh; + border-bottom:4px solid cadetblue ; + } + header h2{ + color: cadetblue; + display: inline-block; + } + body{ + height: 100vh; + width: 100vw; + margin: 0; + overflow: hidden; + } + .p-head { + font-family: Arial, Helvetica, sans-serif; + font-weight: 600; + letter-spacing: 1px; + } + .uppercase { + text-transform: uppercase; + } + .exp-changer { + display: flex; + justify-content: center; + } + .exp-changer-heading { + display: flex; + justify-content: center; + align-items: center; + color: grey; + font-family: Arial, Helvetica, sans-serif; + font-size: 20px; + outline: none; + position: relative; + top: 2.5vh; + } + + .navbar { + display: flex; + justify-content: space-between; + } + + .navbar1{ + width: 8vw; + height: 35px; + color: #ffffff; + background-color: rgba(4, 59, 79, 0.5); + font-size: 1.5vw; + border-radius: 0 0 20px 0; + font-family: "Raleway",sans-serif; + } + + .navbar1 a{ + padding-left: 10px; + color: #fff; + text-decoration: none; + } + + .navbar1 a:hover{ + text-decoration: none; + } + + .navbar-heading{ + width: 15%; + height: 35px; + display: flex; + justify-content: center; + color: #ffffff; + background-color: rgba(4, 59, 79, 0.5); + font-size: 1.4rem; + border-radius: 0 0 20px 20px; + font-family: "Raleway",sans-serif; + } + + .navbar2{ + width: 8vw; + height: 35px; + color: #ffffff; + background-color: rgba(4, 59, 79, 0.5); + font-size: 1.5vw; + border-radius: 0 0 0 20px; + font-family: "Raleway",sans-serif; + } + + .navbar2 a{ + padding-left: 10px; + color: #fff; + text-decoration: none; + } + + .navbar2 a:hover{ + text-decoration: none; + } + + + .nofled { + height: 80vh; + width: 100vw; + margin-top: 10px; + } + .nofledHead { + width: 100%; + height: 20vh; + margin-top: 3.5rem; + display: flex; + justify-content: center; + align-items: center; + } + .nofledBoxContainer { + width: 100%; + height: 50vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .leds { + background-color: rgb(46, 64, 92, 0.9); + color: white; + height: 2.5rem; + width: 60%; + text-decoration: none; + margin: 10px 0; + padding: 5px 10px; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + transition: all ease-out 0.4s; + } + .leds:hover { + cursor: pointer; + background-color: rgb(36, 50, 72); + transition: all ease-out 0.4s; + } + + .separator { + border-radius: 20px; + height: 60vh; + width: 8px; + background-color: rgba(4, 59, 79, 0.5); + transition: all 0.4s ease-in; + transform: scale(1.1); + } + .separator:hover { + border-radius: 20px; + height: 75vh; + width: 6px; + background-color: rgba(4, 59, 79, 0.5); + transition: all 0.4s ease-in; + transform: scale(1); + } + + .if-vid { + width: 48vw; + height: 80vh; + padding: 3px; + /* background-color: rgba(4, 59, 79, 0.1); */ + /* border: 3px solid rgba(4, 59, 79, 0.3); */ + border-radius: 10px; + overflow: auto; + } + + .interfacing { + margin-left: 10px; + width: 100%; + max-width: 750px; + overflow: auto; + /* border: 3px solid rgba(4, 59, 79, 0.3); */ + border-radius: 10px; + position: relative; + } + .interfacing img { + transition: all 0.4s ease; + width: 700px; + height: auto; + } + .interfacing #pushbutton { + position: absolute; + top: 34%; + left: 79%; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + background-color: rgba(4, 59, 79, 0.0); + color: rgba(4, 59, 79, 0.0); + cursor: pointer; + border: 1px solid rgba(4, 59, 79, 0.0); + } + + .code { + width: 48vw; + height: 80vh; + padding: 3px; + /* border: 3px solid rgba(4, 59, 79, 0.3); */ + border-radius: 10px; + /* background-color: rgba(4, 59, 79, 0.1); */ + } + + .code-head { + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + } + #codeInput { + width: 700px; + height: 60vh; + border-radius: 10px; + border: 1px solid rgba(4, 59, 79, 0.2); + } + + + + @media screen and (max-width: 1000px) { + .navbar1 { + width: 14vw; + height: 27px; + font-size: 1.1rem; + } + + .navbar2 { + width: 17vw; + height: 27px; + font-size: 1.1rem; + } + .navbar-heading { + width: 0; + height: 0; + } + } \ No newline at end of file diff --git a/experiment/simulation/src/css/style.css b/experiment/simulation/src/css/style.css new file mode 100644 index 0000000..0383bfc --- /dev/null +++ b/experiment/simulation/src/css/style.css @@ -0,0 +1,380 @@ +#header{ +background-color: white; +height: 100px; +width: 99vw; +border-bottom: 5px solid rgba(4, 59, 79, 0.5); +position: sticky; +top: 0px; +z-index:11 ; +} +footer{ +position: relative; + +} + +body{ + margin: 0; +height: 100vh; +width: 100%; +} + +.navigation-bar{ +width: 6%; +height: 35px; +position: relative; +color: #ffffff; +background-color: rgba(4, 59, 79, 0.5); +font-size: 22px; +border-radius: 0 0 20px 0; +font-family: "Raleway",sans-serif; +} +.navigation-bar a{ +margin-left: 10px; +color: #fff; +text-decoration: none; +} +.navigation-bar a:hover{ +text-decoration: none; +} +.side-nav{ + position: relative; + height: 100%; + min-height: 350px; + width: 15vw; + min-width: 100px; + top: 20px; + float: left; +} +.nav-element{ +height: 50px; +} +.nav-element a{ +margin-left: 20px; +font-weight: 600; +text-decoration: none; +color: #3e6389; +font-size: 20px; +font-family: "Open sans",sans-serif; +} +.nav-element a:hover{ +text-decoration: underline; +color: dark-blue; +} +.cp{ + color: #ff6600; +} +.p-head { + font-family: Arial, Helvetica, sans-serif; + font-weight: 600; + letter-spacing: 1px; +} + +.heading{ +padding: 10px 20px; +text-align: center; +height: 50px; +} + +.heading h1{ + color: #2C99CE; + font-family: "Raleway",sans-serif; +border-bottom: 1px solid rgba(0, 0, 0, 0.1); +margin: 5px 0px; +} +.main-section{ + position: relative; + height: auto; + width: 80vw; + display: inline-block; + border-left: 1px solid rgba(0,0,0,0.1); + margin: 5px 0; +} +.csection{ + position: relative; +height: auto; +min-height: 450px; +width: 100%; +} + +.des{ +width: 95%; +height: 100%; +min-height: 450px; +font-family: "Raleway",sans-serif; +font-weight: 300; +left: 2.5%; +position: relative; +text-align: justify;} + +.des p{ +font-size:20px;} +.des ol{ +font-size: 20px; +} +footer{ + height: 150px; + width: 100%; +background-color: rgba(0, 0, 0, 0.9); +position: relative; +font-family: "Raleway",sans-serif;} + +.foot1{ +float: left; +width: 32%; +position: relative; +left: 1.5%; +} +.fheading h4{ +margin: 0;} +.fheading{ +height: 20px; +width: 100%; +padding: 5px 0; +color: whitesmoke; +border-width: 0.15rem; +border-style: solid; +border-image: linear-gradient(to right, #3ec1d5 20%, #555 0%) 0% 0% 100% 0%; ; +} +.fdes a{ + color: whitesmoke; + text-decoration: none; +margin: 5px 0; +display: block; +} +.fdes p{ + color: whitesmoke; + text-decoration: none; +margin: 5px 0; +display: block; +} + + +.fdes a:hover{ +text-decoration: underline; +color: gray; +transition-duration: 0.25s; +} +.foot2{ +display: inline-block; +width: 32%; +position: relative; +left: 3%; +} +.foot3{ +float: right; +width: 30%; +right: 1.5%; +position: relative; + +} +.sm{ +border-radius: 50%; +height: 25px; +width: 25px; +margin: 5px; +} +.desm{ +display: flex; +} +.endfoot{ +background-color: rgba(255,255, 255, 0.1); +width: 100%; +height: 25px; +text-align: center; +position: relative; +top: 15px; +color: whitesmoke; +} +.endfoot a{ + top: 5px; +color: dodgerblue; +text-decoration: none; +} +.endfoot a:hover{ +text-decoration: underline; +opacity: 0.8; +} +.menu-btn .bar{ + width: 25px; + height: 0.5px; + background-color: black; + margin: 8px 0; + position: relative; + left: 12.5px; +} + +.menu-btn { +position: relative; +height: 100%; +width: 70px; +float: left; +outline: none; +border: none; +} + +.menu-btn:hover{ +cursor: pointer; +} + +header img{ + display: inline-block; +width: 140px; +height: 90px; +position: relative; +left: 40px; +top: 5px; +} +.right-head{ +height: 50px; +top: 40px; +float: right; +position: relative; +right: 10px; +} +.right-head a{ +text-decoration: none; +color: #2C98CD; +margin: 20px; +padding: 10px; +font-family: "Raleway",sans-serif; +} +.right-head a:hover{ +background-color: #77bb41; +border-radius: 5px; +color: white; +text-decoration: underline; +transition-duration: 0.1s; +} +@media screen and (max-width: 850px) +{ + +.side-nav{ +position: absolute; +background-color: white; +opacity: 1; +z-index: 10; +width: 60%; +left: 20%; +border-radius: 10px; +box-shadow: 5px 5px rgba(0, 0, 0, 0.2); +padding-top:20px ; +display: none; +overflow-y: scroll; +} +.main-section{ +width:100% ;} +.foot1{ +float: left; +width: 45%; +position: relative; +} +.foot2{ + display: inline-block; + left: 6%; +width: 45%; +position: relative; +} +.foot3{ +float: left; +width: 95%; +margin: 0 2.5%; +position: relative; + +} +footer{ + height: 250px; + width: 100%; +background-color: rgba(0, 0, 0, 0.9); +position: relative; +font-family: "Raleway",sans-serif;} +.endfoot{ +display: block; +position: absolute; +top: 225px; +} +.endfoot a{ +color: dodgerblue; +text-decoration: none; +} + +@media screen and (max-height: 700px) +{ +.side-nav{ +height: 400px; +} +} + +@media screen and (min-height: 700px) +{ +.side-nav{ +height: 500px;} +} +} + +@media screen and (min-width: 500px) +{ + +.math{ +font-size: 15px; +}} + +@media screen and (max-width: 500px) +{ +.math{ +font-size: 10px; +} +} +@media screen and (max-width: 400px) +{ +.math{ +font-size: 9px; +}} + +@media screen and (min-width: 700px) +{ + .right-head { +display: block;} +} +@media screen and (max-width: 700px) +{ +.right-head { +display: none;} + +} +#feedback-btn{ +color: dodgerblue; +text-decoration: none; +padding: 10px; +border: 0.5px solid dodgerblue; +border-radius: 5px;} + +#feedback-btn:focus{ +box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%); +} +.pretest .MathJax_Display{ +margin: 5px 0px; +display: inline!important; +} + +.test{ +margin: 5px 0px; +font-size: 17px!important; +display: inline-block; +} +.test:hover{ +cursor: pointer;} +#input_button{ + background-color: dodgerblue; + position: relative; + display: block; + top: 2.5vh; + font-size: 18px; +border-radius: 10px; +color: whitesmoke; +height:30px ; +width: 100px; +left: 5px; +border: none; +} +#input_button:hover{ +cursor: pointer;} \ No newline at end of file diff --git a/experiment/simulation/src/js/main.js b/experiment/simulation/src/js/main.js new file mode 100644 index 0000000..fa9b077 --- /dev/null +++ b/experiment/simulation/src/js/main.js @@ -0,0 +1,163 @@ +var menu_score = -1; +function dispmenu() +{ + + var ms =window.matchMedia("(max-width:850px)"); + if(ms.matches) + { + if(menu_score==0) + { + menu_score=-1; + document.getElementById("main-sec").setAttribute("style","width:100%"); + // document.getElementById("des").setAttribute("style","min-height:450px"); + document.getElementById("navbar").setAttribute("style","display:block"); + // document.getElementById("csec").setAttribute("style","min-height:450px"); + document.body.style.backgroundColor="rgba(0,0,0,0.1)"; + window.addEventListener('mouseup', function(event){ + var box = document.getElementById('navbar'); + if (event.target != box && event.target.parentNode != box){ + box.style.display = 'none'; + document.body.style.backgroundColor="white"; + if(event.target != document.getElementById("head-btn")) + menu_score=0; + document.getElementById("csec").setAttribute("style","min-height:150px"); + document.getElementById("main-sec").setAttribute("style","width:100%"); + document.getElementById("des").setAttribute("style","min-height:150px"); + }}); + } + else{ + document.getElementById("navbar").setAttribute("style","display:none"); + document.getElementById("csec").setAttribute("style","min-height:150px"); + document.getElementById("main-sec").setAttribute("style","width:100%"); + document.getElementById("des").setAttribute("style","min-height:150px"); + menu_score=0; + } + } + +else +{ + if(menu_score==0) + { + document.getElementById("navbar").setAttribute("style","display:block"); + document.getElementById("csec").setAttribute("style","min-height:450px"); + document.getElementById("main-sec").setAttribute("style","width:80vw"); + document.getElementById("des").setAttribute("style","min-height:450px"); + menu_score = -1; + } + else{ + document.getElementById("navbar").setAttribute("style","display:none"); + document.getElementById("csec").setAttribute("style","min-height:150px"); + document.getElementById("main-sec").setAttribute("style","width:100%"); + document.getElementById("des").setAttribute("style","min-height:150px"); + menu_score=0; + } + } +} + + + + +function myFunction(x) { + x.classList.toggle("change"); +} + +function prequiz() +{ +let radioButtons = document.querySelectorAll('input[name="pre1"]'); +let selectedans; +let said; +let count=0; + for (const radioButton of radioButtons) { + if (radioButton.checked) { + selectedans = radioButton.value; + break; + } + } + if(selectedans==1) + said="pre11"; + else if(selectedans==2) + said="pre12"; + else if(selectedans==3) + said="pre13"; + else if(selectedans==4) + said="pre14"; + if(selectedans!=2) + {count=count+1; + console.log(said); + document.getElementById(said).setAttribute("style","color:red");} + else + document.getElementById(said).setAttribute("style","color:lightgreen"); + radioButtons = document.querySelectorAll('input[name="pre2"]'); + for (const radioButton of radioButtons) { + if (radioButton.checked) { + selectedans = radioButton.value; + said=radioButton.id; + break; + } + } + if(selectedans==1) + said="pre21"; + else if(selectedans==2) + said="pre22"; + else if(selectedans==3) + said="pre23"; + else if(selectedans==4) + said="pre24"; + if(selectedans!=4) + {count=count+1; + document.getElementById(said).setAttribute("style","color:red");} + else + document.getElementById(said).setAttribute("style","color:lightgreen"); + +document.getElementById("preresult").innerHTML="You got " + (2-count).toFixed(0) + " answers correct out of 2"; +} +function postquiz() +{ +let radioButtons = document.querySelectorAll('input[name="post1"]'); +let selectedans; +let said; +let count=0; + for (const radioButton of radioButtons) { + if (radioButton.checked) { + selectedans = radioButton.value; + break; + } + } + if(selectedans==1) + said="post11"; + else if(selectedans==2) + said="post12"; + else if(selectedans==3) + said="post13"; + else if(selectedans==4) + said="post14"; + if(selectedans!=4) + {count=count+1; + console.log(said); + document.getElementById(said).setAttribute("style","color:red");} + else + document.getElementById(said).setAttribute("style","color:lightgreen"); + radioButtons = document.querySelectorAll('input[name="post2"]'); + for (const radioButton of radioButtons) { + if (radioButton.checked) { + selectedans = radioButton.value; + said=radioButton.id; + break; + } + } + if(selectedans==1) + said="post21"; + else if(selectedans==2) + said="post22"; + else if(selectedans==3) + said="post23"; + else if(selectedans==4) + said="post24"; + if(selectedans!=1) + {count=count+1; + document.getElementById(said).setAttribute("style","color:red");} + else + document.getElementById(said).setAttribute("style","color:lightgreen"); + +document.getElementById("preresult").innerHTML="You got " + (2-count).toFixed(0) + " answers correct out of 2"; +} \ No newline at end of file diff --git a/experiment/simulation/theory.html b/experiment/simulation/theory.html new file mode 100644 index 0000000..d713945 --- /dev/null +++ b/experiment/simulation/theory.html @@ -0,0 +1,117 @@ + + + + + + + Virtual IoT Lab DEI + + + + + +
+ +
+
+

Theory

+
+
+

+ Theory :
+
+ The Arduino Master-Slave model refers to an experimental setup + utilizing Arduino microcontrollers to establish a communication + network between multiple devices. The concept of a master-slave + relationship in this context involves one Arduino board, known as + the master, controlling and coordinating the operations of one or + more Arduino boards, referred to as slaves.
+ +
+ The experiment begins by connecting the Arduino master and slave boards + using a suitable communication protocol, such as I2C or Serial. The master + board assumes the role of the central controller, sending instructions and + receiving data from the slave boards. The slave boards, on the other hand, + act as peripheral devices that execute commands from the master and provide + relevant information when requested. +

+
+
+
+ + + + +