Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][PHP]Przycisk IMG zamiast tekstu
traczu
post
Post #1





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 15.01.2008
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Witam Was.
W końcu wziąłem się za poważniejszy projekt niż tylko HTML i oto pojawił mi się malutki problem.

Mianowicie chciałbym zamienić przycisk z Napisu "Włączony" czy "Wyłączony" na przycisk w formie graficznej.
Byłby ktoś tak uprzejmy i podpowiedział jak to zrobić ?

[PHP] pobierz, plaintext 
  1. 	   		   	{
  2. 	   		$doButtona[$ktoraLinia] = "button1";
  3. 	   		$doNapisu[$ktoraLinia] =  "Włączony";
  4. 	   		$nowyStan[$ktoraLinia] = 1;
  5. 	   		if ($zmiana == 1) //skrypt powloki wykonuje tyklo wtedy gdy byl wcisniety guzik
  6. 	   		{
  7. 				shell_exec('gpio mode '.$ktoryPin.' out');
  8. 				shell_exec('gpio write '.$ktoryPin.' 0');
  9. 			}
  10. 	   	}else
  11. 	   	{
  12. 	   		$doButtona[$ktoraLinia] = "button2";
  13. 	   		$doNapisu[$ktoraLinia] = "Wyłączony";
  14. 	   		$nowyStan[$ktoraLinia] = 0;	  
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
vokiel
post
Post #2





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
----- 

[PHP] pobierz, plaintext 
  1. $doNapisu[$ktoraLinia] =  '<img src="adres/obrazka.png" />';
[PHP] pobierz, plaintext


Ten post edytował vokiel 13.01.2016, 20:49:00
Go to the top of the page
+Quote Post
traczu
post
Post #3





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 15.01.2008
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Cytat(vokiel @ 13.01.2016, 20:48:43 ) *
[PHP] pobierz, plaintext 
  1. $doNapisu[$ktoraLinia] =  '<img src="adres/obrazka.png" />';
[PHP] pobierz, plaintext



Nie bardzo tak idzie
Wywala mi

Zamiast przycisku:
[HTML] pobierz, plaintext 
  1. <IMG SRC=" CLASS="BUTTON1">
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
vokiel
post
Post #4





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

To podaj prawidłowy URL obrazka, poza tym skąd ja mam wiedzieć co się dzieje później z $nowyStan skoro nie pokazałeś kodu, który obrabia dalej tą zmienną?
Go to the top of the page
+Quote Post
traczu
post
Post #5





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 15.01.2008
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Link do grafiki:
images/light_on.png

Aktualnie kod wygląda tak:

[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <!--
  3. 	Identity by HTML5 UP
  4. 	html5up.net | @n33co
  5. 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  6. -->
  7. <html>
  8. 	<head>
  9. 		<title>AquaPI by Traczu</title>
  10. 		<meta charset="utf-8" />
  11. 		<meta name="viewport" content="width=device-width, initial-scale=1" />
  12. 		<!--[if lte IE 8]><script src="assets/js/html5shiv.js"></script><![endif]-->
  13. 		<link rel="stylesheet" href="assets/css/main.css" />
  14. 		<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
  15. 		<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
  16. 		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
  17. 	</head>
  18. 	<body class="is-loading">
  19.  
  20. 		<!-- Wrapper -->
  21. 			<div id="wrapper">
  22.  
  23. 				<!-- Main -->
  24. 					<section id="main">
  25. 						<header>
  26. 							<span class="avatar"><img src="images/aquarium-icon.png" alt="" /></span>
  27.  
  28.  
  29.  
  30.  
  31. 						</header>
  32.  
  33. 				<div>
  34.  
  35.  
  36.       <div id="lewy">
  37.         <p><img src="images/info_off.png" alt="" /></p>
  38.         <p><img src="images/light_off.png" alt="" /></p>
  39.       </div>
  40.  
  41.       <div id="srodek">
  42.         <p><img src="images/setting_off.png" alt="" /></p>
  43.       </div>
  44.  
  45.       <div id="prawy">
  46.         <p><img src="images/power_off.png" alt="" /></p>
  47.       </div>
  48. <br><br><br>
  49.       <div id="srodek">
  50.  
  51. 		<?php
  52. 	function sterujPin($zmiana, $stan, &$doButtona, &$doNapisu, &$nowyStan, $ktoraLinia, $ktoryPin) //zmienne sterujace wyladem form
  53. 	{
  54. 		if($stan==0)
  55. 	   	{
  56. 	   		$doButtona[$ktoraLinia] = "button1";
  57. 	   		$doNapisu[$ktoraLinia] =  '<img src="images/light_on.png" />';
  58. 	   		$nowyStan[$ktoraLinia] = 1;
  59. 	   		if ($zmiana == 1) //skrypt powloki wykonuje tyklo wtedy gdy byl wcisniety guzik
  60. 	   		{
  61. 				shell_exec('gpio mode '.$ktoryPin.' out');
  62. 				shell_exec('gpio write '.$ktoryPin.' 0');
  63. 			}
  64. 	   	}else
  65. 	   	{
  66. 	   		$doButtona[$ktoraLinia] = "button2";
  67. 	   		$doNapisu[$ktoraLinia] = "Wyłączone";
  68. 	   		$nowyStan[$ktoraLinia] = 0;	  
  69. 	   		if ($zmiana ==1) //skrypt powloki wykonuje tyklo wtedy gdy byl wcisniety guzik
  70. 	   		{
  71. 				shell_exec('gpio mode '.$ktoryPin.' in');
  72. 				shell_exec('gpio write '.$ktoryPin.' 1');
  73. 			} 			
  74. 	   	}
  75. 	}
  76.  // *** definicja tablicy z nazwami linii ***
  77.  $nazwyLinii = Array('Światło 1', 'Światło 2', 'CO2', 'Dodatkowe źródło');
  78.  // *** numery pinow zgodne z powyzsza kolejnoscia ***
  79.  $numeryPinow = Array(0, 1, 2, 3);
  80.  // *** liczba linii 
  81.  $ileLinii = 4;
  82. ?>
  83.  
  84. 	<?php
  85. 		for($i=0; $i<$ileLinii; $i++)
  86. 		{
  87. 			$stanPinu2[$i] = shell_exec('gpio read '.$numeryPinow[$i]); //czytam jaki stan pinu
  88. 			$czyZmiana = 0; //domyslnie brak wcisnietego guzika
  89. 			if (isset($_POST['stan']) && $_POST['linia']==$i) //warunek przelaczenia - to na tej linii bylo przelaczenie
  90. 			{
  91. 				$czyZmiana = 1; //przekazuje info do funkcji ze byl wcisniety guzik
  92. 				sterujPin($czyZmiana, $_POST['stan'], $jakiButon, $jakiNapis, $doStanu, $_POST['linia'], $numeryPinow[$i]);
  93. 			}else
  94. 			{
  95. 				sterujPin($czyZmiana, $stanPinu2[$i], $jakiButon, $jakiNapis, $doStanu, $i, $numeryPinow[$i]);
  96. 			}
  97. 		}
  98. 	?>
  99.  
  100. 	<div>
  101.  
  102. 		<?php
  103. 		//w petli generujemy formularze
  104. 		for($i=0; $i<$ileLinii; $i++)
  105. 		{
  106. 			$liczLinia = $i + 1;
  107. 			echo '<form action="index.php" method=post class="centruj">
  108. 				<fieldset style="width:450px">
  109. 					<legend>'.$nazwyLinii[$i].'</legend>
  110. 							<input type="submit" value="'.$jakiNapis[$i].'" class="'.$jakiButon[$i].'">
  111. 									<input name="stan" value="'.$doStanu[$i].'"  type="hidden">
  112. 									<input name="linia" value="'.$i.'"  type="hidden">
  113. 				</fieldset>
  114. 			</form>';
  115. 		}
  116. 		?>
  117.  
  118. 	</div>
  119.  
  120.  
  121.  
  122.  
  123.  
  124.  
  125.  
  126.  
  127.       </div>
  128.  
  129.  
  130.     </div>
  131.  
  132. 			</div>
  133.  
  134. 		<!-- Scripts -->
  135. 			<!--[if lte IE 8]><script src="assets/js/respond.min.js"></script><![endif]-->
  136. 			<script>
  137. 				if ('addEventListener' in window) {
  138. 					window.addEventListener('load', function() { document.body.className = document.body.className.replace(/\bis-loading\b/, ''); });
  139. 					document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
  140. 				}
  141. 			</script>
  142.  
  143. 	</body>
  144. </html>
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
vokiel
post
Post #6





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

To z powodu linii 110:
[PHP] pobierz, plaintext 
  1. <input type="submit" value="'.$jakiNapis[$i].'" class="'.$jakiButon[$i].'">
[PHP] pobierz, plaintext


Czyli kod generuje Ci zwykły input submit.

Opcji masz kilka:
- ostylowanie inputa w zależności od klasy
- zamiana input na button, np linię 110 podmieniasz na
[PHP] pobierz, plaintext 
  1. <button type="submit">'.$jakiButon[$i].'</button>
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
traczu
post
Post #7





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 15.01.2008
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

czyli rozumiem że zrobić w css klasę jakiButon i ją ustawić na plik graficzny (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
vokiel
post
Post #8





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

Szybciej jak podmienisz linię 110 na to co wkleiłem w ostatnim bloku kodu.
Go to the top of the page
+Quote Post
traczu
post
Post #9





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 15.01.2008
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

zmienił mi to tylko nazwę przycisku na button2 lub button1
teraz muszę zdefiniować jakoś grafikę tego przycisku (IMG:style_emoticons/default/questionmark.gif)

CSS

CODE
@charset "UTF-8";
@import url(font-awesome.min.css);
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300");


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}



body, input, select, textarea {
color: #414f57;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 14pt;
font-weight: 300;
line-height: 2;
letter-spacing: 0.2em;
text-transform: uppercase;
}

@media screen and (max-width: 1680px) {

body, input, select, textarea {
font-size: 11pt;
}

}

@media screen and (max-width: 480px) {

body, input, select, textarea {
font-size: 10pt;
line-height: 1.75;
}

}

a {
-moz-transition: color 0.2s ease, border-color 0.2s ease;
-webkit-transition: color 0.2s ease, border-color 0.2s ease;
-ms-transition: color 0.2s ease, border-color 0.2s ease;
transition: color 0.2s ease, border-color 0.2s ease;
color: inherit;
text-decoration: none;
}

a:before {
-moz-transition: color 0.2s ease, text-shadow 0.2s ease;
-webkit-transition: color 0.2s ease, text-shadow 0.2s ease;
-ms-transition: color 0.2s ease, text-shadow 0.2s ease;
transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
color: #ff7496;
}



input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
border-radius: 4px;
border: solid 1px #c8cccf;
color: inherit;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
}

input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
input[type="tel"]:invalid,
select:invalid,
textarea:invalid {
box-shadow: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
border-color: #ff7496;
}



input[type="text"],
input[type="password"],
input[type="email"],
select {
height: 2.75em;
}

textarea {
padding: 0.75em 1em;
}

input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
text-decoration: none;
color: #414f57;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 300;
padding-left: 2.4em;
padding-right: 0.75em;
position: relative;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
border-radius: 4px;
border: solid 1px #c8cccf;
content: '';
display: inline-block;
height: 1.65em;
left: 0;
line-height: 1.58125em;
position: absolute;
text-align: center;
top: 0.15em;
width: 1.65em;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
color: #ff7496;
content: '\f00c';
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
border-color: #ff7496;
}

