Merge pull request #81 from mrjones-plip/80-user-config-css-fontsize

make time date wind font size configurable

README.md

@@ -132,13 +132,33 @@ on [Dark Sky](https://darksky.net/dev/register) and put that in for the `darksky
 If you want static icons instead of
 animated ones, set 'animate' to `false` instead of `true` like below. Here's a sample:
     ```
+    # edit these two to be your location.  Use one of these if
+    # you need help! https://duckduckgo.com/?q=what's+my+lat+long+finder
     lat,31.775554
     lon,-81.822436
+    
+    # set your darksky API token - should be a 32 char alpa numeric
     darksky,aabbccddeeffgghhiijj112233445566
+    
+    # should we show animated icons for forecast? should be "true" or "false"
     animate,true
+    
+    # label ID map to human name. Format is "labels_" + ID + "," + NAME
     labels_211,In
-    labels_109,Out
-    dataPath,/home/pi/YANPIWS/data/
+    
+    # How many temperatures to show on the screen (tested with 1, 2 or 3 - watch out if you do more!)
+    temp_count,2
+    
+    # CSS font sizes
+    font_time_date_wind,35
+    font_temp,50
+    font_temp_label,25
+    
+    # likely this won't need to change if you're following default install instructions.
+    dataPath,/home/mrjones/Documents/YANPIWS/data/
+    
+    # unless you're deploying a lot of nodes reporting back to a central server, don't touch these ;)
+    # api_password very likely should match servers_0_password unless, again, you know what you're doing ;)
     api_password,boxcar-spinning-problem-rockslide-scored
     servers_0_url,http://127.0.0.1
     servers_0_password,boxcar-spinning-problem-rockslide-scored

config.dist.csv

@@ -16,6 +16,11 @@ labels_109,Out
 # How many temperatures to show on the screen (tested with 1, 2 or 3 - watch out if you do more!)
 temp_count,2
 
+# CSS font sizes
+font_time_date_wind,35
+font_temp,50
+font_temp_label,25
+
 # likely this won't need to change if you're following default install instructions.
 dataPath,/home/pi/YANPIWS/data/
 

html/get_data.php

@@ -14,6 +14,9 @@ function getValidConfigs(){
         'dataPath',
         'api_password',
         'temp_count',
+        'font_time_date_wind',
+        'font_temp',
+        'font_temp_label',
         // we accept these two. listing it here commented out for completeness. see getConfig() below
         // servers_*
         // labels_*
@@ -83,9 +86,33 @@ function configIsValid($validateApi = false)
         $valid['valid'] = false;
         $valid['reason'] .= 'Longitude is invalid. ';
     }
+
+    // for these font sizes ones, lets default to a sane size
+    // and then write and error to the error log. Will make
+    // a much safer upgrade path for Manny ;)
+    if (!isset($YANPIWS['font_time_date_wind'])){
+        $YANPIWS['font_time_date_wind'] = 35;
+    } elseif (!validateFontSize($YANPIWS['font_time_date_wind'])){
+        $valid['valid'] = false;
+        $valid['reason'] .= 'Font size for time/date/wind is invalid. ';
+    }
+    if (!isset($YANPIWS['font_temp'])){
+        $YANPIWS['font_temp'] = 50;
+    } elseif (!validateFontSize($YANPIWS['font_temp'])){
+        $valid['valid'] = false;
+        $valid['reason'] .= 'Font size for temp is invalid. ';
+    }
+    if (!isset($YANPIWS['font_temp_label'])){
+        $YANPIWS['font_temp_label'] = 25;
+    } elseif (!validateFontSize($YANPIWS['font_temp_label'])){
+        $valid['valid'] = false;
+        $valid['reason'] .= 'Font size for temp label is invalid. ';
+    }
+
     if (!isset($YANPIWS['dataPath']) || !is_writable($YANPIWS['dataPath'])){
         $valid['valid'] = false;
-        $valid['reason'] .= 'DataPath does not exist or is not writable. ';}
+        $valid['reason'] .= 'DataPath does not exist or is not writable. ';
+    }
     if ($validateApi){
         $http = curl_init(getDarkSkyUrl(true));
         curl_setopt($http, CURLOPT_NOBODY  , true);
@@ -548,6 +575,16 @@ function validateLatitude($lat) {
 function validateLongitude($long) {
     return preg_match('/^(\+|-)?(?:180(?:(?:\.0{1,6})?)|(?:[0-9]|[1-9][0-9]|1[0-7][0-9])(?:(?:\.[0-9]{1,6})?))$/', $long);
 }
+/**
+ * Validates a given fontsize $font_time_date_wind
+ *
+ * @param int fontSize Font Size (pt)
+ * @return bool `true` if $fontSize is valid, `false` if not
+ */
+function validateFontSize($fontSize) {
+    // thanks https://www.php.net/manual/en/function.is-int.php#82857
+    return(ctype_digit(strval($fontSize)));
+}
 /**
  * Validates a given coordinate
  *

html/index.php

@@ -11,7 +11,7 @@
     <script>var skycons = new Skycons({'color': 'white'});</script>
 </head>
 <body>
-<link rel="stylesheet" type="text/css" href="styles.css?<?php echo $YANPIWS['cache_bust'] ?>" />
+<link rel="stylesheet" type="text/css" href="styles.php?<?php echo $YANPIWS['cache_bust'] ?>" />
 
 <?php
 

html/stats.php

@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 </head>
 <body>
-<link rel="stylesheet" type="text/css" href="styles.css" />
+<link rel="stylesheet" type="text/css" href="styles.php" />
 <?php
 require_once "get_data.php";
 getConfig();

html/styles.css → html/styles.php

@@ -1,3 +1,11 @@
+<?php
+global $YANPIWS;
+require_once 'get_data.php';
+getConfig();
+configIsValid();
+header("Content-type: text/css");
+?>
+
 body {
     margin: 10px;
     padding: 10px;
@@ -40,7 +48,7 @@
 }
 .temp {
     padding-bottom:10px;
-    font-size: 50pt;
+    font-size: <?= $YANPIWS['font_temp']?>pt;
     float: left;
 }
 
@@ -85,12 +93,13 @@
     padding-left:20px;
 }
 .date, .time, .label, .wind_now {
-    font-size:35pt;
+    font-size:<?= $YANPIWS['font_time_date_wind']?>pt;
+    font-weight: bold;
 }
 
 .label {
     text-transform: uppercase;
-    font-size: 25pt;
+    font-size: <?= $YANPIWS['font_temp_label']?>pt;
 }
 .date, .time{
     float: left;

html/temps.php

@@ -3,7 +3,7 @@
 <html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <link rel="stylesheet" type="text/css" href="styles.php" />
     <script src="jquery.3.2.1.slim.min.js" ></script>
     <script src="jquery.jqplot.min.js" ></script>
     <link rel="stylesheet" href="HappyHistogram.min.css">