Change WebColour to a colour selector input and add a random colour icon. Select a random colour on new Monitor creation

web/includes/Monitor.php

@@ -89,7 +89,7 @@ class Monitor extends ZM_Object {
     'DefaultScale'  =>  100,
     'SignalCheckPoints' =>  0,
     'SignalCheckColour' =>  '#0000BE',
-    'WebColour'   =>  'red',
+    'WebColour'   =>  '#ff0000',
     'Exif'    =>  array('type'=>'boolean','default'=>0),
     'Sequence'  =>  null,
     'TotalEvents' =>  array('type'=>'integer', 'default'=>null, 'do_not_update'=>1),

web/includes/functions.php

@@ -2610,12 +2610,12 @@ function html_radio($name, $values, $selected=null, $options=array(), $attrs=arr
   return $html;
 } # end sub html_radio
 
-function random_color_part() {
-    return str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
-}
 
-function random_color() {
-    return random_color_part() . random_color_part() . random_color_part();
+function random_colour() {
+  return '#'.
+    str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT).
+    str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT).
+    str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
 }
 
 ?>

web/skins/classic/views/js/monitor.js

@@ -131,9 +131,36 @@ function initPage() {
   document.querySelectorAll('select[name="newMonitor[ControlId]"]').forEach(function(el) {
     el.onchange = window['loadLocations'].bind(el, el);
   });
+  document.querySelectorAll('input[name="newMonitor[WebColour]"]').forEach(function(el) {
+    el.onchange = window['change_WebColour'].bind(el);
+  });
 
 
   $j('.chosen').chosen();
 } // end function initPage()
 
+function change_WebColour() {
+  $j('#WebSwatch').css(
+    'backgroundColor',
+    $j('input[name="newMonitor[WebColour]"]').val()
+  );
+}
+
+function getRandomColour() {
+  var letters = '0123456789ABCDEF';
+  var colour = '#';
+  for (var i = 0; i < 6; i++) {
+    colour += letters[Math.floor(Math.random() * 16)];
+  }
+  return colour;
+}
+
+function random_WebColour() {
+  var new_colour = getRandomColour();
+  $j('input[name="newMonitor[WebColour]"]').val(new_colour);
+  $j('#WebSwatch').css(
+    'backgroundColor', new_colour
+  );
+}
+
 window.addEventListener('DOMContentLoaded', initPage);

web/skins/classic/views/monitor.php

@@ -54,6 +54,7 @@ if ( !$monitor ) {
     $monitor = new ZM\Monitor();
   } # end if $_REQUEST['dupID']
   $monitor->Name(translate('Monitor').'-'.$nextId);
+  $monitor->WebColour(random_colour());
 } # end if $_REQUEST['mid']
 
 if ( ZM_OPT_X10 && empty($x10Monitor) ) {
@@ -1112,15 +1113,17 @@ if ( canEdit('Control') ) {
         <tr>
           <td><?php echo translate('SignalCheckColour') ?></td>
           <td>
-            <input type="text" name="newMonitor[SignalCheckColour]" value="<?php echo validHtmlStr($monitor->SignalCheckColour()) ?>"/>
+            <input type="color" name="newMonitor[SignalCheckColour]" value="<?php echo validHtmlStr($monitor->SignalCheckColour()) ?>"/>
             <span id="SignalCheckSwatch" class="swatch" style="background-color: <?php echo validHtmlStr($monitor->SignalCheckColour()); ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
           </td>
         </tr>
         <tr>
           <td><?php echo translate('WebColour') ?></td>
           <td>
-            <input type="text" name="newMonitor[WebColour]" value="<?php echo validHtmlStr($monitor->WebColour()) ?>" onchange="$('WebSwatch').setStyle( 'backgroundColor', this.value )"/>
+            <input type="color" name="newMonitor[WebColour]" value="<?php echo validHtmlStr($monitor->WebColour()) ?>"/>
             <span id="WebSwatch" class="swatch" style="background-color: <?php echo validHtmlStr($monitor->WebColour()) ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+            <i class="material-icons" data-on-click="random_WebColour">sync</i> 
+
           </td>
         </tr>
         <tr>