--- /dev/null
+/*!
+ * Bootstrap Grid v4.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2018 The Bootstrap Authors
+ * Copyright 2011-2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+@-ms-viewport {
+ width: device-width;
+}
+
+html {
+ box-sizing: border-box;
+ -ms-overflow-style: scrollbar;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+}
+
+.container {
+ width: 100%;
+ padding-right: 15px;
+ padding-left: 15px;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+@media (min-width: 576px) {
+ .container {
+ max-width: 540px;
+ }
+}
+
+@media (min-width: 768px) {
+ .container {
+ max-width: 720px;
+ }
+}
+
+@media (min-width: 992px) {
+ .container {
+ max-width: 960px;
+ }
+}
+
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1140px;
+ }
+}
+
+.container-fluid {
+ width: 100%;
+ padding-right: 15px;
+ padding-left: 15px;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+.row {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin-right: -15px;
+ margin-left: -15px;
+}
+
+.no-gutters {
+ margin-right: 0;
+ margin-left: 0;
+}
+
+.no-gutters > .col,
+.no-gutters > [class*="col-"] {
+ padding-right: 0;
+ padding-left: 0;
+}
+
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
+.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
+.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
+.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
+.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
+.col-xl-auto {
+ position: relative;
+ width: 100%;
+ min-height: 1px;
+ padding-right: 15px;
+ padding-left: 15px;
+}
+
+.col {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+}
+
+.col-auto {
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto;
+ max-width: none;
+}
+
+.col-1 {
+ -ms-flex: 0 0 8.333333%;
+ flex: 0 0 8.333333%;
+ max-width: 8.333333%;
+}
+
+.col-2 {
+ -ms-flex: 0 0 16.666667%;
+ flex: 0 0 16.666667%;
+ max-width: 16.666667%;
+}
+
+.col-3 {
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ max-width: 25%;
+}
+
+.col-4 {
+ -ms-flex: 0 0 33.333333%;
+ flex: 0 0 33.333333%;
+ max-width: 33.333333%;
+}
+
+.col-5 {
+ -ms-flex: 0 0 41.666667%;
+ flex: 0 0 41.666667%;
+ max-width: 41.666667%;
+}
+
+.col-6 {
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+}
+
+.col-7 {
+ -ms-flex: 0 0 58.333333%;
+ flex: 0 0 58.333333%;
+ max-width: 58.333333%;
+}
+
+.col-8 {
+ -ms-flex: 0 0 66.666667%;
+ flex: 0 0 66.666667%;
+ max-width: 66.666667%;
+}
+
+.col-9 {
+ -ms-flex: 0 0 75%;
+ flex: 0 0 75%;
+ max-width: 75%;
+}
+
+.col-10 {
+ -ms-flex: 0 0 83.333333%;
+ flex: 0 0 83.333333%;
+ max-width: 83.333333%;
+}
+
+.col-11 {
+ -ms-flex: 0 0 91.666667%;
+ flex: 0 0 91.666667%;
+ max-width: 91.666667%;
+}
+
+.col-12 {
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+}
+
+.order-first {
+ -ms-flex-order: -1;
+ order: -1;
+}
+
+.order-last {
+ -ms-flex-order: 13;
+ order: 13;
+}
+
+.order-0 {
+ -ms-flex-order: 0;
+ order: 0;
+}
+
+.order-1 {
+ -ms-flex-order: 1;
+ order: 1;
+}
+
+.order-2 {
+ -ms-flex-order: 2;
+ order: 2;
+}
+
+.order-3 {
+ -ms-flex-order: 3;
+ order: 3;
+}
+
+.order-4 {
+ -ms-flex-order: 4;
+ order: 4;
+}
+
+.order-5 {
+ -ms-flex-order: 5;
+ order: 5;
+}
+
+.order-6 {
+ -ms-flex-order: 6;
+ order: 6;
+}
+
+.order-7 {
+ -ms-flex-order: 7;
+ order: 7;
+}
+
+.order-8 {
+ -ms-flex-order: 8;
+ order: 8;
+}
+
+.order-9 {
+ -ms-flex-order: 9;
+ order: 9;
+}
+
+.order-10 {
+ -ms-flex-order: 10;
+ order: 10;
+}
+
+.order-11 {
+ -ms-flex-order: 11;
+ order: 11;
+}
+
+.order-12 {
+ -ms-flex-order: 12;
+ order: 12;
+}
+
+.offset-1 {
+ margin-left: 8.333333%;
+}
+
+.offset-2 {
+ margin-left: 16.666667%;
+}
+
+.offset-3 {
+ margin-left: 25%;
+}
+
+.offset-4 {
+ margin-left: 33.333333%;
+}
+
+.offset-5 {
+ margin-left: 41.666667%;
+}
+
+.offset-6 {
+ margin-left: 50%;
+}
+
+.offset-7 {
+ margin-left: 58.333333%;
+}
+
+.offset-8 {
+ margin-left: 66.666667%;
+}
+
+.offset-9 {
+ margin-left: 75%;
+}
+
+.offset-10 {
+ margin-left: 83.333333%;
+}
+
+.offset-11 {
+ margin-left: 91.666667%;
+}
+
+@media (min-width: 576px) {
+ .col-sm {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+ }
+ .col-sm-auto {
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto;
+ max-width: none;
+ }
+ .col-sm-1 {
+ -ms-flex: 0 0 8.333333%;
+ flex: 0 0 8.333333%;
+ max-width: 8.333333%;
+ }
+ .col-sm-2 {
+ -ms-flex: 0 0 16.666667%;
+ flex: 0 0 16.666667%;
+ max-width: 16.666667%;
+ }
+ .col-sm-3 {
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ max-width: 25%;
+ }
+ .col-sm-4 {
+ -ms-flex: 0 0 33.333333%;
+ flex: 0 0 33.333333%;
+ max-width: 33.333333%;
+ }
+ .col-sm-5 {
+ -ms-flex: 0 0 41.666667%;
+ flex: 0 0 41.666667%;
+ max-width: 41.666667%;
+ }
+ .col-sm-6 {
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
+ .col-sm-7 {
+ -ms-flex: 0 0 58.333333%;
+ flex: 0 0 58.333333%;
+ max-width: 58.333333%;
+ }
+ .col-sm-8 {
+ -ms-flex: 0 0 66.666667%;
+ flex: 0 0 66.666667%;
+ max-width: 66.666667%;
+ }
+ .col-sm-9 {
+ -ms-flex: 0 0 75%;
+ flex: 0 0 75%;
+ max-width: 75%;
+ }
+ .col-sm-10 {
+ -ms-flex: 0 0 83.333333%;
+ flex: 0 0 83.333333%;
+ max-width: 83.333333%;
+ }
+ .col-sm-11 {
+ -ms-flex: 0 0 91.666667%;
+ flex: 0 0 91.666667%;
+ max-width: 91.666667%;
+ }
+ .col-sm-12 {
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+ }
+ .order-sm-first {
+ -ms-flex-order: -1;
+ order: -1;
+ }
+ .order-sm-last {
+ -ms-flex-order: 13;
+ order: 13;
+ }
+ .order-sm-0 {
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-sm-1 {
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-sm-2 {
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-sm-3 {
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-sm-4 {
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-sm-5 {
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-sm-6 {
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-sm-7 {
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-sm-8 {
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-sm-9 {
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-sm-10 {
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-sm-11 {
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-sm-12 {
+ -ms-flex-order: 12;
+ order: 12;
+ }
+ .offset-sm-0 {
+ margin-left: 0;
+ }
+ .offset-sm-1 {
+ margin-left: 8.333333%;
+ }
+ .offset-sm-2 {
+ margin-left: 16.666667%;
+ }
+ .offset-sm-3 {
+ margin-left: 25%;
+ }
+ .offset-sm-4 {
+ margin-left: 33.333333%;
+ }
+ .offset-sm-5 {
+ margin-left: 41.666667%;
+ }
+ .offset-sm-6 {
+ margin-left: 50%;
+ }
+ .offset-sm-7 {
+ margin-left: 58.333333%;
+ }
+ .offset-sm-8 {
+ margin-left: 66.666667%;
+ }
+ .offset-sm-9 {
+ margin-left: 75%;
+ }
+ .offset-sm-10 {
+ margin-left: 83.333333%;
+ }
+ .offset-sm-11 {
+ margin-left: 91.666667%;
+ }
+}
+
+@media (min-width: 768px) {
+ .col-md {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+ }
+ .col-md-auto {
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto;
+ max-width: none;
+ }
+ .col-md-1 {
+ -ms-flex: 0 0 8.333333%;
+ flex: 0 0 8.333333%;
+ max-width: 8.333333%;
+ }
+ .col-md-2 {
+ -ms-flex: 0 0 16.666667%;
+ flex: 0 0 16.666667%;
+ max-width: 16.666667%;
+ }
+ .col-md-3 {
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ max-width: 25%;
+ }
+ .col-md-4 {
+ -ms-flex: 0 0 33.333333%;
+ flex: 0 0 33.333333%;
+ max-width: 33.333333%;
+ }
+ .col-md-5 {
+ -ms-flex: 0 0 41.666667%;
+ flex: 0 0 41.666667%;
+ max-width: 41.666667%;
+ }
+ .col-md-6 {
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
+ .col-md-7 {
+ -ms-flex: 0 0 58.333333%;
+ flex: 0 0 58.333333%;
+ max-width: 58.333333%;
+ }
+ .col-md-8 {
+ -ms-flex: 0 0 66.666667%;
+ flex: 0 0 66.666667%;
+ max-width: 66.666667%;
+ }
+ .col-md-9 {
+ -ms-flex: 0 0 75%;
+ flex: 0 0 75%;
+ max-width: 75%;
+ }
+ .col-md-10 {
+ -ms-flex: 0 0 83.333333%;
+ flex: 0 0 83.333333%;
+ max-width: 83.333333%;
+ }
+ .col-md-11 {
+ -ms-flex: 0 0 91.666667%;
+ flex: 0 0 91.666667%;
+ max-width: 91.666667%;
+ }
+ .col-md-12 {
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+ }
+ .order-md-first {
+ -ms-flex-order: -1;
+ order: -1;
+ }
+ .order-md-last {
+ -ms-flex-order: 13;
+ order: 13;
+ }
+ .order-md-0 {
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-md-1 {
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-md-2 {
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-md-3 {
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-md-4 {
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-md-5 {
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-md-6 {
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-md-7 {
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-md-8 {
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-md-9 {
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-md-10 {
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-md-11 {
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-md-12 {
+ -ms-flex-order: 12;
+ order: 12;
+ }
+ .offset-md-0 {
+ margin-left: 0;
+ }
+ .offset-md-1 {
+ margin-left: 8.333333%;
+ }
+ .offset-md-2 {
+ margin-left: 16.666667%;
+ }
+ .offset-md-3 {
+ margin-left: 25%;
+ }
+ .offset-md-4 {
+ margin-left: 33.333333%;
+ }
+ .offset-md-5 {
+ margin-left: 41.666667%;
+ }
+ .offset-md-6 {
+ margin-left: 50%;
+ }
+ .offset-md-7 {
+ margin-left: 58.333333%;
+ }
+ .offset-md-8 {
+ margin-left: 66.666667%;
+ }
+ .offset-md-9 {
+ margin-left: 75%;
+ }
+ .offset-md-10 {
+ margin-left: 83.333333%;
+ }
+ .offset-md-11 {
+ margin-left: 91.666667%;
+ }
+}
+
+@media (min-width: 992px) {
+ .col-lg {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+ }
+ .col-lg-auto {
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto;
+ max-width: none;
+ }
+ .col-lg-1 {
+ -ms-flex: 0 0 8.333333%;
+ flex: 0 0 8.333333%;
+ max-width: 8.333333%;
+ }
+ .col-lg-2 {
+ -ms-flex: 0 0 16.666667%;
+ flex: 0 0 16.666667%;
+ max-width: 16.666667%;
+ }
+ .col-lg-3 {
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ max-width: 25%;
+ }
+ .col-lg-4 {
+ -ms-flex: 0 0 33.333333%;
+ flex: 0 0 33.333333%;
+ max-width: 33.333333%;
+ }
+ .col-lg-5 {
+ -ms-flex: 0 0 41.666667%;
+ flex: 0 0 41.666667%;
+ max-width: 41.666667%;
+ }
+ .col-lg-6 {
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
+ .col-lg-7 {
+ -ms-flex: 0 0 58.333333%;
+ flex: 0 0 58.333333%;
+ max-width: 58.333333%;
+ }
+ .col-lg-8 {
+ -ms-flex: 0 0 66.666667%;
+ flex: 0 0 66.666667%;
+ max-width: 66.666667%;
+ }
+ .col-lg-9 {
+ -ms-flex: 0 0 75%;
+ flex: 0 0 75%;
+ max-width: 75%;
+ }
+ .col-lg-10 {
+ -ms-flex: 0 0 83.333333%;
+ flex: 0 0 83.333333%;
+ max-width: 83.333333%;
+ }
+ .col-lg-11 {
+ -ms-flex: 0 0 91.666667%;
+ flex: 0 0 91.666667%;
+ max-width: 91.666667%;
+ }
+ .col-lg-12 {
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+ }
+ .order-lg-first {
+ -ms-flex-order: -1;
+ order: -1;
+ }
+ .order-lg-last {
+ -ms-flex-order: 13;
+ order: 13;
+ }
+ .order-lg-0 {
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-lg-1 {
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-lg-2 {
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-lg-3 {
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-lg-4 {
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-lg-5 {
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-lg-6 {
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-lg-7 {
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-lg-8 {
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-lg-9 {
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-lg-10 {
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-lg-11 {
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-lg-12 {
+ -ms-flex-order: 12;
+ order: 12;
+ }
+ .offset-lg-0 {
+ margin-left: 0;
+ }
+ .offset-lg-1 {
+ margin-left: 8.333333%;
+ }
+ .offset-lg-2 {
+ margin-left: 16.666667%;
+ }
+ .offset-lg-3 {
+ margin-left: 25%;
+ }
+ .offset-lg-4 {
+ margin-left: 33.333333%;
+ }
+ .offset-lg-5 {
+ margin-left: 41.666667%;
+ }
+ .offset-lg-6 {
+ margin-left: 50%;
+ }
+ .offset-lg-7 {
+ margin-left: 58.333333%;
+ }
+ .offset-lg-8 {
+ margin-left: 66.666667%;
+ }
+ .offset-lg-9 {
+ margin-left: 75%;
+ }
+ .offset-lg-10 {
+ margin-left: 83.333333%;
+ }
+ .offset-lg-11 {
+ margin-left: 91.666667%;
+ }
+}
+
+@media (min-width: 1200px) {
+ .col-xl {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+ }
+ .col-xl-auto {
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto;
+ max-width: none;
+ }
+ .col-xl-1 {
+ -ms-flex: 0 0 8.333333%;
+ flex: 0 0 8.333333%;
+ max-width: 8.333333%;
+ }
+ .col-xl-2 {
+ -ms-flex: 0 0 16.666667%;
+ flex: 0 0 16.666667%;
+ max-width: 16.666667%;
+ }
+ .col-xl-3 {
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ max-width: 25%;
+ }
+ .col-xl-4 {
+ -ms-flex: 0 0 33.333333%;
+ flex: 0 0 33.333333%;
+ max-width: 33.333333%;
+ }
+ .col-xl-5 {
+ -ms-flex: 0 0 41.666667%;
+ flex: 0 0 41.666667%;
+ max-width: 41.666667%;
+ }
+ .col-xl-6 {
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
+ .col-xl-7 {
+ -ms-flex: 0 0 58.333333%;
+ flex: 0 0 58.333333%;
+ max-width: 58.333333%;
+ }
+ .col-xl-8 {
+ -ms-flex: 0 0 66.666667%;
+ flex: 0 0 66.666667%;
+ max-width: 66.666667%;
+ }
+ .col-xl-9 {
+ -ms-flex: 0 0 75%;
+ flex: 0 0 75%;
+ max-width: 75%;
+ }
+ .col-xl-10 {
+ -ms-flex: 0 0 83.333333%;
+ flex: 0 0 83.333333%;
+ max-width: 83.333333%;
+ }
+ .col-xl-11 {
+ -ms-flex: 0 0 91.666667%;
+ flex: 0 0 91.666667%;
+ max-width: 91.666667%;
+ }
+ .col-xl-12 {
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+ }
+ .order-xl-first {
+ -ms-flex-order: -1;
+ order: -1;
+ }
+ .order-xl-last {
+ -ms-flex-order: 13;
+ order: 13;
+ }
+ .order-xl-0 {
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-xl-1 {
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-xl-2 {
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-xl-3 {
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-xl-4 {
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-xl-5 {
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-xl-6 {
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-xl-7 {
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-xl-8 {
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-xl-9 {
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-xl-10 {
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-xl-11 {
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-xl-12 {
+ -ms-flex-order: 12;
+ order: 12;
+ }
+ .offset-xl-0 {
+ margin-left: 0;
+ }
+ .offset-xl-1 {
+ margin-left: 8.333333%;
+ }
+ .offset-xl-2 {
+ margin-left: 16.666667%;
+ }
+ .offset-xl-3 {
+ margin-left: 25%;
+ }
+ .offset-xl-4 {
+ margin-left: 33.333333%;
+ }
+ .offset-xl-5 {
+ margin-left: 41.666667%;
+ }
+ .offset-xl-6 {
+ margin-left: 50%;
+ }
+ .offset-xl-7 {
+ margin-left: 58.333333%;
+ }
+ .offset-xl-8 {
+ margin-left: 66.666667%;
+ }
+ .offset-xl-9 {
+ margin-left: 75%;
+ }
+ .offset-xl-10 {
+ margin-left: 83.333333%;
+ }
+ .offset-xl-11 {
+ margin-left: 91.666667%;
+ }
+}
+
+.d-none {
+ display: none !important;
+}
+
+.d-inline {
+ display: inline !important;
+}
+
+.d-inline-block {
+ display: inline-block !important;
+}
+
+.d-block {
+ display: block !important;
+}
+
+.d-table {
+ display: table !important;
+}
+
+.d-table-row {
+ display: table-row !important;
+}
+
+.d-table-cell {
+ display: table-cell !important;
+}
+
+.d-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+}
+
+.d-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+}
+
+@media (min-width: 576px) {
+ .d-sm-none {
+ display: none !important;
+ }
+ .d-sm-inline {
+ display: inline !important;
+ }
+ .d-sm-inline-block {
+ display: inline-block !important;
+ }
+ .d-sm-block {
+ display: block !important;
+ }
+ .d-sm-table {
+ display: table !important;
+ }
+ .d-sm-table-row {
+ display: table-row !important;
+ }
+ .d-sm-table-cell {
+ display: table-cell !important;
+ }
+ .d-sm-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+ }
+ .d-sm-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+ }
+}
+
+@media (min-width: 768px) {
+ .d-md-none {
+ display: none !important;
+ }
+ .d-md-inline {
+ display: inline !important;
+ }
+ .d-md-inline-block {
+ display: inline-block !important;
+ }
+ .d-md-block {
+ display: block !important;
+ }
+ .d-md-table {
+ display: table !important;
+ }
+ .d-md-table-row {
+ display: table-row !important;
+ }
+ .d-md-table-cell {
+ display: table-cell !important;
+ }
+ .d-md-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+ }
+ .d-md-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+ }
+}
+
+@media (min-width: 992px) {
+ .d-lg-none {
+ display: none !important;
+ }
+ .d-lg-inline {
+ display: inline !important;
+ }
+ .d-lg-inline-block {
+ display: inline-block !important;
+ }
+ .d-lg-block {
+ display: block !important;
+ }
+ .d-lg-table {
+ display: table !important;
+ }
+ .d-lg-table-row {
+ display: table-row !important;
+ }
+ .d-lg-table-cell {
+ display: table-cell !important;
+ }
+ .d-lg-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+ }
+ .d-lg-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+ }
+}
+
+@media (min-width: 1200px) {
+ .d-xl-none {
+ display: none !important;
+ }
+ .d-xl-inline {
+ display: inline !important;
+ }
+ .d-xl-inline-block {
+ display: inline-block !important;
+ }
+ .d-xl-block {
+ display: block !important;
+ }
+ .d-xl-table {
+ display: table !important;
+ }
+ .d-xl-table-row {
+ display: table-row !important;
+ }
+ .d-xl-table-cell {
+ display: table-cell !important;
+ }
+ .d-xl-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+ }
+ .d-xl-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+ }
+}
+
+@media print {
+ .d-print-none {
+ display: none !important;
+ }
+ .d-print-inline {
+ display: inline !important;
+ }
+ .d-print-inline-block {
+ display: inline-block !important;
+ }
+ .d-print-block {
+ display: block !important;
+ }
+ .d-print-table {
+ display: table !important;
+ }
+ .d-print-table-row {
+ display: table-row !important;
+ }
+ .d-print-table-cell {
+ display: table-cell !important;
+ }
+ .d-print-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+ }
+ .d-print-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+ }
+}
+
+.flex-row {
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+}
+
+.flex-column {
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+}
+
+.flex-row-reverse {
+ -ms-flex-direction: row-reverse !important;
+ flex-direction: row-reverse !important;
+}
+
+.flex-column-reverse {
+ -ms-flex-direction: column-reverse !important;
+ flex-direction: column-reverse !important;
+}
+
+.flex-wrap {
+ -ms-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+ -ms-flex-wrap: nowrap !important;
+ flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse {
+ -ms-flex-wrap: wrap-reverse !important;
+ flex-wrap: wrap-reverse !important;
+}
+
+.flex-fill {
+ -ms-flex: 1 1 auto !important;
+ flex: 1 1 auto !important;
+}
+
+.flex-grow-0 {
+ -ms-flex-positive: 0 !important;
+ flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+ -ms-flex-positive: 1 !important;
+ flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+ -ms-flex-negative: 0 !important;
+ flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+ -ms-flex-negative: 1 !important;
+ flex-shrink: 1 !important;
+}
+
+.justify-content-start {
+ -ms-flex-pack: start !important;
+ justify-content: flex-start !important;
+}
+
+.justify-content-end {
+ -ms-flex-pack: end !important;
+ justify-content: flex-end !important;
+}
+
+.justify-content-center {
+ -ms-flex-pack: center !important;
+ justify-content: center !important;
+}
+
+.justify-content-between {
+ -ms-flex-pack: justify !important;
+ justify-content: space-between !important;
+}
+
+.justify-content-around {
+ -ms-flex-pack: distribute !important;
+ justify-content: space-around !important;
+}
+
+.align-items-start {
+ -ms-flex-align: start !important;
+ align-items: flex-start !important;
+}
+
+.align-items-end {
+ -ms-flex-align: end !important;
+ align-items: flex-end !important;
+}
+
+.align-items-center {
+ -ms-flex-align: center !important;
+ align-items: center !important;
+}
+
+.align-items-baseline {
+ -ms-flex-align: baseline !important;
+ align-items: baseline !important;
+}
+
+.align-items-stretch {
+ -ms-flex-align: stretch !important;
+ align-items: stretch !important;
+}
+
+.align-content-start {
+ -ms-flex-line-pack: start !important;
+ align-content: flex-start !important;
+}
+
+.align-content-end {
+ -ms-flex-line-pack: end !important;
+ align-content: flex-end !important;
+}
+
+.align-content-center {
+ -ms-flex-line-pack: center !important;
+ align-content: center !important;
+}
+
+.align-content-between {
+ -ms-flex-line-pack: justify !important;
+ align-content: space-between !important;
+}
+
+.align-content-around {
+ -ms-flex-line-pack: distribute !important;
+ align-content: space-around !important;
+}
+
+.align-content-stretch {
+ -ms-flex-line-pack: stretch !important;
+ align-content: stretch !important;
+}
+
+.align-self-auto {
+ -ms-flex-item-align: auto !important;
+ align-self: auto !important;
+}
+
+.align-self-start {
+ -ms-flex-item-align: start !important;
+ align-self: flex-start !important;
+}
+
+.align-self-end {
+ -ms-flex-item-align: end !important;
+ align-self: flex-end !important;
+}
+
+.align-self-center {
+ -ms-flex-item-align: center !important;
+ align-self: center !important;
+}
+
+.align-self-baseline {
+ -ms-flex-item-align: baseline !important;
+ align-self: baseline !important;
+}
+
+.align-self-stretch {
+ -ms-flex-item-align: stretch !important;
+ align-self: stretch !important;
+}
+
+@media (min-width: 576px) {
+ .flex-sm-row {
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+ }
+ .flex-sm-column {
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+ }
+ .flex-sm-row-reverse {
+ -ms-flex-direction: row-reverse !important;
+ flex-direction: row-reverse !important;
+ }
+ .flex-sm-column-reverse {
+ -ms-flex-direction: column-reverse !important;
+ flex-direction: column-reverse !important;
+ }
+ .flex-sm-wrap {
+ -ms-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+ }
+ .flex-sm-nowrap {
+ -ms-flex-wrap: nowrap !important;
+ flex-wrap: nowrap !important;
+ }
+ .flex-sm-wrap-reverse {
+ -ms-flex-wrap: wrap-reverse !important;
+ flex-wrap: wrap-reverse !important;
+ }
+ .flex-sm-fill {
+ -ms-flex: 1 1 auto !important;
+ flex: 1 1 auto !important;
+ }
+ .flex-sm-grow-0 {
+ -ms-flex-positive: 0 !important;
+ flex-grow: 0 !important;
+ }
+ .flex-sm-grow-1 {
+ -ms-flex-positive: 1 !important;
+ flex-grow: 1 !important;
+ }
+ .flex-sm-shrink-0 {
+ -ms-flex-negative: 0 !important;
+ flex-shrink: 0 !important;
+ }
+ .flex-sm-shrink-1 {
+ -ms-flex-negative: 1 !important;
+ flex-shrink: 1 !important;
+ }
+ .justify-content-sm-start {
+ -ms-flex-pack: start !important;
+ justify-content: flex-start !important;
+ }
+ .justify-content-sm-end {
+ -ms-flex-pack: end !important;
+ justify-content: flex-end !important;
+ }
+ .justify-content-sm-center {
+ -ms-flex-pack: center !important;
+ justify-content: center !important;
+ }
+ .justify-content-sm-between {
+ -ms-flex-pack: justify !important;
+ justify-content: space-between !important;
+ }
+ .justify-content-sm-around {
+ -ms-flex-pack: distribute !important;
+ justify-content: space-around !important;
+ }
+ .align-items-sm-start {
+ -ms-flex-align: start !important;
+ align-items: flex-start !important;
+ }
+ .align-items-sm-end {
+ -ms-flex-align: end !important;
+ align-items: flex-end !important;
+ }
+ .align-items-sm-center {
+ -ms-flex-align: center !important;
+ align-items: center !important;
+ }
+ .align-items-sm-baseline {
+ -ms-flex-align: baseline !important;
+ align-items: baseline !important;
+ }
+ .align-items-sm-stretch {
+ -ms-flex-align: stretch !important;
+ align-items: stretch !important;
+ }
+ .align-content-sm-start {
+ -ms-flex-line-pack: start !important;
+ align-content: flex-start !important;
+ }
+ .align-content-sm-end {
+ -ms-flex-line-pack: end !important;
+ align-content: flex-end !important;
+ }
+ .align-content-sm-center {
+ -ms-flex-line-pack: center !important;
+ align-content: center !important;
+ }
+ .align-content-sm-between {
+ -ms-flex-line-pack: justify !important;
+ align-content: space-between !important;
+ }
+ .align-content-sm-around {
+ -ms-flex-line-pack: distribute !important;
+ align-content: space-around !important;
+ }
+ .align-content-sm-stretch {
+ -ms-flex-line-pack: stretch !important;
+ align-content: stretch !important;
+ }
+ .align-self-sm-auto {
+ -ms-flex-item-align: auto !important;
+ align-self: auto !important;
+ }
+ .align-self-sm-start {
+ -ms-flex-item-align: start !important;
+ align-self: flex-start !important;
+ }
+ .align-self-sm-end {
+ -ms-flex-item-align: end !important;
+ align-self: flex-end !important;
+ }
+ .align-self-sm-center {
+ -ms-flex-item-align: center !important;
+ align-self: center !important;
+ }
+ .align-self-sm-baseline {
+ -ms-flex-item-align: baseline !important;
+ align-self: baseline !important;
+ }
+ .align-self-sm-stretch {
+ -ms-flex-item-align: stretch !important;
+ align-self: stretch !important;
+ }
+}
+
+@media (min-width: 768px) {
+ .flex-md-row {
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+ }
+ .flex-md-column {
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+ }
+ .flex-md-row-reverse {
+ -ms-flex-direction: row-reverse !important;
+ flex-direction: row-reverse !important;
+ }
+ .flex-md-column-reverse {
+ -ms-flex-direction: column-reverse !important;
+ flex-direction: column-reverse !important;
+ }
+ .flex-md-wrap {
+ -ms-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+ }
+ .flex-md-nowrap {
+ -ms-flex-wrap: nowrap !important;
+ flex-wrap: nowrap !important;
+ }
+ .flex-md-wrap-reverse {
+ -ms-flex-wrap: wrap-reverse !important;
+ flex-wrap: wrap-reverse !important;
+ }
+ .flex-md-fill {
+ -ms-flex: 1 1 auto !important;
+ flex: 1 1 auto !important;
+ }
+ .flex-md-grow-0 {
+ -ms-flex-positive: 0 !important;
+ flex-grow: 0 !important;
+ }
+ .flex-md-grow-1 {
+ -ms-flex-positive: 1 !important;
+ flex-grow: 1 !important;
+ }
+ .flex-md-shrink-0 {
+ -ms-flex-negative: 0 !important;
+ flex-shrink: 0 !important;
+ }
+ .flex-md-shrink-1 {
+ -ms-flex-negative: 1 !important;
+ flex-shrink: 1 !important;
+ }
+ .justify-content-md-start {
+ -ms-flex-pack: start !important;
+ justify-content: flex-start !important;
+ }
+ .justify-content-md-end {
+ -ms-flex-pack: end !important;
+ justify-content: flex-end !important;
+ }
+ .justify-content-md-center {
+ -ms-flex-pack: center !important;
+ justify-content: center !important;
+ }
+ .justify-content-md-between {
+ -ms-flex-pack: justify !important;
+ justify-content: space-between !important;
+ }
+ .justify-content-md-around {
+ -ms-flex-pack: distribute !important;
+ justify-content: space-around !important;
+ }
+ .align-items-md-start {
+ -ms-flex-align: start !important;
+ align-items: flex-start !important;
+ }
+ .align-items-md-end {
+ -ms-flex-align: end !important;
+ align-items: flex-end !important;
+ }
+ .align-items-md-center {
+ -ms-flex-align: center !important;
+ align-items: center !important;
+ }
+ .align-items-md-baseline {
+ -ms-flex-align: baseline !important;
+ align-items: baseline !important;
+ }
+ .align-items-md-stretch {
+ -ms-flex-align: stretch !important;
+ align-items: stretch !important;
+ }
+ .align-content-md-start {
+ -ms-flex-line-pack: start !important;
+ align-content: flex-start !important;
+ }
+ .align-content-md-end {
+ -ms-flex-line-pack: end !important;
+ align-content: flex-end !important;
+ }
+ .align-content-md-center {
+ -ms-flex-line-pack: center !important;
+ align-content: center !important;
+ }
+ .align-content-md-between {
+ -ms-flex-line-pack: justify !important;
+ align-content: space-between !important;
+ }
+ .align-content-md-around {
+ -ms-flex-line-pack: distribute !important;
+ align-content: space-around !important;
+ }
+ .align-content-md-stretch {
+ -ms-flex-line-pack: stretch !important;
+ align-content: stretch !important;
+ }
+ .align-self-md-auto {
+ -ms-flex-item-align: auto !important;
+ align-self: auto !important;
+ }
+ .align-self-md-start {
+ -ms-flex-item-align: start !important;
+ align-self: flex-start !important;
+ }
+ .align-self-md-end {
+ -ms-flex-item-align: end !important;
+ align-self: flex-end !important;
+ }
+ .align-self-md-center {
+ -ms-flex-item-align: center !important;
+ align-self: center !important;
+ }
+ .align-self-md-baseline {
+ -ms-flex-item-align: baseline !important;
+ align-self: baseline !important;
+ }
+ .align-self-md-stretch {
+ -ms-flex-item-align: stretch !important;
+ align-self: stretch !important;
+ }
+}
+
+@media (min-width: 992px) {
+ .flex-lg-row {
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+ }
+ .flex-lg-column {
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+ }
+ .flex-lg-row-reverse {
+ -ms-flex-direction: row-reverse !important;
+ flex-direction: row-reverse !important;
+ }
+ .flex-lg-column-reverse {
+ -ms-flex-direction: column-reverse !important;
+ flex-direction: column-reverse !important;
+ }
+ .flex-lg-wrap {
+ -ms-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+ }
+ .flex-lg-nowrap {
+ -ms-flex-wrap: nowrap !important;
+ flex-wrap: nowrap !important;
+ }
+ .flex-lg-wrap-reverse {
+ -ms-flex-wrap: wrap-reverse !important;
+ flex-wrap: wrap-reverse !important;
+ }
+ .flex-lg-fill {
+ -ms-flex: 1 1 auto !important;
+ flex: 1 1 auto !important;
+ }
+ .flex-lg-grow-0 {
+ -ms-flex-positive: 0 !important;
+ flex-grow: 0 !important;
+ }
+ .flex-lg-grow-1 {
+ -ms-flex-positive: 1 !important;
+ flex-grow: 1 !important;
+ }
+ .flex-lg-shrink-0 {
+ -ms-flex-negative: 0 !important;
+ flex-shrink: 0 !important;
+ }
+ .flex-lg-shrink-1 {
+ -ms-flex-negative: 1 !important;
+ flex-shrink: 1 !important;
+ }
+ .justify-content-lg-start {
+ -ms-flex-pack: start !important;
+ justify-content: flex-start !important;
+ }
+ .justify-content-lg-end {
+ -ms-flex-pack: end !important;
+ justify-content: flex-end !important;
+ }
+ .justify-content-lg-center {
+ -ms-flex-pack: center !important;
+ justify-content: center !important;
+ }
+ .justify-content-lg-between {
+ -ms-flex-pack: justify !important;
+ justify-content: space-between !important;
+ }
+ .justify-content-lg-around {
+ -ms-flex-pack: distribute !important;
+ justify-content: space-around !important;
+ }
+ .align-items-lg-start {
+ -ms-flex-align: start !important;
+ align-items: flex-start !important;
+ }
+ .align-items-lg-end {
+ -ms-flex-align: end !important;
+ align-items: flex-end !important;
+ }
+ .align-items-lg-center {
+ -ms-flex-align: center !important;
+ align-items: center !important;
+ }
+ .align-items-lg-baseline {
+ -ms-flex-align: baseline !important;
+ align-items: baseline !important;
+ }
+ .align-items-lg-stretch {
+ -ms-flex-align: stretch !important;
+ align-items: stretch !important;
+ }
+ .align-content-lg-start {
+ -ms-flex-line-pack: start !important;
+ align-content: flex-start !important;
+ }
+ .align-content-lg-end {
+ -ms-flex-line-pack: end !important;
+ align-content: flex-end !important;
+ }
+ .align-content-lg-center {
+ -ms-flex-line-pack: center !important;
+ align-content: center !important;
+ }
+ .align-content-lg-between {
+ -ms-flex-line-pack: justify !important;
+ align-content: space-between !important;
+ }
+ .align-content-lg-around {
+ -ms-flex-line-pack: distribute !important;
+ align-content: space-around !important;
+ }
+ .align-content-lg-stretch {
+ -ms-flex-line-pack: stretch !important;
+ align-content: stretch !important;
+ }
+ .align-self-lg-auto {
+ -ms-flex-item-align: auto !important;
+ align-self: auto !important;
+ }
+ .align-self-lg-start {
+ -ms-flex-item-align: start !important;
+ align-self: flex-start !important;
+ }
+ .align-self-lg-end {
+ -ms-flex-item-align: end !important;
+ align-self: flex-end !important;
+ }
+ .align-self-lg-center {
+ -ms-flex-item-align: center !important;
+ align-self: center !important;
+ }
+ .align-self-lg-baseline {
+ -ms-flex-item-align: baseline !important;
+ align-self: baseline !important;
+ }
+ .align-self-lg-stretch {
+ -ms-flex-item-align: stretch !important;
+ align-self: stretch !important;
+ }
+}
+
+@media (min-width: 1200px) {
+ .flex-xl-row {
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+ }
+ .flex-xl-column {
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+ }
+ .flex-xl-row-reverse {
+ -ms-flex-direction: row-reverse !important;
+ flex-direction: row-reverse !important;
+ }
+ .flex-xl-column-reverse {
+ -ms-flex-direction: column-reverse !important;
+ flex-direction: column-reverse !important;
+ }
+ .flex-xl-wrap {
+ -ms-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+ }
+ .flex-xl-nowrap {
+ -ms-flex-wrap: nowrap !important;
+ flex-wrap: nowrap !important;
+ }
+ .flex-xl-wrap-reverse {
+ -ms-flex-wrap: wrap-reverse !important;
+ flex-wrap: wrap-reverse !important;
+ }
+ .flex-xl-fill {
+ -ms-flex: 1 1 auto !important;
+ flex: 1 1 auto !important;
+ }
+ .flex-xl-grow-0 {
+ -ms-flex-positive: 0 !important;
+ flex-grow: 0 !important;
+ }
+ .flex-xl-grow-1 {
+ -ms-flex-positive: 1 !important;
+ flex-grow: 1 !important;
+ }
+ .flex-xl-shrink-0 {
+ -ms-flex-negative: 0 !important;
+ flex-shrink: 0 !important;
+ }
+ .flex-xl-shrink-1 {
+ -ms-flex-negative: 1 !important;
+ flex-shrink: 1 !important;
+ }
+ .justify-content-xl-start {
+ -ms-flex-pack: start !important;
+ justify-content: flex-start !important;
+ }
+ .justify-content-xl-end {
+ -ms-flex-pack: end !important;
+ justify-content: flex-end !important;
+ }
+ .justify-content-xl-center {
+ -ms-flex-pack: center !important;
+ justify-content: center !important;
+ }
+ .justify-content-xl-between {
+ -ms-flex-pack: justify !important;
+ justify-content: space-between !important;
+ }
+ .justify-content-xl-around {
+ -ms-flex-pack: distribute !important;
+ justify-content: space-around !important;
+ }
+ .align-items-xl-start {
+ -ms-flex-align: start !important;
+ align-items: flex-start !important;
+ }
+ .align-items-xl-end {
+ -ms-flex-align: end !important;
+ align-items: flex-end !important;
+ }
+ .align-items-xl-center {
+ -ms-flex-align: center !important;
+ align-items: center !important;
+ }
+ .align-items-xl-baseline {
+ -ms-flex-align: baseline !important;
+ align-items: baseline !important;
+ }
+ .align-items-xl-stretch {
+ -ms-flex-align: stretch !important;
+ align-items: stretch !important;
+ }
+ .align-content-xl-start {
+ -ms-flex-line-pack: start !important;
+ align-content: flex-start !important;
+ }
+ .align-content-xl-end {
+ -ms-flex-line-pack: end !important;
+ align-content: flex-end !important;
+ }
+ .align-content-xl-center {
+ -ms-flex-line-pack: center !important;
+ align-content: center !important;
+ }
+ .align-content-xl-between {
+ -ms-flex-line-pack: justify !important;
+ align-content: space-between !important;
+ }
+ .align-content-xl-around {
+ -ms-flex-line-pack: distribute !important;
+ align-content: space-around !important;
+ }
+ .align-content-xl-stretch {
+ -ms-flex-line-pack: stretch !important;
+ align-content: stretch !important;
+ }
+ .align-self-xl-auto {
+ -ms-flex-item-align: auto !important;
+ align-self: auto !important;
+ }
+ .align-self-xl-start {
+ -ms-flex-item-align: start !important;
+ align-self: flex-start !important;
+ }
+ .align-self-xl-end {
+ -ms-flex-item-align: end !important;
+ align-self: flex-end !important;
+ }
+ .align-self-xl-center {
+ -ms-flex-item-align: center !important;
+ align-self: center !important;
+ }
+ .align-self-xl-baseline {
+ -ms-flex-item-align: baseline !important;
+ align-self: baseline !important;
+ }
+ .align-self-xl-stretch {
+ -ms-flex-item-align: stretch !important;
+ align-self: stretch !important;
+ }
+}
+/*# sourceMappingURL=bootstrap-grid.css.map */
\ No newline at end of file
--- /dev/null
+
+body{
+ background-color: #FAFAFA;
+ text-align: left;
+ margin:0px;
+}
+header{
+ background-color: white;
+ padding: 2em 0 2em 0;
+}
+main{
+ margin-top: 20px;
+}
+h1{
+
+}
+h2{
+ text-align: left;
+ margin: 0px;
+}
+h3{
+ text-align: left;
+ margin: 0px;
+}
+h4{
+ text-align: left;
+ margin: 0px;
+}
+h5{
+ text-align: left;
+ margin: 0px;
+}
+p{
+ text-align: left;
+ margin: 0px;
+}
+footer{
+ background: #EDEDED;
+ padding: 3em 0 2em 0;
+ margin-top: 2em;
+}
+#tbody_thumbnail_files tr:nth-child(odd){
+ background-color: #F1F1F1
+}
+#tbody_thumbnail_files tr:nth-child(even){
+ background-color: #FFFFFF
+}
+#color_table_tbody tr:nth-child(odd){
+ background-color: #F1F1F1
+}
+#color_table_tbody tr:nth-child(even){
+ background-color: #FFFFFF
+}
+input[type="number"]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+canvas{
+ flex: inherit;
+ padding-right: 0;
+ padding-left: 0;
+ background-color: white;
+ position: relative;
+}
+#canvasblock1{
+ max-width:100%;
+}
+#canvasblock2{
+ max-width:100%;
+}
+#canvasblock3{
+ max-width:100%;
+}
+#blending{
+ margin: 10px;
+}
+
+
--- /dev/null
+body{
+ background-color: #FAFAFA;
+ text-align: left;
+ margin:0px;
+}
+header{
+ background-color: white;
+ padding: 2em 0 2em 0;
+}
+main{
+ margin-top: 20px;
+}
+footer{
+ background: #EDEDED;
+ padding: 3em 0 2em 0;
+ margin-top: 2em;
+}
+#em_canvas{
+ background-color: white;
+}
\ No newline at end of file
--- /dev/null
+
+.coordinate_canvas1,
+.coordinate_canvas2{
+ background-color: white;
+ border-collapse: collapse;
+ width: 12em;
+}
+.coordinate_canvas1 th,
+.coordinate_canvas1 td{
+ width: 12em;
+}
+
+.coordinate_canvas2 th,
+.coordinate_canvas2 td{
+ /*table-layout: fixed;*/
+ width: 8em;
+}
+.coordinate_tbody tr:nth-child(odd){
+ background-color: #F1F1F1
+ }
+.coordinate_tbody tr:nth-child(even){
+ background-color: #FFFFFF
+}
+.coordinate_thead{
+ background-color: white;
+ text-align: center;
+ display: block;
+}
+.coordinate_tbody{
+ display: block;
+ text-align: center;
+ height: 512px;
+ overflow-y: scroll;
+ overflow-x: scroll;
+}
--- /dev/null
+
+body{
+ background-color: #FAFAFA;
+ margin: 0px;
+ text-align: left;
+}
+
+header{
+ background-color: white;
+ padding: 2em 0 2em 0;
+}
+main{
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+h2{
+ text-align: left;
+ margin: 0px;
+}
+p{
+ text-align: left;
+ margin: 0px;
+}
+footer{
+ background: #EDEDED;
+ padding: 3em 0 2em 0;
+ margin-top: 2em;
+}
+
+input[type="number"]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+#coordinate_canvas_block{
+ max-width: 100%;
+}
+#coordinate_canvas{
+ flex: inherit;
+ padding-right: 0;
+ padding-left: 0;
+ background-color: white;
+ position: relative;
+}
+#manipulation_area{
+
+}
+#make_list_area{
+ margin-top: 5px;
+}
+
+#table_area{
+ width: 90%;
+ margin-right: auto;
+ margin-left: auto;
+}
+#table{
+ text-align: center;
+}
+#coordinate_table{
+ background-color: white;
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin-right: 0px;
+ max-height: 15em;
+}
+
+#coordinate_table_thead{
+ background-color: white;
+ text-align: center;
+ display: block;
+}
+#coordinate_table_tbody{
+ display: block;
+ text-align: right;
+ height: 512px;
+ overflow-y: scroll;
+}
+#coordinate_table th,
+#coordinate_table td{
+ table-layout: fixed;
+}
+#coordinate_table_tbody tr:nth-child(odd){
+ background-color: #F1F1F1
+}
+#coordinate_table_tbody tr:nth-child(even){
+ background-color: #FFFFFF
+}
+/*column of button*/
+#coordinate_table_tbody td{
+ text-align: center;
+}
+
+#coordinate_table td:nth-child(1),
+#coordinate_table th:nth-child(1){
+ width: 5em;
+}
+
+#coordinate_table td:nth-child(2),
+#coordinate_table th:nth-child(2){
+ width: 7em;
+}
+
+#coordinate_table td:nth-child(3),
+#coordinate_table th:nth-child(3){
+ width: 7em;
+}
+
+#coordinate_table td:nth-child(4),
+#coordinate_table th:nth-child(4){
+ width: 7em;
+}
+
+#coordinate_table td:nth-child(5),
+#coordinate_table th:nth-child(5){
+ width: 15em;
+}
+/*******/
+
--- /dev/null
+header{
+ text-align: center;
+ background-color: white;
+ padding-top: 100px;
+ padding-bottom: 100px;
+}
+body{
+ background-color: #FAFAFA;
+ margin: 0px;
+ text-align: left;
+}
+main{
+ margin-top: 20px;
+}
+footer{
+ background: #EDEDED;
+ padding: 3em 0 2em 0;
+ margin-top: 2em;
+}
+p{
+ margin: 0px;
+}
+h1{
+ margin: 0px;
+}
+h3{
+ margin: 0px;
+}
+h5{
+ margin: 0px;
+}
+a{
+ margin: 3px;
+ text-align: center;
+ text-decoration: none;
+ display: block;
+ font-weight: 800;
+ font-size: 20px;
+ color: blue;
+}
+ul{
+ list-style-type: none;
+}
+li{
+ background-color: white;
+ width: 50%;
+ border: 1px solid black;
+ margin-top: inherit;
+ margin-right: auto;
+ margin-left: auto;
+}
+.nodelist_area{
+ margin-left: 10px;
+}
+.nodelist{
+ list-style-type: disc;
+}
+.nodelist li{
+ border: none;
+ margin-left: 0;
+ width: 100%;
+}
--- /dev/null
+body{
+ background-color: #FAFAFA;
+ text-align: left;
+ margin:0px;
+}
+header{
+ background-color: white;
+ padding: 2em 0 2em 0;
+}
+main{
+ margin-top: 20px;
+ text-align: center;
+}
+
+table{
+
+ margin-left: auto;
+ margin-right: auto;
+}
\ No newline at end of file
--- /dev/null
+js-tabs ul.tab_menu{
+ list-style-type:none;
+ margin:0px;
+ /*padding:0px;
+ */
+ }
+ .js-tabs ul.tab_menu li{
+ display: table-cell;
+ padding-left: auto;
+ padding-right: auto;
+ /*
+ background:#666;
+ margin:0px;
+ padding:2px;
+ */
+ }
+ .js-tabs .tab_menu li a{
+ padding: 9px;
+ padding-right: 50px;
+ padding-left: 50px;
+ border: solid 1px black;
+ }
+ .js-tabs .tab_menu li a:link,
+ .js-tabs .tab_menu li a:visited{
+ background-color:rgb(228, 228, 228);
+ color:rgb(0, 0, 0);
+ }
+ .js-tabs .tab_menu li a.active:link,
+ .js-tabs .tab_menu li a.active:visited{
+ background-color:rgb(0, 0, 0);
+ color:rgb(255, 255, 255);
+ }
+ .js-tabs .tab_menu li a:hover{
+ background-color:rgb(194, 194, 194);
+ color:rgb(0, 0, 0);
+ }
+ .tab_content{
+ position:relative;
+ /*height:200px;*/
+ }
+ /*
+ .tab_content div.page{
+ width:-webkit-fill-available;
+ height:-webkit-fill-available;
+ position:absolute;
+ color:#222;
+ }
+ */
+ /*
+ #page1-1{
+ background-color:#aaa;;
+ }
+ #page1-2{
+ background-color:#aaa;;
+ }
+ #page1-3{
+ background-color:#aaa;;
+ }
+ */
\ No newline at end of file
+++ /dev/null
-$(function() {
- var canvas = $('#canvasCLEM');
- var ctx = canvas[0].getContext("2d");
-
- $('#CLEMimg').on('change', function CLEMmap() { //画像を選択時に呼び出される
-
- if (window.File) { //FileAPIを未対応ブラウザではアラート
-
- var files = $('#CLEMimg')[0].files[0];
- var reader = new FileReader();
- var img = new Image();
-
- reader.onload = function(evt) {
- img.onload = function() {
- // 参考 https://qiita.com/PG0721/items/599ba2921b8339700fe3
- var imgAspect = img.width / img.height;
- ctx.clearRect(0, 0, 512, 512);
- if (imgAspect >= 1) { //画像が横長
- left = 0;
- width = ctx.canvas.width;
- height = ctx.canvas.height / imgAspect;
- to = (ctx.canvas.height - height) / 2;
- } else { //画像が縦長
- to = 0;
- width = ctx.canvas.width * imgAspect;
- height = ctx.canvas.height;
- left = (ctx.canvas.width - width) / 2;
- }
- ctx.drawImage(img, 0, 0, img.width, img.height, left, to, width, height); //画像をアスペクト比を維持して中心に表示
- }
- img.src = evt.target.result;
- }
- reader.readAsDataURL(files);
- } else {
- window.alert("本ブラウザではFile APIが使えません");
- }
- }); //END CLEMmap()
-
- $('#setClemButton').on('click', function setClem() {
- var tbody = document.getElementById("listCoord");
- var rowlen = tbody.rows.length; //行数
- // LM X Y EM X Y Mov Del
- //cells 0 1 2 3 4 5 6 7
-
- if (rowlen >= 2) {
-
- var LmVec = new Array();
- var EmVec = new Array();
- var rad = 0;
- for (var i = 0; i < (rowlen - 1); i++) {
- LmVec[i] = new Object();
-
- LmVec[i].x = tbody.rows[i+1].cells[1].innerText - tbody.rows[0].cells[1].innerText;
- LmVec[i].y = tbody.rows[i+1].cells[2].innerText - tbody.rows[0].cells[2].innerText;
- // alert(LmVec[i].x+" , "+LmVec[i].y);
- EmVec[i] = new Object();
- EmVec[i].x = tbody.rows[i+1].cells[4].innerText - tbody.rows[0].cells[4].innerText;
- EmVec[i].y = tbody.rows[i+1].cells[5].innerText - tbody.rows[0].cells[5].innerText;
- // alert(EmVec[i].x+" , "+EmVec[i].y);
- var dist = Math.sqrt(LmVec[i].x * LmVec[i].x + LmVec[i].y * LmVec[i].y) * Math.sqrt(EmVec[i].x * EmVec[i].x + EmVec[i].y * EmVec[i].y);
- if (dist == 0) {
- alert("座標をセットし直して下さい");
- } else {
- var cos = (LmVec[i].x * EmVec[i].x + LmVec[i].y * EmVec[i].y) / dist;
- var sin = (LmVec[i].x * EmVec[i].y - LmVec[i].y * EmVec[i].x) / dist;
-
- //alert("cos:"+cos+" sin:"+sin);
- var rad1 = Math.acos(cos);
- var rad2 = Math.asin(sin);
-
- //alert("rad1:"+rad1+" rad2:"+rad2);
- if (cos >= 0 && sin >= 0) { //0<rad<pi/2
- rad += (-1) * rad1;
- } else if (cos >= 0 && sin < 0) { //-2/pi<rad<0
- rad += (-1) * rad2;
- } else if (cos < 0 && sin >= 0) { //pi/2<rad<pi
- rad += (-1) * rad1;
- } else { // -pi<rad<-pi/2
- rad += rad1;
- }
- }
- }
- rad = rad / (rowlen - 1);
- alert(rad * 180 / Math.PI + " 度");
-
- ctx.clearRect(0, 0, 512, 512);
- ctx.translate(256, 256);
- ctx.rotate(-1 * rad);
- ctx.translate(-256, -256);
- $('#CLEMimg').change();
- /*for(i=0;i<rowlen;i++){
- var temp={x:0,y:0};
- temp.x=tbody.rows[i].cells[1].innerText*Math.cos(rad)-tbody.rows[i].cells[2].innerText*Math.sin(rad);
- temp.y=tbody.rows[i].cells[1].innerText*Math.sin(rad)+tbody.rows[i].cells[2].innerText*Math.cos(rad);
- temp.x=Math.round(temp.x);
- temp.y=Math.round(temp.y);
- tbody.rows[i].cells[1].innerHTML=temp.x;
- tbody.rows[i].cells[2].innerHTML=temp.y;
- alert(temp.x+" , "+temp.y);
- }*/
-
- }
- }); //END setClem()
-
-}); //END $(function(){
-
-
-function calcClemCoord(event) { //CLEM画像のポインター位置の座標を返す
-
- //参考 https://lab.syncer.jp/Web/JavaScript/Snippet/12/
- var clickX = event.pageX;
- var clickY = event.pageY;
-
- // 要素の位置を取得
- var clientRect = document.getElementById("canvasCLEM").getBoundingClientRect();
- var positionX = clientRect.left + window.pageXOffset;
- var positionY = clientRect.top + window.pageYOffset;
-
- // 要素内におけるクリック位置を計算
- // 要素の中心を0にする
- var cod = new Object();
- cod.x = clickX - positionX - 255;
- cod.y = clickY - positionY - 255;
- return cod;
-}
-/*
-document.getElementById("canvasSimplePhoto").addEventListener('mousemove', function( event ) {//EM画像にマウスオーバー時
- var coordinate=document.getElementById("EMcoordinate");
- var cod = calcEmCoord(event);
- coordinate.childNodes[0].data= "X:"+cod.x+" , Y:"+cod.y;
- });
-*/
-document.getElementById("canvasCLEM").addEventListener('mousemove', function(event) { //CLEM画像にマウスオーバー時
- var coordinate = document.getElementById("CLEMcoordinate");
- var cod = calcClemCoord(event);
- coordinate.childNodes[0].data = "X:" + cod.x + " , Y:" + cod.y;
-});
-
-function setLmCoordinate(innerTd) {
-
- var tr = innerTd.parentNode.parentNode; //tr
- tr.cells[0].innerHTML = '<input type="button" value="Set" onclick="cancelSetLmCoordinate(this)" style="background-color:red;" />'
- tr.cells[0].state = "on";
-
- document.getElementById("canvasCLEM").addEventListener('click', function(event) {
- if (tr.cells[0].state == "on") {
- var cod = calcClemCoord(event);
- tr.cells[1].innerHTML = cod.x;
- tr.cells[2].innerHTML = cod.y;
- tr.cells[0].innerHTML = '<input type="button" value="Set" onclick="setLmCoordinate(this)" />';
- tr.cells[0].state = "off";
- }
- });
-
-
-}
-
-function cancelSetLmCoordinate(innerTd) {
- var tr = innerTd.parentNode.parentNode; //tr
- tr.cells[0].innerHTML = '<input type="button" value="Set" onclick="setLmCoordinate(this)" />';
- tr.cells[0].state = "off";
-}
-
-document.getElementById("addList").addEventListener('click', function addList(event) {
-
- // tbody要素に指定したIDを取得し、変数「tbody」に代入
- var tbody = document.getElementById("listCoord");
- var row = tbody.insertRow(-1); //tr
- var cellLM0 = row.insertCell(-1); //td0
- cellLM0.state = "off";
- var cellLMX = row.insertCell(-1); //td1
- var cellLMY = row.insertCell(-1); //td2
- var cellEM0 = row.insertCell(-1); //td3
- var cellEMX = row.insertCell(-1); //td4
- var cellEMY = row.insertCell(-1); //td5
- var cellMoveButton = row.insertCell(-1); //td6
- var cellDelButton = row.insertCell(-1); //td7
- var SetLmButton = '<input type="button" value="Set" onclick="setLmCoordinate(this)" />';
- var DelButton = '<input type="button" value="Delete" onclick="deleteList(this)" />';
- var SetButton = '<input type="button" value="Set" onclick="setEmCoordinate(this)" />';
- var MoveButton = '<input type="button" value="Move" onclick="moveEmCoordinate(this)" />';
- cellLM0.innerHTML = SetLmButton;
- cellDelButton.innerHTML = DelButton;
- cellEM0.innerHTML = SetButton;
- cellMoveButton.innerHTML = MoveButton;
- // LM X Y EM X Y Mov Del
- //cells 0 1 2 3 4 5 6 7
-});
-
-function deleteList(innerTd) {
- var tr = innerTd.parentNode.parentNode; //tr
- tr.parentNode.deleteRow(tr.sectionRowIndex);
-}
-
-function setEmCoordinate(innerTd) {
- var movexr = $("#movex").val();
- var moveyr = $("#movey").val();
- var tr = innerTd.parentNode.parentNode; //tr
- cellEMX = tr.cells[4];
- cellEMY = tr.cells[5];
- cellEMX.innerHTML = parseInt(movexr);
- cellEMY.innerHTML = parseInt(moveyr);
-}
-
-function moveEmCoordinate(innerTd) {
- var tbody = document.getElementById("listCoord");
- var rowlen = tbody.rows.length //行数
- var s = 0;
- var t = 0;
- // LM X Y EM X Y Mov Del
- //cells 0 1 2 3 4 5 6 7
-
- if (rowlen >= 3) {
- var target = {
- x: innerTd.parentNode.parentNode.cells[1].innerText - tbody.rows[0].cells[1].innerText,
- y: innerTd.parentNode.parentNode.cells[2].innerText -tbody.rows[0].cells[2].innerText
- };
- var goal = {
- x: 0,
- y: 0
- };
- var LmVec = new Array();
- var EmVec = new Array();
- var rad = 0;
-
- alert("init x:" + goal.x + " ,y:" + goal.y);
- for (var i = 0; i < (rowlen - 2); i++) {
- LmVec[i] = new Object();
-
- LmVec[i].x = tbody.rows[i+1].cells[1].innerText - tbody.rows[0].cells[1].innerText;
- LmVec[i].y = tbody.rows[i+1].cells[2].innerText - tbody.rows[0].cells[2].innerText;
- // alert(LmVec[i].x+" , "+LmVec[i].y);
- EmVec[i] = new Object();
- EmVec[i].x = tbody.rows[i+1].cells[4].innerText - tbody.rows[0].cells[4].innerText;
- EmVec[i].y = tbody.rows[i+1].cells[5].innerText - tbody.rows[0].cells[5].innerText;
- }
-
- //target.x=LmVec.x*s+LmVec.y*t p=ax+by
- //target.y=EmVec.x*s+EmVec.y*t q=cx+dy
- for (var i = 0; i < (rowlen - 3); i++) { //解法：クラメルの公式
-
- alert("a:"+LmVec[0].x +" d:"+ LmVec[i + 1].y +" b:"+ LmVec[0].y +" c:"+LmVec[i + 1].x);
- var Det = LmVec[0].x * LmVec[i + 1].y - LmVec[0].y * LmVec[i + 1].x; //ad-bc
- alert("det:" + Det);
- if (Det == 0) {
- //解が一位に定まらない
- } else {
- alert("target.x:"+target.x+"target.y:"+target.y);
- var s = (target.x * LmVec[i + 1].y - LmVec[0].y * target.y) / Det; //ed-fb/det
- var t = (LmVec[0].x * target.y - target.x * LmVec[i + 1].x) / Det; //af-ec/det
- alert("s:" + s + " ,t:" + t);
- goal.x += s * EmVec[0].x + t * EmVec[i + 1].x;
- goal.y += s * EmVec[0].y + t * EmVec[i + 1].y;
- }
- }
-
-
-
- goal.x = goal.x / (rowlen - 3);
- goal.y = goal.y / (rowlen - 3);
-
- alert("x:" + goal.x + " ,y:" + goal.y+" rowlen:"+(rowlen-3));
- alert("x0:" +tbody.rows[0].cells[4].innerText+ " ,y0:" + tbody.rows[0].cells[5].innerText);
- goal.x=goal.x+parseInt(tbody.rows[0].cells[4].innerText);
- goal.y=goal.y+parseInt(tbody.rows[0].cells[5].innerText);
- goal.x = Math.round(goal.x);
- goal.y = Math.round(goal.y);
- alert("x:" + goal.x + " ,y:" + goal.y+" rowlen:"+(rowlen-3));
-
- var movexr = $("#movex").val();
- var moveyr = $("#movey").val();
- var movezr = $("#movez").val();
- console.log("movex="+movexr);
- console.log("movey="+moveyr);
- movexr = goal.x;
- moveyr = goal.y;
- innerTd.parentNode.parentNode.cells[4].innerHTML=goal.x;
- innerTd.parentNode.parentNode.cells[5].innerHTML=goal.y;
- $("#movex").val(String(movexr));
- $("#movey").val(String(moveyr));
-
- $.ajax({
- type:"GET",
- url:"http://" +UrlElement['sendIpAddress']+
- ":"+UrlElement['sendPortNumber']+"/"+UrlElement['sendManufacturer']+
- "/set/stagea?x="+encodeURIComponent(movexr)+
- "&y="+encodeURIComponent(moveyr)+
- "&z="+encodeURIComponent(movezr)+
- "&a="+encodeURIComponent(movezr),
- success: function(data){
- console.log(data);//string型
- }
-
- });
-
- } else {
- alert("LM座標を3つ、EM座標を2つ以上指定して下さい");
- }
-} // END moveEmCoordinate(innerTd);
-
-
-//var txt=document.createTextNode("X:"+cod.x+" , Y:"+cod.y);
-//first.appendChild(txt);
-//coordinate.removeChild();
-// var txt=document.createTextNode();
-// coordinate.appendChild(txt);
+++ /dev/null
-function getAjax(){
- var ajax = null;
- try{
- ajax = new XMLHttpRequest();
- }catch(e){
- try{
- ajax = new ActiveXObject("Msxml2.XMLHTTP");
- }catch(e){
- try{
- ajax = new ActiveXObject("Microsoft.XMLHTTP");
- }catch(e){
- alert("Not Init");
- }
- }
- }
- return ajax;
-}
+++ /dev/null
-/*!\r
- * Bootstrap v3.2.0 (http://getbootstrap.com)\r
- * Copyright 2011-2014 Twitter, Inc.\r
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\r
- */\r
-\r
-/*!\r
- * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=7f293a1dbd02eb1680cc)\r
- * Config saved to config.json and https://gist.github.com/7f293a1dbd02eb1680cc\r
- */\r
-if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(t){"use strict";function e(e){return this.each(function(){var i=t(this),s=i.data("bs.alert");s||i.data("bs.alert",s=new o(this)),"string"==typeof e&&s[e].call(i)})}var i='[data-dismiss="alert"]',o=function(e){t(e).on("click",i,this.close)};o.VERSION="3.2.0",o.prototype.close=function(e){function i(){n.detach().trigger("closed.bs.alert").remove()}var o=t(this),s=o.attr("data-target");s||(s=o.attr("href"),s=s&&s.replace(/.*(?=#[^\s]*$)/,""));var n=t(s);e&&e.preventDefault(),n.length||(n=o.hasClass("alert")?o:o.parent()),n.trigger(e=t.Event("close.bs.alert")),e.isDefaultPrevented()||(n.removeClass("in"),t.support.transition&&n.hasClass("fade")?n.one("bsTransitionEnd",i).emulateTransitionEnd(150):i())};var s=t.fn.alert;t.fn.alert=e,t.fn.alert.Constructor=o,t.fn.alert.noConflict=function(){return t.fn.alert=s,this},t(document).on("click.bs.alert.data-api",i,o.prototype.close)}(jQuery),+function(t){"use strict";function e(e){return this.each(function(){var o=t(this),s=o.data("bs.button"),n="object"==typeof e&&e;s||o.data("bs.button",s=new i(this,n)),"toggle"==e?s.toggle():e&&s.setState(e)})}var i=function(e,o){this.$element=t(e),this.options=t.extend({},i.DEFAULTS,o),this.isLoading=!1};i.VERSION="3.2.0",i.DEFAULTS={loadingText:"loading..."},i.prototype.setState=function(e){var i="disabled",o=this.$element,s=o.is("input")?"val":"html",n=o.data();e+="Text",null==n.resetText&&o.data("resetText",o[s]()),o[s](null==n[e]?this.options[e]:n[e]),setTimeout(t.proxy(function(){"loadingText"==e?(this.isLoading=!0,o.addClass(i).attr(i,i)):this.isLoading&&(this.isLoading=!1,o.removeClass(i).removeAttr(i))},this),0)},i.prototype.toggle=function(){var t=!0,e=this.$element.closest('[data-toggle="buttons"]');if(e.length){var i=this.$element.find("input");"radio"==i.prop("type")&&(i.prop("checked")&&this.$element.hasClass("active")?t=!1:e.find(".active").removeClass("active")),t&&i.prop("checked",!this.$element.hasClass("active")).trigger("change")}t&&this.$element.toggleClass("active")};var o=t.fn.button;t.fn.button=e,t.fn.button.Constructor=i,t.fn.button.noConflict=function(){return t.fn.button=o,this},t(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(i){var o=t(i.target);o.hasClass("btn")||(o=o.closest(".btn")),e.call(o,"toggle"),i.preventDefault()})}(jQuery),+function(t){"use strict";function e(e){return this.each(function(){var o=t(this),s=o.data("bs.carousel"),n=t.extend({},i.DEFAULTS,o.data(),"object"==typeof e&&e),r="string"==typeof e?e:n.slide;s||o.data("bs.carousel",s=new i(this,n)),"number"==typeof e?s.to(e):r?s[r]():n.interval&&s.pause().cycle()})}var i=function(e,i){this.$element=t(e).on("keydown.bs.carousel",t.proxy(this.keydown,this)),this.$indicators=this.$element.find(".carousel-indicators"),this.options=i,this.paused=this.sliding=this.interval=this.$active=this.$items=null,"hover"==this.options.pause&&this.$element.on("mouseenter.bs.carousel",t.proxy(this.pause,this)).on("mouseleave.bs.carousel",t.proxy(this.cycle,this))};i.VERSION="3.2.0",i.DEFAULTS={interval:5e3,pause:"hover",wrap:!0},i.prototype.keydown=function(t){switch(t.which){case 37:this.prev();break;case 39:this.next();break;default:return}t.preventDefault()},i.prototype.cycle=function(e){return e||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(t.proxy(this.next,this),this.options.interval)),this},i.prototype.getItemIndex=function(t){return this.$items=t.parent().children(".item"),this.$items.index(t||this.$active)},i.prototype.to=function(e){var i=this,o=this.getItemIndex(this.$active=this.$element.find(".item.active"));return e>this.$items.length-1||0>e?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){i.to(e)}):o==e?this.pause().cycle():this.slide(e>o?"next":"prev",t(this.$items[e]))},i.prototype.pause=function(e){return e||(this.paused=!0),this.$element.find(".next, .prev").length&&t.support.transition&&(this.$element.trigger(t.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},i.prototype.next=function(){return this.sliding?void 0:this.slide("next")},i.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},i.prototype.slide=function(e,i){var o=this.$element.find(".item.active"),s=i||o[e](),n=this.interval,r="next"==e?"left":"right",a="next"==e?"first":"last",l=this;if(!s.length){if(!this.options.wrap)return;s=this.$element.find(".item")[a]()}if(s.hasClass("active"))return this.sliding=!1;var h=s[0],p=t.Event("slide.bs.carousel",{relatedTarget:h,direction:r});if(this.$element.trigger(p),!p.isDefaultPrevented()){if(this.sliding=!0,n&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var c=t(this.$indicators.children()[this.getItemIndex(s)]);c&&c.addClass("active")}var d=t.Event("slid.bs.carousel",{relatedTarget:h,direction:r});return t.support.transition&&this.$element.hasClass("slide")?(s.addClass(e),s[0].offsetWidth,o.addClass(r),s.addClass(r),o.one("bsTransitionEnd",function(){s.removeClass([e,r].join(" ")).addClass("active"),o.removeClass(["active",r].join(" ")),l.sliding=!1,setTimeout(function(){l.$element.trigger(d)},0)}).emulateTransitionEnd(1e3*o.css("transition-duration").slice(0,-1))):(o.removeClass("active"),s.addClass("active"),this.sliding=!1,this.$element.trigger(d)),n&&this.cycle(),this}};var o=t.fn.carousel;t.fn.carousel=e,t.fn.carousel.Constructor=i,t.fn.carousel.noConflict=function(){return t.fn.carousel=o,this},t(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(i){var o,s=t(this),n=t(s.attr("data-target")||(o=s.attr("href"))&&o.replace(/.*(?=#[^\s]+$)/,""));if(n.hasClass("carousel")){var r=t.extend({},n.data(),s.data()),a=s.attr("data-slide-to");a&&(r.interval=!1),e.call(n,r),a&&n.data("bs.carousel").to(a),i.preventDefault()}}),t(window).on("load",function(){t('[data-ride="carousel"]').each(function(){var i=t(this);e.call(i,i.data())})})}(jQuery),+function(t){"use strict";function e(e){e&&3===e.which||(t(s).remove(),t(n).each(function(){var o=i(t(this)),s={relatedTarget:this};o.hasClass("open")&&(o.trigger(e=t.Event("hide.bs.dropdown",s)),e.isDefaultPrevented()||o.removeClass("open").trigger("hidden.bs.dropdown",s))}))}function i(e){var i=e.attr("data-target");i||(i=e.attr("href"),i=i&&/#[A-Za-z]/.test(i)&&i.replace(/.*(?=#[^\s]*$)/,""));var o=i&&t(i);return o&&o.length?o:e.parent()}function o(e){return this.each(function(){var i=t(this),o=i.data("bs.dropdown");o||i.data("bs.dropdown",o=new r(this)),"string"==typeof e&&o[e].call(i)})}var s=".dropdown-backdrop",n='[data-toggle="dropdown"]',r=function(e){t(e).on("click.bs.dropdown",this.toggle)};r.VERSION="3.2.0",r.prototype.toggle=function(o){var s=t(this);if(!s.is(".disabled, :disabled")){var n=i(s),r=n.hasClass("open");if(e(),!r){"ontouchstart"in document.documentElement&&!n.closest(".navbar-nav").length&&t('<div class="dropdown-backdrop"/>').insertAfter(t(this)).on("click",e);var a={relatedTarget:this};if(n.trigger(o=t.Event("show.bs.dropdown",a)),o.isDefaultPrevented())return;s.trigger("focus"),n.toggleClass("open").trigger("shown.bs.dropdown",a)}return!1}},r.prototype.keydown=function(e){if(/(38|40|27)/.test(e.keyCode)){var o=t(this);if(e.preventDefault(),e.stopPropagation(),!o.is(".disabled, :disabled")){var s=i(o),r=s.hasClass("open");if(!r||r&&27==e.keyCode)return 27==e.which&&s.find(n).trigger("focus"),o.trigger("click");var a=" li:not(.divider):visible a",l=s.find('[role="menu"]'+a+', [role="listbox"]'+a);if(l.length){var h=l.index(l.filter(":focus"));38==e.keyCode&&h>0&&h--,40==e.keyCode&&h<l.length-1&&h++,~h||(h=0),l.eq(h).trigger("focus")}}}};var a=t.fn.dropdown;t.fn.dropdown=o,t.fn.dropdown.Constructor=r,t.fn.dropdown.noConflict=function(){return t.fn.dropdown=a,this},t(document).on("click.bs.dropdown.data-api",e).on("click.bs.dropdown.data-api",".dropdown form",function(t){t.stopPropagation()}).on("click.bs.dropdown.data-api",n,r.prototype.toggle).on("keydown.bs.dropdown.data-api",n+', [role="menu"], [role="listbox"]',r.prototype.keydown)}(jQuery),+function(t){"use strict";function e(e,o){return this.each(function(){var s=t(this),n=s.data("bs.modal"),r=t.extend({},i.DEFAULTS,s.data(),"object"==typeof e&&e);n||s.data("bs.modal",n=new i(this,r)),"string"==typeof e?n[e](o):r.show&&n.show(o)})}var i=function(e,i){this.options=i,this.$body=t(document.body),this.$element=t(e),this.$backdrop=this.isShown=null,this.scrollbarWidth=0,this.options.remote&&this.$element.find(".modal-content").load(this.options.remote,t.proxy(function(){this.$element.trigger("loaded.bs.modal")},this))};i.VERSION="3.2.0",i.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},i.prototype.toggle=function(t){return this.isShown?this.hide():this.show(t)},i.prototype.show=function(e){var i=this,o=t.Event("show.bs.modal",{relatedTarget:e});this.$element.trigger(o),this.isShown||o.isDefaultPrevented()||(this.isShown=!0,this.checkScrollbar(),this.$body.addClass("modal-open"),this.setScrollbar(),this.escape(),this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',t.proxy(this.hide,this)),this.backdrop(function(){var o=t.support.transition&&i.$element.hasClass("fade");i.$element.parent().length||i.$element.appendTo(i.$body),i.$element.show().scrollTop(0),o&&i.$element[0].offsetWidth,i.$element.addClass("in").attr("aria-hidden",!1),i.enforceFocus();var s=t.Event("shown.bs.modal",{relatedTarget:e});o?i.$element.find(".modal-dialog").one("bsTransitionEnd",function(){i.$element.trigger("focus").trigger(s)}).emulateTransitionEnd(300):i.$element.trigger("focus").trigger(s)}))},i.prototype.hide=function(e){e&&e.preventDefault(),e=t.Event("hide.bs.modal"),this.$element.trigger(e),this.isShown&&!e.isDefaultPrevented()&&(this.isShown=!1,this.$body.removeClass("modal-open"),this.resetScrollbar(),this.escape(),t(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0).off("click.dismiss.bs.modal"),t.support.transition&&this.$element.hasClass("fade")?this.$element.one("bsTransitionEnd",t.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal())},i.prototype.enforceFocus=function(){t(document).off("focusin.bs.modal").on("focusin.bs.modal",t.proxy(function(t){this.$element[0]===t.target||this.$element.has(t.target).length||this.$element.trigger("focus")},this))},i.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",t.proxy(function(t){27==t.which&&this.hide()},this)):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},i.prototype.hideModal=function(){var t=this;this.$element.hide(),this.backdrop(function(){t.$element.trigger("hidden.bs.modal")})},i.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},i.prototype.backdrop=function(e){var i=this,o=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var s=t.support.transition&&o;if(this.$backdrop=t('<div class="modal-backdrop '+o+'" />').appendTo(this.$body),this.$element.on("click.dismiss.bs.modal",t.proxy(function(t){t.target===t.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus.call(this.$element[0]):this.hide.call(this))},this)),s&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!e)return;s?this.$backdrop.one("bsTransitionEnd",e).emulateTransitionEnd(150):e()}else if(!this.isShown&&this.$backdrop){this.$backdrop.removeClass("in");var n=function(){i.removeBackdrop(),e&&e()};t.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one("bsTransitionEnd",n).emulateTransitionEnd(150):n()}else e&&e()},i.prototype.checkScrollbar=function(){document.body.clientWidth>=window.innerWidth||(this.scrollbarWidth=this.scrollbarWidth||this.measureScrollbar())},i.prototype.setScrollbar=function(){var t=parseInt(this.$body.css("padding-right")||0,10);this.scrollbarWidth&&this.$body.css("padding-right",t+this.scrollbarWidth)},i.prototype.resetScrollbar=function(){this.$body.css("padding-right","")},i.prototype.measureScrollbar=function(){var t=document.createElement("div");t.className="modal-scrollbar-measure",this.$body.append(t);var e=t.offsetWidth-t.clientWidth;return this.$body[0].removeChild(t),e};var o=t.fn.modal;t.fn.modal=e,t.fn.modal.Constructor=i,t.fn.modal.noConflict=function(){return t.fn.modal=o,this},t(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(i){var o=t(this),s=o.attr("href"),n=t(o.attr("data-target")||s&&s.replace(/.*(?=#[^\s]+$)/,"")),r=n.data("bs.modal")?"toggle":t.extend({remote:!/#/.test(s)&&s},n.data(),o.data());o.is("a")&&i.preventDefault(),n.one("show.bs.modal",function(t){t.isDefaultPrevented()||n.one("hidden.bs.modal",function(){o.is(":visible")&&o.trigger("focus")})}),e.call(n,r,this)})}(jQuery),+function(t){"use strict";function e(e){return this.each(function(){var o=t(this),s=o.data("bs.tooltip"),n="object"==typeof e&&e;(s||"destroy"!=e)&&(s||o.data("bs.tooltip",s=new i(this,n)),"string"==typeof e&&s[e]())})}var i=function(t,e){this.type=this.options=this.enabled=this.timeout=this.hoverState=this.$element=null,this.init("tooltip",t,e)};i.VERSION="3.2.0",i.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1,viewport:{selector:"body",padding:0}},i.prototype.init=function(e,i,o){this.enabled=!0,this.type=e,this.$element=t(i),this.options=this.getOptions(o),this.$viewport=this.options.viewport&&t(this.options.viewport.selector||this.options.viewport);for(var s=this.options.trigger.split(" "),n=s.length;n--;){var r=s[n];if("click"==r)this.$element.on("click."+this.type,this.options.selector,t.proxy(this.toggle,this));else if("manual"!=r){var a="hover"==r?"mouseenter":"focusin",l="hover"==r?"mouseleave":"focusout";this.$element.on(a+"."+this.type,this.options.selector,t.proxy(this.enter,this)),this.$element.on(l+"."+this.type,this.options.selector,t.proxy(this.leave,this))}}this.options.selector?this._options=t.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},i.prototype.getDefaults=function(){return i.DEFAULTS},i.prototype.getOptions=function(e){return e=t.extend({},this.getDefaults(),this.$element.data(),e),e.delay&&"number"==typeof e.delay&&(e.delay={show:e.delay,hide:e.delay}),e},i.prototype.getDelegateOptions=function(){var e={},i=this.getDefaults();return this._options&&t.each(this._options,function(t,o){i[t]!=o&&(e[t]=o)}),e},i.prototype.enter=function(e){var i=e instanceof this.constructor?e:t(e.currentTarget).data("bs."+this.type);return i||(i=new this.constructor(e.currentTarget,this.getDelegateOptions()),t(e.currentTarget).data("bs."+this.type,i)),clearTimeout(i.timeout),i.hoverState="in",i.options.delay&&i.options.delay.show?void(i.timeout=setTimeout(function(){"in"==i.hoverState&&i.show()},i.options.delay.show)):i.show()},i.prototype.leave=function(e){var i=e instanceof this.constructor?e:t(e.currentTarget).data("bs."+this.type);return i||(i=new this.constructor(e.currentTarget,this.getDelegateOptions()),t(e.currentTarget).data("bs."+this.type,i)),clearTimeout(i.timeout),i.hoverState="out",i.options.delay&&i.options.delay.hide?void(i.timeout=setTimeout(function(){"out"==i.hoverState&&i.hide()},i.options.delay.hide)):i.hide()},i.prototype.show=function(){var e=t.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){this.$element.trigger(e);var i=t.contains(document.documentElement,this.$element[0]);if(e.isDefaultPrevented()||!i)return;var o=this,s=this.tip(),n=this.getUID(this.type);this.setContent(),s.attr("id",n),this.$element.attr("aria-describedby",n),this.options.animation&&s.addClass("fade");var r="function"==typeof this.options.placement?this.options.placement.call(this,s[0],this.$element[0]):this.options.placement,a=/\s?auto?\s?/i,l=a.test(r);l&&(r=r.replace(a,"")||"top"),s.detach().css({top:0,left:0,display:"block"}).addClass(r).data("bs."+this.type,this),this.options.container?s.appendTo(this.options.container):s.insertAfter(this.$element);var h=this.getPosition(),p=s[0].offsetWidth,c=s[0].offsetHeight;if(l){var d=r,f=this.$element.parent(),u=this.getPosition(f);r="bottom"==r&&h.top+h.height+c-u.scroll>u.height?"top":"top"==r&&h.top-u.scroll-c<0?"bottom":"right"==r&&h.right+p>u.width?"left":"left"==r&&h.left-p<u.left?"right":r,s.removeClass(d).addClass(r)}var g=this.getCalculatedOffset(r,h,p,c);this.applyPlacement(g,r);var v=function(){o.$element.trigger("shown.bs."+o.type),o.hoverState=null};t.support.transition&&this.$tip.hasClass("fade")?s.one("bsTransitionEnd",v).emulateTransitionEnd(150):v()}},i.prototype.applyPlacement=function(e,i){var o=this.tip(),s=o[0].offsetWidth,n=o[0].offsetHeight,r=parseInt(o.css("margin-top"),10),a=parseInt(o.css("margin-left"),10);isNaN(r)&&(r=0),isNaN(a)&&(a=0),e.top=e.top+r,e.left=e.left+a,t.offset.setOffset(o[0],t.extend({using:function(t){o.css({top:Math.round(t.top),left:Math.round(t.left)})}},e),0),o.addClass("in");var l=o[0].offsetWidth,h=o[0].offsetHeight;"top"==i&&h!=n&&(e.top=e.top+n-h);var p=this.getViewportAdjustedDelta(i,e,l,h);p.left?e.left+=p.left:e.top+=p.top;var c=p.left?2*p.left-s+l:2*p.top-n+h,d=p.left?"left":"top",f=p.left?"offsetWidth":"offsetHeight";o.offset(e),this.replaceArrow(c,o[0][f],d)},i.prototype.replaceArrow=function(t,e,i){this.arrow().css(i,t?50*(1-t/e)+"%":"")},i.prototype.setContent=function(){var t=this.tip(),e=this.getTitle();t.find(".tooltip-inner")[this.options.html?"html":"text"](e),t.removeClass("fade in top bottom left right")},i.prototype.hide=function(){function e(){"in"!=i.hoverState&&o.detach(),i.$element.trigger("hidden.bs."+i.type)}var i=this,o=this.tip(),s=t.Event("hide.bs."+this.type);return this.$element.removeAttr("aria-describedby"),this.$element.trigger(s),s.isDefaultPrevented()?void 0:(o.removeClass("in"),t.support.transition&&this.$tip.hasClass("fade")?o.one("bsTransitionEnd",e).emulateTransitionEnd(150):e(),this.hoverState=null,this)},i.prototype.fixTitle=function(){var t=this.$element;(t.attr("title")||"string"!=typeof t.attr("data-original-title"))&&t.attr("data-original-title",t.attr("title")||"").attr("title","")},i.prototype.hasContent=function(){return this.getTitle()},i.prototype.getPosition=function(e){e=e||this.$element;var i=e[0],o="BODY"==i.tagName;return t.extend({},"function"==typeof i.getBoundingClientRect?i.getBoundingClientRect():null,{scroll:o?document.documentElement.scrollTop||document.body.scrollTop:e.scrollTop(),width:o?t(window).width():e.outerWidth(),height:o?t(window).height():e.outerHeight()},o?{top:0,left:0}:e.offset())},i.prototype.getCalculatedOffset=function(t,e,i,o){return"bottom"==t?{top:e.top+e.height,left:e.left+e.width/2-i/2}:"top"==t?{top:e.top-o,left:e.left+e.width/2-i/2}:"left"==t?{top:e.top+e.height/2-o/2,left:e.left-i}:{top:e.top+e.height/2-o/2,left:e.left+e.width}},i.prototype.getViewportAdjustedDelta=function(t,e,i,o){var s={top:0,left:0};if(!this.$viewport)return s;var n=this.options.viewport&&this.options.viewport.padding||0,r=this.getPosition(this.$viewport);if(/right|left/.test(t)){var a=e.top-n-r.scroll,l=e.top+n-r.scroll+o;a<r.top?s.top=r.top-a:l>r.top+r.height&&(s.top=r.top+r.height-l)}else{var h=e.left-n,p=e.left+n+i;h<r.left?s.left=r.left-h:p>r.width&&(s.left=r.left+r.width-p)}return s},i.prototype.getTitle=function(){var t,e=this.$element,i=this.options;return t=e.attr("data-original-title")||("function"==typeof i.title?i.title.call(e[0]):i.title)},i.prototype.getUID=function(t){do t+=~~(1e6*Math.random());while(document.getElementById(t));return t},i.prototype.tip=function(){return this.$tip=this.$tip||t(this.options.template)},i.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},i.prototype.validate=function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},i.prototype.enable=function(){this.enabled=!0},i.prototype.disable=function(){this.enabled=!1},i.prototype.toggleEnabled=function(){this.enabled=!this.enabled},i.prototype.toggle=function(e){var i=this;e&&(i=t(e.currentTarget).data("bs."+this.type),i||(i=new this.constructor(e.currentTarget,this.getDelegateOptions()),t(e.currentTarget).data("bs."+this.type,i))),i.tip().hasClass("in")?i.leave(i):i.enter(i)},i.prototype.destroy=function(){clearTimeout(this.timeout),this.hide().$element.off("."+this.type).removeData("bs."+this.type)};var o=t.fn.tooltip;t.fn.tooltip=e,t.fn.tooltip.Constructor=i,t.fn.tooltip.noConflict=function(){return t.fn.tooltip=o,this}}(jQuery),+function(t){"use strict";function e(e){return this.each(function(){var o=t(this),s=o.data("bs.popover"),n="object"==typeof e&&e;(s||"destroy"!=e)&&(s||o.data("bs.popover",s=new i(this,n)),"string"==typeof e&&s[e]())})}var i=function(t,e){this.init("popover",t,e)};if(!t.fn.tooltip)throw new Error("Popover requires tooltip.js");i.VERSION="3.2.0",i.DEFAULTS=t.extend({},t.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),i.prototype=t.extend({},t.fn.tooltip.Constructor.prototype),i.prototype.constructor=i,i.prototype.getDefaults=function(){return i.DEFAULTS},i.prototype.setContent=function(){var t=this.tip(),e=this.getTitle(),i=this.getContent();t.find(".popover-title")[this.options.html?"html":"text"](e),t.find(".popover-content").empty()[this.options.html?"string"==typeof i?"html":"append":"text"](i),t.removeClass("fade top bottom left right in"),t.find(".popover-title").html()||t.find(".popover-title").hide()},i.prototype.hasContent=function(){return this.getTitle()||this.getContent()},i.prototype.getContent=function(){var t=this.$element,e=this.options;return t.attr("data-content")||("function"==typeof e.content?e.content.call(t[0]):e.content)},i.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")},i.prototype.tip=function(){return this.$tip||(this.$tip=t(this.options.template)),this.$tip};var o=t.fn.popover;t.fn.popover=e,t.fn.popover.Constructor=i,t.fn.popover.noConflict=function(){return t.fn.popover=o,this}}(jQuery),+function(t){"use strict";function e(e){return this.each(function(){var o=t(this),s=o.data("bs.tab");s||o.data("bs.tab",s=new i(this)),"string"==typeof e&&s[e]()})}var i=function(e){this.element=t(e)};i.VERSION="3.2.0",i.prototype.show=function(){var e=this.element,i=e.closest("ul:not(.dropdown-menu)"),o=e.data("target");if(o||(o=e.attr("href"),o=o&&o.replace(/.*(?=#[^\s]*$)/,"")),!e.parent("li").hasClass("active")){var s=i.find(".active:last a")[0],n=t.Event("show.bs.tab",{relatedTarget:s});if(e.trigger(n),!n.isDefaultPrevented()){var r=t(o);this.activate(e.closest("li"),i),this.activate(r,r.parent(),function(){e.trigger({type:"shown.bs.tab",relatedTarget:s})})}}},i.prototype.activate=function(e,i,o){function s(){n.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),e.addClass("active"),r?(e[0].offsetWidth,e.addClass("in")):e.removeClass("fade"),e.parent(".dropdown-menu")&&e.closest("li.dropdown").addClass("active"),o&&o()}var n=i.find("> .active"),r=o&&t.support.transition&&n.hasClass("fade");r?n.one("bsTransitionEnd",s).emulateTransitionEnd(150):s(),n.removeClass("in")};var o=t.fn.tab;t.fn.tab=e,t.fn.tab.Constructor=i,t.fn.tab.noConflict=function(){return t.fn.tab=o,this},t(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(i){i.preventDefault(),e.call(t(this),"show")})}(jQuery),+function(t){"use strict";function e(e){return this.each(function(){var o=t(this),s=o.data("bs.affix"),n="object"==typeof e&&e;s||o.data("bs.affix",s=new i(this,n)),"string"==typeof e&&s[e]()})}var i=function(e,o){this.options=t.extend({},i.DEFAULTS,o),this.$target=t(this.options.target).on("scroll.bs.affix.data-api",t.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",t.proxy(this.checkPositionWithEventLoop,this)),this.$element=t(e),this.affixed=this.unpin=this.pinnedOffset=null,this.checkPosition()};i.VERSION="3.2.0",i.RESET="affix affix-top affix-bottom",i.DEFAULTS={offset:0,target:window},i.prototype.getPinnedOffset=function(){if(this.pinnedOffset)return this.pinnedOffset;this.$element.removeClass(i.RESET).addClass("affix");var t=this.$target.scrollTop(),e=this.$element.offset();return this.pinnedOffset=e.top-t},i.prototype.checkPositionWithEventLoop=function(){setTimeout(t.proxy(this.checkPosition,this),1)},i.prototype.checkPosition=function(){if(this.$element.is(":visible")){var e=t(document).height(),o=this.$target.scrollTop(),s=this.$element.offset(),n=this.options.offset,r=n.top,a=n.bottom;"object"!=typeof n&&(a=r=n),"function"==typeof r&&(r=n.top(this.$element)),"function"==typeof a&&(a=n.bottom(this.$element));var l=null!=this.unpin&&o+this.unpin<=s.top?!1:null!=a&&s.top+this.$element.height()>=e-a?"bottom":null!=r&&r>=o?"top":!1;if(this.affixed!==l){null!=this.unpin&&this.$element.css("top","");var h="affix"+(l?"-"+l:""),p=t.Event(h+".bs.affix");this.$element.trigger(p),p.isDefaultPrevented()||(this.affixed=l,this.unpin="bottom"==l?this.getPinnedOffset():null,this.$element.removeClass(i.RESET).addClass(h).trigger(t.Event(h.replace("affix","affixed"))),"bottom"==l&&this.$element.offset({top:e-this.$element.height()-a}))}}};var o=t.fn.affix;t.fn.affix=e,t.fn.affix.Constructor=i,t.fn.affix.noConflict=function(){return t.fn.affix=o,this},t(window).on("load",function(){t('[data-spy="affix"]').each(function(){var i=t(this),o=i.data();o.offset=o.offset||{},o.offsetBottom&&(o.offset.bottom=o.offsetBottom),o.offsetTop&&(o.offset.top=o.offsetTop),e.call(i,o)})})}(jQuery),+function(t){"use strict";function e(e){return this.each(function(){var o=t(this),s=o.data("bs.collapse"),n=t.extend({},i.DEFAULTS,o.data(),"object"==typeof e&&e);!s&&n.toggle&&"show"==e&&(e=!e),s||o.data("bs.collapse",s=new i(this,n)),"string"==typeof e&&s[e]()})}var i=function(e,o){this.$element=t(e),this.options=t.extend({},i.DEFAULTS,o),this.transitioning=null,this.options.parent&&(this.$parent=t(this.options.parent)),this.options.toggle&&this.toggle()};i.VERSION="3.2.0",i.DEFAULTS={toggle:!0},i.prototype.dimension=function(){var t=this.$element.hasClass("width");return t?"width":"height"},i.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var i=t.Event("show.bs.collapse");if(this.$element.trigger(i),!i.isDefaultPrevented()){var o=this.$parent&&this.$parent.find("> .panel > .in");if(o&&o.length){var s=o.data("bs.collapse");if(s&&s.transitioning)return;e.call(o,"hide"),s||o.data("bs.collapse",null)}var n=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[n](0),this.transitioning=1;var r=function(){this.$element.removeClass("collapsing").addClass("collapse in")[n](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!t.support.transition)return r.call(this);var a=t.camelCase(["scroll",n].join("-"));this.$element.one("bsTransitionEnd",t.proxy(r,this)).emulateTransitionEnd(350)[n](this.$element[0][a])}}},i.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var e=t.Event("hide.bs.collapse");if(this.$element.trigger(e),!e.isDefaultPrevented()){var i=this.dimension();this.$element[i](this.$element[i]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse").removeClass("in"),this.transitioning=1;var o=function(){this.transitioning=0,this.$element.trigger("hidden.bs.collapse").removeClass("collapsing").addClass("collapse")};return t.support.transition?void this.$element[i](0).one("bsTransitionEnd",t.proxy(o,this)).emulateTransitionEnd(350):o.call(this)}}},i.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var o=t.fn.collapse;t.fn.collapse=e,t.fn.collapse.Constructor=i,t.fn.collapse.noConflict=function(){return t.fn.collapse=o,this},t(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(i){var o,s=t(this),n=s.attr("data-target")||i.preventDefault()||(o=s.attr("href"))&&o.replace(/.*(?=#[^\s]+$)/,""),r=t(n),a=r.data("bs.collapse"),l=a?"toggle":s.data(),h=s.attr("data-parent"),p=h&&t(h);a&&a.transitioning||(p&&p.find('[data-toggle="collapse"][data-parent="'+h+'"]').not(s).addClass("collapsed"),s[r.hasClass("in")?"addClass":"removeClass"]("collapsed")),e.call(r,l)})}(jQuery),+function(t){"use strict";function e(i,o){var s=t.proxy(this.process,this);this.$body=t("body"),this.$scrollElement=t(t(i).is("body")?window:i),this.options=t.extend({},e.DEFAULTS,o),this.selector=(this.options.target||"")+" .nav li > a",this.offsets=[],this.targets=[],this.activeTarget=null,this.scrollHeight=0,this.$scrollElement.on("scroll.bs.scrollspy",s),this.refresh(),this.process()}function i(i){return this.each(function(){var o=t(this),s=o.data("bs.scrollspy"),n="object"==typeof i&&i;s||o.data("bs.scrollspy",s=new e(this,n)),"string"==typeof i&&s[i]()})}e.VERSION="3.2.0",e.DEFAULTS={offset:10},e.prototype.getScrollHeight=function(){return this.$scrollElement[0].scrollHeight||Math.max(this.$body[0].scrollHeight,document.documentElement.scrollHeight)},e.prototype.refresh=function(){var e="offset",i=0;t.isWindow(this.$scrollElement[0])||(e="position",i=this.$scrollElement.scrollTop()),this.offsets=[],this.targets=[],this.scrollHeight=this.getScrollHeight();var o=this;this.$body.find(this.selector).map(function(){var o=t(this),s=o.data("target")||o.attr("href"),n=/^#./.test(s)&&t(s);return n&&n.length&&n.is(":visible")&&[[n[e]().top+i,s]]||null}).sort(function(t,e){return t[0]-e[0]}).each(function(){o.offsets.push(this[0]),o.targets.push(this[1])})},e.prototype.process=function(){var t,e=this.$scrollElement.scrollTop()+this.options.offset,i=this.getScrollHeight(),o=this.options.offset+i-this.$scrollElement.height(),s=this.offsets,n=this.targets,r=this.activeTarget;if(this.scrollHeight!=i&&this.refresh(),e>=o)return r!=(t=n[n.length-1])&&this.activate(t);if(r&&e<=s[0])return r!=(t=n[0])&&this.activate(t);for(t=s.length;t--;)r!=n[t]&&e>=s[t]&&(!s[t+1]||e<=s[t+1])&&this.activate(n[t])},e.prototype.activate=function(e){this.activeTarget=e,t(this.selector).parentsUntil(this.options.target,".active").removeClass("active");var i=this.selector+'[data-target="'+e+'"],'+this.selector+'[href="'+e+'"]',o=t(i).parents("li").addClass("active");o.parent(".dropdown-menu").length&&(o=o.closest("li.dropdown").addClass("active")),o.trigger("activate.bs.scrollspy")};var o=t.fn.scrollspy;t.fn.scrollspy=i,t.fn.scrollspy.Constructor=e,t.fn.scrollspy.noConflict=function(){return t.fn.scrollspy=o,this},t(window).on("load.bs.scrollspy.data-api",function(){t('[data-spy="scroll"]').each(function(){var e=t(this);i.call(e,e.data())})})}(jQuery),+function(t){"use strict";function e(){var t=document.createElement("bootstrap"),e={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var i in e)if(void 0!==t.style[i])return{end:e[i]};return!1}t.fn.emulateTransitionEnd=function(e){var i=!1,o=this;t(this).one("bsTransitionEnd",function(){i=!0});var s=function(){i||t(o).trigger(t.support.transition.end)};return setTimeout(s,e),this},t(function(){t.support.transition=e(),t.support.transition&&(t.event.special.bsTransitionEnd={bindType:t.support.transition.end,delegateType:t.support.transition.end,handle:function(e){return t(e.target).is(this)?e.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery);
\ No newline at end of file
+++ /dev/null
-window.addEventListener("load", eventWindowLoaded, false);
-
-var cancasmode = 0;
-
-function tabcheck() {
- var introduce = document.getElementById('introduce');
- var ineh = document.getElementById('eucentricheightcontents');
- var inform = document.getElementById('form');
- var insingle = document.getElementById('simplephotecontents');
- var intomo = document.getElementById('tomography');
- var inmds = document.getElementById('mds');
-
- if (insingle.style.display == "") {
- canvasmode = 1;
- //canvasApp();
- console.log("canvasmode=" + canvasmode);
- }else if(intomo.style.display ==""){
- canvasmode = 2;
- canvastomo();
- console.log("canvasmode=" + canvasmode);
- }else if(inmds.style.display ==""){
- canvasmode =3;
- canvasmds();
- console.log("canvasmode=" + canvasmode);
- }else{
- canvasmode = 0;
- console.log("canvasmode=" + canvasmode);
- }
-}
-
-function eventWindowLoaded() {
- //画面がロードされたら、canvasAppを呼び出す
- /* if (canvasmode == 1) {
- //canvasApp();
- } else if (canvasmode == 2) {
- canvastomo();
- }
- */
- //canvasmds();
- //モード切り替えの初期formの色の設定
- document.getElementById("formmode").style.backgroundColor = '#e0ffff';
- document.getElementById("formmode2").style.backgroundColor = '#e0ffff';
- document.getElementById("formmode3").style.backgroundColor = '#e0ffff';
-}
-/*
- function canvasSupport(){
- return Modernizer.canvas;
- }
- */
-//var movex = document.forms.movestage.movex.value;
-//var movey = document.forms.movestage.movey.value;
-/*
- function putTxt(){
- document.onkeydown = funcKey;
- }
- */
-
-//キャンバスの初期値の設定
-var movex = 1;
-var movey = 1;
-var movez = 0;
-var movea = 0;
-var mode = 0;
-var moveformx=0;
-var moveformy=0;
-var moveformz=0;
-var moveformas=0;
-var moveformat=0;
-var movingdistance =1;
-var tiltmode = 1;
-
-function gamepad() {
- if (navigator.getGamepads) {
- // ゲームパッドリストを取得する
- var gamepad_list = navigator.getGamepads();
- // 出力テスト
- console.log(gamepad_list);
- }
- console.log("function gamepad");
- window.addEventListener("gamepadconnected", function(e) {
- console.log("gamepad connected!");
- });
-
- if (window.GamepadEvent) {
-
- // ------------------------------------------------------------
- // ゲームパッドを接続すると実行されるイベント
- // ------------------------------------------------------------
- window.addEventListener("gamepadconnected", function(e) {
- console.log("ゲームパッドが接続された");
- console.log(e.gamepad);
- });
-
- // ------------------------------------------------------------
- // ゲームパッドの接続を解除すると実行されるイベント
- // ------------------------------------------------------------
- window.addEventListener("gamepaddisconnected", function(e) {
- console.log("ゲームパッドの接続が解除された");
- console.log(e.gamepad);
- });
-
- }
- /*
- setInterval(function(e){
- var gamepad = e.gamepad;
- if (gamepad.axes[0] < -0.5) {
- movex = parseInt(movex) + parseInt(10);
- console.log("left!");
- ////canvasApp();
- }
- if (gamepad.axes[0] > 0.5) {
- movex = parseInt(movex) - parseInt(10);
- //canvasApp();
- }
- if (gamepad.axes[1] < -0.5) {
- movey = parseInt(movey) - parseInt(10);
- //canvasApp();
- }
- if (gamepad.axes[1] > 0.5) {
- movey = parseInt(movey) + parseInt(10);
- //canvasApp();
-
- }
- },1000/60);
- */
-
- setInterval(function() {
- var str = "";
- // ゲームパッドリストを取得する
- var gamepad_list = navigator.getGamepads();
- // ゲームパッドリスト内のアイテム総数を取得する
- var num = gamepad_list.length;
- var i;
- for (i = 0; i < num; i++) {
- // Gamepad オブジェクトを取得
- var gamepad = gamepad_list[i];
- if (!gamepad)
- continue;
- // ゲームパッドのインデックス値
- str += "index: " + gamepad.index + "\n";
- // タイムスタンプ情報
- str += "timestamp: " + gamepad.timestamp + "\n";
- // ゲームパッドの識別名
- str += "id: \"" + gamepad.id + "\"\n";
- // ゲームパッドの物理的な接続状態
- str += "connected: " + gamepad.connected + "\n";
- // マッピングタイプ情報
- str += "mapping: \"" + gamepad.mapping + "\"\n";
-
- // ボタンリスト
- // ------------------------------------------------------------
- var buttons = gamepad.buttons;
- str += "buttons: {\n";
- var j;
- var n = buttons.length;
- for (j = 0; j < n; j++) {
- // GamepadButton オブジェクトを取得
- var button = buttons[j];
- str += " \"" + j + "\": { ";
- // ボタン押下状態
- str += "pressed:" + button.pressed + " , ";
- // ボタン入力強度
- str += "value:" + button.value + " }\n";
- }
- str += "}\n";
- // 軸リスト
- // ------------------------------------------------------------
- if (mode == 2) {
- var axes = gamepad.axes;
- str += "axes: {\n";
- var j;
- var n = axes.length;
- for (j = 0; j < n; j++) {
- if (j == 0) {
- if (axes[j] < -0.5) {
- movex = parseInt(movex) - parseInt(1);
- console.log(movex);
- console.log(axes[j]);
- stagecontrol('stage',movex,movey,movez,movea);
- emcondition('request');
- if (canvasmode == 1) {
- //canvasApp();
- } else if (canvasmode == 2) {
- canvastomo();
- } else if (canvasmode == 3) {
- canvasmds();
- }
- }
- if (axes[j] > 0.5) {
- movex = parseInt(movex) + parseInt(1);
- stagecontrol('stage',movex,movey,movez,movea);
- emcondition('request');
- if (canvasmode == 1) {
- //canvasApp();
- } else if (canvasmode == 2) {
- canvastomo();
- } else if (canvasmode == 3){
- canvasmds();
- }
- }
- } else if (j == 1) {
- if (axes[j] < -0.5) {
- movey = parseInt(movey) + parseInt(1);
- stagecontrol('stage',movex,movey,movez,movea);
- emcondition('request');
- if (canvasmode == 1) {
- //canvasApp();
- } else if (canvasmode == 2) {
- canvastomo();
- } else if (canvasmode ==3 ) {
- canvasmds();
- }
- }
- if (axes[j] > 0.5) {
- movey = parseInt(movey) - parseInt(1);
- stagecontrol('stage',movex,movey,movez,movea);
- emcondition('request');
- if (canvasmode == 1) {
- //canvasApp();
- } else if (canvasmode == 2) {
- canvastomo();
- } else if (canvasmode == 3){
- canvasmds();
- }
- }
- }
- }
- }
- }
- }, 1000 / 60);
-
-
- window.addEventListener("gamepaddisconnected", function(e) {
- console.log("gamepad disconnected");
- });
- window.addEventListener("gamepadconnected", function(e) {
- console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
- e.gamepad.index, e.gamepad.id,
- e.gamepad.buttons.length, e.gamepad.axes.length);
- });
-
-};
-
-
-function canvasApp() {
- var theCanvas = document.getElementById("canvasOne");
- //canvasとして利用するhtmlのタグの場所を指定
- var context = theCanvas.getContext("2d");
- //2Dcontextの取得
-
- function drawScreen() {
- //実際に画面の描写を行っている部分
- context.fillStyle = "fffffaa";
- //描画画面の塗りつぶし、今回は黒
- context.fillRect(0, 0, 540, 605);
- //画面上に形を作る
- if (mode == 0) {
- //if(document.forms.movestage.movex.value!=moveformx){
- moveformx = document.forms.movestage.movex.value;
- movex=parseInt(moveformx);
- //}
- //if(document.forms.movestage.movey.value!=moveformy){
- moveformy = document.forms.movestage.movey.value;
- movey=parseInt(moveformy);
-
- moveformz = document.forms.moveza.movez.value;
- movez=parseInt(moveformz);
-
-
- stagecontrol('stage',movex,movey,movez,movea);
- emcondition('request');
- //}
- //画面上に入力した数値から位置を取得
- }
- /*
- var movez = document.forms.s2.movez.value;
-
- if (movez == 0) {
- movez = 1;
- }
- */
- var img = new Image();
-
- img.onload = function() {
- //イメージがロードするのを待つ必要があるのでonload
- //context.scale(movez*0.1,movez*0.1);
- //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
- //context.translate(540/2,605/2);
- context.drawImage(img, movex, movey);
- //イメージを描写、引数は画像のオブジェクト,左端のx,y
- document.getElementById("currentx").innerHTML = movex;
- document.getElementById("currenty").innerHTML = movey;
- console.log("x=" + movex);
- console.log("y=" + movey);
- var movingdistance = $("#movingdistance");
- console.log(movingdistance[0]);
- }
-
- //見る画像
- img.src = "./image/CC124crudeダイニン.jpg";
-
- //--ふちの設定--現在見えてない
- context.strokeStyle = "#000000";
- //線の色
- context.strokeRect(5, 5, 505, 610);
- //わくの輪郭を書く、引数は左端のx,y,幅,高さ
- }
- drawScreen();
-}
-
-function canvastomo() {
- var theCanvas = document.getElementById("canvastomo");
- //canvasとして利用するhtmlのタグの場所を指定
- var context = theCanvas.getContext("2d");
- //2Dcontextの取得
-
- function drawScreen() {
- //実際に画面の描写を行っている部分
- context.fillStyle = "fffffaa";
- //描画画面の塗りつぶし、今回は黒
- context.fillRect(0, 0, 540, 605);
- //画面上に形を作る
- if (mode == 0) {
- //if(document.forms.movestage.movex.value!=moveformx){
- moveformx = document.forms.movestagetomo.movex.value;
- movex=parseInt(moveformx);
- //}
- //if(document.forms.movestage.movey.value!=moveformy){
- moveformy = document.forms.movestagetomo.movey.value;
- movey=parseInt(moveformy);
-
- moveformz = document.forms.moveztomo.movez.value;
- movez=parseInt(moveformz);
-
- if (tiltmode == 1) {
- moveformas = document.forms.setting.standardnum.value;
- movea = parseInt(moveformas);
- stagecontrol('stage', movex, movey, movez, movea);
- emcondition('request');
- } else if (tiltmode == 2) {
- moveformat = document.forms.setting.tiltingnum.value;
- movea = parseInt(moveformat);
- stagecontrol('stage', movex, movey, movez, movea*(Math.cos(movea * (Math.PI / 180))));
- emcondition('request');
- }
- stagecontrol('stage',movex,movey,movez,movea);
- emcondition('request');
- //}
- //画面上に入力した数値から位置を取得
- }
- /*
- var movez = document.forms.s2.movez.value;
-
- if (movez == 0) {
- movez = 1;
- }
- */
- var img = new Image();
-
- img.onload = function() {
- //イメージがロードするのを待つ必要があるのでonload
- //context.scale(movez*0.1,movez*0.1);
- //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
- //context.translate(540/2,605/2);
- context.drawImage(img, movex, movey);
- //イメージを描写、引数は画像のオブジェクト,左端のx,y
- document.getElementById("currenttomox").innerHTML = movex;
- document.getElementById("currenttomoy").innerHTML = movey;
- console.log("x=" + movex);
- console.log("y=" + movey);
- }
-
- //見る画像
- img.src = "./image/axoF11-2 .jpg";
-
- //--ふちの設定--現在見えてない
- context.strokeStyle = "#000000";
- //線の色
- context.strokeRect(5, 5, 505, 610);
- //わくの輪郭を書く、引数は左端のx,y,幅,高さ
- }
- drawScreen();
-}
-
-function controlmodeselect(modename){
- document.getElementById("key").style.backgroundColor = 'transparent';
- document.getElementById("key2").style.backgroundColor = 'transparent';
- document.getElementById("key3").style.backgroundColor = 'transparent';
- document.getElementById("formmode").style.backgroundColor = 'transparent';
- document.getElementById("formmode2").style.backgroundColor = 'transparent';
- document.getElementById("formmode3").style.backgroundColor = 'transparent';
- document.getElementById("gamepad").style.backgroundColor = 'transparent';
- document.getElementById("gamepad2").style.backgroundColor = 'transparent';
- document.getElementById("gamepad3").style.backgroundColor = 'transparent';
-
- if(modename){
- document.getElementById(modename).style.backgroundColor = '#e0ffff';
- }
-}
-
-
-/*
- * To change this license header, choose License Headers in Project Properties.
- * To change this template file, choose Tools | Templates
- * and open the template in the editor.
- */
-
-function tilt() {
- radio = document.getElementsByName('tilting');
- document.getElementById('angurar').innerHTML= document.forms.setting.tiltingnum.value;
- if (radio[0].checked) {
- tiltmode=1;
- document.getElementById('standard').style.display = "";
- document.getElementById('saxtorn').style.display = "none";
- } else if (radio[1].checked) {
- tiltmode=2;
- document.getElementById('standard').style.display = "none";
- document.getElementById('saxtorn').style.display = "";
- }
-}
-
-function canvasmds() {
- var theCanvas = document.getElementById("canvasmds");
- //canvasとして利用するhtmlのタグの場所を指定
- var context = theCanvas.getContext("2d");
- //2Dcontextの取得
- function drawScreen() {
- //実際に画面の描写を行っている部分
- context.fillStyle = "fffffaa";
- //描画画面の塗りつぶし、今回は黒
- context.fillRect(0, 0, 540, 605);
- //画面上に形を作る
- if (mode == 0) {
- //if(document.forms.movestage.movex.value!=moveformx){
- moveformx = document.forms.movestagemds.movex.value;
- movex=parseInt(moveformx);
- //}
- //if(document.forms.movestage.movey.value!=moveformy){
- moveformy = document.forms.movestagemds.movey.value;
- movey=parseInt(moveformy);
-
- moveformz = document.forms.movezmds.movez.value;
- movez=parseInt(moveformz);
-
-
- stagecontrol('stage',movex,movey,movez,movea);
- emcondition('request');
- //}
- //画面上に入力した数値から位置を取得
- }
- /*
- var movez = document.forms.s2.movez.value;
-
- if (movez == 0) {
- movez = 1;
- }
- */
- var img = new Image();
-
- img.onload = function() {
- //イメージがロードするのを待つ必要があるのでonload
- //context.scale(movez*0.1,movez*0.1);
- //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
- //context.translate(540/2,605/2);
- context.drawImage(img, movex, movey);
- //イメージを描写、引数は画像のオブジェクト,左端のx,y
- document.getElementById("currentmdsx").innerHTML = movex;
- document.getElementById("currentmdsy").innerHTML = movey;
- console.log("x=" + movex);
- console.log("y=" + movey);
- }
-
- //見る画像
- img.src = "./image/flower.jpg";
-
- //--ふちの設定--現在見えてない
- context.strokeStyle = "#000000";
- //線の色
- context.strokeRect(5, 5, 505, 610);
- //わくの輪郭を書く、引数は左端のx,y,幅,高さ
- }
- drawScreen();
-}
-
-function shiftplace() {
- mode = 4;
- movex = parseInt(movex) + parseInt(10);
- stagecontrol('stage', movex, movey, movez, movea);
- emcondition('request');
- canvasmds();
-}
-
-function replace() {
- mode = 4;
- movex = parseInt(movex) - parseInt(10);
- stagecontrol('stage', movex, movey, movez, movea);
- emcondition('request');
- canvasmds();
-
-}
-
-function canvasroot() {
- var theCanvas = document.getElementById("canvasroot");
- //canvasとして利用するhtmlのタグの場所を指定
- var context = theCanvas.getContext("2d");
- //2Dcontextの取得
-
- function drawScreen() {
- //実際に画面の描写を行っている部分
- context.fillStyle = "fffffaa";
- //描画画面の塗りつぶし、今回は黒
- context.fillRect(0, 0, 200, 200);
- //画面上に形を作る
- /* if (mode == 0) {
- //if(document.forms.movestage.movex.value!=moveformx){
- moveformx = document.forms.movestage.movex.value;
- movex=parseInt(moveformx);
- //}
- //if(document.forms.movestage.movey.value!=moveformy){
- moveformy = document.forms.movestage.movey.value;
- movey=parseInt(moveformy);
-
- moveformz = document.forms.moveza.movez.value;
- movez=parseInt(moveformz);
-
-
- stagecontrol('stage',movex,movey,movez,movea);
- emcondition('request');
- //}
- //画面上に入力した数値から位置を取得
- }*/
- /*
- var movez = document.forms.s2.movez.value;
-
- if (movez == 0) {
- movez = 1;
- }
- */
- var img = new Image();
-
- img.onload = function() {
- //イメージがロードするのを待つ必要があるのでonload
- //context.scale(movez*0.1,movez*0.1);
- //context.setTransform(movez*0.1,0,0,movez*0.1,0,0);
- //context.translate(540/2,605/2);
- context.drawImage(img, movex, movey);
- //イメージを描写、引数は画像のオブジェクト,左端のx,y
- document.getElementById("currentx").innerHTML = movex;
- document.getElementById("currenty").innerHTML = movey;
- console.log("x=" + movex);
- console.log("y=" + movey);
-
- }
-
- //見る画像
- img.src = "./image/ele.jpg";
-
- //--ふちの設定--現在見えてない
- context.strokeStyle = "#000000";
- //線の色
- context.strokeRect(5, 5, 505, 610);
- //わくの輪郭を書く、引数は左端のx,y,幅,高さ
- }
- drawScreen();
-}
--- /dev/null
+/*
+CANVAS_SIZEはdraw.jsにおいてグローバルに宣言しているためこのファイル内では宣言していない。
+*/
+
+
+function color(){
+ var canvas = document.getElementById("canvas");
+ var context = canvas.getContext("2d");
+
+ var canvas2 = document.getElementById("canvas2");
+ var context2 = canvas2.getContext("2d");
+
+ var canvas3 = document.getElementById("blend_canvas");
+ var context3 = canvas3.getContext("2d");
+ canvas3.width = CANVAS_SIZE;
+ canvas3.height = CANVAS_SIZE;
+
+ var image = context.getImageData(0,0,canvas.width,canvas.height);
+ var image2 = context2.getImageData(0,0,canvas2.width,canvas2.height);
+ image3 = context3.createImageData(canvas3.width,canvas3.height);
+
+
+ var image_rgba = image.data;
+ var image2_rgba = image2.data;
+ var image3_rgba = image3.data;
+
+ image_rgba = color_change(image_rgba, 1);
+ image2_rgba = color_change(image2_rgba, 2);
+ image3_rgba = make_new_Image(image_rgba, image2_rgba, image3_rgba);
+
+ context3.putImageData(image3, 0, 0);
+}
+
+
+//ピクセル配列の値(色情報)の書き換え
+function color_change(image_rgba, mode){
+ var max, min;
+ var R,G,B;
+ var H;
+ var before_color,after_color;
+ var diff_color;
+
+ //canvas選択 1-display1のcanvas ,2-display2のcanvas
+ if(mode == 1){
+ before_color = parseInt(form4.before_color.value);
+ after_color = parseInt(form4.after_color.value);
+ }else if(mode == 2){
+ before_color = parseInt(form4.before_color2.value);
+ after_color = parseInt(form4.after_color2.value);
+ }
+ diff_color = after_color - before_color;
+
+ /**************RGB->HSV*******************************/
+ for (var i = 0; i < image_rgba.length ; i++){
+ R = image_rgba[i * 4] / 255;//RGBAの値は0-255で与えられている
+ G = image_rgba[i * 4 + 1] / 255;
+ B = image_rgba[i * 4 + 2] / 255;
+
+ if(R == G && G == B){
+ continue;
+ }else if(R >= G && R >= B){
+ if(G >= B){
+ max = R;
+ min = B;
+ }else if(B > G){
+ max = R;
+ min = G;
+ }
+ }else if(G >= R && G >= B){
+ if(R >= B){
+ max = G;
+ min = B;
+ }else if(B > R){
+ max = G;
+ min = R;
+ }
+ }else if(B >= R && B >= G){
+ if(R >= G){
+ max = B;
+ min = G;
+ }else if(G > R){
+ max = B;
+ min = R;
+ }
+ }
+
+ if(max == R){
+ H = 60 * (G - B)/(max - min);
+ H %= 360;
+ }else if(max == G){
+ H = (60 * (B - R) / (max - min)) + 120;
+ H %= 360;
+ }else if(max == B){
+ H = (60 * (R - G) / (max - min)) + 240;
+ H %= 360;
+ }
+
+ /*****************color change*********************/
+ //値書き換え（色相変換）
+ if (before_color != 1 && after_color != 1){
+ if(H >= (before_color-1) * 60 -30 && H < (before_color * 60 -30)){
+ H = H + 60 * diff_color;
+ }
+ }else if(before_color == 1 && after_color != 1){
+ if(H >= 0 && H < 30){
+ H = H + 60 * diff_color;
+ }else if(H >= 330 && H <= 360){
+ H = H - 60 * (6 - diff_color);
+ }
+ }else if(before_color != 1 && after_color == 1){
+ if(H >= (before_color - 1) * 60 -30 && H < (before_color - 1) * 60 ){
+ H = H + 60 * (6 + diff_color);
+ }else if(H >= (before_color - 1) * 60 && H < before_color * 60 -30){
+ H = H + 60 * diff_color;
+ }
+ }else{
+ continue;
+ }
+
+ /***********************HSV->RGB************************/
+ if(H >= 0 && H < 60){
+ R = max;
+ G = (H / 60) * (max - min) + min;
+ B = min;
+ }else if(H >= 60 && H < 120){
+ R = -((H-120) / 60) * (max - min) + min;
+ G = max;
+ B = min;
+ }else if(H >= 120 && H < 180){
+ R = min
+ G = max;
+ B = ((H-120) / 60) * (max - min) + min;
+ }else if(H >= 180 && H < 240){
+ R = min
+ G = -((H-240) / 60) * (max - min) + min;
+ B = max;
+ }else if(H >= 240 && H < 300){
+ R = ((H-240) / 60) * (max - min) + min;
+ G = min;
+ B = max;
+ }else if(H >= 300 && H <= 360){
+ R = max;
+ G = min;
+ B = (-(H-360) / 60) * (max - min) + min;
+ }else{
+ continue;
+ }
+
+ image_rgba[i * 4] = R * 255;
+ image_rgba[i * 4 + 1] = G * 255;
+ image_rgba[i * 4 + 2] = B * 255;
+
+ }
+ return image_rgba;
+}
+
+
+/*************create new image data*************/
+ /*
+ image_rgba[count * 4] //R
+ image_rgba[count * 4 + 1] //G
+ image_rgba[count * 4 + 2] //B
+ image_rgba[count * 4 + 3] //A
+
+ image2_rgba[count * 4] //R
+ image2_rgba[count * 4 + 1] //G
+ image2_rgba[count * 4 + 2] //B
+ image2_rgba[count * 4 + 3] //A
+ */
+function make_new_Image(image_rgba, image2_rgba, image3_rgba){
+
+ var alpha = parseFloat(form4.alpha.value);
+ var beta = parseFloat(form4.beta.value);
+
+ for(var count = 0; count < image3_rgba.length; count++){
+ image3_rgba[count * 4] = (image_rgba[count * 4] * alpha) + (image2_rgba[count * 4] * beta);
+ image3_rgba[count * 4 + 1] = (image_rgba[count * 4 + 1] * alpha) + (image2_rgba[count * 4 + 1] * beta);
+ image3_rgba[count * 4 + 2] = (image_rgba[count * 4 + 2] * alpha) + (image2_rgba[count * 4 + 2] * beta);
+ image3_rgba[count * 4 + 3] = 255;
+ }
+ return image3_rgba;
+}
+
+
+
+function set_alpha(){
+ var alpha = parseFloat(form4.alpha.value);
+ var beta = parseFloat(form4.beta.value); //beta = 1 - alpha
+
+ var comp = 1.00 - alpha
+ form4.beta.value = comp.toFixed(2);
+}
+
+function set_beta(){
+ var alpha = parseFloat(form4.alpha.value);
+ var beta = parseFloat(form4.beta.value);
+
+ var comp = 1.00 - beta;
+ form4.alpha.value = comp.toFixed(2);
+}
+
+
--- /dev/null
+var can; //canvas要素
+var ctx; //コンテキスト
+var file=0;//画像ファイル 0は有無の判断のために格納
+var magnification = 1;//拡大縮小倍率
+var movx=0;
+var movy=0; //平行移動のパラメータ
+const CANVAS_SIZE = 512;//canvasのサイズ
+var IMAGE_SIZE;//画像のサイズをCANVASSIZEにするからピクセル差を補正
+
+/**********************canvasに表示*******************************/
+function main(){
+ can = document.getElementById('coordinate_canvas');
+ ctx = can.getContext('2d');
+ can.width = CANVAS_SIZE;
+ can.height = CANVAS_SIZE;
+}
+
+//ローカルファイルの読み取り
+function loadFile(files){
+ file = files[0];
+ //ファイルアップロード2回目以降のcanvasの初期化
+ ctx.clearRect(0,0,can.width,can.height);
+ reseting();
+}
+
+//ファイルを選択でローカルから画像ファイルを読み込んでcanvasに描画する
+function displayImage(){
+ var width;
+ var height;
+ var left;
+ var to;
+ var image = new Image();
+ var reader = new FileReader();
+ reader.onload = function(event){
+ image.onload = function(){
+
+ //canvasのアンチエイリアスを無効
+ ctx.mozImageSmoothingEnabled = false;
+ ctx.webkitImageSmoothingEnabled = false;
+ ctx.msImageSmoothingEnabled = false;
+ ctx.imageSmoothingEnabled = false
+
+ if(image.width > image.height){
+ IMAGE_SIZE = image.width;
+ }else{
+ IMAGE_SIZE = image.height;
+ }
+
+ imageAspect = image.width / image.height;
+ if (imageAspect >= 1) { //画像が横長
+ left = 0;
+ width = can.width;
+ height = can.height / imageAspect;
+ to = (can.height - height) / 2;
+ } else { //画像が縦長
+ to = 0;
+ width = can.width * imageAspect;
+ height = can.height;
+ left = (can.width - width) / 2;
+ }
+
+ //ファイルアップロード2回目以降のcanvasの初期化
+ ctx.clearRect(0,0,can.width,can.height);
+
+ /****************変換適用***********************************************/
+ //コンテキストに対する効果の始点を中心に移動
+ ctx.translate(parseInt(can.width / 2),parseInt(can.height / 2));
+ //倍率をコンテキストに反映
+ ctx.scale(magnification,magnification);
+
+ ctx.translate(-parseInt(can.width / 2),-parseInt(can.height / 2));
+
+ /**************************************************************************/
+
+
+ //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
+ ctx.drawImage(image, 0, 0, image.width, image.height, left+movx, to-movy, width, height);
+
+ /*****************変換調整***********************************************/
+ //コンテキストに対する効果の始点を中心に移動
+ ctx.translate(parseInt(can.width / 2),parseInt(can.height / 2));
+ //画像の倍率の初期化
+ ctx.scale(1 / magnification,1 / magnification);
+
+ ctx.translate(-parseInt(can.width / 2),-parseInt(can.height / 2));
+ /****************************************************************************/
+ }
+ image.src = event.target.result;
+ }
+ if(file && file.type.match('image.*')){
+ reader.readAsDataURL(file);
+ }else{
+ return false;
+ }
+}
+
+//倍率の値を持ってくる関数
+function scaling(){
+ if(file==0){
+ window.alert("Please load image file.");
+ magnification_init();
+ return false;
+ }
+ magnification = parseFloat(form1.magnification.value);
+ displayImage();
+}
+
+//倍率を１に戻す関数
+function magnification_init(){
+ form1.magnification.value = 1.00; //htmlのフォームの中身を変える
+ magnification = parseFloat(form1.magnification.value); //実際の値を変える
+}
+
+//平行移動のパラメータを持ってくる関数
+function moving(){
+ if(file==0){
+ window.alert("Please load image file.");
+ move_params_init();
+ return false;
+ }
+ movx = parseFloat(form1.movex.value);
+ movy = parseFloat(form1.movey.value);
+ displayImage();
+}
+
+//平行移動パラメータの初期化
+function move_params_init(){
+ form1.movex.value = 0;
+ movx = parseFloat(form1.movex.value);
+ form1.movey.value = 0;
+ movy = parseFloat(form1.movey.value);
+}
+
+//画像変形のリセット
+function reseting(){
+ move_params_init();
+ magnification_init();
+ displayImage();
+}
+
+
+/**********************canvasに表示********************************/
+
+/********************************************/
+/****************coordinate******************/
+/********************************************/
+
+//coordinate メンバー
+function Coordinate(_number, _x, _y, _z){
+ this.number = _number;
+ this.x = _x;
+ this.y = _y;
+ this.z = _z;//将来的に３次元での解析を見越してZ座標をメンバーとして加えている
+}
+
+/////////////////////////////////////
+//マウスカーソルのキャンバス内の座標計算//
+/////////////////////////////////////
+function calculate_xy(event){
+
+ var mouseX = 0; //coordinate x of mouse point
+ var mouseY = 0; //coordinate y of mouse point
+ var positionX = 0; //coordinate x of canvas
+ var positionY = 0; //coordinate y of canvas
+ var x = 0; //coordinate x of mouse point in canvas
+ var y = 0; //coordinate y of mouse point in canvas
+
+ var order1 = parseInt(image_form.order1.value);//mm or μm or nm or A(ongstroom)//計算用
+ var order2 = parseInt(list_form.order2.value);//mm or um or nm or A //表用
+
+ var pixel_length = image_form.pixel_length.value;//画像のピクセルの大きさ（サーバー側から受け取り可能）
+
+ mouseX = event.pageX;
+ mouseY = event.pageY;
+
+ clientRect = document.getElementById("coordinate_canvas").getBoundingClientRect();
+ positionX = clientRect.left + window.pageXOffset;
+ positionY = clientRect.top + window.pageYOffset;
+
+ //画像中心を原点としてピクセル座標計算（平行移動対応）
+ if(CANVAS_SIZE%2){//奇数
+ x = mouseX - positionX - (can.width / 2) - movx;
+ y = -(mouseY - positionY - (can.height / 2)) - movy;
+ }else{//偶数（偶数の場合は原点は右上を採用）
+ x = mouseX - positionX - (can.width / 2) - movx;
+ y = -(mouseY - positionY - ((can.height / 2) - 1)) - movy;
+ }
+
+ //小数点切り捨て
+ x = ~~x;
+ y = ~~y;
+
+ //画像の実際の大きさのピクセルに戻す
+ x *= IMAGE_SIZE / CANVAS_SIZE;
+ y *= IMAGE_SIZE / CANVAS_SIZE;
+
+ //px -> mm,mim,nm ...ピクセルの寸法と元画像の大きさから算出
+ x *= pixel_length * Math.pow(10,-order1-(-order2)) / magnification;
+ y *= pixel_length * Math.pow(10,-order1-(-order2)) / magnification;
+
+ var coordinate = new Coordinate();
+ coordinate.x = parseFloat(x.toFixed(2));
+ coordinate.y = parseFloat(y.toFixed(2));
+ coordinate.z = 0;
+
+ return coordinate;
+}
+
+//////////////////////////////
+//現在のマウスカーソル座標の表示//
+//////////////////////////////
+document.getElementById("coordinate_canvas").addEventListener("mousemove", function(event){
+ var current_coordinate = document.getElementById("current_coordinate");
+ var coordinate = new Coordinate();
+ coordinate = calculate_xy(event);
+ if(!IMAGE_SIZE){
+ return false;
+ }else{
+ current_coordinate.innerHTML = "x: " + coordinate.x + " y:" + coordinate.y + " z:" + coordinate.z;
+ }
+});
+
+//////////////////////////////
+//クリックしたマウスカーソル座標//
+//////////////////////////////
+document.getElementById("coordinate_canvas").addEventListener("click", function(event){
+ if(!file){
+ window.alert("Please load image file.");
+ move_params_init();
+ return false;
+ }else{
+ var current_coordinate = document.getElementById("click_coordinate");
+ var coordinate = new Coordinate();
+ coordinate = calculate_xy(event);
+ add_list(coordinate);
+ }
+
+});
+
+/***************************************表(座標リストの処理)*****************************************/
+
+var coordinate_database = []; //座標のオブジェクトを格納する配列
+
+//add list
+function add_list(coordinate){
+
+ var tbody = document.getElementById("coordinate_table_tbody");
+ var new_tr = tbody.insertRow(-1);
+ var row_Index = new_tr.rowIndex; //row's index (start = 1) equal to table numbering
+
+ var number_td = new_tr.insertCell(-1);
+ var x_td = new_tr.insertCell(-1);
+ var y_td = new_tr.insertCell(-1);
+ var z_td = new_tr.insertCell(-1);
+ var button_td = new_tr.insertCell(-1);
+
+ coordinate.number = row_Index;
+
+ //表に反映
+ number_td.innerHTML = coordinate.number;
+ x_td.innerHTML = coordinate.x;
+ y_td.innerHTML = coordinate.y;
+ z_td.innerHTML = coordinate.z;
+ button_td.innerHTML = '<input type="button" value="delete" onClick="dele_list(this.parentNode.parentNode.rowIndex)">'//this.parentNode.parentNode.rowIndex -> Row number in list
+
+ //新しい座標データが来た時、coordinate_databaseに格納
+ if(coordinate_database.length == row_Index - 1){
+ coordinate_database[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
+ }
+
+ for(var j = 0; j < coordinate_database.length; j++){
+ console.log(coordinate_database[j]);
+ }
+}
+
+//delete list by button
+function dele_list(row_number){
+ var tbody = document.getElementById("coordinate_table_tbody");
+ var rows_length = tbody.rows.length;
+ for(var i=row_number; i <= rows_length; i++){
+ tbody.deleteRow(row_number-1);//deleteRow(0) -> delete table's 1st row.
+ }
+
+ coordinate_database.splice(row_number-1,1);//delete 1 data[row_number-1] from coordinate_database
+
+ //ボタンを押した階層より後の同レベル階層を削除（Table）
+ //配列データ(coordinate database)は座標データを残しaddlistに送ってnumberを書き換えtableに反映
+ for(j = row_number - 1; j < coordinate_database.length; j++){
+ add_list(coordinate_database[j])
+ }
+}
+
+//all clear list
+function all_clear(){
+ var tbody = document.getElementById("coordinate_table_tbody");
+ var rows_length = tbody.rows.length;
+
+ for(var i=1; i <= rows_length; i++){
+ tbody.deleteRow(-1);
+ coordinate_database.pop(); //最下層まで消す
+ }
+ //console.log(coordinate_database);
+}
+
+//Download csv
+function download(){
+ var number;
+ var x;
+ var y;
+ var z;
+
+ var text = "";
+ //リストをテキストにする
+ for(var i=0; i<coordinate_database.length; i++){
+
+ number = coordinate_database[i].number;
+ x = coordinate_database[i].x;
+ y = coordinate_database[i].y;
+ z = coordinate_database[i].z;
+
+ text += '"' + number + '","' + x + '","' + y + '","' + z + "\n";
+ }
+
+ var blob = new Blob([text], {type: 'text/plain'});
+ var link = document.getElementById('download_link');
+ var filename = download_form.filename.value;
+
+ if(!filename){//ファイル名指定なし
+ window.alert("Please write filename");
+ return false;
+ }
+
+ //ボタン付近に設置したaタグにblobデータのリンクを貼り、クリックさせることで保存させる。
+ link.href = window.URL.createObjectURL(blob);
+ link.download = filename;
+ link.click();
+}
+
+//Upload csv
+function upload(files){
+
+ all_clear();
+
+ var csv_text = "";
+ var array_csv;
+ var arr = [];
+ var coordinate = new Coordinate;
+
+ var reader = new FileReader();
+ reader.readAsText(files[0]);
+ reader.onload = function(event){
+
+ csv_text = reader.result;
+ array_csv = csv_text.split('\n');
+ console.log("a");
+ //２次元配列にしてオブジェクトに変更後、addlistへ渡す。
+ for(var i=0; i<array_csv.length; i++){
+ if(array_csv[i] == ''){
+ break;
+ }
+ arr[i] = array_csv[i].split(',');
+
+ for(var j=0; j<arr[i].length; j++){
+ arr[i][j] = parseFloat(arr[i][j].replace('"',''));
+ }
+ coordinate.number = arr[i][0];
+ coordinate.x = arr[i][1];
+ coordinate.y = arr[i][2];
+ coordinate.z = arr[i][3];
+
+ add_list(coordinate);
+ }
+ }
+}
+
+
+
+//Download star
+function download_star(){
+ var number;
+ var x;
+ var y;
+ var z;
+
+ var text = "loop_\n";
+ text += "_Number\n";
+ text += "_x\n";
+ text += "_y\n";
+ text += "_z\n";
+
+ //リストをテキストにする
+ for(var i=0; i<coordinate_database.length; i++){
+
+ number = coordinate_database[i].number;
+ x = coordinate_database[i].x;
+ y = coordinate_database[i].y;
+ z = coordinate_database[i].z;
+
+ text += number + "\t" + x + "\t" + y + "\t" + z + "\n";
+ }
+
+ var blob = new Blob([text], {type: 'text/plain'});
+ var link = document.getElementById('download_link_star');
+ var filename = download_form.filename_star.value;
+
+ if(!filename){//ファイル名指定なし
+ window.alert("Please write filename");
+ return false;
+ }
+
+ //ボタン付近に設置したaタグにblobデータのリンクを貼り、クリックさせることで保存させる。
+ link.href = window.URL.createObjectURL(blob);
+ link.download = filename;
+ link.click();
+}
+
+//Upload star
+function upload_star(files){
+
+ all_clear();
+
+ var csv_text = "";
+ var array_csv;
+ var arr = [];
+ var coordinate = new Coordinate;
+
+ var reader = new FileReader();
+ reader.readAsText(files[0]);
+ reader.onload = function(event){
+
+ csv_text = reader.result;
+ array_csv = csv_text.split('\n');
+ console.log("a");
+ //２次元配列にしてオブジェクトに変更後、addlistへ渡す。
+ for(var i=5; i<array_csv.length; i++){
+ if(array_csv[i] == ''){
+ break;
+ }
+ arr[i] = array_csv[i].split('\t');
+
+ for(var j=0; j<arr[i].length; j++){
+ arr[i][j] = parseFloat(arr[i][j]);
+ }
+ coordinate.number = arr[i][0];
+ coordinate.x = arr[i][1];
+ coordinate.y = arr[i][2];
+ coordinate.z = arr[i][3];
+
+ add_list(coordinate);
+ }
+ }
+}
+/***************************************表(座標リストの処理)*****************************************/
\ No newline at end of file
--- /dev/null
+var CANVAS_SIZE = 512;//canvasのサイズ
+//left canvas
+var can; //canvas要素
+var ctx; //コンテキスト
+//var image = new Image();
+//var reader = new FileReader();
+//var imageAspect=0; //画像のアスペクト比
+var file=0;//画像ファイル 0は有無の判断のために格納
+var magnification = 1;//拡大縮小倍率
+var angle=0; //回転角(度) ユーザー入力の値
+var movx=0;
+var movy=0; //平行移動のパラメータ
+//right canvas
+var canR; //canvas要素
+var ctxR; //コンテキスト
+//var imageR = new Image();
+//var readerR = new FileReader();
+//var imageAspectR = 0; //画像のアスペクト比
+var fileR = 0;//画像ファイル 0は有無の判断のために格納
+var magnificationR = 1;//拡大縮小倍率
+var angleR = 0; //回転角(度) ユーザー入力の値
+var movxR = 0;
+var movyR = 0; //平行移動のパラメータ
+
+
+//Left canvas 's ACTION
+//bodyタグロード完了後、実行される
+function main(){
+ can = document.getElementById('canvas');
+ ctx = can.getContext('2d');
+ can.width = CANVAS_SIZE;
+ can.height = CANVAS_SIZE;
+ canR = document.getElementById('canvas2');
+ ctxR = canR.getContext('2d');
+ canR.width = CANVAS_SIZE;
+ canR.height = CANVAS_SIZE;
+}
+
+//ローカルファイルの読み取り
+function loadFile(files){
+ file = files[0];
+ //ファイルアップロード2回目以降のcanvasの初期化
+ ctx.clearRect(0,0,can.width,can.height);
+ magnification_init();
+ rotation_init();
+ move_params_init();
+ displayImage();
+}
+
+
+
+//ファイルを選択でローカルから画像ファイルを読み込んでcanvasに描画する
+function displayImage(){
+ var width;
+ var height;
+ var left;
+ var to;
+ var imageAspect=0;
+ var image = new Image();
+ var reader = new FileReader();
+
+ reader.onload = function(event){
+
+ image.onload = function(){
+
+ //canvasのアンチエイリアスを無効
+ ctx.mozImageSmoothingEnabled = false;
+ ctx.webkitImageSmoothingEnabled = false;
+ ctx.msImageSmoothingEnabled = false;
+ ctx.imageSmoothingEnabled = false
+
+ imageAspect = image.width / image.height;
+ if (imageAspect >= 1) { //画像が横長
+ left = 0;
+ width = can.width;
+ height = can.height / imageAspect;
+ to = (can.height - height) / 2;
+ } else { //画像が縦長
+ to = 0;
+ width = can.width * imageAspect;
+ height = can.height;
+ left = (can.width - width) / 2;
+ }
+
+
+
+ //ファイルアップロード2回目以降のcanvasの初期化
+ ctx.clearRect(0,0,can.width,can.height);
+
+
+ /****************変換適用***********************************************/
+ //コンテキストに対する効果の始点を中心に移動
+ ctx.translate(parseInt(can.width / 2),parseInt(can.height / 2));
+ //倍率をコンテキストに反映
+ ctx.scale(magnification,magnification);
+ //回転をコンテキストに反映
+ ctx.rotate(angle / 180 * Math.PI);
+
+ ctx.translate(-parseInt(can.width / 2),-parseInt(can.height / 2));
+
+ /**************************************************************************/
+
+
+ //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
+ ctx.drawImage(image, 0, 0, image.width, image.height, left+movx, to-movy, width, height);
+
+ /*****************変換調整***********************************************/
+ //コンテキストに対する効果の始点を中心に移動
+ ctx.translate(parseInt(can.width / 2),parseInt(can.height / 2));
+ //画像の倍率の初期化
+ ctx.scale(1 / magnification,1 / magnification);
+ //角度の初期化
+ ctx.rotate(-1 * angle / 180 * Math.PI);
+ ctx.translate(-parseInt(can.width / 2),-parseInt(can.height / 2));
+
+ /****************************************************************************/
+ }
+ image.src = event.target.result;
+ }
+ if(file && file.type.match('image.*')){
+ reader.readAsDataURL(file);
+ }else{
+ return false;
+ }
+}
+
+//倍率の値を持ってくる関数
+function scaling(){
+ if(file==0){
+ window.alert("Please load image file.");
+ magnification_init();
+ return false;
+ }
+ magnification = parseFloat(form1.magnification.value);
+ displayImage();
+}
+
+//倍率を１に戻す関数
+function magnification_init(){
+ form1.magnification.value = 1.00; //htmlのフォームの中身を変える
+ magnification = parseFloat(form1.magnification.value); //実際の値を変える
+}
+
+
+
+
+// 回転角を持ってくる関数
+function rotation(){
+ if(file==0){
+ window.alert("Please load image file.");
+ rotation_init();
+ return false;
+ }
+ angle = parseFloat(form1.angle.value);
+ displayImage();
+}
+
+//回転角を０に戻す関数
+function rotation_init(){
+ form1.angle.value = 0;
+ angle = parseFloat(form1.angle.value);
+}
+
+
+
+ //平行移動のパラメータを持ってくる関数
+function moving(){
+ if(file==0){
+ window.alert("Please load image file.");
+ move_params_init();
+ return false;
+ }
+ movx = parseFloat(form1.movex.value);
+ movy = parseFloat(form1.movey.value);
+ displayImage();
+}
+
+//平行移動パラメータの初期化
+function move_params_init(){
+ form1.movex.value = 0;
+ movx = parseFloat(form1.movex.value);
+ form1.movey.value = 0;
+ movy = parseFloat(form1.movey.value);
+}
+
+
+function reseting(){
+ move_params_init();
+ rotation_init();
+ magnification_init();
+ displayImage();
+}
+
+
+
+/************************************************Right canvas 's ACTION***************************************/
+
+//ローカルファイルの読み取り
+function loadFileR(files){
+ fileR = files[0];
+ console.log(fileR);
+ //ファイルアップロード2回目以降のcanvasの初期化
+ ctxR.clearRect(0,0,can.width,can.height);
+ magnification_initR();
+ rotation_initR();
+ move_params_initR();
+ displayImageR();
+}
+
+
+
+//ファイルを選択でローカルから画像ファイルを読み込んでcanvasに描画する
+function displayImageR(){
+ var width;
+ var height;
+ var left;
+ var to;
+ var imageAspectR = 0;
+ var imageR = new Image();
+ var readerR = new FileReader();
+
+ readerR.onload = function(event){
+
+ imageR.onload = function(){
+
+ //canvasのアンチエイリアスを無効
+ ctxR.mozImageSmoothingEnabled = false;
+ ctxR.webkitImageSmoothingEnabled = false;
+ ctxR.msImageSmoothingEnabled = false;
+ ctxR.imageSmoothingEnabled = false
+
+ imageAspectR = imageR.width / imageR.height;
+ if (imageAspectR >= 1) { //画像が横長
+ left = 0;
+ width = canR.width;
+ height = canR.height / imageAspectR;
+ to = (canR.height - height) / 2;
+ } else { //画像が縦長
+ to = 0;
+ width = canR.width * imageAspectR;
+ height = canR.height;
+ left = (canR.width - width) / 2;
+ }
+
+
+
+ //ファイルアップロード2回目以降のcanvasの初期化
+ ctxR.clearRect(0,0,canR.width,canR.height);
+
+
+ /****************変換適用***********************************************/
+ //コンテキストに対する効果の始点を中心に移動
+ ctxR.translate(parseInt(canR.width / 2),parseInt(canR.height / 2));
+ //倍率をコンテキストに反映
+ ctxR.scale(magnificationR,magnificationR);
+ //回転をコンテキストに反映
+ ctxR.rotate(angleR / 180 * Math.PI);
+
+ ctxR.translate(-parseInt(canR.width / 2),-parseInt(canR.height / 2));
+
+ /**************************************************************************/
+
+ //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
+ ctxR.drawImage(imageR, 0, 0, imageR.width, imageR.height, left+movxR, to-movyR, width, height);
+
+ /*****************変換調整***********************************************/
+ //コンテキストに対する効果の始点を中心に移動
+ ctxR.translate(parseInt(canR.width / 2),parseInt(canR.height / 2));
+ //画像の倍率の初期化
+ ctxR.scale(1 / magnificationR,1 / magnificationR);
+ //角度の初期化
+ ctxR.rotate(-1 * angleR / 180 * Math.PI);
+
+ ctxR.translate(-parseInt(canR.width / 2),-parseInt(canR.height / 2));
+ /****************************************************************************/
+ }
+ imageR.src = event.target.result;
+ }
+ if(fileR && fileR.type.match('image.*')){
+ readerR.readAsDataURL(fileR);
+ }else{
+ return false;
+ }
+}
+
+//倍率の値を持ってくる関数
+function scalingR(){
+ if(fileR==0){
+ window.alert("Please load image file.");
+ magnification_initR();
+ return false;
+ }
+ magnificationR = parseFloat(form2.magnification.value);
+ displayImageR();
+}
+
+//倍率を１に戻す関数
+function magnification_initR(){
+ form2.magnification.value = 1.00; //htmlのフォームの中身を変える
+ magnificationR = parseFloat(form2.magnification.value); //実際の値を変える
+}
+
+// 回転角を持ってくる関数
+function rotationR(){
+ if(fileR==0){
+ window.alert("Please load image file.");
+ rotation_initR();
+ return false;
+ }
+ angleR = parseFloat(form2.angle.value);
+ displayImageR();
+}
+
+//回転角を０に戻す関数
+function rotation_initR(){
+ form2.angle.value = 0;
+ angleR = parseFloat(form2.angle.value);
+ //console.log("executed rotation_initR()");
+}
+
+ //平行移動のパラメータを持ってくる関数
+function movingR(){
+ if(file==0){
+ window.alert("Please load image file.");
+ move_params_initR();
+ return false;
+ }
+ movxR = parseFloat(form2.movex.value);
+ movyR = parseFloat(form2.movey.value);
+ displayImageR();
+}
+
+//平行移動パラメータの初期化
+function move_params_initR(){
+ form2.movex.value = 0;
+ movxR = parseFloat(form2.movex.value);
+ form2.movey.value = 0;
+ movyR = parseFloat(form2.movey.value);
+}
+
+
+function resetingR(){
+ move_params_initR();
+ rotation_initR();
+ magnification_initR();
+ displayImageR();
+}
function drawMycrograph(ddata){
- var canvas = document.getElementById("canvasSimplePhoto");
+ var canvas = document.getElementById("em_canvas");
var length;
var context;
context.putImageData(imgData, 0, 0);
}
+
$(function(){
var state="off"
}
});
});
+
--- /dev/null
+var CANVAS_SIZE = 512;
+
+function Display(_canvas,_context,_file,_image,_sorce){
+ this.canvas = _canvas;
+ this.context = _context;
+ this.file = _file;
+ this.image = _image;
+ this.sorce = _sorce;
+ this.magnification = 1;
+ this.movx = 0;
+ this.movy = 0;
+ this.angle = 0;
+}
+
+var display1 = new Display();//1
+var display2 = new Display();//2
+var display3 = new Display();//3
+var display4 = new Display();//4
+
+function main(){
+ display1.canvas = document.getElementById('canvas');
+ display2.canvas = document.getElementById('canvas2');
+ display3.canvas = document.getElementById('canvas3');
+ display4.canvas = document.getElementById('canvas4');
+ display1.context = display1.canvas.getContext('2d');
+ display2.context = display2.canvas.getContext('2d');
+ display3.context = display3.canvas.getContext('2d');
+ display4.context = display4.canvas.getContext('2d');
+ display1.canvas.height = CANVAS_SIZE;
+ display1.canvas.width = CANVAS_SIZE;
+ display2.canvas.height = CANVAS_SIZE;
+ display2.canvas.width = CANVAS_SIZE;
+ display3.canvas.height = CANVAS_SIZE;
+ display3.canvas.width = CANVAS_SIZE;
+ display4.canvas.height = CANVAS_SIZE;
+ display4.canvas.width = CANVAS_SIZE;
+}
+
+//ローカルファイルの読み取り
+function loadFile(files,number){
+ file = files[0];
+ if(number == 1){
+ display1.file = file;
+ display1.context.clearRect(0,0,display1.canvas.width,display1.canvas.height);
+ magnification_init(display1);
+ rotation_init(display1);
+ move_params_init(display1);
+ displayImage(display1);
+ }else if(number == 2){
+ display2.file = file;
+ display2.context.clearRect(0,0,display2.canvas.width,display2.canvas.height);
+ magnification_init(display2);
+ rotation_init(display2);
+ move_params_init(display2);
+ displayImage(display2);
+ }
+}
+
+//ファイルを選択でローカルから画像ファイルを読み込んでcanvasに描画する
+function displayImage(display){
+ var width;
+ var height;
+ var left;
+ var to;
+ var imageAspect=0;
+ var image = new Image();
+ var reader = new FileReader();
+
+ if(!display.file){//display4に対する描画
+ console.log("no file");
+ //canvasのアンチエイリアスを無効
+ display.context.mozImageSmoothingEnabled = false;
+ display.context.webkitImageSmoothingEnabled = false;
+ display.context.msImageSmoothingEnabled = false;
+ display.context.imageSmoothingEnabled = false
+
+ /*
+ imageAspect = image.width / image.height;
+ if (imageAspect >= 1) { //画像が横長
+ left = 0;
+ width = display.canvas.width;
+ height = display.canvas.height / imageAspect;
+ to = (display.canvas.height - height) / 2;
+ } else { //画像が縦長
+ to = 0;
+ width = display.canvas.width * imageAspect;
+ height = display.canvas.height;
+ left = (display.canvas.width - width) / 2;
+ }
+ */
+ //ファイルアップロード2回目以降のcanvasの初期化
+ display.context.clearRect(0,0,display.canvas.width,display.canvas.height);
+ /****************変換適用***********************************************/
+ display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2));//コンテキストに対する効果の始点を中心に移動
+ display.context.scale(display.magnification,display.magnification);//倍率をコンテキストに反映
+ display.context.rotate(display.angle / 180 * Math.PI);//回転をコンテキストに反映
+ display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
+ /**************************************************************************/
+
+ //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
+ display.context.drawImage(display3.canvas, 0, 0, display.canvas.width, display.canvas.height, display.movx, display.movy,display.canvas.width, display.canvas.height);
+
+ /*****************変換調整***********************************************/
+ display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2)); //コンテキストに対する効果の始点を中心に移動
+ display.context.scale(1 / display.magnification,1 / display.magnification);//画像の倍率の初期化
+ display.context.rotate(-1 * display.angle / 180 * Math.PI);//角度の初期化
+ display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
+ /****************************************************************************/
+ }else{
+ console.log("no image");
+ reader.onload = function(event){
+ image.onload = function(){
+
+ //canvasのアンチエイリアスを無効
+ display.context.mozImageSmoothingEnabled = false;
+ display.context.webkitImageSmoothingEnabled = false;
+ display.context.msImageSmoothingEnabled = false;
+ display.context.imageSmoothingEnabled = false
+
+ imageAspect = image.width / image.height;
+ if (imageAspect >= 1) { //画像が横長
+ left = 0;
+ width = display.canvas.width;
+ height = display.canvas.height / imageAspect;
+ to = (display.canvas.height - height) / 2;
+ } else { //画像が縦長
+ to = 0;
+ width = display.canvas.width * imageAspect;
+ height = display.canvas.height;
+ left = (display.canvas.width - width) / 2;
+ }
+
+ //ファイルアップロード2回目以降のcanvasの初期化
+ display.context.clearRect(0,0,display.canvas.width,display.canvas.height);
+
+ /****************変換適用***********************************************/
+ display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2));//コンテキストに対する効果の始点を中心に移動
+ display.context.scale(display.magnification,display.magnification);//倍率をコンテキストに反映
+ display.context.rotate(display.angle / 180 * Math.PI);//回転をコンテキストに反映
+ display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
+ /**************************************************************************/
+
+ //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
+ display.context.drawImage(image, 0, 0, image.width, image.height, left+display.movx, to-display.movy, width, height);
+
+ /*****************変換調整***********************************************/
+ display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2)); //コンテキストに対する効果の始点を中心に移動
+ display.context.scale(1 / display.magnification,1 / display.magnification);//画像の倍率の初期化
+ display.context.rotate(-1 * display.angle / 180 * Math.PI);//角度の初期化
+ display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
+ /****************************************************************************/
+ }
+ image.src = event.target.result;
+ }
+ if(display.file && display.file.type.match('image.*')){
+ reader.readAsDataURL(display.file);
+ }else{
+ return false;
+ }
+ }
+}
+
+//倍率の値を持ってくる関数
+function scaling(number){
+ if(number == 1){
+ display1.magnification = parseFloat(form1.magnification.value);
+ displayImage(display1);
+ }else if(number == 2){
+ display2.magnification = parseFloat(form2.magnification.value);
+ displayImage(display2);
+ }else if(number == 4){
+ display4.magnification = parseFloat(form4.magnification.value);
+ displayImage(display4);
+ }
+}
+
+// 回転角を持ってくる関数
+function rotation(number){
+ if(number == 1){
+ display1.angle = parseFloat(form1.angle.value);
+ displayImage(display1);
+ }else if(number == 2){
+ display2.angle = parseFloat(form2.angle.value);
+ displayImage(display2);
+ }
+}
+
+ //平行移動のパラメータを持ってくる関数
+function moving(number){
+ if(number == 1){
+ display1.movx = parseFloat(form1.movex.value);
+ display1.movy = parseFloat(form1.movey.value);
+ displayImage(display1);
+ }else if(number == 2){
+ display2.movx = parseFloat(form2.movex.value);
+ display2.movy = parseFloat(form2.movey.value);
+ displayImage(display2);
+ }else if(number == 4){
+ display4.movx = parseFloat(form4.movex.value);
+ display4.movy = parseFloat(form4.movey.value);
+ displayImage(display4);
+ }
+}
+
+//回転角を０に戻す関数
+function rotation_init(number,display){
+ if(number == 1){
+ form1.angle.value = 0;
+ display.angle = parseFloat(form1.angle.value);
+ }else if(number == 2){
+ form2.angle.value = 0;
+ display.angle = parseFloat(form2.angle.value);
+ }
+}
+
+//倍率を１に戻す関数
+function magnification_init(number,display){
+ if(number == 1){
+ form1.magnification.value = 1.00;
+ display.magnification = parseFloat(form1.magnification.value);
+ }else if(number == 2){
+ form2.magnification.value = 1.00;
+ display.magnification = parseFloat(form2.magnification.value);
+ }else if(number == 4){
+ form4.magnification.value = 1.00;
+ display.magnification = parseFloat(form4.magnification.value);
+ }
+}
+
+//平行移動パラメータの初期化
+function move_params_init(number,display){
+ if(number == 1){
+ form1.movex.value = 0;
+ form1.movey.value = 0;
+ display.movx = parseFloat(form1.movex.value);
+ display.movy = parseFloat(form1.movey.value);
+ }else if(number == 2){
+ form2.movex.value = 0;
+ form2.movey.value = 0;
+ display.movx = parseFloat(form2.movex.value);
+ display.movy = parseFloat(form2.movey.value);
+ }else if(number == 4){
+ form4.movex.value = 0;
+ form4.movey.value = 0;
+ display.movx = parseFloat(form4.movex.value);
+ display.movy = parseFloat(form4.movey.value);
+ }
+}
+
+function reseting(number){
+ if(number == 1){
+ move_params_init(number,display1);
+ rotation_init(number,display1);
+ magnification_init(number,display1);
+ displayImage(display1);
+ }else if(number == 2){
+ move_params_init(number,display2);
+ rotation_init(number,display2);
+ magnification_init(number,display2);
+ displayImage(display2);
+ }else if(number == 4){
+ move_params_init(number,display4);
+ magnification_init(number,display4);
+ displayImage(display4);
+
+ }
+}
+
+
+/******* WITs *********************************************************** vem ********************
+******************* WITs ****************************************** vem ******** vem *************
+vem ************************ WITs **************************** vem ******************* vem *******
+****** vem ***************************** WITs ********* vem ****************************** vem ***
+*************** vem **************************** vem WITs ************************************ vem
+************************ vem ************* vem ***************** WITs ****************************
+********************************* vem ***************************************** WITs ************/
+
+function color(){
+
+ var image = display1.context.getImageData(0,0,display1.canvas.width,display1.canvas.height);
+ var image2 = display2.context.getImageData(0,0,display2.canvas.width,display2.canvas.height);
+ var image3 = display3.context.createImageData(display3.canvas.width,display3.canvas.height);
+
+ var image_rgba = image.data;
+ var image2_rgba = image2.data;
+ var image3_rgba = image3.data;
+
+ image_rgba = color_change(image_rgba, 1);
+ image2_rgba = color_change(image2_rgba, 2);
+ image3_rgba = make_new_Image(image_rgba, image2_rgba, image3_rgba);
+
+ display3.context.putImageData(image3, 0, 0);
+ displayImage(display4);
+}
+
+//ピクセル配列の値(色情報)の書き換え
+function color_change(image_rgba, mode){
+ var max, min;
+ var R,G,B;
+ var H;
+ var before_color,after_color;
+ var diff_color;
+
+ //canvas選択 1-display1のcanvas ,2-display2のcanvas
+ if(mode == 1){
+ before_color = parseInt(color_form.before_color.value);
+ after_color = parseInt(color_form.after_color.value);
+ }else if(mode == 2){
+ before_color = parseInt(color_form.before_color2.value);
+ after_color = parseInt(color_form.after_color2.value);
+ }
+ diff_color = after_color - before_color;
+
+ /**************RGB->HSV*******************************/
+ for (var i = 0; i < image_rgba.length ; i++){
+ R = image_rgba[i * 4] / 255;//RGBAの値は0-255で与えられている
+ G = image_rgba[i * 4 + 1] / 255;
+ B = image_rgba[i * 4 + 2] / 255;
+
+ if(R == G && G == B){
+ continue;
+ }else if(R >= G && R >= B){
+ if(G >= B){
+ max = R;
+ min = B;
+ }else if(B > G){
+ max = R;
+ min = G;
+ }
+ }else if(G >= R && G >= B){
+ if(R >= B){
+ max = G;
+ min = B;
+ }else if(B > R){
+ max = G;
+ min = R;
+ }
+ }else if(B >= R && B >= G){
+ if(R >= G){
+ max = B;
+ min = G;
+ }else if(G > R){
+ max = B;
+ min = R;
+ }
+ }
+
+ if(max == R){
+ H = 60 * (G - B)/(max - min);
+ H %= 360;
+ }else if(max == G){
+ H = (60 * (B - R) / (max - min)) + 120;
+ H %= 360;
+ }else if(max == B){
+ H = (60 * (R - G) / (max - min)) + 240;
+ H %= 360;
+ }
+
+ /*****************color change*********************/
+ //値書き換え（色相変換）
+ if (before_color != 1 && after_color != 1){
+ if(H >= (before_color-1) * 60 -30 && H < (before_color * 60 -30)){
+ H = H + 60 * diff_color;
+ }
+ }else if(before_color == 1 && after_color != 1){
+ if(H >= 0 && H < 30){
+ H = H + 60 * diff_color;
+ }else if(H >= 330 && H <= 360){
+ H = H - 60 * (6 - diff_color);
+ }
+ }else if(before_color != 1 && after_color == 1){
+ if(H >= (before_color - 1) * 60 -30 && H < (before_color - 1) * 60 ){
+ H = H + 60 * (6 + diff_color);
+ }else if(H >= (before_color - 1) * 60 && H < before_color * 60 -30){
+ H = H + 60 * diff_color;
+ }
+ }else{
+ continue;
+ }
+
+ /***********************HSV->RGB************************/
+ if(H >= 0 && H < 60){
+ R = max;
+ G = (H / 60) * (max - min) + min;
+ B = min;
+ }else if(H >= 60 && H < 120){
+ R = -((H-120) / 60) * (max - min) + min;
+ G = max;
+ B = min;
+ }else if(H >= 120 && H < 180){
+ R = min
+ G = max;
+ B = ((H-120) / 60) * (max - min) + min;
+ }else if(H >= 180 && H < 240){
+ R = min
+ G = -((H-240) / 60) * (max - min) + min;
+ B = max;
+ }else if(H >= 240 && H < 300){
+ R = ((H-240) / 60) * (max - min) + min;
+ G = min;
+ B = max;
+ }else if(H >= 300 && H <= 360){
+ R = max;
+ G = min;
+ B = (-(H-360) / 60) * (max - min) + min;
+ }else{
+ continue;
+ }
+
+ image_rgba[i * 4] = R * 255;
+ image_rgba[i * 4 + 1] = G * 255;
+ image_rgba[i * 4 + 2] = B * 255;
+
+ }
+ return image_rgba;
+}
+
+
+/*************create new image data*************/
+ /*
+ image_rgba[count * 4] //R
+ image_rgba[count * 4 + 1] //G
+ image_rgba[count * 4 + 2] //B
+ image_rgba[count * 4 + 3] //A
+
+ image2_rgba[count * 4] //R
+ image2_rgba[count * 4 + 1] //G
+ image2_rgba[count * 4 + 2] //B
+ image2_rgba[count * 4 + 3] //A
+ */
+function make_new_Image(image_rgba, image2_rgba, image3_rgba){
+
+ var alpha = parseFloat(color_form.alpha.value);
+ var beta = parseFloat(color_form.beta.value);
+
+ for(var count = 0; count < image3_rgba.length; count++){
+ image3_rgba[count * 4] = (image_rgba[count * 4] * alpha) + (image2_rgba[count * 4] * beta);
+ image3_rgba[count * 4 + 1] = (image_rgba[count * 4 + 1] * alpha) + (image2_rgba[count * 4 + 1] * beta);
+ image3_rgba[count * 4 + 2] = (image_rgba[count * 4 + 2] * alpha) + (image2_rgba[count * 4 + 2] * beta);
+ image3_rgba[count * 4 + 3] = (image_rgba[count * 4 + 3] * alpha) + (image2_rgba[count * 4 + 3] * beta);
+ //image3_rgba[count * 4 + 3] = 255;
+ }
+ return image3_rgba;
+}
+
+function set_alpha(){
+ var alpha = parseFloat(color_form.alpha.value);
+ var beta = parseFloat(color_form.beta.value); //beta = 1 - alpha
+ var comp = 1.00 - alpha
+ color.beta.value = comp.toFixed(2);
+}
+
+function set_beta(){
+ var alpha = parseFloat(color_form.alpha.value);
+ var beta = parseFloat(color_form.beta.value);
+ var comp = 1.00 - beta;
+ color.alpha.value = comp.toFixed(2);
+}
+
--- /dev/null
+{
+const CANVAS_SIZE = 512;
+//座標取得の際、元の画像の大きさをCANVAS_SIZEの寸法でリサイズしているからIMAZE_SIZEを記憶して、取得する座標値を正確にする
+var IMAGE_SIZE;//合成画像におけるIMAZE_SIZEはdisplay1に依存する仕様
+
+
+function Display(_canvas,_context,_file,_image,_sorce,_number,_id){
+ this.canvas = _canvas;
+ this.context = _context;
+ this.file = _file;
+ this.image = _image;
+ this.sorce = _sorce;
+ this.thumbnail_number = _number;
+ this.thumbnail_canvas_id = _id;
+ this.magnification = 1;
+ this.movx = 0;
+ this.movy = 0;
+ this.angle = 0;
+ this.config_x = "No Data.";
+ this.config_y = "No Data.";
+ this.config_z = "No Data.";
+ this.config_alfa = "No Data.";
+ this.config_beta = "No Data.";
+ this.config_offsetX = "No Data.";
+ this.config_offsetY = "No Data.";
+ this.config_angle = "No Data.";
+}
+
+var display1 = new Display(); // LM
+var display2 = new Display(); // EM
+var display3 = new Display(); // Blend[Color]
+var display4 = new Display(); // Scale&MoveXY
+
+var thumbnails = []; //サムネイルの配列
+
+//main HTMLがロードされると呼び出される
+function main(){
+ display1.canvas = document.getElementById('canvas');
+ display2.canvas = document.getElementById('canvas2');
+ display3.canvas = document.getElementById('canvas3');
+ display4.canvas = document.getElementById('canvas4');
+
+ display1.context = display1.canvas.getContext('2d');
+ display2.context = display2.canvas.getContext('2d');
+ display3.context = display3.canvas.getContext('2d');
+ display4.context = display4.canvas.getContext('2d');
+
+ display1.canvas.height = CANVAS_SIZE;
+ display1.canvas.width = CANVAS_SIZE;
+ display2.canvas.height = CANVAS_SIZE;
+ display2.canvas.width = CANVAS_SIZE;
+ display3.canvas.height = CANVAS_SIZE;
+ display3.canvas.width = CANVAS_SIZE;
+ display4.canvas.height = CANVAS_SIZE;
+ display4.canvas.width = CANVAS_SIZE;
+}
+
+//ローカルファイルの読み取り
+function loadFile(files,number){
+ file = files[0];
+ if(number == -1){
+ display1.file = file;
+ display1.context.clearRect(0,0,display1.canvas.width,display1.canvas.height);
+ magnification_init(display1);
+ rotation_init(display1);
+ move_params_init(display1);
+ displayImage(display1);
+ }else if(number != -1){
+ thumbnails[number-1].file = file;
+ make_canvas(thumbnails[number-1]);
+ }
+}
+
+//ファイルを選択でローカルから画像ファイルを読み込んでcanvasに描画する
+function displayImage(display){
+ var width;
+ var height;
+ var left;
+ var to;
+ var imageAspect=0;
+ var image = new Image();
+ var reader = new FileReader();
+
+ if(!display.file){//display4に対する描画
+ //canvasのアンチエイリアスを無効
+ display.context.mozImageSmoothingEnabled = false;
+ display.context.webkitImageSmoothingEnabled = false;
+ display.context.msImageSmoothingEnabled = false;
+ display.context.imageSmoothingEnabled = false;
+
+ /*
+ imageAspect = image.width / image.height;
+ if (imageAspect >= 1) { //画像が横長
+ left = 0;
+ width = display.canvas.width;
+ height = display.canvas.height / imageAspect;
+ to = (display.canvas.height - height) / 2;
+ } else { //画像が縦長
+ to = 0;
+ width = display.canvas.width * imageAspect;
+ height = display.canvas.height;
+ left = (display.canvas.width - width) / 2;
+ }
+ */
+ //ファイルアップロード2回目以降のcanvasの初期化
+ display.context.clearRect(0,0,display.canvas.width,display.canvas.height);
+ /****************変換適用***********************************************/
+ display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2)); //コンテキストに対する効果の始点を中心に移動
+ display.context.scale(display.magnification,display.magnification); //倍率をコンテキストに反映
+ display.context.rotate(display.angle / 180 * Math.PI); //回転をコンテキストに反映
+ display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
+ /**************************************************************************/
+
+ //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
+ display.context.drawImage(display3.canvas, 0, 0, display.canvas.width, display.canvas.height, display.movx/display.magnification, display.movy/display.magnification, display.canvas.width, display.canvas.height);
+
+ /*****************変換調整***********************************************/
+ display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2)); //コンテキストに対する効果の始点を中心に移動
+ display.context.scale(1 / display.magnification,1 / display.magnification); //画像の倍率の初期化
+ display.context.rotate(-1 * display.angle / 180 * Math.PI); //角度の初期化
+ display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
+ /****************************************************************************/
+ }else{
+ reader.onload = function(event){
+ image.onload = function(){
+
+ //canvasのアンチエイリアスを無効
+ display.context.mozImageSmoothingEnabled = false;
+ display.context.webkitImageSmoothingEnabled = false;
+ display.context.msImageSmoothingEnabled = false;
+ display.context.imageSmoothingEnabled = false;
+
+ if(display == display1){
+ if(image.width > image.height){
+ IMAGE_SIZE = image.width;
+ }else{
+ IMAGE_SIZE = image.height;
+ }
+ }
+
+ imageAspect = image.width / image.height;
+ if (imageAspect >= 1) { //画像が横長
+ left = 0;
+ width = display.canvas.width;
+ height = display.canvas.height / imageAspect;
+ to = (display.canvas.height - height) / 2;
+ } else { //画像が縦長
+ to = 0;
+ width = display.canvas.width * imageAspect;
+ height = display.canvas.height;
+ left = (display.canvas.width - width) / 2;
+ }
+
+ //ファイルアップロード2回目以降のcanvasの初期化
+ display.context.clearRect(0,0,display.canvas.width,display.canvas.height);
+
+ /****************変換適用***********************************************/
+ display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2)); //コンテキストに対する効果の始点を中心に移動
+ display.context.scale(display.magnification,display.magnification); //倍率をコンテキストに反映
+ display.context.rotate(display.angle / 180 * Math.PI); //回転をコンテキストに反映
+ display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
+ /**************************************************************************/
+
+ //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
+ display.context.drawImage(image, 0, 0, image.width, image.height, (left+(display.movx)), (to-(display.movy)), width, height);
+
+ /*****************変換調整***********************************************/
+ display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2)); //コンテキストに対する効果の始点を中心に移動
+ display.context.scale(1 / display.magnification,1 / display.magnification); //画像の倍率の初期化
+ display.context.rotate(-1 * display.angle / 180 * Math.PI); //角度の初期化
+ display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
+ /****************************************************************************/
+ if(display == display2 && display2.thumbnail_number){
+ Display2ToThumbnails(display.thumbnail_number); //Display2のサムネイルごとにパラメータを保持
+ }
+ }
+ image.src = event.target.result;
+ }
+ if(display.file && display.file.type.match('image.*')){
+ reader.readAsDataURL(display.file);
+ }else{
+ return false;
+ }
+ }
+}
+
+//倍率の値を持ってくる関数
+function scaling(number){
+ if(number == 1){
+ display1.magnification = parseFloat(form1.magnification.value);
+ displayImage(display1);
+ }else if(number == 2){
+ display2.magnification = parseFloat(form2.magnification.value);
+ displayImage(display2);
+ }else if(number == 4){
+ display4.magnification = parseFloat(form4.magnification.value);
+ displayImage(display4);
+ }
+}
+
+// 回転角を持ってくる関数
+function rotation(number){
+ if(number == 1){
+ display1.angle = parseFloat(form1.angle.value);
+ displayImage(display1);
+ }else if(number == 2){
+ display2.angle = parseFloat(form2.angle.value);
+ displayImage(display2);
+ }
+}
+
+ //平行移動のパラメータを持ってくる関数
+function moving(number){
+ if(number == 1){
+ var pixel_length = d1_unit.pixel_length.value; //[unit]/px
+ var order = d1_unit.order.value; //[unit]の次数
+ var orderx = form1.orderx.value; //movexの次数
+ var ordery = form1.ordery.value; //moveyの次数
+
+ display1.movx = parseFloat(form1.movex.value)/pixel_length * Math.pow(10,-orderx-(-order));//px
+ display1.movy = parseFloat(form1.movey.value)/pixel_length * Math.pow(10,-ordery-(-order));
+ displayImage(display1);
+ }else if(number == 2){
+ var pixel_length = d2_unit.pixel_length.value; //[unit]/px
+ var order = d2_unit.order.value; //[unit]の次数
+ var orderx = form2.orderx.value; //movexの次数
+ var ordery = form2.ordery.value; //moveyの次数
+
+ display2.movx = parseFloat(form2.movex.value)/pixel_length * Math.pow(10,-orderx-(-order));
+ display2.movy = parseFloat(form2.movey.value)/pixel_length * Math.pow(10,-ordery-(-order));
+ displayImage(display2);
+ }else if(number == 4){
+ var pixel_length = d4_unit.pixel_length.value; //[unit]/px
+ var order = d4_unit.order.value; //[unit]の次数
+ var orderx = form4.orderx.value; //movexの次数
+ var ordery = form4.ordery.value; //moveyの次数
+
+ display4.movx = parseFloat(form4.movex.value)/pixel_length * Math.pow(10,-orderx-(-order));
+ display4.movy = parseFloat(form4.movey.value)/pixel_length * Math.pow(10,-ordery-(-order));
+ displayImage(display4);
+ }
+}
+
+//回転角を０に戻す関数
+function rotation_init(number,display){
+ if(number == 1){
+ form1.angle.value = 0;
+ display.angle = parseFloat(form1.angle.value);
+ }else if(number == 2){
+ form2.angle.value = 0;
+ display.angle = parseFloat(form2.angle.value);
+ }
+}
+
+//倍率を１に戻す関数
+function magnification_init(number,display){
+ if(number == 1){
+ form1.magnification.value = 1.00;
+ display.magnification = parseFloat(form1.magnification.value);
+ }else if(number == 2){
+ form2.magnification.value = 1.00;
+ display.magnification = parseFloat(form2.magnification.value);
+ }else if(number == 4){
+ form4.magnification.value = 1.00;
+ display.magnification = parseFloat(form4.magnification.value);
+ }
+}
+
+//平行移動パラメータの初期化
+function move_params_init(number,display){
+ if(number == 1){
+ form1.movex.value = 0;
+ form1.movey.value = 0;
+ display.movx = parseFloat(form1.movex.value);
+ display.movy = parseFloat(form1.movey.value);
+ }else if(number == 2){
+ form2.movex.value = 0;
+ form2.movey.value = 0;
+ display.movx = parseFloat(form2.movex.value);
+ display.movy = parseFloat(form2.movey.value);
+ }else if(number == 4){
+ form4.movex.value = 0;
+ form4.movey.value = 0;
+ display.movx = parseFloat(form4.movex.value);
+ display.movy = parseFloat(form4.movey.value);
+ }
+}
+
+//全パラメータのリセット
+function reseting(number){
+ if(number == 1){
+ move_params_init(number,display1);
+ rotation_init(number,display1);
+ magnification_init(number,display1);
+ displayImage(display1);
+ }else if(number == 2){
+ move_params_init(number,display2);
+ rotation_init(number,display2);
+ magnification_init(number,display2);
+ displayImage(display2);
+ }else if(number == 4){
+ move_params_init(number,display4);
+ magnification_init(number,display4);
+ displayImage(display4);
+ }
+}
+
+//テーブルに画像を受け付ける行を追加
+function add_table(){
+ var tbody = document.getElementById("tbody_thumbnail_files");
+ var tr = tbody.rows;
+ if(tr.length > 0 && !thumbnails[tr.length - 1].file){
+ window.alert("Please upload image file at No." + (tr.length));
+ return false;
+ }
+
+ var new_tr = tbody.insertRow(-1);
+ var row_index = new_tr.rowIndex;
+
+ var number_td = new_tr.insertCell(-1);
+ var imageflie_td = new_tr.insertCell(-1);
+ var configflie_td = new_tr.insertCell(-1);
+ var delete_button = new_tr.insertCell(-1);
+
+ thumbnail_add(row_index);
+
+ number_td.innerHTML = thumbnails[row_index - 1].thumbnail_number;
+ imageflie_td.innerHTML = "<input type='file' accept='image/*' onChange='loadFile(this.files,this.parentNode.parentNode.rowIndex);'>";
+ configflie_td.innerHTML = "<input type='file' accept='text/*' onChange='config_upload(this.files, this.parentNode.parentNode.rowIndex)'>"
+ delete_button.innerHTML = "<input type='button' value='del' onClick='delete_table(this.parentNode.parentNode.rowIndex)'>";
+}
+
+//テーブルから行削除
+function delete_table(row_index){
+ var tbody = document.getElementById("tbody_thumbnail_files");
+ var row_length = tbody.rowIndex;
+
+ tbody.deleteRow(row_index - 1);
+ thumbnail_del(row_index);
+
+ for(var j = 0; j <= thumbnails.length - row_index; j++){
+ var tr = tbody.rows[row_index + j - 1];
+ var number_td = tr.cells[0];
+ number_td.innerHTML = thumbnails[row_index + j - 1].thumbnail_number;
+ }
+ //console.log(thumbnails);
+}
+
+//テーブル全消去
+function clear_table(){
+ var tbody = document.getElementById("tbody_thumbnail_files");
+ var row_length = tbody.rows.length;
+
+ for(var i = 0; i < Math.ceil(row_length / 2); i++){//6->3,7->4
+ tbody.deleteRow(-1);
+ if(tbody.rows.length != 0){//奇数用
+ tbody.deleteRow(-1);
+ }
+ thumbnail_clr(row_length - i - 1);
+ }
+}
+
+//画像のデータ保持のための配列に追加
+function thumbnail_add(row_index){
+ var thumbnail = new Display();
+ thumbnail.thumbnail_number = row_index;
+ thumbnails.push(thumbnail);
+ //console.log(thumbnails);
+}
+
+//削除
+function thumbnail_del(row_index){
+ var tbody = document.getElementById("thumbnail_canvas");
+ var row_length = tbody.rows.length;
+ if(row_index%2==1){
+ for(var i=Math.ceil(row_index/2); i<=row_length; i++){
+ tbody.deleteRow(-1);
+ }
+ }else if(row_index%2==0){
+ for(var i=Math.ceil(row_index/2); i<row_length; i++){
+ tbody.deleteRow(-1);
+ }
+ tr = tbody.rows[Math.ceil(row_index/2) - 1];
+ tr.deleteCell(-1);
+ }
+ thumbnails.splice(row_index-1,1);
+ for(var i=row_index; i<=thumbnails.length; i++){
+ thumbnails[i-1].thumbnail_number -= 1;
+ make_canvas(thumbnails[i-1]);
+ }
+}
+
+//全消去
+function thumbnail_clr(index){
+ //thumbnails[index].context.clearRect(0,0,thumbnails[index].canvas.width,thumbnails[index].canvas.height);
+ var tbody = document.getElementById("thumbnail_canvas");
+ var tr = tbody.deleteRow(-1);//canvasを消去
+
+ thumbnails.pop();
+ if(thumbnails.length != 0){//奇数用
+ thumbnails.pop();
+ }
+ //console.log(thumbnails);
+}
+
+//サムネイルを生成
+function make_canvas(thumbnail){
+
+ var tbody = document.getElementById("thumbnail_canvas");
+ var id = "canvas_" + thumbnail.thumbnail_number;
+ thumbnail.thumbnail_canvas_id = id;
+ //odd->行追加, even->列追加
+ if(thumbnail.thumbnail_number % 2 == 1){
+ var new_tr = tbody.insertRow(-1);
+ var odd_canvas_td = new_tr.insertCell(-1);
+
+ odd_canvas_td.innerHTML = "<canvas id='" + id + "' style='width: 200px; height: 200px;' onClick='ThumbnailsToDisplay2(" + thumbnail.thumbnail_number + ")'></canvas><br>" + thumbnail.thumbnail_number;
+ thumbnail.canvas = document.getElementById(id);
+ thumbnail.context = thumbnail.canvas.getContext('2d');
+ displayImage(thumbnail);
+
+ }else if(thumbnail.thumbnail_number % 2 == 0){
+ var tr = tbody.rows[thumbnail.thumbnail_number / 2 - 1];
+ var even_canvas_td = tr.insertCell(-1);
+
+ even_canvas_td.innerHTML = "<canvas id='" + id + "' style='width: 200px; height: 200px;' onClick='ThumbnailsToDisplay2(" + thumbnail.thumbnail_number + ")'></canvas><br>" + thumbnail.thumbnail_number;
+ thumbnail.canvas = document.getElementById(id);
+ thumbnail.context = thumbnail.canvas.getContext('2d');
+ displayImage(thumbnail);
+ }
+}
+
+//ThumbnailからクリックでDisplay2に反映
+function ThumbnailsToDisplay2(number){
+ display2.file = thumbnails[number-1].file;
+ display2.magnification = thumbnails[number-1].magnification;
+ display2.angle = thumbnails[number-1].angle;
+ display2.movx = thumbnails[number-1].movx;
+ display2.movy = thumbnails[number-1].movy;
+ display2.thumbnail_number = number;
+ form2.magnification.value = thumbnails[number-1].magnification;
+ form2.angle.value = thumbnails[number-1].angle;
+ form2.movex.value = thumbnails[number-1].movx;
+ form2.movey.value = thumbnails[number-1].movy;
+ displayImage(display2);
+ show_config(number);
+}
+
+//Display2で表示時に変更したパラメータをデータ保持配列に格納
+function Display2ToThumbnails(number){
+ thumbnails[number-1].file = display2.file;
+ thumbnails[number-1].magnification = display2.magnification;
+ thumbnails[number-1].angle = display2.angle;
+ thumbnails[number-1].movx = display2.movx;
+ thumbnails[number-1].movy = display2.movy;
+}
+
+//Blend Elementsの表示の削除とblend()の呼び出し
+function blend_switch(what){
+ if(what == 'thumbnails'){
+
+ var blend_elements_area = document.getElementById("blend_elements");
+ blend_elements_area.innerHTML = "";
+
+ if(thumbnails.length == 0){
+ window.alert("Please upload image to Imagelist.");
+ return false;
+ }
+
+ blend(blend_elements,display3,1)
+ }
+}
+
+var blend_elements = [];//BlendElementsのデータ保持
+
+//BlendElementsの生成
+function make_blend_elements(){//他関数内でcanvasのdata配列を取得する時canvasに完全に描画済みでないといけないので関数として分けることで冗長性を出し実現させている。
+ var blend_elements_area = document.getElementById("blend_elements");
+ blend_elements = [];//初期化
+
+ for(var i=0; i<=thumbnails.length; i++){
+ var id = "blend_elements" + i;
+ var text = "<canvas id='" + id + "'></canvas>";
+
+ blend_elements_area.insertAdjacentHTML('beforeend',text);
+ blend_elements[i] = new Display();
+ if(i==0){//dispolay1の写し
+ blend_elements[i].file = display1.file;
+ blend_elements[i].magnification = display1.magnification;
+ blend_elements[i].movx = display1.movx;
+ blend_elements[i].movy = display1.movy;
+ blend_elements[i].angle = display1.angle;
+ }else{//thumbnailの拡大写し
+ blend_elements[i].file = thumbnails[i-1].file;
+ blend_elements[i].magnification = thumbnails[i-1].magnification;
+ blend_elements[i].movx = thumbnails[i-1].movx;
+ blend_elements[i].movy = thumbnails[i-1].movy;
+ blend_elements[i].angle = thumbnails[i-1].angle;
+ }
+ blend_elements[i].canvas = document.getElementById(id);
+ blend_elements[i].context = blend_elements[i].canvas.getContext('2d');
+ blend_elements[i].canvas.width = CANVAS_SIZE;
+ blend_elements[i].canvas.height = CANVAS_SIZE;
+ displayImage(blend_elements[i]);
+ //console.log(blend_elements[i]);
+ }
+}
+
+//合成の下準備と合成画像の表示
+function blend(blend_resorce, display, color_change_flag){//配列（ブレンド元）,表示先,1有or0無
+
+ //元
+ var image = [];
+ for(var i=0; i<blend_resorce.length; i++){
+ //image[i] = blend_resorce[i].context.getImageData(0,0,display.canvas.width,display.canvas.height);
+ image[i] = blend_resorce[i].context.getImageData(0,0,blend_resorce[i].canvas.width,blend_resorce[i].canvas.height);
+ }
+ //先
+ var image_blend = display.context.createImageData(display.canvas.width,display.canvas.height);
+
+ //元
+ var image_rgbas = [];
+
+ for(var i=0; i<blend_resorce.length; i++){
+ image_rgbas[i] = image[i].data;//２次元配列の生成
+ }
+ //先
+ var image_blend_rgba = image_blend.data;//1次元配列の生成
+
+ //カラーチェンジ ON
+ if(color_change_flag){
+
+ for(var i=0; i<blend_resorce.length; i++){
+ image_rgbas[i] = color_change(image_rgbas[i],i);
+ }
+ }
+
+ //新しい画像の生成
+ image_blend_rgba = make_new_Image(image_rgbas, image_blend_rgba);//(2d,1d)
+ //先へ反映
+ display.context.putImageData(image_blend, 0, 0);
+
+ if(color_change_flag){
+ //display4への写し
+ display4.context.putImageData(image_blend, 0, 0);
+ }
+}
+
+//画像の何色を変えるか入力するフォームの生成
+function create_color_table(){
+ var tbody = document.getElementById("color_table_tbody");
+ var tr = tbody.insertRow(-1);
+ var number_td = tr.insertCell(-1);
+ var before_color_td = tr.insertCell(-1);
+ var arrow_td = tr.insertCell(-1);
+ var after_color_td = tr.insertCell(-1);
+ var id_before;
+ var id_after;
+ tbody.innerHTML = "";
+ for( var i=0; i<thumbnails.length; i++){
+
+ tr = tbody.insertRow(-1);
+ number_td = tr.insertCell(-1);
+ before_color_td = tr.insertCell(-1);
+ arrow_td = tr.insertCell(-1);
+ after_color_td = tr.insertCell(-1);
+
+ number_td.innerHTML = thumbnails[i].thumbnail_number;
+ id_before = "before_color_" + (i+1);
+ id_after = "after_color_" + (i+1);
+ before_color_td.innerHTML = "<select id=" + id_before + "><option value='0'>select the color</option><option value='1'>Red</option><option value='2'>Yellow</option><option value='3'>Green</option><option value='4'>Cyan</option><option value='5'>Blue</option><option value='6'>Magenta</option></select>";
+ arrow_td.innerHTML = "➡︎";
+ after_color_td.innerHTML = "<select id=" + id_after + "><option value='0'>select the color</option><option value='1'>Red</option><option value='2'>Yellow</option><option value='3'>Green</option><option value='4'>Cyan</option><option value='5'>Blue</option><option value='6'>Magenta</option></select>";
+ }
+}
+
+//color tableのcolorをリセット
+function color_reset(){
+ var before_id_d1 = "before_color_display1";
+ var after_id_d1 = "after_color_display1";
+ var before_id = "before_color_";
+ var after_id = "after_color_";
+
+ for(var i=0; i<=thumbnails.length; i++){
+ if(i==0){
+ before_color = document.getElementById(before_id_d1);
+ after_color = document.getElementById(after_id_d1);
+ }else{
+ before_color = document.getElementById(before_id + i);
+ after_color = document.getElementById(after_id + i);
+ }
+ before_color.value = 0;
+ after_color.value = 0;
+ }
+ blend_switch('thumbnails');
+}
+
+//ピクセル配列の値(色情報)の書き換え
+function color_change(image_rgba, index){
+ var max, min;
+ var R,G,B;
+ var H;
+ var before_color,after_color;
+ var diff_color;
+
+ if(index==0){
+ var before_id = "before_color_display1";
+ var after_id = "after_color_display1";
+ }else{
+ var before_id = "before_color_" + index;
+ var after_id = "after_color_" + index;
+ }
+
+ //console.log(index);
+ before_color = document.getElementById(before_id).value;
+ after_color = document.getElementById(after_id).value;
+ diff_color = after_color - before_color;
+ /*
+ console.log("before_color is..."+before_color);
+ console.log("after_color is..."+after_color);
+ console.log("diff_color is..."+diff_color);
+ */
+ /**********RGB->HSV***********/
+ for (var i = 0; i < image_rgba.length ; i++){
+ R = image_rgba[i * 4] / 255;//RGBAの値は0-255で与えられている
+ G = image_rgba[i * 4 + 1] / 255;
+ B = image_rgba[i * 4 + 2] / 255;
+
+ if(R == G && G == B){
+ continue;
+ }else if(R >= G && R >= B){
+ if(G >= B){
+ max = R;
+ min = B;
+ }else if(B > G){
+ max = R;
+ min = G;
+ }
+ }else if(G >= R && G >= B){
+ if(R >= B){
+ max = G;
+ min = B;
+ }else if(B > R){
+ max = G;
+ min = R;
+ }
+ }else if(B >= R && B >= G){
+ if(R >= G){
+ max = B;
+ min = G;
+ }else if(G > R){
+ max = B;
+ min = R;
+ }
+ }
+
+ if(max == R){
+ H = 60 * (G - B)/(max - min);
+ H %= 360;
+ }else if(max == G){
+ H = (60 * (B - R) / (max - min)) + 120;
+ H %= 360;
+ }else if(max == B){
+ H = (60 * (R - G) / (max - min)) + 240;
+ H %= 360;
+ }
+
+ /*****************color change*************************/
+ //値書き換え（色相変換）
+ if (before_color != 1 && after_color != 1){//両方赤でない
+ if(H >= (before_color-1) * 60 -30 && H < (before_color * 60 -30)){
+ H = H + 60 * diff_color;
+ }
+ }else if(before_color == 1 && after_color != 1){//前者が赤
+ if(H >= 0 && H < 30){
+ H = H + 60 * diff_color;
+ }else if(H >= 330 && H <= 360){
+ H = H - 60 * (6 - diff_color);
+ }
+ }else if(before_color != 1 && after_color == 1){//後者が赤
+ if(H >= (before_color - 1) * 60 -30 && H < (before_color - 1) * 60 ){
+ H = H + 60 * (6 + diff_color);
+ }else if(H >= (before_color - 1) * 60 && H < before_color * 60 -30){
+ H = H + 60 * diff_color;
+ }
+ }else{
+ continue;
+ }
+
+ /***********************HSV->RGB************************/
+ if(H >= 0 && H < 60){
+ R = max;
+ G = (H / 60) * (max - min) + min;
+ B = min;
+ }else if(H >= 60 && H < 120){
+ R = -((H-120) / 60) * (max - min) + min;
+ G = max;
+ B = min;
+ }else if(H >= 120 && H < 180){
+ R = min
+ G = max;
+ B = ((H-120) / 60) * (max - min) + min;
+ }else if(H >= 180 && H < 240){
+ R = min
+ G = -((H-240) / 60) * (max - min) + min;
+ B = max;
+ }else if(H >= 240 && H < 300){
+ R = ((H-240) / 60) * (max - min) + min;
+ G = min;
+ B = max;
+ }else if(H >= 300 && H <= 360){
+ R = max;
+ G = min;
+ B = (-(H-360) / 60) * (max - min) + min;
+ }else{
+ continue;
+ }
+
+ image_rgba[i * 4] = R * 255;
+ image_rgba[i * 4 + 1] = G * 255;
+ image_rgba[i * 4 + 2] = B * 255;
+
+ }
+ return image_rgba;
+}
+
+ //getImageDataのdataで取り出される配列が持つ意味
+ /*
+ image_rgba[count * 4] //R
+ image_rgba[count * 4 + 1] //G
+ image_rgba[count * 4 + 2] //B
+ image_rgba[count * 4 + 3] //A
+ */
+
+//新しい画像の生成
+function make_new_Image(image_rgbas, new_image_rgba){
+ var image_amount = 0;
+ var white_pixel_amount=0;//同座標上のピクセルでそのピクセルが白(0,0,0,0)である数
+ //new_image_rgbaは255以上になるとカンストするからこれでクッションを置く
+ var new_image_r = 0;
+ var new_image_g = 0;
+ var new_image_b = 0;
+ var new_image_a = 0;
+ //console.log(new_image_rgba.length);
+ //縮小した際に画像ではないピクセルはRGBA(0,0,0,0)だから、合成色を求める計算で母数から外している。色は足しているが各値が０なので考慮しないのと同義。
+ for(var j=0; j<new_image_rgba.length; j++){
+ new_image_rgba[j * 4] = 0;
+ new_image_rgba[j * 4 + 1] = 0;
+ new_image_rgba[j * 4 + 2] = 0;
+ new_image_rgba[j * 4 + 3] = 0;
+ for(var i=0; i<image_rgbas.length; i++){
+ /*
+ new_image_rgba[j * 4] += image_rgbas[i][j * 4];
+ new_image_rgba[j * 4 + 1] += image_rgbas[i][j * 4 + 1];
+ new_image_rgba[j * 4 + 2] += image_rgbas[i][j * 4 + 2];
+ new_image_rgba[j * 4 + 3] += image_rgbas[i][j * 4 + 3];
+ */
+ new_image_r += image_rgbas[i][j * 4];
+ new_image_g += image_rgbas[i][j * 4 + 1];
+ new_image_b += image_rgbas[i][j * 4 + 2];
+ new_image_a += image_rgbas[i][j * 4 + 3];
+
+ if(image_rgbas[i][j*4]==0 && image_rgbas[i][j*4+1]==0 && image_rgbas[i][j*4+2]==0 && image_rgbas[i][j*4+3]==0 ){
+ white_pixel_amount++;
+ }
+ }
+ image_amount = image_rgbas.length-white_pixel_amount;
+ if(image_amount==0){//両方のキャンバスで白のピクセルは分子０分母０になるから分母１にする
+ image_amount=1;
+ }
+
+ new_image_rgba[j * 4] = new_image_r / image_amount;
+ new_image_rgba[j * 4 + 1] = new_image_g / image_amount;
+ new_image_rgba[j * 4 + 2] = new_image_b / image_amount;
+ new_image_rgba[j * 4 + 3] = new_image_a / image_amount;
+
+ new_image_r = 0;
+ new_image_g = 0;
+ new_image_b = 0;
+ new_image_a = 0;
+ image_amount = 0;
+ white_pixel_amount = 0;
+ }
+ /*
+ console.log(new_image_rgba.length);
+ for(var i=0; i<image_rgbas.length; i++){
+ console.log(image_rgbas[i]);
+ }
+ console.log(new_image_rgba);
+ */
+ return new_image_rgba;
+}
+
+//preview displayの表示
+function preview_on(){
+ //console.log("On!");
+ var preview_canvas_area = document.getElementById("preview_canvas_area");
+ var preview_canvas_update_button = document.getElementById("preview_canvas_update_button");
+ preview_canvas_update_button.innerHTML = "<input type='button' value='update' onclick='preview_update()'>";
+ preview_canvas_area.innerHTML = "<canvas id='preview_canvas'></canvas>";
+ var display_preview = new Display();
+ display_preview.canvas = document.getElementById("preview_canvas");
+ display_preview.context = preview_canvas.getContext('2d');
+ display_preview.canvas.width = CANVAS_SIZE;
+ display_preview.canvas.height = CANVAS_SIZE;
+ var blend_resorce = [display1, display2];
+ //console.log(display1);
+ blend(blend_resorce, display_preview, 0);
+}
+
+//preview displayの非表示
+function preview_off(){
+ //console.log("Off...");
+ var preview_canvas_area = document.getElementById("preview_canvas_area");
+ var preview_canvas_update_button = document.getElementById("preview_canvas_update_button");
+ preview_canvas_update_button.innerHTML = "";
+ preview_canvas_area.innerHTML = "";
+}
+
+//preview displayの更新
+function preview_update(){
+ preview_off();
+ preview_on();
+}
+
+//config fileのアップロード
+function config_upload(files, index){
+
+ var csv_text = "";
+ var arr = [];
+
+ var reader = new FileReader();
+ reader.readAsText(files[0]);
+ reader.onload = function(event){
+
+ csv_text = reader.result;
+
+ arr = csv_text.split(',');
+ //console.log(arr);
+ for(var i=0; i<arr.length; i++){
+ arr[i] = parseFloat(arr[i].replace('"',''));
+ }
+ //console.log(arr);
+ thumbnails[index-1].config_x = arr[0];
+ thumbnails[index-1].config_y = arr[1];
+ thumbnails[index-1].config_z = arr[2];
+ thumbnails[index-1].config_alfa = arr[3];
+ thumbnails[index-1].config_beta = arr[4];
+ thumbnails[index-1].config_offsetX = arr[5];
+ thumbnails[index-1].config_offsetY = arr[6];
+ thumbnails[index-1].config_angle = arr[7];
+ }
+ //console.log(thumbnails);
+ //show_config(index);
+}
+
+//config fileの情報を表示
+function show_config(index){
+ var x = document.getElementById("configx");
+ var y = document.getElementById("configy");
+ var z = document.getElementById("configz");
+ var alfa = document.getElementById("configalfa");
+ var beta = document.getElementById("configbeta");
+ var offsetX = document.getElementById("configoffsetx");
+ var offsetY = document.getElementById("configoffsety");
+ var angle = document.getElementById("configangle");
+
+ x.innerHTML = thumbnails[index-1].config_x;
+ y.innerHTML = thumbnails[index-1].config_y;
+ z.innerHTML = thumbnails[index-1].config_z;
+ alfa.innerHTML = thumbnails[index-1].config_alfa;
+ beta.innerHTML = thumbnails[index-1].config_beta;
+ offsetX.innerHTML = thumbnails[index-1].config_offsetX;
+ offsetY.innerHTML = thumbnails[index-1].config_offsetY;
+ angle.innerHTML = thumbnails[index-1].config_angle;
+}
+
+//coordinate メンバー
+function Coordinate(_number, _x, _y, _z){
+ this.number = _number;
+ this.x = _x;
+ this.y = _y;
+ this.z = _z;//将来的に３次元での解析を見越してZ座標をメンバーとして加えている
+}
+
+//マウスカーソルのキャンバス内の座標計算
+function calculate_xy(event){
+
+ var mouseX = 0; //coordinate x of mouse point
+ var mouseY = 0; //coordinate y of mouse point
+ var positionX = 0; //coordinate x of canvas
+ var positionY = 0; //coordinate y of canvas
+ var x = 0; //coordinate x of mouse point in canvas
+ var y = 0; //coordinate y of mouse point in canvas
+
+ var order1 = parseInt(d4_unit.order.value); //mm or μm or nm or A(angstrom)//計算用
+ var order2 = parseInt(list_form.order2.value); //mm or um or nm or A //表用
+
+ var pixel_length = d4_unit.pixel_length.value; //画像のピクセルの大きさ（サーバー側から受け取り可能）
+
+ mouseX = event.pageX;
+ mouseY = event.pageY;
+
+ clientRect = document.getElementById("canvas4").getBoundingClientRect();
+ positionX = clientRect.left + window.pageXOffset;
+ positionY = clientRect.top + window.pageYOffset;
+
+ //画像中心を原点としてピクセル座標計算（平行移動対応）
+ if(CANVAS_SIZE%2){//奇数
+ x = mouseX - positionX - (display4.canvas.width / 2) - display4.movx;
+ y = -(mouseY - positionY - (display4.canvas.height / 2)) - display4.movy;
+ }else{//偶数（偶数の場合は原点は右上を採用）
+ x = mouseX - positionX - (display4.canvas.width / 2) - display4.movx;
+ y = -(mouseY - positionY - ((display4.canvas.height / 2) - 1)) - display4.movy;
+ }
+
+ //小数点切り捨て（ピクセル座標を0-CANVASSIZEを整数値で表す、上のメソッド返ってくるピクセル座標が少数点あり）
+ x = ~~x;
+ y = ~~y;
+
+ //画像の実際の大きさのサイズに戻す
+ x *= IMAGE_SIZE / CANVAS_SIZE;
+ y *= IMAGE_SIZE / CANVAS_SIZE;
+
+ //px -> mm,mim,nm ...ピクセルの寸法と元画像の大きさから算出
+ x *= pixel_length * Math.pow(10,-order1-(-order2)) / display4.magnification;
+ y *= pixel_length * Math.pow(10,-order1-(-order2)) / display4.magnification;
+
+ var coordinate = new Coordinate();
+ coordinate.x = parseFloat(x.toFixed(2));
+ coordinate.y = parseFloat(y.toFixed(2));
+ coordinate.z = 0;
+
+ return coordinate;
+}
+
+//現在のマウスカーソル座標の表示 マウスが動くと発火イベント
+document.getElementById("canvas4").addEventListener("mousemove", function(event){
+ var current_coordinate = document.getElementById("current_coordinate");
+ var coordinate = new Coordinate();
+ coordinate = calculate_xy(event);
+ if(!IMAGE_SIZE){
+ return false;
+ }else{
+ current_coordinate.innerHTML = "x: " + coordinate.x + " y:" + coordinate.y + " z:" + coordinate.z;
+ }
+});
+
+//クリックしたマウスカーソル座標を取得 クリックすると発火イベント
+document.getElementById("canvas4").addEventListener("click", function(event){
+ if(0){//display4に合成画像が表示されているかどうか
+ window.alert("Please load image file.");
+ move_params_init();
+ return false;
+ }else{
+ var current_coordinate = document.getElementById("click_coordinate");
+ var coordinate = new Coordinate();
+ coordinate = calculate_xy(event);
+ add_list(coordinate);
+ }
+});
+
+var coordinate_database = []; //座標のオブジェクトを格納する配列
+
+//クリックした座標データを表に反映、データ保持配列に格納
+function add_list(coordinate){
+
+ var tbody = document.getElementById("coordinate_table_tbody");
+ var new_tr = tbody.insertRow(-1);
+ var row_Index = new_tr.rowIndex; //row's index (start = 1) equal to table numbering
+
+ var number_td = new_tr.insertCell(-1);
+ var x_td = new_tr.insertCell(-1);
+ var y_td = new_tr.insertCell(-1);
+ var z_td = new_tr.insertCell(-1);
+ var button_td = new_tr.insertCell(-1);
+
+ coordinate.number = row_Index;
+
+ //表に反映
+ number_td.innerHTML = coordinate.number;
+ x_td.innerHTML = coordinate.x;
+ y_td.innerHTML = coordinate.y;
+ z_td.innerHTML = coordinate.z;
+ button_td.innerHTML = '<input type="button" value="delete" onClick="dele_list(this.parentNode.parentNode.rowIndex)">'//this.parentNode.parentNode.rowIndex -> Row number in list
+
+ //新しい座標データが来た時、coordinate_databaseに格納
+ if(coordinate_database.length == row_Index - 1){
+ coordinate_database[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
+ }
+ /*
+ for(var j = 0; j < coordinate_database.length; j++){
+ console.log(coordinate_database[j]);
+ }
+ */
+}
+
+//クリックした座標行を削除、データ保持配列からの削除
+function dele_list(row_number){
+ var tbody = document.getElementById("coordinate_table_tbody");
+ var rows_length = tbody.rows.length;
+ for(var i=row_number; i <= rows_length; i++){
+ tbody.deleteRow(row_number-1);//deleteRow(0) -> delete table's 1st row.
+ }
+
+ coordinate_database.splice(row_number-1,1);//delete 1 data[row_number-1] from coordinate_database
+
+ //ボタンを押した階層より後の同レベル階層を削除（Table）
+ //配列データ(coordinate database)は座標データを残しaddlistに送ってnumberを書き換えtableに反映
+ for(j = row_number - 1; j < coordinate_database.length; j++){
+ add_list(coordinate_database[j])
+ }
+}
+
+//座標行、データ保持配列の全消去
+function all_clear(){
+ var tbody = document.getElementById("coordinate_table_tbody");
+ var rows_length = tbody.rows.length;
+
+ for(var i=1; i <= rows_length; i++){
+ tbody.deleteRow(-1);
+ coordinate_database.pop(); //最下層まで消す
+ }
+ //console.log(coordinate_database);
+}
+
+//座標データをファイルに書き出しローカルに保存
+function download(){
+ var number;
+ var x;
+ var y;
+ var z;
+
+ var text = "";
+ //リストをテキストにする
+ for(var i=0; i<coordinate_database.length; i++){
+
+ number = coordinate_database[i].number;
+ x = coordinate_database[i].x;
+ y = coordinate_database[i].y;
+ z = coordinate_database[i].z;
+
+ text += '"' + number + '","' + x + '","' + y + '","' + z + '"\n';
+ }
+
+ var blob = new Blob([text], {type: 'text/plain'});
+ var link = document.getElementById('download_link');
+ var filename = download_form.filename.value;
+
+ if(!filename){//ファイル名指定なし
+ window.alert("Please write filename");
+ return false;
+ }
+
+ //ボタン付近に設置したaタグにblobデータのリンクを貼り、クリックさせることで保存させる。
+ link.href = window.URL.createObjectURL(blob);
+ link.download = filename;
+ link.click();
+}
+
+//座標データが格納されたファイルを読み込んで画面のCoordinate listに反映
+function upload(files){
+
+ all_clear();
+
+ var csv_text = "";
+ var array_csv;
+ var arr = [];
+ var coordinate = new Coordinate;
+
+ var reader = new FileReader();
+ reader.readAsText(files[0]);
+ reader.onload = function(event){
+
+ csv_text = reader.result;
+ array_csv = csv_text.split('\n');
+
+ //２次元配列にしてオブジェクトに変更後、addlistへ渡す。
+ for(var i=0; i<array_csv.length; i++){
+ if(array_csv[i] == ''){
+ break;
+ }
+ arr[i] = array_csv[i].split(',');
+
+ for(var j=0; j<arr[i].length; j++){
+ arr[i][j] = parseFloat(arr[i][j].replace('"',''));
+ }
+ coordinate.number = arr[i][0];
+ coordinate.x = arr[i][1];
+ coordinate.y = arr[i][2];
+ coordinate.z = arr[i][3];
+
+ add_list(coordinate);
+ }
+ }
+}
+
+}
+
+
function getCurrentParams(){
- var parameter;
-console.log("getcurrentparams");
- $.ajax({
- type:"GET",
- url:"//"+UrlElement['sendIpAddress']+
- ":"+UrlElement['sendPortNumber']+
- "/"+UrlElement['sendElectronMicroscopeName']+
- "/get",
-// url:"http://192.168.4.146:9090/fei/get",
- success: function(data){
- console.log(data);
- }
- });
+ var parameter;
+ console.log("getcurrentparams");
+ $.ajax({
+ type:"GET",
+ url:"//"+UrlElement['sendIpAddress']+
+ ":"+UrlElement['sendPortNumber']+
+ "/"+UrlElement['sendElectronMicroscopeName']+
+ "/get",
+ // url:"http://192.168.4.146:9090/fei/get",
+ success: function(data){
+ console.log(data);
+ }
+ });
}
function clickMove(direction){
});
}
function setMagnificationR(){
- var magnificationR = $("#magnificationR").val();
+ var magnificationR = $("#magnificationR").val();
$.ajax({
type:"GET",
url:"http://"+UrlElement['sendIpAddress']+
}
function nowCondition(){
+ console.log("a");
var movexr = $("#movex").val();
var moveyr = $("#movey").val();
var movezr = $("#movez").val();
document.getElementById("currenta").innerHTML = parseInt(movea);
document.getElementById("SpotSizeIndex").innerHTML = parseInt(spotSize);
document.getElementById("MagIndex").innerHTML = parseInt(magnificationA);
-
}
+
--- /dev/null
+var CANVAS_SIZE = 512;//canvasのピクセルサイズ
+
+//
+function Display(_canvas,_context,_file,_image,_sorce){
+ this.canvas = _canvas;
+ this.context = _context;
+ this.file = _file;
+ this.image = _image;
+ this.sorce = _sorce;
+ this.magnification = 1;
+ this.movx = 0;
+ this.movy = 0;
+ this.angle = 0;
+}
+
+var canvas1Display = new Display();//canvas1
+var canvas2Display = new Display();//canvas2
+
+//座標群
+function Coordinate(_number, _x, _y, _z){
+ this.number = _number;
+ this.x = _x;
+ this.y = _y;
+ this.z = _z;//将来的に３次元での解析を見越してZ座標をメンバーとして加えている
+}
+
+function main(){
+
+ //canvas1
+ canvas1Display.canvas = document.getElementById("canvas1");
+ canvas1Display.context = canvas1Display.canvas.getContext("2d");
+ canvas1Display.canvas.width = CANVAS_SIZE;
+ canvas1Display.canvas.height = CANVAS_SIZE;
+
+ //canvas2
+ canvas2Display.canvas = document.getElementById("canvas2");
+ canvas2Display.context = canvas2Display.canvas.getContext("2d");
+ canvas2Display.canvas.width = CANVAS_SIZE;
+ canvas2Display.canvas.height = CANVAS_SIZE;
+
+}
+
+
+//マウスカーソルのキャンバス内の座標計算
+function calculate_xy(event,canvasId){
+
+ var mouseX = 0; //coordinate x of mouse point
+ var mouseY = 0; //coordinate y of mouse point
+ var positionX = 0; //coordinate x of canvas
+ var positionY = 0; //coordinate y of canvas
+ var x = 0; //coordinate x of mouse point in canvas
+ var y = 0; //coordinate y of mouse point in canvas
+
+ if(canvasId == "canvas1"){
+ var order1 = parseInt(canvas1_unit.order.value);//mm or μm or nm or A(angstrom)//計算用
+ var order2 = parseInt(table1_unit.order.value); //mm or um or nm or A
+ var pixel_length = canvas1_unit.pixel_length.value; //画像のピクセルの大きさ（サーバー側から受け取り可能）
+ }else if(canvasId == "canvas2"){
+ var order1 = parseInt(canvas2_unit.order.value);//mm or μm or nm or A(angstrom)//計算用
+ var order2 = parseInt(table2_unit.order.value); //mm or um or nm or A
+ var pixel_length = canvas2_unit.pixel_length.value; //画像のピクセルの大きさ（サーバー側から受け取り可能）
+ }
+
+ mouseX = event.pageX;
+ mouseY = event.pageY;
+
+ var canvas = document.getElementById(canvasId);/*cnavas1 or canvas2 */
+
+ clientRect = document.getElementById(canvasId).getBoundingClientRect();
+ positionX = clientRect.left + window.pageXOffset;
+ positionY = clientRect.top + window.pageYOffset;
+
+ //画像中心を原点としてピクセル座標計算/*（平行移動対応）*/
+ if(parseInt(canvas.width)%2){//奇数
+ x = mouseX - positionX - (canvas.width / 2)/* - display4.movx*/;
+ y = -(mouseY - positionY - (canvas.height)/2)/* - display4.movy*/;
+ }else{//偶数（偶数の場合は原点は右上を採用）
+ x = mouseX - positionX - (canvas.width / 2)/* - display4.movx*/;
+ y = -(mouseY - positionY - ((canvas.height)/2 - 1))/* - display4.movy*/;
+ }
+
+ //小数点切り捨て（ピクセル座標を0-CANVASSIZEを整数値で表す、上のメソッド返ってくるピクセル座標が少数点あり）
+ x = ~~x;
+ y = ~~y;
+
+ //画像の実際の大きさに換算して座標を変換
+ //x *= IMAGE_SIZE / CANVAS_SIZE;
+ //y *= IMAGE_SIZE / CANVAS_SIZE;
+
+ //px -> mm,mim,nm ...ピクセルの寸法と元画像の大きさから算出
+ x *= pixel_length * Math.pow(10,-order1-(-order2))/* / display4.magnification*/;
+ y *= pixel_length * Math.pow(10,-order1-(-order2))/* / display4.magnification*/;
+
+ var coordinate = new Coordinate();
+ coordinate.x = parseFloat(x.toFixed(2));
+ coordinate.y = parseFloat(y.toFixed(2));
+ coordinate.z = 0;
+
+ return coordinate;
+}
+
+//現在のマウスカーソル座標の表示 マウスが動くと発火イベント--canvas1
+document.getElementById("canvas1").addEventListener("mousemove", function(event){
+ var current_coordinate = document.getElementById("current_coordinate_on_canvas1");
+ var coordinate = new Coordinate();
+ coordinate = calculate_xy(event,"canvas1");
+ current_coordinate.innerHTML = "(" + coordinate.x + "," + coordinate.y + "," + coordinate.z + ")";
+});
+
+//現在のマウスカーソル座標の表示 マウスが動くと発火イベント--canvas2
+document.getElementById("canvas2").addEventListener("mousemove", function(event){
+ var current_coordinate = document.getElementById("current_coordinate_on_canvas2");
+ var coordinate = new Coordinate();
+ coordinate = calculate_xy(event,"canvas2");
+ current_coordinate.innerHTML = "(" + coordinate.x + "," + coordinate.y + "," + coordinate.z + ")";
+});
+
+//クリックしたマウスカーソル座標を取得 クリックすると発火イベント--canvas1
+document.getElementById("canvas1").addEventListener("click", function(event){
+ if(0){//Displayに合成画像が表示されているかどうか 未搭載
+ window.alert("Please load image file.");
+ //move_params_init();
+ return false;
+ }else{
+ var m_or_t = table1_mort.m_or_t.value;
+ var coordinate = new Coordinate();
+ coordinate = calculate_xy(event,"canvas1");
+ add_list(coordinate,"canvas1",m_or_t);
+ }
+});
+
+//
+document.onkeydown=function(event){
+ console.log(event.keyCode);
+ if(event.keyCode == 65){
+ var m_or_t = table1_mort.m_or_t.value;
+ var coordinate = new Coordinate();
+ coordinate = calculate_xy(event,"canvas1");
+ add_list(coordinate,"canvas1",m_or_t);
+ }
+}
+
+
+//クリックしたマウスカーソル座標を取得 クリックすると発火イベント--canvas2
+document.getElementById("canvas2").addEventListener("click", function(event){
+ if(0){//Displayに合成画像が表示されているかどうか
+ window.alert("Please load image file.");
+ //move_params_init();
+ return false;
+ }else{
+ var m_or_t = table2_mort.m_or_t.value;
+ var coordinate = new Coordinate();
+ coordinate = calculate_xy(event,"canvas2");
+ add_list(coordinate,"canvas2",m_or_t);
+ }
+});
+
+/***************************************/
+/*座標をやりっとりする場合この配列を扱えば良い*/
+//座標のオブジェクトを格納する配列
+var canvas1_marker_data = [];
+var canvas1_target_data = [];
+var canvas2_marker_data = [];
+var canvas2_marker_ast_data = [];
+var canvas2_target_ast_data = [];
+/***************************************/
+
+
+//クリックした座標データを表に反映、データ保持配列に格納
+function add_list(coordinate,canvasid,m_or_t){
+ if(canvasid=="canvas1"){
+ if(m_or_t == "marker"){
+ var tbody = document.getElementById("canvas1_marker_tbody");
+ }else if(m_or_t == "target"){
+ var tbody = document.getElementById("canvas1_target_tbody");
+ }
+ }else if(canvasid="canvas2"){
+ if(m_or_t == "marker"){
+ var tbody = document.getElementById("canvas2_marker_tbody");
+ }else if(m_or_t == "marker_ast"){
+ var tbody = document.getElementById("canvas2_marker_ast_tbody");
+ }else if(m_or_t == "target_ast"){
+ var tbody = document.getElementById("canvas2_target_ast_tbody");
+ }
+ }
+
+ var new_tr = tbody.insertRow(-1);
+ var row_Index = new_tr.rowIndex; //row's index (start = 1) equal to table numbering
+
+ var coordinate_td = new_tr.insertCell(-1);
+
+ coordinate.number = row_Index;
+
+ //表に反映
+ if(canvasid == "canvas1"){
+ coordinate_td.innerHTML = "No."+coordinate.number+ "<input type='button' value='x' onClick='deleteTable(this.parentNode.parentNode.rowIndex,"+'"'+"canvas1"+'"'+")'><br>("+coordinate.x+","+coordinate.y+","+coordinate.z+")";
+ }else if(canvasid == "canvas2"){
+ coordinate_td.innerHTML = "No."+coordinate.number+ "<input type='button' value='x' onClick='deleteTable(this.parentNode.parentNode.rowIndex,"+'"'+"canvas2"+'"'+")'><br>("+coordinate.x+","+coordinate.y+","+coordinate.z+")";
+ }
+
+ //新しい座標データが来た時、任意_dataに格納
+ if(canvasid=="canvas1"){
+ if(m_or_t == "marker"){
+ if(canvas1_marker_data.length == row_Index - 1){
+ canvas1_marker_data[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
+ }
+ }else if(m_or_t == "target"){
+ if(canvas1_target_data.length == row_Index - 1){
+ canvas1_target_data[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
+ }
+ }
+ }else if(canvasid="canvas2"){
+ if(m_or_t == "marker"){
+ if(canvas2_marker_data.length == row_Index - 1){
+ canvas2_marker_data[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
+ }
+ }else if(m_or_t == "marker_ast"){
+ if(canvas2_marker_ast_data.length == row_Index - 1){
+ canvas2_marker_ast_data[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
+ }
+ }else if(m_or_t == "target_ast"){
+ if(canvas2_target_ast_data.length == row_Index - 1){
+ canvas2_target_ast_data[row_Index - 1] = new Coordinate(coordinate.number,coordinate.x,coordinate.y,coordinate.z);
+ }
+ }
+ }
+ /*
+ console.log(canvas1_marker_data);
+ console.log(canvas1_target_data);
+ console.log(canvas2_marker_data);
+ console.log(canvas2_marker_ast_data);
+ console.log(canvas2_target_ast_data);
+ */
+}
+
+function clearTable_canvas1(){
+ if(table1_mort.m_or_t.value == "marker"){
+ var tbody = document.getElementById("canvas1_marker_tbody");
+ canvas1_marker_data = [];
+ }else if(table1_mort.m_or_t.value == "target"){
+ var tbody = document.getElementById("canvas1_target_tbody");
+ canvas1_target_data = [];
+ }
+
+ var rows_length = tbody.rows.length;
+ for(var i=1; i <= rows_length; i++){
+ tbody.deleteRow(-1);
+ }
+}
+
+function deleteTable_canvas1(){
+ if(table1_mort.m_or_t.value == "marker"){
+ var tbody = document.getElementById("canvas1_marker_tbody");
+ canvas1_marker_data.pop();
+ }else if(table1_mort.m_or_t.value == "target"){
+ var tbody = document.getElementById("canvas1_target_tbody");
+ canvas1_target_data.pop();
+ }
+
+ tbody.deleteRow(-1);
+
+}
+
+function deleteTable_canvas2(){
+ if(table2_mort.m_or_t.value == "marker"){
+ var tbody = document.getElementById("canvas2_marker_tbody");
+ canvas2_marker_data.pop();
+ }else if(table2_mort.m_or_t.value == "marker_ast"){
+ var tbody = document.getElementById("canvas2_marker_ast_tbody");
+ canvas2_marker_ast_data.pop();
+ }else if(table2_mort.m_or_t.value == "target_ast"){
+ var tbody = document.getElementById("canvas2_target_ast_tbody");
+ canvas2_target_ast_data.pop();
+ }
+ tbody.deleteRow(-1);
+}
+
+function deleteTable(rowIndex,canvasid){
+ if(canvasid=="canvas1"){
+ if(table1_mort.m_or_t.value == "marker"){
+ var m_or_t = "marker";
+ var tbody = document.getElementById("canvas1_marker_tbody");
+ canvas1_marker_data.splice(rowIndex-1,1);//delete 1 data[row_number-1] from coordinate_data
+ }else if(table1_mort.m_or_t.value == "target"){
+ var m_or_t = "target";
+ var tbody = document.getElementById("canvas1_target_tbody");
+ canvas1_target_data.splice(rowIndex-1,1);
+ }
+ }else if(canvasid=="canvas2"){
+ if(table2_mort.m_or_t.value == "marker"){
+ var m_or_t = "marker";
+ var tbody = document.getElementById("canvas2_marker_tbody");
+ canvas2_marker_data.splice(rowIndex-1,1);
+ }else if(table2_mort.m_or_t.value == "marker_ast"){
+ var m_or_t = "marker_ast";
+ var tbody = document.getElementById("canvas2_marker_ast_tbody");
+ canvas2_marker_ast_data.splice(rowIndex-1,1);
+ }else if(table2_mort.m_or_t.value == "target_ast"){
+ var m_or_t = "target_ast";
+ var tbody = document.getElementById("canvas2_target_ast_tbody");
+ canvas2_target_ast_data.splice(rowIndex-1,1);
+ }
+ }
+
+ var rows_length = tbody.rows.length;
+ for(var i=rowIndex; i <= rows_length; i++){
+ tbody.deleteRow(rowIndex-1);//deleteRow(0) -> delete table's 1st row.
+ }
+
+ //coordinate_database.splice(row_number-1,1);//delete 1 data[row_number-1] from coordinate_database
+
+ //ボタンを押した階層より後の同レベル階層を削除（Table）
+ //配列データ(coordinate database)は座標データを残しaddlistに送ってnumberを書き換えtableに反映
+ if(canvasid=="canvas1"){
+ if(table1_mort.m_or_t.value == "marker"){
+ for(var j = rowIndex - 1; j < canvas1_marker_data.length; j++){
+ add_list(canvas1_marker_data[j],canvasid,m_or_t)
+ }
+ }else if(table1_mort.m_or_t.value == "target"){
+ for(var j = rowIndex - 1; j < canvas1_target_data.length; j++){
+ add_list(canvas1_target_data[j],canvasid,m_or_t)
+ }
+ }
+ }else if(canvasid=="canvas2"){
+ if(table2_mort.m_or_t.value == "marker"){
+ for(var j = rowIndex - 1; j < canvas2_marker_data.length; j++){
+ add_list(canvas2_marker_data[j],canvasid,m_or_t)
+ }
+ }else if(table2_mort.m_or_t.value == "marker_ast"){
+ for(var j = rowIndex - 1; j < canvas2_marker_ast_data.length; j++){
+ add_list(canvas2_marker_ast_data[j],canvasid,m_or_t)
+ }
+ }else if(table2_mort.m_or_t.value == "target_ast"){
+ for(var j = rowIndex - 1; j < canvas2_target_ast_data.length; j++){
+ add_list(canvas2_target_ast_data[j],canvasid,m_or_t)
+ }
+ }
+ }
+}
+
+/*****************************************************************/
+/*****************************************************************/
+/*************************** canvas表示 ***************************/
+/*****************************************************************/
+/*****************************************************************/
+
+
+//ローカルファイルの読み取り
+function loadFile(files,canvasid){
+ file = files[0];
+
+ if(canvasid == "canvas1"){
+ console.log("canvas1");
+ canvas1Display.file = file;
+ canvas1Display.context.clearRect(0,0,canvas1Display.canvas.width,canvas1Display.canvas.height);
+ //magnification_init(display1);
+ //rotation_init(display1);
+ //move_params_init(display1);
+ displayImage(canvas1Display);
+ }else if(canvasid == "canvas2"){
+ console.log("canvas2");
+ canvas2Display.file = file;
+ canvas2Display.context.clearRect(0,0,canvas2Display.canvas.width,canvas2Display.canvas.height);
+ //magnification_init(display1);
+ //rotation_init(display1);
+ //move_params_init(display1);
+ displayImage(canvas2Display);
+ }
+}
+
+function displayImage(display){
+ var width;
+ var height;
+ var left;
+ var to;
+ var imageAspect=0;
+ var image = new Image();
+ var reader = new FileReader();
+
+
+ reader.onload = function(event){
+ image.onload = function(){
+
+ //canvasのアンチエイリアスを無効
+ display.context.mozImageSmoothingEnabled = false;
+ display.context.webkitImageSmoothingEnabled = false;
+ display.context.msImageSmoothingEnabled = false;
+ display.context.imageSmoothingEnabled = false
+
+ imageAspect = image.width / image.height;
+ if (imageAspect >= 1) { //画像が横長
+ left = 0;
+ width = display.canvas.width;
+ height = display.canvas.height / imageAspect;
+ to = (display.canvas.height - height) / 2;
+ } else { //画像が縦長
+ to = 0;
+ width = display.canvas.width * imageAspect;
+ height = display.canvas.height;
+ left = (display.canvas.width - width) / 2;
+ }
+
+ //ファイルアップロード2回目以降のcanvasの初期化
+ display.context.clearRect(0,0,display.canvas.width,display.canvas.height);
+
+
+ /****************変換適用***********************************************/
+ //display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2));//コンテキストに対する効果の始点を中心に移動
+ //display.context.scale(display.magnification,display.magnification);//倍率をコンテキストに反映
+ //display.context.rotate(display.angle / 180 * Math.PI);//回転をコンテキストに反映
+ //display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
+ /**************************************************************************/
+
+ //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
+ //display.context.drawImage(image, 0, 0, image.width, image.height, left+display.movx, to-display.movy, width, height);
+ display.context.drawImage(image, 0, 0, image.width, image.height, left, to, width, height);
+
+ /*****************変換調整***********************************************/
+ //display.context.translate(parseInt(display.canvas.width / 2),parseInt(display.canvas.height / 2)); //コンテキストに対する効果の始点を中心に移動
+ //display.context.scale(1 / display.magnification,1 / display.magnification);//画像の倍率の初期化
+ //display.context.rotate(-1 * display.angle / 180 * Math.PI);//角度の初期化
+ //display.context.translate(-parseInt(display.canvas.width / 2),-parseInt(display.canvas.height / 2));
+ /****************************************************************************/
+ }
+ image.src = event.target.result;
+ }
+
+ //if(display.file && display.file.type.match('image.*')){
+ if(display.file.type.match('image.*')){
+ reader.readAsDataURL(display.file);
+ console.log("readasdataURL");
+ }
+ //}else{
+ // console.log("false");
+ // return false;
+ //
+ //}
+}
\ No newline at end of file
+++ /dev/null
-/*\r
- HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed\r
-*/\r
-(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();\r
-a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";\r
-c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||\r
-"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);\r
-if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);\r
+++ /dev/null
-/////////////////////////////////////////////////////////////////////////////////////////////\r
-// LOLLYTIN JS\r
-/////////////////////////////////////////////////////////////////////////////////////////////\r
-\r
-$(document).ready(function(){$('.headerMatch').matchHeight();function mobileMatch(){if($(window).width()<992){$('.split-nav-logo-desktop').prependTo('.split-nav-logo-mobile')}else{$('.split-nav-logo-desktop').prependTo('.split-nav-logo')}}mobileMatch();$(window).resize(mobileMatch);function vertNavHeight(){var logoHeight=$('.split-nav-logo img').height();if($(window).width()>767){$('.vert-nav').css('height',logoHeight+60)}else{$('.vert-nav').css('height','auto')}}vertNavHeight();$(window).resize(vertNavHeight);function vertNavRightHeight(){var logoHeight1=$('.logo-l9 img').height();if($(window).width()>991){$('.vert-nav-whole-9').css('height',logoHeight1+60)}else{$('.vert-nav-whole-9').css('height','auto')}var logoHeight2=$('.logo-l10 img').height();if($(window).width()>991){$('.vert-nav-whole-10').css('height',logoHeight2+60)}else{$('.vert-nav-whole-10').css('height','auto')}}vertNavRightHeight();$(window).resize(vertNavRightHeight);$('body').append('<div id="toTop"><i class="icon-chevron-up fa fa-chevron-up"></i></div>');$(window).scroll(function(){if($(this).scrollTop()!=0){$('#toTop').fadeIn()}else{$('#toTop').fadeOut()}});$('#toTop').click(function(){$('body,html').animate({scrollTop:0},600)})});
\ No newline at end of file
+++ /dev/null
-/*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl\r
- * Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT\r
- * */\r
-\r
-!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
\ No newline at end of file
--- /dev/null
+(function(){
+ var menu = document.getElementById('tab_menu1');
+ var content = document.getElementById('tab_content1');
+ var menus = menu.getElementsByTagName('a');
+ var current; // 現在の状態を保持する変数
+ for (var i = 0, l = menus.length;i < l; i++){
+ tab_init(menus[i], i);
+ }
+
+ function tab_init(link, index){
+ var id = link.hash.slice(1);
+ var page = document.getElementById(id);
+ if (!current){ // 状態の初期化
+ current = { page:page, menu:link};
+ page.style.display = 'block'; //可視化
+ link.className = 'active';
+ } else {
+ page.style.display = 'none'; //見えなくする
+ }
+ link.onclick = function(){
+ current.page.style.display = 'none';
+ current.menu.className = '';
+ page.style.display = 'block';
+ link.className = 'active';
+ current.page = page;
+ current.menu = link;
+ return false;
+ };
+ }
+})();
+
+
+
+function write(){
+ var canvas = document.getElementById("canvas1");
+ var context = canvas.getContext('2d');
+
+}
\ No newline at end of file
+++ /dev/null
-function Currentcondition(command) {
-
- var ajax=getAjax();
-
- if(command == "request"){
- var position1 = document.getElementById("Position");
- var magnificant = document.getElementById("Magnificant");
- var brightness = document.getElementById("Brightness");
- var contrast = document.getElementById("Contrast");
- var forcus = document.getElementById("Forcus");
- var voltage = document.getElementById("Voltage");
- }else {
- var position1 = document.anchorsgetElementById("result");
- }
-
- if (ajax) {
- try{
- ajax.onreadystatechange = getData;
- }catch(e){
- position1.innerHTML="Onreadystate change error.";
- }
-
- try{
- ajax.open("GET","//localhost:8000/cgi-bin/vemclient.rb?command="+encodeURIComponent(command),true);
- }catch(e){
- position1.innerHTML = "ajax open error";
- }
-
- try {
- ajax.send(null);
- }catch (e) {
- position1.innerHTML ="send error";
- }
-
- }else {
- position1.innerHTML = "you cannot use ajax....";
- }
-
- function getData() {
- if (ajax.readyState==4) {
- if (ajax.status==200) {
- console.log("Hello!");
-
- var resultjson = ajax.responseText;
- resultjson=JSON.parse(resultjson);
- console.log(typeof resultjson);
- /*
- for (key in resultjson) {
- console.log(key+":"+resultjson(key));
- }
- */
- //position1.innerHTML=resultjson;
-
- position1.innerHTML = "x="+resultjson["Current_stageX"]+" y="+resultjson['Current_stageY']+" z="+resultjson['Current_stageZ']+" a="+resultjson['Current_stageA'];
- magnificant.innerHTML = "Magnificant:"+resultjson['Magnificant'];
- brightness.innerHTML = "Brightness:"+resultjson['Brightness'];
- contrast.innerHTML = "Contrast:"+resultjson['Contrast'];
- forcus.innerHTML = "Forcus:"+resultjson['Forcus'];
- voltage.innerHTML = "Voltage:"+resultjson['Voltage'];
- // result.innerHTML = ajax.responseText;
- }else {
- position1.innerHTML = "HTTP transmission....";
- }
- }
- }
- }
\ No newline at end of file
+++ /dev/null
-function TemControl(command,parameter){
-
- var ajax = getAjax();
-
- if(command == "Connect"){
- var result = document.getElementById("connection");
- }else{
- var result = document.getElementById("result");
- }
-
- if(ajax){
- try{
- ajax.onreadystatechange = getData;
- }catch(e){
- result.innerHTML = "onreadystate change error";
- }
-
- try{
- ajax.open("GET","//localhost:8000/cgi-bin/vemclient.rb?command="+encodeURIComponent(command)+"¶meter="+encodeURIComponent(parameter),true);
- }catch(e){
- result.innerHTML = "ajax open error";
- }
-
- try{
- ajax.send(null);
- }catch(e){
- result.innerHTML = "send error";
- }
- }else{
- result.innerHTML = "you cannot use ajax...";
- }
-
- function getData(){
- if(ajax.readyState == 4){
- if(ajax.status == 200){
- result.innerHTML = ajax.responseText;
- if(ajax.responseText.match(/Control/i)){
- a = ajax.responseText.split(" ");
- alert(a[1]+a[2]);
- }
- }else{
- result.innerHTML = "HTTP error";
- }
- }else{
- result.innerHTML = "HTTP Transmission...";
- }
- }
-
-}
+++ /dev/null
-/////////////////////////////////////////////////////////////////////////////////////////////\r
-// Custom JS (ADD YOUR JS HERE!)\r
-/////////////////////////////////////////////////////////////////////////////////////////////\r
-\r
-$(document).ready(function(){\r
- \r
- /////////////////////////////////////////////////////////////////\r
- // BACKSTRETCH SLIDER (UNCOMMENT TO USE)\r
- /////////////////////////////////////////////////////////////////\r
- \r
- /*$("body").backstretch([\r
- "img-1.jpg",\r
- "img-2.jpg",\r
- "img-3.jpg"\r
- ], {duration: 3000, fade: 750, random: true});*/\r
- \r
- /////////////////////////////////////////////////////////////////\r
- // CAMERA SLIDER\r
- /////////////////////////////////////////////////////////////////\r
- \r
- if ($('.camera_slider').length > 0) {\r
- jQuery('.camera_slider').camera({\r
- fx: 'random',\r
- playPause: true,\r
- pagination: false,\r
- height: '400',\r
- random: false\r
- });\r
- }\r
- \r
- /////////////////////////////////////////////////////////////////\r
- // Fancybox\r
- /////////////////////////////////////////////////////////////////\r
- \r
- //if ($('body#gallery').is('*')) { // Uncomment to run script on specific page only\r
- if(jQuery.browser.mobile) {\r
- var myPhotoSwipe = $(".fancybox").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });\r
- }\r
- else {\r
- // Single Image\r
- //$("a.fancybox").fancybox();\r
- \r
- // Multiple Images\r
- $("a.fancybox[rel='gallery_group']").fancybox({\r
- 'transitionIn' : 'elastic',\r
- 'transitionOut' : 'elastic',\r
- 'speedIn' : 600, \r
- 'speedOut' : 200 \r
- });\r
- }\r
- //}\r
- \r
- /////////////////////////////////////////////////////////////////\r
- // Animated Entrances\r
- /////////////////////////////////////////////////////////////////\r
- \r
- $(window).scroll(function() {\r
- $('.animatedEntrance').each(function(){\r
- var imagePos = $(this).offset().top;\r
-\r
- var topOfWindow = $(window).scrollTop();\r
- if (imagePos < topOfWindow+400) {\r
- $(this).addClass("slideUp"); // slideUp, slideDown, slideLeft, slideRight, slideExpandUp, expandUp, fadeIn, expandOpen, bigEntrance, hatch\r
- }\r
- });\r
- });\r
- \r
- /////////////////////////////////////////////////////////////////\r
- // Form Validation\r
- /////////////////////////////////////////////////////////////////\r
- \r
- $('#custom_form').formValidation({ \r
- validateText: ["name","message"],\r
- validateEmail: ["email"],\r
- validateSpam: true,\r
- captchaTheme: 'greyscale' // default, mini, dark, mini-dark, light, mini-light, greyscale, mini-greyscale\r
- });\r
- \r
- /////////////////////////////////////////////////////////////////\r
- // GOOGLE MAPS\r
- /////////////////////////////////////////////////////////////////\r
-\r
- function map() {\r
- var myLatlng = new google.maps.LatLng(-12.47518, 130.99042);\r
- var mapOptions = {\r
- zoom: 14,\r
- center: myLatlng,\r
- mapTypeId: google.maps.MapTypeId.ROADMAP,\r
- scrollwheel: false,\r
- styles:\r
- [\r
- {\r
- "featureType": "all",\r
- "stylers": [\r
- {\r
- "saturation": -100\r
- },\r
- {\r
- "gamma": 0.5\r
- }\r
- ]\r
- }\r
- ]\r
- }\r
- // For Contact Page\r
- if ($('#map').length > 0) {\r
- var map = new google.maps.Map(document.getElementById('map'), mapOptions);\r
- var image = 'img/mapicon.png';\r
- var marker = new google.maps.Marker({\r
- position: myLatlng,\r
- map: map,\r
- icon: image\r
- });\r
- google.maps.event.addDomListener(window, 'resize orientationchange', function() {\r
- map.setCenter(myLatlng);\r
- });\r
- }\r
- // For Footer\r
- if ($('#footer-map').length > 0) {\r
- var map = new google.maps.Map(document.getElementById('footer-map'), mapOptions);\r
- var image = 'img/mapicon.png';\r
- var marker = new google.maps.Marker({\r
- position: myLatlng,\r
- map: map,\r
- icon: image\r
- });\r
- google.maps.event.addDomListener(window, 'resize orientationchange', function() {\r
- map.setCenter(myLatlng);\r
- }); \r
- }\r
- }\r
- google.maps.event.addDomListener(window, 'load', map);\r
- \r
- /////////////////////////////////////////////////////////////////\r
- // YAY FOR LOLLIES!\r
- /////////////////////////////////////////////////////////////////\r
-\r
-});
\ No newline at end of file
+++ /dev/null
-var emname;
-console.log("emcontrol");
-
-function emnamecatch(name){
- console.log("emnamecatch");
- emname=name;
- var ajax=getAjax();
-
- // ajax.open("GET","//localhost:9090/"+emname+"/init",true);
-
- $.ajax({
- url: 'http://localhost:9090/fei/init',
- type: "GET",
- success: function(res){
- console.log("success");
- }
- });
-
- console.log(emname);
- }
-
-function emcondition(command) {
-
-var ajax=getAjax();
-
- if (command == "request") {
- var position1 = document.getElementById("Position");
- var GonioX = document.getElementById("GonioX");
- var GonioY = document.getElementById("GonioY");
- var GonioZ = document.getElementById("GonioZ");
- var GonioA = document.getElementById("GonioA");
- var tem = document.getElementById("tem");
- var SpotSizeIndex = document.getElementById("SpotSizeIndex");
- var MagIndex = document.getElementById("MagIndex");
- var Obj = document.getElementById("Obj");
- var BeamTiltX = document.getElementById("BeamTiltX");
- var BeamTiltY = document.getElementById("BeamTiltY");
- var Speed = document.getElementById("Speed");
- var position2 = document.getElementById("Position2");
- var GonioX2 = document.getElementById("GonioX2");
- var GonioY2 = document.getElementById("GonioY2");
- var GonioZ2 = document.getElementById("GonioZ2");
- var GonioA2 = document.getElementById("GonioA2");
- var tem2 = document.getElementById("tem2");
- var SpotSizeIndex2 = document.getElementById("SpotSizeIndex2");
- var MagIndex2 = document.getElementById("MagIndex2");
- var Obj2 = document.getElementById("Obj2");
- var BeamTiltX2 = document.getElementById("BeamTiltX2");
- var BeamTiltY2 = document.getElementById("BeamTiltY2");
- var Speed2 = document.getElementById("Speed2");
- var position3 = document.getElementById("Position3");
- var GonioX3 = document.getElementById("GonioX3");
- var GonioY3 = document.getElementById("GonioY3");
- var GonioZ3 = document.getElementById("GonioZ3");
- var GonioA3 = document.getElementById("GonioA3");
- var tem3 = document.getElementById("tem3");
- var SpotSizeIndex3 = document.getElementById("SpotSizeIndex3");
- var MagIndex3 = document.getElementById("MagIndex3");
- var Obj3 = document.getElementById("Obj3");
- var BeamTiltX3 = document.getElementById("BeamTiltX3");
- var BeamTiltY3 = document.getElementById("BeamTiltY3");
- var Speed3 = document.getElementById("Speed3");
- } else {
- var position1 = document.anchorsgetElementById("result");
- var position2 = document.anchorsgetElementById("result");
- var position3 = document.anchorsgetElementById('result');
- }
-
- if (ajax) {
- try {
- ajax.onreadystatechange = getData;
- console.log("getData");
- } catch (e) {
- position1.innerHTML = "Onreadystate change error.";
- }
- try {
- ajax.open("GET", "//localhost:9090/"+encodeURIComponent(emname)+"/get", true);
- //console.log("//localhost:9090/"+encodeURIComponent(emname)+"/get");
- } catch (e) {
- position1.innerHTML = "ajax open error";
- }
- try {
- ajax.send(null);
- } catch (e) {
- position1.innerHTML = "send error";
- }
-
- } else {
- position1.innerHTML = "you cannot use ajax....";
- }
-
- function getData() {
- if (ajax.readyState == 4) {
- if (ajax.status == 200) {
- console.log("Hello!");
- var resultjson = ajax.responseText;
- console.log(resultjson);
- resultjson = JSON.parse(resultjson);
- console.log(resultjson);
- console.log(typeof resultjson);
- /*
- for (key in resultjson) {
- console.log(key+":"+resultjson(key));
- }
- */
- //position1.innerHTML=resultjson;
- console.log(resultjson['GonioX']);//undefined
- //tem.innerHTML = resultjson["TEM"];
- GonioX.innerHTML = resultjson["x"];
- GonioY.innerHTML = resultjson['y'];
- GonioZ.innerHTML = resultjson['z'];
- GonioA.innerHTML = resultjson['a'];
- SpotSizeIndex.innerHTML = resultjson['SpotSizeIndex'];
- MagIndex.innerHTML = resultjson['MagIndex'];
- Obj.innerHTML = resultjson['Obj'];
- BeamTiltX.innerHTML = resultjson['BeamTiltX'];
- BeamTiltY.innerHTML = resultjson['BeamTiltY'];
- Speed.innerHTML = resultjson['Speed'];
- //tem2.innerHTML = resultjson["TEM"];
- GonioX2.innerHTML = resultjson["x"];
- GonioY2.innerHTML = resultjson['y'];
- GonioZ2.innerHTML = resultjson['z'];
- GonioA2.innerHTML = resultjson['a'];
- SpotSizeIndex2.innerHTML = resultjson['SpotSizeIndex'];
- MagIndex2.innerHTML = resultjson['MagIndex'];
- Obj2.innerHTML = resultjson['Obj'];
- BeamTiltX2.innerHTML = resultjson['BeamTiltX'];
- BeamTiltY2.innerHTML = resultjson['BeamTiltY'];
- Speed2.innerHTML = resultjson['Speed'];
- //tem3.innerHTML = resultjson["TEM"];
- GonioX3.innerHTML = resultjson["x"];
- GonioY3.innerHTML = resultjson['y'];
- GonioZ3.innerHTML = resultjson['z'];
- GonioA3.innerHTML = resultjson['a'];
- SpotSizeIndex3.innerHTML = resultjson['SpotSizeIndex'];
- MagIndex3.innerHTML = resultjson['MagIndex'];
- Obj3.innerHTML = resultjson['Obj'];
- BeamTiltX3.innerHTML = resultjson['BeamTiltX'];
- BeamTiltY3.innerHTML = resultjson['BeamTiltY'];
- Speed3.innerHTML = resultjson['Speed'];
-
- // result.innerHTML = ajax.responseText;
- } else {
- position1.innerHTML = "HTTP transmission....";
- position2.innerHTML = "HTTP transmission....";
- position3.innerHTML = "HTTP transmission....";
- }
- }
- }
-}
-
-function stagecontrol(command,absolutex,absolutey,absolutez,absolutea) {
-
- var ajax=getAjax();
-
- if(command == "stage"){
- var result = document.getElementById("stage");
- var result2 = document.getElementById("stagetomo");
- var result3 = document.getElementById("stagemds");
- console.log('move');
- }else {
- var result = document.getElementById("stage");
- var result2 = document.getElementById("stagetomo");
- var result3 = document.getElementById("stagemds");
- }
-
- if (ajax) {
- /* try{
- ajax.onreadystatechange = getData;
- }catch(e){
- result.innerHTML="Onreadystate change error.";
- result2.innerHTML="Onreadystate change error.";
- result3.innerHTML="Onreadystate change error.";
- }*/
-
- try{
- ajax.open("GET","//localhost:9090/"+encodeURIComponent(emname)+"/set/stagea?x="+encodeURIComponent(absolutex)+"&y="+encodeURIComponent(absolutey)+"&z="+encodeURIComponent(absolutez)+"&a="+encodeURIComponent(absolutea),true);
- //document.getElementById("mid").innerHTML="absolutex="+absolutex+" absolutey="+absolutey;
- }catch(e){
- result.innerHTML = "ajax open error";
- result2.innerHTML = "ajax open error";
- result3.innerHTML = "ajax open error";
-
- }
-
- try {
- ajax.send(null);
- }catch (e) {
- result.innerHTML ="send error";
- result2.innerHTML ="send error";
- result3.innerHTML ="send error";
- }
-
- }else {
- result.innerHTML = "you cannot use ajax....";
- result2.innerHTML = "you cannot use ajax....";
- result3.innerHTML = "you cannot use ajax....";
- }
-
- function getData() {
- if (ajax.readyState==4) {
- if (ajax.status==200) {
- result.innerHTML = ajax.responseText;
- result2.innerHTML = ajax.responseText;
- result3.innerHTML = ajax.responseText;
- }else {
- result.innerHTML = "HTTP transmission....";
- result2.innerHTML = "HTTP transmission....";
- result3.innerHTML = "HTTP transmission....";
- }
- }
- }
- }
-
- function objcontrol(command,obj) {
-
- var ajax=getAjax();
-
- if(command == "obj"){
- var result = document.getElementById("obj");
- var result2 = document.getElementById("objtomo");
- var result3 = document.getElementById("objmds");
- console.log('move');
- }else {
- var result = document.getElementById("obj");
- var result2 = document.getElementById("objtomo");
- var result3 = document.getElementById("objmds");
- }
-
- if (ajax) {
- try{
- ajax.onreadystatechange = getData;
- }catch(e){
- result.innerHTML="Onreadystate change error.";
- result2.innerHTML="Onreadystate change error.";
- result3.innerHTML="Onreadystate change error.";
- }
-
- try{
- ajax.open("GET","//localhost:9090/"+encodeURIComponent(emname)+"/set/obj?obj="+encodeURIComponent(obj),true);
- //document.getElementById("mid").innerHTML="absolutex="+absolutex+" absolutey="+absolutey;
- }catch(e){
- result.innerHTML = "ajax open error";
- result2.innerHTML = "ajax open error";
- result3.innerHTML = "ajax open error";
-
- }
-
- try {
- ajax.send(null);
- }catch (e) {
- result.innerHTML ="send error";
- result2.innerHTML ="send error";
- result3.innerHTML ="send error";
- }
-
- }else {
- result.innerHTML = "you cannot use ajax....";
- result2.innerHTML = "you cannot use ajax....";
- result3.innerHTML = "you cannot use ajax....";
- }
-
- function getData() {
- if (ajax.readyState==4) {
- console.log("getData2")
- if (ajax.status==200) {
- result.innerHTML = ajax.responseText;
- result2.innerHTML = ajax.responseText;
- result3.innerHTML = ajax.responseText;
- }else {
- result.innerHTML = "HTTP transmission....";
- result2.innerHTML = "HTTP transmission....";
- result3.innerHTML = "HTTP transmission....";
- }
- }
- }
- }
+++ /dev/null
-/*
- if(window.File && window.FileReader) {
- //File API
- alert("ご使用のブラウザはFile APIを実装しています");
- }else{
- alert("ご使用のブラウザはFile APIをサポートしていません");
- }
- */
-
-function filemethod() {
- document.getElementById("con").innerHTML = "Please input File.";
- var obj1 = document.getElementById("exsample");
- //ダイアログでファイルが選択された時
- obj1.addEventListener("change", function(evt) {
- document.getElementById("con").innerHTML = "Complete upload!";
- var file = evt.target.files;
- //FileReaderの作成
- var reader = new FileReader();
- //テキスト形式で読み込む
- reader.readAsText(file[0]);
-
- //読込終了後の処理
- reader.onload = function(ev) {
- //テキストエリアに表示する
- document.getElementById("change").innerHTML = reader.result;
- //console.log(typeof reader.result);
- var textvalue;
- textvalue = JSON.parse(reader.result);
- //console.log(typeof textvalue);
- document.forms.eucentric.maxtilt.value = textvalue['maxtilt'];
- document.forms.eucentric.speed.value = textvalue['speed'];
- document.forms.eucentric.zshift.value = textvalue['zshift'];
- };
- }, false);
-}
-
-function filemethod2() {
- console.log('move this problem2!');
- document.getElementById("con2").innerHTML = "Please input File.";
- var obj2 = document.getElementById("exsample2");
- //ダイアログでファイルが選択された時
- obj2.addEventListener("change", function(evt) {
- document.getElementById("con2").innerHTML = "Complete upload!";
- console.log('move this loop!');
- var file2 = evt.target.files;
- //FileReaderの作成
- var reader2 = new FileReader();
- //テキスト形式で読み込む
- reader2.readAsText(file2[0]);
-
-
- reader2.onload = function(ev) {
- //テキストエリアに表示する
- document.getElementById("change2").innerHTML = reader2.result;
- //console.log(typeof reader.result);
- var textvalue;
- textvalue = JSON.parse(reader2.result);
- //console.log(typeof textvalue);
- document.forms.eucentric.maxtilt.value = textvalue['maxtilt'];
- document.forms.eucentric.speed.value = textvalue['speed'];
- document.forms.eucentric.zshift.value = textvalue['zshift'];
- };
- }, false);
-}
-
-function filemethod3() {
- console.log('move this problem3!');
- document.getElementById("con3").innerHTML = "Please input File.";
- var obj3 = document.getElementById("exsample3");
- //ダイアログでファイルが選択された時
- obj3.addEventListener("change", function(evt) {
- document.getElementById("con3").innerHTML = "Complete upload!";
- console.log('move this loop!');
- var file3 = evt.target.files;
- //FileReaderの作成
- var reader3 = new FileReader();
- //テキスト形式で読み込む
- reader3.readAsText(file3[0]);
-
-
- reader3.onload = function(ev) {
- //テキストエリアに表示する
- document.getElementById("change3").innerHTML = reader3.result;
- //console.log(typeof reader.result);
- var textvalue;
- textvalue = JSON.parse(reader3.result);
- //console.log(typeof textvalue);
- document.forms.eucentric.maxtilt.value = textvalue['maxtilt'];
- document.forms.eucentric.speed.value = textvalue['speed'];
- document.forms.eucentric.zshift.value = textvalue['zshift'];
- };
- }, false);
-}
-
-function TextSave() {
-//文字を取得
- var text = document.getElementById('text').value;
-//ファイル名を取得、デフォルトは「mytext」
- var name = document.getElementById('name').value || 'mytext';
-
-//テキストファイルを作成
- var blob = new Blob([text], {type: 'text/plain'});
-
-//リンクを取得
- var link = document.getElementById('DL_link');
-//リンクにダウンロードするファイルをセット
- link.href = window.URL.createObjectURL(blob);
-
-//もしダウンロード属性に対応していたら
- if ('download' in link) {
-//リンクにダウンロードする名前をセット
- link.download = name + '.txt';
-//リンクをクリックしてダウンロードさせる
- link.click();
-
-//もし対応してなかったら
- } else {
-//メッセージを表示する
- link.textContent = '右クリックから名前を付けて保存してください';
- }
-}
-
-function CanvasSave(canvasid) {
-//ファイル名を取得、デフォルトは「mytext」
- var name = document.getElementById('namephoto2').value || 'myphoto';
-//テキストファイルを作成
- var cvs = document.getElementById(canvasid);
- var canvasimage = cvs.toDataURL();
-
- //var blob = new Blob([text], {type: 'text/plain'});
-
-//リンクを取得
- var linkcanvas = document.getElementById('DL_link_canvas');
-//リンクにダウンロードするファイルをセット
- linkcanvas.href =canvasimage;
-
-//もしダウンロード属性に対応していたら
- if ('download' in linkcanvas) {
-//リンクにダウンロードする名前をセット
- linkcanvas.download = name + '.tif';
-//リンクをクリックしてダウンロードさせる
- linkcanvas.click();
-
-//もし対応してなかったら
- } else {
-//メッセージを表示する
- linkcanvas.textContent = '右クリックから名前を付けて保存してください';
- }
-}
-
-
-
-function SaveFileContents() {
- smaxtilt = document.forms.eucentric.maxtilt.value;
- sspeed = document.forms.eucentric.speed.value;
- szshift = document.forms.eucentric.zshift.value;
- console.log(smaxtilt);
- document.forms.save.text.value = '{"maxtilt":' + smaxtilt + ',"speed":' + sspeed + ',"zshift":' + szshift + '}';
- console.log(document.forms.save.text.value);
-}
-
-function ConditionFileSave() {
-
- var tem = document.getElementById("tem").innerHTML;
- var GonioX = document.getElementById("GonioX").innerHTML;
- var GonioY = document.getElementById("GonioY").innerHTML;
- var GonioZ = document.getElementById("GonioZ").innerHTML;
- var GonioA = document.getElementById("GonioA").innerHTML;
- var SpotSizeIndex = document.getElementById("SpotSizeIndex").innerHTML;
- var MagIndex = document.getElementById("MagIndex").innerHTML;
- var Obj = document.getElementById("Obj").innerHTML;
- var BeamTiltX = document.getElementById("BeamTiltX").innerHTML;
- var BeamTiltY = document.getElementById("BeamTiltY").innerHTML;
- var Speed = document.getElementById("Speed").innerHTML;
- var date = new Date();
- var Year = date.getFullYear();
- var Month = date.getMonth() + 1;
- var day = date.getDate();
-
- // document.getElementById("daysdata").innerHTML = Year + "/" + Month + "/" + day ;
-
-//文字を取得ファイルにはいるやつ
- var text = "{'TEM';'"+tem+"','GonioX':'"+GonioX+"','GonioY':'"+GonioY+"','GonioZ':'"+GonioZ+"','GonioA':'"+GonioA+"','SpotSizeIndex':'"+SpotSizeIndex+"','MagIndex':'"+MagIndex+"','Obj':'"+Obj+"','BeamTiltX':'"+BeamTiltX+"','BeamTiltY':'"+BeamTiltY+"','Speed':'"+Speed+"','Date':'"+Year+'/'+Month+'/'+day+"'}";
-//ファイル名を取得、デフォルトは「mytext」
- var name = document.getElementById('name1').value || 'mytext';
-
-//テキストファイルを作成
- var blob = new Blob([text], {type: 'text/plain'});
-
-//リンクを取得
- var linkcondition = document.getElementById('DL_link_condition');
-//リンクにダウンロードするファイルをセット
- linkcondition.href = window.URL.createObjectURL(blob);
-
-//もしダウンロード属性に対応していたら
- if ('download' in linkcondition) {
-//リンクにダウンロードする名前をセット
- linkcondition.download = name + '.txt';
-//リンクをクリックしてダウンロードさせる
- linkcondition.click();
-
-//もし対応してなかったら
- } else {
-//メッセージを表示する
- linkcondition.textContent = '右クリックから名前を付けて保存してください';
- }
-}
+++ /dev/null
-function fileListDialog(files){
- var name = new Array();
- var urn = new Array();
- var type = new Array();
- var size = new Array();
- var latest = new Array();
-
-
- i=0
- name[i] = files[i].name;
- urn[i] = files[i].urn;
- type[i] = files[i].type;
- size[i] = files[i].size;
- latest[i] = files[i].lastModifiedDate;
-
- //display file status
- var output = "<hr>The number of files is "+files.length+"<br><hr/>";
- output+="Name:"+name[i]+"<br>"+"URN:"+urn[i]+"<br>"+"Type:"+type[i]+"<br>"+"Size:"+size[i]+"<br>"+"Date:"+latest[i]+"<br><hr>"
- document.getElementById("filestatus").innerHTML = output;
-
- document.getElementById("filecontent").innerHTML = "";
- //get file contents
- fileread(files,"filecontent","file");
-
-}
-
-function fileread(blob,place,variable){
- var f = blob[i];
- var reader = new FileReader();
-
- if(f.type.match("text.*")){
- reader.onload = function(e){
- document.getElementById(place).innerHTML = reader.result;
- document.getElementById(variable).value = reader.result;
- document.getElementById("flag").value = "text";
- }
- reader.readAsText(f,"utf-8");
- }
-
- if(f.type.match("image.*")){
- reader.onload = function(e){
- var img = document.createElement("img");
- img.src = reader.result;
- document.getElementById(place).appendChild(img);
- document.getElementById(variable).value = reader.result;
- document.getElementById("flag").value = "image";
- }
- reader.readAsDataURL(f);
- }
-
-}
-
-
-function onDrop(event){
- var files = event.dataTransfer.files;
- var disp = document.getElementById("disp");
- disp.innerHTML = "";
-
- for(i=0;i<files.length;i++){
- var f = files[i];
- var reader = new FileReader();
-
- if(!f.type.match('image.*')&&!f.type.match('text.*')){
- alert("Drag and Drop Image or Text file!");
- continue;
- }
-
- reader.onerror = function(event){
- disp.innerHTML = "read error!";
- }
-
- if(f.type.match('text.*')){
- reader.onload = function(event){
- disp.innerHTML = event.target.result;
- document.getElementById("file").value = reader.result;
- }
- reader.readAsText(f,"utf-8");
- }
-
- if(f.type.match('image.*')){
- reader.onload = function(event){
- var img = document.createElement("img");
- img.src = event.target.result;
- disp.appendChild(img);
- document.getElementById("file").value = reader.result;
- }
- reader.readAsDataURL(f);
- }
- }
-
- reader.addEventListener('progress',function(event){
- document.getElementById("progress").innerHTML = Math.floor((event.loaded / event.total)*100);
- },true);
-
- event.preventDefault();
-}
-
-function onDragOver(event){
- event.preventDefault();
-}
-
+++ /dev/null
-function filewrite(){
- var ajax = getAjax();
- var result = document.getElementById("link");
-
- if(ajax){
- try{
- ajax.onreadystatechange = getData;
- }catch(e){
- result.innerHTML = "onreadystatechange error!"
- }
-
- try{
- ajax.open("GET","//localhost:8000/images/"+document.cameracontrol.input.value+".tif",true);
- ajax.responseType = 'blob'
- }catch(e){
- result.innerHTML = "ajax open error!";
- }
-
- try{
- ajax.send(null);
- }catch(e){
- result.innerHTML = "send error!";
- }
- }else{
- result.innerHTML = "you cannot use ajax...";
- }
-
- function getData(){
- if(ajax.readyState == 4){
- if(ajax.status == 200){
- var url = window.URL.createObjectURL(this.response)
- dl_name = document.cameracontrol.dlname.value+"_"+document.cameracontrol.mode.value;
- result.innerHTML = '<a href="'+url+'" download='+dl_name+'>download_link</a>';
- }else{
- result.innerHTML = "HTTP error!";
- }
- }else{
- result.innerHTML = "HTTP Transmission!";
- }
- }
-
-}
-
+++ /dev/null
-if(window.GamepadEvent){
-
- // ------------------------------------------------------------
- // ゲームパッドを接続すると実行されるイベント
- // ------------------------------------------------------------
- window.addEventListener("gamepadconnected",function(e){
- console.log("ゲームパッドが接続された");
- console.log(e.gamepad);
- });
-
- // ------------------------------------------------------------
- // ゲームパッドの接続を解除すると実行されるイベント
- // ------------------------------------------------------------
- window.addEventListener("gamepaddisconnected",function(e){
- console.log("ゲームパッドの接続が解除された");
- console.log(e.gamepad);
- });
-
-}
\ No newline at end of file
+++ /dev/null
-function mscontrol(command,catchvalue) {
-
- var ajax=getAjax();
-
- if(command == "Brightnessset"){
- var result = document.getElementById("Brightness");
- }else if (command == "Voltageset") {
- var result = document.getElementById("Voltage");
- }else {
- var result = document.getElementById("result");
- }
-
- if (ajax) {
- try{
- ajax.onreadystatechange = getData;
- }catch(e){
- result.innerHTML="Onreadystate change error.";
- }
-
- try{
- ajax.open("GET","//localhost:8000/cgi-bin/vemclient.rb?command="+encodeURIComponent(command)+"&catchvalue="+encodeURIComponent(catchvalue),true);
- }catch(e){
- result.innerHTML = "ajax open error";
- }
-
- try {
- ajax.send(null);
- }catch (e) {
- result.innerHTML ="send error";
- }
-
- }else {
- result.innerHTML = "you cannot use ajax....";
- }
-
- function getData() {
- if (ajax.readyState==4) {
- if (ajax.status==200) {
- result.innerHTML = ajax.responseText;
- }else {
- result.innerHTML = "HTTP transmission....";
- }
- }
- }
- }
\ No newline at end of file
+++ /dev/null
-// 背景色赤
-function bgColChangeDefault() {
- document.body.style.backgroundImage = 'url(./img/psbg.png)';
-}
-
-// 背景色青
-function bgColChangeWhite() {
- document.body.style.backgroundImage = 'url(img/white_background.png)';
-}
-
-// 背景色緑
-function bgColChangeGrey() {
- document.body.style.backgroundImage = 'url(img/wg.gif)';
-}
-
-function FocusTab(tabname) {
- // タブの色
- document.getElementById('mtab1').style.backgroundColor = '#005b95';
- document.getElementById('mtab2').style.backgroundColor = '#005b95';
- document.getElementById('mtab3').style.backgroundColor = '#005b95';
- document.getElementById('mtab4').style.backgroundColor = '#005b95';
- document.getElementById('mtab5').style.backgroundColor = '#005b95';
- //document.getElementById('mtab6').style.backgroundColor = '#005b95';
- //document.getElementById('mtab7').style.backgroundColor = '#005b95';
- document.getElementById('mtab8').style.backgroundColor = '#005b95';
- // 指定箇所のみ色を変更
- if (tabname) {
- document.getElementById(tabname).style.backgroundColor = '#008BBB';
- }
-}
-
-function invalidtabh() {
- console.log("invalidtab()");
- document.getElementById('mtab3').style.backgroundColor = '#005b95';
- var mtab31 = document.getElementById('mtab31');
- mtab31.disabled = true;
- mtab31.removeAttribute( "href" );
-}
-
-function FocusTabh(tabname) {
- // タブの色
- document.getElementById('mtab1').style.backgroundColor = '#005b95';
- document.getElementById('mtab2').style.backgroundColor = '#005b95';
- document.getElementById('mtab4').style.backgroundColor = '#005b95';
- document.getElementById('mtab3').style.backgroundColor = '#005b95';
- document.getElementById('mtab5').style.backgroundColor = '#005b95';
- //document.getElementById('mtab6').style.backgroundColor = '#005b95';
- //document.getElementById('mtab7').style.backgroundColor = '#005b95';
- document.getElementById('mtab8').style.backgroundColor = '#005b95';
- // 指定箇所のみ色を変更
- if (tabname) {
- document.getElementById(tabname).style.backgroundColor = '#008BBB';
- }
-}
-
-
\ No newline at end of file
+++ /dev/null
-
-function cngTab(IDname) {
-
- var introduce = document.getElementById('introduce');
- var introducediv = introduce.getElementsByTagName('div');
-
- var ineh = document.getElementById('eucentricheightcontents');
- var inehdiv = ineh.getElementsByTagName('div');
-
- var inform = document.getElementById('form');
- var informdiv = inform.getElementsByTagName('div');
-
- var insingle=document.getElementById('simplephotecontents');
- var insinglediv=document.getElementsByTagName('div');
-
- var intomo=document.getElementById('tomography');
-
- var inmds = document.getElementById('mds');
-
-
- if (IDname == 1) {
- introduce.style.display = "";
- ineh.style.display = 'none';
- inform.style.display = 'none';
- insingle.style.display = 'none';
- intomo.style.display="none";
- inmds.style.display="none";
- } else if (IDname == 3) {
- ineh.style.display = "";
- introduce.style.display = 'none';
- inform.style.display = 'none';
- insingle.style.display = 'none';
- intomo.style.display="none";
- inmds.style.display="none";
- } else if (IDname == 2 ) {
- insingle.style.display="";
- ineh.style.display="none";
- introduce.style.display="none";
- inform.style.display="none";
- intomo.style.display="none";
- inmds.style.display="none";
- } else if (IDname == 4 ) {
- insingle.style.display="none";
- ineh.style.display="none";
- introduce.style.display="none";
- inform.style.display="none";
- intomo.style.display="";
- inmds.style.display="none";
- } else if (IDname == 5) {
- insingle.style.display="none";
- ineh.style.display="none";
- introduce.style.display="none";
- inform.style.display="none";
- intomo.style.display="none";
- inmds.style.display="";
- }
-}
-
-function firsttab() {
- var introduce = document.getElementById('introduce');
- var introducediv = introduce.getElementsByTagName('div');
-
- var ineh = document.getElementById('eucentricheightcontents');
- var inehdiv = ineh.getElementsByTagName('div');
-
- var inform = document.getElementById('form');
- var informdiv = inform.getElementsByTagName('div');
-
- var insingle=document.getElementById('simplephotecontents');
- var insinglediv=document.getElementsByTagName('div');
-
- var intomo=document.getElementById('tomography');
-
- var inmds=document.getElementById('mds');
-
- ineh.style.display = 'none';
- inform.style.display = 'none';
- insingle.style.display ='none';
- intomo.style.display = 'none';
- inmds.style.display = 'none';
-}
+++ /dev/null
-function renzset(){
-
- var ajax=getAjax();
-
- if(command == "renzset"){
- var result = document.getElementById("detail");
- }else {
- var result = document.getElementById("result");
- }
-
- if (ajax) {
- try{
- ajax.onreadystatechange = getData;
- }catch(e){
- result.innerHTML="Onreadystate change error.";
- }
-
- try{
- ajax.open("GET","//localhost:8000/cgi-bin/vemclient.rb?command="+encodeURIComponent(command)+"&x="+encodeURIComponent(absolutex),true);
- //document.getElementById("mid").innerHTML="absolutex="+absolutex+" absolutey="+absolutey;
- }catch(e){
- result.innerHTML = "ajax open error";
- }
-
- try {
- ajax.send(null);
- }catch (e) {
- result.innerHTML ="send error";
- }
-
- }else {
- result.innerHTML = "you cannot use ajax....";
- }
-
- function getData() {
- if (ajax.readyState==4) {
- if (ajax.status==200) {
- result.innerHTML = ajax.responseText;
- }else {
- result.innerHTML = "HTTP transmission....";
- }
- }
- }
- }
-
-
-
-
-/*
- * To change this license header, choose License Headers in Project Properties.
- * To change this template file, choose Tools | Templates
- * and open the template in the editor.
- */
-
-
+++ /dev/null
-
-function stagecontrol(command,absolutex,absolutey,absolutez,absolutea) {
-
- var ajax=getAjax();
-
- if(command == "detailcatch"){
- var result = document.getElementById("detail");
- }else {
- var result = document.anchorsgetElementById("result");
- }
-
- if (ajax) {
- try{
- ajax.onreadystatechange = getData;
- }catch(e){
- result.innerHTML="Onreadystate change error.";
- }
-
- try{
- ajax.open("GET","//localhost:8000/cgi-bin/vemclient.rb?command="+encodeURIComponent(command)+"&x="+encodeURIComponent(absolutex)+"&y="+encodeURIComponent(absolutey)+"&z="+encodeURIComponent(absolutez)+"&a="+encodeURIComponent(absolutea),true);
- //document.getElementById("mid").innerHTML="absolutex="+absolutex+" absolutey="+absolutey;
- }catch(e){
- result.innerHTML = "ajax open error";
- }
-
- try {
- ajax.send(null);
- }catch (e) {
- result.innerHTML ="send error";
- }
-
- }else {
- result.innerHTML = "you cannot use ajax....";
- }
-
- function getData() {
- if (ajax.readyState==4) {
- if (ajax.status==200) {
- result.innerHTML = ajax.responseText;
- }else {
- result.innerHTML = "HTTP transmission....";
- }
- }
- }
- }
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<!--
-To change this license header, choose License Headers in Project Properties.
-To change this template file, choose Tools | Templates
-and open the template in the editor.
--->
-<html lang="en">
- <head>
- <title>TODO supply a title</title>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script type="text/javascript" src="JS/canvas.js"></script>
- </head>
- <body>
- <canvas id="canvasOne" width="500" height="300"></canvas>
- Hello world!
- </body>
-</html>
--- /dev/null
+
+//フォームから入力された顕微鏡のIPアドレス、ポート番号、メーカー、顕微鏡名を記憶
+function UserSetting(){
+ var ipAddress = document.getElementById("ip_address").value;
+ var port_number = document.getElementById("port_number").value;
+ var manufacturer = document.getElementById("manufacturer").value;
+ var em_name = document.getElementById("em_name").value;
+ //console.log(ipAddress+","+port_number+","+manufacturer+","+em_name);
+}
+
+//ajaxの準備
+function getAjax(){
+ var ajax = null;
+ try{
+ ajax = new XMLHttpRequest();
+ }catch(e){
+ alert("Not Init");
+ }
+ return ajax;
+}
+
+//URLからパラメーターを取得 => URLの引数からパラメータをキーとデータに分けたオブジェクト
+function GetUrlElement(){
+ var argument = new Object();
+ var key_data = location.search.substring(1).split('&');//頭に?がつくから2文字目から文字列を扱う
+ for(var i=0; i<key_data.length; i++) {
+ var value = key_data[i].split('=');
+ argument[value[0]] = value[1];//value[0]->key, value[1]->data
+ }
+ return {
+ GetUrlElementInstance: function() {
+ return argument;
+ }
+ }
+}
+
+//URLのメーカーまでの生成 =>URLの頭 ex) http://192.168.4.146:9090/fei/
+function MakeUrlHead(){
+ var userSetting = new GetUrlElement();
+ var urlElement = userSetting.GetUrlElementInstance();
+
+ var urlHead = "http://";
+ urlHead += urlElement['sendIpAddress'];
+ urlHead += ":";
+ urlHead += urlElement['sendPortNumber'];
+ urlHead += "/";
+ urlHead += urlElement['sendManufacturer'];
+ urlHead += "/";
+
+ return urlHead;
+}
+
+//全パラメータを返す
+function AllParams(){
+
+ /*vemapi*
+ # 全パラメーターを返す
+ # /:emname/get
+ 例
+ URL：http://localhost:9090/fei/get
+ 返り値:{"x":0,"y":1,"z":1,"a":1,"spotSizeIndex":0,"MagIndex":0}
+ */
+
+ var url = MakeUrlHead();
+ url += "get";
+
+ var on_off = document.getElementsByName("all_params_switch");//返り値は配列
+ console.log(on_off);
+
+ //on
+ if(on_off[0].checked){
+ console.log("on(allparams)");
+ //送信
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ //off
+ }else{
+ console.log("off(allparams)");
+ //URL画面出力
+ var show_url = document.getElementById("all_params_url");
+ show_url.innerHTML = url;
+
+ var show_return = document.getElementById("all_params_return");
+ show_return.innerHTML = "...";
+ }
+}
+
+//ステージ移動 数値指定 絶対座標
+function setStage(){
+
+ var movex = document.getElementById("movex").value;
+ var movey = document.getElementById("movey").value;
+ var movez = document.getElementById("movez").value;
+
+ var on_off = document.getElementsByName("move_stage_switch");
+
+ /*
+ # ステージ移動（絶対座標指定）
+ # /:emname/set/stagea
+ parameters x, y, z, a
+
+ 例：
+ http://localhost:9090/fei/set/stagea?x=1&&y=0&&z=2&&a=0
+
+ 返り値：
+ {"x”:"1","y”:"0","z”:"2","a”:"0"}
+ */
+
+ var url = MakeUrlHead();
+ url += "set/stagea";
+ url += "?x=";
+ url += movex;
+ //url += encodeURIComponent(movex);
+ url += "&y=";
+ url += movey
+ //url += encodeURIComponent(movey);
+ url += "&z=";
+ url += movez
+ //url += encodeURIComponent(movez);
+ url += "&a=";
+ url += movez
+ //url += encodeURIComponent(movez);
+
+ if(on_off[0].checked){
+ console.log("on(setStage)");
+ //送信
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ }else{
+ console.log("off(setStage)");
+ //URL画面出力
+ var show_url = document.getElementById("move_stage_url");
+ show_url.innerHTML = url;
+
+ var show_return = document.getElementById("move_stage_return");
+ show_return.innerHTML = "...";
+ }
+
+}
+
+//ステージ移動 クリックのボタン移動
+function ClickMove(direction){
+
+ var movingDistance = document.getElementById('movingDistance').value;
+
+ var movex = document.getElementById("movex").value;
+ var movey = document.getElementById("movey").value;
+ var movez = document.getElementById("movez").value;
+
+ var value = 0;
+
+ switch (direction){
+ case 'Left':
+ value = parseInt(movex) + parseInt(movingDistance);
+ document.getElementById("movex").value = value;
+ console.log(value);
+ break;
+ case 'Right':
+ value = parseInt(movex) - parseInt(movingDistance);
+ document.getElementById("movex").value = value;
+ console.log(value);
+ break;
+ case 'Up':
+ value = parseInt(movey) + parseInt(movingDistance);
+ document.getElementById("movey").value = value;
+ console.log(movey);
+ break;
+ case 'Down':
+ value = parseInt(movey) - parseInt(movingDistance);
+ document.getElementById("movey").value = value;
+ console.log(movey);
+ break;
+ }
+
+ setStage();//通信部を内包したステージ移動の関数を呼び出す
+
+
+ /*
+ var on_off = document.getElementsByName("move_stage_switch");
+
+ var url = MakeUrlHead();
+ url += "set/stager";
+ url += "?x=";
+ url += movex;
+ //url += encodeURIComponent(movex);
+ url += "&y";
+ url += movey
+ //url += encodeURIComponent(movey);
+ url += "&z";
+ url += movez
+ //url += encodeURIComponent(movez);
+ url += "&a";
+ url += movez
+ //url += encodeURIComponent(movez);
+
+ if(on_off[0].checked){
+ console.log("on(ClickMove)");
+ //送信
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ //off
+ }else{
+ console.log("off(ClickMove)");
+ //URL画面出力
+ var show_url = document.getElementById("move_stage_url");
+ show_url.innerHTML = url;
+
+ var show_return = document.getElementById("move_stage_return");
+ show_return.innerHTML = "...";
+ }
+ */
+}
+
+function setSpotsize(){
+
+ /*
+ # スポットサイズ指定（絶対値）
+ # /:emname/set/spotsizea
+ parameters sps
+
+ 例：
+ http://localhost:9090/fei/set/spotsizea?sps=3
+
+ 返り値：
+ {"spotSizeIndex":"3"}
+
+ # スポットサイズ指定（相対値）
+ # /:emname/set/spotsizer
+ parameters sps
+
+ 例：
+ http://localhost:9090/fei/set/spotsizer?sps=3
+
+ 返り値：
+ {"spotSizeIndex":"3"}
+ */
+
+ var on_off = document.getElementsByName("spotsize_switch");
+ var spotsize = document.getElementById("Spotsize").value;
+
+ var url = MakeUrlHead();
+ url += "set/spotsizea";
+ url += "?sps=";
+ url += spotsize;
+
+ if(on_off[0].checked){
+ console.log("on(setSpotsize)");
+ //送信
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ }else{
+ console.log("off(setStage)");
+ //URL画面出力
+ var show_url = document.getElementById("spotsize_url");
+ show_url.innerHTML = url;
+
+ var show_return = document.getElementById("spotsize_return");
+ show_return.innerHTML = "...";
+ }
+}
+
+
+function setMagnificationA(){
+ /*
+ # 倍率設定（絶対値）
+ # /:emname/set/magnificationa
+ parameters mag
+
+ 例：
+ http://localhost:9090/fei/set/magnificationa?mag=1
+
+ 返り値：
+ {"magIndex":"1"}
+ */
+ var on_off = document.getElementsByName("magnification_abs_switch");
+ var mag = document.getElementById("magnificationa").value;
+
+ var url = MakeUrlHead();
+ url += "set/magnificationa";
+ url += "?mag=";
+ url += mag;
+
+ if(on_off[0].checked){
+ console.log("on(setMagnificationA)");
+ //送信
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ }else{
+ console.log("off(setMagnificationA)");
+ //URL画面出力
+ var show_url = document.getElementById("magnification_abs_url");
+ show_url.innerHTML = url;
+
+ var show_return = document.getElementById("magnification_abs_return");
+ show_return.innerHTML = "...";
+ }
+}
+
+function setMagnificationR(){
+ /*
+ # 倍率設定（相対値）
+ # /:emname/set/magnificationr
+ parameters mag
+
+ 例：
+ http://localhost:9090/fei/set/magnificationr?mag=1
+
+ 返り値：
+ {"magIndex":"1"}
+ */
+ var on_off = document.getElementsByName("magnification_rel_switch");
+ var mag = document.getElementById("magnificationr").value;
+
+ var url = MakeUrlHead();
+ url += "set/magnificationr";
+ url += "?mag=";
+ url += mag;
+
+ if(on_off[0].checked){
+ console.log("on(setMagnificationR)");
+ //送信
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ }else{
+ console.log("off(setMagnificationR)");
+ //URL画面出力
+ var show_url = document.getElementById("magnification_rel_url");
+ show_url.innerHTML = url;
+
+ var show_return = document.getElementById("magnification_rel_return");
+ show_return.innerHTML = "...";
+ }
+}
+
+function defocus(){
+ /*
+ # フォーカス設定（相対値）
+ # /:emname/set/defocusr
+ parameters defocus
+
+ 例:
+ http://localhost:9090/fei/set/defocusr?defocus=1
+
+ 返り値：
+ {"defocus":"1"}
+ */
+
+ var on_off = document.getElementsByName("focus_rel_switch");
+ var defocus = document.getElementById("focusr").value;
+
+ var url = MakeUrlHead();
+ url += "set/defocusr";
+ url += "?defocus=";
+ url += defocus;
+
+ if(on_off[0].checked){
+ console.log("on(defocus)");
+ //送信
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ }else{
+ console.log("off(defocus)");
+ //URL画面出力
+ var show_url = document.getElementById("focus_rel_url");
+ show_url.innerHTML = url;
+
+ var show_return = document.getElementById("focus_rel_return");
+ show_return.innerHTML = "...";
+ }
+}
+
+function resetFocus(){
+ /*
+ # フォーカスリセット
+ # /:emname/set/reset_defocus
+ parameters なし
+
+ 例：
+ http://localhost:9090/fei/set/reset_defocus
+
+ 返り値：
+ {"defocus":"1"}
+ */
+
+ var on_off = document.getElementsByName("focus_reset_switch");
+
+ var url = MakeUrlHead();
+ url += "set/reset_defocus";
+
+ if(on_off[0].checked){
+ console.log("on(resetFocus)");
+ //送信
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ }else{
+ console.log("off(resetFocus)");
+ //URL画面出力
+ var show_url = document.getElementById("focus_reset_url");
+ show_url.innerHTML = url;
+
+ var show_return = document.getElementById("focus_reset_return");
+ show_return.innerHTML = "...";
+ }
+}
+
+function settingCam(){
+ /*
+ # 撮影条件の設定（ビニング, 露光時間, 画像サイズ）
+ # /:emname/set/acq_init
+ parameters bng, exp, size
+
+ 例：
+ http://localhost:9090/fei/set/acq_init?bng=2&&exp=0.25&&size=0
+
+ ビニング ：bng 1, 2, 4
+ 露光時間 ：exp 1:0.25:0.07（推奨）
+ 画像サイズ：size 0, 1, 2 （0:full,1:half,2:quarter)
+ */
+
+ var on_off = document.getElementsByName("set_condition_switch");
+ var bng = document.getElementById("binning").value;
+ var exp = document.getElementById("exptime").value;
+ var size = document.getElementById("image_size").value;
+
+ var url = MakeUrlHead();
+ url += "set/acq_init";
+ url += "?bng=";
+ url += bng;
+ url += "&exp="
+ url += exp;
+ url += "&size"
+ url += size;
+
+ if(on_off[0].checked){
+ console.log("on(settingCam)");
+ //送信
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ }else{
+ console.log("off(settingCam)");
+ //URL画面出力
+ var show_url = document.getElementById("set_condition_url");
+ show_url.innerHTML = url;
+
+ var show_return = document.getElementById("set_condition_return");
+ show_return.innerHTML = "...";
+ }
+}
+
+//WebSocketをつなぐスイッチ
+/*
+ # サーバーが送るメッセージ
+
+ クライアントと通信確立時
+ {"type":"connection", "data":"open"}
+
+ 画像リクエスト時（画像データを返す）
+ {"type":"img", "data":画像の配列}
+
+ # クライアントが送るメッセージ
+
+ 画像リクエスト時
+ {"type":"req", "data":"img"}
+
+*/
+function connectWebSocket(){
+ var button_value = document.getElementById("ws_button");
+
+ var userSetting = new GetUrlElement();
+ var urlElement = userSetting.GetUrlElementInstance();
+
+ if(button_value.value == "close"){
+ ws.close();
+ console.log('closed');
+ //document.getElementById("wsConnectBtn").value = "websocket start";
+ button_value.value = "close";
+ } else {
+
+ button_value.value = "start";
+ ws = new WebSocket("ws://"+urlElement['sendIpAddress']+":3001");
+ ws.onopen = function(){
+ console.log('websocket connected');
+ // ws.send('req');
+ };
+ //document.getElementById("wsConnectBtn").value = "websocket close";
+ ws.onmessage = function(ture){
+ data = JSON.parse(ture.data);//parseでオブジェクトに変換
+ console.log('server:' + data["type"]);
+ switch(data["type"]){
+ case "connection":
+ connection(data);
+ break;
+
+ case "img":
+ //image(data);
+ //画像のリクエスト
+ ws.send('{"type":"req", "data":"img"}');
+ //戻り値のJSONを
+ drawMycrograph(data.data);
+ break;
+ }
+ };
+ }
+ /*
+ toggleSwitch ^= 1 ;
+ switch(toggleSwitch){
+ case 1:
+
+ };
+ break;
+
+ case 0:
+
+ }
+ */
+}
+
+//URLを投げるスイッチ? vem docにはないが、開発段階のwitsに存在 （そのまま移植）
+function connectApi(){
+
+ var url = MakeUrlHead();
+ url += "set/";
+
+ var button = document.getElementById("api_button");
+ if(button.value == "close"){//closeする処理分岐
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ button.value = "start";
+ }else{//startの処理分岐
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ }
+///////////
+ /*
+ switch(toggleSwitch){
+ case 1:
+ //start
+
+
+ $.ajax({
+ type:"GET",
+ url:"http://" +UrlElement['sendIpAddress']+
+ ":"+UrlElement['sendPortNumber']+"/"+UrlElement['sendManufacturer']+
+ "/set/",
+ success: function(data){
+ console.log(data);//string型
+ }
+ });
+ document.getElementById("apiConnectBtn").value = "API close";
+ break;
+
+ case 0:
+ //stop
+
+ $.ajax({
+ type:"GET",
+ url:"http://" +UrlElement['sendIpAddress']+
+ ":"+UrlElement['sendPortNumber']+"/"+UrlElement['sendManufacturer']+
+ "/set/",
+ success: function(data){
+ console.log(data);//string型
+ }
+ });
+ document.getElementById("apiConnectBtn").value = "API start";
+ break;
+
+ }
+ */
+}
+
+
+function takePhoto(){
+ /*
+ # 撮影
+ # /:emname/acq
+
+ 例：
+ http://localhost:9090/fei/acq
+
+ 返り値：
+ 画像の2次元配列
+ */
+
+ var on_off = document.getElementsByName("capture_switch");
+
+ var url = MakeUrlHead();
+ url += "acq";
+
+ if(on_off[0].checked){
+ console.log("on(settingCam)");
+ //送信
+ var ajax = getAjax();
+ ajax.open('GET', url);
+ ajax.send();
+
+ ajax.addEventListener('readystatechange', function(){
+ if(ajax.readyState === 4 && ajax.status === 200){
+ console.log(ajax.responseText);
+ }
+ });
+ }else{
+ console.log("off(settingCam)");
+ //URL画面出力
+ var show_url = document.getElementById("capture_url");
+ show_url.innerHTML = url;
+
+ var show_return = document.getElementById("capture_return");
+ show_return.innerHTML = "...";
+ }
+}
+
+//電顕で撮って返ってくる画像の描画
+function drawMycrograph(ddata){
+ var canvas = document.getElementById("em_capture");
+ var length;
+ var context;
+
+ data = JSON.parse(ddata);
+
+ // context.scale(0.5,0.5);
+ if(!canvas || !canvas.getContext){
+ return(false);
+ }
+ else if(canvas.getContext){
+ context=canvas.getContext('2d')
+ }
+ console.log(data);
+ length = data.length;
+ console.log(length);
+ var imgData = context.createImageData(length,length);
+
+ for (var i=0;i<length;i++){
+ for (var j=0;j<length;j++){
+ var n = j*4+i*length*4;
+ var pixel = data[i][j];
+ imgData.data[n] = pixel;
+ imgData.data[n+1] = pixel;
+ imgData.data[n+2] = pixel;
+ imgData.data[n+3] = 255;
+ }
+ }
+ context.putImageData(imgData, 0, 0);
+}
+
\ No newline at end of file
arg[kv[0]]=kv[1];
}
- $(".div2 h1 p").text(arg['sendElectronMicroscopeName'])
+ $("em_name").inneHTML = arg['sendElectronMicroscopeName'];
return {
GetUrlElementInstance: function() {
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-010\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i010.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:15\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19200 um\r
+EmissionCurrent=101000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Small Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.2mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-011\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i011.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:16\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=2480.469\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=20\r
+WorkingDistance=19200 um\r
+EmissionCurrent=104000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=2000000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Small Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x20 WD=19.2mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-012\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i012.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:18\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=248.0469\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=200\r
+WorkingDistance=19200 um\r
+EmissionCurrent=105000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=200000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Small Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x200 WD=19.2mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-013\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i013.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:19\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19400 um\r
+EmissionCurrent=105000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.4mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-014\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i014.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:20\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19200 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.2mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-015\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i015.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:21\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=9.921875\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=5000\r
+WorkingDistance=19200 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=10000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x5.00k WD=19.2mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-016\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i016.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:23\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=19.84375\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=2500\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=20000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x2.50k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-017\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i017.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:24\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-018\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i018.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:25\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-019\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i019.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:26\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=19.84375\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=2500\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=20000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x2.50k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-020\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i020.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:28\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=19.84375\r
+SignalName=BSETOPO\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=2500\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=20000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x2.50k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-021\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i021.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:29\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=248.0469\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=200\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=200000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x200 WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-022\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i022.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:30\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=99.21875\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=500\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=100000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x500 WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-023\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i023.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:31\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=99.21875\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=500\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=100000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x500 WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-024\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i024.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:33\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-025\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i025.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:34\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19300 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-026\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i026.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:24\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=19.84375\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=2500\r
+WorkingDistance=19300 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=20000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x2.50k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-027\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i027.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:25\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=99.21875\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=500\r
+WorkingDistance=19300 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=100000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x500 WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-028\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i028.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:26\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19200 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.2mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-029\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i029.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:27\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=19.84375\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=2500\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=20000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x2.50k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-030\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i030.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:28\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=9.921875\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=5000\r
+WorkingDistance=19300 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=10000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x5.00k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-031\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i031.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:29\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=496.0938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=100\r
+WorkingDistance=19200 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=500000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x100 WD=19.2mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-032\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i032.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:30\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=2480.469\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=20\r
+WorkingDistance=19200 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=2000000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x20 WD=19.2mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-033\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i033.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:31\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19300 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-034\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i034.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:32\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19400 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.4mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-035\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i035.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:33\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19000 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-036\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i036.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=19:49:34\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19000 um\r
+EmissionCurrent=107000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-021\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i021.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:29\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=248.0469\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=200\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=200000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x200 WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-022\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i022.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:30\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=99.21875\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=500\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=100000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x500 WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-023\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i023.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:31\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=99.21875\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=500\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=100000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x500 WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+[SemImageFile]\r
+InstructName=SU1510\r
+SerialNumber=160907-03\r
+DataNumber=STD-024\r
+SampleName=beads\r
+Format=tif\r
+ImageName=beads-std-_i024.tif\r
+Directory=D:\HITACHI\2019\20190505\\r
+Date=2019/05/05\r
+Time=18:49:33\r
+Media=HD[Data ]\r
+DataSize=2560x1920\r
+PixelSize=49.60938\r
+SignalName=SE\r
+AcceleratingVoltage=3000 Volt\r
+DecelerationVoltage=0 Volt\r
+Magnification=1000\r
+WorkingDistance=19300 um\r
+EmissionCurrent=106000 nA\r
+LensMode=\r
+PhotoSize=1000\r
+Vacuum=\r
+MicronMarker=50000\r
+SubMagnification=0\r
+SubSignalName=\r
+SpecimenBias=0 V\r
+Condencer1=40000\r
+ScanSpeed=Slow1\r
+CalibrationScanSpeed=25\r
+ColorMode=Grayscale\r
+ColorPalette=\r
+ScreenMode=Full Screen\r
+Comment=\r
+KeyWord1=\r
+KeyWord2=\r
+Condition=Vacc=3kV Mag=x1.00k WD=19.3mm\r
+DataDisplayCombine=1\r
+StageType=0\r
+StagePositionX=20000000\r
+StagePositionY=20000000\r
+StagePositionR=0\r
+StagePositionZ=50000000\r
+StagePositionT=0\r
--- /dev/null
+
+
+電子顕微鏡のデータをサーバー側へ登録
+・IPアドレス
+・ポート番号
+・メーカー（マニュファクチャ）
+・電子顕微鏡の名前
+singlePhotoへ送信
+アクセスボタン->UserSetting
+
+電子顕微鏡のコンディション保存
+ファイル名前 セーブ->IndexSaveEmConditionoFile()
+/*********/
+使用JSファイル
+userSetting
+**********/
+
+
+
+
+
+
+電子顕微鏡操作
+map -> canvasMap
+
+
+-Setting-
+image size
+binning
+exptime
+
+-Stage Control-
+moving distance
+move x
+move y
+move z
+change current %
+spot size
+magnification absolute value
+magnification relative value
+
+-Take Photo-
+websocket
+api
+
+-Save Photo-
+[name].tiff Save
+
+-EMCondition-
+[name].txt Save
+
+[log file name].txt Save
+
+/*********/
+使用JSファイル
+userSetting
+log
+em
+realtimeCamera
+drawImage
+map
+CLEM
+**********/
--- /dev/null
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8">
+
+ <link rel="stylesheet" href="CSS/bootstrap-grid.css">
+ <link rel="stylesheet" href="CSS/clem.css">
+ <title>WITs-clem</title>
+</head>
+
+<body onLoad="main()">
+ <header>
+ <a href="./index.html">Go to WITs -home</a>
+ <h2>CLEM</h2>
+ <h3>Correlative Light Electron Microscopy</h3>
+ <!--
+ <div style="text-align: center;"><a href="how_clem.html" target="_blank">How to use</a></div>
+ -->
+ </header>
+ <main>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-6" id="canvasblock1">
+ <h2>Display1</h2>
+ <canvas id="canvas"></canvas>
+ <form name="form1" onSubmit="return false;">
+ <p>
+ <b>image</b><br>
+ <input type="file" name="image" accept="image/*" onChange="loadFile(this.files,1)">
+ </p>
+ <div name="matrix">
+ <p>
+ Scaling × <input type="number" name="magnification" value="1.00" min="0.01" step="0.01" style="width: 50px;" onChange="scaling(1)"><br>
+ Rotation <input type="number" name="angle" value="0" step="1" style="width: 50px;" onChange="rotation(1)">
+ </p>
+ <p>
+ Move x <input type="number" name="movex" value="0" onChange="moving(1)"><br>
+ Move y <input type="number" name="movey" value="0" onChange="moving(1)">
+ </p>
+ <p>
+ <input type="button" name="reset" value="Reset manipulation" onClick="reseting(1)">
+ </p>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-6" id="canvasblock2">
+ <h2>Display2</h2>
+ <canvas id="canvas2"></canvas>
+ <div class="row">
+ <div class="col-md-6">
+ <form name="form2" onSubmit="return false;">
+ <p>
+ <b>image</b><br>
+ <input type="file" name="image" accept="image/*"onChange="loadFile(this.files,2)">
+ </p>
+ <div name="matrix">
+ <p>
+ Scaling × <input type="number" name="magnification" value="1.00" min="0.01" step="0.01" style="width: 50px;" onChange="scaling(2)"><br>
+ Rotation <input type="number" name="angle" value="0" step="1" style="width: 50px;" onChange="rotation(2)">
+ </p>
+ <p>
+ Move x <input type="number" name="movex" value="0" onChange="moving(2)"><br>
+ Move y <input type="number" name="movey" value="0" onChange="moving(2)">
+ </p>
+ <p>
+ <input type="button" name="reset" value="Reset manipulation" onClick="reseting(2)">
+ </p>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-6">
+ <form>
+ <p>
+ <b>configulation</b><br>
+ <input type="file"><br>
+ x <input type="number" readonly><br>
+ y <input type="number" readonly><br>
+ z <input type="number" readonly><br>
+ α <input type="number" readonly><br>
+ β <input type="number" readonly><br>
+ offsetX <input type="number" readonly><br>
+ offsetY <input type="number" readonly><br>
+ angle <input type="number" readonly>
+ </p>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <div class="row" name="blending">
+ <div class="col-md-6" id="params_color">
+ <form name="color_form" onSubmit="return false;">
+ <h2>Manipulate display</h2>
+ <h4>Blend display1 and display2</h4>
+ <h5>Set transparency value</h5>
+ <p>
+ Display1 transparency(0.00-1.00)<input type="number" name="alpha" value="0.5" min="0" max="1" step="0.01" onChange="set_alpha()"><br>
+ Display2 transparency(0.00-1.00)<input type="number" name="beta" value="0.5" min="0" max="1" step="0.01" onChange="set_beta()"><br>
+ </p>
+ <h5>Change color</h5>
+ <p>
+ Display1: area of
+ <select id="before_color">
+ <option value="0">select the color</option>
+ <option value="1">Red</option>
+ <option value="2">Yellow</option>
+ <option value="3">Green</option>
+ <option value="4">Cyan</option>
+ <option value="5">Blue</option>
+ <option value="6">Magenta</option>
+ </select>
+ into
+ <select id="after_color">
+ <option value="0">select the color</option>
+ <option value="1">Red</option>
+ <option value="2">Yellow</option>
+ <option value="3">Green</option>
+ <option value="4">Cyan</option>
+ <option value="5">Blue</option>
+ <option value="6">Magenta</option>
+ </select><br>
+ Display2: area of
+ <select id="before_color2">
+ <option value="0">select the color</option>
+ <option value="1">Red</option>
+ <option value="2">Yellow</option>
+ <option value="3">Green</option>
+ <option value="4">Cyan</option>
+ <option value="5">Blue</option>
+ <option value="6">Magenta</option>
+ </select>
+ into
+ <select id="after_color2">
+ <option value="0">select the color</option>
+ <option value="1">Red</option>
+ <option value="2">Yellow</option>
+ <option value="3">Green</option>
+ <option value="4">Cyan</option>
+ <option value="5">Blue</option>
+ <option value="6">Magenta</option>
+ </select><br>
+ <input type="button" value="Changing color and blending" onClick="color()">
+ </p>
+ </form>
+ </div>
+ <div class="col-md-6" id="canvasblock3">
+ <h2>Display3(color)</h2>
+ <canvas id="canvas3"></canvas>
+ </div>
+ </div>
+ <hr>
+ <div class="row" name="blending">
+ <div class="col-md-6">
+ <h2>Display4(Scale,move(X,Y))</h2>
+ <canvas id="canvas4"></canvas>
+ <form name="form4" onSubmit="return false;">
+ <div name="matrix">
+ <p>
+ Scaling × <input type="number" name="magnification" value="1.00" min="0.01" step="0.01" style="width: 50px;" onChange="scaling(4)"><br>
+ </p>
+ <p>
+ Move x <input type="number" name="movex" value="0" onChange="moving(4)"><br>
+ Move y <input type="number" name="movey" value="0" onChange="moving(4)">
+ </p>
+ <p>
+ <input type="button" name="reset" value="Reset manipulation" onClick="reseting(4)">
+ </p>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-6">
+ </div>
+ </div>
+ </div>
+ </main>
+ <footer>
+ <p></p>
+ </footer>
+
+ <!--script
+ <script type="text/javascript" src="JS/draw.js"></script>
+ <script type="text/javascript" src="JS/color.js"></script>
+ -->
+ <script type="text/javascript" src="JS/draw_image.js"></script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8">
+
+ <link rel="stylesheet" href="CSS/bootstrap-grid.css">
+ <link rel="stylesheet" href="CSS/clem.css">
+ <link rel="stylesheet" href="CSS/get_coordinate.css">
+ <title>WITs-clem</title>
+</head>
+<body onLoad="main()">
+ <header>
+ <h2>CLEM</h2>
+ <h3>Correlative Light Electron Microscopy</h3>
+ </header>
+ <main>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12" style="text-align: center;">
+ <p style="text-align: center;">
+ Preview display
+ <input type="radio" name="preview" value="1" onclick="preview_on()">show
+ <input type="radio" name="preview" value="0" checked="checked" onclick="preview_off()">hide
+ </p>
+ <div id="preview_canvas_update_button">
+ </div>
+ <div id="preview_canvas_area">
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <h2>Display1</h2>
+ <form name="d1_unit" onSubmit="return false;">
+ pixel length<input type="number" name="pixel_length" placeholder="is none" step="0.001">
+ <select name="order">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ </form>
+ <canvas id="canvas"></canvas>
+ <form name="form1" onSubmit="return false;">
+ <p>
+ <b>image</b><br>
+ <input type="file" name="image" accept="image/*" onChange="loadFile(this.files,-1)">
+ </p>
+ <div name="matrix">
+ <p>
+ Scaling × <input type="number" name="magnification" value="1.00" min="0.01" step="0.01" style="width: 50px;" onChange="scaling(1)"><br>
+ Rotation <input type="number" name="angle" value="0" step="1" style="width: 50px;" onChange="rotation(1)">
+ </p>
+ <p>
+ Move x <input type="number" name="movex" value="0" onChange="moving(1)">
+ <select name="orderx">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ <br>
+ Move y <input type="number" name="movey" value="0" onChange="moving(1)">
+ <select name="ordery">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ </p>
+ <p>
+ <input type="button" name="reset" value="Reset manipulation" onClick="reseting(1)">
+ </p>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-6">
+ <h2>Display2</h2>
+ <form name="d2_unit" onSubmit="return false;">
+ pixel length<input type="number" name="pixel_length" placeholder="is none" step="0.001">
+ <select name="order">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ </form>
+ <canvas id="canvas2"></canvas>
+ <div class="row">
+ <div class="col-md-6">
+ <form name="form2" onSubmit="return false;">
+ <p>
+ <b>image</b><br>
+ </p>
+ <div name="matrix">
+ <p>
+ Scaling × <input type="number" name="magnification" value="1.00" min="0.01" step="0.01" style="width: 50px;" onChange="scaling(2)"><br>
+ Rotation <input type="number" name="angle" value="0" step="1" style="width: 50px;" onChange="rotation(2)">
+ </p>
+ <p>
+ Move x <input type="number" name="movex" value="0" onChange="moving(2)">
+ <select name="orderx">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ <br>
+ Move y <input type="number" name="movey" value="0" onChange="moving(2)">
+ <select name="ordery">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ </p>
+ <p>
+ <input type="button" name="reset" value="Reset manipulation" onClick="reseting(2)">
+ </p>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-6">
+ <form>
+ <p>
+ <b>configulation</b><br>
+ x: <font id="configx"></font><br>
+ y: <font id="configy"></font><br>
+ z: <font id="configz"></font><br>
+ α: <font id="configalfa"></font><br>
+ β: <font id="configbeta"></font><br>
+ offsetX: <font id="configoffsetx"></font><br>
+ offsetY: <font id="configoffsety"></font><br>
+ angle: <font id="configangle"></font><br><br>
+ </p>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-6">
+
+ </div>
+ <div class="col-md-6">
+ <font size=+2>⬆︎clicking thumbnail, reflect image</font>
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-7">
+ <h2>Image list(Input Display2)</h2>
+ <input type="button" value="Add" onClick="add_table()">
+ <input type="button" value="Clear" onClick="clear_table()">
+ <table style="border-collapse: collapse; display: block; height: 500px; overflow-y: scroll; ">
+ <thead style="text-align: center; background-color: white;">
+ <tr>
+ <th style="width: 15em;">No.</th>
+ <th style="width: 15em;">image file</th>
+ <th style="width: 15em;">config file(csv format)</th>
+ </tr>
+ </thead>
+ <tbody id="tbody_thumbnail_files" style="text-align: center;">
+ </tbody>
+ </table>
+ </div>
+ <div class="col-md-5">
+ <h2>Thumbnails</h2>
+ <table style="display: block; height: 512px; overflow-y: scroll;">
+ <tbody id="thumbnail_canvas" style="text-align: center;">
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <hr>
+ </div>
+ <div class="container">
+ <div class="row" name="blending">
+ <div class="col-md-6" id="params_color">
+ <h2>Blend</h2>
+ <b>Color table</b>
+ <input type="button" value="Create table" onclick="create_color_table()">
+ <input type="button" value="Make BE" onclick="make_blend_elements()"><br>
+ <input type="button" value="Color reset" onclick="color_reset()">
+ <table style="border-collapse: collapse; display: block;" >
+ <thead style="text-align: center; background-color: white;">
+ <tr>
+ <th style="width: 15em;">Display</th>
+ <th style="width: 15em;">Color</th>
+ <th style="width: 5em;">➡︎</th>
+ <th style="width: 15em;">Color</th>
+ </tr>
+ </thead>
+ <tbody style="text-align: center; background-color: #F1F1F1;">
+ <tr>
+ <td>Display1</td>
+ <td>
+ <select id="before_color_display1">
+ <option value="0">select the color</option>
+ <option value="1">Red</option>
+ <option value="2">Yellow</option>
+ <option value="3">Green</option>
+ <option value="4">Cyan</option>
+ <option value="5">Blue</option>
+ <option value="6">Magenta</option>
+ </select>
+ </td>
+ <td>
+ ➡︎
+ </td>
+ <td>
+ <select id="after_color_display1">
+ <option value="0">select the color</option>
+ <option value="1">Red</option>
+ <option value="2">Yellow</option>
+ <option value="3">Green</option>
+ <option value="4">Cyan</option>
+ <option value="5">Blue</option>
+ <option value="6">Magenta</option>
+ </select>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <br>
+ <table style="border-collapse: collapse; display: block; height: 500px; overflow-y: scroll; ">
+ <thead style="text-align: center; background-color: white;">
+ <tr>
+ <th style="width: 15em;">No.</th>
+ <th style="width: 15em;">Color</th>
+ <th style="width: 5em;">➡︎</th>
+ <th style="width: 15em;">Color</th>
+ </tr>
+ </thead>
+ <tbody id="color_table_tbody" style="text-align: center;">
+ </tbody>
+ </table>
+ </div>
+ <div class="col-md-6" id="canvasblock3">
+ <h2>Display3(color)</h2>
+ <input type="button" value="Apply" onclick="blend_switch('thumbnails')">
+ <canvas id="canvas3"></canvas>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <h2>Blend Elements</h2>
+ <div id="blend_elements"></div>
+ <!--
+ <table>
+ <tbody id="belnd_elements">
+ </tbody>
+ </table>
+ -->
+ </div>
+ </div>
+ <hr>
+ <div class="row" name="blending">
+ <div class="col-md-6">
+ <h2>Display4</h2>
+ <div id="current_coordinate">
+ [Mouse over in canvas]
+ </div>
+ <form id="d4_unit" onSubmit="return false;">
+ pixel length<input type="number" name="pixel_length" placeholder="is none" step="0.001">
+ <select name="order">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ </form>
+ <canvas id="canvas4"></canvas>
+ <form name="form4" onSubmit="return false;">
+ <div name="matrix">
+ <p>
+ Scaling × <input type="number" name="magnification" value="1.00" min="0.01" step="0.01" style="width: 50px;" onChange="scaling(4)"><br>
+ </p>
+ <p>
+ Move x <input type="number" name="movex" value="0" onChange="moving(4)">
+ <select name="orderx">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ <br>
+ Move y <input type="number" name="movey" value="0" onChange="moving(4)">
+ <select name="ordery">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ </p>
+ <p>
+ <input type="button" name="reset" value="Reset manipulation" onClick="reseting(4)">
+ </p>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-6">
+ <div id="table_area">
+ <h2>Coordinate list</h2>
+ <form name="list_form" onSubmit="return false;">
+ <font>-CSV format Upload-</font>
+ <input type="file" value="Upload" onChange="upload(this.files)">
+ <br>
+ <font>unit [</font>
+ <select id="order2">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ <font>]</font>
+ <input type="button" value="All clear" onClick="all_clear()">
+ </form>
+ <div id="table">
+ <table id="coordinate_table">
+ <thead id="coordinate_table_thead">
+ <tr>
+ <th id="number">No.</th>
+ <th id="coordinate_x">x</th>
+ <th id="coordinate_y">y</th>
+ <th id="coordinate_z">z</th>
+ <th id="button">button</th>
+ </tr>
+ </thead>
+ <tbody id="coordinate_table_tbody">
+ </tbody>
+ </table>
+ </div>
+ <form name="download_form" onSubmit="return false;">
+ <font>-CSV format Download-</font><br>
+ <input type="text" id="filename" placeholder="filename" >.txt
+ <input type="button" value="Download" onClick="download()">
+ <a id="download_link"></a>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+ <footer>
+ <p></p>
+ </footer>
+ <!--script
+ <script type="text/javascript" src="JS/draw.js"></script>
+ <script type="text/javascript" src="JS/color.js"></script>
+ -->
+ <script type="text/javascript" src="JS/draw_imagekai.js"></script>
+</body>
+</html>
--- /dev/null
+"2","3","4","0","0","10","-8","120"
+
--- /dev/null
+"7","1","8","0","0","3","15","240"
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="CSS/bootstrap-grid.css">
+ <link rel="stylesheet" href="CSS/em_control.css">
+ <title>WITs-controlEM</title>
+</head>
+<body>
+ <header>
+ <a href="./index.html">Go to WITs -home</a>
+ <h2>Control Electron Microscpy</h2>
+ <h3></h3>
+ </header>
+ <main>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-6">
+ <h3>EM display<div id="em_name"></div></h3>
+ <div style="height: 550px;">
+ <canvas id="em_canvas" width="512" height="512" style="z-index:0; position: absolute"></canvas>
+ <canvas id="canvasGuide" width="512" height="512" style="z-index:1; position: absolute"></canvas>
+ </div>
+ <div style="text-align:center;">
+ <h3 style="text-align: center;">map</h3>
+ <canvas height="200" width="200" id="canvasMap"></canvas>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="setting">
+ <h3>Setting</h3>
+ image size:
+ <select id="size" name="size" onchange="LogCollect()">
+ <option value="0">full</option>
+ <option value="1">half</option>
+ <option value="2">quarter</option>
+ </select>
+
+ binning:
+ <select id="binning" name="binning" onchang="LogCollect()">
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="4">4</option>
+ </select>
+
+ exptime:
+ <input type="number" id="exptime" name="exptime" onchang="LogCollect()">
+ </div>
+ <div id="stage_control">
+ <h3>Stage control</h3>
+ <form name="movestage" id="movestageid" action="">
+ <div class="form-group">
+ moving distance
+ <input type="number" name="movingdistance" id="movingdistance" value="1" onchange="setStage()">nm</input>
+ </div>
+ <div class="form-group">
+ move x
+ <input type="number" name="movex" id="movex" value="0" step="100" onchange="setStage() ; canvasMapDraw() ; LogCollect()">nm
+ <input type="button" id="clickMoveyLeft" value="←" onclick="clickMove('Left') ; LogCollect()">
+ <input type="button" id="clickMoveyRight" value="→" onclick="clickMove('Right') ; LogCollect()">
+ </div>
+ <div class="form-group">
+ move y
+ <input type="number" name="movey" id="movey" value="0" step="100" onchange="setStage() ; canvasMapDraw() ; LogCollect()">nm
+ <input type="button" id="clickMovexUp" value="↑" onclick="clickMove('Up') ; LogCollect()">
+ <input type="button" id="clickMovexDown" value="↓" onclick="clickMove('Down') ; LogCollect()">
+ </div>
+ </form>
+ <form name="moveza" id="moveza" action="">
+ <div class="form-group">
+ move z(keep magnificance)
+ <input type="number" name="movez" id="movez" value="0" onchange="setStage() ; LogCollect()">nm<br><br>
+ change current(keep stage)
+ <input type="number" name="movea" id="movea" onchange="objcontrol('obj',current.value) ; LogCollect()">%
+ Current lenz:<span id="obj"></span>
+ </div>
+ </form>
+ <form action="">
+ spot size
+ <input type = "number" name = "sps" id = "SpotSize" onchange="setSpotSize() ; LogCollect()">
+ </form>
+ <p>
+ magnification absolute value
+ <input type = "number" name = "magA" id = "magnificationA" onchange = "setMagnificationA() ; LogCollect()">
+ </p>
+ <form action="">
+ magnification relative value
+ <input type = "number" name = "magR" id = "magnificationR" onchange = "setMagnificationR() ; LogCollect()">
+ </form>
+ </div>
+ <div id="take_photo">
+ <h3>Take photo</h3>
+ <input type="button" id="wsConnectBtn" onclick="wsConnectionSwitch(); LogCollect()" value="websocket start">
+ <input type="button" id="apiConnectBtn" onclick="apiConnectionSwitch(); LogCollect()" value="API start">
+ </div>
+ <div id="save_photo">
+ <h3>Save photo</h3>
+ File name：<input id="namephoto" placeholder="myphoto">.tiff
+ <button onclick="CanvasSave('em_canvas')">Save</button><br>
+ <a id="DL_link_canvas"></a>
+ </div>
+ <div id="em_condition">
+ <h3>Electron Microscopy Condition</h3>
+ File name：<input id="name1" placeholder="date">.txt
+ <button onclick="SaveEmConditionFile()">Save</button>
+ <a id='DL_link_condition'></a>
+ <br>
+ LogFile name：<input id="logname" placeholder="log">.txt
+ <button id="logsave">Save</button><br><br>
+ <table border=1>
+ <tr>
+ <th>TEM</th><td><span id="tem"></span></td>
+ </tr>
+ <tr>
+ <th>Position</th>
+ <td>
+ <span id="Position"></span>
+ <b>x=</b><span id="currentx"></span><br>
+ <b>y=</b><span id="currenty"></span><br>
+ <b>z=</b><span id="currentz"></span><br>
+ <b>a=</b><span id="currenta"></span><br>
+ </td>
+ </tr>
+ <tr>
+ <th>SpotSizeIndex</th><td><span id="SpotSizeIndex"></span></td>
+ </tr>
+ <tr>
+ <th>MagIndex</th><td><span id="MagIndex"></span></td>
+ </tr>
+ <tr>
+ <th>Obj</th><td><span id="Obj"></span></td>
+ </tr>
+ <tr>
+ <th>BeamTiltX</th><td><span id="BeamTiltX"></span></td>
+ </tr>
+ <tr>
+ <th>BeamTiltY</th><td><span id="BeamTiltY"></span></td>
+ </tr>
+ <tr>
+ <th>Speed</th><td><span id="Speed"></span></td>
+ </tr>
+ </table>
+ <input type="button" onclick="nowCondition()" value="currentConditon">
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+ <footer>
+ <p></p>
+ </footer>
+ <!--script-->
+ <script src="JS/jquery-1.7.2.min.js"></script>
+ <script type="text/javascript" src= "JS/userSetting.js"></script>
+ <script type="text/javascript" src= "JS/log.js"></script>
+ <script type="text/javascript" src= "JS/realtimeCamera.js"></script>
+ <script type="text/javascript" src= "JS/em.js"></script>
+ <script type="text/javascript" src= "JS/drawImage.js"></script>
+ <script type="text/javascript" src= "JS/map.js"></script>
+</body>
+
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="CSS/bootstrap-grid.css">
+ <link rel="stylesheet" href="CSS/get_coordinate.css">
+ <title>WITs-coordinate</title>
+</head>
+<body onLoad="main()">
+ <header>
+ <a href="./index.html">Go to WITs-home</a>
+ <h2>Get coordinate</h2>
+ </header>
+ <main>
+
+ <div class="container">
+ <div class="row">
+ <div class="col-md-6" id="coordinate_canvas_block">
+ <h2>Display</h2>
+ <div id="current_coordinate">
+ [Mouse over in canvas]
+ </div>
+ <form name="image_form" onSubmit="return false;">
+ <!--Microscope magnification ×<input type="number" name="magnification_microscope" value="1"><br>-->
+ length of pixel <input type="number" name="pixel_length" placeholder="is none" step="0.001">
+ <select id="order1">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ </form>
+ <canvas id="coordinate_canvas"></canvas>
+ <div id="manipulation_area">
+ <h2>Manipulate Display</h2>
+ <form name="form1" onSubmit="return false;">
+ <input type="file" name="image" accept="image/*" onChange="loadFile(this.files)">
+ <p>
+ Scaling × <input type="number" name="magnification" value="1.00" min="1.00" step="0.01" style="width: 50px;" onChange="scaling()"><br>
+ Move x <input type="number" name="movex" value="0" onChange="moving()"><br>
+ Move y <input type="number" name="movey" value="0" onChange="moving()"><br>
+ <input type="button" name="reset" value="Reset manipulation" onClick="reseting()"><br>
+ </p>
+ </form>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="table_area">
+ <h2>Coordinate list</h2>
+ <form name="list_form" onSubmit="return false;">
+ <font>-CSV format Upload-</font>
+ <input type="file" value="Upload" onChange="upload_csv(this.files)">
+ <br>
+ <font>-STAR format Upload-</font>
+ <input type="file" value="Upload" onChange="upload_star(this.files)">
+ <br>
+ <font>unit [</font>
+ <select id="order2">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ <font>]</font>
+ <input type="button" value="All clear" onClick="all_clear()">
+ </form>
+ <div id="table">
+ <table id="coordinate_table">
+ <thead id="coordinate_table_thead">
+ <tr>
+ <th id="number">No.</th>
+ <th id="coordinate_x">x</th>
+ <th id="coordinate_y">y</th>
+ <th id="coordinate_z">z</th>
+ <th id="button">button</th>
+ </tr>
+ </thead>
+ <tbody id="coordinate_table_tbody">
+ </tbody>
+ </table>
+ </div>
+ <form name="download_form" onSubmit="return false;">
+ <font>-CSV format Download-</font><br>
+ <input type="text" id="filename" placeholder="filename" >.txt
+ <input type="button" value="Download" onClick="download()">
+ <a id="download_link"></a><br>
+ <font>-STAR format Download-</font><br>
+ <input type="text" id="filename_star" placeholder="filename" >.txt
+ <input type="button" value="Download" onClick="download_star()">
+ <a id="download_link_star"></a>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+ <footer>
+ <p></p>
+ </footer>
+ <!--script-->
+ <script type="text/javascript" src="JS/coordinate.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8">
+ <title>WITs</title>
+ <link rel="stylesheet" href="CSS/bootstrap-grid.css">
+ <link rel="stylesheet" href="CSS/get_c.css">
+</head>
+<body onload="main()" style="text-align: center;">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-7">
+ <h3>canvas1</h3>
+ <div style="text-align: left">
+ <form id="canvas1_unit" onSubmit="return false;">
+ pixel length
+ <input type="number" name="pixel_length" placeholder="is none" step="0.001">
+ <select name="order">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ </form>
+ </div>
+ <div id="current_coordinate_on_canvas1" style="text-align:right">
+ [Mouse over in canvas]
+ </div>
+ <canvas id="canvas1" style="background-color:black;"></canvas>
+ <p style="text-align:right;">
+ Import :
+ <input type="file" onChange='loadFile(this.files,"canvas1")'>
+ </p>
+ </div>
+ <div class="col-md-5">
+ <h3>table1</h3>
+ <div style="text-align:left">
+ <form id="table1_unit" onSubmit="return false;">
+ <font>table unit [</font>
+ <select name="order">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ <font>]</font>
+ <input type="button" value="clear" onClick="clearTable_canvas1()">
+ <input type="button" value="delete" onClick="deleteTable_canvas1()">
+ </form>
+ <form id="table1_mort" onSubmit="return false;">
+ <font>Choose marker or target</font>
+ <select name="m_or_t">
+ <option value="marker">marker</option>
+ <option value="target">target</option>
+ </select>
+ </form>
+ </div>
+ <div class=row>
+ <div class="col-md-6">
+ <table id="canvas1_marker" class="coordinate_canvas1">
+ <thead class=coordinate_thead>
+ <tr>
+ <th>marker</th>
+ </tr>
+ </thead>
+ <tbody id="canvas1_marker_tbody" class=coordinate_tbody>
+ </tbody>
+ </table>
+ </div>
+ <div class="col-md-6">
+ <table id="canvas1_target" class="coordinate_canvas1">
+ <thead class=coordinate_thead>
+ <tr>
+ <th>target</th>
+ </tr>
+ </thead>
+ <tbody id="canvas1_target_tbody" class=coordinate_tbody>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <div class="row">
+ <div class="col-md-7">
+ <h3>canvas2</h3>
+ <div style="text-align: left">
+ <form id="canvas2_unit" onSubmit="return false;">
+ pixel length
+ <input type="number" name="pixel_length" placeholder="is none" step="0.001">
+ <select name="order">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ </form>
+
+ </div>
+ <div id="current_coordinate_on_canvas2" style="text-align:right">
+ [Mouse over in canvas]
+ </div>
+ <canvas id="canvas2" style="background-color:black;"></canvas>
+ <p style="text-align:right;">
+ Import :
+ <input type="file" onChange='loadFile(this.files,"canvas2")'>
+ </p>
+ </div>
+ <div class="col-md-5">
+ <h3>table2</h3>
+ <div style="text-align:left">
+ <form id="table2_unit" onSubmit="return false;">
+ <font>table unit [</font>
+ <select name="order">
+ <option value="3">mm</option>
+ <option value="6">μm</option>
+ <option value="9">nm</option>
+ <option value="10">Å</option>
+ </select>
+ <font>]</font>
+ <input type="button" value="clear" onClick="clearTable_canvas2()">
+ <input type="button" value="delete" onClick="deleteTable_canvas2()">
+ </form>
+ <form id="table2_mort" onSubmit="return false;">
+ <font>Choose marker or target</font>
+ <select name="m_or_t">
+ <option value="marker">marker</option>
+ <option value="marker_ast">marker*</option>
+ <option value="target_ast">target*</option>
+ </select>
+ </form>
+ </div>
+ <div class=row>
+ <div class=col-md-4>
+ <table id="canvas2_marker" class="coordinate_canvas2">
+ <thead class=coordinate_thead>
+ <th>marker</th>
+ </thead>
+ <tbody id="canvas2_marker_tbody" class=coordinate_tbody>
+ </tbody>
+ </table>
+ </div>
+ <div class=col-md-4>
+ <table id="canvas2_marker_ast" class="coordinate_canvas2">
+ <thead class=coordinate_thead>
+ <th>marker*</th>
+ </thead>
+ <tbody id="canvas2_marker_ast_tbody" class=coordinate_tbody>
+ </tbody>
+ </table>
+ </div>
+ <div class=col-md-4>
+ <table id="canvas2_target_ast" class="coordinate_canvas2 ">
+ <thead id="canvas2_target_ast_tbody" class=coordinate_thead>
+ <th>target*</th>
+ </thead>
+ <tbody class=coordinate_tbody>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <script type="text/javascript" src="JS/getc.js"></script>
+</body>
+</html>
\ No newline at end of file
<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title></title>
- <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
- <link href="fonts/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet">
- <link href="css/bootstrap-3.1.1.min.css" rel="stylesheet">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="CSS/bootstrap-grid.css">
+ <link rel="stylesheet" href="CSS/index.css">
+ <title>WITs-home</title>
+</head>
- </head>
- <body>
- <div class="content-block">
- <div class="container-fluid">
- <div class="row-fluid">
- <div class="col-md-12">
- <h1>Please Input Your Electron Microscopes Data!</h1>
-<!-- <p>Proin eu leo non metus vulputate viverra. Curabitur ac augue ante. Praesent nisl diam, iaculis eget ipsum at, blandit laoreet eros. Nam hendrerit, erat commodo varius consequat, dolor massa tempor massa, vel cursus enim neque pellentesque augue. Aenean ullamcorper et lacus at hendrerit. Phasellus id lectus luctus, congue quam id, tempor justo. Mauris sodales imperdiet nisi eget lacinia. Nulla vehicula eleifend nibh sed malesuada. Praesent eget tortor erat. Nullam a sapien sit amet enim tempor cursus. Sed vehicula nisl sed odio gravida aliquam. Sed metus lorem, vestibulum vel pulvinar vel, condimentum vitae risus. Curabitur in odio ut nisl convallis dapibus sollicitudin vitae orci. Aenean vel molestie massa. Nam vehicula porta arcu, at dapibus nulla pulvinar fermentum. Nam orci enim, elementum ac risus vestibulum, imperdiet placerat mi.</p>
---> </div>
- </div>
- </div>
- </div>
- <div class="service-block">
- <div class="container-fluid">
- <div class="row-fluid">
-
- <form method = "get" autocomplete = "on" action = "simplePhoto.html">
- <p>IP Address : <input type ="text" id = "ipAddress" size = "40" name = "sendIpAddress" placeholder="localhost"></p>
- <p>port number : <input type ="text" id = "portNumber" size = "40" name = "sendPortNumber" placeholder="3000"></p>
- <p>manufacturer :
- <select id = "manufacturer" name = "sendManufacturer">
- <option value="fei">fei</option>
- <option value="jeol">jeol</option>
- <option value="hitachi">hitachi</option>
- </select>
- </p>
- <p>electron microscope name :
- <input type ="text" id = "electronMicroscopeName" size = "40" name = "sendElectronMicroscopeName"></p>
- <p>
- <input type = "submit" value = "access" onclick = "UserSetting()" class="btn btn-default"></p>
- </form>
-
- <p>em condition save</p>
- File name：<input id="saveEmConditionFileName" placeholder="date">.txt
- <button onclick="IndexSaveEmConditionFile()" class="btn btn-default">Save</button>
- <a id='DL_link_condition'></a>
- <form name=selectFile>
- <input type="file" id="selfile" onclick="IndexReadEmCondtionText()">
- <textarea name = "txt" row ="10" cols="50" readonly></textarea>
-<!-- <input type="button" value="set condition" class="btn btn-default">
---> </form>
- </div>
- </div>
- </div>
- <!-- SCRIPTS -->
- <script type="text/javascript" src="JS/userSetting.js"></script>
- <script src="js/jquery-1.7.2.min.js"></script>
- <script src="js/bootstrap-3.1.1.min.js"></script>
- <script src="plugins/backstretch/backstretch-2.0.4.min.js"></script>
- <script src="plugins/camera-slider/camera-slider-1.3.4.min.js"></script>
- <script src="plugins/camera-slider/easing-1.3.min.js"></script>
- <script src="plugins/fancybox/fancybox-1.3.4.pack.js"></script>
- <script src="plugins/fancybox/klass-1.0.min.js"></script>
- <script src="plugins/fancybox/photoswipe-3.0.5.min.js"></script>
- <script src="plugins/hover-animations/transform2d.min.js"></script>
- <script src="plugins/hover-animations/hover-animations-1.0.min.js"></script>
- <script src="plugins/match-height/match-height-0.5.1.min.js"></script>
- <script src="plugins/validation/validation-2.2.min.js"></script>
- <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
- <script src="js/lollies.min.js"></script>
- </body>
-</html>
+<body>
+ <header>
+ <h1>WITs</h1>
+ <h3>Web system Integrated Tems</h3>
+ </header>
+ <main>
+ <ul>
+ <li>
+ <a href="./input_em.html">Control Electron Microscopy</a>
+ <p>
+ This enable you to control electron microscopy.First, Input electron microscopes data.
+ After access, page is going to transit to control page.
+ <div class="nodelist_area">
+ <b>Electron microscopes data</b>
+ <ul class="nodelist">
+ <li>IP address</li>
+ <li>Port number</li>
+ <li>Manufacturer</li>
+ <li>Erectron microscope name</li>
+ </ul>
+ </div>
+ </p>
+ </li>
+ <li>
+ <a href="./clem.html">CLEM(Correlative Light Electron Microscopy)</a>
+ <p>
+ This CLEM is for analyzing using 2 images of Light microscope and Electron microscope.
+ User can do effects to the image on canvas.
+ </p>
+ <div class="nodelist_area">
+ <b>Effects</b>
+ <ul class="nodelist">
+ <li>Scalling</li>
+ <li>Rotation</li>
+ <li>Move</li>
+ <li>Change color</li>
+ <li>blendeing 2 image</li>
+ </ul>
+ </div>
+ </li>
+ <li>
+ <a href="./get_coo.html">Get coordinate</a>
+ <p>
+ This Get coordinate is making list of Light microscope image markers.
+ User can do several manipulation this list.
+ </p>
+ <div class="nodelist_area">
+ <b>Available manipulate</b>
+ <ul class="nodelist">
+ <li>Make list by clicking image</li>
+ <li>Make list by uploading text(CSV format) file</li>
+ <li>Save list at local PC</li>
+ </ul>
+ <dl>
+ <dt><b>CSV format</b>
+ <dd>"data1","data2","data3","data4"<br>
+ "data5","data6","data7","data8"<br>
+ ...
+ </dl>
+ </div>
+ </li>
+ </ul>
+ </main>
+ <footer>
+ <p></p>
+ </footer>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="CSS/input_em.css">
+ <title>WITs-InputEM</title>
+ </head>
+ <body>
+ <header>
+ <a href="./index.html">Go to WITs -home</a>
+ <h2>Input Electron Microscopes Data</h2>
+ </header>
+ <main>
+ <h3>Please Input Your Electron Microscopes Data!</h3>
+ <div id="forms">
+ <form method = "get" autocomplete = "on" action = "em_control.html">
+ <table>
+ <tr>
+ <th>IP Address</th><td><input type ="text" id = "ipAddress" size = "40" name = "sendIpAddress" placeholder="localhost"></td>
+ </tr>
+ <tr>
+ <th>Port number</th><td><input type ="text" id = "portNumber" size = "40" name = "sendPortNumber" placeholder="3000"></td>
+ </tr>
+ <tr>
+ <th>Manufacturer</th>
+ <td>
+ <select id = "manufacturer" name = "sendManufacturer">
+ <option value="fei">fei</option>
+ <option value="jeol">jeol</option>
+ <option value="hitachi">hitachi</option>
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <th>Electron microscope name</th><td><input type ="text" id = "electronMicroscopeName" size = "40" name = "sendElectronMicroscopeName"></td>
+ </tr>
+ </table>
+ <input type = "submit" value = "access" onclick = "UserSetting()" class="btn btn-default">
+ </form>
+ <br>
+ <b>-EM condition save-</b><br>
+ <b>File name：</b><input id="saveEmConditionFileName" placeholder="date">.txt
+ <button onclick="IndexSaveEmConditionFile()" class="btn btn-default">Save</button>
+ <a id='DL_link_condition'></a>
+ </div>
+ </main>
+
+ <!--script-->
+ <script type="text/javascript" src="JS/userSetting.js"></script>
+ <script src="js/jquery-1.7.2.min.js"></script>
+ </body>
+</html>
\ No newline at end of file
--- /dev/null
+
+
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8">
+ <title>tab</title>
+ <!--
+ <link rel="stylesheet" href="CSS/bootstrap-grid.css">
+ -->
+ <link rel="stylesheet" href="tab.css">
+</head>
+<body>
+ <h1 style="background-color: rgb(155, 155, 155); text-align: center;"><font color=#fff>W</font>eb system <font color=#fff>I</font>ntegreted <font color=#fff>T</font>em<font color=#fff>s</font></h1>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-2">
+ <div class="js-tabs">
+ <ul id="tab_menu1" class="tab_menu" style="padding-left: 0px;">
+ <li><a href="#page1-1">Page 1</a></li>
+ <li><a href="#page1-2">Page 2</a></li>
+ <li><a href="#page1-3">Page 3</a></li>
+ <li><a href="#page1-4">Page 4</a></li>
+ <li><a href="#page1-5">Page 5</a></li>
+ <li><a href="#page1-6">Page 6</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-md-10">
+ <div id="tab_content1" class="tab_content">
+ <div id="page1-1" class="page">
+ <font color=#AA0000>This is page1</font>
+ <hr>
+ <font>This is page1</font>
+
+ </div>
+ <div id="page1-2" class="page">
+ <font color=#AAAA00>This is page2</font>
+ <hr>
+ <font>This is page2</font>
+ </div>
+ <div id="page1-3" class="page">
+ <font color=#00AA00>This is page3</font>
+ <hr>
+ <font>This is page3</font>
+ </div>
+ <div id="page1-4" class="page">
+ <font color=#00AAAA>This is page4</font>
+ <hr>
+ <font>This is page4</font>
+ </div>
+ <div id="page1-5" class="page">
+ <font color=#0000AA>This is page5</font>
+ <hr>
+ <font>This is page5</font>
+ </div>
+ <div id="page1-6" class="page">
+ <font color=#AA00AA>This is page6</font>
+ <hr>
+ <font>This is page6</font>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <script type="text/javascript" src="tab.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="CSS2/clem.css">
+ <link rel="stylesheet" href="CSS2/bootstrap-grid.css">
+ <title>WITs-1mode</title>
+</head>
+
+<body onLoad="main()">
+ <header>
+ <h1>WITs for CLEM</h1>
+ <h3>Websystem Integrated Tems for Correlative Light and Electron Microscopy</h3>
+ <h3>[1 CANVAS MODE]</h3>
+ <a href="clem2.html">2 CANVAS MODE</a>
+ </header>
+ <main>
+ <div class="container">
+ <div class="row" id="canvasblock1">
+ <!--<div class="col-md-6">-->
+ <canvas id="canvas" class="col-md-6" height="512" width="512" style="position:relative; background-color: white;"></canvas>
+ <!--</div>-->
+ <div class="col-md-4">
+ <form name=form1 onSubmit="return false;">
+ <p>
+ <input type="file" id="image" accept="image/*" onChange="loadFile(this.files)">
+ </p>
+ <div id="matrix">
+ <p>
+ scaling × <input type="number" id="magnification" value="1.00" min="1.00" step="0.01" style="width: 50px;" onChange="scaling()"> <br>
+ rotation <input type="number" id="angle" value="0" step="1" style="width: 50px;" onChange="rotation()">
+ </p>
+ <p>
+ move x <input type="number" id="movex" value="0" onChange="moving()"><br>
+ move y <input type="number" id="movey" value="0" onChange="moving()">
+ </p>
+ <p>
+ <input type="button" id="reset" value="reset" onClick="reseting()">
+ </p>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </main>
+ <footer>
+ <p></p>
+ </footer>
+
+ <!--script-->
+ <script type="text/javascript" src="JS2/draw.js"></script>
+
+</body>
+</html>
--- /dev/null
+var can; //canvas要素
+var ctx; //コンテキスト
+var image = new Image();
+var reader = new FileReader();
+var imageAspect=0; //画像のアスペクト比
+var file=0;//画像ファイル 0は有無の判断のために格納
+var magnification = 1;//拡大縮小倍率
+var angle=0; //回転角(度) ユーザー入力の値
+var movx=0;
+var movy=0; //平行移動のパラメータ
+
+
+//bodyタグロード完了後、実行される
+function main(){
+ can = document.getElementById('canvas');
+ ctx = can.getContext('2d');
+ console.log("executed main()");
+ console.log(can,ctx,image,reader,imageAspect,file,magnification,angle,movx,movy);
+}
+
+//ローカルファイルの読み取り
+function loadFile(files){
+ file = files[0];
+ //ファイルアップロード2回目以降のcanvasの初期化
+ ctx.clearRect(0,0,can.width,can.height);
+ magnification_init();
+ rotation_init();
+ move_params_init();
+ displayImage();
+ console.log("executed loadFile()");
+}
+
+
+
+//ファイルを選択でローカルから画像ファイルを読み込んでcanvasに描画する
+function displayImage(){
+ //console.log("a");
+ reader.onload = function(event){
+ //console.log("aa");
+ //safari,firefoxでは.onloadが発生しない
+ image.onload = function(){
+ //console.log("aaa");
+
+ imageAspect = image.width / image.height;
+ if (imageAspect >= 1) { //画像が横長
+ left = 0;
+ width = can.width;
+ height = can.height / imageAspect;
+ to = (can.height - height) / 2;
+ } else { //画像が縦長
+ to = 0;
+ width = can.width * imageAspect;
+ height = can.height;
+ left = (can.width - width) / 2;
+ }
+
+
+
+ //ファイルアップロード2回目以降のcanvasの初期化
+ ctx.clearRect(0,0,can.width,can.height);
+
+
+ /****************変換適用***********************************************/
+ //コンテキストに対する効果の始点を中心に移動
+ ctx.translate(parseInt(can.width / 2),parseInt(can.height / 2));
+ //倍率をコンテキストに反映
+ ctx.scale(magnification,magnification);
+ //回転をコンテキストに反映
+ ctx.rotate(angle / 180 * Math.PI);
+
+ ctx.translate(-parseInt(can.width / 2)+movx,-parseInt(can.height / 2)-movy);
+
+ /**************************************************************************/
+
+
+
+ //画像をアスペクト比を維持して中心に表示(描画時は効果を元の位置に戻す)
+ ctx.drawImage(image, 0, 0, image.width, image.height, left, to, width, height);
+ console.log("drawing mag=%f,rot=%f",magnification,angle);
+
+ //変換位置に影響が出ないように調整
+ ctx.translate(-movx,movy);
+
+ /*****************変換調整***********************************************/
+ //コンテキストに対する効果の始点を中心に移動
+ ctx.translate(parseInt(can.width / 2),parseInt(can.height / 2));
+ //画像の倍率の初期化
+ ctx.scale(1 / magnification,1 / magnification);
+ //角度の初期化
+ ctx.rotate(-1 * angle / 180 * Math.PI);
+ ctx.translate(-parseInt(can.width / 2)+movx,-parseInt(can.height / 2)-movy);
+
+ //平行移動
+ ctx.translate(-movx,movy);
+ /****************************************************************************/
+
+
+ console.log("executed drawImage()");
+ }
+ image.src = event.target.result;
+ }
+ if(file && file.type.match('image.*')){
+ reader.readAsDataURL(file);
+ }else{
+ return false;
+ }
+}
+
+//倍率の値を持ってくる関数
+function scaling(){
+ if(file==0){
+ window.alert("画像ファイルをアップロードしてください");
+ magnification_init();
+ return false;
+ }
+ magnification = parseFloat(form1.magnification.value);
+ displayImage();
+ console.log("executed scaling()");
+}
+
+//倍率を１に戻す関数
+function magnification_init(){
+ form1.magnification.value = 1.00; //htmlのフォームの中身を変える
+ magnification = parseFloat(form1.magnification.value); //実際の値を変える
+ console.log("executed magnification_init()");
+}
+
+
+
+
+// 回転角を持ってくる関数
+function rotation(){
+ if(file==0){
+ window.alert("画像ファイルをアップロードしてください");
+ rotation_init();
+ return false;
+ }
+ angle = parseFloat(form1.angle.value);
+ displayImage();
+ console.log("executed rotation()");
+}
+
+//回転角を０に戻す関数
+function rotation_init(){
+ form1.angle.value = 0;
+ angle = parseFloat(form1.angle.value);
+ console.log("executed rotation_init()");
+}
+
+
+
+ //平行移動のパラメータを持ってくる関数
+function moving(){
+ if(file==0){
+ window.alert("画像ファイルをアップロードしてください");
+ move_params_init();
+ return false;
+ }
+ movx = parseFloat(form1.movex.value);
+ movy = parseFloat(form1.movey.value);
+ displayImage();
+ console.log("executed moving()");
+}
+
+//平行移動パラメータの初期化
+function move_params_init(){
+ form1.movex.value = 0;
+ movx = parseFloat(form1.movex.value);
+ form1.movey.value = 0;
+ movy = parseFloat(form1.movey.value);
+ console.log("executed move_params_init()");
+}
+
+
+function reseting(){
+ move_params_init();
+ rotation_init();
+ magnification_init();
+ displayImage();
+ console.log("executed reseting()");
+}
+
--- /dev/null
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="CSS/bootstrap-grid.css">
+</head>
+<body style="text-align: center;">
+ <h2>Intput EM info</h2>
+ <br>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-6" style="text-align: right;">
+ <h3>IP Address :</h3>
+ <h3>port number :</h3>
+ <h3>manufacturer :</h3>
+ <h3>electron microscope name :</h3>
+ </div>
+ <div class="col-md-6" style="text-align: left;">
+ <form method="get" action="url_dummy2.html" target="_blank">
+ <h3><input type="text" id="ip_address" name="sendIpAddress" placeholder="localhost"></h3>
+ <h3><input type="text" id="port_number" name="sendPortNumber" placeholder="3000"></h3>
+ <h3>
+ <select id="manufacturer" name="sendManufacturer">
+ <option value="fei">fei</option>
+ <option value="jeol">jeol</option>
+ <option value="hitachi">hitachi</option>
+ </select>
+ </h3>
+ <h3><input type="text" id="em_name" name="sendEMname"></h3>
+ <input type="submit" value="access" onClick="UserSetting()">
+ </form>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+ <script type="text/javascript" src="url_dummy.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="CSS/bootstrap-grid.css">
+</head>
+<body style="text-align: center;">
+ <h2>Control EM url</h2>
+ <br>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-3" style="text-align: right; padding: 5px;">
+ <h3>Return All Parameters</h3>
+ <h4>button</h4>
+ <h4>URL :</h4>
+ <h4>Return :</h4>
+ <hr>
+ <h3>Move Stage</h3>
+ <h4>
+ movingdistance<br>
+ move x<br>
+ move y<br>
+ move z
+ </h4>
+ <h4>URL :</h4>
+ <h4>Return :</h4>
+ <hr>
+ <!--
+ <h3>ステージ座標（相対座標）</h3>
+ <h4>URL :</h4>
+ <h4>Return :</h4>
+ <hr>
+ -->
+ <h3>SetSpotsize</h3>
+ <h4>spotsize</h4>
+ <h4>URL :</h4>
+ <h4>Return :</h4>
+ <hr>
+ <h3>Magnification absolute</h3>
+ <h4>value</h4>
+ <h4>URL :</h4>
+ <h4>Return :</h4>
+ <hr>
+ <h3>Magnification relative</h3>
+ <h4>value</h4>
+ <h4>URL :</h4>
+ <h4>Return :</h4>
+ <hr>
+ <h3>Defocus</h3>
+ <h4>value</h4>
+ <h4>URL :</h4>
+ <h4>Return :</h4>
+ <hr>
+ <h3>Focus Reset</h3>
+ <h4>button</h4>
+ <h4>URL :</h4>
+ <h4>Return :</h4>
+ <hr>
+ <h3>Setting</h3>
+ <h4>
+ Binning<br>
+ Exptime<br>
+ ImageSize<br>
+ </h4>
+ <h4>URL :</h4>
+ <h4>Return :</h4>
+ <hr>
+ <h3>Take Photo</h3>
+ <h4>webSocket</h4>
+ <h4>API</h4>
+ <h4>take photo</h4>
+ <h4>URL :</h4>
+ <h4>Return :</h4>
+ </div>
+ <div class="col-md-9" style="text-align: left; padding: 5px;">
+ <!--全パラメータを返す-->
+ <h3>
+ <input type="radio" name="all_params_switch" value="1" >on
+ <input type="radio" name="all_params_switch" value="0" checked="checked">off
+ </h3>
+ <h4>
+ <input type="button" value="All params" onClick="AllParams()">
+ </h4>
+ <h4 id="all_params_url">[url]</h4>
+ <h4 id="all_params_return">[return]</h4>
+ <hr>
+ <!--ステージ移動)-->
+ <h3>
+ <input type="radio" name="move_stage_switch" value="1" >on
+ <input type="radio" name="move_stage_switch" value="0" checked="checked">off
+ </h3>
+ <h4>
+ <input type = "number" id="movingDistance" value="1"> nm
+ <br>
+ <input type="number" id="movex" value="1" onchange="setStage()"> nm</input>
+ <input type="button" value="←" onClick="ClickMove('Left')">
+ <input type="button" value="→" onClick="ClickMove('Right')">
+ <br>
+ <input type="number" id="movey" value="1" onchange="setStage()"> nm</input>
+ <input type="button" value="↑" onClick="ClickMove('Up')">
+ <input type="button" value="↓" onClick="ClickMove('Down')">
+ <br>
+ <input type="number" id="movez" value="1" onchange="setStage()"> nm</input>
+ </h4>
+ <h4 id="move_stage_url">[url]</h4>
+ <h4 id="move_stage_return">[return]</h4>
+ <hr>
+ <!--ステージ移動(相対座標)
+ <h3>
+ <input type="radio" name="move_stage_rel_switch" value="1" >on
+ <input type="radio" name="move_stage_rel_switch" value="0" checked="checked">off
+ </h3>
+ <h4 id="move_stage_rel_url">[url]</h4>
+ <h4 id="move_stage_rel_return">[return]</h4>
+ <hr>
+ -->
+ <!--スポットサイズ設定-->
+ <h3>
+ <input type="radio" name="spotsize_switch" value="1" >on
+ <input type="radio" name="spotsize_switch" value="0" checked="checked">off
+ </h3>
+ <h4>
+ <input type = "number" id = "Spotsize" value="1" onchange="setSpotsize();">
+ </h4>
+ <h4 id="spotsize_url">[url]</h4>
+ <h4 id="spotsize_return">[return]</h4>
+ <hr>
+ <!--倍率設定(絶対値)-->
+ <h3>
+ <input type="radio" name="magnification_abs_switch" value="1" >on
+ <input type="radio" name="magnification_abs_switch" value="0" checked="checked">off
+ </h3>
+ <h4>
+ <input type = "number" id="magnificationa" onChange="setMagnificationA()">
+ </h4>
+ <h4 id="magnification_abs_url">[url]</h4>
+ <h4 id="magnification_abs_return">[return]</h4>
+ <hr>
+ <!--倍率設定(相対値)-->
+ <h3>
+ <input type="radio" name="magnification_rel_switch" value="1" >on
+ <input type="radio" name="magnification_rel_switch" value="0" checked="checked">off
+ </h3>
+ <h4>
+ <input type = "number" id="magnificationr" onChange="setMagnificationR()">
+ </h4>
+ <h4 id="magnification_rel_url">[url]</h4>
+ <h4 id="magnification_rel_return">[return]</h4>
+ <hr>
+ <!--フォーカス設定(相対値)-->
+ <h3>
+ <input type="radio" name="focus_rel_switch" value="1" >on
+ <input type="radio" name="focus_rel_switch" value="0" checked="checked">off
+ </h3>
+ <h4>
+ <input type = "number" id="focusr" onChange="defocus()">
+ </h4>
+ <h4 id="focus_rel_url">[url]</h4>
+ <h4 id="focus_rel_return">[return]</h4>
+ <hr>
+ <!--フォーカスリセット-->
+ <h3>
+ <input type="radio" name="focus_reset_switch" value="1" >on
+ <input type="radio" name="focus_reset_switch" value="0" checked="checked">off
+ </h3>
+ <h4>
+ <input type="button" value="resetFocus" onClick="resetFocus()">
+ </h4>
+ <h4 id="focus_reset_url">[url]</h4>
+ <h4 id="focus_reset_return">[return]</h4>
+ <hr>
+ <!--撮影の条件-->
+ <h3>
+ <input type="radio" name="set_condition_switch" value="1" >on
+ <input type="radio" name="set_condition_switch" value="0" checked="checked">off
+ </h3>
+ <h4>
+ <select id="binning" name="binning" onchange="settingCam()">
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="4">4</option>
+ </select>
+ <br>
+ <input type="number" id="exptime" value="0.07" step="0.01" onchange="settingCam()">
+ <br>
+ <select id="image_size" onchange="settingCam()">
+ <option value="0">full</option>
+ <option value="1">half</option>
+ <option value="2">quarter</option>
+ </select>
+ </h4>
+ <h4 id="set_condition_url">[url]</h4>
+ <h4 id="set_condition_return">[return]</h4>
+ <hr style="margin: 0;">
+ <!--撮影-->
+ <h3>
+ <input type="radio" name="capture_switch" value="1" >on
+ <input type="radio" name="capture_switch" value="0" checked="checked">off
+ </h3>
+ <h4>
+ <input type="button" id="ws_button" value="start" onClick="connectWebSocket()"></input>
+ </h4>
+ <h4>
+ <input type="button" id="api_button" value="start" onClick="connectApi()"></input>
+ </h4>
+ <h4>
+ <input type="button" id="photo_button" value="take photo" onClick="takePhoto()"></input>
+ </h4>
+ <h4 id="capture_url">[url]</h4>
+ <h4 id="capture_return">[return]</h4>
+ <canvas id="em_capture"></canvas>
+ </div>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
+ <script type="text/javascript" src="JS/url_dummy.js"></script>
+</body>
+</html>
\ No newline at end of file
OSDN Git Service
+%C3%A7%C2%B5%C2%84%C3%A6%C2%8F%C2%9B%C3%A3%C2%81%C2%88DNA%C3%A6%C2%8A%C2%80%C3%A8%C2%A1%C2%93%C3%AF%C2%BC%C2%88%C3%A3%C2%81%C2%9D%C3%A3%C2%81%C2%AE%C3%AF%C2%BC%C2%91%C3%AF%C2%BC%C2%89.png;h=532561f1eb8846b17c5bd92cc485fa8aa5a59121;hb=HEAD){kind=link}
