Jump to content

Setting dynamic background colors via array


Texan78
Go to solution Solved by mac_gyver,

Recommended Posts

Hello, I have a script that displays data from a XML file into a table and it works great. What I want to do is try to set a background color to a table cell based on the report element it gets from the XML file. I have another script I have done this for and it works great. For some reason I can't seem to get it working with this script.

 

Here is a working page of what it should look like. If you look below the map the tables have different backgrounds depending on the report.

 

http://www.mesquiteweather.net/wxsvr.php

 

 

Here is the actual page I am trying to get it to work on and the code I am using below.

 

http://www.mesquiteweather.net/wxspotter.php

<?php
#######################################################################################
#
#  SPOTTER NETWORK STORM REPORTS
#  version 1.00
#
#  This program is free and no license is required.
#
#
#  mesquiteweather.net
#
#######################################################################################

////  SETTINGS  ////


////  SETTINGS  ////

$bkgColor                                       = '#d4d4d4';  // Background color   Examples:  "gray"  "#CCC"   "#CCCCCC"
$bc                                             = '#EEEEEE';  // Background color of table cells
$dtColor                                        = '#FFF';     // Date & time color  Examples:   "#FC0"   "#FFCC00"   "white"
$width                                          = '100%';     // Set the width of the report tables

////  END OF SETTINGS  ////


#######################################################################################

ini_set('display_errors','1');

## Start Configurable data ##

//Set path to data file
$data = "http://www.spotternetwork.org/data.php";

## End Configurable data ##

// overrides from the Carter Lake Settings.php file (if applicable)
global $SITE;
if(isset($SITE['cacheFileDir'])) {$cacheFileDir = $SITE['cacheFileDir']; }
if (isset($SITE['imagesDir']))   {$imagesDir = $SITE['imagesDir'];}
if(isset ($SITE['tz']))          {$ourTZ = $SITE['tz'];}
if(!function_exists('date_default_timezone_set'))
{
    putenv("TZ=" . $ourTZ);
}
else
{
    date_default_timezone_set("$ourTZ");
}

// get path info & protect for cross-site scripting vulnerability
$sri = ($_SERVER['REQUEST_URI']) ? str_replace('#SA', '', htmlspecialchars(strip_tags($_SERVER['REQUEST_URI']))) : '';

// set borders
   $bbrdr = 'border-bottom:thin solid black';       // bottom
   $lbrdr = 'border-left:thin solid black';         // left
   $rbrdr = 'border-right:thin solid black';        // right
   $tbrdr = 'border-top:thin solid black';          // top
   $sbrdr = 'border-right:thin solid black; '.
            'border-left:thin solid black';         // side

//Define table to display after each storm report
$afterTable = "<table style='margin-bottom: 5px;' border='0' cellpadding='0' cellspacing='0' width='100%'><tbody><tr><td><img alt='' src='images/1pixel.gif' border='0' height='7' width='7'></td><td class='shadow-mid' width='100%'><img alt='' src='images/1pixel.gif' border='0' height='7' width='7'></td><td><img alt='' src='images/1pixel.gif' border='0' height='7' width='7'></td></tr><tbody></table>\n";

// Let's assign the table some styles
   $noMessageStyle                              = "width:{$width}; text-align:center; margin:0px auto; background-color:{$bkgColor};";
   $td1Style                                    = "{$tbrdr};{$sbrdr}; padding:2px 0px 2px 6px;  background-image:url({$imagesDir}headerbgd2.gif); color:{$dtColor};";
   $td2Style                                    = "{$sbrdr}; padding:6px 0px 0px 6px;";
   $td3Style                                    = "{$sbrdr}; line-height:5px;";
   $td4Style                                    = "{$sbrdr}; {$bbrdr}; padding: 2px 6px 6px 6px;";


//Set message to display if there were not report
    $noStormMessage                                     .= "<table style='{$noMessageStyle}' cellpadding='0' cellspacing='0'>\n";
    $noStormMessage                                     .= "<tbody>\n";
    $noStormMessage                                     .= "  <tr><td style='{$td1Style}'>LIVE STORM SPOTTER REPORTS</td></tr>\n";
    $noStormMessage                                     .= "  <tr><td style='{$td4Style}'>There are currently no storm reports</td></tr>\n";
    $noStormMessage                                     .= "</tbody>\n";
    $noStormMessage                                     .= "</table>\n";
    $noStormMessage                                     .= $afterTable;

