client/www/index.html - incubator-flagon-user-ale - Git at Google

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<style>
 		rect {
 			/*fill: None;*/
 			stroke: #aaa;
 		}
 	</style>
 	<title>Hello</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 	<script src="draper.activity_logger-2.1.1.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
 </head>
 <body>
 	<h1>Component #1:</h1>
 	<div id="canvas"></div>
 	<div id="help-info">
 		<p>Mouse over elements to simulate user actions.</p>
 		<p>You should be able to see these coming through real time on the Kibana server.</p>
 		<p>Also, if you open the JavaScript console, you should see the logs going out.</p>
 	</div>
 	<h1>Component #2:</h1>
 	<form border="1px">
 		TestField #1 : <input type="text" id="textfield1"><br><br>
 		TestField #2 : <input type="text" id="textfield2"><br><br>
 		TestField #3 : <input type="text" id="textfield3"><br><br>
 		TestField #4 : <input type="text" id="textfield4"><br><br>
 	</form>

 	<script>
 		var isClick = false;
 		document.addEventListener("mousedown", function() { isClick = true; });
 		document.addEventListener("keydown", function() { isClick = false; });

 		// Handle the change event for a specific Text Field in order for us to log
 		// the change of the Text Field.
 		function onChangeTextFields(e){
 			ac.logUserActivity(ac.LOGGING_ACTIVITY.ALTER, "",
 						   {id: e.srcElement.id,
 						   	type: ac.LOGGING_COMPONENT.TEXTBOX,
 						   	gid: "textbox_group"},
 						   ["textbox", "type", "input"]);
 		};

 		// Handle the focus event of the Text Field in the order to log the event to the
 		// logging server.
 		function onFocusTextFields(e){
 			ac.logUserActivity(ac.LOGGING_ACTIVITY.SELECT, "",
 						   {id: e.srcElement.id,
 						   	type: ac.LOGGING_COMPONENT.TEXTBOX,
 						   	gid: "textbox_group"},
 						   ["textbox", "type", "input"]);
 		};

 		// Handle the blur event of the Text Field in the order to log the event to the
 		// logging server.
 		function onBlurTextFields(e){
 			ac.logUserActivity(ac.LOGGING_ACTIVITY.SELECT, "",
 						   {id: e.srcElement.id,
 						   	type: ac.LOGGING_COMPONENT.TEXTBOX,
 						   	gid: "textbox_group"},
 						   ["textbox", "type", "input"]);
 		}

 		// Loop through and register the functions to the events for each of the
 		// text fields.
 		var fields = ["textfield1", "textfield2", "textfield3", "textfield4"];
 		for (i=0; i < fields.length; i++){
 			el = document.getElementById(fields[i]);
 			el.addEventListener("change", onChangeTextFields);
 			el.addEventListener("focus", onFocusTextFields);
 			el.addEventListener("blur", onBlurTextFields);
 		};

 	// Generate the 2D color graph in order to provide the
 	// example case of hovering and clicking on elements in order
 	// the system to log events to the user.
 	var colors = d3.scale.category10()
 	var svg = d3.select('#canvas').append('svg')
 	.attr({'w': 200, 'h': 200});

 	svg.selectAll('rect')
 	.data(d3.range(400))
 	.enter()
 	.append('rect')
 	.attr({
 		x: function(d) { return d%20*10; },
 		y: function(d) { return Math.floor(d/20)*10; },
 		fill: function(d) { return colors(d%7); },
 		height: 10,
 		width: 10,
 		id: function(d) { return "svg" + d; }
 	})

 	// Generate the OnMouseOver logging events for the SVG elements
 	// that are generated by the for loop of SVG elements.
 	.on('mouseover', function(d) {
 		ac.logUserActivity(ac.LOGGING_ACTIVITY.INSPECT, "rect",
 						   {id: "svg" + d, type: ac.LOGGING_COMPONENT.CANVAS, gid: "colorgrid"},
 						   ["visual", "inspect_demo", "hover", "click"]);
 	})

 	// Generate the Click logging events for the SVG elements
 	// that are generated by the for loop of SVG elements.
 	.on('click', function(d) {
 		ac.logUserActivity(ac.LOGGING_ACTIVITY.SELECT, "rect",
 						   {id: "svg" + d, type: ac.LOGGING_COMPONENT.CANVAS, gid: "colorgrid"},
 						   ["visual", "inspect_demo", "hover", "click"]);
 	})


 	var worker = "draper.activity_worker-2.1.1.js"
 	var ac = new activityLogger(worker)
 	.testing(false) // simulate POST, won't send log
 	.echo(true) // log to console
 	.mute(['SYS']); // don't log SYSTEM actions

 	ac.registerActivityLogger(
 		"http://192.168.86.100",
 		"my-component",
 		"v0.1"
 		);

 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<style>
	rect {
	/fill: None;/
	stroke: #aaa;
	}
	</style>
	<title>Hello</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="draper.activity_logger-2.1.1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
	</head>
	<body>
	<h1>Component #1:</h1>
	<div id="canvas"></div>
	<div id="help-info">
	<p>Mouse over elements to simulate user actions.</p>
	<p>You should be able to see these coming through real time on the Kibana server.</p>
	<p>Also, if you open the JavaScript console, you should see the logs going out.</p>
	</div>
	<h1>Component #2:</h1>
	<form border="1px">
	TestField #1 : <input type="text" id="textfield1"><br><br>
	TestField #2 : <input type="text" id="textfield2"><br><br>
	TestField #3 : <input type="text" id="textfield3"><br><br>
	TestField #4 : <input type="text" id="textfield4"><br><br>
	</form>

	<script>
	var isClick = false;
	document.addEventListener("mousedown", function() { isClick = true; });
	document.addEventListener("keydown", function() { isClick = false; });

	// Handle the change event for a specific Text Field in order for us to log
	// the change of the Text Field.
	function onChangeTextFields(e){
	ac.logUserActivity(ac.LOGGING_ACTIVITY.ALTER, "",
	{id: e.srcElement.id,
	type: ac.LOGGING_COMPONENT.TEXTBOX,
	gid: "textbox_group"},
	["textbox", "type", "input"]);
	};

	// Handle the focus event of the Text Field in the order to log the event to the
	// logging server.
	function onFocusTextFields(e){
	ac.logUserActivity(ac.LOGGING_ACTIVITY.SELECT, "",
	{id: e.srcElement.id,
	type: ac.LOGGING_COMPONENT.TEXTBOX,
	gid: "textbox_group"},
	["textbox", "type", "input"]);
	};

	// Handle the blur event of the Text Field in the order to log the event to the
	// logging server.
	function onBlurTextFields(e){
	ac.logUserActivity(ac.LOGGING_ACTIVITY.SELECT, "",
	{id: e.srcElement.id,
	type: ac.LOGGING_COMPONENT.TEXTBOX,
	gid: "textbox_group"},
	["textbox", "type", "input"]);
	}

	// Loop through and register the functions to the events for each of the
	// text fields.
	var fields = ["textfield1", "textfield2", "textfield3", "textfield4"];
	for (i=0; i < fields.length; i++){
	el = document.getElementById(fields[i]);
	el.addEventListener("change", onChangeTextFields);
	el.addEventListener("focus", onFocusTextFields);
	el.addEventListener("blur", onBlurTextFields);
	};

	// Generate the 2D color graph in order to provide the
	// example case of hovering and clicking on elements in order
	// the system to log events to the user.
	var colors = d3.scale.category10()
	var svg = d3.select('#canvas').append('svg')
	.attr({'w': 200, 'h': 200});

	svg.selectAll('rect')
	.data(d3.range(400))
	.enter()
	.append('rect')
	.attr({
	x: function(d) { return d%20*10; },
	y: function(d) { return Math.floor(d/20)*10; },
	fill: function(d) { return colors(d%7); },
	height: 10,
	width: 10,
	id: function(d) { return "svg" + d; }
	})

	// Generate the OnMouseOver logging events for the SVG elements
	// that are generated by the for loop of SVG elements.
	.on('mouseover', function(d) {
	ac.logUserActivity(ac.LOGGING_ACTIVITY.INSPECT, "rect",
	{id: "svg" + d, type: ac.LOGGING_COMPONENT.CANVAS, gid: "colorgrid"},
	["visual", "inspect_demo", "hover", "click"]);
	})

	// Generate the Click logging events for the SVG elements
	// that are generated by the for loop of SVG elements.
	.on('click', function(d) {
	ac.logUserActivity(ac.LOGGING_ACTIVITY.SELECT, "rect",
	{id: "svg" + d, type: ac.LOGGING_COMPONENT.CANVAS, gid: "colorgrid"},
	["visual", "inspect_demo", "hover", "click"]);
	})


	var worker = "draper.activity_worker-2.1.1.js"
	var ac = new activityLogger(worker)
	.testing(false) // simulate POST, won't send log
	.echo(true) // log to console
	.mute(['SYS']); // don't log SYSTEM actions

	ac.registerActivityLogger(
	"http://192.168.86.100",
	"my-component",
	"v0.1"
	);

	</script>
	</body>
	</html>