WIZwiki-W7500 - 100 sampling alternating sector 50Hz and graphics Flot

Dependencies:   SDFileSystem STATIC_COLORS WIZnetInterface mbed

Fork of WIZwiki-W7500_ADC by FOURNET Olivier

WIZwiki_W7500_Interactivity_js.h

Committer:
Fo170
Date:
2016-07-10
Revision:
3:cc86b144837b
Parent:
2:86f52ca432b8

File content as of revision 3:cc86b144837b:

void init_WIZwiki_W7500_Interactivity_JS(void)
{
sprintf(httpHeader,"<link href=\"" __hebergement__ "electronique/e/WIZwiki-W7500/css/WIZwiki-W7500_Interactivity.css\" rel=\"stylesheet\" type=\"text/css\">\r\n");
client.send(httpHeader,strlen(httpHeader));

sprintf(httpHeader,"<!--[if lte IE 8]><script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "js/flot/excanvas.min.js\"></script><![endif]-->\r\n");
client.send(httpHeader,strlen(httpHeader));

sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "js/jquery.js\"></script>\r\n");
client.send(httpHeader,strlen(httpHeader));

sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "js/flot/jquery.flot.js\"></script>\r\n");
client.send(httpHeader,strlen(httpHeader));
/*
sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "electronique/e/WIZwiki-W7500/js/WIZwiki-W7500_Interactivity_fct.js\"></script>");
client.send(httpHeader,strlen(httpHeader));*/
}

void WIZwiki_W7500_Interactivity_div(void)
{
 printf_send_client("<p>\r\n");
 printf_send_client("<div id=\"header\"><h2>Interactivity</h2></div>\r\n");
 printf_send_client("<div id=\"content\">\r\n");
 printf_send_client("<div class=\"demo-container\"><div id=\"placeholder\" class=\"demo-placeholder\"></div></div>\r\n");
 printf_send_client("<p>X : Time (s) , Y : Vmoy (V)<p>One of the goals of Flot is to support user interactions. Try pointing and clicking on the points.</p><p>\r\n");
 printf_send_client("<label><input id=\"enablePosition\" type=\"checkbox\" checked=\"checked\"></input>Show mouse position</label>\r\n");
 printf_send_client("<span id=\"hoverdata\"></span>\r\n");
 printf_send_client("<span id=\"clickdata\"></span>\r\n");
 printf_send_client("</p>\r\n");
 printf_send_client("<p>A tooltip is easy to build with a bit of jQuery code and the data returned from the plot.</p>\r\n");
 printf_send_client("<p><label><input id=\"enableTooltip\" type=\"checkbox\" checked=\"checked\"></input>Enable tooltip</label></p>\r\n");
 printf_send_client("</div>\r\n");
 printf_send_client("<div id=\"footer\">&nbsp;Copyright &copy; 2007 - 2014 IOLA and Ole Laursen</div>\r\n");
 printf_send_client("<p>\r\n");
}

void WIZwiki_W7500_Interactivity_JS(void)
{
/*
sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "electronique/e/WIZwiki-W7500/js/WIZwiki-W7500_Interactivity_fct.js\"></script>");
client.send(httpHeader,strlen(httpHeader));*/
printf_send_client("<script language=\"javascript\" type=\"text/javascript\">\r\n");

 printf_send_client("$(function() {\r\n");

 printf_send_client("var plot = $.plot(\"#placeholder\",\r\n");
 printf_send_client("[\r\n");
 printf_send_client("{ data: array_value, label: label_Y, color: color_Y }\r\n");
 printf_send_client("],\r\n");
 printf_send_client("{\r\n");
 printf_send_client("series: {\r\n");
 printf_send_client("lines: { show: true },\r\n");
 printf_send_client("points: { show: true }\r\n");
 printf_send_client("},\r\n");
 printf_send_client("grid: { hoverable: true, clickable: true },\r\n");
 printf_send_client("xaxis: { min: x_min, max: x_max },\r\n");
 printf_send_client("yaxis: { min: y_min, max: y_max }\r\n");
 printf_send_client("});\r\n");

 printf_send_client("$(\"<div id='tooltip'></div>\").css({\r\n");
 printf_send_client("position: \"absolute\",\r\n");
 printf_send_client("border: \"1px solid #fdd\",\r\n");
 printf_send_client("padding: \"2px\",\r\n");
 printf_send_client("\"background-color\": \"#fee\",\r\n");
 printf_send_client("opacity: 0.80\r\n");
 printf_send_client("}).appendTo(\"body\");\r\n");

 printf_send_client("$(\"#placeholder\").bind(\"plothover\", function (event, pos, item)\r\n");
 printf_send_client("{\r\n");

 printf_send_client("if($(\"#enablePosition:checked\").length > 0)\r\n");
 printf_send_client("{\r\n");
 printf_send_client("var str = \"(\" + pos.x.toFixed(2) + \", \" + pos.y.toFixed(2) + \")\";\r\n");
 printf_send_client("$(\"#hoverdata\").text(str);\r\n");
 printf_send_client("}\r\n");

 printf_send_client("if($(\"#enableTooltip:checked\").length > 0)\r\n");
 printf_send_client("{\r\n");
 printf_send_client("if(item)\r\n");
 printf_send_client("{\r\n");
 printf_send_client("var x = item.datapoint[0].toFixed(2),\r\n");
 printf_send_client("y = item.datapoint[1].toFixed(2);\r\n");

 printf_send_client("$(\"#tooltip\").html(item.series.label + \" of \" + x + \" = \" + y)\r\n");
 printf_send_client(".css({top: item.pageY+5, left: item.pageX+5})\r\n");
 printf_send_client(".fadeIn(200);\r\n");
 printf_send_client("}\r\n");
 printf_send_client("else\r\n");
 printf_send_client("{\r\n");
 printf_send_client("$(\"#tooltip\").hide();\r\n");
 printf_send_client("}\r\n");
 printf_send_client("}\r\n");
 printf_send_client("});\r\n");

 printf_send_client("$(\"#placeholder\").bind(\"plotclick\", function (event, pos, item)\r\n");
 printf_send_client("{\r\n");
 printf_send_client("if(item)\r\n");
 printf_send_client("{\r\n");
 printf_send_client("$(\"#clickdata\").text(\" - click point \" + item.dataIndex + \" in \" + item.series.label);\r\n");
 printf_send_client("plot.highlight(item.series, item.datapoint);\r\n");
 printf_send_client("}\r\n");
 printf_send_client("});\r\n");

 printf_send_client("// Add the Flot version string to the footer\r\n");

 printf_send_client("$(\"#footer\").prepend(\"( http://www.flotcharts.org/flot/examples ) Flot \" + $.plot.version + \" &ndash;\");\r\n");
 printf_send_client("});\r\n");
 
 printf_send_client("</script>\r\n");
}