$xml = simplexml_load_file($data);

//Set initial output to false
$tData = false;
foreach($xml->report as $report)
{
    $date        = $report['stamp'];
    $time        = strtotime($date.'UTC');
    $dateInLocal = date("D g:i a", $time);
    $narrative   = $report['narrative'];
    $loc         = $report['city1'];
    $tz          = $report['tz'];

    $stormType = 'Unknown';
    foreach($report->attributes() as $typeKey => $id)
    {
        if($id == 1)
        {
            if(array_key_exists($typeKey, $stormTypesAry))
            {
                $stormType = $stormTypesAry[$typeKey];
            }
            break;
        }
    }

    $stormTypesAry = array(
    'tornado' => 'Tornado',
    'funnelcloud' => 'Funnel Cloud',
    'wallcloud' => 'Wall Cloud',
    'rotation' => 'Rotation',
    'hail' => 'Hail',
    'wind' => 'Wind',
    'flood' => 'Flood',
    'flashflood' => 'Flash Flood'
);

$reportColor = '';

           switch($stormTypesAry)
{
              case 'Tornado':
                    $reportColor = 'rgba(128, 128, 128, 0.4)';
                              break;
              case 'Funnel Cloud':
                    $reportColor = 'rgba(255, 222, 173, 0.4)';
                              break;
              case 'Wall Cloud':
                    $reportColor = 'rgba(255, 20, 147, 0.4)';
                              break;
              case 'Rotation':
                    $reportColor = 'rgba(255, 228, 181, 0.4)';
                              break;
              case 'Hail':
                    $reportColor = 'rgba(255, 255, 0, 0.4)';
                              break;
              case 'Wind':
                    $reportColor = 'rgba(255, 0, 0, 0.4)';
                              break;
              case 'Flash Flood':
                    $reportColor = 'rgba(255, 165, 0, 0.4)';


}

// Set table style
   $tableStyle = "width: 100%; margin:0px auto; background-color:{$bkgColor};";
   $td1Style = "{$tbrdr};{$sbrdr}; padding:2px 0px 2px 6px;  background-image:url({$imagesDir}headerbgd2.gif); color:{$dtColor};";
   $td2Style = "{$sbrdr}; padding:6px 0px 0px 6px; background-color:{$reportColor};";
   $td3Style = "{$sbrdr}; line-height:5px; background-color:{$reportColor};";
   $td4Style = "{$sbrdr}; {$bbrdr}; padding: 2px 6px 6px 6px; background-color:{$reportColor};";


 // construct data for table display
    $tData .= "<table style='{$tableStyle}' cellpadding='0' cellspacing='0'>\n";
    $tData .= "<tbody>\n";
    $tData .= "  <tr><td style='{$td1Style}'><b>{$stormType}</b></td></tr>\n";
    $tData .= "  <tr>\n";
    $tData .= "    <td style='{$td2Style}'>Reported: <b>{$dateInLocal}</b>   -   </b>Location: <b>{$loc}</b></td>\n";
    $tData .= "  </tr>\n";
    $tData .= "  <tr><td style='{$td3Style}'> </td></tr>\n";
    $tData .= "  <tr><td style='{$td4Style}'>Description: <b>{$narrative}</b></td></tr>\n";
    $tData .= "</tbody>\n";
    $tData .= "</table>\n";
    $tData .=  $afterTable;

 }

//If no storms were in the source, set no storm message
if(!$tData)
{
    $tData = $noStormMessage;
}

echo $tData;

?>

It should take this code to assign the colors....

$stormTypesAry = array(
    'tornado' => 'Tornado',
    'funnelcloud' => 'Funnel Cloud',
    'wallcloud' => 'Wall Cloud',
    'rotation' => 'Rotation',
    'hail' => 'Hail',
    'wind' => 'Wind',
    'flood' => 'Flood',
    'flashflood' => 'Flash Flood'
);

