Page 1 of 1

Kindle.htmT

Posted: Mon 15 Jul 2019 10:29 pm
by Phil23
Hi All,

Don't know how I'd fair creating a page from scratch; html is not quite my thing.

But wondering if anyone can point me to a very basic template page that I could use to view current conditions on my Kindle.
The Kindle's "Experimental Browser" is very basic; mucks up the gauges page & index.htm comes up so so & needs to be zoomed to be clear,
but even then it's just average.

Just want a simple page with current data in a readable font.
Just the ability to pickup the Kindle from the bedside table at 4:00am & satisfy my curiosity.

Thanks

Phil

Edit:-

If someone could write a simple page example with one or two data fields in a table I could probably expand it from there.
That would be really appreciated.

Re: Kindle.htmT

Posted: Tue 16 Jul 2019 12:11 am
by Phil23
Am trying to much around with copies of indexT.htm & weatherstyle.css renamed as kindleT.htm & kindlestyle.css.

Slowly getting results with various changes.
Main issue so far is to fit the tables on the page so I don't need to scroll right to see the numbers in the last column.
That & the fact that I have about a 1cm left margin that I could do without.

If any other kindle users would like to take a look & offer suggestions the work in progress is here.

http://weather.inverellit.com/kindle.htm

Cheers

Phil.

PS, This is what I have in the CSS

Code: Select all

@charset "UTF-8";
body {
	background-color: #FFFFFF;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 14pt;
	color: #000000;
	text-align: left;
}
#content {
	margin-top: 5%;
	margin-right: 20%;
	margin-bottom: 5%;
	margin-left: 20%;
}
h1 {
	font-size: 150%;
	font-weight: bold;
	text-transform: none;
	color: #678090;
	letter-spacing: 0.7em;
	padding-bottom: 1em;
	text-align: left;
}
h2 {
	font-size: 125%;
	font-weight: bold;
	color: #6F9DBE;
	letter-spacing: 0.4em;
	text-transform: none;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
}
a {
	color: #FF6600;
	text-decoration: none;
	font-weight: normal;
}
a:visited {
	text-decoration: none;
	color: #CC6600;
}
a:hover {
	text-decoration: underline overline;
	color: #6F9DBE;
}
a:active {
	text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Arial, Helvetica, sans-serif;
}
.credits {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 70%;
	font-style: italic;
	text-transform: lowercase;
	letter-spacing: 0.3em;
	text-align: right;
}
h3 {
	font-size: 110%;
	font-weight: normal;
	color: #585858;
	letter-spacing: 0.4em;
	text-transform: lowercase;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
}
ul {
	font-size: 75%;
	padding-bottom: 1em;
	padding-top: 1em;
	margin-left: 10%;
	list-style-type: square;
	text-transform: lowercase;
}
li {
	padding-bottom: 0.5em;
}
h2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 90%;
	color: #555555;
	letter-spacing: 0.15em;
	padding-bottom: .2em;
	background-color: #c0cad3;
	text-align: right;
	padding-top: .2em;
	padding-right: 1em;
}
.blockquote {
	background-color: #E7E7DE;
	margin-right: 22%;
}
caption {
	font-size: 95%;
	font-style: normal;
	font-weight: bold;
	letter-spacing: .1em;
	padding-top: 0.5em;
	padding-bottom: 0.25em;
	text-align: left;
}
table {
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.tableseparator_temp {
	font-size: 120%;
	font-weight: 400;
	background-color: #000000;
	color: #FFFFFF;
	padding: .5em;
	letter-spacing: .1em;
}
.tableseparator_rainfall {

	font-size: 120%;
	font-weight: 400;
	background-color: #000000;
	color: #FFFFFF;
	padding: .5em;
	letter-spacing: .1em;
}
.tableseparator_wind{


	font-size: 120%;
	font-weight: 400;
	background-color: #000000;
	color: #FFFFFF;
	padding: .5em;
	letter-spacing: .1em;
}
.tableseparator_pressure {



	font-size: 120%;
	font-weight: 400;
	background-color: #000000;
	color: #FFFFFF;
	padding: .5em;
	letter-spacing: .1em;
}
td {
	font-size: 100%;
	padding-top: 0.2em;
	padding-right: 0.5em;
	padding-bottom: 0.2em;
	padding-left: 0.5em;
	color: #222222;
}

.td_thumbnails {
	padding-top: 0.1em;
	padding-right: 0.2em;
	padding-bottom: 0.1em;
	padding-left: 0.0em;
}

.td_temperature_data {
	background-color: #F0F0F0;
}
.td_rainfall_data {

	background-color: #F0F0F0;
}
.td_wind_data {


	background-color: #F0F0F0;
}
.td_pressure_data {



	background-color: #F0F0F0;
}
.td_navigation_bar {
	text-align: center;
	padding-top: 1em;
	padding-bottom: 1em;
	letter-spacing: 0.2em;
	background-color: #ffffff;
}
.labels {
	font-weight: bold;
	background-position: left;
}
.site_data {
	text-align: right;
}
.colon_separator {
	font-weight: 400;
	background-position: left;
}


Re: Kindle.htmT

Posted: Tue 16 Jul 2019 10:05 pm
by Phil23
Have basically ended up with what I want.
Just simple enough to be readable on the Kindle instead of reaching for another device.
Th Kindle's Browser is pretty basic, so nothing flash.

The CSS might need a bit of cleaning up as it still has some leftovers from the original CSS I copied it from.

Anyone who thinks they might find it useful is welcome to it.
Zip file with the CSS & htmT attached below.

Cheers.
KindlePage.JPG

Re: Kindle.htmT

Posted: Tue 16 Jul 2019 10:28 pm
by beteljuice
Thank you for sharing ;)

