WIZwiki-W7500 - 100 sampling alternating sector 50Hz and graphics Flot
Dependencies: SDFileSystem STATIC_COLORS WIZnetInterface mbed
Fork of WIZwiki-W7500_ADC by
WIZwiki_W7500_Interactivity_js.h@3:cc86b144837b, 2016-07-10 (annotated)
- Committer:
- Fo170
- Date:
- Sun Jul 10 00:07:14 2016 +0000
- Revision:
- 3:cc86b144837b
- Parent:
- 2:86f52ca432b8
ajout du favicon
Who changed what in which revision?
User | Revision | Line number | New contents of line |
---|---|---|---|
Fo170 | 2:86f52ca432b8 | 1 | void init_WIZwiki_W7500_Interactivity_JS(void) |
Fo170 | 2:86f52ca432b8 | 2 | { |
Fo170 | 2:86f52ca432b8 | 3 | sprintf(httpHeader,"<link href=\"" __hebergement__ "electronique/e/WIZwiki-W7500/css/WIZwiki-W7500_Interactivity.css\" rel=\"stylesheet\" type=\"text/css\">\r\n"); |
Fo170 | 2:86f52ca432b8 | 4 | client.send(httpHeader,strlen(httpHeader)); |
Fo170 | 2:86f52ca432b8 | 5 | |
Fo170 | 2:86f52ca432b8 | 6 | sprintf(httpHeader,"<!--[if lte IE 8]><script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "js/flot/excanvas.min.js\"></script><![endif]-->\r\n"); |
Fo170 | 2:86f52ca432b8 | 7 | client.send(httpHeader,strlen(httpHeader)); |
Fo170 | 2:86f52ca432b8 | 8 | |
Fo170 | 2:86f52ca432b8 | 9 | sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "js/jquery.js\"></script>\r\n"); |
Fo170 | 2:86f52ca432b8 | 10 | client.send(httpHeader,strlen(httpHeader)); |
Fo170 | 2:86f52ca432b8 | 11 | |
Fo170 | 2:86f52ca432b8 | 12 | sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "js/flot/jquery.flot.js\"></script>\r\n"); |
Fo170 | 2:86f52ca432b8 | 13 | client.send(httpHeader,strlen(httpHeader)); |
Fo170 | 2:86f52ca432b8 | 14 | /* |
Fo170 | 2:86f52ca432b8 | 15 | sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "electronique/e/WIZwiki-W7500/js/WIZwiki-W7500_Interactivity_fct.js\"></script>"); |
Fo170 | 2:86f52ca432b8 | 16 | client.send(httpHeader,strlen(httpHeader));*/ |
Fo170 | 2:86f52ca432b8 | 17 | } |
Fo170 | 2:86f52ca432b8 | 18 | |
Fo170 | 2:86f52ca432b8 | 19 | void WIZwiki_W7500_Interactivity_div(void) |
Fo170 | 2:86f52ca432b8 | 20 | { |
Fo170 | 2:86f52ca432b8 | 21 | printf_send_client("<p>\r\n"); |
Fo170 | 2:86f52ca432b8 | 22 | printf_send_client("<div id=\"header\"><h2>Interactivity</h2></div>\r\n"); |
Fo170 | 2:86f52ca432b8 | 23 | printf_send_client("<div id=\"content\">\r\n"); |
Fo170 | 2:86f52ca432b8 | 24 | printf_send_client("<div class=\"demo-container\"><div id=\"placeholder\" class=\"demo-placeholder\"></div></div>\r\n"); |
Fo170 | 2:86f52ca432b8 | 25 | 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"); |
Fo170 | 2:86f52ca432b8 | 26 | printf_send_client("<label><input id=\"enablePosition\" type=\"checkbox\" checked=\"checked\"></input>Show mouse position</label>\r\n"); |
Fo170 | 2:86f52ca432b8 | 27 | printf_send_client("<span id=\"hoverdata\"></span>\r\n"); |
Fo170 | 2:86f52ca432b8 | 28 | printf_send_client("<span id=\"clickdata\"></span>\r\n"); |
Fo170 | 2:86f52ca432b8 | 29 | printf_send_client("</p>\r\n"); |
Fo170 | 2:86f52ca432b8 | 30 | 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"); |
Fo170 | 2:86f52ca432b8 | 31 | printf_send_client("<p><label><input id=\"enableTooltip\" type=\"checkbox\" checked=\"checked\"></input>Enable tooltip</label></p>\r\n"); |
Fo170 | 2:86f52ca432b8 | 32 | printf_send_client("</div>\r\n"); |
Fo170 | 2:86f52ca432b8 | 33 | printf_send_client("<div id=\"footer\"> Copyright © 2007 - 2014 IOLA and Ole Laursen</div>\r\n"); |
Fo170 | 2:86f52ca432b8 | 34 | printf_send_client("<p>\r\n"); |
Fo170 | 2:86f52ca432b8 | 35 | } |
Fo170 | 2:86f52ca432b8 | 36 | |
Fo170 | 2:86f52ca432b8 | 37 | void WIZwiki_W7500_Interactivity_JS(void) |
Fo170 | 2:86f52ca432b8 | 38 | { |
Fo170 | 2:86f52ca432b8 | 39 | /* |
Fo170 | 2:86f52ca432b8 | 40 | sprintf(httpHeader,"<script language=\"javascript\" type=\"text/javascript\" src=\"" __hebergement__ "electronique/e/WIZwiki-W7500/js/WIZwiki-W7500_Interactivity_fct.js\"></script>"); |
Fo170 | 2:86f52ca432b8 | 41 | client.send(httpHeader,strlen(httpHeader));*/ |
Fo170 | 2:86f52ca432b8 | 42 | printf_send_client("<script language=\"javascript\" type=\"text/javascript\">\r\n"); |
Fo170 | 2:86f52ca432b8 | 43 | |
Fo170 | 2:86f52ca432b8 | 44 | printf_send_client("$(function() {\r\n"); |
Fo170 | 2:86f52ca432b8 | 45 | |
Fo170 | 2:86f52ca432b8 | 46 | printf_send_client("var plot = $.plot(\"#placeholder\",\r\n"); |
Fo170 | 2:86f52ca432b8 | 47 | printf_send_client("[\r\n"); |
Fo170 | 2:86f52ca432b8 | 48 | printf_send_client("{ data: array_value, label: label_Y, color: color_Y }\r\n"); |
Fo170 | 2:86f52ca432b8 | 49 | printf_send_client("],\r\n"); |
Fo170 | 2:86f52ca432b8 | 50 | printf_send_client("{\r\n"); |
Fo170 | 2:86f52ca432b8 | 51 | printf_send_client("series: {\r\n"); |
Fo170 | 2:86f52ca432b8 | 52 | printf_send_client("lines: { show: true },\r\n"); |
Fo170 | 2:86f52ca432b8 | 53 | printf_send_client("points: { show: true }\r\n"); |
Fo170 | 2:86f52ca432b8 | 54 | printf_send_client("},\r\n"); |
Fo170 | 2:86f52ca432b8 | 55 | printf_send_client("grid: { hoverable: true, clickable: true },\r\n"); |
Fo170 | 2:86f52ca432b8 | 56 | printf_send_client("xaxis: { min: x_min, max: x_max },\r\n"); |
Fo170 | 2:86f52ca432b8 | 57 | printf_send_client("yaxis: { min: y_min, max: y_max }\r\n"); |
Fo170 | 2:86f52ca432b8 | 58 | printf_send_client("});\r\n"); |
Fo170 | 2:86f52ca432b8 | 59 | |
Fo170 | 2:86f52ca432b8 | 60 | printf_send_client("$(\"<div id='tooltip'></div>\").css({\r\n"); |
Fo170 | 2:86f52ca432b8 | 61 | printf_send_client("position: \"absolute\",\r\n"); |
Fo170 | 2:86f52ca432b8 | 62 | printf_send_client("border: \"1px solid #fdd\",\r\n"); |
Fo170 | 2:86f52ca432b8 | 63 | printf_send_client("padding: \"2px\",\r\n"); |
Fo170 | 2:86f52ca432b8 | 64 | printf_send_client("\"background-color\": \"#fee\",\r\n"); |
Fo170 | 2:86f52ca432b8 | 65 | printf_send_client("opacity: 0.80\r\n"); |
Fo170 | 2:86f52ca432b8 | 66 | printf_send_client("}).appendTo(\"body\");\r\n"); |
Fo170 | 2:86f52ca432b8 | 67 | |
Fo170 | 2:86f52ca432b8 | 68 | printf_send_client("$(\"#placeholder\").bind(\"plothover\", function (event, pos, item)\r\n"); |
Fo170 | 2:86f52ca432b8 | 69 | printf_send_client("{\r\n"); |
Fo170 | 2:86f52ca432b8 | 70 | |
Fo170 | 2:86f52ca432b8 | 71 | printf_send_client("if($(\"#enablePosition:checked\").length > 0)\r\n"); |
Fo170 | 2:86f52ca432b8 | 72 | printf_send_client("{\r\n"); |
Fo170 | 2:86f52ca432b8 | 73 | printf_send_client("var str = \"(\" + pos.x.toFixed(2) + \", \" + pos.y.toFixed(2) + \")\";\r\n"); |
Fo170 | 2:86f52ca432b8 | 74 | printf_send_client("$(\"#hoverdata\").text(str);\r\n"); |
Fo170 | 2:86f52ca432b8 | 75 | printf_send_client("}\r\n"); |
Fo170 | 2:86f52ca432b8 | 76 | |
Fo170 | 2:86f52ca432b8 | 77 | printf_send_client("if($(\"#enableTooltip:checked\").length > 0)\r\n"); |
Fo170 | 2:86f52ca432b8 | 78 | printf_send_client("{\r\n"); |
Fo170 | 2:86f52ca432b8 | 79 | printf_send_client("if(item)\r\n"); |
Fo170 | 2:86f52ca432b8 | 80 | printf_send_client("{\r\n"); |
Fo170 | 2:86f52ca432b8 | 81 | printf_send_client("var x = item.datapoint[0].toFixed(2),\r\n"); |
Fo170 | 2:86f52ca432b8 | 82 | printf_send_client("y = item.datapoint[1].toFixed(2);\r\n"); |
Fo170 | 2:86f52ca432b8 | 83 | |
Fo170 | 2:86f52ca432b8 | 84 | printf_send_client("$(\"#tooltip\").html(item.series.label + \" of \" + x + \" = \" + y)\r\n"); |
Fo170 | 2:86f52ca432b8 | 85 | printf_send_client(".css({top: item.pageY+5, left: item.pageX+5})\r\n"); |
Fo170 | 2:86f52ca432b8 | 86 | printf_send_client(".fadeIn(200);\r\n"); |
Fo170 | 2:86f52ca432b8 | 87 | printf_send_client("}\r\n"); |
Fo170 | 2:86f52ca432b8 | 88 | printf_send_client("else\r\n"); |
Fo170 | 2:86f52ca432b8 | 89 | printf_send_client("{\r\n"); |
Fo170 | 2:86f52ca432b8 | 90 | printf_send_client("$(\"#tooltip\").hide();\r\n"); |
Fo170 | 2:86f52ca432b8 | 91 | printf_send_client("}\r\n"); |
Fo170 | 2:86f52ca432b8 | 92 | printf_send_client("}\r\n"); |
Fo170 | 2:86f52ca432b8 | 93 | printf_send_client("});\r\n"); |
Fo170 | 2:86f52ca432b8 | 94 | |
Fo170 | 2:86f52ca432b8 | 95 | printf_send_client("$(\"#placeholder\").bind(\"plotclick\", function (event, pos, item)\r\n"); |
Fo170 | 2:86f52ca432b8 | 96 | printf_send_client("{\r\n"); |
Fo170 | 2:86f52ca432b8 | 97 | printf_send_client("if(item)\r\n"); |
Fo170 | 2:86f52ca432b8 | 98 | printf_send_client("{\r\n"); |
Fo170 | 2:86f52ca432b8 | 99 | printf_send_client("$(\"#clickdata\").text(\" - click point \" + item.dataIndex + \" in \" + item.series.label);\r\n"); |
Fo170 | 2:86f52ca432b8 | 100 | printf_send_client("plot.highlight(item.series, item.datapoint);\r\n"); |
Fo170 | 2:86f52ca432b8 | 101 | printf_send_client("}\r\n"); |
Fo170 | 2:86f52ca432b8 | 102 | printf_send_client("});\r\n"); |
Fo170 | 2:86f52ca432b8 | 103 | |
Fo170 | 2:86f52ca432b8 | 104 | printf_send_client("// Add the Flot version string to the footer\r\n"); |
Fo170 | 2:86f52ca432b8 | 105 | |
Fo170 | 2:86f52ca432b8 | 106 | printf_send_client("$(\"#footer\").prepend(\"( http://www.flotcharts.org/flot/examples ) Flot \" + $.plot.version + \" –\");\r\n"); |
Fo170 | 2:86f52ca432b8 | 107 | printf_send_client("});\r\n"); |
Fo170 | 2:86f52ca432b8 | 108 | |
Fo170 | 2:86f52ca432b8 | 109 | printf_send_client("</script>\r\n"); |
Fo170 | 2:86f52ca432b8 | 110 | } |