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

2485 lines
254 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">
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
The OPTOTYPES fields allow you to select both the letters to be displayed (Optotype), and the preset arrays of letters on each line (Alphabet). Custom OPTOTYPES can be installed (future versions).
upload the source code
2017-01-24 05:43:53 -05:00
<ul>
<li>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<strong>Optotype</strong>: Snellen and Sloan are two types of latin sans serif characters in common use. The Snellen letters are 5 high by 4 wide, while the 5x5 grid of the Sloan letters is said to perform better in astigmatism. Landolt C and Tumbling E are used for non-verbal and non-English literate subjects. Landolt C is also useful for cross-cylinder techniques.
upload the source code
2017-01-24 05:43:53 -05:00
</li>
<li>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<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.
upload the source code
2017-01-24 05:43:53 -05:00
</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>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<strong>Notation</strong>: Sets the notation type on the VA label on each chart line. Each notation type has a preset 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>
upload the source code
2017-01-24 05:43:53 -05:00
</li>
<li>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<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 “Metres” or “Feet” 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” Notation if the Distance (see below) varies a large amount from 6000mm, say outside 5000-7000mm.
upload the source code
2017-01-24 05:43:53 -05:00
</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">
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<p> The two CALIBRATION values are the ONLY values that influence the height 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. Please note there are no default calibration values; the chart cannot be used uncalibrated, for obvious reasons.</p>
upload the source code
2017-01-24 05:43:53 -05:00
<ul>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<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", the VA labels will convert Distance to feet to the nearest 0.1, or to 20 depending on the value in Numerator.</li>
upload the source code
2017-01-24 05:43:53 -05:00
<li>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<strong>Length of the line below</strong>: Calibrates the chart for the pixel density of the display being used. Measure the line as accurately as possible with a mm ruler: decimal places are allowed. Measure two more times, and if the values vary, enter an average. You will need to review this value if you change display hardware, graphics adapter settings, or if you turn your display between landscape and portrait. 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.
upload the source code
2017-01-24 05:43:53 -05:00
</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>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<li><strong>Sort</strong>: Sets the order of display on first launch and grouping of chart lines on the display. Selecting “Smallest-to-Largest” will usually work better in a primary care setting in a highly developed country because it packs more of the small lines onto the display. In other settings, where average VAs may be lower, “Largest to Smallest” may arrange the lines more conveniently. In either case the only difference is the number of scroll operations the user needs to make. If your display is large enough (about 1m wide by about 1.5m tall at 6m), all 14 lines will display and this setting will be moot.</li>
upload the source code
2017-01-24 05:43:53 -05:00
<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>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<strong>Text colour</strong>: This field accepts any rgba colour value. The first three values are 0-255, representing levels of red, green and blue, where 0 is no colour and 255 is full colour. The fourth value is 0-1, representing opacity where 0 is fully transparent and 1 is fully opaque. Eg. 0,0,0,1 is black; 0,0,0,0.1 is 10% black; 255,0,0,1 is pure red.
upload the source code
2017-01-24 05:43:53 -05:00
</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>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<strong>Page Up/Page Dn</strong>: If your display is large enough (about 1m wide by about 1.5m tall at 6m), all 14 lines will display, otherwise the chart will divide itself into pages and you will need to scroll through them. Your keyboard up and down arrows will scroll, and here you can also set a Shift + key shortcut eg "u" for up.<br />
Mouse clicking or tapping on a touch screen can also do paging. Click or tap any whitespace in the top half of the display for page up, the bottom half for page down.<br />
Please note that clicking or tapping on a <i>letter masks</i> that letter. Clicking or tapping the masked letter again removes the mask.
upload the source code
2017-01-24 05:43:53 -05:00
</li>
<li>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
<strong>Shuffle/Unshuffle:</strong>: Shuffle semi-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. You can also use Shuffle to display more letters on the lines that are too long to fit all 5 letters on your display. Shuffle/Unshuffle won't work if you don't assign a shortcut.
upload the source code
2017-01-24 05:43:53 -05:00
</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>
Update index.htm Updated help text
2017-01-26 21:06:49 -05:00
</html>