Re: Kindle.htmT

Posted: Tue 30 Jul 2019 9:13 pm
by Phil23
Just had a really scary thought....

If I was clever & didn't know zero about PHP, It could be written in that & just grab the data from realtime.txt & display that when the page loaded.

Would mean I wouldn't need to upload it in realtime.

Don't think I'll go there.

Re: Kindle.htmT

Posted: Tue 30 Jul 2019 9:23 pm
by beteljuice
Or ......

Javascript (ajax) of which there are many grab routines about (You already have at least one).
Edit: ... can the Kindle work with JS ?
Then the page would update realtime without being 'refreshed'.

.... A project for you :geek:

Re: Kindle.htmT

Posted: Wed 31 Jul 2019 4:05 am
by Phil23
First round of temptation got to me...

Had to go & see if http://weather.inverellit.com/banner.php displayed on the Kindle; it did...

Could try using that as a starting point, but am presuming there is a better way to go about it as banner.php essentially creates a png graphic, as opposed to putting text on a page.

Re: Kindle.htmT

Posted: Wed 31 Jul 2019 2:44 pm
by beteljuice
you wrote:... as banner.php essentially creates a png graphic, as opposed to putting text on a page.
Not the friendliest or now most complete grab routine, but it will do to play with ;)

Rethink .. banner.php essentially puts text into a graphic.

... your html 'template' becomes php with the 'grab' part, then 'echo' values from grab instead of <#wbtag>.

Plenty of examples in your main site .. - do you have cu-tags.php or whatever it's called ? - you wouldn't need the grab routine because its already been done ! - just 'include' and 'echo' :geek:

Re: Kindle.htmT

Posted: Sun 07 Jun 2020 9:53 pm
by Phil23
Current versions of both pages in relation to a cross referencing post.

http://w.inverellit.com/kindle.htm
&
http://w.inverellit.com/k.php

I know it's not ideal & it is still work in progress (particularly pressure trend IF statements).
But at least I now have 2 Kindle viewable pages I can view without getting out of bed......

Cheers

Phil.

Edit:- the PHP pages requires the Sandoval.ttf to be loaded on the website.
https://www.dafont.com/sandoval.font