input[type="checkbox"] + label:before {
border-radius: 4px;
}

input[type="radio"] + label:before {
border-radius: 100%;
}

::-webkit-input-placeholder {
color: #616f77 !important;
opacity: 1.0;
}

:-moz-placeholder {
color: #616f77 !important;
opacity: 1.0;
}

::-moz-placeholder {
color: #616f77 !important;
opacity: 1.0;
}

:-ms-input-placeholder {
color: #616f77 !important;
opacity: 1.0;
}

.formerize-placeholder {
color: #616f77 !important;
opacity: 1.0;
}




/* Button */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
display: inline-block;
height: 2.75em;
line-height: 2.75em;
padding: 0 1.5em;
background-color: transparent;
border-radius: 4px;
border: solid 1px #c8cccf;
color: #414f57 !important;
cursor: pointer;
text-align: center;
text-decoration: none;
white-space: nowrap;
}

.button1 {background-image: url(images/light_on.png);
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
border-color: #ff7496;
color: #ff7496 !important;
}

input[type="submit"].icon,
input[type="reset"].icon,
input[type="button"].icon,
button.icon,
.button.icon {
padding-left: 1.35em;
}

input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
button.icon:before,
.button.icon:before {
margin-right: 0.5em;
}

input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
button.fit,
.button.fit {
display: block;
width: 100%;
margin: 0 0 0.75em 0;
}

