File examples/wsdemo.c changed (mode: 100644) (index cd18486..564d9bd) |
... |
... |
static void trigger(struct Conn *C) |
888 |
888 |
" };\n" |
" };\n" |
889 |
889 |
" ws.send(JSON.stringify(data));\n" |
" ws.send(JSON.stringify(data));\n" |
890 |
890 |
"}\n" |
"}\n" |
|
891 |
|
"window.addEventListener('resize', window.wsdemo.my_resize, true);\n" |
|
892 |
|
"window.wsdemo.my_resize();\n" |
891 |
893 |
"\n" |
"\n" |
892 |
|
"window.wsdemo.source = function(name) {\n" |
|
|
894 |
|
"window.wsdemo.source = function(name, functions) {\n" |
893 |
895 |
" var t;\n" |
" var t;\n" |
894 |
896 |
" var d = document.getElementById(name + '_source');\n" |
" var d = document.getElementById(name + '_source');\n" |
895 |
|
" if (d.innerHTML == '' || d.innerHTML == '<pre></pre>')\n" |
|
896 |
|
" t = window.wsdemo[name + '_update'].toString();\n" |
|
897 |
|
" else\n" |
|
|
897 |
|
" if (d.innerHTML == '') {\n" |
|
898 |
|
" add = '';\n" |
898 |
899 |
" t = '';\n" |
" t = '';\n" |
899 |
|
" d.innerHTML = '<pre>' + t + '</pre>';\n" |
|
900 |
|
"}\n" |
|
901 |
|
"window.addEventListener('resize', window.wsdemo.my_resize, true);\n" |
|
902 |
|
"window.wsdemo.my_resize();\n"; |
|
|
900 |
|
" for (i = 0; i < functions.length; i++) {\n" |
|
901 |
|
" t = t + add + 'Function <b>' + functions[i] + '</b>:'\n" |
|
902 |
|
" + '<pre>' + window.wsdemo[functions[i]].toString() + '</pre>';\n" |
|
903 |
|
" add = '<br />';\n" |
|
904 |
|
" }\n" |
|
905 |
|
" d.innerHTML = t;\n" |
|
906 |
|
" }\n" |
|
907 |
|
"\n" |
|
908 |
|
" // Toggle visibility\n" |
|
909 |
|
" console.log('display=' + d.style.display);\n" |
|
910 |
|
" if (d.style.display == 'block')\n" |
|
911 |
|
" d.style.display = 'none';\n" |
|
912 |
|
" else\n" |
|
913 |
|
" d.style.display = 'block';\n" |
|
914 |
|
"}\n"; |
903 |
915 |
push_code(C, code); |
push_code(C, code); |
904 |
916 |
|
|
905 |
917 |
p->per1_percent = random() % 50; |
p->per1_percent = random() % 50; |
|
... |
... |
static const char main_screen[] = |
932 |
944 |
"<div style=\"margin: 3px; height: 10px; width: 100px; background-color: #eeeeee; border: 1px solid\">\n" |
"<div style=\"margin: 3px; height: 10px; width: 100px; background-color: #eeeeee; border: 1px solid\">\n" |
933 |
945 |
" <div id=\"per1\" style=\"height: 10px; width: 0px; background-color: red\"></div>\n" |
" <div id=\"per1\" style=\"height: 10px; width: 0px; background-color: red\"></div>\n" |
934 |
946 |
"</div>\n" |
"</div>\n" |
935 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('per1');\" value=\"Source\" />\n" |
|
|
947 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('per1', ['per1_update']);\" value=\"Source\" />\n" |
936 |
948 |
"<div class=\"source\" id=\"per1_source\"></div>\n" |
"<div class=\"source\" id=\"per1_source\"></div>\n" |
937 |
949 |
"</div>\n" |
"</div>\n" |
938 |
950 |
"\n" |
"\n" |
|
... |
... |
static const char main_screen[] = |
949 |
961 |
" <rect id=\"per2\" x=\"5\" y=\"5\" width=\"0\" height=\"10\" fill=\"url(#per2_gra1)\" />\n" |
" <rect id=\"per2\" x=\"5\" y=\"5\" width=\"0\" height=\"10\" fill=\"url(#per2_gra1)\" />\n" |
950 |
962 |
" <rect x=\"5\" y=\"5\" width=\"100\" height=\"10\" style=\"fill:transparent; stroke-width:.1; stroke:black\" />\n" |
" <rect x=\"5\" y=\"5\" width=\"100\" height=\"10\" style=\"fill:transparent; stroke-width:.1; stroke:black\" />\n" |
951 |
963 |
"</svg><br />\n" |
"</svg><br />\n" |
952 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('per2');\" value=\"Source\" />\n" |
|
|
964 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('per2', ['per2_update']);\" value=\"Source\" />\n" |
953 |
965 |
"<div class=\"source\" id=\"per2_source\"></div>\n" |
"<div class=\"source\" id=\"per2_source\"></div>\n" |
954 |
966 |
"</div>\n" |
"</div>\n" |
955 |
967 |
"\n" |
"\n" |
|
... |
... |
static const char main_screen[] = |
959 |
971 |
" <g id=\"load1\"></g>\n" |
" <g id=\"load1\"></g>\n" |
960 |
972 |
" <text id=\"load1_text\" x=\"2\" y=\"99\" style=\"font-size: 10px\">Load here</text>\n" |
" <text id=\"load1_text\" x=\"2\" y=\"99\" style=\"font-size: 10px\">Load here</text>\n" |
961 |
973 |
"</svg><br />\n" |
"</svg><br />\n" |
962 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('load1');\" value=\"Source\" />\n" |
|
|
974 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('load1', ['load1_update']);\" value=\"Source\" />\n" |
963 |
975 |
"<div class=\"source\" id=\"load1_source\"></div>\n" |
"<div class=\"source\" id=\"load1_source\"></div>\n" |
964 |
976 |
"<div class=\"note\" width=\"100px\">Note: the width of the SVG is scaled based on" |
"<div class=\"note\" width=\"100px\">Note: the width of the SVG is scaled based on" |
965 |
977 |
" available width, but no more than 100px; previous values are pushed by the server.</div>\n" |
" available width, but no more than 100px; previous values are pushed by the server.</div>\n" |
|
... |
... |
static const char main_screen[] = |
973 |
985 |
" <text id=\"band1_text_up\" x=\"1\" y=\"7\" style=\"font-size: 5pt\"></text>\n" |
" <text id=\"band1_text_up\" x=\"1\" y=\"7\" style=\"font-size: 5pt\"></text>\n" |
974 |
986 |
" <text id=\"band1_text_down\" x=\"1\" y=\"100\" style=\"font-size: 5pt\"></text>\n" |
" <text id=\"band1_text_down\" x=\"1\" y=\"100\" style=\"font-size: 5pt\"></text>\n" |
975 |
987 |
"</svg><br />\n" |
"</svg><br />\n" |
976 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('band1');\" value=\"Source\" />\n" |
|
|
988 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('band1', ['band1_update']);\" value=\"Source\" />\n" |
977 |
989 |
"<div class=\"source\" id=\"band1_source\"></div>\n" |
"<div class=\"source\" id=\"band1_source\"></div>\n" |
978 |
990 |
"<div class=\"note\" width=\"200px\">Note: the width of the SVG is" |
"<div class=\"note\" width=\"200px\">Note: the width of the SVG is" |
979 |
991 |
" scaled based on available width, but no more than 200px.</div>\n" |
" scaled based on available width, but no more than 200px.</div>\n" |
|
... |
... |
static const char main_screen[] = |
1004 |
1016 |
" <text x=\"30\" y=\"72\" fill=\"#990\"></text>\n" |
" <text x=\"30\" y=\"72\" fill=\"#990\"></text>\n" |
1005 |
1017 |
" </g>\n" |
" </g>\n" |
1006 |
1018 |
"</svg><br />\n" |
"</svg><br />\n" |
1007 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('arc1');\" value=\"Source\" />\n" |
|
|
1019 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('arc1', ['arc1_update']);\" value=\"Source\" />\n" |
1008 |
1020 |
"<div class=\"source\" id=\"arc1_source\"></div>\n" |
"<div class=\"source\" id=\"arc1_source\"></div>\n" |
1009 |
1021 |
"</div>\n" |
"</div>\n" |
1010 |
1022 |
"\n" |
"\n" |
|
... |
... |
static const char main_screen[] = |
1016 |
1028 |
" <g id=\"bar1_text\"></g>\n" |
" <g id=\"bar1_text\"></g>\n" |
1017 |
1029 |
" <g id=\"bar1_values\"></g>\n" |
" <g id=\"bar1_values\"></g>\n" |
1018 |
1030 |
"</svg><br />\n" |
"</svg><br />\n" |
1019 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('bar1');\" value=\"Source\" />\n" |
|
|
1031 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('bar1', ['bar1_update']);\" value=\"Source\" />\n" |
1020 |
1032 |
"<div class=\"source\" id=\"bar1_source\"></div>\n" |
"<div class=\"source\" id=\"bar1_source\"></div>\n" |
1021 |
1033 |
"</div>\n" |
"</div>\n" |
1022 |
1034 |
"\n" |
"\n" |
|
... |
... |
static const char main_screen[] = |
1025 |
1037 |
"<canvas id=\"cyl1\" width=\"100px\" height=\"100px\">\n" |
"<canvas id=\"cyl1\" width=\"100px\" height=\"100px\">\n" |
1026 |
1038 |
" Your browser does not support canvas.\n" |
" Your browser does not support canvas.\n" |
1027 |
1039 |
"</canvas><br />\n" |
"</canvas><br />\n" |
1028 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('cyl1');\" value=\"Source\" />\n" |
|
|
1040 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('cyl1', ['cyl1_update']);\" value=\"Source\" />\n" |
1029 |
1041 |
"<div class=\"source\" id=\"cyl1_source\"></div>\n" |
"<div class=\"source\" id=\"cyl1_source\"></div>\n" |
1030 |
1042 |
"</div>\n" |
"</div>\n" |
1031 |
1043 |
"\n" |
"\n" |
|
... |
... |
static const char main_screen[] = |
1034 |
1046 |
"<canvas id=\"pie1\" width=\"200px\" height=\"100px\">\n" |
"<canvas id=\"pie1\" width=\"200px\" height=\"100px\">\n" |
1035 |
1047 |
" Your browser does not support canvas.\n" |
" Your browser does not support canvas.\n" |
1036 |
1048 |
"</canvas><br />\n" |
"</canvas><br />\n" |
1037 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('pie1');\" value=\"Source\" />\n" |
|
|
1049 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('pie1', ['pie1_update']);\" value=\"Source\" />\n" |
1038 |
1050 |
"<div class=\"source\" id=\"pie1_source\"></div>\n" |
"<div class=\"source\" id=\"pie1_source\"></div>\n" |
1039 |
1051 |
"</div>\n" |
"</div>\n" |
1040 |
1052 |
"\n" |
"\n" |
|
... |
... |
static const char main_screen[] = |
1051 |
1063 |
" <g id=\"pie2\" filter=\"url(#pie2_ds1)\"></g>\n" |
" <g id=\"pie2\" filter=\"url(#pie2_ds1)\"></g>\n" |
1052 |
1064 |
" <g id=\"pie2_text\"></g>\n" |
" <g id=\"pie2_text\"></g>\n" |
1053 |
1065 |
"</svg><br />\n" |
"</svg><br />\n" |
1054 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('pie2');\" value=\"Source\" />\n" |
|
|
1066 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('pie2', ['pie2_update']);\" value=\"Source\" />\n" |
1055 |
1067 |
"<div class=\"source\" id=\"pie2_source\"></div>\n" |
"<div class=\"source\" id=\"pie2_source\"></div>\n" |
1056 |
1068 |
"</div>\n" |
"</div>\n" |
1057 |
1069 |
"\n" |
"\n" |
1058 |
1070 |
"<div class=\"gem\">\n" |
"<div class=\"gem\">\n" |
1059 |
1071 |
" Editable grid (HTML5 content editable)<br />\n" |
" Editable grid (HTML5 content editable)<br />\n" |
1060 |
1072 |
" <div id=\"grid1\"></div>\n" |
" <div id=\"grid1\"></div>\n" |
1061 |
|
" <input type=\"button\" onclick=\"window.wsdemo.source('grid1');\" value=\"Source\" />\n" |
|
|
1073 |
|
" <input type=\"button\" onclick=\"window.wsdemo.source('grid1', ['grid1_update', 'grid1_oninput', 'grid1_init']);\" value=\"Source\" />\n" |
1062 |
1074 |
" <div class=\"source\" id=\"grid1_source\"></div>\n" |
" <div class=\"source\" id=\"grid1_source\"></div>\n" |
1063 |
1075 |
" <div class=\"note\" width=\"200px\">" |
" <div class=\"note\" width=\"200px\">" |
1064 |
1076 |
" Note: please load this page on two different devices, then try" |
" Note: please load this page on two different devices, then try" |