kindleT.htm

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="<#location> weather data" />
<meta name="keywords" content="Cumulus, <#location> weather data, weather, data, weather station" />
<title><#location> weather</title>
<link href="kindlestyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="content">
<h1><a href="index.htm">Phil's Weather</a></h1>
<p><b>Forecast:</b> <#forecast></p>
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
  <caption>Conditions at local time <#time></caption>
  <tr>
    <td colspan="4" class="tableseparator">Temperature and Humidity </td>
  </tr>
  <tr class="td_data">
    <td class="labels">Temperature</td>
    <td><#temp>&nbsp;<#tempunit></td>
    <td class="labels">Humidity</td>
    <td><#hum>%</td>
  </tr>
  <tr class="td_data">
    <td class="labels">Change/Hour</td>
    <td><#TempChangeLastHour>&nbsp;<#tempunit></td>
    <td class="labels">Dew&nbsp;Point </td>
    <td><#dew>&nbsp;<#tempunit></td>
  </tr>
  <tr class="td_data">
    <td class="labels">Minimum</td>
    <td><#tempTL>&nbsp;<#tempunit></td>
    <td class="labels">Evapotrans</td>
    <td><#ET>&nbsp;<#rainunit></td>
  </tr>
  <!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment -->
  <tr class="td_data">
    <td class="labels">Maximum</td>
    <td><#tempTH>&nbsp;<#tempunit></td>
    <td class="labels">Solar</td>
    <td><#SolarRad>&nbsp;W/m&sup2;</td>
  </tr>
  <!-- End of solar data -->
  <tr class="td_data">
    <td class="labels">Apparent</td>
    <td><#apptemp>&nbsp;<#tempunit></td>
    <td class="labels">THW Index</td>
    <td><#THWindex></td>
  </tr>
  <tr>
    <td colspan="4" class="tableseparator">Rainfall</td>
  </tr>
  <tr class="td_data">
    <td class="labels">Rainfall&nbsp;Today</td>
    <td><#rfall>&nbsp;<#rainunit></td>
    <td class="labels">Rainfall&nbsp;Rate</td>
    <td><#rrate>&nbsp;<#rainunit>/hr</td>
  </tr>
  <tr class="td_data">
    <td class="labels">Last Hour</td>
    <td><#rhour>&nbsp;<#rainunit></td>
    <td class="labels">This&nbsp;Month</td>
    <td><#rmonth>&nbsp;<#rainunit></td>
  </tr>
  <tr class="td_data">
    <td class="labels">Since&nbsp;Midnight</td>
    <td><#rmidnight>&nbsp;<#rainunit></td>
    <td class="labels">This&nbsp;Year</td>
    <td><#ryear>&nbsp;<#rainunit></td>
  </tr>
  <tr class="td_data">
    <td class="labels">Last&nbsp;24&nbsp;Hours</td>
    <td><#r24hour>&nbsp;<#rainunit></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td colspan="4" class="tableseparator">Wind</td>
  </tr>
  <tr class="td_data">
    <td class="labels">Average</td>
    <td><#wspeed>&nbsp;<#windunit></td>
    <td class="labels">Hi&nbsp;Average</td>
    <td><#windTM>&nbsp;<#windunit>&nbsp;@&nbsp;<#TwindTM></td>
  </tr>
  <tr class="td_data">
    <td class="labels">Gusts</td>
    <td><#wgust>&nbsp;<#windunit></td>
    <td class="labels">Hi&nbsp;Gusts</td>
    <td><#wgustTM>&nbsp;<#windunit>&nbsp;@&nbsp;<#TwgustTM></td>
  </tr>
  <tr class="td_data">
    <td class="labels">Bearing</td>
    <td><#avgbearing>&deg; <#wdir></td>
    <td class="labels">Wind Run</td>
    <td><#windrun>&nbsp;<#windrununit></td>
  </tr>
  <tr>
    <td colspan="4" class="tableseparator">Pressure</td>
  </tr>
  <tr class="td_data">
    <td class="labels">Barometer&nbsp;</td>
    <td><#press>&nbsp;<#pressunit></td>
    <td class="labels"><#presstrend></td>
    <td><#presstrendval>&nbsp;<#pressunit>/hr</td>
  </tr>
  <tr>
  <tr>
    <td colspan="4" class="tableseparator">Sun & Moon</td>
  </tr>
</table>
<!-- Almanac -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
  <tbody>
  <tr class="td_data">
    <td class="labels">Dawn:</td>
    <td class="site_data" style="text-align: left;"><#dawn></td>
    <td class="labels">Sunrise:</td>
    <td class="site_data" style="text-align: left;"><#sunrise></td>
    <td class="labels">Moonrise:</td>
    <td class="site_data" style="text-align: left;"><#moonrise></td>
  </tr>
  <tr class="td_data">
    <td class="labels">Dusk:</td>
     <td class="site_data" style="text-align: left;"><#dusk></td>
    <td class="labels">Sunset:&nbsp;</td>
    <td class="site_data" style="text-align: left;"><#sunset></td>
    <td class="labels">Moonset:</td>
    <td class="site_data" style="text-align: left;"><#moonset></td>
  </tr>
  <tr class="td_data">
    <td class="labels">Daylight:</td>
    <td class="site_data" style="text-align: left;"><#daylightlength></td>
    <td class="labels">Length:</td>
    <td class="site_data" style="text-align: left;"><#daylength></td>
    <td class="labels">Phase:</td>
    <td class="site_data" style="text-align: left;"><#moonphase></td>
  </tr>