$reportColor = '';

           switch($stormTypesAry)
{
              case 'Tornado':
                    $reportColor = 'rgba(128, 128, 128, 0.4)';
                              break;
              case 'Funnel Cloud':
                    $reportColor = 'rgba(255, 222, 173, 0.4)';
                              break;
              case 'Wall Cloud':
                    $reportColor = 'rgba(255, 20, 147, 0.4)';
                              break;
              case 'Rotation':
                    $reportColor = 'rgba(255, 228, 181, 0.4)';
                              break;
              case 'Hail':
                    $reportColor = 'rgba(255, 255, 0, 0.4)';
                              break;
              case 'Wind':
                    $reportColor = 'rgba(255, 0, 0, 0.4)';
                              break;
              case 'Flash Flood':
                    $reportColor = 'rgba(255, 165, 0, 0.4)';


}

Then assign the table color style like so...

$td4Style = "{$sbrdr}; {$bbrdr}; padding: 2px 6px 6px 6px; background-color:{$reportColor};";

What am I missing or overlooking?

 

-Thanks

Edited by Texan78
Link to comment
Share on other sites

Hello, I have a script that displays data from a XML file into a table and it works great. What I want to do is try to set a background color to a table cell based on the report element it gets from the XML file. I have another script I have done this for and it works great. For some reason I can't seem to get it working with this script.

 

Here is a working page of what it should look like. If you look below the map the tables have different backgrounds depending on the report.

 

http://www.mesquiteweather.net/wxsvr.php

 

 

Here is the actual page I am trying to get it to work on and the code I am using below.

 

http://www.mesquiteweather.net/wxspotter.php

<?php
#######################################################################################
#
#  SPOTTER NETWORK STORM REPORTS
#  version 1.00
#
#  This program is free and no license is required.
#
#
#  mesquiteweather.net
#
#######################################################################################

////  SETTINGS  ////


////  SETTINGS  ////

$bkgColor                                       = '#d4d4d4';  // Background color   Examples:  "gray"  "#CCC"   "#CCCCCC"
$bc                                             = '#EEEEEE';  // Background color of table cells
$dtColor                                        = '#FFF';     // Date & time color  Examples:   "#FC0"   "#FFCC00"   "white"
$width                                          = '100%';     // Set the width of the report tables

////  END OF SETTINGS  ////


#######################################################################################

ini_set('display_errors','1');

## Start Configurable data ##

//Set path to data file
$data = "http://www.spotternetwork.org/data.php";

## End Configurable data ##

// overrides from the Carter Lake Settings.php file (if applicable)
global $SITE;
if(isset($SITE['cacheFileDir'])) {$cacheFileDir = $SITE['cacheFileDir']; }
if (isset($SITE['imagesDir']))   {$imagesDir = $SITE['imagesDir'];}
if(isset ($SITE['tz']))          {$ourTZ = $SITE['tz'];}
if(!function_exists('date_default_timezone_set'))
{
    putenv("TZ=" . $ourTZ);
}
else
{
    date_default_timezone_set("$ourTZ");
}

// get path info & protect for cross-site scripting vulnerability
$sri = ($_SERVER['REQUEST_URI']) ? str_replace('#SA', '', htmlspecialchars(strip_tags($_SERVER['REQUEST_URI']))) : '';

// set borders
   $bbrdr = 'border-bottom:thin solid black';       // bottom
   $lbrdr = 'border-left:thin solid black';         // left
   $rbrdr = 'border-right:thin solid black';        // right
   $tbrdr = 'border-top:thin solid black';          // top
   $sbrdr = 'border-right:thin solid black; '.
            'border-left:thin solid black';         // side

//Define table to display after each storm report
$afterTable = "<table style='margin-bottom: 5px;' border='0' cellpadding='0' cellspacing='0' width='100%'><tbody><tr><td><img alt='' src='images/1pixel.gif' border='0' height='7' width='7'></td><td class='shadow-mid' width='100%'><img alt='' src='images/1pixel.gif' border='0' height='7' width='7'></td><td><img alt='' src='images/1pixel.gif' border='0' height='7' width='7'></td></tr><tbody></table>\n";

