ndwarshuis
/
wolfchart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
wolfchart/index.htm

2482 lines
252 KiB
HTML
Raw Normal View History

upload the source code
2017-01-24 05:43:53 -05:00
<!DOCTYPE html>
<html lang="en">
<!--[if lt IE 10]>
<html lang='en' class='old_ie'>
<![endif]-->
<html lang=en>
<head>
<title>Chart</title>
<meta charset="utf-8" />
<style type="text/css">
.old_ie .setting-bar,
.old_ie .guide-section,
.old_ie .setting-button {
display: none;
}
.IENotice {
display: none;
}
.old_ie .IENotice {
display: block!important;
width: 100%;
height: 100%;
}
.old_ie .IENotice .modal{
display: block!important;
text-align: center;
background: white;
padding: 20px ;
color: #000;
margin: 10% auto 0;
font-size: 20px;
}
* {
margin: 0;
box-sizing: border-box;
padding: 0;
}
a {
color: #337ab7;
text-decoration: none;
}
a:active, a:hover {
color: #337ab7;
text-decoration: underline;
}
body {
font-family: Helvetica, Arial, San serif;
font-size: 16px;
color: #666666;
line-height: 1.2;
overflow: hidden;
}
.setting-button svg {
position: fixed;
right: 30px;
top: 20px;
}
.setting-bar {
right: 0;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
position: fixed;
top: 0;
border: 1px solid rgba(0,0,0,0.20);
height: 100%;
background: #F4F4F4;
box-shadow: -2px 0 4px rgba(0,0,0,0.30);
padding: 30px 20px;
overflow-y: auto;
-webkit-transform: translateX(560px);
transform: translateX(560px);
z-index: 11;
}
.mask {
opacity: 0;
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
z-index: 8;
background: rgba(0,0,0,0.6);
left: 0;
top: 0;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
pointer-events: none;
}
.active.mask {
opacity: 1;
visibility: visible;
}
.setting-bar.active {
transform: translateX(0);
}
.guide-section {
right: 0;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
position: fixed;
top: 0;
height: 100%;
z-index: 10;
background: #fff;
box-shadow: -2px 0 4px rgba(0,0,0,0.30);
padding: 30px;
overflow-y: auto;
width: calc(100vw - 560px - 50px);
/*-webkit-transform: translateX(calc(100vw - 560px - 50px));
transform: translateX(calc(100vw - 560px - 50px));*/
-webkit-transform: translateX(100vw);
transform: translateX(100vw);
}
.guide-section.active {
transform: translateX(-538px);
}
.form-control {
height: 38px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #DBDBDB;
display: inline-block;
vertical-align: middle;
width: 100%;
padding: 5px 10px;
font-family: Helvetica, Arial, San serif;
font-size: 16px;
color: #666666;
background: white;
}
.form-control:focus, .form-control:active {
outline: none;
}
.form-group label {
display: table-cell;
min-width: 190px;
padding-left: 20px;
}
.col-8 {
display: table-cell;
width: 308px;
}
.color-picker {
position: relative;
width: 205px;
}
.form-control + .unit {
margin-left: 5px;
}
.red {
color: #D30000;
font-size: 12px;
}
.form-group {
display: table;
margin: 0 0 20px 0;
}
.input-sm {
width: 90px;
}
.select-box {
position: relative;
}
.keyboard {
margin-right: 5px;
}
.select-box:after {
content: "";
border: 1px solid #666;
border-top: none;
border-right: none;
display: block;
height: 10px;
position: absolute;
right: 15px;
top: 10px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 10px;
pointer-events: none;
}
legend, h2 {
font-size: 32px;
padding: 0 0 20px 0;
}
fieldset {
border: none;
border-top: 1px solid #979797;
padding-top: 40px;
position: relative;
}
fieldset .title {
position: absolute;
right: 0;
color: white;
text-transform: uppercase;
top: 0;
text-align: center;
}
fieldset .title span {
background: #666;
display: block;
float: left;
width: 134px;
font-size: 13px;
height: 22px;
line-height: 24px;
}
fieldset .title a {
background: #999999;
height: 22px;
margin-right: 2px;
width: 22px;
display: block;
float: left;
color: #fff;
line-height: 24px;
text-decoration: none;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
fieldset.footer-fieldset {
padding-top: 30px;
}
.setting-bar.active {
transform: translateX(0);
}
.close, .close-guide {
position: absolute;
right: 30px;
top: 35px;
}
.btn {
padding: 10px 12px;
background: #F4F4F4;
border-radius: 5px;
border: 1px solid #979797;
font-size: 15px;
text-align: center;
color: #666666;
cursor: pointer;
min-width: 150px;
}
.btn:hover {
opacity: 0.8;
}
.btn + .btn {
margin-left: 5px;
}
.action-button {
text-align: right;
margin-bottom: 30px;
}
.color {
width: 25px;
height: 25px;
border-radius: 3px;
position: absolute;
top: 50%;
left: 5px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.color i {
width: 25px;
height: 25px;
border-radius: 3px;
}
.color-picker {
position: relative;
}
.color-picker input {
padding-left: 35px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.action-button {
margin: 0;
}
}
.btn-primary {
border-color: #2d689d;
}
.btn[disabled] {
cursor: not-allowed;
opacity: 0.3;
}
.color-choice {
position: relative;
}
/*.color-choice:before {
content: "rgb";
color: #666666;
position: absolute;
left: 40px;
top: 9px;
}*/
/*.color-choice:after {
content: ")";
color: #666666;
position: absolute;
right: 0px;
top: 9px;
}*/
/*accodion*/
.panel-title a {
display: block;
padding: 10px;
background: #666666;
color: white;
text-decoration: none;
font-size: 16px;
position: relative;
font-weight: normal;
}
.panel-title a:after {
width: 0;
content: "";
height: 0;
border-style: solid;
border-width: 9px 7px 0 7px;
border-color: #ffffff transparent transparent transparent;
position: absolute;
display: block;
right: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.collapse {
display: none;
}
.panel {
margin-bottom: 2px;
}
.panel-heading.active .panel-title a:after {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.panel-collapse {
padding: 10px;
}
.scoreBox {
font: bold 13px helvetica,arial, sans-serif;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top: 0 !important;
background: #d8d8d8;
border-radius: 5px;
color: #000;
padding: 4px 10px;
transition: all 0.3s linear;
border: 1px solid transparent;
left: -50px !important;
}
.scoreBox:hover {
box-shadow: 0 0 3px rgba(0,0,0,0.3);
border-color: red;
color: red;
z-index: 9;
}
.rule label {
position: relative;
}
.rule label:before, .rule label:after {
background: black none repeat scroll 0 0;
content: "";
display: block;
height: 10px;
left: 20px;
position: absolute;
top: 7px;
width: 1px;
}
.rule label:after {
left: auto;
right: 0;
}
#displaySetting {
text-align: center;
margin: 0 auto;
}
#displaySetting .character-line {
position: relative;
line-height: 0;
font-size: 0;
}
#displaySetting .char-line {
display: inline-block;
}
#displaySetting .scroll-div {
height: 100vh;
}
.clear-both {
height: 0;
clear: both;
}
.setting-button {
position: relative;
z-index: 9;
}
.panel ul {
margin-left: 15px;
}
.panel ul li {
margin: 10px 0;
}
body {
margin: 0 auto;
}
.colorpicker-saturation {
width: 100px;
height: 100px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAQAAADa613fAAAP9klEQVR4XnRWC47rNgwcKjlA0bv2VL1Qi/YELRav7203iS1ppqZoiXCAhuBHVLI74xFtG3/Hz2joIOjRGuR5eMYuRn9YA1fds859KX8ZvczLr9/pImiR3Rqky9/wlajRIdVE/1Rufeu/0No3/ASgBZAJUkwgi0iCaEatekJJoEqiTQncd67/gyOfRCZshTed0Nl8LbLj8D6qxtoq9/7kJz/aH/3Xfu8VwI5+AUH8DxE7gUyiIpZ5LwiGzUqE3CScJsCDQHAsvBnxWpkbC0QMHmBp6latWS0bnvrCN/x1+xPfce+Ij0GAyeAGGz15sOiax2UylPhKrFaMPnVWClwepKh07hdhkVDsK2uoyEIySergjdbY2VBtV8VLr8Mf9mF/4wMb7kR8FOhzFWZZe7HIZD9JRIbee28eJKBweTB6TwjYkAgWaUmtDveGw1Wx3zZ76YlPPfQd/+gTTUFkiGiJ+NQAszU1EPT/QJEgufolAMPkNU4CVOyUIBLg4xglEZHGQnTFOFV0VaulYddBhA986ge/7N/yQi/3flFgwfQq2ibLnTDBRl9TmUHyJASPV/eoN0UISIr+ICQKIFV4EpljSjV1uFVUq9hRtet5e9gXvuyHPW0zMhQxWaoBBa9Tg8vsCEhww23Smd0CKjIkmPIoxWrUBDgJqFCyESF43ctQxLUoHN7Q1KyVhqrNNm3cy2vMyQNPVKjc29Rh5SSU+giWdRJHkLnQG71FQEuNyNGBTDdBQQAKCuGiEUS/jcyGbkMPq931OIzb/dUPGuVlG7f+slqkO5NAAlzTMdcq0NkzmsEBmAQkbI+pSHbiqnuWIA6lijhvqwIxMyWxMGZiPU669XJE1tADDTs2HWpwKxuqdnTpOiOR42xlzLtm3pXGel3xd8/oTs8Xy0MV8GM1RlsC2Y3Wy3wut3M+2mEVux0Gt9fhzTWyLvGiiJYaqY5DWRFIwAiQ5r6gB9GpQihJw4I9j5Mkscj3BnzGjBhv8xna5P1Jo428o6IOPY5KFZtVOkEKqUjqQY9Gi+jrIOFwJUDzRtA9xyoIrGGmkNRmxVAnZoK+TkUIeUYni5wEzgOG5iZX5HCr2JyQNqdk++G0rgb1ochSIGutTj4P7F0PuRUAolmh5sCzAHn1BYyaADh6bgFeoBx6vst091CEvcSLWBBpqGq384jZ5llVHSwEShLx+D4d0mU3D5eEAJQ9KEhOZUYnDENV2qKgmIlQhWfdvcoXYaegPp/n1oKIOgYFqxrzQSciqNhv/5FqPpy6b0UcX2vf13DfWySRSEgkEYlEJJGQSyKJSEQSCYlEEpHexIVO3XOevffze2a+PfPv9x1rne1c3b3Mmlmz9mE++zuzngfnw/E+Dlc4LL4NwHdFy7u3KGPVmZ6/4eeMoDyre3i/KHADIHYO04w9zO0mAotuKnrc7XaPjvu66bNe5cDT7RlPepEnfS2X8dF1/utDvD+OwGDBxEgQywLCvIMYWBY+DShwAAORAdv9PswhDAqOUCi5+71AbFcDMR4xBDNfhySKXPXZ1+Vub+Q1Ltf5z7eC0AjVldHI26rIFdKIAyYBJCFVUhVDwttAnM52B3Ect1TFQXzJ0z33lOuib/QO8g+CuO0gKBRU80A8hkeJ0b1KRQWmFQVSh8mf3lpUpNaRulzN5NArrmKKGMijXgzk7w5ijdFVgT8f1IdFNjVWjDWicUYWEEMmSFDtILdzHW5XueHp7p+yuS54ep5/c5BE2Gw/gWPNYU4/PZaak2VGEsFjSbOf8irea6KQgojGCk0KxZY31tWWgzwayF8N5KYyo3VADVicWWrhwzr3ZqIOa5xW5zbqMPPMiyDURHDIHQTeWq7KFXcQPOqzPOL5Ov/iIDEDy7DHEwx0PTgjO8SS0fOEHcZNMt+XKEFMj8Q4QUSvPu6HPuvd4N9/x12RPwcIVRCAakSOUzHgsUSMFWYzDQ+PiOJqAOuYc9jh5TecnA+xHfFyOYhebeTH89P80wrCJzUjlsx7euIV0g4zQFUSiBPioIWBACFC7GgDj8P91ZSJOQmQP74MAnQo8H5RIe8kZ0kBcQCMAlEpRDiKROBxbR0ksdhWFq0gR9q9uQzkDzuIFQSPqAgRCAsCaVNF2ZAAhxvtzcqcnDk6tpXxSsayqXLIgSOb6zqeH+fvO0i9XEu5EVV+OZehRZJ6BGTeaRhCkTzVIZeAzaWGAFfErIPogQI5CuR3HQQx7DzBB16R3s7e0MBUPedjWutgG/JUTPqMeAQNEiytJRnJearWUgdwFNxN7rtBoECuj/O3BMHaTIxQ0a4GctireElTJHJvLTaalih5kvBCGMvkdESUMAdCFaI4yG8SpDfRWAptqkAJUwCG6B7lOREFSZBqKs57MEHqVJEBwHa2lp0OiKtiQ18gx9P89QrSXyc0vObBM4vPmBADqJZLAo/yzK7qPSZstCy+fDSZlhrm+Zkyjsf5q2otdC14zkLjHLf0me9wjNqQo0B1a6wBJRaIEgC2Qw9oby/cRHA+xHCQy/xlB1HVSV3Y/5yVhsc7dBi2UoIWCMcbELZWgxNCGUZ5y4ceBaLlE8dAfrEosrYT+z8ya3sxXndFBxuQivNGEHFCbLGBlBLKGYHZoeoQpcjtMn/uICPefcxecpuDOEemg9S/44cflZPIlWolyHkLrEpgbS9IQRlAgZgi0WDjsEiPh+PN/Fkogq4GdzPtarlRGW2tJwEK1RMTEvdVdmhAKHO1pdUuGQsVcX+rSfGzDbwGyE8NRPQc83HCaOkTZwPqABZBdFq8zAN1gue0FPO8wYUFBE1WkMwVzM1iQ4BItFh+H36Qy/yJg0DRQICmBl+tbKUC5cCj3yXI+SUFBS78ZAcBtHt+e9lBuiqpTNh9zTvIjzuIWxVYGQJpAZY+VWS3QKh84iSZbwuIdiDpc4KztQa/sjhMaDJEJDSZ8mZ+kCBdC0JpKVNQzZdKu+EsOeFCosrngVAkDS/uy6iGnW7UxmMpkB8FyFKo6iQW8z1HuBdMu1pdkZdB8jWTjlFtNaiJRYniIDcD+eECMqFLS9ED6DgxzCMKnRD3HYYA2uMCJUh70OK8G0EUnJV8lqe8nj84QdqLhdoJskNlEw1ivajM8LtPBhIeN99LESXI9xcQIHFQudHngZjUhXOQeGlUYmAddh5pxMhzV0M1vMAtMFIVmfp6fq+DgEWefjQVenstaqUy3bJQAiVlEihDghCDINFQg8oUhoQPkO8SBEM7SFQ72VYBwPuE7k8uYF5LNwg/TEd2zkuKjIIhTiJRlYrDfNS1QL7DYUcbcCyKJNwOwucVCVSwBBj/DwghXA2hQtACgCBBPprfXkAIFIYRXhONQARFU00Tsh6LEmmQUbkTImMi9me5qaHDIeBgHeRbdxAIqAJBCDSoCNVQglrciqX/ZCD9RRP6rgpBvhmKAFhg2ForBLXBYPtUjj7vCHPe8SXbYAY47gHB9mKeqjjIg/53fmMD0fR9Bug7SFcHI6EA1OC/E8QTL4NgBSGiCiyTChnI1zcQxmyfRZGM6w701KRybDvsIK3LWDx6mxGkcglEZQLkawnCdppZ6sgCh8trWWBUQaUWCEOlOs7HAenFE45QSu9RQQDAqchXNxDq4orQR44qRIFUQvM+mRJuB6GDEixgCbSBQGXghEEbdn1P/zO/QhAWCsWsmRhLa2VFkSZIgSVKmgEQhvk6K8YKMRZl7Dwg4amOUYvFBfLlE4RasOCB5S9PXKq0AqGDMiYIReXF0mYctITWBmqR5F38X5Y7yJfeCtKBzNbWYm5XpsMpf3dRZD3jPDesvdVCOs6KYQXIFw1E4fcE8dHWOepZBXpLJcACWUZVMRZbfvgXR4Ak8A7VVSKSVuu9p6/mFxyE7cOWavtLp952O8huK83+gmHzHaAsVXLgAvl8gPCvHzAFsM8GNXGKPH5cmN02sXTLa8QdKRXMzHv67/k5A9k1UIx36UH/VlWWtuKssNiRapB6BaLXl6MA+a
cursor: crosshair;
float: left;
}
.colorpicker-saturation i {
display: block;
height: 5px;
width: 5px;
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
margin: -4px 0 0 -4px;
}
.colorpicker-saturation i b {
display: block;
height: 5px;
width: 5px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.colorpicker-hue,
.colorpicker-alpha {
width: 15px;
height: 100px;
float: left;
cursor: row-resize;
margin-left: 4px;
margin-bottom: 4px;
}
.colorpicker-hue i,
.colorpicker-alpha i {
display: block;
height: 1px;
background: #000;
border-top: 1px solid #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-top: -1px;
}
.colorpicker-hue {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAMAAABw8qpSAAABLFBMVEXqFBb/ABH/ACL/ADH/AEH/AFD/AGD/AG7/AH7/AI3/AJ3/AKz/ALz/AMr/ANv/AOr/APr2AP/mAP/XAP/HAP+4AP+oAP+aAP+JAP97AP9rAP9cAP9MAP8+AP8tAP8fAP8PAP8BAv8AEP8AH/8AL/8APv8ATv8AXP8Abf8Ae/8Ai/8Amv8Aqv8AuP8Ayf8A1/8A5/8A9/8A//gA/+kA/9kA/8oA/7oA/6wA/5sA/40A/30A/24A/14A/1AA/z8A/zEA/yEA/xEB/wMN/wAd/wAs/wA8/wBK/wBb/wBp/wB5/wCI/wCY/wCm/wC3/wDF/wDV/wDk/wD1/wD/+gD/7AD/3AD/zAD/vgD/rQD/nwD/jgD/gAD/cAD/YgD/UQD/QwD/MgD/JAD/FAD4Eg42qAedAAAAh0lEQVR4XgXAg3EDAAAAwI9to7Zt27a1/w49BASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTS1tHXo1KVbj159+g0YNGTYiFFjxk2YNGXajFlz5i1YtGTZilVr1m3YtGXbjl179h04dOTYiVNnzl24dOXajVt37j149OTZi1dv3n349OXbj19//wOxE1dQ8reGAAAAAElFTkSuQmCC');
}
.colorpicker-alpha {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAQAAAAVxWkcAAABr0lEQVR4Xo2VwU0DQQxF7dmRuNIFlzlSAR3QAaXQQdIBJVABFXDcOVAAd67cjJLR07dkhcSrkZKfb/t7bG88rFo3B5gZPMNycItu2xloGV7MWHzM9zuzFWCkmA0nK6AszCUJDW6+mG6R03ncw5v8EMTEvZ2O3AliYjpslblc0RF9LmZYWxURU6aKytWZYsoWCAe+xwOZp1GsEukGiIkYxcQCHck99+gRgB7JncyIB5SGEhP3Yh5P6JwX+u6AnYot104d8DJT7uH7M9JH6OZbimj0vfMVaYnJIZFJDBW9kHlerL2C6JV4mSt7uuo2N57RxnZ+usQjn0R1jwBJBrNO3evJpVYUWsJ/E3UiXRlv24/7YZ04xmEdWlzcKS+B/eapeyMvFd2k0+hRk/T0AmTW8h69s2sjYMsdPntECiILhAeIMZAeH4QvUwfn6ijC0tTV+fT9ky8jM9nK2g7Ly1VjSpKYq6IvsAm7MtNu1orEqa/K3KNvgMFdhfquPfJmp2dbh0/8Gzb6Y22ViaNr6n5410zXdngVhbu6XqdOtWOuin5hjABGp4a2uotZ71MVCfwDBt2/v37yo6AAAAAASUVORK5CYII=');
display: none;
}
.colorpicker-saturation,
.colorpicker-hue,
.colorpicker-alpha {
background-size: contain;
}
.colorpicker {
padding: 4px;
min-width: 130px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
z-index: 2500;
}
.colorpicker:before,
.colorpicker:after {
display: table;
content: "";
line-height: 0;
}
.colorpicker:after {
clear: both;
}
.colorpicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 6px;
}
.colorpicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 7px;
}
.colorpicker div {
position: relative;
}
.colorpicker.colorpicker-with-alpha {
min-width: 140px;
}
.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
display: block;
}
.colorpicker-color {
height: 10px;
margin-top: 5px;
clear: both;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAQAAAAVxWkcAAABr0lEQVR4Xo2VwU0DQQxF7dmRuNIFlzlSAR3QAaXQQdIBJVABFXDcOVAAd67cjJLR07dkhcSrkZKfb/t7bG88rFo3B5gZPMNycItu2xloGV7MWHzM9zuzFWCkmA0nK6AszCUJDW6+mG6R03ncw5v8EMTEvZ2O3AliYjpslblc0RF9LmZYWxURU6aKytWZYsoWCAe+xwOZp1GsEukGiIkYxcQCHck99+gRgB7JncyIB5SGEhP3Yh5P6JwX+u6AnYot104d8DJT7uH7M9JH6OZbimj0vfMVaYnJIZFJDBW9kHlerL2C6JV4mSt7uuo2N57RxnZ+usQjn0R1jwBJBrNO3evJpVYUWsJ/E3UiXRlv24/7YZ04xmEdWlzcKS+B/eapeyMvFd2k0+hRk/T0AmTW8h69s2sjYMsdPntECiILhAeIMZAeH4QvUwfn6ijC0tTV+fT9ky8jM9nK2g7Ly1VjSpKYq6IvsAm7MtNu1orEqa/K3KNvgMFdhfquPfJmp2dbh0/8Gzb6Y22ViaNr6n5410zXdngVhbu6XqdOtWOuin5hjABGp4a2uotZ71MVCfwDBt2/v37yo6AAAAAASUVORK5CYII=');
width: 138px;
}
.colorpicker-color div {
height: 10px;
}
.colorpicker-selectors {
display: none;
height: 10px;
margin-top: 5px;
clear: both;
}
.colorpicker-selectors i {
cursor: pointer;
float: left;
height: 10px;
width: 10px;
}
.colorpicker-selectors i + i {
margin-left: 3px;
}
.colorpicker-element .input-group-addon i,
.colorpicker-element .add-on i {
display: inline-block;
cursor: pointer;
vertical-align: text-top;
}
.colorpicker.colorpicker-inline {
position: relative;
display: inline-block;
float: none;
z-index: auto;
}
.colorpicker.colorpicker-horizontal {
width: 110px;
min-width: 110px;
height: auto;
}
.colorpicker.colorpicker-horizontal .colorpicker-saturation {
margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal .colorpicker-color {
width: 100px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue,
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
width: 100px;
height: 15px;
float: left;
cursor: col-resize;
margin-left: 0px;
margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue i,
.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
display: block;
height: 15px;
background: #ffffff;
position: absolute;
top: 0;
left: 0;
width: 1px;
border: none;
margin-top: 0px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAABCAMAAAAfBfuPAAABLFBMVEXqFBb/ABH/ACL/ADH/AEH/AFD/AGD/AG7/AH7/AI3/AJ3/AKz/ALz/AMr/ANv/AOr/APr2AP/mAP/XAP/HAP+4AP+oAP+aAP+JAP97AP9rAP9cAP9MAP8+AP8tAP8fAP8PAP8BAv8AEP8AH/8AL/8APv8ATv8AXP8Abf8Ae/8Ai/8Amv8Aqv8AuP8Ayf8A1/8A5/8A9/8A//gA/+kA/9kA/8oA/7oA/6wA/5sA/40A/30A/24A/14A/1AA/z8A/zEA/yEA/xEB/wMN/wAd/wAs/wA8/wBK/wBb/wBp/wB5/wCI/wCY/wCm/wC3/wDF/wDV/wDk/wD1/wD/+gD/7AD/3AD/zAD/vgD/rQD/nwD/jgD/gAD/cAD/YgD/UQD/QwD/MgD/JAD/FAD4Eg42qAedAAAAbUlEQVR4XgXAghEDsbxtlrZt27ax/w49ACAYQTGcICmaYTleECVZUTXdMC1Wm93hdLk9Xp8/EAyFI9FYPJFMpTPZXL5QLJUr1Vq90Wy1O91efzAcjSfT2XyxXK03293+cDydL9fb/fF8vT/f3x+LfRNXARMbCAAAAABJRU5ErkJggg==');
}
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAKCAQAAADoFTP1AAAB9ElEQVR4XoWTQW4VMRBEu9qWEimL7DhEMp8NF+ASnJJLcAQgE1bcgBUSkYKUuHCrZ9pjeqSU5Yn9LPu7umJQBIIv+k7vIOrtK66L4lmr3pVOrOv3otp619KZ0/KjdNI79L52Uo09FBQWrU0vfe5trezU+hLsoUKd3Repovte+0vbq/7Lj5XbaHECKasR9G4MPlbp+gzZxd6koPEJCkAYC5SjcOTAIIOK90Dja1IfIZ8Z+zAY9jm3b5Ia+MT5sFcqRJrR2AYYA8Kua5BzYRrFPNmD4PQMegGJMOffJJUsWiI3nCHZZjInNdffLWOufzbc3JaboCAVxwmnRHbhLSPwRJ4wU0BRSc6HkECYYVw95nMKgJOcylxrJttE5Ibzf9Xq9GPvP+WX3MiV/MGHfRu/SentRQrfG1GzsIrytdNXucSRKxQNIGHM9YhGFQJcdjNcBZvfJayuYe4Sia1CzwW+19mWOhe37HsxJWKwbu/jluEU15QzAQjAqCEbhMJc78GYV2E0kooHDubUImWkTOhGpgv8PoT8DJG/bzxna4BZ0eOFSOaLADGeSpFsg5AzeaDZIDQQXjZ4y/8ryfzUXBwdELRjTjCNvOeT0rNlrJz90vwy6N9pXXQEluX0inElpPWokSdiLCfiNJJjMKQ8Qsh8GEKQKMo/eiHrNbI9UksAAAAASUVORK5CYII=');
}
.colorpicker-right:before {
left: auto;
right: 6px;
}
.colorpicker-right:after {
left: auto;
right: 7px;
}
.colorpicker-no-arrow:before {
border-right: 0;
border-left: 0;
}
.colorpicker-no-arrow:after {
border-right: 0;
border-left: 0;
}
.colorpicker.colorpicker-visible,
.colorpicker-alpha.colorpicker-visible,
.colorpicker-saturation.colorpicker-visible,
.colorpicker-hue.colorpicker-visible,
.colorpicker-selectors.colorpicker-visible {
display: block;
}
.colorpicker.colorpicker-hidden,
.colorpicker-alpha.colorpicker-hidden,
.colorpicker-saturation.colorpicker-hidden,
.colorpicker-hue.colorpicker-hidden,
.colorpicker-selectors.colorpicker-hidden {
display: none;
}
.colorpicker-inline.colorpicker-visible {
display: inline-block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.char-line {
margin-left: 0 !important;
margin-right: 0 !important;
}
.char-line svg {
margin-top: 0 !important;
margin-bottom: 0 !important;
float: left;
cursor: pointer;
}
.char-line svg.disable {
opacity: 0;
visibility: hidden;
}
.char-line svg.active {
opacity: 1;
visibility: visible;
}
/*get dpi*/
#dpi {
height: 1in;
left: -100%;
position: absolute;
top: -100%;
width: 1in;
}
.disabled-btn {
background: #ccc;
border: #ccc;
pointer-events: none;
}
.errorMsg {
color: red;
font-size: 12px;
display: block;
margin-top: 10px;
}
.character-invisible {
visibility: hidden;
opacity: 0;
}
#displaySetting .scroll-div:empty {
display: none;
}
.modal-setting {
position: fixed;
z-index: 9;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<!--dpi-->
<div id="dpi"></div>
<!--setting bar-->
<a class="setting-button" href="#setting-bar">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="1 1 16 16" enable-background="new 1 1 16 16" xml:space="preserve" style="width:50px;height: 50px">
<g id="Layer_7" display="none">
<rect x="1" y="1" display="inline" width="16" height="16" />
</g>
<g id="Layer_33">
<g id="Symbols_4_">
<g id="Side-Nav_2_" transform="translate(-16.000000, -212.000000)">
<g id="Group-2_2_">
<g transform="translate(0.000000, 205.000000)">
<g id="Fill-93" transform="translate(16.000000, 7.000000)">
<path fill="#68707D" d="M14.5,9.3c0,0.2-0.1,0.3-0.3,0.3h-1v1c0,0.2-0.1,0.3-0.3,0.3s-0.3-0.1-0.3-0.3v-1h-1
c-0.2,0-0.3-0.1-0.3-0.3V8c0-0.2,0.1-0.3,0.3-0.3h1V3.5c0-0.2,0.1-0.3,0.3-0.3s0.3,0.1,0.3,0.3v4.2h1c0.2,0,0.3,0.1,0.3,0.3
V9.3z M12.9,14.9c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3s1.3,0.6,1.3,1.3S13.6,14.9,12.9,14.9L12.9,14.9z M10.6,6.1
c0,0.2-0.1,0.3-0.3,0.3h-1v4.2C9.3,10.8,9.2,11,9,11c-0.2,0-0.3-0.1-0.3-0.3V6.4h-1c-0.2,0-0.3-0.1-0.3-0.3V4.8
c0-0.2,0.1-0.3,0.3-0.3h1v-1c0-0.2,0.1-0.3,0.3-0.3c0.2,0,0.3,0.1,0.3,0.3v1h1c0.2,0,0.3,0.1,0.3,0.3V6.1z M9,14.9
c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3s1.3,0.6,1.3,1.3S9.7,14.9,9,14.9L9,14.9z M6.7,8c0,0.2-0.1,0.3-0.3,0.3h-1v2.3
c0,0.2-0.1,0.3-0.3,0.3c-0.2,0-0.3-0.1-0.3-0.3V8.4h-1C3.6,8.4,3.5,8.2,3.5,8V6.7c0-0.2,0.1-0.3,0.3-0.3h1V3.5
c0-0.2,0.1-0.3,0.3-0.3c0.2,0,0.3,0.1,0.3,0.3v2.9h1c0.2,0,0.3,0.1,0.3,0.3V8z M5.1,14.9c-0.7,0-1.3-0.6-1.3-1.3
s0.6-1.3,1.3-1.3s1.3,0.6,1.3,1.3S5.8,14.9,5.1,14.9L5.1,14.9z M16.1,1.2H1.9c-0.2,0-0.3,0.1-0.3,0.3v14.9
c0,0.2,0.1,0.3,0.3,0.3h14.3c0.2,0,0.3-0.1,0.3-0.3V1.5C16.5,1.3,16.3,1.2,16.1,1.2L16.1,1.2z" />
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</a>
<div class="setting-bar" id="setting-bar">
<a class="close" href="#">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="1 1 16 16" enable-background="new 1 1 16 16" xml:space="preserve" style="width:24px;height:24px">
<g id="Layer_7" display="none">
<rect x="1" y="1" display="inline" width="16" height="16" />
</g>
<g id="Layer_31">
<path fill="#68707D" d="M12.1,11.6c0.1,0.1,0.1,0.3,0,0.5c-0.1,0.1-0.2,0.1-0.2,0.1c-0.1,0-0.2,0-0.2-0.1L9,9.5l-2.6,2.6
c-0.1,0.1-0.2,0.1-0.2,0.1c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.3,0-0.5L8.5,9L5.9,6.4C5.8,6.2,5.8,6,5.9,5.9
c0.1-0.1,0.3-0.1,0.5,0L9,8.5l2.6-2.6c0.1-0.1,0.3-0.1,0.5,0c0.1,0.1,0.1,0.3,0,0.5L9.5,9L12.1,11.6z M9,16.5L9,16.5L9,16.5z
M9,1.2C4.7,1.2,1.2,4.7,1.2,9c0,2.1,0.8,4,2.3,5.5C4.9,16,6.9,16.8,9,16.8h0c4.3,0,7.8-3.5,7.8-7.8C16.8,4.7,13.3,1.2,9,1.2L9,1.2
z" />
</g>
</svg>
</a>
<form action="" method="" id="form-setting">
<legend>Settings</legend>
<fieldset>
<div class="title">
<a class="questions-btn" href="#charater-set">?</a> <span>OPTOTYPES</span>
</div>
<div class="form-group">
<label class="col-2">Optotype</label>
<div class="col-8 select-box">
<select class="form-control" id="sOptotype">
<option value="1">Snellen</option>
<option value="2">Sloan</option>
<option value="3">LandoltC</option>
<option value="4">TumblingE</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-2">Alphabet</label>
<div class="col-8 select-box">
<select class="form-control" id="sAlphabet">
<option value="2">BS4274.3</option>
<option value="1">SnellenU</option>
</select>
</div>
</div>
</fieldset>
<fieldset>
<div class="title">
<a class="questions-btn" href="#distance">?</a> <span>RECORDING</span>
</div>
<div class="form-group">
<label class="col-2">Notation</label>
<div class="col-8 select-box">
<select class="form-control" id="sNotation">
<option value="1">Metres</option>
<option value="2">Feet</option>
<option value="3">logMAR</option>
<option value="4">DecimalV</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-2">Numerator</label>
<div class="col-8 select-box">
<select class="form-control" id="sNumerator">
<option value="2">Standard</option>
<option value="1">Actual</option>
</select>
</div>
</div>
</fieldset>
<fieldset>
<div class="title">
<a class="questions-btn" href="#calibration">?</a> <span>CALIBRATION</span>
</div>
<div class="form-group">
<label class="col-2">Distance <span style="color:red">*</span></label>
<div class="col-8 ">
<input type="text" class="form-control input-sm" id="iDistance" title="only letters" min="3000"> <span class="unit">mm</span>
</div>
</div>
<div class="form-group">
<label class="col-2">Length of line below <span style="color:red">*</span></label>
<div class="col-8 ">
<input type="text" class="form-control input-sm" id="iLengOfLine" title="only letters" min="25" max="250"> <span class="unit">mm</span> <span class="red">(be precise)</span>
</div>
</div>
<div class="rule form-group">
<label>
<svg width="120mm" height="2px" xmlns="http://www.w3.org/2000/svg">
<line fill="none" stroke="black" stroke-width="2" x1="0" y1="0" x2="120mm" y2="0" id="calib_line" />
</svg>
</label>
</div>
</fieldset>
<fieldset>
<div class="title">
<a class="questions-btn" href="#display-area">?</a> <span>Display area</span>
</div>
<div class="form-group">
<label class="col-2">Display width <span style="color:red">*</span></label>
<div class="col-8 ">
<input type="text" class="form-control input-sm" id="iViewWidth" title="only letters"> <span class="unit">mm</span>
</div>
</div>
<div class="form-group" style="display:none;">
<label class="col-2">Display height <span style="color:red">*</span></label>
<div class="col-8 ">
<input type="text" class="form-control input-sm" id="iViewHeight" title="only letters"> <span class="unit">mm</span>
</div>
</div>
</fieldset>
<fieldset>
<div class="title">
<a class="questions-btn" href="#options">?</a> <span>options</span>
</div>
<div class="form-group">
<label class="col-2">Sort</label>
<div class="col-8 select-box">
<select class="form-control" id="display">
<option value="1" selected>Smallest to Largest</option>
<option value="2">Largest to Smallest</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-2">Mirrored / Direct</label>
<div class="col-8 select-box">
<select class="form-control" id="sMirrored">
<option value="2" selected="selected">Mirrored</option>
<option value="1">Direct</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-2">Text colour</label>
<div class="color-picker col-8 color-choice">
<div id="cp3" class="input-group colorpicker-component">
<span class="input-group-addon color"><i></i></span>
<input type="text" id="colorBox" class="form-control" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="title">
<a class="questions-btn" href="#shortcuts">?</a> <span>shortcuts</span>
</div>
<div class="form-group">
<label class="col-2">Page Up</label>
<div class="col-8 ">
<span class="keyboard">Shift + </span><input type="text" class="form-control input-sm" id="pageUp" maxlength="1">
</div>
</div>
<div class="form-group">
<label class="col-2">Page Down</label>
<div class="col-8 ">
<span class="keyboard">Shift + </span><input type="text" class="form-control input-sm" id="pageDown" maxlength="1">
</div>
</div>
<div class="form-group">
<label class="col-2">Shuffle</label>
<div class="col-8 ">
<span class="keyboard">Shift + </span><input type="text" class="form-control input-sm" id="shuffle" maxlength="1">
</div>
</div>
<div class="form-group">
<label class="col-2">Unshuffle</label>
<div class="col-8 ">
<span class="keyboard">Shift + </span><input type="text" class="form-control input-sm" id="unShuffle" maxlength="1">
</div>
</div>
</fieldset>
<fieldset class="footer-fieldset">
<div class="action-button">
<button class="btn btn-default" id="reset" type="button">Reset to defaults</button>
<button class="btn btn-default btn-primary disabled-btn" id="updateSetting" type="button">Apply</button>
</div>
</fieldset>
</form>
</div>
<!--end sidebar setting-->
<!-- guide section-->
<div id="guide-section" class="guide-section">
<h2>Help</h2>
<a class="close-guide" href="#">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="1 1 16 16" enable-background="new 1 1 16 16" xml:space="preserve" style="width:24px;height:24px">
<g id="Layer_7" display="none">
<rect x="1" y="1" display="inline" width="16" height="16" />
</g>
<g id="Layer_31">
<path fill="#68707D" d="M12.1,11.6c0.1,0.1,0.1,0.3,0,0.5c-0.1,0.1-0.2,0.1-0.2,0.1c-0.1,0-0.2,0-0.2-0.1L9,9.5l-2.6,2.6
c-0.1,0.1-0.2,0.1-0.2,0.1c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.3,0-0.5L8.5,9L5.9,6.4C5.8,6.2,5.8,6,5.9,5.9
c0.1-0.1,0.3-0.1,0.5,0L9,8.5l2.6-2.6c0.1-0.1,0.3-0.1,0.5,0c0.1,0.1,0.1,0.3,0,0.5L9.5,9L12.1,11.6z M9,16.5L9,16.5L9,16.5z
M9,1.2C4.7,1.2,1.2,4.7,1.2,9c0,2.1,0.8,4,2.3,5.5C4.9,16,6.9,16.8,9,16.8h0c4.3,0,7.8-3.5,7.8-7.8C16.8,4.7,13.3,1.2,9,1.2L9,1.2
z" />
</g>
</svg>
</a>
<div class="accordion">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="charater-set">
<h4 class="panel-title">
<a href="#">
Optotypes
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
The optotypes fields allow you to select both the letters to be displayed, and the order of letters on each line. You cannot change the array nor order of the lines displayed here. Custom Optotypes and Alphabets can be installed.
<ul>
<li>
<strong>Optotype</strong>: Select from the standard optotypes and those you have installed yourself.
</li>
<li>
<strong>Alphabet</strong>: The available options are dependent on the OPTOTYPE selected above. SnellenU and SloanU use a wider selection of letters, but letters may not be of equal readability. BS4724.3 and ETDRS are standard alphabets using fewer letters, but with equal readability. Letters can be shuffled to prevent learning - see below
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="distance">
<h4 class="panel-title">
<a href="#">
Recording
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>
<strong>Notation</strong>: Sets the notation type on the VA label on each chart line. Each notation type has a fixed array of chart lines. "Metres" is standard Snellen notation eg. 6/6; "Feet" is the US equivalent eg. 20/20; DecimalV is a decimal equivalent of Snellen notation eg. 6/60 = 0.1, 6/12 = 0.5; logMAR is explained here <a href="https://en.wikipedia.org/wiki/LogMAR_chart" target="_blank">https://en.wikipedia.org/wiki/LogMAR_chart.</a>
</li>
<li>
<strong>Numerator</strong>: Sets the numerator of only the fraction notation types, in which the numerator nominally describes the test distance. "Actual" is the value entered in Distance rounded to the nearest 0.1, and VA labels will show the proportionally adjusted denominator. Eg if you set the Distance to 3160mm, the VA labels will be 3.2/3.2, 3.2/9.6 etc. "Standard" is either 6 or 20 depending on the value you set in Notation above. VA labels will display as either 6/ or 20/ regardless of the value in Distance (see below). Please note that it is not advisable to use Standard if the Distance varies a large amount from 6000mm, say outside 5000-7000mm.
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="calibration">
<h4 class="panel-title">
<a href="#">
Calibration
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p> The two CALIBRATION values are the ONLY values that influence the display size of the chart lines. The RECORDING values above only change the VA labels on the chart lines, and have no bearing on the chart lines themselves.</p>
<ul>
<li><strong>Distance</strong>: Enter the distance from the patient's eye to the letter chart in mm. Eg 6m is 6000mm. If using a mirror to double the test distance, measure BOTH from the patient's eye to the mirror AND from the mirror to the chart and ADD the two distances (and don't forget to check the Mirrored/Direct setting - see below). If you are using Notation value of "Feet", Distance will be converted to feet to the nearest 0.1, or to 20 depending on the value in Numerator.</li>
<li>
<strong>Length of the line below</strong>: Calibrates the chart for the pixel density of the display being used. Measure the ruler line as accurately as possible. Measure two more times, and if the values vary, enter an average. You will need to re-check this value if you change display hardware, graphics adapter settings, or if you turn your display from landscape to portrait or vice versa. Take particular care here if you are using extended display from a laptop as pixel density may be different between the laptop screen and the external display.
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="display-area">
<h4 class="panel-title">
<a href="#">
Display area
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
A maximum of 5 letters is displayed on each line. If the browser window is not large enough to display all 5 letters, fewer will be displayed.
To measure the DISPLAY WIDTH, use a ruler to measure the horizontal width of your browser window in mm. Once you have applied the settings, you can vary this DISPLAY WIDTH value to improve the appearance and centration of the chart. However be aware that a smaller value may limit the number of letters that can be displayed on larger lines.
You can use the SHUFFLE function (see below) to present the 5 letters required for a repeatable result if 5 letters won't fit.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="options">
<h4 class="panel-title">
<a href="#">
Options
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<!-- <li><strong>Sort</strong>: Lines of the chart are always displayed with the smallest at the bottom. Unless the display is very large (about 1m wide by about 1.5m tall), the chart will display in pages - see SHORTCUTS below. Here you can select whether to display the page of the smallest or largest lines first on refresh or reconfigure. By default, the smallest subtense is 0.5arcmin, the largest 10 arcmin.</li> -->
<li><strong>Mirrored/Direct</strong>: Select "Direct" if the chart is to be viewed directly, otherwise select "Mirrored" and the letters and lines will be reversed, but the labels not. If changing this setting, don't forget to set the Distance (see above) accordingly.</li>
<li>
<strong>Text colour</strong>: This field accepts any rgba colour value. Eg. 0,0,0,1 is black; 0,0,0,0.1 is 10% black; 255,0,0,1 is pure red.
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="shortcuts">
<h4 class="panel-title">
<a href="#">
Shortcuts
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p> Use these fields to specify keyboard shortcuts for operating the chart.</p>
<ul>
<li>
<strong>Page Up/Page Dn</strong>: The chart displays upwards from the smallest chart line by default. If your display is large enough (about 1m wide by about 1.5m tall), all 10-14 lines will display, otherwise the chart will divide itself into pages and you will need to use Page Up or Dn to page through them.<br />
Paging can also be done with a mouse - the whitespaces above and below the chartlines are page up and down buttons.
</li>
<li>
<strong>Shuffle/Unshuffle:</strong>: Shuffle randomises the letters normally shown on a chart line into a different order. You can shuffle as many times as you like. Unshuffle returns the letter order to the default.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end guide-section-->
<div id="displaySetting">
<div data-line="1" class="character-line">
<div class="char-line" id="line-1"></div>
</div>
<div data-line="2" class="character-line">
<div class="char-line" id="line-2"></div>
</div>
<div data-line="3" class="character-line">
<div class="char-line" id="line-3"></div>
</div>
<div data-line="4" class="character-line">
<div class="char-line" id="line-4"></div>
</div>
<div data-line="5" class="character-line">
<div class="char-line" id="line-5"></div>
</div>
<div data-line="6" class="character-line">
<div class="char-line" id="line-6"></div>
</div>
<div data-line="7" class="character-line">
<div class="char-line" id="line-7"></div>
</div>
<div data-line="8" class="character-line">
<div class="char-line" id="line-8"></div>
</div>
<div data-line="9" class="character-line">
<div class="char-line" id="line-9"></div>
</div>
<div data-line="10" class="character-line">
<div class="char-line" id="line-10"></div>
</div>
<div data-line="11" class="character-line">
<div class="char-line" id="line-11"></div>
</div>
<div data-line="12" class="character-line">
<div class="char-line" id="line-12"></div>
</div>
<div data-line="13" class="character-line">
<div class="char-line" id="line-13"></div>
</div>
<div data-line="14" class="character-line">
<div class="char-line" id="line-14"></div>
</div>
</div>
<div style="display:none;" id="list-character">
<!--new Snelen-->
<svg id="Snellen_D" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 1.5 M 1.5 0.5 C 4 0.5 4 4.5 1.5 4.5 H 0.5"
stroke="black" fill="none" stroke-width="1">
</path>
</svg>
<svg id="Snellen_E" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 4,0 4,1 1,1 1,2 3,2 3,3 1,3 1,4 4,4 4,5 0,5" fill="black" />
</svg>
<svg id="Snellen_F" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 4,0 4,1 1,1 1,2 3,2 3,3 1,3 1,5 0,5" fill="black" />
</svg>
<svg id="Snellen_H" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 1,0 1,2 3,2 3,0 4,0 4,5 3,5 3,3 1,3 1,5 0,5" fill="black" />
</svg>
<svg id="Snellen_N" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 1,0 3,3.1 3,0 4,0 4,5 3,5 1,1.9 1,5 0,5" fill="black" />
</svg>
<svg id="Snellen_P" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5"
stroke="black" fill="none" stroke-width="1">
</path>
</svg>
<svg id="Snellen_R" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="98.73mm" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5"
stroke="black" fill="none" stroke-width="1">
</path>
<polygon points="1.4,3 2.1,3 2.2,2.99 2.3,2.98 2.35,2.97 2.4,2.96 2.45,2.95 2.5,2.94 4,5 2.8,5" fill="black" />
</svg>
<svg id="Snellen_T" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 4,0 4,1 2.5,1 2.5,5 1.5,5 1.5,1 0,1" fill="black" />
</svg>
<svg id="Snellen_U" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="28.73mm" style="margin: 3.49mm;">
<path d="M 0.5 0 V 3 M 0.5 3 C 0.5 5 3.5 5 3.5 3 V 0"
stroke="black" fill="none" stroke-width="1">
</path>
</svg>
<svg id="Snellen_V" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 1.1,0 2,3.5 2.9,0 4,0 2.6,5 1.4,5" fill="black" />
</svg>
<svg id="Snellen_Z" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 4,0 4,1 1.4,4 4,4 4,5 0,5 0,4 2.6,1 0,1" fill="black" />
</svg>
<!--new Sloan-->
<svg id="Sloan_C" class="js-not-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<circle cx="2.5" cy="2.5" r="2.5" fill="black" class="js-color-fill" />
<circle cx="2.5" cy="2.5" r="1.5" fill="rgba(255,255,255,1.0)" />
<polygon points="5,2 5,3 3,3 3,2" fill="rgba(255,255,255,1.0)" />
</svg>
<svg id="Sloan_D" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 3.5 M 3.5 0.5 A 1 1 0 0 1 4.5 1.5 V 3.5 M 4.5 3.5 A 1 1 0 0 1 3.5 4.5 H 0.5"
stroke="black" fill="none" stroke-width="1">
</path>
</svg>
<svg id="Sloan_E" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 5,0 5,1 1,1 1,2 5,2 5,3 1,3 1,4 5,4 5,5 0,5" fill="black" />
</svg>
<svg id="Sloan_H" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 1,0 1,2 4,2 4,0 5,0 5,5 4,5 4,3 1,3 1,5 0,5" fill="black" />
</svg>
<svg id="Sloan_K" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 1,0 1,1.9 3.4,0 5,0 2.7,1.8 5,5 3.7,5 1.9,2.5 1,3.2 1,5 0,5" fill="black" />
</svg>
<svg id="Sloan_N" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,5 0,0 1,0 4,3.5 4,0 5,0 5,5 4,5 1,1.6 1,5" fill="black" />
</svg>
<svg id="Sloan_O" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<circle class="js-color-fill" cx="2.5" cy="2.5" r="2.5" fill="black" />
<circle cx="2.5" cy="2.5" r="1.5" fill="rgba(255,255,255,1.0)" />
</svg>
<svg id="Sloan_R" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="68.73mm" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 3.5 M 3.5 0.5 A 1 1 0 0 1 4.5 1.5 M 4.5 1.5 A 1 1 0 0 1 3.5 2.5 H 0.5"
stroke="black" fill="none" stroke-width="1">
</path>
<polygon points="2.2,3 3.7,5 5,5 3.5,3" fill="black" />
</svg>
<svg id="Sloan_S" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<path d="M 4.5 1.5 A 1 1 0 0 0 3.5 0.5 H 1.5 A 1 1 0 0 0 1.5 2.5 H 3.5 A 1 1 0 0 1 3.5 4.5 H 1.5 A 1 1 0 0 1 0.5 3.5"
stroke="black" fill="none" stroke-width="1">
</path>
</svg>
<svg id="Sloan_V" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 1.1,0 2.5,3.5 3.9,0 5,0 3,5 2,5" fill="black" />
</svg>
<svg id="Sloan_Z" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 5,0 5,1 1.6,4 5,4 5,5 0,5 0,4 3.4,1 0,1" fill="black" />
</svg>
<!--LandoltC-->
<svg id="LandoltC_N" class="js-not-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<circle cx="2.5" cy="2.5" r="2.5" fill="black" class="js-color-fill" />
<circle cx="2.5" cy="2.5" r="1.5" fill="rgba(255,255,255,1.0)" />
<polygon points="2,0 3,0 3,3 2,3" fill="rgba(255,255,255,1.0)" />
</svg>
<svg id="LandoltC_E" class="js-not-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<circle cx="2.5" cy="2.5" r="2.5" fill="black" class="js-color-fill" />
<circle cx="2.5" cy="2.5" r="1.5" fill="rgba(255,255,255,1.0)" />
<polygon points="5,2 5,3 3,3 3,2" fill="rgba(255,255,255,1.0)" />
</svg>
<svg id="LandoltC_S" class="js-not-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<circle cx="2.5" cy="2.5" r="2.5" fill="black" class="js-color-fill" />
<circle cx="2.5" cy="2.5" r="1.5" fill="rgba(255,255,255,1.0)" />
<polygon points="2,5 3,5 3,3 2,3" fill="rgba(255,255,255,1.0)" />
</svg>
<svg id="LandoltC_W" class="js-not-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<circle cx="2.5" cy="2.5" r="2.5" fill="black" class="js-color-fill" />
<circle cx="2.5" cy="2.5" r="1.5" fill="rgba(255,255,255,1.0)" />
<polygon points="0,2 0,3 3,3 3,2" fill="rgba(255,255,255,1.0)" />
</svg>
<!--TumblingE-->
<svg id="TumblingE_N" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 1,0 1,4 2,4 2,0 3,0 3,4 4,4 4,0 5,0 5,5 0,5" fill="black" />
</svg>
<svg id="TumblingE_E" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 5,0 5,1 1,1 1,2 5,2 5,3 1,3 1,4 5,4 5,5 0,5" fill="black" />
</svg>
<svg id="TumblingE_S" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 5,0 5,5 4,5 4,1 3,1 3,5 2,5 2,1 1,1 1,5 0,5" fill="black" />
</svg>
<svg id="TumblingE_W" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,5,5" height="8.73mm" style="margin: 3.49mm;">
<polygon points="0,0 5,0 5,5 0,5 0,4 4,4 4,3 0,3 0,2 4,2 4,1 0,1" fill="black" />
</svg>
</div>
<!--end setting bar-->
<div class="mask"></div>
<div class="IENotice">
<div class="modal">Our browser is not supported. You can download the latest version <a href="https://www.microsoft.com/en-us/download/internet-explorer.aspx">here </a></div>
</div>
<script type="text/javascript">
/*! jQuery v3.1.1 | (c) jQuery Foundation | jquery.org/license */
!function (a, b) { "use strict"; "object" == typeof module && "object" == typeof module.exports ? module.exports = a.document ? b(a, !0) : function (a) { if (!a.document) throw new Error("jQuery requires a window with a document"); return b(a) } : b(a) }("undefined" != typeof window ? window : this, function (a, b) {
"use strict"; var c = [], d = a.document, e = Object.getPrototypeOf, f = c.slice, g = c.concat, h = c.push, i = c.indexOf, j = {}, k = j.toString, l = j.hasOwnProperty, m = l.toString, n = m.call(Object), o = {}; function p(a, b) { b = b || d; var c = b.createElement("script"); c.text = a, b.head.appendChild(c).parentNode.removeChild(c) } var q = "3.1.1", r = function (a, b) { return new r.fn.init(a, b) }, s = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, t = /^-ms-/, u = /-([a-z])/g, v = function (a, b) { return b.toUpperCase() }; r.fn = r.prototype = { jquery: q, constructor: r, length: 0, toArray: function () { return f.call(this) }, get: function (a) { return null == a ? f.call(this) : a < 0 ? this[a + this.length] : this[a] }, pushStack: function (a) { var b = r.merge(this.constructor(), a); return b.prevObject = this, b }, each: function (a) { return r.each(this, a) }, map: function (a) { return this.pushStack(r.map(this, function (b, c) { return a.call(b, c, b) })) }, slice: function () { return this.pushStack(f.apply(this, arguments)) }, first: function () { return this.eq(0) }, last: function () { return this.eq(-1) }, eq: function (a) { var b = this.length, c = +a + (a < 0 ? b : 0); return this.pushStack(c >= 0 && c < b ? [this[c]] : []) }, end: function () { return this.prevObject || this.constructor() }, push: h, sort: c.sort, splice: c.splice }, r.extend = r.fn.extend = function () { var a, b, c, d, e, f, g = arguments[0] || {}, h = 1, i = arguments.length, j = !1; for ("boolean" == typeof g && (j = g, g = arguments[h] || {}, h++), "object" == typeof g || r.isFunction(g) || (g = {}), h === i && (g = this, h--) ; h < i; h++) if (null != (a = arguments[h])) for (b in a) c = g[b], d = a[b], g !== d && (j && d && (r.isPlainObject(d) || (e = r.isArray(d))) ? (e ? (e = !1, f = c && r.isArray(c) ? c : []) : f = c && r.isPlainObject(c) ? c : {}, g[b] = r.extend(j, f, d)) : void 0 !== d && (g[b] = d)); return g }, r.extend({ expando: "jQuery" + (q + Math.random()).replace(/\D/g, ""), isReady: !0, error: function (a) { throw new Error(a) }, noop: function () { }, isFunction: function (a) { return "function" === r.type(a) }, isArray: Array.isArray, isWindow: function (a) { return null != a && a === a.window }, isNumeric: function (a) { var b = r.type(a); return ("number" === b || "string" === b) && !isNaN(a - parseFloat(a)) }, isPlainObject: function (a) { var b, c; return !(!a || "[object Object]" !== k.call(a)) && (!(b = e(a)) || (c = l.call(b, "constructor") && b.constructor, "function" == typeof c && m.call(c) === n)) }, isEmptyObject: function (a) { var b; for (b in a) return !1; return !0 }, type: function (a) { return null == a ? a + "" : "object" == typeof a || "function" == typeof a ? j[k.call(a)] || "object" : typeof a }, globalEval: function (a) { p(a) }, camelCase: function (a) { return a.replace(t, "ms-").replace(u, v) }, nodeName: function (a, b) { return a.nodeName && a.nodeName.toLowerCase() === b.toLowerCase() }, each: function (a, b) { var c, d = 0; if (w(a)) { for (c = a.length; d < c; d++) if (b.call(a[d], d, a[d]) === !1) break } else for (d in a) if (b.call(a[d], d, a[d]) === !1) break; return a }, trim: function (a) { return null == a ? "" : (a + "").replace(s, "") }, makeArray: function (a, b) { var c = b || []; return null != a && (w(Object(a)) ? r.merge(c, "string" == typeof a ? [a] : a) : h.call(c, a)), c }, inArray: function (a, b, c) { return null == b ? -1 : i.call(b, a, c) }, merge: function (a, b) { for (var c = +b.length, d = 0, e = a.length; d < c; d++) a[e++] = b[d]; return a.length = e, a }, grep: function (a, b, c) { for (var d, e = [], f = 0, g = a.length, h = !c; f < g; f++) d = !b(a[f], f), d !== h && e.push(a[f]); return e }, map: function (a, b, c) { var d, e, f = 0, h = []; if (w(a)) for (d = a.length; f < d; f++) e = b(a[f], f, c), null != e && h.push(e); else for (f in a) e = b(a[f], f, c), null != e && h.push(e); return g.apply([], h) }, guid: 1, proxy: function (a, b) { var c, d, e; if ("string" == typeof b && (c = a[b], b = a, a = c), r.isFunction(a)) return d = f.ca
d.removeEventListener("DOMContentLoaded", R),
a.removeEventListener("load", R), r.ready()
} "complete" === d.readyState || "loading" !== d.readyState && !d.documentElement.doScroll ? a.setTimeout(r.ready) : (d.addEventListener("DOMContentLoaded", R), a.addEventListener("load", R)); var S = function (a, b, c, d, e, f, g) { var h = 0, i = a.length, j = null == c; if ("object" === r.type(c)) { e = !0; for (h in c) S(a, b, h, c[h], !0, f, g) } else if (void 0 !== d && (e = !0, r.isFunction(d) || (g = !0), j && (g ? (b.call(a, d), b = null) : (j = b, b = function (a, b, c) { return j.call(r(a), c) })), b)) for (; h < i; h++) b(a[h], c, g ? d : d.call(a[h], h, b(a[h], c))); return e ? a : j ? b.call(a) : i ? b(a[0], c) : f }, T = function (a) { return 1 === a.nodeType || 9 === a.nodeType || !+a.nodeType }; function U() { this.expando = r.expando + U.uid++ } U.uid = 1, U.prototype = { cache: function (a) { var b = a[this.expando]; return b || (b = {}, T(a) && (a.nodeType ? a[this.expando] = b : Object.defineProperty(a, this.expando, { value: b, configurable: !0 }))), b }, set: function (a, b, c) { var d, e = this.cache(a); if ("string" == typeof b) e[r.camelCase(b)] = c; else for (d in b) e[r.camelCase(d)] = b[d]; return e }, get: function (a, b) { return void 0 === b ? this.cache(a) : a[this.expando] && a[this.expando][r.camelCase(b)] }, access: function (a, b, c) { return void 0 === b || b && "string" == typeof b && void 0 === c ? this.get(a, b) : (this.set(a, b, c), void 0 !== c ? c : b) }, remove: function (a, b) { var c, d = a[this.expando]; if (void 0 !== d) { if (void 0 !== b) { r.isArray(b) ? b = b.map(r.camelCase) : (b = r.camelCase(b), b = b in d ? [b] : b.match(K) || []), c = b.length; while (c--) delete d[b[c]] } (void 0 === b || r.isEmptyObject(d)) && (a.nodeType ? a[this.expando] = void 0 : delete a[this.expando]) } }, hasData: function (a) { var b = a[this.expando]; return void 0 !== b && !r.isEmptyObject(b) } }; var V = new U, W = new U, X = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/, Y = /[A-Z]/g; function Z(a) { return "true" === a || "false" !== a && ("null" === a ? null : a === +a + "" ? +a : X.test(a) ? JSON.parse(a) : a) } function $(a, b, c) { var d; if (void 0 === c && 1 === a.nodeType) if (d = "data-" + b.replace(Y, "-$&").toLowerCase(), c = a.getAttribute(d), "string" == typeof c) { try { c = Z(c) } catch (e) { } W.set(a, b, c) } else c = void 0; return c } r.extend({ hasData: function (a) { return W.hasData(a) || V.hasData(a) }, data: function (a, b, c) { return W.access(a, b, c) }, removeData: function (a, b) { W.remove(a, b) }, _data: function (a, b, c) { return V.access(a, b, c) }, _removeData: function (a, b) { V.remove(a, b) } }), r.fn.extend({ data: function (a, b) { var c, d, e, f = this[0], g = f && f.attributes; if (void 0 === a) { if (this.length && (e = W.get(f), 1 === f.nodeType && !V.get(f, "hasDataAttrs"))) { c = g.length; while (c--) g[c] && (d = g[c].name, 0 === d.indexOf("data-") && (d = r.camelCase(d.slice(5)), $(f, d, e[d]))); V.set(f, "hasDataAttrs", !0) } return e } return "object" == typeof a ? this.each(function () { W.set(this, a) }) : S(this, function (b) { var c; if (f && void 0 === b) { if (c = W.get(f, a), void 0 !== c) return c; if (c = $(f, a), void 0 !== c) return c } else this.each(function () { W.set(this, a, b) }) }, null, b, arguments.length > 1, null, !0) }, removeData: function (a) { return this.each(function () { W.remove(this, a) }) } }), r.extend({ queue: function (a, b, c) { var d; if (a) return b = (b || "fx") + "queue", d = V.get(a, b), c && (!d || r.isArray(c) ? d = V.access(a, b, r.makeArray(c)) : d.push(c)), d || [] }, dequeue: function (a, b) { b = b || "fx"; var c = r.queue(a, b), d = c.length, e = c.shift(), f = r._queueHooks(a, b), g = function () { r.dequeue(a, b) }; "inprogress" === e && (e = c.shift(), d--), e && ("fx" === b && c.unshift("inprogress"), delete f.stop, e.call(a, g, f)), !d && f && f.empty.fire() }, _queueHooks: function (a, b) { var c = b + "queueHooks"; return V.get(a, c) || V.access(a, c, { empty: r.Callbacks("once memory").add(function () { V.remove(a, [b + "queue", c]) }) }) } }), r.fn.extend({ queue: function (a, b)
attr: function (a, b, c) {
var d, e, f = a.nodeType; if (3 !== f && 8 !== f && 2 !== f) return "undefined" == typeof a.getAttribute ? r.prop(a, b, c) : (1 === f && r.isXMLDoc(a) || (e = r.attrHooks[b.toLowerCase()] || (r.expr.match.bool.test(b) ? ib : void 0)),
void 0 !== c ? null === c ? void r.removeAttr(a, b) : e && "set" in e && void 0 !== (d = e.set(a, c, b)) ? d : (a.setAttribute(b, c + ""), c) : e && "get" in e && null !== (d = e.get(a, b)) ? d : (d = r.find.attr(a, b), null == d ? void 0 : d))
}, attrHooks: { type: { set: function (a, b) { if (!o.radioValue && "radio" === b && r.nodeName(a, "input")) { var c = a.value; return a.setAttribute("type", b), c && (a.value = c), b } } } }, removeAttr: function (a, b) { var c, d = 0, e = b && b.match(K); if (e && 1 === a.nodeType) while (c = e[d++]) a.removeAttribute(c) }
}), ib = { set: function (a, b, c) { return b === !1 ? r.removeAttr(a, c) : a.setAttribute(c, c), c } }, r.each(r.expr.match.bool.source.match(/\w+/g), function (a, b) { var c = jb[b] || r.find.attr; jb[b] = function (a, b, d) { var e, f, g = b.toLowerCase(); return d || (f = jb[g], jb[g] = e, e = null != c(a, b, d) ? g : null, jb[g] = f), e } }); var kb = /^(?:input|select|textarea|button)$/i, lb = /^(?:a|area)$/i; r.fn.extend({ prop: function (a, b) { return S(this, r.prop, a, b, arguments.length > 1) }, removeProp: function (a) { return this.each(function () { delete this[r.propFix[a] || a] }) } }), r.extend({ prop: function (a, b, c) { var d, e, f = a.nodeType; if (3 !== f && 8 !== f && 2 !== f) return 1 === f && r.isXMLDoc(a) || (b = r.propFix[b] || b, e = r.propHooks[b]), void 0 !== c ? e && "set" in e && void 0 !== (d = e.set(a, c, b)) ? d : a[b] = c : e && "get" in e && null !== (d = e.get(a, b)) ? d : a[b] }, propHooks: { tabIndex: { get: function (a) { var b = r.find.attr(a, "tabindex"); return b ? parseInt(b, 10) : kb.test(a.nodeName) || lb.test(a.nodeName) && a.href ? 0 : -1 } } }, propFix: { "for": "htmlFor", "class": "className" } }), o.optSelected || (r.propHooks.selected = { get: function (a) { var b = a.parentNode; return b && b.parentNode && b.parentNode.selectedIndex, null }, set: function (a) { var b = a.parentNode; b && (b.selectedIndex, b.parentNode && b.parentNode.selectedIndex) } }), r.each(["tabIndex", "readOnly", "maxLength", "cellSpacing", "cellPadding", "rowSpan", "colSpan", "useMap", "frameBorder", "contentEditable"], function () { r.propFix[this.toLowerCase()] = this }); function mb(a) { var b = a.match(K) || []; return b.join(" ") } function nb(a) { return a.getAttribute && a.getAttribute("class") || "" } r.fn.extend({ addClass: function (a) { var b, c, d, e, f, g, h, i = 0; if (r.isFunction(a)) return this.each(function (b) { r(this).addClass(a.call(this, b, nb(this))) }); if ("string" == typeof a && a) { b = a.match(K) || []; while (c = this[i++]) if (e = nb(c), d = 1 === c.nodeType && " " + mb(e) + " ") { g = 0; while (f = b[g++]) d.indexOf(" " + f + " ") < 0 && (d += f + " "); h = mb(d), e !== h && c.setAttribute("class", h) } } return this }, removeClass: function (a) { var b, c, d, e, f, g, h, i = 0; if (r.isFunction(a)) return this.each(function (b) { r(this).removeClass(a.call(this, b, nb(this))) }); if (!arguments.length) return this.attr("class", ""); if ("string" == typeof a && a) { b = a.match(K) || []; while (c = this[i++]) if (e = nb(c), d = 1 === c.nodeType && " " + mb(e) + " ") { g = 0; while (f = b[g++]) while (d.indexOf(" " + f + " ") > -1) d = d.replace(" " + f + " ", " "); h = mb(d), e !== h && c.setAttribute("class", h) } } return this }, toggleClass: function (a, b) { var c = typeof a; return "boolean" == typeof b && "string" === c ? b ? this.addClass(a) : this.removeClass(a) : r.isFunction(a) ? this.each(function (c) { r(this).toggleClass(a.call(this, c, nb(this), b), b) }) : this.each(function () { var b, d, e, f; if ("string" === c) { d = 0, e = r(this), f = a.match(K) || []; while (b = f[d++]) e.hasClass(b) ? e.removeClass(b) : e.addClass(b) } else void 0 !== a && "boolean" !== c || (b = nb(this), b && V.set(this, "__className__", b), this.setAttribute && this.setAttribute("class", b || a === !1 ? "" : V.get(this, "__className__") || "")) }) }, hasClass: function (a) { var b, c, d = 0; b = " " + a + " "; while (c = this[d++]) if (1 === c.nodeType && (" " + mb(nb(c)) + " ").indexOf(b) > -1) return !0; return !1 } }); var ob = /\r/g; r.fn.extend({ val: function (a) { var b, c, d, e = this[0]; { if (arguments.length) return d = r.isFunction(a), this.each(function (c) { var e; 1 === this.nodeType && (e = d ? a.call(this, c, r(this).val()) : a, null == e ? e = "" : "number" == typeof e ? e += "" : r.isArray(e) && (e = r.map(e, function (a) { return null == a ? "" : a + "" })), b = r.valHooks[this.type] || r.valHooks[this.nodeName.toLowerCase()], b && "set" in b && void 0 !== b.set(this, e, "value") || (this.value = e)) }); if (e) return b = r.valHooks[e.typ
});
jQuery.fn.reverse = function () {
return this.pushStack(this.get().reverse(), arguments);
};
/*!
* Bootstrap Colorpicker v2.4.0
* https://itsjavi.com/bootstrap-colorpicker/
*/
!function (a) { var b = "undefined" == typeof window ? this : window; "object" == typeof exports ? module.exports = a(b.jQuery, b) : "function" == typeof define && define.amd ? define(["jquery"], function (c) { return a(c, b) }) : b.jQuery && !b.jQuery.fn.colorpicker && a(b.jQuery, b) }(function (a, b) { "use strict"; var c = a, d = function (a, b, e, f) { this.fallbackValue = e ? e && "undefined" != typeof e.h ? e : this.value = { h: 0, s: 0, b: 0, a: 1 } : null, this.fallbackFormat = f ? f : "rgba", this.value = this.fallbackValue, this.origFormat = null, this.predefinedColors = b ? b : {}, this.colors = c.extend({}, d.webColors, this.predefinedColors), a && ("undefined" != typeof a.h ? this.value = a : this.setColor(String(a))), this.value || (this.value = { h: 0, s: 0, b: 0, a: 1 }) }; d.webColors = { aliceblue: "#f0f8ff", antiquewhite: "#faebd7", aqua: "#00ffff", aquamarine: "#7fffd4", azure: "#f0ffff", beige: "#f5f5dc", bisque: "#ffe4c4", black: "#000000", blanchedalmond: "#ffebcd", blue: "#0000ff", blueviolet: "#8a2be2", brown: "#a52a2a", burlywood: "#deb887", cadetblue: "#5f9ea0", chartreuse: "#7fff00", chocolate: "#d2691e", coral: "#ff7f50", cornflowerblue: "#6495ed", cornsilk: "#fff8dc", crimson: "#dc143c", cyan: "#00ffff", darkblue: "#00008b", darkcyan: "#008b8b", darkgoldenrod: "#b8860b", darkgray: "#a9a9a9", darkgreen: "#006400", darkkhaki: "#bdb76b", darkmagenta: "#8b008b", darkolivegreen: "#556b2f", darkorange: "#ff8c00", darkorchid: "#9932cc", darkred: "#8b0000", darksalmon: "#e9967a", darkseagreen: "#8fbc8f", darkslateblue: "#483d8b", darkslategray: "#2f4f4f", darkturquoise: "#00ced1", darkviolet: "#9400d3", deeppink: "#ff1493", deepskyblue: "#00bfff", dimgray: "#696969", dodgerblue: "#1e90ff", firebrick: "#b22222", floralwhite: "#fffaf0", forestgreen: "#228b22", fuchsia: "#ff00ff", gainsboro: "#dcdcdc", ghostwhite: "#f8f8ff", gold: "#ffd700", goldenrod: "#daa520", gray: "#808080", green: "#008000", greenyellow: "#adff2f", honeydew: "#f0fff0", hotpink: "#ff69b4", indianred: "#cd5c5c", indigo: "#4b0082", ivory: "#fffff0", khaki: "#f0e68c", lavender: "#e6e6fa", lavenderblush: "#fff0f5", lawngreen: "#7cfc00", lemonchiffon: "#fffacd", lightblue: "#add8e6", lightcoral: "#f08080", lightcyan: "#e0ffff", lightgoldenrodyellow: "#fafad2", lightgrey: "#d3d3d3", lightgreen: "#90ee90", lightpink: "#ffb6c1", lightsalmon: "#ffa07a", lightseagreen: "#20b2aa", lightskyblue: "#87cefa", lightslategray: "#778899", lightsteelblue: "#b0c4de", lightyellow: "#ffffe0", lime: "#00ff00", limegreen: "#32cd32", linen: "#faf0e6", magenta: "#ff00ff", maroon: "#800000", mediumaquamarine: "#66cdaa", mediumblue: "#0000cd", mediumorchid: "#ba55d3", mediumpurple: "#9370d8", mediumseagreen: "#3cb371", mediumslateblue: "#7b68ee", mediumspringgreen: "#00fa9a", mediumturquoise: "#48d1cc", mediumvioletred: "#c71585", midnightblue: "#191970", mintcream: "#f5fffa", mistyrose: "#ffe4e1", moccasin: "#ffe4b5", navajowhite: "#ffdead", navy: "#000080", oldlace: "#fdf5e6", olive: "#808000", olivedrab: "#6b8e23", orange: "#ffa500", orangered: "#ff4500", orchid: "#da70d6", palegoldenrod: "#eee8aa", palegreen: "#98fb98", paleturquoise: "#afeeee", palevioletred: "#d87093", papayawhip: "#ffefd5", peachpuff: "#ffdab9", peru: "#cd853f", pink: "#ffc0cb", plum: "#dda0dd", powderblue: "#b0e0e6", purple: "#800080", red: "#ff0000", rosybrown: "#bc8f8f", royalblue: "#4169e1", saddlebrown: "#8b4513", salmon: "#fa8072", sandybrown: "#f4a460", seagreen: "#2e8b57", seashell: "#fff5ee", sienna: "#a0522d", silver: "#c0c0c0", skyblue: "#87ceeb", slateblue: "#6a5acd", slategray: "#708090", snow: "#fffafa", springgreen: "#00ff7f", steelblue: "#4682b4", tan: "#d2b48c", teal: "#008080", thistle: "#d8bfd8", tomato: "#ff6347", turquoise: "#40e0d0", violet: "#ee82ee", wheat: "#f5deb3", white: "#ffffff", whitesmoke: "#f5f5f5", yellow: "#ffff00", yellowgreen: "#9acd32", transparent: "transparent" }, d.prototype = { constructor: d, colors: {}, predefinedColors: {}, getValue: function () { return this.value }, setValue: function (a) { this.value = a }, _sanitizeNumber: func
//main js
function configBarSetting() {
this.siderbar = function () {
$('.setting-button').on('click', function (e) {
e.preventDefault();
var target = $(this).attr('href');
$(target).addClass('active');
$('body').append('<div class="modal-setting"></div>')
});
$('.close').on('click', function (e) {
e.preventDefault();
$('.setting-bar').removeClass('active');
$('.guide-section').removeClass('active');
$('.mask').removeClass('active');
$('.modal-setting').remove();
});
$('.questions-btn').on('click', function (e) {
e.preventDefault();
$('.guide-section').addClass('active');
$('.mask').addClass('active');
});
$('.close-guide').on('click', function (e) {
e.preventDefault();
$('.guide-section').removeClass('active');
$('.mask').removeClass('active');
});
$('body').on('click', function (e) {
});
$(document).on('click', '.modal-setting', function () {
$('.setting-bar').removeClass('active');
$('.guide-section').removeClass('active');
$('.mask').removeClass('active');
$('.modal-setting').remove();
});
};
this.accodion = function () {
// panel title click
$('.panel-heading').on('click', function (e) {
e.preventDefault();
var target = $(this).next();
if (!$(target).is(":visible")) {
$('.panel-heading').removeClass('active');
$(this).toggleClass('active');
$('.panel-collapse').slideUp();
$(target).slideDown();
}
});
// question icon click
$('.questions-btn').on('click', function (e) {
e.preventDefault();
var target = $(this).attr('href');
var content = $(target).next();
if (!$(content).is(":visible")) {
$('.panel-heading').removeClass('active');
$('.panel-collapse').slideUp();
$(target).addClass('active');
$(content).slideDown();
}
});
};
this.init = function () {
this.siderbar();
this.accodion();
}
};
function ConfigWolfChart() {
var chartArray = [], notation, viewWidth, viewHight, numeratorType, oldCharacter = [];
this.SelectOptotype = function () {
$('#sOptotype').on('change', function () {
var optotype = $(this).val();
$('#sAlphabet').html('');
switch (optotype) {
case '1':
$('#sAlphabet').append('<option value="2">BS4274.3</option><option value="1">SnellenU</option>')
break;
case '2':
$('#sAlphabet').append('<option value="3">ETDRS</option><option value="4">SloanU</option>');
break;
case '3':
$('#sAlphabet').append('<option value="5">Landolt C</option>');
break;
case '4':
$('#sAlphabet').append('<option value="6">Tumbling E</option>');
break;
}
});
};
this.ColorPicker = function () {
$('#colorBox').on('change', function () {
$(this).prev().css('background', 'rgb(' + $(this).val() + ')');
});
};
this.SetColorCharacter = function (colorHex) {
$('#list-character').find('svg').find('path').css('stroke', colorHex);
$('#list-character').find('svg').not('.js-not-fill').find('polygon').css('fill', colorHex);
$('#list-character').find('svg').find('.js-color-fill').css('fill', colorHex);
};
this.SetHeightCharacter = function (distance) {
var pageArray = []; //array of rows on a page
var cumHt = 0; //cumulative height of rows on a page
var lolb = $('#iLengOfLine').val();//get length of line below
var countArr = -1;
for (d = 0; d < chartArray.length; d++) {
countArr++;
var letterSubtense = chartArray[d][0] * 5; //all letters 5 limbs high
var degrees = letterSubtense / 60;
var radians = degrees * (Math.PI / 180);
var tanNumber = (Math.tan(radians));
var minCharacter = tanNumber * distance * (120 / lolb); // 120 because the line is 120 mm
chartArray[d].push(minCharacter);
//console.log(chartArray);
};
};
this.CaculatorCharacterHeight = function (numeratorType) {
var setHeightFunction = this;
var dist = $('#iDistance').val();
switch (notation) {
case "1"://metter
var ar = [0.5, 0.63, 0.79, 1, 1.26, 1.58, 2, 2.51, 3.16, 3.98, 5.01, 6.31, 7.94, 10];
//always input mm
if (numeratorType == "2") {
var scoreDisplay = ['6/3', '6/3.8', '6/4.8', '6/6', '6/7.5', '6/9.5', '6/12', '6/15', '6/19', '6/24', '6/30', '6/38', '6/48', '6/60'];
for (a = 0; a < ar.length; a++) {
chartArray[a] = [ar[a], scoreDisplay[a]];
}
}
else {
var numerator = Math.round(dist / 100) / 10;
for (a = 0; a < ar.length; a++) {
var score = Math.round(ar[a] * numerator * 10) / 10;
var str = numerator + "/" + score,
score = score / numerator;
chartArray[a] = [ar[a], str];
}
}
break;
case "2"://feet
var ar = [0.5, 0.63, 0.79, 1, 1.26, 1.58, 2, 2.51, 3.16, 3.98, 5.01, 6.31, 7.94, 10];
if (numeratorType == "2") {
var scoreDisplay = ['20/10', '20/12.5', '20/16', '20/20', '20/25', '20/32', '20/40', '20/50', '20/63', '20/80', '20/100', '20/125', '20/160', '20/200'];
for (a = 0; a < ar.length; a++) {
chartArray[a] = [ar[a], scoreDisplay[a]];
}
}
else {
var numerator = Math.round(dist / 100) / 10;
for (a = 0; a < ar.length; a++) {
var score = Math.round(ar[a] * numerator * 10) / 10;
var str = numerator + "/" + score,
score = score / numerator;
chartArray[a] = [ar[a], str];
}
}
break;
case "3"://logMar
var ar = [0.5, 0.63, 0.79, 1, 1.26, 1.58, 2, 2.51, 3.16, 3.98, 5.01, 6.31, 7.94, 10];
var scoreDisplay = ['-0.3', '-0.2', '-0.1', '0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1'];
for (a = 0; a < ar.length; a++) {
chartArray[a] = [ar[a], scoreDisplay[a]];
}
break;
case "4"://Decimal
var ar = [0.5, 0.63, 0.79, 1, 1.26, 1.58, 2, 2.51, 3.16, 3.98, 5.01, 6.31, 7.94, 10];
var scoreDisplay = ['2', '1.6', '1.25', '1', '0.8', '0.63', '0.5', '0.4', '0.32', '0.25', '0.2', '0.16', '0.125', '0.1'];
for (a = 0; a < ar.length; a++) {
chartArray[a] = [ar[a], scoreDisplay[a]];
}
break;
}
//console.log(chartArray);
//set height for character
setHeightFunction.SetHeightCharacter(dist)
};
this.GenerateCharacter = function (alphabetType) {
var arrayCharacter = [],
convertFunction = this;
switch (alphabetType) {
//set character for each type
case '1':
arrayCharacter = ['Snellen_E,Snellen_H,Snellen_V,Snellen_D,Snellen_F', 'Snellen_U,Snellen_R,Snellen_Z,Snellen_V,Snellen_H', 'Snellen_D,Snellen_P,Snellen_N,Snellen_F,Snellen_R', 'Snellen_V,Snellen_U,Snellen_F,Snellen_R,Snellen_D', 'Snellen_E,Snellen_Z,Snellen_H,Snellen_P,Snellen_V', 'Snellen_H,Snellen_N,Snellen_D,Snellen_R,Snellen_U', 'Snellen_V,Snellen_P,Snellen_H,Snellen_D,Snellen_E', 'Snellen_P,Snellen_V,Snellen_E,Snellen_H,Snellen_R', 'Snellen_N,Snellen_U,Snellen_Z,Snellen_F,Snellen_E', 'Snellen_E,Snellen_H,Snellen_V,Snellen_D,Snellen_F', 'Snellen_U,Snellen_R,Snellen_Z,Snellen_V,Snellen_H', 'Snellen_D,Snellen_P,Snellen_N,Snellen_F,Snellen_R', 'Snellen_V,Snellen_U,Snellen_F,Snellen_R,Snellen_D', 'Snellen_E,Snellen_Z,Snellen_H,Snellen_P,Snellen_V']
break;
case '2':
arrayCharacter = ['Snellen_E,Snellen_H,Snellen_V,Snellen_D,Snellen_F', 'Snellen_U,Snellen_R,Snellen_Z,Snellen_V,Snellen_H', 'Snellen_D,Snellen_P,Snellen_N,Snellen_F,Snellen_R', 'Snellen_V,Snellen_U,Snellen_F,Snellen_R,Snellen_D', 'Snellen_E,Snellen_Z,Snellen_H,Snellen_P,Snellen_V', 'Snellen_H,Snellen_N,Snellen_D,Snellen_R,Snellen_U', 'Snellen_V,Snellen_P,Snellen_H,Snellen_D,Snellen_E', 'Snellen_P,Snellen_V,Snellen_E,Snellen_H,Snellen_R', 'Snellen_N,Snellen_U,Snellen_Z,Snellen_F,Snellen_E', 'Snellen_E,Snellen_H,Snellen_V,Snellen_D,Snellen_F', 'Snellen_U,Snellen_R,Snellen_Z,Snellen_V,Snellen_H', 'Snellen_D,Snellen_P,Snellen_N,Snellen_F,Snellen_R', 'Snellen_V,Snellen_U,Snellen_F,Snellen_R,Snellen_D', 'Snellen_E,Snellen_Z,Snellen_H,Snellen_P,Snellen_V']
break;
case '3':
arrayCharacter = ['Sloan_H,Sloan_C,Sloan_Z,Sloan_S,Sloan_V', 'Sloan_C,Sloan_N,Sloan_D,Sloan_Z,Sloan_K', 'Sloan_V,Sloan_O,Sloan_K,Sloan_R,Sloan_N', 'Sloan_R,Sloan_H,Sloan_K,Sloan_N,Sloan_S', 'Sloan_D,Sloan_V,Sloan_O,Sloan_Z,Sloan_C', 'Sloan_H,Sloan_V,Sloan_C,Sloan_R,Sloan_K', 'Sloan_R,Sloan_O,Sloan_D,Sloan_S,Sloan_N', 'Sloan_H,Sloan_D,Sloan_V,Sloan_K,Sloan_C', 'Sloan_V,Sloan_R,Sloan_S,Sloan_O,Sloan_Z', 'Sloan_H,Sloan_C,Sloan_Z,Sloan_S,Sloan_V', 'Sloan_C,Sloan_N,Sloan_D,Sloan_Z,Sloan_K', 'Sloan_V,Sloan_O,Sloan_K,Sloan_R,Sloan_N', 'Sloan_R,Sloan_H,Sloan_K,Sloan_N,Sloan_S', 'Sloan_D,Sloan_V,Sloan_O,Sloan_Z,Sloan_C']
break;
case '4':
arrayCharacter = ['Sloan_H,Sloan_C,Sloan_Z,Sloan_S,Sloan_V', 'Sloan_C,Sloan_N,Sloan_D,Sloan_Z,Sloan_K', 'Sloan_V,Sloan_O,Sloan_K,Sloan_R,Sloan_N', 'Sloan_R,Sloan_H,Sloan_K,Sloan_N,Sloan_S', 'Sloan_D,Sloan_V,Sloan_O,Sloan_Z,Sloan_C', 'Sloan_H,Sloan_V,Sloan_C,Sloan_R,Sloan_K', 'Sloan_R,Sloan_O,Sloan_D,Sloan_S,Sloan_N', 'Sloan_H,Sloan_D,Sloan_V,Sloan_K,Sloan_C', 'Sloan_V,Sloan_R,Sloan_S,Sloan_O,Sloan_Z', 'Sloan_H,Sloan_C,Sloan_Z,Sloan_S,Sloan_V', 'Sloan_C,Sloan_N,Sloan_D,Sloan_Z,Sloan_K', 'Sloan_V,Sloan_O,Sloan_K,Sloan_R,Sloan_N', 'Sloan_R,Sloan_H,Sloan_K,Sloan_N,Sloan_S', 'Sloan_D,Sloan_V,Sloan_O,Sloan_Z,Sloan_C']
break;
case '5':
arrayCharacter = ['LandoltC_N,LandoltC_S,LandoltC_E,LandoltC_N,LandoltC_W', 'LandoltC_E,LandoltC_E,LandoltC_N,LandoltC_W,LandoltC_S', 'LandoltC_E,LandoltC_S,LandoltC_S,LandoltC_W,LandoltC_N', 'LandoltC_N,LandoltC_W,LandoltC_N,LandoltC_S,LandoltC_E', 'LandoltC_S,LandoltC_W,LandoltC_N,LandoltC_W,LandoltC_E', 'LandoltC_W,LandoltC_E,LandoltC_S,LandoltC_N,LandoltC_S', 'LandoltC_W,LandoltC_N,LandoltC_E,LandoltC_S,LandoltC_W', 'LandoltC_S,LandoltC_N,LandoltC_N,LandoltC_W,LandoltC_E', 'LandoltC_N,LandoltC_E,LandoltC_S,LandoltC_W,LandoltC_W', 'LandoltC_N,LandoltC_S,LandoltC_E,LandoltC_N,LandoltC_W', 'LandoltC_E,LandoltC_E,LandoltC_N,LandoltC_W,LandoltC_S', 'LandoltC_E,LandoltC_S,LandoltC_S,LandoltC_W,LandoltC_N', 'LandoltC_N,LandoltC_W,LandoltC_N,LandoltC_S,LandoltC_E', 'LandoltC_S,LandoltC_W,LandoltC_N,LandoltC_W,LandoltC_E']
break;
case '6':
arrayCharacter = ['TumblingE_N,TumblingE_S,TumblingE_E,TumblingE_N,TumblingE_W', 'TumblingE_E,TumblingE_E,TumblingE_N,TumblingE_W,TumblingE_S', 'TumblingE_E,TumblingE_S,TumblingE_S,TumblingE_W,TumblingE_N', 'TumblingE_N,TumblingE_W,TumblingE_N,TumblingE_S,TumblingE_E', 'TumblingE_S,TumblingE_W,TumblingE_N,TumblingE_W,TumblingE_E', 'TumblingE_W,TumblingE_E,TumblingE_S,TumblingE_N,TumblingE_S', 'TumblingE_W,TumblingE_N,TumblingE_E,TumblingE_S,TumblingE_W', 'TumblingE_S,TumblingE_N,TumblingE_N,TumblingE_W,TumblingE_E', 'TumblingE_N,TumblingE_E,TumblingE_S,TumblingE_W,TumblingE_W', 'TumblingE_N,TumblingE_S,TumblingE_E,TumblingE_N,TumblingE_W', 'TumblingE_E,TumblingE_E,TumblingE_N,TumblingE_W,TumblingE_S', 'TumblingE_E,TumblingE_S,TumblingE_S,TumblingE_W,TumblingE_N', 'TumblingE_N,TumblingE_W,TumblingE_N,TumblingE_S,TumblingE_E', 'TumblingE_S,TumblingE_W,TumblingE_N,TumblingE_W,TumblingE_E']
break;
}
var arrayHeight = -1;
for (var i = arrayCharacter.length - 1; i >= 0; i--) {
arrayHeight++;
var scoreText = chartArray[arrayHeight][1], //get score text
heightText = chartArray[arrayHeight][2]; //get heigth for character
var splitArr = arrayCharacter[i].split(',')
for (var x = 0; x < splitArr.length; x++) {
//console.log(splitArr[x]);
var alphabet = splitArr[x];
////set style
$('#list-character #' + alphabet).clone().css({
height: heightText + 'mm',
margin: heightText / 2 + 'mm'
}).appendTo('#line-' + (i + 1));
};
var attrWidth = 0;
$('#line-' + (i + 1)).find('svg').each(function () {
if ($(this).find('>:first-child').is('polygon')) {
attrWidth = $(this).find('>:first-child').width();
}
});
if (attrWidth != 0) {
$('#line-' + (i + 1)).find('svg').attr('width', attrWidth);
}
//set height for parent line
$('#line-' + (i + 1)).css('height', heightText + 'mm');
$('#line-' + (i + 1)).css('line-height', heightText + 'mm');
$('#line-' + (i + 1)).css('margin', heightText / 2 + 'mm');
var parentHeight = convertFunction.ConvertPixelToMM($('#line-' + (i + 1)).parent().height() / 2 - 12.5);
$('<div class="scoreBox" >' + scoreText + '</div>').insertAfter('#line-' + (i + 1));
//caculator viewport width
var svgBox = $('#line-' + (i + 1)).find('svg:first-child').width(), //get widht of line
svgMargin = parseFloat($('#line-' + (i + 1)).find('svg:first-child').css('margin-left')) * 2;
var svgWidth = svgBox + svgMargin; //get width for each character
var firstChartRemove = $('#line-' + (i + 1)).find('svg:nth-child(1)'),
secondChartRemove = $('#line-' + (i + 1)).find('svg:nth-child(2)'),
forthChartRemove = $('#line-' + (i + 1)).find('svg:nth-child(4)'),
fifthChartRemove = $('#line-' + (i + 1)).find('svg:nth-child(5)');
var convertViewWidth = convertFunction.ConvertMMToPixel(viewWidth);
if (convertViewWidth >= svgWidth * 5) {
console.log('show all');
$('#line-' + (i + 1)).find('svg').show();
}
else if (convertViewWidth >= svgWidth * 4) {
console.log('4');
$('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide();
}
else if (convertViewWidth >= svgWidth * 3) {
console.log('3');
$('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide();
fifthChartRemove.hide();
}
else if (convertViewWidth >= svgWidth * 2) {
console.log('2');
$('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide();
secondChartRemove.hide();
fifthChartRemove.hide();
}
else if (convertViewWidth >= svgWidth) {
console.log('1');
$('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide();
secondChartRemove.hide();
forthChartRemove.hide();
fifthChartRemove.hide();
}
else {
console.log('0');
$('#line-' + (i + 1)).find('svg').hide();
$('#line-' + (i + 1)).parent().find('.scoreBox').hide();
$('#line-' + (i + 1)).parent().addClass('display-none');
}
};
////caculator viewportHeight
//var totalHeight = 0;
////get total of SVG height
//$('.char-line').each(function () {
// var svgHeight = convertFunction.ConvertPixelToMM($(this).parent().height());
// totalHeight = totalHeight + svgHeight;
//});
////remove line if more than viewport height
//$('.char-line').reverse().each(function () {
// var svgHeight = convertFunction.ConvertPixelToMM($(this).parent().height());
// if ((totalHeight - svgHeight) > viewHight) {
// $(this).removeAttr('style');
// $(this).parent().find('>div').html('');
// $(this).parent().find('.scoreBox').remove();
// totalHeight = totalHeight - svgHeight;
// }
//});
};
/*this.ShuffleFunction = function (selector) {
$(selector).parent().each(function () {
$(this).children(selector).sort(function () {
return Math.random() - 0.5;
}).detach().appendTo(this);
});
return this;
};*/
this.UnShuffleFunction = function (oldCharacter) {
//$('#displaySetting').html(oldCharacter);
for (i = 0; i < oldCharacter.length; i++) {
var id = oldCharacter[i][0],
svg = oldCharacter[i][1];
$('.scroll-div').find('>div[data-line=' + id + ']').html(svg);
};
};
this.YatesShuffle = function (array) {
//var m = array.length, t, i;
//while (m) {
// i = Math.floor(Math.random() * m--);
// t = array[m];
// array[m] = array[i];
// array[i] = t;
//}
//return array;
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * i); // no +1 here!
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
};
this.SortCharacterOption = function () {
var firstLine = parseInt($('#displaySetting > div:nth-child(1)').attr('data-line')),
secondLine = parseInt($('#displaySetting > div:nth-child(2)').attr('data-line'));
if (displayOrder == "1") {
//smallest to largest
if (firstLine < secondLine) {
$('#displaySetting > div').each(function () {
$(this).detach().prependTo($('#displaySetting'))
});
}
}
else {
//largest to smallest
if (firstLine > secondLine) {
$('#displaySetting > div').each(function () {
$(this).detach().prependTo($('#displaySetting'))
});
}
};
};
this.ShortCutKey = function (pageUp, padeDown, shuffle, unShuffle) {
var callBack = this;
document.body.onkeydown = function (e) {
if (e.keyCode == 38) {
e.preventDefault();
};
if (e.keyCode == 40) {
e.preventDefault();
};
};
document.body.onkeyup = function (e) {
if (pageUp != "") {
if ((e.shiftKey && e.keyCode == pageUp)) {
callBack.ScrollTopDistance();
};
};
if (padeDown != "") {
if ((e.shiftKey && e.keyCode == padeDown)) {
callBack.ScrollDownDistance();
};
};
if (e.keyCode == 38) {
callBack.ScrollTopDistance();
e.preventDefault();
};
if (e.keyCode == 40) {
callBack.ScrollDownDistance();
e.preventDefault();
};
if (shuffle != "") {
if ((e.shiftKey && e.keyCode == shuffle)) {
$('.char-line').each(function (index) {
var array = [];
var parent = $(this);
var character = $(this).find('svg'),
parentId = $(this).parent().attr('data-line');
for (i = 0; i < character.length; i++) {
array.push($(character[i]).attr('id'));
}
// call shuffle function
var arrayTemp = callBack.YatesShuffle(array);
//remove display none
character.show();
for (i = 0; i < arrayTemp.length; i++) {
parent.find('svg[id='+arrayTemp[i]+']').detach().appendTo(parent);
}
var svgBox = $(this).find('svg:first-child').width(), //get widht of line
svgMargin = parseFloat($('#line-' + parentId).find('svg:first-child').css('margin-left')) * 2;
var svgWidth = svgBox + svgMargin; //get width for each character
var firstChartRemove = $(this).find('svg:nth-child(1)'),
secondChartRemove = $(this).find('svg:nth-child(2)'),
forthChartRemove = $(this).find('svg:nth-child(4)'),
fifthChartRemove = $(this).find('svg:nth-child(5)');
var convertViewWidth = callBack.ConvertMMToPixel(viewWidth);
if (convertViewWidth >= svgWidth * 5) {
console.log('show all');
$(this).find('svg').show();
}
else if (convertViewWidth >= svgWidth * 4) {
console.log('4');
$(this).find('svg').show();
firstChartRemove.hide();
}
else if (convertViewWidth >= svgWidth * 3) {
console.log('3');
$(this).find('svg').show();
firstChartRemove.hide();
fifthChartRemove.hide();
}
else if (convertViewWidth >= svgWidth * 2) {
console.log('2');
$(this).find('svg').show();
firstChartRemove.hide();
secondChartRemove.hide();
fifthChartRemove.hide();
}
else if (convertViewWidth >= svgWidth) {
console.log('1');
$(this).find('svg').show();
firstChartRemove.hide();
secondChartRemove.hide();
forthChartRemove.hide();
fifthChartRemove.hide();
}
else {
console.log('0');
$(this).find('svg').hide();
$(this).parent().find('.scoreBox').hide();
$(this).parent().addClass('display-none');
}
});
e.preventDefault();
};
};
if (unShuffle != "") {
if ((e.shiftKey && e.keyCode == unShuffle)) {
callBack.UnShuffleFunction(oldCharacter);
callBack.SetPositionScore(true);
//callBack.DivideScrollPage();
//$("html, body").animate({ scrollTop: 0 }, "fast");
e.preventDefault();
};
};
};
};
this.ValidateFunction = function () {
var result = false,
resultDistance, resultLength, resultWidth, resultHeight;
var validateFunction = this;
$('#iDistance').on('change', function () {
resultDistance = validateFunction.ValidateDistance();
});
$('#iLengOfLine').on('change', function () {
resultLength = validateFunction.ValidateLengOfLine();
});
$('#iViewWidth').on('change', function () {
resultWidth = validateFunction.ValidateViewWidth();
});
$('#iViewHeight').on('change', function () {
resultHeight = validateFunction.ValidateViewHieght();
});
if (resultDistance || resultLength || resultWidth || resultHeight) {
result = true;
}
return result;
};
this.ValidateDistance = function () {
var result = false,
message = "",
distance = $('#iDistance').val();
$('.errorDistance').remove();
if (distance == "") {
result = true;
message = "Distance is required.";
}
else if (distance != parseInt(distance, 10)) {
result = true;
message = "Distance must be interged.";
}
else if (distance < 3000) {
result = true;
message = "Distance must be larger or equal to 3000.";
}
if (result) {
$('#iDistance').parent().append('<span class="errorMsg errorDistance">' + message + '</span>');
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
}
return result;
};
this.ValidateLengOfLine = function () {
var result = false,
message = "",
lengOfLine = $('#iLengOfLine').val();
$('.errorLenghtLine').remove();
if (lengOfLine == "") {
result = true;
message = "Length of line below is required.";
}
else if (isNaN(lengOfLine)) {
result = true;
message = "Length of line below must be numbered.";
}
else if (parseFloat(lengOfLine) < 25 || parseFloat(lengOfLine) > 250) {
result = true;
message = "The length of line must be between 25 and 250.";
}
if (result) {
$('#iLengOfLine').parent().append('<span class="errorMsg errorLenghtLine">' + message + '</span>');
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
}
return result;
};
this.ValidateViewWidth = function () {
var result = false,
message = "",
screenWidth = $('#iViewWidth').val();
$('.errorViewWidth').remove();
if (screenWidth == "") {
result = true;
message = "Display width is required.";
}
else if (isNaN(screenWidth)) {
result = true;
message = "Display width must be number.";
}
if (result) {
$('#iViewWidth').parent().append('<span class="errorMsg errorViewWidth">' + message + '</span>');
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
}
return result;
};
this.ValidateViewHieght = function () {
var result = false,
message = "",
screenHeight = $('#iViewHeight').val();
$('.errorViewHeight').remove();
if (screenHeight == "") {
result = true;
message = "Display height is required.";
}
else if (isNaN(screenHeight)) {
result = true;
message = "Display height must be number.";
}
if (result) {
$('#iViewHeight').parent().append('<span class="errorMsg errorViewHeight">' + message + '</span>');
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
}
return result;
};
this.SetLocalStorage = function () {
localStorage.setItem("Optotype", localOptotype);
localStorage.setItem("Alphabet", alphabetType);
localStorage.setItem("Notation", notation);
localStorage.setItem("Numerator", numeratorType);
localStorage.setItem("Distance", localDistance);
localStorage.setItem("LengthOfLine", lenghOfline);
localStorage.setItem("DisplayOptions", displayOrder);
localStorage.setItem("DisplayWidth", viewWidth);
localStorage.setItem("DisplayHeight", viewHight);
localStorage.setItem("Mirrored", localsMirrored);
//localStorage.setItem("TextColor", colorHex);
localStorage.setItem("PageUp", localPageUp);
localStorage.setItem("PageDown", localPageDown);
localStorage.setItem("Shuffle", localShuffle);
localStorage.setItem("Unshuffle", localUnShuffle);
};
this.SetPositionScore = function (isSmall) {
//set margin for score text
var $maxWidthEle,
maxWidht = 0
scoreWidth = 0;
$('#displaySetting').find('>div').find('.char-line').each(function () {
if ($(this).width() > maxWidht) {
$maxWidthEle = $(this);
maxWidht = $(this).width();
}
});
/*if ($maxWidthEle != undefined) {
if (isSmall) {
var scorePosition = $maxWidthEle.width();
}
else {
var scorePosition = $maxWidthEle.offset().left + $maxWidthEle.width();
}
$('.scoreBox').css('left', scorePosition);
}*/
//set widht for scorebox
$('.scoreBox').each(function () {
if ($(this).outerWidth() > scoreWidth) {
scoreWidth = $(this).outerWidth();
}
});
$('.scoreBox').css('width', scoreWidth);
};
this.SetDirectCharacter = function (localsMirrored) {
if (localsMirrored == "2") {
$('#displaySetting svg').css('transform', 'rotateY(180deg)');
}
else {
$('#displaySetting svg').css('transform', 'rotateY(0deg)');
}
};
this.ResetValueToDefault = function () {
var setConfigDefault = this;
$('#reset').on('click', function () {
setConfigDefault.SetConfingDefault();
//set varible for local storage
notation = $('#sNotation').val(),
localOptotype = $('#sOptotype').val(),
localsMirrored = $('#sMirrored').val(),
localPageUp = $('#pageUp').val(),
localPageDown = $('#pageDown').val(),
localShuffle = $('#shuffle').val(),
localUnShuffle = $('#unShuffle').val(),
localDistance = $('#iDistance').val().trim(),
viewWidth = $('#iViewWidth').val().trim(),
viewHight = $('#iViewHeight').val().trim(),
numeratorType = $('#sNumerator').val(),
colorHex = 'rgba(0,0,0,1)',
alphabetType = $('#sAlphabet').val(),
sPageUp = $('#pageUp').val().trim().toUpperCase().charCodeAt(0),
sPageDown = $('#pageDown').val().trim().toUpperCase().charCodeAt(0),
sShuffle = $('#shuffle').val().trim().toUpperCase().charCodeAt(0),
lenghOfline = $('#iLengOfLine').val().trim(),
displayOrder = $('#display').val(),
sUnShuffle = $('#unShuffle').val().trim().toUpperCase().charCodeAt(0);
setConfigDefault.SetLocalStorage();
$('#displaySetting > div').find('.char-line').html('');
$('#displaySetting > div').find('.scoreBox').remove();
setConfigDefault.SetColorPicker('rgba(0,0,0,1)');
$('.color i').css('background-color', 'rgba(0,0,0,1)');
$('#colorBox').val('rgba(0, 0, 0,1)');
localStorage.setItem("TextColor", colorHex);
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
setConfigDefault.RemoveScrollDiv();
$('.char-line').removeAttr('style');
});
};
this.GetConfingByValue = function () {
var functionColorPicker = this;
var gOptotype = localStorage.getItem("Optotype"),
gAlphabet = localStorage.getItem("Alphabet"),
gNotation = localStorage.getItem("Notation"),
gNumerator = localStorage.getItem("Numerator"),
gDistance = localStorage.getItem("Distance"),
gLengthOfLine = localStorage.getItem("LengthOfLine"),
gDisplayOptions = localStorage.getItem("DisplayOptions"),
gDisplayWidth = localStorage.getItem("DisplayWidth"),
gDisplayHeight = localStorage.getItem("DisplayHeight"),
gMirrored = localStorage.getItem("Mirrored"),
gTextColor = localStorage.getItem("TextColor"),
gPageUp = localStorage.getItem("PageUp"),
gPageDown = localStorage.getItem("PageDown"),
gShuffle = localStorage.getItem("Shuffle"),
gUnshuffle = localStorage.getItem("Unshuffle");
//set value for input
$('#sOptotype').val(gOptotype).change();
$('#sAlphabet').val(gAlphabet);
$('#sNotation').val(gNotation);
$('#sNumerator').val(gNumerator);
$('#iDistance').val(gDistance);
$('#iLengOfLine').val(gLengthOfLine);
$('#display').val(gDisplayOptions);
$('#iViewWidth').val(gDisplayWidth);
$('#iViewHeight').val(gDisplayHeight);
$('#sMirrored').val(gMirrored);
functionColorPicker.SetColorPicker(gTextColor);
//$('#colorBox').val(gTextColor);
$('#pageUp').val(gPageUp);
$('#pageDown').val(gPageDown);
$('#shuffle').val(gShuffle);
$('#unShuffle').val(gUnshuffle);
};
this.SetConfingDefault = function () {
var functionColorPicker = this;
//set value for input
$('#sOptotype').val("1").change();
$('#sAlphabet').val("2");
$('#sNotation').val("1");
$('#sNumerator').val("2");
$('#display').val('1');
$('#sMirrored').val('2');
//$('#colorBox').val('0,0,0').change();
functionColorPicker.SetColorPicker('rgba(0,0,0,1)');
$('#iDistance').val('');
$('#iLengOfLine').val('');
$('#iViewWidth').val('');
$('#iViewHeight').val('');
$('#pageUp').val('');
$('#pageDown').val('');
$('#shuffle').val('');
$('#unShuffle').val('');
};
this.SetColorPicker = function (color) {
$('#cp3').colorpicker({
color: color,
format: 'rgba'
});
};
this.ScrollOnClick = function () {
var scrollFucntion = this;
$(document).off('click', '#displaySetting > div').on('click', '#displaySetting > div', function (e) {
//if (e.currentTarget == e.target) {
if ($(e.target).hasClass('character-line') || e.currentTarget == e.target) {
//console.log('toa do x' + e.clientX);
//console.log('toa do y' + e.clientY);
var screenHeight = $(window).height() / 2,
screenBottom = $(window).height() - $(window).height() * 0.1,
screenTop = $(window).height() * 0.1
positionY = e.clientY,
orderType = $('#display').val();
if (positionY > screenHeight) {
scrollFucntion.ScrollDownDistance();
}
else {
scrollFucntion.ScrollTopDistance();
}
}
});
};
this.ConvertPixelToMM = function (pixel) {
var dpi = document.getElementById("dpi").offsetHeight;
return (pixel * 25.4) / dpi
};
this.ConvertMMToPixel = function (mm) {
var dpi = document.getElementById("dpi").offsetHeight;
return (mm * dpi) / 25.4
};
this.ScrollTopDistance = function () {
//scrollPos = $(window).scrollTop();
//$('#displaySetting > div').each(function () {
// var elementPos = parseInt($(this).offset().top),
// isStop = false;
// preveElemt = $(this).prev();
// if (preveElemt.length > 0) {
// if (elementPos <= scrollPos + 1 && parseInt($(this).next().offset().top) > scrollPos) {
// if (elementPos == scrollPos + 1) {
// $("html, body").animate({ scrollTop: parseInt(scrollPos - (preveElemt.height())) }, "slow");
// }
// else if (elementPos < scrollPos + 1) {
// $("html, body").animate({ scrollTop: parseInt(preveElemt.offset().top) }, "slow");
// }
// }
// else if ($(window).scrollTop() + $(window).height() == $(document).height()) {//check if scroll end of bottom
// // The element is not visible, do something else
// var offsetArr = [],
// prevOfsset = null;
// $('#displaySetting > div').each(function () {
// offsetArr.push(parseInt($(this).offset().top));//get all offset top of element
// });
// $.each(offsetArr, function () {
// if (this <= scrollPos && (prevOfsset == null || (scrollPos - this) < (scrollPos - prevOfsset))) {
// prevOfsset = this;//get the min offset top near scrollTop
// }
// });
// $("html, body").animate({ scrollTop: parseInt(prevOfsset) }, "fast");
// return false;
// }
// }
//});
var scrollPos = $(window).scrollTop(),
screenHeight = $(window).height(),
checkViewPort = this;
$("html, body").animate({ scrollTop: parseInt(scrollPos - screenHeight) }, "fast");
};
this.ScrollDownDistance = function () {
var scrollPos = $(window).scrollTop(),
screenHeight = $(window).height(),
checkViewPort = this;
$("html, body").animate({ scrollTop: parseInt(scrollPos + screenHeight) }, "fast");
};
this.RemoveScrollDiv = function () {
var $scrollDiv = $('#displaySetting').find('.scroll-div');
if ($scrollDiv.length > 0) {
$scrollDiv.each(function () {
$(this).find('>div').detach().appendTo('#displaySetting');
});
};
$('.scroll-div').remove();
};
this.DivideScrollPage = function () {
var maxHeight = $(window).height(),
quotalHeight = 0,
checkHeight = false;
/* $('#displaySetting').find('.character-line').each(function () {
if ($(this).height() > maxHeight) {
checkHeight = true;
}
});
if (checkHeight) {
//$('#displaySetting').html('<div data-line="1" class="character-line"><div class="char-line" id="line-1"></div></div><div data-line="2" class="character-line"><div class="char-line" id="line-2"></div></div>'
// + '<div data-line="3" class="character-line"><div class="char-line" id="line-3"></div></div><div data-line="4" class="character-line"><div class="char-line" id="line-4"></div></div>'
// + '<div data-line="5" class="character-line"><div class="char-line" id="line-5"></div></div><div data-line="6" class="character-line"><div class="char-line" id="line-6"></div></div>'
// + '<div data-line="7" class="character-line"><div class="char-line" id="line-7"></div></div><div data-line="8" class="character-line"><div class="char-line" id="line-8"></div></div>'
// + '<div data-line="9" class="character-line"><div class="char-line" id="line-9"></div></div><div data-line="10" class="character-line"><div class="char-line" id="line-10"></div></div>'
// + '<div data-line="11" class="character-line"><div class="char-line" id="line-11"></div></div><div data-line="12" class="character-line"><div class="char-line" id="line-12"></div></div>'
// + '<div data-line="13" class="character-line"><div class="char-line" id="line-13"></div></div><div data-line="14" class="character-line"><div class="char-line" id="line-14"></div></div>');
//alert('The distance is too large, please update again.');
}
*/
//else {
$('#displaySetting >div').each(function () {
if ($(this).find('.char-line').height() > 0) {
if ($(this).height() + quotalHeight <= maxHeight) {
quotalHeight = quotalHeight + $(this).height();
}
else {
quotalHeight = $(this).height();
$('<div class="scroll-div"></div>').appendTo('#displaySetting');
$(this).prevAll().each(function () {
$(this).detach().prependTo($('#displaySetting').find('.scroll-div:last'));
});
}
}
});
if ($('#displaySetting >div').not(".scroll-div").length > 0) {
$('<div class="scroll-div"></div>').appendTo('#displaySetting');
$('#displaySetting >div').not(".scroll-div").each(function () {
if ($(this).find('.char-line svg').length > 0) {
$(this).detach().appendTo($('#displaySetting').find('.scroll-div:last'));
}
else {
$(this).detach().appendTo('#displaySetting');
}
})
}
$('.scroll-div').each(function () {
if ($(this).find('>div').hasClass('display-none')) {
$(this).remove();
}
});
//}
};
this.CheckCharacterViewPort = function () {
$('#displaySetting > div').each(function () {
var docViewTop = $(window).scrollTop(),
docViewBottom = docViewTop + $(window).height(),
elemTop = $(this).offset().top,
elemBottom = elemTop + $(this).height();
if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
$(this).removeClass('character-invisible');
}
else {
$(this).addClass('character-invisible');
}
});
};
this.charaterCLick = function () {
$(document).on('click', '.char-line svg', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('.char-line svg').removeClass('disable')
} else {
$(this).addClass('active');
$('.char-line svg').addClass('disable')
}
})
};
this.UpdateSetting = function () {
var callBackFunction = this;
$('#updateSetting').on('click', function () {
//set var from user input
notation = $('#sNotation').val(),
localOptotype = $('#sOptotype').val(),
localsMirrored = $('#sMirrored').val(),
localPageUp = $('#pageUp').val(),
localPageDown = $('#pageDown').val(),
localShuffle = $('#shuffle').val(),
localUnShuffle = $('#unShuffle').val(),
localDistance = $('#iDistance').val().trim(),
viewWidth = $('#iViewWidth').val().trim(),
viewHight = $('#iViewHeight').val().trim(),
numeratorType = $('#sNumerator').val(),
colorHex = $('#colorBox').val(),
alphabetType = $('#sAlphabet').val(),
sPageUp = $('#pageUp').val().trim().toUpperCase().charCodeAt(0),
sPageDown = $('#pageDown').val().trim().toUpperCase().charCodeAt(0),
sShuffle = $('#shuffle').val().trim().toUpperCase().charCodeAt(0),
lenghOfline = $('#iLengOfLine').val().trim(),
displayOrder = $('#display').val(),
sUnShuffle = $('#unShuffle').val().trim().toUpperCase().charCodeAt(0);
//reset div
$('#displaySetting').html('<div data-line="1" class="character-line"><div class="char-line" id="line-1"></div></div><div data-line="2" class="character-line"><div class="char-line" id="line-2"></div></div>'
+ '<div data-line="3" class="character-line"><div class="char-line" id="line-3"></div></div><div data-line="4" class="character-line"><div class="char-line" id="line-4"></div></div>'
+ '<div data-line="5" class="character-line"><div class="char-line" id="line-5"></div></div><div data-line="6" class="character-line"><div class="char-line" id="line-6"></div></div>'
+ '<div data-line="7" class="character-line"><div class="char-line" id="line-7"></div></div><div data-line="8" class="character-line"><div class="char-line" id="line-8"></div></div>'
+ '<div data-line="9" class="character-line"><div class="char-line" id="line-9"></div></div><div data-line="10" class="character-line"><div class="char-line" id="line-10"></div></div>'
+ '<div data-line="11" class="character-line"><div class="char-line" id="line-11"></div></div><div data-line="12" class="character-line"><div class="char-line" id="line-12"></div></div>'
+ '<div data-line="13" class="character-line"><div class="char-line" id="line-13"></div></div><div data-line="14" class="character-line"><div class="char-line" id="line-14"></div></div>');
callBackFunction.RemoveScrollDiv();
//set max width for screen
if (viewWidth > callBackFunction.ConvertPixelToMM($(window).width())) {
viewWidth = parseInt(callBackFunction.ConvertPixelToMM($(window).width() * 0.95));
}
//validate required field
var validate = callBackFunction.ValidateFunction();
if (validate) {
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
return;
}
else {
//reset body div
$('body,#displaySetting').removeAttr('style');
//reset div
$('#displaySetting > div >div').html('');
$('#displaySetting .scoreBox').remove();
//sort div
callBackFunction.SortCharacterOption();
//set text color
callBackFunction.SetColorCharacter(colorHex);
callBackFunction.CaculatorCharacterHeight(numeratorType);
//generate text
callBackFunction.GenerateCharacter(alphabetType);
//set shorcut
callBackFunction.ShortCutKey(sPageUp, sPageDown, sShuffle, sUnShuffle);
//close setting bar
$('.setting-bar').removeClass('active');
$('.guide-section').removeClass('active');
$('.mask').removeClass('active');
//set widht height for body
//if (callBackFunction.ConvertPixelToMM($('#displaySetting').height()) < viewHight) {
// $('#displaySetting').css('height', callBackFunction.ConvertPixelToMM($('#displaySetting').height()) + 'mm')
//} else {
// $('#displaySetting').css({
// height: viewHight + 'mm',
// });
//}
//set widht
var $Element, maxEleWidht = 0
$('#displaySetting').find('>div').find('.char-line').each(function () {
if ($(this).width() > maxEleWidht) {
$Element = $(this);
maxEleWidht = $(this).width();
if ($('#sOptotype').val() == 1 && maxEleWidht < viewWidth) {
maxEleWidht = maxEleWidht * 0.8
}
}
});
if (callBackFunction.ConvertPixelToMM(maxEleWidht) < viewWidth) {
var widthError = callBackFunction.ConvertPixelToMM(maxEleWidht) + 1;
$('#displaySetting').css({
width: widthError + 'mm'
});
callBackFunction.SetPositionScore(true);
}
else {
$('#displaySetting').css({
width: viewWidth + 'mm'
});
callBackFunction.SetPositionScore();
};
//set direct for character
callBackFunction.SetDirectCharacter(localsMirrored)
//local storage
callBackFunction.SetLocalStorage();
$("html, body").animate({ scrollTop: 0 }, "fast");
//divide page
callBackFunction.DivideScrollPage();
//small to large
if (displayOrder == "1") {
if ($('.scroll-div >div').length > 0) {
$('.scroll-div >div').each(function () {
var $parent = $(this).parent();
$(this).detach().prependTo($parent);
});
};
$('#displaySetting >.scroll-div').each(function () {
$(this).detach().prependTo('#displaySetting');
});
$("html, body").animate({ scrollTop: $('body').height() }, "fast");
//$("html, body").scrollTop($('body').height());
}
//set old character
$('.character-line').each(function () {
var lineArray = [];
lineArray.push($(this).attr('data-line'), $(this).html());
oldCharacter.push(lineArray);
});
$('.modal-setting').remove();
}
});
};
this.Init = function () {
var validateElement = this;
var validate = false,
VresultDistance, VresultLength, VresultWidth, VresultHeight;
$('#iDistance').on('blur', function () {
VresultDistance = validateElement.ValidateDistance();
if (VresultDistance || VresultLength || VresultWidth || VresultHeight) {
validate = true;
} else {
validate = false;
};
if (validate) {
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
$('.setting-button').trigger('click');
return;
}
else {
$('#updateSetting').removeClass('disabled-btn');
}
});
$('#iLengOfLine').on('blur', function () {
VresultLength = validateElement.ValidateLengOfLine();
if (VresultDistance || VresultLength || VresultWidth || VresultHeight) {
validate = true;
} else {
validate = false;
};
if (validate) {
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
$('.setting-button').trigger('click');
return;
}
else {
$('#updateSetting').removeClass('disabled-btn');
}
});
$('#iViewWidth').on('blur', function () {
VresultWidth = validateElement.ValidateViewWidth();
if (VresultDistance || VresultLength || VresultWidth || VresultHeight) {
validate = true;
} else {
validate = false;
};
if (validate) {
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
$('.setting-button').trigger('click');
return;
}
else {
$('#updateSetting').removeClass('disabled-btn');
}
});
$('#iViewHeight').on('blur', function () {
VresultHeight = validateElement.ValidateViewHieght();
if (VresultDistance || VresultLength || VresultWidth || VresultHeight) {
validate = true;
}
else {
validate = false;
};
if (validate) {
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
$('.setting-button').trigger('click');
return;
}
else {
$('#updateSetting').removeClass('disabled-btn');
}
});
this.SelectOptotype();
this.ColorPicker();
this.UpdateSetting();
if (localStorage.getItem("Optotype") != null) {
if (localStorage.getItem("Distance") != "" && localStorage.getItem("LengthOfLine") != "" && localStorage.getItem("DisplayWidth") != "") {
this.GetConfingByValue();
$('#updateSetting').trigger('click');
$('#updateSetting').removeClass('disabled-btn');
}
else {
$('.setting-button').trigger('click');
this.SetColorPicker('rgba(0,0,0,1)');
}
}
else if ($('#iDistance').val().trim() == "" || $('#iLengOfLine').val().trim() == "" || $('#iViewWidth').val().trim() == "") {
$('.setting-button').trigger('click');
this.SetColorPicker('rgba(0,0,0,1)');
};
this.ResetValueToDefault();
$('#cp3').colorpicker().on('changeColor', function (e) {
localStorage.setItem("TextColor", e.color.toString('rgba'));
//console.log(e.color.toString('rgba'));
});
this.ScrollOnClick();
this.charaterCLick();
// this.ValidateFunction();
};
};
var configBar = new configBarSetting();
var configWolf = new ConfigWolfChart();
$(document).ready(function () {
configBar.init();
configWolf.Init();
});
</script>
</body>
</html>