</tbody>
</table>
<!-- END Almanac -->


</div>
</body>
</html>
PHP Version,

Code: Select all

<?php
############################################################################
# A Project of TNET Services, Inc.
############################################################################
#
#   Project:    Cumulus Project 
#   Package:    Cumulus Weather Banner
#   Module:     banner.php
#   Version:    3.0 - October 19th, 2008
#   Purpose:    Outputs a plain weather graphic based upon
#               the Cumulus realtime.txt file
#   Authors:    Kevin W. Reed <programs@tnet.com>
#               TNET Services, Inc.
#   Copyright:  (c) 1992-2008 Copyright TNET Services, Inc.
#
#   License:    
#
#   This program is free software; you can redistribute it and/or
#   modify it under the terms of the GNU General Public License
#   as published by the Free Software Foundation; either version 2
#   of the License, or (at your option) any later version.
#   
#   This program is distributed in the hope that it will be useful,
#   but WITHOUT ANY WARRANTY; without even the implied warranty of
#   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#   GNU General Public License for more details.
#   
#   You should have received a copy of the GNU General Public License
#   along with this program; if not, write to the Free Software
#   Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, 
#   USA.
#
############################################################################
#   HISTORY
############################################################################
#
#   1.0 Released Oct 4th 2008 
#       Initial Release
#
#   1.1 Released Oct 5th 2008
#       Added TTF Support
#       Added Check for Rain and if none output No Rain Today
#
#   1.2 Released Oct 5th 2008
#       Corrected ISO Date format, was missing the 20 to make the year
#       a 4 digit value.  Realtime.txt data has it as a 2 digit year
#       value.
#
#   1.3 Released Oct 6th 2008
#       Added new field $SITE['dateiso']  If yes, the date is formated
#       in ISO format (YYYY-MM-DD), else it will use a worded month
#       Date (Oct 6 2008)
#
#   1.4 Released Oct 8th 2008
#       Increased the default size of the Cumulus Version Date line to
#       make it more readable. 
#
#   2.0 Released Oct 9th 2008
#       Reconfigured to use new write functions that provide right, left
#       center to position the text more accurately
#
#   3.0 Released Oct 19th, 2008
#       Reconfigured to use extended realtime.txt format that was
#       Released with Cumulus 1.8.2 Beta.
#
############################################################################
#   This document uses Tab 4 Settings
############################################################################
$DATA   = array();
$SITE   = array();
############################################################################
# CONFIGURATION INFORMATION
############################################################################
$SITE['version']        = "3.0";
$SITE['hloc']           = "./";
$SITE['datafile']       = "realtime.txt";
$SITE['image_width']    = 1072;
$SITE['image_height']   = 1448;
#---------------------------------------------------------------------------
$SITE['fontdir']        = "fonts/";     # must contain ttf font files!
$SITE['usettf']         = "yes";        # Set to No to use default fonts
#---------------------------------------------------------------------------
$SITE['format']         = "png";        # Options: jpeg  gif  png 
$SITE['dateiso']        = "no";
$SITE['sitename']       = "Phil's Weather";
#---------------------------------------------------------------------------
// Current field names (matches tag fields) used
$SITE['cvalues'] = array(
    "date","time","temp","hum","dew","wspeed","wgust","avgbearing","rrate",
    "rfall","press","wdir","beaufort","windunit","tempunit","pressunit","rainunit",
    "windrun","presstrend","rmonth","ryear","rfallY","intemp","inhum","wchill",
    "temptrendval","tempTH","TtempTH","tempTL","TtempTL",
    "windTM","TwindTM","wgustTM","TwgustTM",
    "pressTH","TpressTH","pressTL","TpressTL",
    "cversion","cbuild");
############################################################################

