File examples/wsdemo.c changed (mode: 100644) (index 564d9bd..3594dac) |
... |
... |
static void trigger(struct Conn *C) |
940 |
940 |
|
|
941 |
941 |
static const char main_screen[] = |
static const char main_screen[] = |
942 |
942 |
"<div class=\"gem\" width=\"120px\">\n" |
"<div class=\"gem\" width=\"120px\">\n" |
943 |
|
"Progress bar 1 (div)</br />\n" |
|
|
943 |
|
"<div class=\"title\">Progress bar 1 (div)</div>\n" |
944 |
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" |
945 |
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" |
946 |
946 |
"</div>\n" |
"</div>\n" |
|
... |
... |
static const char main_screen[] = |
949 |
949 |
"</div>\n" |
"</div>\n" |
950 |
950 |
"\n" |
"\n" |
951 |
951 |
"<div class=\"gem\" width=\"120px\">\n" |
"<div class=\"gem\" width=\"120px\">\n" |
952 |
|
"Progress bar 2 (SVG)<br />\n" |
|
|
952 |
|
"<div class=\"title\">Progress bar 2 (SVG)</div>\n" |
953 |
953 |
"<svg height=\"20\" width=\"110\" style=\"border: 1px solid black\">\n" |
"<svg height=\"20\" width=\"110\" style=\"border: 1px solid black\">\n" |
954 |
954 |
" <defs>\n" |
" <defs>\n" |
955 |
955 |
" <linearGradient id=\"per2_gra1\" gradientTransform=\"rotate(90)\">\n" |
" <linearGradient id=\"per2_gra1\" gradientTransform=\"rotate(90)\">\n" |
|
... |
... |
static const char main_screen[] = |
966 |
966 |
"</div>\n" |
"</div>\n" |
967 |
967 |
"\n" |
"\n" |
968 |
968 |
"<div class=\"gem\" width=\"120px\">\n" |
"<div class=\"gem\" width=\"120px\">\n" |
969 |
|
"Server load (SVG)<br />\n" |
|
|
969 |
|
"<div class=\"title\">Server load (SVG)</div>\n" |
|
970 |
|
"<div class=\"note\" width=\"100px\">Note: the width of the SVG is scaled based on" |
|
971 |
|
" available width, but no more than 100px; previous values are pushed by the server.</div>\n" |
970 |
972 |
"<svg id=\"load1_container\" height=\"102\" width=\"102\" style=\"border: 1px solid green\">\n" |
"<svg id=\"load1_container\" height=\"102\" width=\"102\" style=\"border: 1px solid green\">\n" |
971 |
973 |
" <g id=\"load1\"></g>\n" |
" <g id=\"load1\"></g>\n" |
972 |
974 |
" <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" |
973 |
975 |
"</svg><br />\n" |
"</svg><br />\n" |
974 |
976 |
"<input type=\"button\" onclick=\"window.wsdemo.source('load1', ['load1_update']);\" value=\"Source\" />\n" |
"<input type=\"button\" onclick=\"window.wsdemo.source('load1', ['load1_update']);\" value=\"Source\" />\n" |
975 |
977 |
"<div class=\"source\" id=\"load1_source\"></div>\n" |
"<div class=\"source\" id=\"load1_source\"></div>\n" |
976 |
|
"<div class=\"note\" width=\"100px\">Note: the width of the SVG is scaled based on" |
|
977 |
|
" available width, but no more than 100px; previous values are pushed by the server.</div>\n" |
|
978 |
978 |
"</div>\n" |
"</div>\n" |
979 |
979 |
"\n" |
"\n" |
980 |
980 |
"<div class=\"gem\">\n" |
"<div class=\"gem\">\n" |
981 |
|
"Bandwidth (SVG)<br />\n" |
|
|
981 |
|
"<div class=\"title\">Bandwidth (SVG)</div>\n" |
|
982 |
|
"<div class=\"note\" width=\"200px\">Note: the width of the SVG is" |
|
983 |
|
" scaled based on available width, but no more than 200px.</div>\n" |
982 |
984 |
"<svg id=\"band1_container\" height=\"102\" width=\"100\" style=\"border: 1px solid green\">\n" |
"<svg id=\"band1_container\" height=\"102\" width=\"100\" style=\"border: 1px solid green\">\n" |
983 |
985 |
" <g id=\"band1\"></g>\n" |
" <g id=\"band1\"></g>\n" |
984 |
986 |
" <line id=\"band1_line\" x1=\"0\" x2=\"100\" y1=\"50\" y2=\"50\" style=\"stroke: blue\" />\n" |
" <line id=\"band1_line\" x1=\"0\" x2=\"100\" y1=\"50\" y2=\"50\" style=\"stroke: blue\" />\n" |
|
... |
... |
static const char main_screen[] = |
987 |
989 |
"</svg><br />\n" |
"</svg><br />\n" |
988 |
990 |
"<input type=\"button\" onclick=\"window.wsdemo.source('band1', ['band1_update']);\" value=\"Source\" />\n" |
"<input type=\"button\" onclick=\"window.wsdemo.source('band1', ['band1_update']);\" value=\"Source\" />\n" |
989 |
991 |
"<div class=\"source\" id=\"band1_source\"></div>\n" |
"<div class=\"source\" id=\"band1_source\"></div>\n" |
990 |
|
"<div class=\"note\" width=\"200px\">Note: the width of the SVG is" |
|
991 |
|
" scaled based on available width, but no more than 200px.</div>\n" |
|
992 |
992 |
"</div>\n" |
"</div>\n" |
993 |
993 |
"\n" |
"\n" |
994 |
994 |
"<div class=\"gem\" width=\"420px\">\n" |
"<div class=\"gem\" width=\"420px\">\n" |
995 |
|
"Arc 1 (SVG arcs + div text)</br />\n" |
|
|
995 |
|
"<div class=\"title\">Arc 1 (SVG arcs + div text)</div>\n" |
996 |
996 |
"<svg height=\"100\" width=\"100\" style=\"border: 1px solid green\">\n" |
"<svg height=\"100\" width=\"100\" style=\"border: 1px solid green\">\n" |
997 |
997 |
"<defs>\n" |
"<defs>\n" |
998 |
998 |
" <filter id=\"ds1\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n" |
" <filter id=\"ds1\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n" |
|
... |
... |
static const char main_screen[] = |
1021 |
1021 |
"</div>\n" |
"</div>\n" |
1022 |
1022 |
"\n" |
"\n" |
1023 |
1023 |
"<div class=\"gem\" width=\"420px\">\n" |
"<div class=\"gem\" width=\"420px\">\n" |
1024 |
|
"Bar 1 (SVG lines + SVG text)<br />\n" |
|
|
1024 |
|
"<div class=\"title\">Bar 1 (SVG lines + SVG text)</div>\n" |
1025 |
1025 |
"<svg height=\"100\" width=\"100\" style=\"border: 1px solid green\">\n" |
"<svg height=\"100\" width=\"100\" style=\"border: 1px solid green\">\n" |
1026 |
1026 |
" <line x1=\"0\" x2=\"100\" y1=\"85\" y2=\"85\" style=\"stroke: red; stroke-width: 0.2\" />\n" |
" <line x1=\"0\" x2=\"100\" y1=\"85\" y2=\"85\" style=\"stroke: red; stroke-width: 0.2\" />\n" |
1027 |
1027 |
" <g id=\"bar1\"></g>\n" |
" <g id=\"bar1\"></g>\n" |
|
... |
... |
static const char main_screen[] = |
1033 |
1033 |
"</div>\n" |
"</div>\n" |
1034 |
1034 |
"\n" |
"\n" |
1035 |
1035 |
"<div class=\"gem\">\n" |
"<div class=\"gem\">\n" |
1036 |
|
"Cylinders (canvas, 2D)<br />\n" |
|
|
1036 |
|
"<div class=\"title\">Cylinders (canvas, 2D)</div>\n" |
1037 |
1037 |
"<canvas id=\"cyl1\" width=\"100px\" height=\"100px\">\n" |
"<canvas id=\"cyl1\" width=\"100px\" height=\"100px\">\n" |
1038 |
1038 |
" Your browser does not support canvas.\n" |
" Your browser does not support canvas.\n" |
1039 |
1039 |
"</canvas><br />\n" |
"</canvas><br />\n" |
|
... |
... |
static const char main_screen[] = |
1042 |
1042 |
"</div>\n" |
"</div>\n" |
1043 |
1043 |
"\n" |
"\n" |
1044 |
1044 |
"<div class=\"gem\">\n" |
"<div class=\"gem\">\n" |
1045 |
|
"Pie 1 (canvas, 2D)<br />\n" |
|
|
1045 |
|
"<div class=\"title\">Pie 1 (canvas, 2D)</div>\n" |
1046 |
1046 |
"<canvas id=\"pie1\" width=\"200px\" height=\"100px\">\n" |
"<canvas id=\"pie1\" width=\"200px\" height=\"100px\">\n" |
1047 |
1047 |
" Your browser does not support canvas.\n" |
" Your browser does not support canvas.\n" |
1048 |
1048 |
"</canvas><br />\n" |
"</canvas><br />\n" |
|
... |
... |
static const char main_screen[] = |
1051 |
1051 |
"</div>\n" |
"</div>\n" |
1052 |
1052 |
"\n" |
"\n" |
1053 |
1053 |
"<div class=\"gem\">\n" |
"<div class=\"gem\">\n" |
1054 |
|
"Pie 2 (SVG)<br />\n" |
|
|
1054 |
|
"<div class=\"title\">Pie 2 (SVG)</div>\n" |
1055 |
1055 |
"<svg height=\"100\" width=\"200\" style=\"border: 1px solid green\">\n" |
"<svg height=\"100\" width=\"200\" style=\"border: 1px solid green\">\n" |
1056 |
1056 |
"<defs>\n" |
"<defs>\n" |
1057 |
1057 |
" <filter id=\"pie2_ds1\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n" |
" <filter id=\"pie2_ds1\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n" |
|
... |
... |
static const char main_screen[] = |
1068 |
1068 |
"</div>\n" |
"</div>\n" |
1069 |
1069 |
"\n" |
"\n" |
1070 |
1070 |
"<div class=\"gem\">\n" |
"<div class=\"gem\">\n" |
1071 |
|
" Editable grid (HTML5 content editable)<br />\n" |
|
1072 |
|
" <div id=\"grid1\"></div>\n" |
|
1073 |
|
" <input type=\"button\" onclick=\"window.wsdemo.source('grid1', ['grid1_update', 'grid1_oninput', 'grid1_init']);\" value=\"Source\" />\n" |
|
1074 |
|
" <div class=\"source\" id=\"grid1_source\"></div>\n" |
|
|
1071 |
|
" <div class=\"title\">Editable grid (HTML5 content editable)</div>\n" |
1075 |
1072 |
" <div class=\"note\" width=\"200px\">" |
" <div class=\"note\" width=\"200px\">" |
1076 |
1073 |
" Note: please load this page on two different devices, then try" |
" Note: please load this page on two different devices, then try" |
1077 |
1074 |
" to change the content of a cell and watch the other device to" |
" to change the content of a cell and watch the other device to" |
1078 |
1075 |
" see how the value changes." |
" see how the value changes." |
1079 |
1076 |
" </div>\n" |
" </div>\n" |
|
1077 |
|
" <div id=\"grid1\"></div>\n" |
|
1078 |
|
" <input type=\"button\" onclick=\"window.wsdemo.source('grid1', ['grid1_update', 'grid1_oninput', 'grid1_init']);\" value=\"Source\" />\n" |
|
1079 |
|
" <div class=\"source\" id=\"grid1_source\"></div>\n" |
1080 |
1080 |
"</div>\n" |
"</div>\n" |
1081 |
1081 |
"\n" |
"\n" |
1082 |
1082 |
"<div class=\"gem\">\n" |
"<div class=\"gem\">\n" |