input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
button.small,
.button.small {
font-size: 0.8em;
}

input[type="submit"].big,
input[type="reset"].big,
input[type="button"].big,
button.big,
.button.big {
font-size: 1.35em;
}

input[type="submit"].disabled, input[type="submit"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
opacity: 0.5;
}

/* Main */

#main {
position: relative;
max-width: 100%;
min-width: 27em;
padding: 0em 3em 0em 3em ;
background: #09669c;
border-radius: 10px;
cursor: default;
opacity: 0.95;
text-align: center;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
-moz-transition: opacity 1s ease, -moz-transform 1s ease;
-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
-ms-transition: opacity 1s ease, -ms-transform 1s ease;
transition: opacity 1s ease, transform 1s ease;
}

#main .avatar {

position: relative;
display: block;
margin-bottom: 0.0em;
}

#main .avatar img {
/*display: block;
margin: 0 auto;
border-radius: 100%;
box-shadow: 0 0 0 0.8em #cccccc;*/
}

#main .avatar:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: -3em;
width: calc(100% + 6em);
height: 0px;
z-index: -1;
background: #c8cccf;
}

@media screen and (max-width: 480px) {

#main {
min-width: 0;
width: 100%;
padding: 4em 2em 2.5em 2em ;
}

#main .avatar:before {
left: -2em;
width: calc(100% + 4em);
}

}

