Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4019) - 03 April 2024

Legacy Cumulus 1 release 1.9.4 (build 1099) - 28 November 2014
(a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

Banner.php --> Watch.php. OR WatchGauges.htm???

Other discussion about creating web sites for Cumulus that doesn't have a specific subforum

Moderator: daj

Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by Phil23 »

beteljuice wrote: Sat 12 Oct 2019 12:36 am I just know I'm going to regret this ....
Lol & Secretly love the challenge....
Bit surprised there aren't a couple of other users here with smart watches that are up for a challenge.
Try this in your watch and g page ...

Code: Select all

<div style= "width: 360px; height: 360px; overflow: hidden; border-radius: 50%;">
	<canvas id= "canvas_temp" style= "position: relative; top: -35px; left: -35px; width: 430px; height: 430px;">
	</canvas>
</div>
replaces existing <div class = gauge ......
To make it easier to try various values on the entire page can I make a copy of this section of the css

Code: Select all

.gauge {
  padding: 5px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
And call it say .watchgauge & include what you quoted in there?
Then have <div class = watchgauge.


Phil
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by Phil23 »

Don't know if this explains anything, but will post anyway.

Trying these values;-

Code: Select all

  <div class="row">
    <div class="gauge">
      <div style= "width: 360px; height: 360px; overflow: hidden;">
	  <canvas id= "canvas_temp" style= "position: relative; top: -40px; left: -40px; width: 510px; height: 510px;">
	  </canvas>
	  </div>
	</div>
  </div>
This is what I get on the watch Vs the PC.
Watch.jpg
PC.JPG
Still some border at the top & left & bottom missing.

Interesting that betel's original numbers looked really good on the PC; gauge face was centered in the box.

On the watch though it was in the top left & not filling the screen.
You do not have the required permissions to view the files attached to this post.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by beteljuice »

If you are using class .guage then it has padding, which you do NOT want, you also now have an extra <div> that that the watch 'browser' may put default margin / padding.

Yes - you can replace the inline CSS with a class.

but you only need one <div> to enclose the canvas.

If I understand things correctly this should be a very simple page with next to no styling, and a string of <div>s containing various canvass'
Image
......................Imagine, what you will KNOW tomorrow !
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by Phil23 »

Does this look like the right thing to be having in the CSS?

Code: Select all

.content {
	padding-right: 10%;
	padding-left: 10%;
	margin-right: 15%;
	margin-left: 15%;
}
.watchcontent {
	padding-right: 0%;
	padding-left: 0%;
	margin-right: 0%;
	margin-left: 0%;
}
.row {
  position: relative;
  text-align: center;
}
.gauge {
  padding: 5px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.watchgauge {
  padding: 0px;
  width: 360px; height: 360px; 
  overflow: hidden;
  text-align: center;
}
.gaugeSizeSml {
  width: 181px;
  height: 181px;
}

etc.
But,

I'm not sure where....

style= "position: relative; top: -40px; left: -40px; width: 510px; height: 510px;">

Belongs.
As mentioned before, I'm very vague when it comes to html & css.

Phil.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by beteljuice »

the beteljuice wrote:but you only need one <div> to enclose the canvas.

If I understand things correctly this should be a very simple page with next to no styling, and a string of <div>s containing various canvass'
phil wrote:Interesting that betel's original numbers looked really good ...
Then why change things ?

Try ...

Code: Select all

<!DOCTYPE html>
<html lang="en">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta name="keywords" content="Phil's Backyard weather data, weather, data, weather station, steelseries">
  <title>Phil's Backyard Weather</title>
<!--  <link rel="stylesheet" href="weatherstyle.css">
  <link rel="stylesheet" href="lib/steelseries/css/gauges-ss.css"> -->
  
 <style>
 .mygauge {
	width: 360px; height: 360px; overflow: hidden; border-radius: 50%;
	}
	
 canvas {
	position: relative; top: -35px; left: -35px; width: 430px; height: 430px;"
	}
 </style>
</head>
<body>

    <div class="mygauge">
    	<canvas id= "canvas_temp">
		</canvas>
    </div>
	
    <div class="mygauge">
    	<canvas id= "canvas_dew">
		</canvas>
    </div>
	
	<!-- etc. -->
	
<!-- Google CDN hosted JQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <!-- or... -->
  <!-- Local JQuery library, do not use if your containing page already pulls in a copy of JQuery -->
  <!-- <script src="scripts/jquery-1.8.2.min.js"></script> -->

  <!-- Combined steelseries.js & tween.js -->
  <script src="lib/steelseries/scripts/steelseries_tween.min.js"></script>

  <!-- Once you have customised this scripts to your requirements you should minimise
       and concatenate them into a single file in the same order  as below -->
  <script src="lib/steelseries/scripts/language.min.js"></script>
  <script src="lib/steelseries/scripts/gauges-w.js"></script>

  <!--Optional Wind Rose scripts -->

  <script src="lib/steelseries/scripts/RGraph.common.core.min.js"></script>
  <script src="lib/steelseries/scripts/RGraph.rose.min.js"></script>

</body>
</html>
Try it as is ... don't take bits out / put bits in and then say it doesn't work.
If it works, well and good - if it doesn't you're on your own ...
Image
......................Imagine, what you will KNOW tomorrow !
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by Phil23 »

Starting to wonder if the background image is giving me grief, given that it's 600x450 pixels & fixed.

Is it possible to eliminate it inline; so it's still on my regular page but not on the watch version.

Currently just trying to get it to display right with no zooming & letting the Bezels (Frames) be displayed;
Then try & deal with that later.

PITA is the fact that the watch is a bit random on it's page refresh.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by Phil23 »

Still Struggling to get to the end results with sizing etc.

Noticed this in Developer View & thought I was dislexic for a bit; 306 not 360! WTF????

Code: Select all

<div class="row">
    <div class="gauge">
        <canvas id="canvas_temp" class="gaugeSizeWch" width="306" height="306" style="width: 306px; height: 306px; box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 4px; border-radius: 153px;"></canvas>
    </div>
  </div>
  
Turned out to be Scaling Stuff in the JS.
Lines 42 & 356 on-wards.....

Code: Select all

            gaugeMobileScaling : 0.85,                   //scaling factor to apply when displaying the gauges mobile devices, set to 1 to disable (default 0.85)
..
..

            // Are we running on a phone device (or really low res screen)?
            if ($(window).width() < 480) {
                // Change the gauge scaling
                config.gaugeScaling = config.gaugeMobileScaling;
                // Switch off graphs?
                config.showPopupGraphs = config.mobileShowGraphs;
            } else {
                config.gaugeScaling = 1;
            }
Made the changes in gauges-w.js, not the one that runs the normal site.

Getting closer.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by beteljuice »

Didn't bother reading / trying viewtopic.php?f=14&t=17610&start=15#p136023 then ?
Image
......................Imagine, what you will KNOW tomorrow !
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by Phil23 »

beteljuice wrote: Wed 16 Oct 2019 4:59 am Didn't bother reading / trying viewtopic.php?f=14&t=17610&start=15#p136023 then ?
Yes I did & tried the code with various values, but was hard to get desired results.
How it presents in a narrow browser Window does not seem to correspond with how it appeared on the watch.

So decided I needed to learn to crawl before I walk or run.
Hence gone back to just trying to get a basic column of gauges to work correctly to start with.

Going to ignore the Bezel bit until I get that right to start with, but will try & implement what you mentioned once I get the basic page displaying right.

This is what I'm trying to get rid of on page load or refresh.....
Watch Load.JPG
That needs to then be pinch zoomed down to look like this,
Watch Sized.JPG

That seem to be more challenging than I expected as I can't understand why it gets zoom up on load.
You do not have the required permissions to view the files attached to this post.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by Phil23 »

beteljuice wrote: Wed 16 Oct 2019 4:59 am Didn't bother reading / trying viewtopic.php?f=14&t=17610&start=15#p136023 then ?
Ok,

Just tried that again.

Must have missed something first time around as what I see now is a fairly good result barring some sort of scrolling issue.

Too hard to put in words, so will get a 3rd hand later & put a few seconds up on youtube.


Thanks

Phil.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by beteljuice »

The black bar at the top of your screen seems to be a default margin.

Remove weatherstyles.css from your header (not used) and all the background references you have put everywhere.

Add to <style>body { margin: unset; } </style>

Scrolling with touch devices involves strange things the beteljuice does not understand :?
Image
......................Imagine, what you will KNOW tomorrow !
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by Phil23 »

Will Try & get back to that later betel.

Your version is looking the most compatible at this point.

Just been on the Tangent of work things & why Svr2008R2 doesn't like USB drives with EFi & ExFAT partitions.....

So once I'd tdone tearing my hair out with that I decided to vist banner.php for something different.

Got quite a good result so far with http://weather.inverellit.com/b.php

Needs a complete code & comment tidy & not 100% sure of the fonts & colours,
But it was a pretty painless exercise.
Capture.JPG
The code is nothing new, but might be of interest to some others.

Cheers.

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']    = 360;
$SITE['image_height']   = 360;
#---------------------------------------------------------------------------
$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)
#   pressrend   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 = 18;
    imagettftextbox($im, $size, 0, 0, 10, $white, $font1, $text, $SITE['image_width'], "center");
} else {
    $size = 2;
    imageWriteString($im, $size, $text, $white, "right", 1);
}
// Print Date (top right corner)
$text = ret_value("date");
if ($SITE['usettf'] == "yes" ) {
    $size = 18;
    imagettftextbox($im, $size, 0, 0, 36, $white, $font1, $text, $SITE['image_width'], "center");
} 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");
if ($SITE['usettf'] == "yes" ) {
    $size = 60;
    imagettftextbox($im, $size, 0, 0, 65, $red, $font4, $text, $SITE['image_width'], "center");
} else {
    $size = 5;
    imageWriteString($im, $size, $text, $red, "center", 23);
}

// Print Humitidy and Dewpt Centered
$text = "Hum: " . ret_value("hum") . "% - " . "DewPt: " . ret_value("dew") . '°' . ret_value("tempunit");
if ($SITE['usettf'] == "yes" ) {
    $size = 24;
    imagettftextbox($im, $size, 0, 0, 140, $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 = 20;
    imagettftextbox($im, $size, 0, 0, 180, $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 = 20;
    imagettftextbox($im, $size, 0, 0, 210, $lblue, $font1, $text, $SITE['image_width'], "center");
} else {
    $size = 2;
    imageWriteString($im, $size, $text, $white, "left", 39);
}


// 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 = 20;
    imagettftextbox($im, $size, 0, 0, 240, $white, $font1, $text, $SITE['image_width'], "center");
} else {
    $size = 5;
    imageWriteString($im, $size, $text, $white, "right", 23);
}


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


// 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
############################################################################

You do not have the required permissions to view the files attached to this post.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by beteljuice »

Hey .. it works :clap:
Image
......................Imagine, what you will KNOW tomorrow !
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by Phil23 »

Just noticed the bookmark that was created when I bookmarked the page.

"b.php (360x360)".

With the full url scrolling in small print under it.
Haven't seen any way to edit the bookmarks yet, deleting & creating is the only option.

Sounds like I need to add some sort of header to give the page a name like "PWS" etc.

Phil.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: Banner.php --> Watch.php. OR WatchGauges.htm???

Post by beteljuice »

Sounds like I need to add some sort of header to give the page a name like "PWS" etc.
It's an image ... header only describes image type - anything else will fail !
Image
......................Imagine, what you will KNOW tomorrow !
Post Reply