############################################################################
# SOURCECODE VIEW
############################################################################
if ( isset($_REQUEST['view']) && $_REQUEST['view'] == 'sce' ) {
    $filenameReal = __FILE__;
    $download_size = filesize($filenameReal);
    header('Pragma: public');
    header('Cache-Control: private');
    header('Cache-Control: no-cache, must-revalidate');
    header("Content-type: text/plain");
    header("Accept-Ranges: bytes");
    header("Content-Length: $download_size");
    header('Connection: close');
    readfile($filenameReal);
    exit;
}
############################################################################
# Reference: Cumulus Format of realtime.txt file
############################################################################
#   Field       Pos     Example     Description
#   date        0       18/10/08    date (always dd/mm/yy)
#   time        1       16:03:45    time (always hh:mm:ss)
#   temp        2       8.4         outside temperature
#   hum         3       84          relative humidity
#   dew         4       5.8         dewpoint
#   wspeed      5       24.2        wind speed (average)
#   wgust       6       33.0        wind speed (gust)
#   avgbearing  7       261         wind bearing
#   rrate       8       0.0         current rain rate
#   rfall       9       1.0         rain today
#   press       10      999.7       barometer
#   wdir        11      W           wind direction
#   beaufort    12      6           wind speed (beaufort)
#   windunit    13      mph         wind units
#   tempunit    14      C           temperature units
#   pressunit   15      mb          pressure units
#   rainunit    16      mm          rain units
#   windrun     17      146.6       wind run (today)
#   presstrend  18      +0.1        pressure trend value
#   rmonth      19      85.2        monthly rain
#   ryear       20      588.4       yearly rain
#   rfallY      21      11.6        yesterday's rainfall
#   intemp      22      20.3        inside temperature
#   inhum       23      57          inside humidity
#   wchll       24      3.6         wind chill
#   temptrendval 25     -0.7        temperature trend value
#   tempTH      26      10.9        today's high temp
#   TtempTH     27      12:00       time of today's high temp (hh:mm)
#   tempTL      28      7.8         today's low temp
#   TtempTL     29      14:41       time of today's low temp (hh:mm)
#   windTM      30      37.4        today's high wind speed (average)
#   TwindTM     31      14:38       time of today's hi wind (avg) (hh:mm)
#   wgustTM     32      44.0        today's high wind gust
#   TwgustTM    33      14:28       time of today's high wind gust (hh:mm)
#   pressTH     34      999.8       today's high pressure
#   TpressTH    35      16:01       time of today's high pressure (hh:mm)
#   pressTL     36      998.4       today's low pressure
#   TpressTL    37      12:06       time of today's low pressure (hh:mm)
#   cversion    38      1.8.2       Cumulus version
#   cbuild      39      459         Cumulus build no
############################################################################


// Path to our font file
$font1 = $SITE['fontdir'] . "arialbd.ttf";
$font2 = $SITE['fontdir'] . "arial.ttf";
$font3 = $SITE['fontdir'] . "verdana.ttf";
$font4 = $SITE['fontdir'] . "sandoval.ttf";

// Read data into array
$DATA = get_raw($SITE['hloc'] . $SITE['datafile'],' ');

$months = array ("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug",
    "Sep","Oct","Nov","Dec");

if ( $SITE['dateiso'] == "yes" ) {
    // Fix date to use ISO formatted date
    $DATA[0] = "20" . substr($DATA[0],6,2) . '-' . substr($DATA[0],3,2) . '-' . 
        substr($DATA[0],0,2);
} else {
    // Fix date to use Month formatted date
    $DATA[0] = $months[intval(substr($DATA[0],3,2)) -1 ] . 
        " " . intval(substr($DATA[0],0,2)) . " " .
        "20" . substr($DATA[0],6,2);
}

// Fix time by removing seconds from the field
$DATA[1] = substr($DATA[1],0,5);


// Output the header to let the browser know we are
// sending a graphic file format
header("Content-type: image/" . $SITE['format'] );
$im = @imagecreatetruecolor($SITE['image_width'], $SITE['image_height'])
    or die("Cannot Initialize new GD image stream");
    
// Set colors we want to use...
// first background is a white background
$background_color   = imagecolorallocate($im, 0xE0, 0xE0, 0xE0);
$black              = imagecolorallocate($im, 0x00, 0x00, 0x00);
$white              = imagecolorallocate($im, 0xF0, 0xF0, 0xF0);
$green              = imagecolorallocate($im, 0x00, 0x40, 0x00);
$blue               = imagecolorallocate($im, 0x00, 0x00, 0xff);
$red                = imagecolorallocate($im, 0xff, 0x00, 0x00);
$lblue               = imagecolorallocate($im, 0x80, 0xE8, 0xE8);
$lgreen              = imagecolorallocate($im, 0x40, 0xFF, 0x40);

//$baseimg = imagecreatefromjpeg("background.jpg");

//imagecopy($im,$baseimg,0,0,0,0,$SITE['image_width'], $SITE['image_height']);
//imagedestroy($baseimg);