body.is-loading #main {
opacity: 0;
-moz-transform: rotateX(15deg);
-webkit-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
transform: rotateX(15deg);
}

/* Footer */

#footer {
-moz-align-self: -moz-flex-end;
-webkit-align-self: -webkit-flex-end;
-ms-align-self: -ms-flex-end;
align-self: flex-end;
width: 100%;
padding: 1.5em 0 0 0;
color: rgba(255, 255, 255, 0.75);
cursor: default;
text-align: center;
}

#footer .copyright {
margin: 0;
padding: 0;
font-size: 0.9em;
list-style: none;
}

#footer .copyright li {
display: inline-block;
margin: 0 0 0 0.45em;
padding: 0 0 0 0.85em;
border-left: solid 1px rgba(255, 255, 255, 0.5);
line-height: 1;
}

#footer .copyright li:first-child {
border-left: 0;
}




Nie bardzo wiem co z tym dalej zrobić (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
vokiel
post
Post #10





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

(IMG:style_emoticons/default/closedeyes.gif) Stwórz sobie 2 obrazki dla stanów on i off:
- light_on.png
- light_off.png

Mała uwaga: masz w kodzie 2 razi div z id='srodek'

Jak chcesz możesz sobie przyciski dodatkowo ostylować w CSS.
Gotowiec poniżej:

[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <!--
  3.   Identity by HTML5 UP
  4.   html5up.net | @n33co
  5.   Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  6. -->
  7. <html>
  8. <head>
  9.   <title>AquaPI by Traczu</title>
  10.   <meta charset="utf-8"/>
  11.   <meta name="viewport" content="width=device-width, initial-scale=1"/>
  12.   <!--[if lte IE 8]>
  13.   <script src="assets/js/html5shiv.js"></script><![endif]-->
  14.   <link rel="stylesheet" href="assets/css/main.css"/>
  15.   <!--[if lte IE 9]>
  16.   <link rel="stylesheet" href="assets/css/ie9.css"/><![endif]-->
  17.   <!--[if lte IE 8]>
  18.   <link rel="stylesheet" href="assets/css/ie8.css"/><![endif]-->
  19.   <noscript>
  20.     <link rel="stylesheet" href="assets/css/noscript.css"/>
  21.   </noscript>
  22. </head>
  23. <body class="is-loading">
  24.  
  25. <!-- Wrapper -->
  26. <div id="wrapper">
  27.  
  28.   <!-- Main -->
  29.   <section id="main">
  30.     <header>
  31.       <span class="avatar"><img src="images/aquarium-icon.png" alt=""/></span>
  32.     </header>
  33.  
  34.     <div>
  35.       <div id="lewy">
  36.         <p><img src="images/info_off.png" alt=""/></p>
  37.         <p><img src="images/light_off.png" alt=""/></p>
  38.       </div>
  39.  
  40.       <div id="srodek">
  41.         <p><img src="images/setting_off.png" alt=""/></p>
  42.       </div>
  43.  
  44.       <div id="prawy">
  45.         <p><img src="images/power_off.png" alt=""/></p>
  46.       </div>
  47.  
  48.       <br><br><br>
  49.       <div id="srodek">
  50.  
  51.         <?php
  52.         function sterujPin($zmiana, $stan, &$doButtona, &$doNapisu, &$nowyStan, $ktoraLinia, $ktoryPin) //zmienne sterujace wyladem form
  53.         {
  54.           if ($stan == 0) {
  55.             $doButtona[$ktoraLinia] = "button1";
  56.             $doNapisu[$ktoraLinia] = '<img src="images/light_on.png" />';
  57.             $nowyStan[$ktoraLinia] = 1;
  58.             if ($zmiana == 1) //skrypt powloki wykonuje tyklo wtedy gdy byl wcisniety guzik
  59.             {
  60.               shell_exec('gpio mode ' . $ktoryPin . ' out');
  61.               shell_exec('gpio write ' . $ktoryPin . ' 0');
  62.             }
  63.           } else {
  64.             $doButtona[$ktoraLinia] = "button2";
  65.             $doNapisu[$ktoraLinia] = '<img src="images/light_off.png" />';
  66.             $nowyStan[$ktoraLinia] = 0;
  67.             if ($zmiana == 1) //skrypt powloki wykonuje tyklo wtedy gdy byl wcisniety guzik
  68.             {
  69.               shell_exec('gpio mode ' . $ktoryPin . ' in');
  70.               shell_exec('gpio write ' . $ktoryPin . ' 1');
  71.             }
  72.           }
  73.         }
  74.  
  75.         // *** definicja tablicy z nazwami linii ***
  76.         $nazwyLinii = Array('Światło 1', 'Światło 2', 'CO2', 'Dodatkowe źródło');
  77.         // *** numery pinow zgodne z powyzsza kolejnoscia ***
  78.         $numeryPinow = Array(0, 1, 2, 3);
  79.         // *** liczba linii
  80.         $ileLinii = 4;
  81.         ?>
  82.  
  83.         <?php
  84.         for ($i = 0; $i < $ileLinii; $i++) {
  85.           $stanPinu2[$i] = shell_exec('gpio read ' . $numeryPinow[$i]); //czytam jaki stan pinu
  86.           $czyZmiana = 0; //domyslnie brak wcisnietego guzika
  87.           if (isset($_POST['stan']) && $_POST['linia'] == $i) //warunek przelaczenia - to na tej linii bylo przelaczenie
  88.           {
  89.             $czyZmiana = 1; //przekazuje info do funkcji ze byl wcisniety guzik
  90.             sterujPin($czyZmiana, $_POST['stan'], $jakiButon, $jakiNapis, $doStanu, $_POST['linia'], $numeryPinow[$i]);
  91.           } else {
  92.             sterujPin($czyZmiana, $stanPinu2[$i], $jakiButon, $jakiNapis, $doStanu, $i, $numeryPinow[$i]);
  93.           }
  94.         }
  95.         ?>
  96.         <div>
  97.           <?php
  98.           //w petli generujemy formularze
  99.           for ($i = 0; $i < $ileLinii; $i++) {
  100.             $liczLinia = $i + 1;
  101.             echo '<form action="index.php" method=post class="centruj">
  102.               <fieldset style="width:450px">
  103.                 <legend>' . $nazwyLinii[$i] . '</legend>
  104.                 <button type="submit">' . $jakiNapis[$i] . '</button>
  105.                 <input name="stan" value="' . $doStanu[$i] . '"  type="hidden">
  106.                 <input name="linia" value="' . $i . '"  type="hidden">
  107.                 </fieldset>
  108.               </form>';
  109.           }
  110.           ?>
  111.         </div>
  112.       </div>
  113.     </div>
  114. </div>
  115.  
  116. <!-- Scripts -->
  117. <!--[if lte IE 8]>
  118. <script src="assets/js/respond.min.js"></script><![endif]-->
  119. <script>
  120.   if ('addEventListener' in window) {
  121.     window.addEventListener('load', function () {
  122.       document.body.className = document.body.className.replace(/\bis-loading\b/, '');
  123.     });
  124.     document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
  125.   }
  126. </script>
  127. </body>
  128. </html>
[PHP] pobierz, plaintext


Ten post edytował vokiel 19.01.2016, 10:41:51
Go to the top of the page
+Quote Post
traczu
post
Post #11





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 15.01.2008
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Zeraz załapałem o divie wiedziaęłm ale miaęłm problem jak wyświetlić grafikę.
Piękne dzięki (IMG:style_emoticons/default/oneeyedsmiley02.png)

Teraz tylko drobna kosmetyka nie mogę znaleźć gdzie skasować border tego przycisku

Ten post edytował traczu 21.01.2016, 20:58:43
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 26.09.2025 - 01:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn