2017-03-17 22:03:02 -04:00
<!DOCTYPE html>
2017-02-17 00:32:43 -05:00
< html lang = "en" >
<!-- [if lt IE 10]>
< html lang = 'en' class = 'old_ie' >
<![endif]-->
< html lang = en >
< head >
2019-04-01 06:24:46 -04:00
< title > WolfChart v1.6< / title >
< link rel = "icon" type = "image/png" href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAdCAMAAAD8QJ61AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRFqamphoaGxcXF1tbW9/f3U1NTLi4uurq64+PjnZ2ddHR07Ozsk5OTAAAA////////NZC25gAAABB0Uk5T////////////////////AOAjXRkAAAFRSURBVHjadFNZYsUgCATU4AJ6/9sWFVP72vJhCA4wLMK4hUoYHwKXHgp3xj4I+C9AQw6994ZIHZjpF6DGviTPL2YuF4ARGofoCJfSDyDX3CPUzuXc1XlAPAB0c3pcacozC0rcAHeMj4IH0LotAjcAVB8PoOqxpBtAyDOYPewAqu5U4oCSPYOZNU1tKk4nWYRDXXRdPM/66nZrGF5A0h9ySsOTIv68PzkMELEtOh+AzXcCRsS8M6QyD+OQxI6rFeK1W5+qNrSPvDkwOsBrsMhozutntpvZGhXhroHq0VZP0AB5QjOk3QA+0Af3zGE09lYuZ5q4BOS7gfe4eycj+uzYPovJYQSp4SyCyilwjS37yr0xzP2d5AxwdjLQPRDrbFi8iN6txskpeztsd4SsvRG/1z4ai1BFxEAFZT4vKNLudwE2lRHJctH/T8+klPJh+RJgAA5sKxGB5VuMAAAAAElFTkSuQmCC" / >
2017-02-17 00:32:43 -05:00
< meta charset = "utf-8" / >
2019-04-01 06:24:46 -04:00
< link rel = "manifest" href = "/manifest.json" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "theme-color" content = "#86c7ef" >
2017-02-17 00:32:43 -05:00
< 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;
}*/
2019-04-01 06:24:46 -04:00
/*accordion*/
2017-02-17 00:32:43 -05:00
.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 16px 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;
2017-02-28 03:21:50 -05:00
transition: all 0.1s linear;
2017-02-17 00:32:43 -05:00
border: 1px solid transparent;
left: -50px !important;
2017-02-28 03:21:50 -05:00
cursor: pointer;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
2017-02-17 00:32:43 -05:00
}
.scoreBox:hover {
box-shadow: 0 0 3px rgba(0,0,0,0.3);
border-color: red;
2017-02-28 03:21:50 -05:00
user-select: none;
z-index: 9;
}
.scoreBox.active {
box-shadow: 0 0 3px rgba(0,0,0,0.3);
background-color: red;
color: white;
2017-02-17 00:32:43 -05:00
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;
}
2017-02-28 03:21:50 -05:00
2017-02-17 00:32:43 -05:00
#displaySetting .character-line {
position: relative;
line-height: 0;
font-size: 0;
}
#displaySetting .duo {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAABCAIAAAAJn6IqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUM0RUZGMDRERUNGMTFFNjg4QUZEQ0MwRDg2MzY5M0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUM0RUZGMDVERUNGMTFFNjg4QUZEQ0MwRDg2MzY5M0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFQzRFRkYwMkRFQ0YxMUU2ODhBRkRDQzBEODYzNjkzQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQzRFRkYwM0RFQ0YxMUU2ODhBRkRDQzBEODYzNjkzQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsIzWMAAAAAmSURBVHja7NAxAQAACAMg17+anbTGDohAbgAAgHZZBwAA0O4FGADq3gHOIgDUAwAAAABJRU5ErkJggg==");/*red and green stripe*/
background-size: 100% 100%;
background-repeat: no-repeat;
}
#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);
}
2017-02-28 03:21:50 -05:00
.setting-button {
border: 2px solid #666666;
border-radius: 5px;
display: block;
padding: 2px 5px;
position: fixed;
right: 20px;
top: 20px;
width: 42px;
z-index: 9;
}
.setting-button span {
height: 2px;
display: block;
background: #666666;
border-radius: 3px;
margin: 5px 0;
}
2017-02-17 00:32:43 -05:00
< / style >
< / head >
< body >
<!-- dpi -->
< div id = "dpi" > < / div >
<!-- setting bar -->
< a class = "setting-button" href = "#setting-bar" >
2017-02-28 03:21:50 -05:00
< span > < / span >
< span > < / span >
< span > < / span >
2017-02-17 00:32:43 -05:00
< / 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 >
2017-02-17 00:46:40 -05:00
< option value = "4" > TumblingE< / option >
2017-02-17 00:32:43 -05:00
< / 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 " >
2017-03-07 22:50:30 -05:00
< span class = "keyboard" > Shift + < / span > < input type = "text" class = "form-control input-sm js-shortkey" id = "pageUp" maxlength = "1" >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
< div class = "form-group" >
< label class = "col-2" > Page Down< / label >
< div class = "col-8 " >
2017-03-07 22:50:30 -05:00
< span class = "keyboard" > Shift + < / span > < input type = "text" class = "form-control input-sm js-shortkey" id = "pageDown" maxlength = "1" >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
< div class = "form-group" >
< label class = "col-2" > Shuffle< / label >
< div class = "col-8 " >
2017-03-07 22:50:30 -05:00
< span class = "keyboard" > Shift + < / span > < input type = "text" class = "form-control input-sm js-shortkey" id = "shuffle" maxlength = "1" >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
< div class = "form-group" >
< label class = "col-2" > Unshuffle< / label >
< div class = "col-8 " >
2017-03-07 22:50:30 -05:00
< span class = "keyboard" > Shift + < / span > < input type = "text" class = "form-control input-sm js-shortkey" id = "unShuffle" maxlength = "1" >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
< div class = "form-group" >
< label class = "col-2" > Duochrome< / label >
< div class = "col-8 " >
2017-03-07 22:50:30 -05:00
< span class = "keyboard" > Shift + < / span > < input type = "text" class = "form-control input-sm js-shortkey" id = "duoBG" maxlength = "1" >
2017-02-17 00:32:43 -05:00
< / 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 = "panel-body" >
2019-04-01 06:24:46 -04:00
Very quick guide: Calibrate and configure your chart using this help guide. Click or tap on white space to scroll the chart up and down, or use the up and down arrows on your keyboard. Click or tap on any letter to mask it. Click or tap on any line label to mask that line. Click or tap again to unmask. < br / > < br / >
2017-02-17 00:32:43 -05:00
< / div >
< 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" >
2019-04-02 23:38:48 -04:00
The optotypes fields allow you to select both the letters to be displayed, and the order of letters on each line. You cannot change the array nor order of the lines displayed here.
2017-02-17 00:32:43 -05:00
< ul >
< li >
< strong > Optotype< / strong > : Select from the standard optotypes and those you have installed yourself.
< / li >
< li >
2019-04-02 23:38:48 -04: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 and increase repeatability - see below
2017-02-17 00:32:43 -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 >
2019-04-02 23:38:48 -04:00
< strong > Notation< / strong > : Sets the notation type on the VA label on each chart line. Regardless of notation or optotype, WolfChart uses the standard logMAR array of subtenses; from -0.3(6/3 or 2/10) to 1 (6/60 or 20/200), with each 3 lines doubling the subtense. "Metres" is standard Snellen notation eg. 6/6; "Feet" is the imperialist equivalent eg. 20/20; DecimalV is a the European standard (EN ISO 8596) 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 >
2017-02-17 00:32:43 -05:00
< / li >
< li >
2019-04-02 23:38:48 -04:00
< strong > Numerator< / strong > : Sets the numerator of the fraction notation types only. If Notation is set to logMar or DecimalV, this setting makes no difference. "Actual" is the value entered in Distance (see below) rounded to the nearest 0.1m or 0.5ft, and VA labels will show this rounded numerator, a ! instead of a /, and a proportionally adjusted denominator. "Standard" is either 6 or 20 depending whether Notation is set to Metres or Feet above. VA labels will display as either 6/ or 20/ regardless of the value in Distance. Please note that it is not advisable to use Standard if the Distance varies a large amount from 6000mm, say outside 5500-6500mm. The numerator should be the tested distance or near to it.
2017-02-17 00:32:43 -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" >
< p > The two CALIBRATION values are the ONLY values that influence the display size of the chart lines. The RECORDING values above only change the VA labels on the chart lines, and have no bearing on the chart lines themselves.< / p >
< ul >
2019-04-01 06:24:46 -04:00
< li > < strong > Distance< / strong > : Enter the distance from the patient's eye to the letter chart in mm. Eg 6m is 6000mm. You can work in feet (see Notation above) but you MUST enter the Distance in mm. If using a mirror to double the test distance, measure BOTH from the patient's eye to the mirror AND from the mirror to the chart and ADD the two distances (and don't forget to check the Mirrored/Direct setting - see below). If you are using Notation value of "Feet", Distance will be converted to the nearest foot, or to 20 depending on the value in Numerator.< / li >
2017-02-17 00:32:43 -05:00
< li >
< strong > Length of the line below< / strong > : Calibrates the chart for the pixel density of the display being used. Measure the ruler line as accurately as possible. Measure two more times, and if the values vary, enter an average. You will need to re-check this value if you change display hardware, graphics adapter settings, or if you turn your display from landscape to portrait or vice versa. Take particular care here if you are using extended display from a laptop as pixel density may be different between the laptop screen and the external display.
< / li >
< / ul >
< / div >
< / div >
< / div >
< div class = "panel panel-default" >
< div class = "panel-heading" role = "tab" id = "display-area" >
< h4 class = "panel-title" >
< a href = "#" >
Display area
< / a >
< / h4 >
< / div >
< div id = "collapseThree" class = "panel-collapse collapse" >
< div class = "panel-body" >
A maximum of 5 letters is displayed on each line. If the browser window is not large enough to display all 5 letters, fewer will be displayed.
To measure the DISPLAY WIDTH, use a ruler to measure the horizontal width of your browser window in mm. Once you have applied the settings, you can vary this DISPLAY WIDTH value to improve the appearance and centration of the chart. However be aware that a smaller value may limit the number of letters that can be displayed on larger lines.
You can use the SHUFFLE function (see below) to present the 5 letters required for a repeatable result if 5 letters won't fit.
< / div >
< / div >
< / div >
< div class = "panel panel-default" >
< div class = "panel-heading" role = "tab" id = "options" >
< h4 class = "panel-title" >
< a href = "#" >
Options
< / a >
< / h4 >
< / div >
< div id = "collapseThree" class = "panel-collapse collapse" >
< div class = "panel-body" >
< ul >
2019-04-01 06:24:46 -04:00
< li > < strong > Sort< / strong > : Unless the display is very large (about 1m wide by about 1.5m tall), the chart will display in pages - see SHORTCUTS below. Here you can select whether to display the page of the smallest or largest lines first on refresh or reconfigure. < / li >
2017-02-17 00:32:43 -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 >
2019-04-01 06:24:46 -04:00
< strong > Text colour< / strong > : Select from the colour picker or enter any valid rgba string Eg. rgba(0,0,0,1) is black; rgba(0,0,0,0.1) is 10% black; rgba(255,0,0,1) is pure red.
2017-02-17 00:32:43 -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 >
< strong > Page Up/Page Dn< / strong > : The chart displays upwards from the smallest chart line by default. If your display is large enough (about 1m wide by about 1.5m tall), all 10-14 lines will display, otherwise the chart will divide itself into pages and you will need to use Page Up or Dn to page through them.< br / >
Paging can also be done with a mouse - the whitespaces above and below the chartlines are page up and down buttons.
< / li >
< li >
< strong > Shuffle/Unshuffle:< / strong > : Shuffle randomises the letters normally shown on a chart line into a different order. You can shuffle as many times as you like. Unshuffle returns the letter order to the default.
< / li >
< li >
< strong > Duochrome:< / strong > : Toggles a red/green background on any version of the chart.
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- end guide - section -->
2019-04-01 06:24:46 -04:00
< div id = "displaySetting" style = "height:100%;" >
2017-02-17 00:32:43 -05:00
< 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 Snellen -->
< svg id = "Snellen_A" 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,5 1.5,0 2.5,0 1,5" fill = "#000000" / >
< polygon points = "4,5 2.5,0 1.5,0 3,5" fill = "#000000" / >
< polygon points = "1,3 3,3 3,4 1,4" fill = "#000000" / >
< / svg >
< 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 0 H 1.5 A 2 2 0 0 1 1.5 5 H 0 V 1 H 1 V 4 H 1.5 A 1 1 0 0 0 1.5 1 H 0 V 0" fill = "black" > < / 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_L" 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,4 4,4 4,5 0,5" fill = "#000000" / >
< / 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 0 H 2.5 A 1.5 1.5 0 0 1 2.5 3 H 1 V 5 H 0 V 1 H 1 V 2 H 2.5 A 0.5 0.5 0 0 0 2.5 1 H 0 V 0" fill = "black" > < / path >
< / svg >
< svg id = "Snellen_R" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-01 06:24:46 -04:00
< path d = "M 0 0 H 2.5 A 1.5 1.5 0 0 1 2.5 3 L 2.9 2.8 L 4 5 H 2.8 L 1.8 3 H 1 V 5 H 0 V 1 H 1 V 2 H 2.5 A 0.5 0.5 0 0 0 2.5 1 H 0 V 0" fill = "black" >
< / path >
2017-02-17 00:32:43 -05:00
< / 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 = "8.73mm" style = "margin: 3.49mm;" >
< path d = "M 0 0 V 3 A 1.5 1.5 0 1 0 4 3 V 0 H 3 V 3 A 1 1 0 0 1 1 3 V 0 H 0" fill = "black" > < / 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_X" 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 2.8,5 4,5 1.2,0" fill = "#000000" / >
< polygon points = "0,5 2.8,0 4,0 1.2,5" fill = "#000000" / >
< / svg >
< svg id = "Snellen_Y" 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,1.5 2.9,0 4,0 2.5,2.5 2.5,5 1.5,5 1.5,2.5" fill = "#000000" / >
< / 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" 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 5 2 H 4 A 1.5 1.5 0 1 0 4 3 H 5 A 2.5 2.5 0 1 1 5 2" fill = "black" > < / path >
< / 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 0 H 3.5 A 1.5 1.5 0 0 1 5 1.5 V 3.5 A 1.5 1.5 0 0 1 3.5 5 H 0 V 1 H 1 V 4 H 3.5 A 0.5 0.5 0 0 0 4 3.5 V 1.5 A 0.5 0.5 0 0 0 3.5 1 H 0 V 0" fill = "black" > < / 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_L" 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 5,4 5,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;" >
< path d = "M 2.5 0 A 2.5 2.5 0 1 1 2.5 5 V 4 A 1.5 1.5 0 1 0 2.5 1 V 0" fill = "black" > < / path >
< path d = "M 2.5 0 A 2.5 2.5 0 1 0 2.5 5 V 4 A 1.5 1.5 0 1 1 2.5 1 V 0" fill = "black" > < / path >
< / svg >
< svg id = "Sloan_P" 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 0 H 3.5 A 1.5 1.5 0 0 1 3.5 3 H 1 V 5 H 0 V 1 H 1 V 2 H 3.5 A 0.5 0.5 0 1 0 3.5 1 H 0 V 0" fill = "black" > < / path >
< / svg >
< svg id = "Sloan_R" 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 0 H 3.5 A 1.5 1.5 0 0 1 3.5 3 L 5 5 H 3.8 L 2.3 3 H 1 V 5 H 0 V 1 H 1 V 2 H 3.5 A 0.5 0.5 0 1 0 3.5 1 H 0 V 0" fill = "black" > < / path >
< / 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 5 1.5 A 1.5 1.5 0 0 0 3.5 0 H 1.5 A 1.5 1.5 0 0 0 1.5 3 H 3.5 A 0.5 0.5 0 0 1 3.5 4 H 1.5 A 0.5 0.5 0 0 1 1 3.5 H 0 A 1.5 1.5 0 0 0 1.5 5 H 3.5 A 1.5 1.5 0 1 0 3.5 2 H 1.5 A 0.5 0.5 0 1 1 1.5 1 H 3.5 A 0.5 0.5 0 0 1 4 1.5 H 5" fill = "black" > < / path >
< / svg >
< svg id = "Sloan_T" 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 3,1 3,5 2,5 2,1 0,1" fill = "black" / >
< / 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_X" 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 3.7,5 5,5 1.3,0" fill = "#000000" / >
< polygon points = "0,5 3.7,0 5,0 1.3,5" fill = "#000000" / >
< / 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" 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 5 2 H 4 A 1.5 1.5 0 1 0 4 3 H 5 A 2.5 2.5 0 1 1 5 2" fill = "black" transform = "rotate (270 2.5 2.5)" > < / path >
< / svg >
< svg id = "LandoltC_E" 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 5 2 H 4 A 1.5 1.5 0 1 0 4 3 H 5 A 2.5 2.5 0 1 1 5 2" fill = "black" > < / path >
< / svg >
< svg id = "LandoltC_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 5 2 H 4 A 1.5 1.5 0 1 0 4 3 H 5 A 2.5 2.5 0 1 1 5 2" fill = "black" transform = "rotate (90 2.5 2.5)" > < / path >
< / svg >
< svg id = "LandoltC_W" 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 5 2 H 4 A 1.5 1.5 0 1 0 4 3 H 5 A 2.5 2.5 0 1 1 5 2" fill = "black" transform = "rotate (180 2.5 2.5)" > < / path >
< / 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 >
2017-02-17 00:46:40 -05:00
< / div >
2017-02-17 00:32:43 -05:00
<!-- 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() + ')');
});
};
//separating rgb from opacity allows letters to have overlapping elements
this.SetColorCharacter = function (colorHex) {
var rgba = colorHex.replace(/[^\d.,]/g, '').split(',');
var colorRGB = "rgb(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + ")";
$('#list-character').find('svg').css('opacity', rgba[3]);
$('#list-character').find('svg').find('path').css('fill', colorRGB);
$('#list-character').find('svg').find('polygon').css('fill', colorRGB);
};
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"://metres
2019-04-01 06:24:46 -04:00
var ar = [0.501, 0.631, 0.794, 1, 1.259, 1.585, 2, 2.512, 3.162, 3.981, 5.012, 6.31, 7.943, 10];
2017-02-17 00:32:43 -05:00
//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 + + ) {
2019-04-01 06:24:46 -04:00
if (a< 6 ) {
2017-02-17 00:32:43 -05:00
var score = Math.round(ar[a] * numerator * 10) / 10;
2019-04-01 06:24:46 -04:00
} else {
var score = Math.round(ar[a] * numerator);
}
2019-04-02 23:38:48 -04:00
var str = numerator + "!" + score;
2017-02-17 00:32:43 -05:00
chartArray[a] = [ar[a], str];
}
}
break;
case "2"://feet
2019-04-01 06:24:46 -04:00
var ar = [0.501, 0.631, 0.794, 1, 1.259, 1.585, 2, 2.512, 3.162, 3.981, 5.012, 6.31, 7.943, 10];
2017-02-17 00:32:43 -05:00
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 {
2019-04-02 23:38:48 -04:00
var numerator = Math.round(dist * 3.28084 / 500)/2;
2017-02-17 00:32:43 -05:00
for (a = 0; a < ar.length ; a + + ) {
2019-04-01 06:24:46 -04:00
var score = Math.round(ar[a] * numerator);
2019-04-02 23:38:48 -04:00
var str = numerator + "!" + score;
2017-02-17 00:32:43 -05:00
chartArray[a] = [ar[a], str];
}
}
break;
case "3"://logMar
2019-04-01 06:24:46 -04:00
var ar = [0.501, 0.631, 0.794, 1, 1.259, 1.585, 2, 2.512, 3.162, 3.981, 5.012, 6.31, 7.943, 10];
2017-02-17 00:32:43 -05:00
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
2019-04-01 06:24:46 -04:00
var ar = [0.501, 0.631, 0.794, 1, 1.259, 1.585, 2, 2.512, 3.162, 3.981, 5.012, 6.31, 7.943, 10];
2017-02-17 00:32:43 -05:00
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'://SnellenU
arrayCharacter = ['Snellen_N,Snellen_L,Snellen_A,Snellen_Y,Snellen_Z', 'Snellen_E,Snellen_F,Snellen_R,Snellen_D,Snellen_U', 'Snellen_T,Snellen_P,Snellen_V,Snellen_H,Snellen_X', 'Snellen_Y,Snellen_E,Snellen_L,Snellen_R,Snellen_T', 'Snellen_F,Snellen_X,Snellen_U,Snellen_D,Snellen_H', 'Snellen_A,Snellen_N,Snellen_P,Snellen_V,Snellen_Z', 'Snellen_H,Snellen_Z,Snellen_T,Snellen_Y,Snellen_D', 'Snellen_V,Snellen_F,Snellen_X,Snellen_N,Snellen_R', 'Snellen_A,Snellen_L,Snellen_P,Snellen_U,Snellen_E', 'Snellen_P,Snellen_U,Snellen_V,Snellen_F,Snellen_Y', 'Snellen_T,Snellen_A,Snellen_H,Snellen_E,Snellen_D', 'Snellen_L,Snellen_R,Snellen_N,Snellen_Z,Snellen_X', 'Snellen_D,Snellen_Y,Snellen_P,Snellen_L,Snellen_N', 'Snellen_Z,Snellen_A,Snellen_T,Snellen_F,Snellen_R']
break;
case '2'://BS4274.3
2019-04-01 06:24:46 -04:00
arrayCharacter = ['Snellen_U,Snellen_R,Snellen_N,Snellen_D,Snellen_V', 'Snellen_N,Snellen_F,Snellen_R,Snellen_Z,Snellen_E', 'Snellen_P,Snellen_D,Snellen_F,Snellen_H,Snellen_U', 'Snellen_R,Snellen_P,Snellen_N,Snellen_E,Snellen_Z', 'Snellen_D,Snellen_V,Snellen_E,Snellen_P,Snellen_R', 'Snellen_U,Snellen_D,Snellen_H,Snellen_V,Snellen_N', 'Snellen_Z,Snellen_U,Snellen_V,Snellen_F,Snellen_P', 'Snellen_E,Snellen_R,Snellen_D,Snellen_H,Snellen_Z', 'Snellen_U,Snellen_D,Snellen_P,Snellen_N,Snellen_F', 'Snellen_V,Snellen_E,Snellen_H,Snellen_U,Snellen_P', 'Snellen_F,Snellen_Z,Snellen_V,Snellen_R,Snellen_N', 'Snellen_H,Snellen_R,Snellen_E,Snellen_Z,Snellen_D', 'Snellen_N,Snellen_F,Snellen_H,Snellen_P,Snellen_Z', 'Snellen_U,Snellen_V,Snellen_F,Snellen_E,Snellen_H']
2017-02-17 00:32:43 -05:00
break;
case '3':
2019-04-01 06:24:46 -04:00
//CHNRV,DKOSZ,VORDN,HZCKX,OKVHD,ZRNSC,KSDCH,RNOVZ,DHROK,CNZSV,HOSDN,VCKZR,DHRNO,SVCKZ
arrayCharacter = ['Sloan_C,Sloan_H,Sloan_N,Sloan_R,Sloan_V', 'Sloan_D,Sloan_K,Sloan_O,Sloan_S,Sloan_V', 'Sloan_V,Sloan_O,Sloan_R,Sloan_D,Sloan_N', 'Sloan_H,Sloan_Z,Sloan_C,Sloan_K,Sloan_X', 'Sloan_O,Sloan_K,Sloan_V,Sloan_H,Sloan_D', 'Sloan_Z,Sloan_R,Sloan_N,Sloan_S,Sloan_C', 'Sloan_K,Sloan_S,Sloan_D,Sloan_C,Sloan_H', 'Sloan_R,Sloan_N,Sloan_O,Sloan_V,Sloan_Z', 'Sloan_D,Sloan_H,Sloan_R,Sloan_O,Sloan_K', 'Sloan_C,Sloan_N,Sloan_Z,Sloan_S,Sloan_V', 'Sloan_H,Sloan_O,Sloan_S,Sloan_D,Sloan_N', 'Sloan_C,Sloan_V,Sloan_K,Sloan_Z,Sloan_R', 'Sloan_D,Sloan_H,Sloan_R,Sloan_N,Sloan_O', 'Sloan_S,Sloan_V,Sloan_C,Sloan_K,Sloan_Z']
2017-02-17 00:32:43 -05:00
break;
case '4':
2019-04-01 06:24:46 -04:00
arrayCharacter = ['Sloan_V,Sloan_N,Sloan_T,Sloan_C,Sloan_E', 'Sloan_P,Sloan_X,Sloan_R,Sloan_Z,Sloan_S', 'Sloan_D,Sloan_H,Sloan_O,Sloan_L,Sloan_K', 'Sloan_E,Sloan_T,Sloan_K,Sloan_O,Sloan_D', 'Sloan_C,Sloan_S,Sloan_N,Sloan_R,Sloan_H', 'Sloan_P,Sloan_L,Sloan_X,Sloan_Z,Sloan_V', 'Sloan_N,Sloan_K,Sloan_Z,Sloan_P,Sloan_O', 'Sloan_E,Sloan_V,Sloan_R,Sloan_X,Sloan_D', 'Sloan_T,Sloan_C,Sloan_S,Sloan_L,Sloan_H', 'Sloan_V,Sloan_H,Sloan_X,Sloan_D,Sloan_S', 'Sloan_R,Sloan_O,Sloan_K,Sloan_L,Sloan_E', 'Sloan_Z,Sloan_P,Sloan_C,Sloan_N,Sloan_T', 'Sloan_T,Sloan_E,Sloan_V,Sloan_C,Sloan_R', 'Sloan_H,Sloan_L,Sloan_D,Sloan_P,Sloan_N']
2017-02-17 00:32:43 -05:00
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;
2017-02-17 00:46:40 -05:00
}
2017-02-17 00:32:43 -05:00
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) {
2019-04-01 06:24:46 -04:00
//console.log('show all');
2017-02-17 00:32:43 -05:00
$('#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');
}
};
2019-04-01 06:24:46 -04:00
2017-02-17 00:32:43 -05:00
};
this.YatesShuffle = function (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.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.duoBGFunction = function () {
//alert("duochrome function");
$('.character-line').toggleClass('duo');
};
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, duoBG) {
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();
};
};
if (duoBG != "") {
if ((e.shiftKey & & e.keyCode == duoBG)) {
callBack.duoBGFunction();
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 interger.";
}
else if (distance < 3000 ) {
result = true;
message = "Distance must be greater than 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;
};
2017-03-17 22:03:02 -04:00
this.ValidateDuplicateKey = function (element) {
$('.errorShortKey').remove();
var arr = $('.js-shortkey').map(function () {
return this.value; // $(this).val()
}).get();
function countInArray(array, what) {
2019-04-01 06:24:46 -04:00
return array.filter(item => item == what).length;
2017-03-17 22:03:02 -04:00
}
var result = false;
var currentVal = $(element).val();
if (currentVal.trim() != "") {
if (countInArray(arr, currentVal) > 1) {
result = true;
}
}
if (result) {
2017-03-07 22:50:30 -05:00
$(element).parent().append('< span class = "errorMsg errorShortKey" > ShortKey ' + currentVal + ' is duplicate. Please try again.< / span > ');
$(element).val("");
}
2017-03-17 22:03:02 -04:00
else {
$(element).parent().find('.errorShortKey').remove();
2017-03-07 22:50:30 -05:00
}
2017-03-17 22:03:02 -04:00
return result;
2017-03-07 22:50:30 -05:00
};
2017-02-17 00:32:43 -05:00
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);
localStorage.setItem("duoBG", localduoBG);
};
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();
}
});
$('.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 variable for local storage
notation = $('#sNotation').val(),
localOptotype = $('#sOptotype').val(),
localsMirrored = $('#sMirrored').val(),
localPageUp = $('#pageUp').val(),
localPageDown = $('#pageDown').val(),
localShuffle = $('#shuffle').val(),
localUnShuffle = $('#unShuffle').val(),
localduoBG = $('#duoBG').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),
sduoBG = $('#duoBG').val().trim().toUpperCase().charCodeAt(0);
lenghOfline = $('#iLengOfLine').val().trim(),
displayOrder = $('#display').val(),
sUnShuffle = $('#unShuffle').val().trim().toUpperCase().charCodeAt(0);
sduoBG = $('#duoBG').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"),
gduoBG = localStorage.getItem("duoBG");
//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);
$('#duoBG').val(gduoBG);
};
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('');
$('#duoBG').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 () {
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 () {
2019-04-01 06:24:46 -04:00
//
console.log(window.innerHeight + " " + $(window).height());
2017-02-17 00:32:43 -05:00
var maxHeight = $(window).height(),
quotalHeight = 0,
checkHeight = false;
2019-04-01 06:24:46 -04:00
$('#displaySetting >div').each(function () {
2017-02-17 00:32:43 -05:00
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.characterClick = function () {
$(document).on('click', '.char-line svg', function () {
2017-02-28 03:21:50 -05:00
var charaterSVG = $('.char-line svg');
2017-02-17 00:32:43 -05:00
if ($(this).hasClass('active')) {
$(this).removeClass('active');
2017-02-28 03:21:50 -05:00
charaterSVG.removeClass('disable')
2017-02-17 00:32:43 -05:00
} else {
$(this).addClass('active');
2017-02-28 03:21:50 -05:00
charaterSVG.addClass('disable')
2017-02-17 00:32:43 -05:00
}
})
};
2017-02-28 03:21:50 -05:00
this.scoreBoxClick = function () {
$(document).on('click', '.character-line .scoreBox', function () {
var lineSVG = $(this).prev();
var charaterLine = $('.character-line .char-line');
var charaterSVG = $('.char-line svg');
if($(this).hasClass('active')) {
$(this).removeClass('active');
charaterLine.css('visibility','visible')
charaterSVG.removeClass('disable active');
} else {
$('.character-line .scoreBox').removeClass('active');
$(this).addClass('active');
charaterLine.css('visibility','hidden')
lineSVG.css('visibility','visible');
charaterSVG.removeClass('disable active')
}
})
};
2017-02-17 00:32:43 -05:00
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(),
localduoBG = $('#duoBG').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);
sduoBG = $('#duoBG').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, sduoBG);
//close setting bar
$('.setting-bar').removeClass('active');
$('.guide-section').removeClass('active');
$('.mask').removeClass('active');
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');
}
});
2017-03-17 22:03:02 -04:00
$('.js-shortkey').on('blur', function () {
validateElement.ValidateDuplicateKey(this);
2017-03-07 22:50:30 -05:00
});
2017-02-17 00:32:43 -05:00
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.characterClick();
2017-02-28 03:21:50 -05:00
this.scoreBoxClick();
2017-02-17 00:32:43 -05:00
// this.ValidateFunction();
};
};
var configBar = new configBarSetting();
var configWolf = new ConfigWolfChart();
$(document).ready(function () {
configBar.init();
configWolf.Init();
});
< / script >
2019-04-01 06:24:46 -04:00
< script > i f ( ' s e r v i c e W o r k e r ' i n n a v i g a t o r ) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log("INDEX:Service Worker Registered"); });
}
< / script >
2017-02-17 00:32:43 -05:00
< / body >
2017-02-10 21:18:21 -05:00
< / html >