// Make a Border Around the box
ImageRectangle($im, 0, 0, $SITE['image_width'] -1 , 
    $SITE['image_height'] -1, $white);

// Print Station Name
//$text = $SITE['sitename'];

//if ($SITE['usettf'] == "yes" ) {
//    $size = 11;
//    imagettftextbox($im, $size, 0, 0, 4, $white, $font1, $text, $SITE['image_width'], "left");
//} else {
//    $size = 5;
//    imageWriteString($im, $size, $text, $white, "left", 3);
//}

// Print Time (top right corner)
$text = ret_value("time");
if ($SITE['usettf'] == "yes" ) {
    $size = 36;
    imagettftextbox($im, $size, 0, 0, 10, $white, $font1, $text, $SITE['image_width'], "right");
} else {
    $size = 2;
    imageWriteString($im, $size, $text, $white, "right", 1);
}
// Print Date (top right corner)
$text = ret_value("date");
if ($SITE['usettf'] == "yes" ) {
    $size = 36;
    imagettftextbox($im, $size, 0, 0, 10, $white, $font1, $text, $SITE['image_width'], "left");
} else {
    $size = 2;
    imageWriteString($im, $size, $text, $white, "right", 1);
}


// Print Cumulus version info
//$text = "Cumulus v" . ret_value("cversion") . ' #' . ret_value("cbuild");
//if ($SITE['usettf'] == "yes" ) {
//    $size = 6;
//    imagettftextbox($im, $size, 0, 0, 14, $white, $font3, $text, $SITE['image_width'], "right");
//} else {
//    $size = 2;
//    imageWriteString($im, $size, $text, $white, "right", 11);
//}

// Print Temp
$text = ret_value("temp") . ret_value("tempunit");
//$text = ret_value("temp") . '°' . ret_value("tempunit");
//$text = ret_value("temp") . '&#176;' . ret_value("tempunit");
if ($SITE['usettf'] == "yes" ) {
    $size = 180;
    imagettftextbox($im, $size, 0, 0, 150, $red, $font4, $text, $SITE['image_width'], "center");
} else {
    $size = 5;
    imageWriteString($im, $size, $text, $red, "center", 23);
}

// Print Humitidy Centered
$text = "Humidity. " . ret_value("hum") . "%";
if ($SITE['usettf'] == "yes" ) {
    $size = 64;
    imagettftextbox($im, $size, 0, 0, 350, $lgreen, $font4, $text, $SITE['image_width'], "center");
} else {
    $size = 3;
    imageWriteString($im, $size, $text, $white, "center", 40);
}

// Print Dewpoint Centered
$text = "Dew Point. " . ret_value("dew") . ret_value("tempunit");
if ($SITE['usettf'] == "yes" ) {
    $size = 64;
    imagettftextbox($im, $size, 0, 0, 450, $lgreen, $font4, $text, $SITE['image_width'], "center");
} else {
    $size = 3;
    imageWriteString($im, $size, $text, $white, "center", 40);
}

// Print windspeed
$text = "Wind: " . ret_value("wdir") . " @ " . ret_value("wspeed") . ret_value("windunit");
if ($SITE['usettf'] == "yes" ) {
    $size = 48;
    imagettftextbox($im, $size, 0, 0, 650, $lblue, $font1, $text, $SITE['image_width'], "center");
} else {
    $size = 5;
    imageWriteString($im, $size, $text, $white, "left", 23);
}


// Print Wind gust
$text = "Gust: " . ret_value("wgust") . ret_value("windunit");
if ($SITE['usettf'] == "yes" ) {
    $size = 48;
    imagettftextbox($im, $size, 0, 0, 730, $lblue, $font1, $text, $SITE['image_width'], "center");
} else {
    $size = 2;
    imageWriteString($im, $size, $text, $white, "left", 39);
}

// Print Baro
$text = "Barometer: " . ret_value("press") . ' ' . ret_value("pressunit");
if ($SITE['usettf'] == "yes" ) {
    $size = 48;
    imagettftextbox($im, $size, 0, 0, 850, $white, $font1, $text, $SITE['image_width'], "center");
} else {
    $size = 2;
    imageWriteString($im, $size, $text, $white, "right", 39);
}

