Jump to content

Archived

This topic is now archived and is closed to further replies.

sparkynerd

PHP page not loading image until first button press

Recommended Posts

I have a simple web page with 2 buttons that change an icon to red or green based on which button is pressed. When the button is pressed, the variable is stored in a text file, and then recalled to display the proper color icon. (When "Power On" is pressed, the icon turns red, and when "Power Off" is pressed, it turns green.)

 

The problem I have is this: When the page is first loaded, the graphic is blank, until a button is pressed, and then the icon displays properly. The text file with the stored variable is always available on the server, but I cant figure out why the page isnt working properly. I know my webpage is probably full of other problems, but I am a real noob, trying to create my home automation webpage...

 

If you are wondering why I am storing the variable in a text file, it was my way of saving this variable, so that another user could open the same webpage at another time, on another computer, and be able to see the correct status icon. if there is a better way (without Java), please let me know!

 

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<?php

/////////////////////////////////////////////////////////////////////////////////////////////

// Check of LED2 is set.  If it is, then use it
if (isset($_POST["LED2"]))
{
$LED2= $_POST["LED2"];
//echo "<b>$LED2</b>";
}
else
{
$LED2 ="";
}
if ($LED2 == "ON")
{
// Set led2 ON by calling the Arduino using fopen
$h = @fopen("http://192.168.5.21/?LED=T", "rb");
$image = "/Graphics/LED_red.bmp";


}
else if ($LED2 == "OFF")
{
// Set led2 OFF by calling the Arduino using fopen
$h= @fopen("http://192.168.5.21/?LED=F", "rb");
$image = "/Graphics/LED_green.bmp";
}

/////////////////////////////////////////////////////////////////////////////////////////////

// set and write data to text file 

{         
$fp = fopen('graphic.txt','w'); 

fwrite($fp,$image); 
}

/////////////////////////////////////////////////////////////////////////////////////////////

// Reading the data from text file
$graphictemp = file_get_contents('graphic.txt'); 
$graphic = ($graphictemp); 

?>


<head>
<style type="text/css">

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; 
	padding: 0;
	text-align: center;
	color: #000000;
}

    .newStyle1 {
	float: left; 
}

    .auto-style1 {
	color: #FFFFFF;
	font-size: 20px;
}

</style>
<title>Audio Control</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>


<form action="" method="post" >

<fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:top; class="newStyle1" style="height: 450px" >
  <legend align="center" class="auto-style1">Amplifier   <img name="LED" src="<?=$graphic?>" width="12" height="12" alt="" style="background-color: #FFFFFF" /></legend>
  <br/>
  <button name="LED2" style="height: 1.8em; width: 10em; font-size: 16px;" value="ON" type="submit">Power On</button>
  <br />
  <br />
  <button name="LED2" style="height: 1.8em; width: 10em; font-size: 16px;" value="OFF" type="submit">Power Off</button>
  <br />
  <br />

</fieldset>


</form>
</body>
</html>

Share this post


Link to post
Share on other sites

I reckon the cause is that you have not processed the case of none of your buttons is pressed yet. In that case $LED2 is an empty string and thereby $image is not defined.

Share this post


Link to post
Share on other sites

That makes sense... so is there a way to process the string that is stored in the text file as soon as the page is loaded the first time? I am trying random things, but no success yet...

Share this post


Link to post
Share on other sites

That makes sense... so is there a way to process the string that is stored in the text file as soon as the page is loaded the first time? I am trying random things, but no success yet...

 

Before running the code that sets $image, you could initialize the variable to whatever the image should be when nothing has been clicked.

Share this post


Link to post
Share on other sites

Hi sparkynerd,

Because you are new to PHP so I will work out a solution that is most suitable to you and is just based on your own code.

First, you need to create a new text file named LED_Status.txt that is in the same folder containing your graphic.txt. This file, just as its name, is specialized in containing the status of your LED that is either ON or OFF. The initial status filled in file should be OFF.

The code to solve your problem should be as the following:

<?php
 
/////////////////////////////////////////////////////////////////////////////////////////////
 
// Check of LED2 is set.  If it is, then use it
if (isset($_POST["LED2"]))
{
$LED2= $_POST["LED2"];
//echo "<b>$LED2</b>";
}
else
{
//$LED2 ="";

// Reading the data from text file
$LED_Status_Temp = file_get_contents('LED_Status.txt'); 
$LED2 = $LED_Status_Temp; // $LED2 is assigned the current status of your LED 
}

if ($LED2 == "ON")
{
// Set led2 ON by calling the Arduino using fopen
$h = @fopen("http://192.168.5.21/?LED=T", "rb");
$image = "/Graphics/LED_red.bmp";

// set and write data to text file 
         
$fp = fopen('LED_Status.txt','w');
fwrite($fp,$LED2); // update current LED status
}

else if ($LED2 == "OFF")
{
// Set led2 OFF by calling the Arduino using fopen
$h= @fopen("http://192.168.5.21/?LED=F", "rb");
$image = "/Graphics/LED_green.bmp";

// set and write data to text file 
         
$fp = fopen('LED_Status.txt','w');  
fwrite($fp,$LED2); // update current LED status

}
 
/////////////////////////////////////////////////////////////////////////////////////////////
 
// set and write data to text file 
 
{         
$fp = fopen('graphic.txt','w'); 
 
fwrite($fp,$image); 
}
 
/////////////////////////////////////////////////////////////////////////////////////////////
 
// Reading the data from text file
$graphictemp = file_get_contents('graphic.txt'); 
$graphic = ($graphictemp); 
 
?>

Share this post


Link to post
Share on other sites

The first bit of code which initializes the on/off state could be streamlined. For example, you could try something like this:

<?php
//INITIALIZE VARIABLES
$validStatus = array('ON', 'OFF');
 
//IF LED2 ISN'T SET OR CONTAINS AN INVALID STATUS, GET STATUS FROM TEXT FILE
if(!isset($_POST['LED2']) || !in_array($_POST['LED2'], $validStatus)) {
     $_POST['LED2'] = file_get_contents('LED_Status.txt');
}
 
if($_POST['LED2'] == 'ON') {
     //perform 'ON' state code 
} elseif ($_POST['LED2'] == 'OFF') {
     //perform 'OFF state code
}
 
//perform the rest of your code
?>
 
Note that the new code is untested. Also, I added a quick check to see if the $_POST variable contains a valid value ("ON" or "OFF").

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.