// Let's assign the table some styles
   $noMessageStyle                              = "width:{$width}; text-align:center; margin:0px auto; background-color:{$bkgColor};";
   $td1Style                                    = "{$tbrdr};{$sbrdr}; padding:2px 0px 2px 6px;  background-image:url({$imagesDir}headerbgd2.gif); color:{$dtColor};";
   $td2Style                                    = "{$sbrdr}; padding:6px 0px 0px 6px;";
   $td3Style                                    = "{$sbrdr}; line-height:5px;";
   $td4Style                                    = "{$sbrdr}; {$bbrdr}; padding: 2px 6px 6px 6px;";


//Set message to display if there were not report
    $noStormMessage                                     .= "<table style='{$noMessageStyle}' cellpadding='0' cellspacing='0'>\n";
    $noStormMessage                                     .= "<tbody>\n";
    $noStormMessage                                     .= "  <tr><td style='{$td1Style}'>LIVE STORM SPOTTER REPORTS</td></tr>\n";
    $noStormMessage                                     .= "  <tr><td style='{$td4Style}'>There are currently no storm reports</td></tr>\n";
    $noStormMessage                                     .= "</tbody>\n";
    $noStormMessage                                     .= "</table>\n";
    $noStormMessage                                     .= $afterTable;

$xml = simplexml_load_file($data);

//Set initial output to false
$tData = false;
foreach($xml->report as $report)
{
    $date        = $report['stamp'];
    $time        = strtotime($date.'UTC');
    $dateInLocal = date("D g:i a", $time);
    $narrative   = $report['narrative'];
    $loc         = $report['city1'];
    $tz          = $report['tz'];

    $stormType = 'Unknown';
    foreach($report->attributes() as $typeKey => $id)
    {
        if($id == 1)
        {
            if(array_key_exists($typeKey, $stormTypesAry))
            {
                $stormType = $stormTypesAry[$typeKey];
            }
            break;
        }
    }

    $stormTypesAry = array(
    'tornado' => 'Tornado',
    'funnelcloud' => 'Funnel Cloud',
    'wallcloud' => 'Wall Cloud',
    'rotation' => 'Rotation',
    'hail' => 'Hail',
    'wind' => 'Wind',
    'flood' => 'Flood',
    'flashflood' => 'Flash Flood'
);

$reportColor = '';

           switch($stormTypesAry)
{
              case 'Tornado':
                    $reportColor = 'rgba(128, 128, 128, 0.4)';
                              break;
              case 'Funnel Cloud':
                    $reportColor = 'rgba(255, 222, 173, 0.4)';
                              break;
              case 'Wall Cloud':
                    $reportColor = 'rgba(255, 20, 147, 0.4)';
                              break;
              case 'Rotation':
                    $reportColor = 'rgba(255, 228, 181, 0.4)';
                              break;
              case 'Hail':
                    $reportColor = 'rgba(255, 255, 0, 0.4)';
                              break;
              case 'Wind':
                    $reportColor = 'rgba(255, 0, 0, 0.4)';
                              break;
              case 'Flash Flood':
                    $reportColor = 'rgba(255, 165, 0, 0.4)';


}

// Set table style
   $tableStyle = "width: 100%; margin:0px auto; background-color:{$bkgColor};";
   $td1Style = "{$tbrdr};{$sbrdr}; padding:2px 0px 2px 6px;  background-image:url({$imagesDir}headerbgd2.gif); color:{$dtColor};";
   $td2Style = "{$sbrdr}; padding:6px 0px 0px 6px; background-color:{$reportColor};";
   $td3Style = "{$sbrdr}; line-height:5px; background-color:{$reportColor};";
   $td4Style = "{$sbrdr}; {$bbrdr}; padding: 2px 6px 6px 6px; background-color:{$reportColor};";


 // construct data for table display
    $tData .= "<table style='{$tableStyle}' cellpadding='0' cellspacing='0'>\n";
    $tData .= "<tbody>\n";
    $tData .= "  <tr><td style='{$td1Style}'><b>{$stormType}</b></td></tr>\n";
    $tData .= "  <tr>\n";
    $tData .= "    <td style='{$td2Style}'>Reported: <b>{$dateInLocal}</b>   -   </b>Location: <b>{$loc}</b></td>\n";
    $tData .= "  </tr>\n";
    $tData .= "  <tr><td style='{$td3Style}'> </td></tr>\n";
    $tData .= "  <tr><td style='{$td4Style}'>Description: <b>{$narrative}</b></td></tr>\n";
    $tData .= "</tbody>\n";
    $tData .= "</table>\n";
    $tData .=  $afterTable;

 }

