File examples/wsdemo.c changed (mode: 100644) (index 517fc1f..a204181) |
... |
... |
struct priv { |
33 |
33 |
unsigned int band1_init:1; |
unsigned int band1_init:1; |
34 |
34 |
unsigned int cyl1_init:1; |
unsigned int cyl1_init:1; |
35 |
35 |
unsigned int pie1_init:1; |
unsigned int pie1_init:1; |
|
36 |
|
unsigned int pie2_init:1; |
36 |
37 |
unsigned int bar1_init:1; |
unsigned int bar1_init:1; |
37 |
38 |
|
|
38 |
39 |
unsigned char per1_percent; |
unsigned char per1_percent; |
|
... |
... |
struct priv { |
41 |
42 |
unsigned char arc1_count; |
unsigned char arc1_count; |
42 |
43 |
unsigned char cyl1_count; |
unsigned char cyl1_count; |
43 |
44 |
unsigned char pie1_count; |
unsigned char pie1_count; |
|
45 |
|
unsigned char pie2_count; |
44 |
46 |
unsigned char bar1_count; |
unsigned char bar1_count; |
45 |
47 |
}; |
}; |
46 |
48 |
|
|
|
... |
... |
static void pie1(struct Conn *C) |
634 |
636 |
"\n" |
"\n" |
635 |
637 |
" last_angle += angle;\n" |
" last_angle += angle;\n" |
636 |
638 |
" }\n" |
" }\n" |
|
639 |
|
"\n" |
|
640 |
|
" // draw texts\n" |
|
641 |
|
" ctx.font = '12px Arial';\n" |
|
642 |
|
" ctx.shadowBlur = 0;\n" |
|
643 |
|
" ctx.shadowOffsetX = 0;\n" |
|
644 |
|
" ctx.shadowOffsetY = 0;\n" |
|
645 |
|
" for (i = 0; i < a.length; i++) {\n" |
|
646 |
|
" ctx.fillStyle = a[i].color;\n" |
|
647 |
|
" ctx.fillText(a[i].name, 110, 15 + i * 15);\n" |
|
648 |
|
" }\n" |
637 |
649 |
"}"; |
"}"; |
638 |
650 |
push_code(C, u); |
push_code(C, u); |
639 |
651 |
p->pie1_init = 1; |
p->pie1_init = 1; |
|
... |
... |
static void pie1(struct Conn *C) |
663 |
675 |
push_code(C, code); |
push_code(C, code); |
664 |
676 |
} |
} |
665 |
677 |
|
|
|
678 |
|
static void pie2(struct Conn *C) |
|
679 |
|
{ |
|
680 |
|
struct priv *p; |
|
681 |
|
char code[4096]; |
|
682 |
|
char *names[] = { "Option 1", "Option 2", "Option 3", "Option 4", "Option 5" }; |
|
683 |
|
char vars[512], *add; |
|
684 |
|
unsigned char nr, i; |
|
685 |
|
|
|
686 |
|
p = Conn_get_private(C); |
|
687 |
|
if (!p->pie2_init) { |
|
688 |
|
const char *u = |
|
689 |
|
"window.wsdemo.pie2_update = function(a) {\n" |
|
690 |
|
" var svgns = \"http://www.w3.org/2000/svg\";\n" |
|
691 |
|
" var i;\n" |
|
692 |
|
" var angle, last_angle = 0, radius = 35, x1, y1, x2, y2, dx, dy;\n" |
|
693 |
|
"\n" |
|
694 |
|
" // compute sum\n" |
|
695 |
|
" var sum = 0;\n" |
|
696 |
|
" for (i = 0; i < a.length; i++)\n" |
|
697 |
|
" sum += a[i].value;\n" |
|
698 |
|
"\n" |
|
699 |
|
" var d = document.getElementById('pie2');\n" |
|
700 |
|
" var t = document.getElementById('pie2_text');\n" |
|
701 |
|
"\n" |
|
702 |
|
" for (i = 0; i < a.length; i++) {\n" |
|
703 |
|
" if (d.children[i] == null) {\n" |
|
704 |
|
" var path = document.createElementNS(svgns, 'path');\n" |
|
705 |
|
" path.setAttribute('stroke', 'black');\n" |
|
706 |
|
" path.setAttribute('stroke-width', .4);\n" |
|
707 |
|
" path.setAttribute('d', 'M50 50');\n" |
|
708 |
|
" d.appendChild(path);\n" |
|
709 |
|
"\n" |
|
710 |
|
" var text = document.createElementNS(svgns, 'text');\n" |
|
711 |
|
" text.setAttribute('x', 105);\n" |
|
712 |
|
" text.setAttribute('font-size', 12);\n" |
|
713 |
|
" t.appendChild(text);\n" |
|
714 |
|
" }\n" |
|
715 |
|
"\n" |
|
716 |
|
" var m = d.children[i];\n" |
|
717 |
|
" angle = a[i].value * 2 * Math.PI / sum;\n" |
|
718 |
|
" m.setAttribute('fill', a[i].color);\n" |
|
719 |
|
" dx = 3 * Math.cos(last_angle + angle / 2);\n" |
|
720 |
|
" dy = 3 * Math.sin(last_angle + angle / 2);\n" |
|
721 |
|
" x1 = 50 + (radius + 3) * Math.cos(last_angle + .07);\n" |
|
722 |
|
" y1 = 50 + (radius + 3) * Math.sin(last_angle + .07);\n" |
|
723 |
|
" x2 = 50 + (radius + 3) * Math.cos(last_angle + angle - .07);\n" |
|
724 |
|
" y2 = 50 + (radius + 3) * Math.sin(last_angle + angle - .07);\n" |
|
725 |
|
" large = angle > Math.PI ? 1 : 0;\n" |
|
726 |
|
" m.setAttribute('d', 'M' + (50 + dx) + ' ' + (50 + dy)\n" |
|
727 |
|
" + ' L' + x1 + ' ' + y1\n" |
|
728 |
|
" + ' A' + (radius + 3) + ' ' + (radius + 3) + ' 0 '\n" |
|
729 |
|
" + large + ' 1 ' + x2 + ' ' + y2 + ' z');\n" |
|
730 |
|
"\n" |
|
731 |
|
" // draw texts\n" |
|
732 |
|
" var t1 = t.children[i];\n" |
|
733 |
|
" t1.setAttribute('fill', a[i].color);\n" |
|
734 |
|
" t1.innerHTML = a[i].name + ' - ' + parseInt(a[i].value * 100 / sum) + '%';\n" |
|
735 |
|
" t1.setAttribute('y', 20 + i * 17);\n" |
|
736 |
|
"\n" |
|
737 |
|
" last_angle += angle;\n" |
|
738 |
|
" }\n" |
|
739 |
|
"\n" |
|
740 |
|
" // clean old children\n" |
|
741 |
|
" while (d.children[i]) {\n" |
|
742 |
|
" d.removeChild(d.children[i]);\n" |
|
743 |
|
" t.removeChild(t.children[i]);\n" |
|
744 |
|
" }\n" |
|
745 |
|
"}"; |
|
746 |
|
push_code(C, u); |
|
747 |
|
p->pie2_init = 1; |
|
748 |
|
p->pie2_count = 4; |
|
749 |
|
} |
|
750 |
|
|
|
751 |
|
p->pie2_count++; |
|
752 |
|
p->pie2_count %= 5; |
|
753 |
|
if (p->pie2_count != 0) |
|
754 |
|
return; |
|
755 |
|
|
|
756 |
|
strcpy(vars, "[ "); add = ""; |
|
757 |
|
nr = 3 + random() % 3; |
|
758 |
|
for (i = 0; i < nr; i++) { |
|
759 |
|
char tmp[64]; |
|
760 |
|
unsigned int v; |
|
761 |
|
|
|
762 |
|
v = 100 + (unsigned int) random() % 1000; |
|
763 |
|
snprintf(tmp, sizeof(tmp), "%s{ name:\"%s\", value:%u, color:'#%06lx' }", |
|
764 |
|
add, names[i], v, random() % 0x1000000); |
|
765 |
|
strcat(vars, tmp); |
|
766 |
|
add = ", "; |
|
767 |
|
} |
|
768 |
|
strcat(vars, "]"); |
|
769 |
|
|
|
770 |
|
snprintf(code, sizeof(code), "window.wsdemo.pie2_update(%s)", vars); |
|
771 |
|
push_code(C, code); |
|
772 |
|
} |
|
773 |
|
|
666 |
774 |
static void trigger(struct Conn *C) |
static void trigger(struct Conn *C) |
667 |
775 |
{ |
{ |
668 |
776 |
struct priv *p; |
struct priv *p; |
|
... |
... |
static void trigger(struct Conn *C) |
724 |
832 |
band1(C); |
band1(C); |
725 |
833 |
arc1(C); |
arc1(C); |
726 |
834 |
bar1(C); |
bar1(C); |
727 |
|
// canvas demos |
|
728 |
835 |
cyl1(C); |
cyl1(C); |
729 |
836 |
pie1(C); |
pie1(C); |
|
837 |
|
pie2(C); |
730 |
838 |
} |
} |
731 |
839 |
|
|
732 |
840 |
static const char main_screen[] = |
static const char main_screen[] = |
|
... |
... |
static const char main_screen[] = |
814 |
922 |
"<div class=\"gem\" width=\"420px\">\n" |
"<div class=\"gem\" width=\"420px\">\n" |
815 |
923 |
"Bar 1 (SVG lines + SVG text)<br />\n" |
"Bar 1 (SVG lines + SVG text)<br />\n" |
816 |
924 |
"<svg height=\"100\" width=\"100\" style=\"border: 1px solid green\">\n" |
"<svg height=\"100\" width=\"100\" style=\"border: 1px solid green\">\n" |
817 |
|
" <line x1=\"0\" x2=\"100\" y1=\"85\" y2=\"85\" style=\"stroke: red\" />\n" |
|
|
925 |
|
" <line x1=\"0\" x2=\"100\" y1=\"85\" y2=\"85\" style=\"stroke: red; stroke-width: 0.2\" />\n" |
818 |
926 |
" <g id=\"bar1\"></g>\n" |
" <g id=\"bar1\"></g>\n" |
819 |
927 |
" <g id=\"bar1_text\"></g>\n" |
" <g id=\"bar1_text\"></g>\n" |
820 |
928 |
" <g id=\"bar1_values\"></g>\n" |
" <g id=\"bar1_values\"></g>\n" |
|
... |
... |
static const char main_screen[] = |
833 |
941 |
"</div>\n" |
"</div>\n" |
834 |
942 |
"\n" |
"\n" |
835 |
943 |
"<div class=\"gem\">\n" |
"<div class=\"gem\">\n" |
836 |
|
"Pie (canvas, 2D)<br />\n" |
|
837 |
|
"<canvas id=\"pie1\" width=\"100px\" height=\"100px\">\n" |
|
|
944 |
|
"Pie 1 (canvas, 2D)<br />\n" |
|
945 |
|
"<canvas id=\"pie1\" width=\"200px\" height=\"100px\">\n" |
838 |
946 |
" Your browser does not support canvas.\n" |
" Your browser does not support canvas.\n" |
839 |
947 |
"</canvas><br />\n" |
"</canvas><br />\n" |
840 |
948 |
"<input type=\"button\" onclick=\"window.wsdemo.source('pie1');\" value=\"Source\" />\n" |
"<input type=\"button\" onclick=\"window.wsdemo.source('pie1');\" value=\"Source\" />\n" |
|
... |
... |
static const char main_screen[] = |
842 |
950 |
"</div>\n" |
"</div>\n" |
843 |
951 |
"\n" |
"\n" |
844 |
952 |
"<div class=\"gem\">\n" |
"<div class=\"gem\">\n" |
|
953 |
|
"Pie 2 (SVG)<br />\n" |
|
954 |
|
"<svg height=\"100\" width=\"200\" style=\"border: 1px solid green\">\n" |
|
955 |
|
"<defs>\n" |
|
956 |
|
" <filter id=\"pie2_ds1\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n" |
|
957 |
|
" <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"1\" dy=\"1\" />\n" |
|
958 |
|
" <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"2\" />\n" |
|
959 |
|
" <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n" |
|
960 |
|
" </filter>\n" |
|
961 |
|
"</defs>\n" |
|
962 |
|
" <g id=\"pie2\" filter=\"url(#pie2_ds1)\"></g>\n" |
|
963 |
|
" <g id=\"pie2_text\"></g>\n" |
|
964 |
|
"</svg><br />\n" |
|
965 |
|
"<input type=\"button\" onclick=\"window.wsdemo.source('pie2');\" value=\"Source\" />\n" |
|
966 |
|
"<div class=\"source\" id=\"pie2_source\"></div>\n" |
|
967 |
|
"</div>\n" |
|
968 |
|
"\n" |
|
969 |
|
"<div class=\"gem\">\n" |
845 |
970 |
"Buttons<br />\n" |
"Buttons<br />\n" |
846 |
971 |
"<input type=\"button\" onclick=\"window.wsdemo.button('notify');\"" |
"<input type=\"button\" onclick=\"window.wsdemo.button('notify');\"" |
847 |
972 |
" value=\"trigger notification\" />\n" |
" value=\"trigger notification\" />\n" |