Option to change stroke settings in config.php

config.default.php

@@ -91,4 +91,9 @@ $lang = "en";
 $units = "metric";
 //$units = "imperial";
 
+// These need to be copied to config.php
+$strokeWeight = 2;
+$strokeColor = '#FF0000';
+$strokeOpacity = 1.0;
+
 ?>

helpers/config.php

@@ -79,6 +79,10 @@
     // units
     static $units = "metric";
 
+    static $strokeWeight = 2;
+    static $strokeColor = '#ff0000';
+    static $strokeOpacity = 1;
+    
     private static $fileLoaded = false;
 
     private static $initialized = false;
@@ -123,6 +127,9 @@
       if (isset($interval)) { self::$interval = (int) $interval; }
       if (isset($lang)) { self::$lang = $lang; }
       if (isset($units)) { self::$units = $units; }
+      if (isset($strokeWeight)) { self::$strokeWeight = $strokeWeight; }
+      if (isset($strokeColor)) { self::$strokeColor = $strokeColor; }
+      if (isset($strokeOpacity)) { self::$strokeOpacity = $strokeOpacity; }
 
       if (!self::$require_authentication) {
         // tracks must be public if we don't require authentication
@@ -177,4 +184,4 @@
     }
   }
 
-?>
+?>

index.php

@@ -80,6 +80,9 @@
       var admin = <?= json_encode($auth->isAdmin()) ?>;
       var auth = '<?= ($auth->isAuthenticated()) ? $auth->user->login : "null" ?>';
       var pass_regex = <?= uConfig::passRegex() ?>;
+      var strokeWeight = <?= uConfig::$strokeWeight ?>;
+      var strokeColor = '<?= uConfig::$strokeColor ?>';
+      var strokeOpacity = <?= uConfig::$strokeOpacity ?>;
     </script>
     <script type="text/javascript" src="js/main.js"></script>
     <?php if ($auth->isAdmin()): ?>
@@ -218,4 +221,4 @@
     </div>
 
   </body>
-</html>
+</html>

js/api_gmaps.js

@@ -30,9 +30,9 @@ function init() {
   if (gm_error) { return gm_authFailure(); }
   google.maps.visualRefresh = true;
   polyOptions = {
-    strokeColor: '#FF0000',
-    strokeOpacity: 1.0,
-    strokeWeight: 2
+    strokeColor: strokeColor,
+    strokeOpacity: strokeOpacity,
+    strokeWeight: strokeWeight
   }
   mapOptions = {
     center: new google.maps.LatLng(init_latitude, init_longitude),

js/api_openlayers.js

@@ -95,7 +95,7 @@ function displayTrack(xml, update) {
     points.push(point);
   }
   var lineString = new OpenLayers.Geometry.LineString(points);
-  var lineStyle = { strokeColor: '#FF0000', strokeOpacity: 1, strokeWidth: 2 };
+  var lineStyle = { strokeColor: strokeColor, strokeOpacity: strokeOpacity, strokeWidth: strokeWeight };
   var lineFeature = new OpenLayers.Feature.Vector(lineString, null, lineStyle);
   layerTrack.addFeatures([lineFeature]);
   map.addLayer(layerTrack);

js/api_openlayers3.js

@@ -73,8 +73,8 @@ function init() {
   // init layers
   var lineStyle = new ol.style.Style({
     stroke: new ol.style.Stroke({
-      color: 'rgba(255, 0, 0, 0.5)',
-      width: 2
+      color: hexToRGBA(strokeColor, strokeOpacity),
+      width: strokeWeight
     })
   });
   layerTrack = new ol.layer.Vector({

js/main.js

@@ -641,8 +641,13 @@ function htmlEncode(s) {
           .replace(/>/g, '>');
 }
 
+// Convert hex string and opacity to an rgba string
+function hexToRGBA(hex, opacity) {
+  return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(opacity||1).join(',') + ')';
+}
+
 if (!String.prototype.trim) {
   String.prototype.trim = function () {
     return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
   };
-}
+}