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

Dependencies:   SDFileSystem STATIC_COLORS WIZnetInterface mbed

Fork of WIZwiki-W7500_ADC by FOURNET Olivier

Embed: (wiki syntax)

« Back to documentation index

Show/hide line numbers WIZwiki_W7500_Interactivity_js.h Source File

WIZwiki_W7500_Interactivity_js.h

00001 void init_WIZwiki_W7500_Interactivity_JS(void)
00002 {
00003 sprintf(httpHeader,"<link href=\"" __hebergement__ "electronique/e/WIZwiki-W7500/css/WIZwiki-W7500_Interactivity.css\" rel=\"stylesheet\" type=\"text/css\">\r\n");
00004 client.send(httpHeader,strlen(httpHeader));
00005 
00006 sprintf(httpHeader,"<!--[if lte IE 8]><script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "js/flot/excanvas.min.js\"></script><![endif]-->\r\n");
00007 client.send(httpHeader,strlen(httpHeader));
00008 
00009 sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "js/jquery.js\"></script>\r\n");
00010 client.send(httpHeader,strlen(httpHeader));
00011 
00012 sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "js/flot/jquery.flot.js\"></script>\r\n");
00013 client.send(httpHeader,strlen(httpHeader));
00014 /*
00015 sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "electronique/e/WIZwiki-W7500/js/WIZwiki-W7500_Interactivity_fct.js\"></script>");
00016 client.send(httpHeader,strlen(httpHeader));*/
00017 }
00018 
00019 void WIZwiki_W7500_Interactivity_div(void)
00020 {
00021  printf_send_client("<p>\r\n");
00022  printf_send_client("<div id=\"header\"><h2>Interactivity</h2></div>\r\n");
00023  printf_send_client("<div id=\"content\">\r\n");
00024  printf_send_client("<div class=\"demo-container\"><div id=\"placeholder\" class=\"demo-placeholder\"></div></div>\r\n");
00025  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");
00026  printf_send_client("<label><input id=\"enablePosition\" type=\"checkbox\" checked=\"checked\"></input>Show mouse position</label>\r\n");
00027  printf_send_client("<span id=\"hoverdata\"></span>\r\n");
00028  printf_send_client("<span id=\"clickdata\"></span>\r\n");
00029  printf_send_client("</p>\r\n");
00030  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");
00031  printf_send_client("<p><label><input id=\"enableTooltip\" type=\"checkbox\" checked=\"checked\"></input>Enable tooltip</label></p>\r\n");
00032  printf_send_client("</div>\r\n");
00033  printf_send_client("<div id=\"footer\">&nbsp;Copyright &copy; 2007 - 2014 IOLA and Ole Laursen</div>\r\n");
00034  printf_send_client("<p>\r\n");
00035 }
00036 
00037 void WIZwiki_W7500_Interactivity_JS(void)
00038 {
00039 /*
00040 sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "electronique/e/WIZwiki-W7500/js/WIZwiki-W7500_Interactivity_fct.js\"></script>");
00041 client.send(httpHeader,strlen(httpHeader));*/
00042 printf_send_client("<script language=\"javascript\" type=\"text/javascript\">\r\n");
00043 
00044  printf_send_client("$(function() {\r\n");
00045 
00046  printf_send_client("var plot = $.plot(\"#placeholder\",\r\n");
00047  printf_send_client("[\r\n");
00048  printf_send_client("{ data: array_value, label: label_Y, color: color_Y }\r\n");
00049  printf_send_client("],\r\n");
00050  printf_send_client("{\r\n");
00051  printf_send_client("series: {\r\n");
00052  printf_send_client("lines: { show: true },\r\n");
00053  printf_send_client("points: { show: true }\r\n");
00054  printf_send_client("},\r\n");
00055  printf_send_client("grid: { hoverable: true, clickable: true },\r\n");
00056  printf_send_client("xaxis: { min: x_min, max: x_max },\r\n");
00057  printf_send_client("yaxis: { min: y_min, max: y_max }\r\n");
00058  printf_send_client("});\r\n");
00059 
00060  printf_send_client("$(\"<div id='tooltip'></div>\").css({\r\n");
00061  printf_send_client("position: \"absolute\",\r\n");
00062  printf_send_client("border: \"1px solid #fdd\",\r\n");
00063  printf_send_client("padding: \"2px\",\r\n");
00064  printf_send_client("\"background-color\": \"#fee\",\r\n");
00065  printf_send_client("opacity: 0.80\r\n");
00066  printf_send_client("}).appendTo(\"body\");\r\n");
00067 
00068  printf_send_client("$(\"#placeholder\").bind(\"plothover\", function (event, pos, item)\r\n");
00069  printf_send_client("{\r\n");
00070 
00071  printf_send_client("if($(\"#enablePosition:checked\").length > 0)\r\n");
00072  printf_send_client("{\r\n");
00073  printf_send_client("var str = \"(\" + pos.x.toFixed(2) + \", \" + pos.y.toFixed(2) + \")\";\r\n");
00074  printf_send_client("$(\"#hoverdata\").text(str);\r\n");
00075  printf_send_client("}\r\n");
00076 
00077  printf_send_client("if($(\"#enableTooltip:checked\").length > 0)\r\n");
00078  printf_send_client("{\r\n");
00079  printf_send_client("if(item)\r\n");
00080  printf_send_client("{\r\n");
00081  printf_send_client("var x = item.datapoint[0].toFixed(2),\r\n");
00082  printf_send_client("y = item.datapoint[1].toFixed(2);\r\n");
00083 
00084  printf_send_client("$(\"#tooltip\").html(item.series.label + \" of \" + x + \" = \" + y)\r\n");
00085  printf_send_client(".css({top: item.pageY+5, left: item.pageX+5})\r\n");
00086  printf_send_client(".fadeIn(200);\r\n");
00087  printf_send_client("}\r\n");
00088  printf_send_client("else\r\n");
00089  printf_send_client("{\r\n");
00090  printf_send_client("$(\"#tooltip\").hide();\r\n");
00091  printf_send_client("}\r\n");
00092  printf_send_client("}\r\n");
00093  printf_send_client("});\r\n");
00094 
00095  printf_send_client("$(\"#placeholder\").bind(\"plotclick\", function (event, pos, item)\r\n");
00096  printf_send_client("{\r\n");
00097  printf_send_client("if(item)\r\n");
00098  printf_send_client("{\r\n");
00099  printf_send_client("$(\"#clickdata\").text(\" - click point \" + item.dataIndex + \" in \" + item.series.label);\r\n");
00100  printf_send_client("plot.highlight(item.series, item.datapoint);\r\n");
00101  printf_send_client("}\r\n");
00102  printf_send_client("});\r\n");
00103 
00104  printf_send_client("// Add the Flot version string to the footer\r\n");
00105 
00106  printf_send_client("$(\"#footer\").prepend(\"( http://www.flotcharts.org/flot/examples ) Flot \" + $.plot.version + \" &ndash;\");\r\n");
00107  printf_send_client("});\r\n");
00108  
00109  printf_send_client("</script>\r\n");
00110 }