Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

Can I get some HTML code for this attached Image

Member
  
Join Date: Oct 2009
Posts: 120
#1: 2 Weeks Ago
Can I get some HTML/CSS code for this attached Image. I need just Two lines, but I should be able to select only one line (if I select Second line, it should throw warning like "select one port and click apply". I need status like

PLUG1 O ON O OFF PLUG 1 Status ^00&0001 | ON | OFF |;
PLUG2 O ON O OFF PLUG 2 Status ^00&0002 | ON | OFF |;

appreciated.
Attached Thumbnails
8port.jpg  

Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,664
#2: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

if you show me what you have managed so far, I can tell you, whether you’re on the right path.
Member
  
Join Date: Oct 2009
Posts: 120
#3: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

Thanks for help. I got this. I don't know how to put that title. also I want to select only one plug at a time, I need some warning if I second plug.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>:: SWITCH PANEL</title>
  6. <style>
  7. html,body{
  8.       margin-top:0px;
  9.       margin-bottom:0px;
  10.       margin-right:0px;
  11.       margin-left:0px;
  12.       background-color:#FFFFFF;         
  13.       font-family:Verdana, Arial, Helvetica, sans-serif;
  14.       font-size: 11px;
  15.       color:#000000;      
  16. }
  17. .text {
  18. font-family:Verdana, Arial, Helvetica, sans-serif;
  19. font-size:12px;
  20. color:#333333;
  21. font-weight:bold;
  22. border-bottom:1px solid #FF9900;
  23. }
  24. .on_text {
  25. font-family:Verdana, Arial, Helvetica, sans-serif;
  26. font-size:12px;
  27. color:#00CC33;
  28. font-weight:bold;
  29. border-bottom:1px solid #FF9900;
  30. }
  31. .off_text {
  32. font-family:Verdana, Arial, Helvetica, sans-serif;
  33. font-size:12px;
  34. color:#CC0000;
  35. font-weight:bold;
  36. border-bottom:1px solid #FF9900;
  37. }
  38. .on_button {
  39. border:0px solid #00CC00;
  40. background-color:#00CC00;
  41. color:#FFFFFF;
  42. font-size:12px;
  43. font-weight:bold;
  44. }
  45. .off_button {
  46. border:0px solid #FF0000;
  47. background-color:#FF0000;
  48. color:#FFFFFF;
  49. font-size:12px;
  50. font-weight:bold;
  51. }
  52. .line
  53. {
  54. border-bottom:1px solid #FF9900;
  55. }
  56. </style>
  57. <script language="javascript">
  58. function refreshPage()
  59. {
  60.     location.href="plugv1.htm";
  61. }
  62. function submit_Confirm(id)
  63. {        
  64.     var stat = confirm("Are you sure you want to Submit ?");    
  65.     if(stat!="")
  66.     {            
  67.             document.sp.submit();        
  68.     }
  69.     else
  70.         { 
  71.         }
  72. }
  73. function logout_Confirm()
  74. {        
  75.     var stat = confirm("Are you sure you want to Logout ?");    
  76.     if(stat!="")
  77.     {            
  78.             // Logout logic and page to be re -direct    
  79.     }
  80.     else
  81.         { 
  82.         }
  83. }
  84. </script>
  85.  
  86. </head>
  87. <body>
  88. <!-- end --></td></tr></table>
  89. <br />
  90. <!-- <form name="sp" method="post" action=""> -->
  91. <form name="input" action="/plugv1.htm" method="get">
  92. <table align="center" cellpadding="10" cellspacing="0" style="border:2px solid #FF9933;" border="0">
  93. <tr bgcolor="#FFF5EB">
  94. <td class="text" align="left">PLUG 1</td>
  95. <td class="on_text" align="left"><input type="radio" name="plug1" value="ON1">ON</td>
  96. <td class="off_text" align="left"><input type="radio" name="plug1" value="OF1">OFF</td>
  97. <td class="text" align="left">PLUG 1 Status</td>
  98. <td class="text" align="left">^00&0001&nbsp;&nbsp;</td>
  99. <td class="line">&nbsp;|&nbsp;<input type="button" class="on_button" value=" ON " />&nbsp;|</td>
  100. <td class="line"><input type="button" class="off_button" value=" OFF " />&nbsp;|;</td>
  101. </tr>
  102. <tr bgcolor="#FFEBD2">
  103. <td class="text" align="left">PLUG 2</td>
  104. <td class="on_text" align="left"><input type="radio" name="plug2" value="ON2">ON</td>
  105. <td class="off_text" align="left"><input type="radio" name="plug2" value="OF2">OFF</td>
  106. <td class="text" align="left">PLUG 2 Status</td>
  107. <td class="text" align="left">^00&0002&nbsp;&nbsp;</td>
  108. <td class="line">&nbsp;|&nbsp;<input type="button" class="on_button" value=" ON " />&nbsp;|</td>
  109. <td class="line"><input type="button" class="off_button" value=" OFF " />&nbsp;|;</td>
  110. </tr>
  111. <tr bgcolor="#FFF5EB">
  112. <td class="text" align="left">PLUG 3</td>
  113. <td class="on_text" align="left"><input type="radio" name="plug3" value="ON3">ON</td>
  114. <td class="off_text" align="left"><input type="radio" name="plug3" value="OF3">OFF</td>
  115. <td class="text" align="left">PLUG 3 Status</td>
  116. <td class="text" align="left">^00&0004&nbsp;&nbsp;</td>
  117. <td class="line">&nbsp;|&nbsp;<input type="button" class="on_button" value=" ON " />&nbsp;|</td>
  118. <td class="line"><input type="button" class="off_button" value=" OFF " />&nbsp;|;</td>
  119. </tr>
  120. <tr bgcolor="#FFEBD2">
  121. <td class="text" align="left">PLUG 4</td>
  122. <td class="on_text" align="left"><input type="radio" name="plug4" value="ON4">ON</td>
  123. <td class="off_text" align="left"><input type="radio" name="plug4" value="OF4">OFF</td>
  124. <td class="text" align="left">PLUG 4 Status</td>
  125. <td class="text" align="left">^00&0008&nbsp;&nbsp;</td>
  126. <td class="line">&nbsp;|&nbsp;<input type="button" class="on_button" value=" ON " />&nbsp;|</td>
  127. <td class="line"><input type="button" class="off_button" value=" OFF " />&nbsp;|;</td>
  128. </tr>
  129. <tr bgcolor="#FFF5EB">
  130. <td class="text" align="left">PLUG 5</td>
  131. <td class="on_text" align="left"><input type="radio" name="plug5" value="ON5">ON</td>
  132. <td class="off_text" align="left"><input type="radio" name="plug5" value="OF5">OFF</td>
  133. <td class="text" align="left">PLUG 5 Status</td>
  134. <td class="text" align="left">^00&0010&nbsp;&nbsp;</td>
  135. <td class="line">&nbsp;|&nbsp;<input type="button" class="on_button" value=" ON " />&nbsp;|</td>
  136. <td class="line"><input type="button" class="off_button" value=" OFF " />&nbsp;|;</td>
  137. </tr>
  138. <tr bgcolor="#FFEBD2">
  139. <td class="text" align="left">PLUG 6</td>
  140. <td class="on_text" align="left"><input type="radio" name="plug3" value="ON6">ON</td>
  141. <td class="off_text" align="left"><input type="radio" name="plug3" value="OF6">OFF</td>
  142. <td class="text" align="left">PLUG 6 Status</td>
  143. <td class="text" align="left">^00&0020&nbsp;&nbsp;</td>
  144. <td class="line">&nbsp;|&nbsp;<input type="button" class="on_button" value=" ON " />&nbsp;|</td>
  145. <td class="line"><input type="button" class="off_button" value=" OFF " />&nbsp;|;</td>
  146. </tr>
  147. <tr bgcolor="#FFF5EB">
  148. <td class="text" align="left">PLUG 7</td>
  149. <td class="on_text" align="left"><input type="radio" name="plug7" value="ON7">ON</td>
  150. <td class="off_text" align="left"><input type="radio" name="plug7" value="OF7">OFF</td>
  151. <td class="text" align="left">PLUG 7 Status</td>
  152. <td class="text" align="left">^00&0040&nbsp;&nbsp;</td>
  153. <td class="line">&nbsp;|&nbsp;<input type="button" class="on_button" value=" ON " />&nbsp;|</td>
  154. <td class="line"><input type="button" class="off_button" value=" OFF " />&nbsp;|;</td>
  155. </tr>
  156. <tr bgcolor="#FFEBD2">
  157. <td class="text" align="left">PLUG 8</td>
  158. <td class="on_text" align="left"><input type="radio" name="plug8" value="ON8">ON</td>
  159. <td class="off_text" align="left"><input type="radio" name="plug8" value="OF8">OFF</td>
  160. <td class="text" align="left">PLUG 8 Status</td>
  161. <td class="text" align="left">^00&0080&nbsp;&nbsp;</td>
  162. <td class="line">&nbsp;|&nbsp;<input type="button" class="on_button" value=" ON " />&nbsp;|</td>
  163. <td class="line"><input type="button" class="off_button" value=" OFF " />&nbsp;|;</td>
  164. </tr>
  165. </table>
  166. <br />
  167. <table width="253" border="0" align="center" cellpadding="5" cellspacing="0" style="border:1px solid #FF9900;" bgcolor="#FFF5EB">
  168.       <td class="text">ALL PLUGS </td>
  169.       <td class="on_text"><input type="radio" name=plugx value="ONX"/>ON </td>
  170.       <td class="off_text"><input type="radio" name=plugx value="OFX">OFF </td>
  171. </table>
  172. <br />
  173. <table width="474" border="0" align="center" cellpadding="5" cellspacing="0" style="border:0px solid #FF9900;">
  174.       <td align="left"><input type="submit" value="Submit" onclick="submit_Confirm();"/></td>
  175.       <td align="center"><input type="reset" value=" Clear " /></td>
  176.       <td align="right"><input type="button" value="Refresh" onClick="refreshPage();"/></td>
  177. </table>
  178. <br />
  179. <table width="474" border="0" align="center" cellpadding="5" cellspacing="0" style="border:0px solid #FF9900;">      
  180.       <td align="center"><input type="button" value=" Logout " onclick="logout_Confirm();"/></td>    
  181. </table>
  182. </form>
  183. <!-- end --></td></tr></table>
  184. <br />
  185. </body>
  186. </html>
  187.  
  188.  
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,664
#4: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

there are 2 possibilities to check only one "ON" radio

1) give all the "ON" radios the same name, this way you cannot select more than one. use javascript to match the "OFF" radios
Expand|Select|Wrap|Line Numbers
  1. // for each line, e.g. using class
  2. // somewhat pseudo code
  3. if (false == ON.checked)
  4.     OFF.checked = true;
  5. else
  6.     OFF.checked = false;
