PHP page not loading image until first button press

sparkynerd · December 5, 2013

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>

dungpt29 · December 5, 2013

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.

Edited December 5, 2013 by dungpt29

sparkynerd · December 5, 2013

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...

cyberRobot · December 5, 2013

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.

dungpt29 · December 6, 2013

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); 
 
?>

cyberRobot · December 6, 2013

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").

cyberRobot · December 6, 2013

Also note that the code could be further streamlined by using file_put_contents():

http://php.net/file_put_contents

This function opens, writes to, and closes a file with one function call.

Sign In

PHP page not loading image until first button press

Recommended Posts

sparkynerd

Link to comment

Share on other sites

dungpt29

Link to comment

Share on other sites

sparkynerd

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

dungpt29

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information