// Print Baro Change
$text = "Change: " . ret_value("presstrend") . ' ' . ret_value("pressunit") . '/hour';
if ($SITE['usettf'] == "yes" ) {
    $size = 48;
    imagettftextbox($im, $size, 0, 0, 900, $white, $font1, $text, $SITE['image_width'], "center");
} else {
    $size = 2;
    imageWriteString($im, $size, $text, $white, "right", 39);
}
// Print Baro Trend
if (ret_value("presstrend") > "0.00" ) {
    $text = "Rising";
    $py = 22;
} elseif (ret_value("presstrend") < "-2.00" ) {
    $text = "Falling More than -2.00";
    $py = 25;

} elseif (ret_value("presstrend") < "-1.20" ) {
    $text = "Falling More than -1.20";
    $py = 25;

} elseif (ret_value("presstrend") < "-0.53" ) {
    $text = "Falling More than -0.53";
    $py = 250;
}
  else {
    $text = "Other";
    $py = 25;
}
if ($SITE['usettf'] == "yes" ) {
    $size = 48;
    imagettftextbox($im, $size, 0, 0, 980, $white, $font1, $text, $SITE['image_width'], "center");
} else {
    $size = 5;
    imageWriteString($im, $size, $text, $white, "right", 23);
}

// Print Rain
if (ret_value("rfall") == "0.00" ) {
    $text = "No Rain Today";
    $py = 22;
} else {
    $text = "   Rain: " . ret_value("rfall") . ' ' . ret_value("rainunit");
    $py = 25;
}
if ($SITE['usettf'] == "yes" ) {
    $size = 48;
    imagettftextbox($im, $size, 0, 0, 1050, $white, $font1, $text, $SITE['image_width'], "center");
} else {
    $size = 5;
    imageWriteString($im, $size, $text, $white, "right", 23);
}
// Print Rain Rate
if (ret_value("rrate") == "0.00" ) {
    $text = "Rain Rate Nil";
    $py = 22;
} else {
    $text = "   Rain Rate: " . ret_value("rrate") . ' ' . ret_value("rainunit") . '/hour ';
    $py = 25;
}
if ($SITE['usettf'] == "yes" ) {
    $size = 48;
    imagettftextbox($im, $size, 0, 0, 1130, $white, $font1, $text, $SITE['image_width'], "center");
} else {
    $size = 5;
    imageWriteString($im, $size, $text, $white, "right", 23);
}




// Output the image in the format we are
// setup.

if ($SITE['format'] == "png" ) {
    imagepng($im);
}

if ($SITE['format'] == "jpeg" ) {
    imagejpeg($im); 
}

if ($SITE['format'] == "gif" ) {
    imagegif($im);  
}

// We be done... destroy the image
imagedestroy($im);

exit;

############################################################################
# FUNCTIONS
############################################################################

// Function to read the data file with the
// Delimiter provided

function get_raw( $rawfile , $del ) {
    $rawdata = array();
    $fd = fopen( $rawfile, "r" );
    if ( $fd ) {
        $rawinfo = '';
        while (! feof ( $fd ) ) {
            $rawinfo .= fread( $fd, 8192 );
        }
        fclose($fd);
        $rawdata = explode ( $del, $rawinfo );
    } else {
        $rawdata[0]= -9999;
    }
    return $rawdata;
}


// function outputs a string centered in the image
function center_text ( $image, $size, $string, $y, $color) {
    $px = ((imagesx($image)/2) - ( ImageFontWidth($size) * 
    strlen($string) ) / 2);
    imagestring($image, $size, $px, $y,$string, $color);
}


// Function snarfed off of a PHP forum.  User sk89q