2) pair the "ON" and "OFF" radios, check all radios to "OFF" and only the current one (back) to "ON"

there are various ways to implement each of the ideas.
Member
  
Join Date: Oct 2009
Posts: 120
#5: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

If I give the same name, I need to pass name, its value to server, that tells microcontroller to make high or low that particular GPIO pin.

Can I get some html code for header?. I put the header info in image file I attached in first message
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,664
#6: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

Quote:

Originally Posted by tvnaidu View Post

If I give the same name, I need to pass name, its value to server

the browser does that for you.

Quote:

Originally Posted by tvnaidu View Post

Can I get some html code for header?. I put the header info in image file I attached in first message

what header?

if you speak of HTTP headers, you should not set them yourself (unless you have very good (or evil) reason to)

if you speak of HTML <meta> elements in the <head>, they are for the browser only
Member
  
Join Date: Oct 2009
Posts: 120
#7: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

I can give same name for all (instead pulg1, plug2.....I can give plug", but value has to be different, ON5 means, GPIO 5 to be high, OF5 means, GPIO 5 to low,


# <td class="on_text" align="left"><input type="radio" name="plug5" value="ON5">ON</td>
# <td class="off_text" align="left"><input type="radio" name="plug5" value="OF5">OFF</td>
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,664
#8: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

if I understand you right, you want only one of the GPIOs set to high. so you just need the name of that GPIO which is to be set, all others are reset to low. thus the radio for OFF is just eye candy…
Member
  
Join Date: Oct 2009
Posts: 120
#9: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

I have 8 GPIO pins, one for each, I need to let Microcontroller know pin number and ON or OFF.
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,664
#10: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

so it doesn’t matter whether one or more pins are on?
Member
  
Join Date: Oct 2009
Posts: 120
#11: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

These are independent pins, one might be high and other might be low, user can turn on any one and turn off any one. web should take one at a time.
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,664
#12: 2 Weeks Ago

re: Can I get some HTML code for this attached Image

then pair the radios.
________________
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,533 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved