From 1691fff7c1c3f43aa344616931c49c315aa48bd4 Mon Sep 17 00:00:00 2001
From: Naren Akash R J <43748290+narenakash@users.noreply.github.com>
Date: Sun, 24 Mar 2019 19:19:16 +0530
Subject: [PATCH] Responsive Images Created

The images on the page are now responsive.
---
 src/lab/exp2/Procedure.html | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/lab/exp2/Procedure.html b/src/lab/exp2/Procedure.html
index 390126e..8bd315e 100644
--- a/src/lab/exp2/Procedure.html
+++ b/src/lab/exp2/Procedure.html
@@ -23,6 +23,14 @@
 
     <!-- Custom CSS -->
     <link href="../css/style.css" rel="stylesheet">
+	<!--CSS for Image Responsiveness-->
+	<style>
+		.responsive{
+			width = 100%;
+			height = auto;
+			max-height="600px";
+			max-width="950px"
+		}
 	<script type="text/javascript" src = 'tabs.js'></script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-67558473-1', 'auto');ga('send', 'pageview');</script>	
 </head>
@@ -111,23 +119,23 @@ <h3 style="color: red; "><big> </big></h3>
 <br>d.    Go to simulator icon and click on the “Simulator” button
 <br>e.    The PLC simulator will be opened in new window<br> <br> 2.    The procedure for writing the ladder diagram in the work space is as follows
 <br> a. The screen shot for the first window will appear like this.<br><br>
- <img src="../images/PLC_Ex2_1.png" height="600px" width="950px"/>
+ <img src="../images/PLC_Ex2_1.png" class="responsive" />
 <br><b> Add a new rung by clicking on the 'Add Rung' icon. The window will appear like this:</b><br><br>
-<img src="../images/PLC_EX2_2.png" height="600px" width="950px"/>
+<img src="../images/PLC_EX2_2.png" class="responsive" height="600px" width="950px"/>
 <br> b. Place the contacts as per the requirement by left clicking the appropriate contact shown at the top side. In the example demonstrated below one normally contact and one coil is placed as shown the figure.<br><br>
- <img src="../images/PLC_Ex2_3.png" height="600px" width="950px"/>
+ <img src="../images/PLC_Ex2_3.png" class="responsive" 
 <br> C.   Right click on the contact or coil and you can give tag name like “start”, “stop” etc. Please ensure that the tag numbers are true replica of process connections. Similarly give tag name to coil like “motor”, “Lamp” etc. The final ladder will look like this.<br><br>
-<img src="../images/PLC_Ex2_4.png" height="600px" width="950px"/></br>
+<img src="../images/PLC_Ex2_4.png" class="responsive" /></br>
 d.    Please note that the tag names are case sensitive and if you are using them in circuit as bit make sure that the correct tag name appears.
 <br>e.    Click the Compile  button so the ladder will be ready for running. For  testing the logic you need to click on Run. Both sides of the rung will become green and this is the indication of run mode. Please not that in run mode you can't  make changes in the ladder. For modifications user has to go to development mode.
 <br>f. By right clicking on the contact  toggle the state of contact.Check the output contact status. <br><br>
-<img src="../images/PLC_Ex2_5.png" height="600px" width="950px"/><br>
+<img src="../images/PLC_Ex2_5.png" class="responsive" /><br>
 g.    Please remember the ladder contacts or the state of the inputs and outputs are always in de-energised state. The de-energised is that state wherein the contacts are in non-active state.
 <br>h.    You can once again toggle the contact and the output state will change. To add any contact you will have to go to development mode. Click on the rung and add contacts.
 <br>i.    To delete any contact or output right click on the contact and press “delete”, the contact will be deleted.
 <br><b>j.      You can add seven elements in series and 5 elements in parallel.
 </b><br>l.    To add element in parallel click on the node near contact where you wish to add parallel branch. Select the branch and click on the '+' sign to complete the loop. The screen will appear as shown below.<br><br>
-<img src="../images/PLC_Ex2_6.png" height="600px" width="950px"/><br>
+<img src="../images/PLC_Ex2_6.png" class="responsive" /><br>
 m.    Repeat the procedure and verify your logic.<br>
 n.    Similarly you can check the logic for OR, NOR, and NAND gates. Validate the truth tables and confirm the results.
 </span></p>