//If no storms were in the source, set no storm message
if(!$tData)
{
    $tData = $noStormMessage;
}

echo $tData;

?>

It should take this code to assign the colors....

$stormTypesAry = array(
    'tornado' => 'Tornado',
    'funnelcloud' => 'Funnel Cloud',
    'wallcloud' => 'Wall Cloud',
    'rotation' => 'Rotation',
    'hail' => 'Hail',
    'wind' => 'Wind',
    'flood' => 'Flood',
    'flashflood' => 'Flash Flood'
);

$reportColor = '';

           switch($stormTypesAry)
{
              case 'Tornado':
                    $reportColor = 'rgba(128, 128, 128, 0.4)';
                              break;
              case 'Funnel Cloud':
                    $reportColor = 'rgba(255, 222, 173, 0.4)';
                              break;
              case 'Wall Cloud':
                    $reportColor = 'rgba(255, 20, 147, 0.4)';
                              break;
              case 'Rotation':
                    $reportColor = 'rgba(255, 228, 181, 0.4)';
                              break;
              case 'Hail':
                    $reportColor = 'rgba(255, 255, 0, 0.4)';
                              break;
              case 'Wind':
                    $reportColor = 'rgba(255, 0, 0, 0.4)';
                              break;
              case 'Flash Flood':
                    $reportColor = 'rgba(255, 165, 0, 0.4)';


}

Then assign the table color style like so...

$td4Style = "{$sbrdr}; {$bbrdr}; padding: 2px 6px 6px 6px; background-color:{$reportColor};";

What am I missing or overlooking?

 

-Thanks

 

 

I may stand corrected here but at least one issue is that you are trying to pass an entire array to your switch statement, which as far as I am aware isn't possible. A switch usually takes a single value to evaluate against. 

 

So you might want to do a foreach statement and run the switch in a function that can be called on each iteration.

Link to comment
Share on other sites

  • Solution

i have a recommendation for using a switch/case statement to map one value to another, especially since you already have an array that is mapping one value to another.

 

don't use a switch/case statement to map one value to another, just expand your existing array. this will significantly reduce the amount of code and will point out things like missing values (your posted code doesn't handle  the 'flood' value for $typeKey.)

 

your array -

$stormTypesAry['tornado'] = array('name' => 'Tornado', 'color' => 'rgba(128, 128, 128, 0.4)');
$stormTypesAry['funnelcloud'] = array('name' => 'Funnel Cloud', 'color' => 'rgba(255, 222, 173, 0.4)');
$stormTypesAry['wallcloud'] = array('name' => 'Wall Cloud', 'color' => 'rgba(255, 20, 147, 0.4)');
$stormTypesAry['rotation'] = array('name' => 'Rotation', 'color' => 'rgba(255, 228, 181, 0.4)');
$stormTypesAry['hail'] = array('name' => 'Hail', 'color' => 'rgba(255, 255, 0, 0.4)');
$stormTypesAry['wind'] = array('name' => 'Wind', 'color' => 'rgba(255, 0, 0, 0.4)');
$stormTypesAry['flood'] = array('name' => 'Flood', 'color' => 'you don\'t have an entry for this');
$stormTypesAry['flashflood'] = array('name' => 'Flash Flood', 'color' => 'rgba(255, 165, 0, 0.4)');

getting both values at once, without writing line after line of hard coded logic for each value -

// get the stormType and reportColor using the $typeKey
$stormType = $stormTypesAry[$typeKey]['name'];
$reportColor = $stormTypesAry[$typeKey]['color']; // this line takes the place of all the switch/case logic

also, by having less code, it will be easier to see the errors in your logic.

Edited by mac_gyver
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

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