<commit_before><!DOCTYPE html>

<html>
	<head>
  		<%= stylesheet_link_tag "materialize" %>
  		<%= javascript_include_tag 'materialize' %>
	<script type="text/javascript">		
		/**
		 * Converts an HSL color value to RGB. Conversion formula
		 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
		 * Assumes h, s, and l are contained in the set [0, 1] and
		 * returns r, g, and b in the set [0, 255].
		 *
		 * @param   Number  h       The hue
		 * @param   Number  s       The saturation
		 * @param   Number  l       The lightness
		 * @return  Array           The RGB representation
		 */
		function hslToRgb(h, s, l){
			var r, g, b;

			if(s == 0){
				r = g = b = l; // achromatic
			}else{
				function hue2rgb(p, q, t){
					if(t < 0) t += 1;
					if(t > 1) t -= 1;
					if(t < 1/6) return p + (q - p) * 6 * t;
					if(t < 1/2) return q;
					if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
					return p;
				}

				var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
				var p = 2 * l - q;
				r = hue2rgb(p, q, h + 1/3);
				g = hue2rgb(p, q, h);
				b = hue2rgb(p, q, h - 1/3);
			}

   			return [r * 255, g * 255, b * 255];
		}
		/**
		 * draw() is called first when the body loads, and then on each change of value (hue,bri,sat).
		 * the h,s,l value is taken from each 	
		 */
		function draw(){
			var canvas = document.getElementById("color_shower");
			var ctx = canvas.getContext("2d");
			h = document.getElementById("hue").value/65535;
			s = document.getElementById("sat").value/254;
			l = document.getElementById("bri").value/254;
			if(l>0.8) {
				l = 0.8;
			}else if(l<0.2) {	
				l = 0.2;
			}
			rgb = hslToRgb(h,s,l);
			r = Math.round(rgb[0]);
			g = Math.round(rgb[1]);
			b = Math.round(rgb[2]);
			
			/**
			 * So here we create a half circle and we set the fillStyle to the current color of Hue, Saturation and Brightness level
 			 */
			ctx.beginPath();
			ctx.arc(75,75,70,Math.PI,0,false);
			ctx.closePath();
			ctx.fillStyle= "rgb(" + r + "," + g + "," + b + ")";
			ctx.fill();
			ctx.lineWidth=2;
			ctx.strokeStyle='black';
			ctx.stroke();
				
			//Cone
			ctx.beginPath();
			ctx.moveTo(6,75);
			ctx.lineTo(50,150);
			ctx.lineTo(100,150);
			ctx.lineTo(144,75);
			ctx.closePath();
			ctx.fillStyle="lightgray";
			ctx.fill();
			ctx.stroke();

			//Bottom box
			ctx.beginPath();
			ctx.moveTo(50,150);
			ctx.lineTo(50,190);
			ctx.lineTo(100,190);
			ctx.lineTo(100,150);
			ctx.closePath();
			ctx.fillStyle = "gray";
			ctx.fill();
			ctx.stroke();

			//Bottom line
			ctx.beginPath();
			ctx.moveTo(60, 193);
			ctx.lineTo(90, 193);
			ctx.closePath();
			ctx.lineWidth=3;
			ctx.stroke();

			//Coils
			ctx.beginPath();
			ctx.moveTo(55, 150);
			ctx.lineTo(100, 160);
			ctx.moveTo(50, 160);
			ctx.lineTo(100, 170);
			ctx.moveTo(50, 170);
			ctx.lineTo(100, 180);	
			ctx.moveTo(50, 180);
			ctx.lineTo(100, 190);
			ctx.closePath();
			ctx.lineWidth=1;
			ctx.stroke();

		}
		</script>
	</head>

	<body onload="draw();">
		<div class = "container">
			
			<div class="row">
				<div class = "col s12 cyan" >
					<h1>HUE IT</h1>
				</div>
			</div>

			<div class ="row">
				<div class = "col s3 red">
					MENU

				</div>
				<div class="col s9">
					<div class = "row">
            <table>
              <tr>
                <td>Lampa</td>
                <td>Hue</td>
                <td>Saturation</td>
                <td>On?</td>
                <td>Commands</td>
              </tr>

              <% @lights.each do |light| %>
                <tr>
                  <td><%= light.id %></td>
                  <td><%= light.hue %></td>
                  <td><%= light.sat %></td>
                  <td><%= light.on %></td>
                  <td>
                    <%= link_to "turnOff", controller: "lights", action: "turnOff", id: light.id %>
                    <%= link_to "turnOn", controller: "lights", action: "turnOn", id: light.id %>
                  </td>
                </tr>
              <% end %>
            </table>
					</div>

					<div class="light_picker">
						<%= form_tag(multi_update_lights_path) do %>
							<div class="section">
								<p><%= label_tag("Brightness") %></p>
								<%= range_field_tag :bri, 254, in: 0..254, class: 'update col s8', onchange:"draw();" %>
								<%= text_field_tag :bri, 254, class: 'update col s2' %>
							</div><br><br>

							<div class="section">
								<p><%= label_tag("Hue") %></p>
								<%= range_field_tag :hue, 65535,in: 0..65535, class: 'update col s8', onchange:"draw();" %>
								<%= text_field_tag :hue, 65535, class: 'update col s2' %>
							</div><br><br>
							<div class="section">
								<p><%= label_tag(:sat, "Saturation:") %></p>
								<%= range_field_tag :sat, 254, in: 0..254, class: 'update col s8', onchange:"draw();" %> 
								<%= text_field_tag :sat, 254, class: 'update col s2'%>
							</div><br><br>
							<div class="hubben-pic">
								<% @lights.each_with_index do |light, i| %>
									<div>
										<%= check_box_tag "lights[#{light.id}]", true, true, style: "right: #{40 + i/3 * 60}px; top: #{100 +  i%3 * 50}px" %>
										<%= label_tag nil, nil, for: "lights_#{light.id}", style: "right: #{40 + i/3 * 60}px; top: #{100 +  i%3 * 50}px"%>
									</div>
								<% end %>
							</div>
							<%= submit_tag "Change", :class => "waves-effect btn "  %>
						<% end %>
					</div>
					<canvas id="color_shower" width="300" height="400">
					</canvas>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