function imagettftextbox(&$image, $size, $angle, $left, $top, $color, 
    $font, $text, $max_width, $align)
{
        $text_lines = explode("\n", $text); // Supports line breaks!
       
        $lines = array();
        $line_widths = array();
       
        $largest_line_height = 0;
       
        foreach($text_lines as $block)
        {
            $current_line = ''; // Reset current line
           
            $words = explode(' ', $block); // Split the text array of single words
           
            $first_word = TRUE;
           
            $last_width = 0;
           
            for($i = 0; $i < count($words); $i++)
            {
                $item = $words[$i];
                $dimensions = imagettfbbox($size, $angle, $font, 
                    $current_line . ($first_word ? '' : ' ') . $item);
                $line_width = $dimensions[2] - $dimensions[0];
                $line_height = $dimensions[1] - $dimensions[7];
               
                if($line_height > $largest_line_height) 
                    $largest_line_height = $line_height;
               
                if($line_width > $max_width && !$first_word)
                {
                    $lines[] = $current_line;
                   
                    $line_widths[] = $last_width ? $last_width : $line_width;
                   
                    /*if($i == count($words))
                    {
                        continue;
                    }*/
                   
                    $current_line = $item;
                }
                else
                {
                    $current_line .= ($first_word ? '' : ' ') . $item;
                }
               
                if($i == count($words) - 1)
                {
                    $lines[] = $current_line;
                   
                    $line_widths[] = $line_width;
                }
               
                $last_width = $line_width;
                   
                $first_word = FALSE;
            }
           
            if($current_line)
            {
                $current_line = $item;
            }
        }
       
        $i = 0;
        foreach($lines as $line)
        {
            if($align == "center")
            {
                $left_offset = ($max_width - $line_widths[$i]) / 2;
            }
            elseif($align == "right")
            {
                $left_offset = ($max_width - $line_widths[$i] - 6);
            }
            if ($align == "left") {
                $left_offset = 5;
            }
            imagettftext($image, $size, $angle, $left + $left_offset, 
                $top + $largest_line_height + ($largest_line_height * $i), 
                $color, $font, $line);
            $i++;
        }
       
        return $largest_line_height * count($lines);
}

// Similar function for use with standard GD fonts.

function imageWriteString(&$img, $font, $text, $color, $position_x = 'center', $position_y = 'center') {
    // initialize internal variables
    $x = null;
    $y = null;

    if($font < 0 || $font > 5){ $font = 0; }
    $num = array(array(4.6, 6),
                 array(4.6, 6),
                 array(5.6, 12),
                 array(6.5, 12),
                 array(7.6, 16),
                 array(8.5, 16));

    $width = ceil(strlen($text) * $num[$font][0]);
    $height = $num[$font][1] + 2;

    // handle position x
    if (is_string($position_x)) {
        switch($position_x) {
            case 'left':
                $position_x = 5;
                break;
            case 'right':
                $position_x = -8;
                break;
            default:
            case 'center':
                $x     = (imagesx($img) - $width - 8) / 2;
                break;
        }
    }
    if (!isset($x)) {
        if(is_numeric($position_x)) {
            if ($position_x >= 0) {
                $x = $position_x; // left
            } else {
                $x = imagesx($img) - $width + $position_x - 8; // right
            }
        } else {
            $x     = (imagesx($img) - $width - 8) / 2; // default / error value: center
        }
    }

    // handle position y
    if (is_string($position_y)) {
        switch($position_y) {
            case 'top':
                $position_y = 5;
                break;
            case 'bottom':
                $position_y = -5;
                break;
            default:
            case 'center':
                $y     = (Imagesy($img) - ($num[$font][1] + 2))/2;
                break;
        }
    }
    if (!isset($y)) {
        if (is_numeric($position_y)) {
            if ($position_y >= 0) {
                $y = $position_y; // top
            } else {
                $y = Imagesy($img) - $height + $position_y; // bottom
            }
        } else {
            $y     = (Imagesy($img) - ($num[$font][1] + 2))/2; // default / error value: center
        }
    }
    imagestring($img, $font, $x, $y, $text, $color);
}

function ret_value($lookup) {
    global $SITE, $DATA;
    
    $rtn = array_search  ( $lookup  , $SITE['cvalues'] );
    
    if ($rtn !== FALSE) {
        return( $DATA[$rtn] );
    } else {
        return("-");
    }
}

############################################################################
# END OF MODULES
############################################################################

Vertical Positioning in PHP code.

Posted: Fri 12 Jun 2020 11:15 pm
by Phil23
Could someone please explain why vertical positioning of the line with "Change" in it moves up when I shorten that line of text?
Seems like 2 characters is the breaking point.

It's just based on the Banner.php code & is generally working, but this positional thing is a mystery to me & testing sanity.

This is the code snippet, & only thing I see related is the ["image_width'] bit.
Starts at line 318 in the full code attached.

Code: Select all

// Print Baro Change
//$text = "Change: " . ret_value("presstrend") . ' ' . ret_value("pressunit") . '/hour';
$text = "Change: " . ret_value("presstrend") . ' ' . ret_value("pressunit") . '/hour';
if ($SITE['usettf'] == "yes" ) {
    $size = 48;
    imagettftextbox($im, $size, 0, 0, 900, $white, $font1, $text, $SITE['image_width'], "center");
Thanks

Phil.
K1.jpg
K2.jpg