<commit_msg>draw() is now called oninput in rangesliders instead of onchange, added onkeypress to text fields<commit_after><!DOCTYPE html>

<html>
	<head>
  		<%= stylesheet_link_tag "materialize" %>
  		<%= javascript_include_tag 'materialize' %>
	<script type="text/javascript">		
		/**
		 * Converts an HSL color value to RGB. Conversion formula
		 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
		 * Assumes h, s, and l are contained in the set [0, 1] and
		 * returns r, g, and b in the set [0, 255].
		 *
		 * @param   Number  h       The hue
		 * @param   Number  s       The saturation
		 * @param   Number  l       The lightness
		 * @return  Array           The RGB representation
		 */
		function hslToRgb(h, s, l){
			var r, g, b;

			if(s == 0){
				r = g = b = l; // achromatic
			}else{
				function hue2rgb(p, q, t){
					if(t < 0) t += 1;
					if(t > 1) t -= 1;
					if(t < 1/6) return p + (q - p) * 6 * t;
					if(t < 1/2) return q;
					if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
					return p;
				}

				var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
				var p = 2 * l - q;
				r = hue2rgb(p, q, h + 1/3);
				g = hue2rgb(p, q, h);
				b = hue2rgb(p, q, h - 1/3);
			}

   			return [r * 255, g * 255, b * 255];
		}
		/**
		 * draw() is called first when the body loads, and then on each change of value (hue,bri,sat).
		 * the h,s,l value is taken from each 	
		 */
		function draw(){
			var canvas = document.getElementById("color_shower");
			var ctx = canvas.getContext("2d");
			h = document.getElementById("hue").value/65535;
			s = document.getElementById("sat").value/254;
			l = document.getElementById("bri").value/254;
			if(l>0.8) {
				l = 0.8;
			}else if(l<0.2) {	
				l = 0.2;
			}
			rgb = hslToRgb(h,s,l);
			r = Math.round(rgb[0]);
			g = Math.round(rgb[1]);
			b = Math.round(rgb[2]);
			
			/**
			 * So here we create a half circle and we set the fillStyle to the current color of Hue, Saturation and Brightness level
 			 */
			ctx.beginPath();
			ctx.arc(75,75,70,Math.PI,0,false);
			ctx.closePath();
			ctx.fillStyle= "rgb(" + r + "," + g + "," + b + ")";
			ctx.fill();
			ctx.lineWidth=2;
			ctx.strokeStyle='black';
			ctx.stroke();
				
			//Cone
			ctx.beginPath();
			ctx.moveTo(6,75);
			ctx.lineTo(50,150);
			ctx.lineTo(100,150);
			ctx.lineTo(144,75);
			ctx.closePath();
			ctx.fillStyle="lightgray";
			ctx.fill();
			ctx.stroke();

			//Bottom box
			ctx.beginPath();
			ctx.moveTo(50,150);
			ctx.lineTo(50,190);
			ctx.lineTo(100,190);
			ctx.lineTo(100,150);
			ctx.closePath();
			ctx.fillStyle = "gray";
			ctx.fill();
			ctx.stroke();

			//Bottom line
			ctx.beginPath();
			ctx.moveTo(60, 193);
			ctx.lineTo(90, 193);
			ctx.closePath();
			ctx.lineWidth=3;
			ctx.stroke();

			//Coils
			ctx.beginPath();
			ctx.moveTo(55, 150);
			ctx.lineTo(100, 160);
			ctx.moveTo(50, 160);
			ctx.lineTo(100, 170);
			ctx.moveTo(50, 170);
			ctx.lineTo(100, 180);	
			ctx.moveTo(50, 180);
			ctx.lineTo(100, 190);
			ctx.closePath();
			ctx.lineWidth=1;
			ctx.stroke();

		}
		</script>
	</head>

	<body onload="draw();">
		<div class = "container">
			
			<div class="row">
				<div class = "col s12 cyan" >
					<h1>HUE IT</h1>
				</div>
			</div>

			<div class ="row">
				<div class = "col s3 red">
					MENU

				</div>
				<div class="col s9">
					<div class = "row">
            <table>
              <tr>
                <td>Lampa</td>
                <td>Hue</td>
                <td>Saturation</td>
                <td>On?</td>
                <td>Commands</td>
              </tr>

              <% @lights.each do |light| %>
                <tr>
                  <td><%= light.id %></td>
                  <td><%= light.hue %></td>
                  <td><%= light.sat %></td>
                  <td><%= light.on %></td>
                  <td>
                    <%= link_to "turnOff", controller: "lights", action: "turnOff", id: light.id %>
                    <%= link_to "turnOn", controller: "lights", action: "turnOn", id: light.id %>
                  </td>
                </tr>
              <% end %>
            </table>
					</div>

					<div class="light_picker">
						<%= form_tag(multi_update_lights_path) do %>
							<div class="section">
								<p><%= label_tag("Brightness") %></p>
								<%= range_field_tag :bri, 254, in: 0..254, class: 'update col s8', oninput:"draw();"%>
								<%= text_field_tag :bri, 254, class: 'update col s2', onkeypress:"draw();"%>
							</div><br><br>

							<div class="section">
								<p><%= label_tag("Hue") %></p>
								<%= range_field_tag :hue, 65535,in: 0..65535, class: 'update col s8', oninput:"draw();" %>
								<%= text_field_tag :hue, 65535, class: 'update col s2', onkeypress:"draw();" %>
							</div><br><br>
							<div class="section">
								<p><%= label_tag(:sat, "Saturation:") %></p>
								<%= range_field_tag :sat, 254, in: 0..254, class: 'update col s8', oninput:"draw();" %> 
								<%= text_field_tag :sat, 254, class: 'update col s2', onkeypress:"draw();" %>
							</div><br><br>
							<div class="hubben-pic">
								<% @lights.each_with_index do |light, i| %>
									<div>
										<%= check_box_tag "lights[#{light.id}]", true, true, style: "right: #{40 + i/3 * 60}px; top: #{100 +  i%3 * 50}px" %>
										<%= label_tag nil, nil, for: "lights_#{light.id}", style: "right: #{40 + i/3 * 60}px; top: #{100 +  i%3 * 50}px"%>
									</div>
								<% end %>
							</div>
							<%= submit_tag "Change", :class => "waves-effect btn "  %>
						<% end %>
					</div>
					<canvas id="color_shower" width="300" height="400">
					</canvas>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>


{'fraction_non_alphanumeric': 0.19304192685102586, 'fraction_numerical': 0.043889384478144514, 'mean_word_length': 2.0226476139121057, 'pattern_counts': {'":': 0, '<': 223, '<?xml version=': 0, '>': 217, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2112051', 'n_tokens_mistral': 5604, 'n_tokens_neox': 4175, 'n_words': 1017}