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 >
< meta charset = "utf-8" / >
2021-05-12 01:45:23 -04:00
< title > WolfChart v< / 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" / >
< meta name = "viewport" content = "width=device-width, height=device-height, initial-scale=1" >
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;
}
2021-05-12 01:45:23 -04:00
html {
height: -webkit-fill-available;
}
2017-02-17 00:32:43 -05:00
body {
font-family: Helvetica, Arial, San serif;
font-size: 16px;
color: #666666;
line-height: 1.2;
overflow: hidden;
2021-05-12 01:45:23 -04:00
/*mobile viewport fix*/
min-height: -webkit-fill-available;
min-height: 100vh;
2017-02-17 00:32:43 -05:00
}
.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);
2021-05-12 01:45:23 -04:00
z-index: 19;
2017-02-17 00:32:43 -05:00
}
.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 {
2021-05-12 01:45:23 -04:00
-webkit-transform: translateX(0);
2017-02-17 00:32:43 -05:00
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(100vw);
transform: translateX(100vw);
}
.guide-section.active {
2021-05-12 01:45:23 -04:00
-webkit-transform: translateX(-538px);
2017-02-17 00:32:43 -05:00
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;
padding-left: 20px;
}
2021-05-12 01:45:23 -04:00
.filter-hue {
background: hsl(0,0%,85%);
padding: 25px 0 10px 0;
margin-bottom: 20px;
border-radius: 10px;
}
.col-1 {
display: table-cell;
min-width: 343px;
}
.col-2 {
display: table-cell;
min-width: 190px;
}
.col-4 {
display: table-cell;
min-width: 120px;
}
2017-02-17 00:32:43 -05:00
.col-8 {
display: table-cell;
width: 308px;
}
2021-05-12 01:45:23 -04:00
.col-12 {
display: table-cell;
width: 103px;
2017-02-17 00:32:43 -05:00
}
.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;
}
2021-05-12 01:45:23 -04:00
.input-med {
width: 210px;
}
.fg-divider {
margin:10px 5px 20px 5px;
}
2017-02-17 00:32:43 -05:00
.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;
}
2021-05-12 01:45:23 -04:00
2017-02-17 00:32:43 -05:00
.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;
}
2021-05-12 01:45:23 -04:00
.col-setting {
2017-02-17 00:32:43 -05:00
position: relative;
}
2021-05-12 01:45:23 -04:00
.col-setting i {
width: 30px;
height: 30px;
border-radius: 4px;
border:solid 1px gray;
position: absolute;
top: 10%;
left: 165px;
}
.slider {
-webkit-appearance: none;
position: absolute;
left: 40%;
width: 55%;
height: 10px;
border-radius: 5px;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
2017-02-17 00:32:43 -05:00
2021-05-12 01:45:23 -04:00
.red-slide {
background: hsl(0,80%,60%);
}
.green-slide {
background: hsl(160,80%,60%);
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
border: solid 2px rgba(50,50,50,1);
background: rgba(100,100,100,0.5);
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
border: solid 2px rgba(50,50,50,1);
background: rgba(100,100,100,0.5);
cursor: pointer;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
2017-02-17 00:32:43 -05:00
.action-button {
margin: 0;
}
}
.btn-primary {
border-color: #2d689d;
}
2021-05-12 01:45:23 -04:00
.btn-tiny {
padding: 6px 6px;
border-radius: 4px;
border: 1px solid #979797;
font-size: 15px;
color: #666666;
cursor: pointer;
min-width: 50px;
}
2017-02-17 00:32:43 -05:00
.btn[disabled] {
cursor: not-allowed;
opacity: 0.3;
}
2021-05-12 01:45:23 -04:00
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 {
2021-05-12 01:45:23 -04:00
font: bold 5.5mm helvetica,arial, sans-serif;
2017-02-17 00:32:43 -05:00
position: absolute;
2021-05-12 01:45:23 -04:00
width: 57px;
2017-02-17 00:32:43 -05:00
top: 50%;
transform: translateY(-50%);
margin-top: 0 !important;
2021-05-12 01:45:23 -04:00
background: #d8d8d8;
2017-02-17 00:32:43 -05:00
border-radius: 5px;
color: #000;
2021-05-12 01:45:23 -04:00
padding: 3px 3px;
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;
2021-05-12 01:45:23 -04:00
left: 3px;
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
z-index: 9;
}
.scoreBox.active {
box-shadow: 0 0 3px rgba(0,0,0,0.3);
background-color: red;
2019-04-17 02:04:06 -04:00
color: rgba(0,0,0,1);
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;
}
2021-05-12 01:45:23 -04:00
#letterChart {
position: relative;
2017-02-17 00:32:43 -05:00
text-align: center;
2021-05-12 01:45:23 -04:00
margin: 0;
z-index: 0;
2017-02-17 00:32:43 -05:00
}
2017-02-28 03:21:50 -05:00
2021-05-12 01:45:23 -04:00
#letterChart .character-line {
position: relative;
line-height: 0;
font-size: 0;
width: 100%;
2017-02-17 00:32:43 -05:00
}
2021-05-12 01:45:23 -04:00
.duo {
background-size: 100%;
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(0,200,127,1) 50%, rgba(0,200,127,1) 100%);
}
#letterChart .char-line {
display: inline-block;
z-index: 1;
}
#otherChart {
position: relative;
text-align: center;
margin: 0;
z-index: 0;
}
.chart {
height: 100%;
width: 100%;
display: none;
}
2017-02-17 00:32:43 -05:00
.clear-both {
height: 0;
clear: both;
}
.panel ul {
margin-left: 15px;
}
.panel ul li {
margin: 10px 0;
}
body {
margin: 0 auto;
}
2021-05-12 01:45:23 -04:00
2017-02-17 00:32:43 -05:00
.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;
}
2021-05-12 01:45:23 -04:00
.char-line svg.guide-dot {
cursor: default;
}
2017-02-17 00:32:43 -05:00
.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;
2021-05-12 01:45:23 -04:00
filter: opacity(0.3);
pointer-events: none;
}
.disabled-fg {
2017-02-17 00:32:43 -05:00
pointer-events: none;
2021-05-12 01:45:23 -04:00
filter:opacity(.2);
2017-02-17 00:32:43 -05:00
}
.errorMsg {
color: red;
font-size: 12px;
display: block;
margin-top: 10px;
}
.character-invisible {
visibility: hidden;
opacity: 0;
}
.modal-setting {
position: fixed;
z-index: 9;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.3);
}
2021-05-12 01:45:23 -04:00
#side-bar {
background: linear-gradient(0deg, rgba(138, 138, 138, 1) 0%, rgba(204, 204, 204, 1) 50%);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 3px 3px rgba(0, 0, 0, 0.19);
position:absolute;
width: 80px;
right:0px;
text-align: center;
height:100%;
z-index: 14;
}
.setting-button a {
2017-02-28 03:21:50 -05:00
display: block;
2021-05-12 01:45:23 -04:00
position: relative;
2017-02-28 03:21:50 -05:00
width: 42px;
2021-05-12 01:45:23 -04:00
height: 42px;
margin: 0 auto;
2017-02-28 03:21:50 -05:00
z-index: 9;
}
2021-05-12 01:45:23 -04:00
.setting-button svg {
position: relative;
top: 20px;
}
#clock-div {
display: block;
position: relative;
top: 30px;
width: 100%;
color: rgb(255,255,255);
font: 800 20px sans-serif;
}
#button-div {
display: block;
position: relative;
top: 40px;
}
#arrow-button-div {
display: block;
position: relative;
width:100%;
}
#arrow-button-div a {
cursor: pointer;
display:block;
text-decoration: none;
margin:0.5em 0;
}
.arrow-button {
width:52px;
}
#pic-arrow-div {
display: block;
position: relative;
margin: 0 auto;
top: 20px;
}
#pic-arrow-div a {
cursor: pointer;
display:block;
text-decoration: none;
margin: 0.5em 0;
}
.pic-arrow {
margin:-0.5em 0;
}
#function-button-div {
display: block;
position: relative;
margin: 0 auto;
top: 40px;
}
#function-button-div a {
cursor: pointer;
display:block;
text-decoration: none;
margin:0.5em 0;
}
#function-button-div svg {
width: 52px;
}
#thisBadge {
display: block;
text-align: center;
margin: 20px 0;
}
#nav-button-outer-div {
display:block;
position:fixed;
overflow:hidden;
right:0px;
bottom:40px;
background-color: transparent;
}
#nav-button-div {
2017-02-28 03:21:50 -05:00
display: block;
2021-05-12 01:45:23 -04:00
text-decoration: none;
border-radius:31px 0 0 31px;
background-color: rgb(204,204,204);
position:relative;
height:62px;
transform:translate(80%,0);
transition:0.2s ease-in-out;
}
#nav-button-div a{
cursor: pointer;
display:inline-block;
height:100%;
width:62px;
padding:10px;
}
#nav-button-div.expanded {
transform:translate(0,0);
}
/* Animista slide animations */
.slide-out-top{-webkit-animation:slide-out-top .2s cubic-bezier(.215,.61,.355,1.000) both;animation:slide-out-top .2s cubic-bezier(.215,.61,.355,1.000) both}
.slide-out-right{-webkit-animation:slide-out-right .2s cubic-bezier(.215,.61,.355,1.000) both;animation:slide-out-right .2s cubic-bezier(.215,.61,.355,1.000) both}
.slide-out-bottom{-webkit-animation:slide-out-bottom .2s cubic-bezier(.215,.61,.355,1.000) both;animation:slide-out-bottom .2s cubic-bezier(.215,.61,.355,1.000) both}
.slide-out-left{-webkit-animation:slide-out-left .2s cubic-bezier(.215,.61,.355,1.000) both;animation:slide-out-left .2s cubic-bezier(.215,.61,.355,1.000) both}
.slide-in-top{-webkit-animation:slide-in-top .2s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-top .2s cubic-bezier(.25,.46,.45,.94) both}
.slide-in-right{-webkit-animation:slide-in-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-right .2s cubic-bezier(.25,.46,.45,.94) both}
.slide-in-bottom{-webkit-animation:slide-in-bottom .2s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bottom .2s cubic-bezier(.25,.46,.45,.94) both}
.slide-in-left {-webkit-animation: slide-in-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: slide-in-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@-webkit-keyframes slide-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}@keyframes slide-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}
@-webkit-keyframes slide-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}}@keyframes slide-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}}
@-webkit-keyframes slide-out-bottom{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}@keyframes slide-out-bottom{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}
@-webkit-keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}@keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}
@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@-webkit-keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@-webkit-keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@media only screen and (max-width: 1024px) {
/* For tablets */
#side-bar {
width: 50px;
}
#clock-div {
display: none;
}
#side-bar>a svg {
width: 28px;
}
#arrow-button-div {
top: 20px;
}
#arrow-button-div>a svg {
width: 28px;
}
#thisBadge>svg {
width: 40px;
}
#pic-arrow-div {
margin: 0 auto;
top: 40px;
}
#pic-arrow-div>a svg {
width: 28px;
2017-02-28 03:21:50 -05:00
}
2021-05-12 01:45:23 -04:00
#pic-arrow-div a {
margin: 0.5em 0;
}
.pic-arrow {
margin:-0.5em 0;
}
#function-button-div {
top: 60px;
}
#function-button-div svg {
width: 28px;
}
}
< / style >
2017-02-17 00:32:43 -05:00
< / head >
< body >
<!-- dpi -->
< div id = "dpi" > < / div >
<!-- setting bar -->
2021-05-12 01:45:23 -04:00
< div id = "side-bar" >
< a class = "setting-button" href = "#setting-bar" >
< svg id = "bHamburger" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
viewBox="0 0 14 12" width="42px">
< defs > < / defs >
< rect x = "1" y = "1" width = "12" height = "10" rx = "1" fill = "none" stroke-width = "0.75" stroke = "rgb(102,102,102)" > < / rect >
< rect x = "2.5" y = "3" width = "9" height = "1" rx = "0.5" fill = "rgb(102,102,102)" stroke-width = "0" > < / rect >
< rect x = "2.5" y = "5.5" width = "9" height = "1" rx = "0.5" fill = "rgb(102,102,102)" stroke-width = "0" > < / rect >
< rect x = "2.5" y = "8" width = "9" height = "1" rx = "0.5" fill = "rgb(102,102,102)" stroke-width = "0" > < / rect >
< / svg >
< / a >
< div id = "clock-div" > < / div >
< div id = "button-div" >
< div id = "arrow-button-div" >
< a id = "btRight" > < / a >
< a id = "btLeft" > < / a >
< a id = "thisBadge" > < / a >
< / div >
< div id = "pic-arrow-div" >
< a id = "btUp" > < / a >
< a id = "btDn" > < / a >
< / div >
< div id = "function-button-div" >
< a id = "btSpacebarFunc" > < / a >
< a id = "btShuffleFunc" > < / a >
< a id = "btBgFunc" > < / a >
< / div >
< / div >
< div id = "nav-button-outer-div" >
< div id = "nav-button-div" >
< svg xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,4"
style="height:62px;margin-right:-5px;">
< path d = "M4 0V4H2A2 2 0 0 1 2 0z" fill = "rgb(114,114,114)" stroke-width = "0" / >
< circle cx = "1.5" cy = "2" r = "0.25" fill = "rgb(255,255,255)" / >
< circle cx = "2.3" cy = "2" r = "0.25" fill = "rgb(255,255,255)" / >
< circle cx = "3.1" cy = "2" r = "0.25" fill = "rgb(255,255,255)" / >
< / svg >
< / div >
< / div >
< / div >
2017-02-17 00:32:43 -05:00
< 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" >
2021-05-12 01:45:23 -04:00
< a class = "questions-btn" href = "#character-set" > ?< / a > < span > OPTOTYPES< / span >
2017-02-17 00:32:43 -05:00
< / div >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgOptotype" >
< label class = "col-2" for = "sOptotype" > Optotype< / label >
2017-02-17 00:32:43 -05:00
< 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 >
2019-04-17 02:04:06 -04:00
< option value = "4" > TumblingE< / option >
< option value = "5" > Vanishing Sloan< / option >
< option value = "6" > Shapes< / option >
2017-02-17 00:32:43 -05:00
< / select >
< / div >
< / div >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgAlphabet" >
< label class = "col-2" for = "sAlphabet" > Alphabet< / label >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgNotation" >
< label class = "col-2" for = "sNotation" > Notation< / label >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgNumerator" >
< label class = "col-2" for = "sNumerator" > Numerator< / label >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgDistance" >
< label class = "col-2" for = "iDistance" > Distance < span style = "color:red" > *< / span > < / label >
2017-02-17 00:32:43 -05:00
< div class = "col-8 " >
2021-05-12 01:45:23 -04:00
< input type = "text" class = "form-control input-sm" id = "iDistance" title = "Chart Distance" min = "3000" > < span class = "unit" > mm< / span >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgLengthOfLine" >
< label class = "col-2" for = "iLengOfLine" > Length of line below< span style = "color:red" > *< / span > < / label >
2017-02-17 00:32:43 -05:00
< div class = "col-8 " >
2021-05-12 01:45:23 -04:00
< input type = "text" class = "form-control input-sm" id = "iLengOfLine" title = "Length of Calibration Line" min = "25" max = "250" > < span class = "unit" > mm< / span > < span class = "red" > (be precise)< / span >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
< div class = "rule form-group" >
< label >
2021-05-12 01:45:23 -04:00
< svg width = "120mm" viewBox = "0 0 120 1" xmlns = "http://www.w3.org/2000/svg" >
< rect fill = "rgba(20,220,30,1)" stroke = "none" x = "0" y = "0" width = "120" height = "1" id = "calib_line" / >
2017-02-17 00:32:43 -05:00
< / svg >
< / label >
< / div >
< / fieldset >
< fieldset >
< div class = "title" >
< a class = "questions-btn" href = "#options" > ?< / a > < span > options< / span >
< / div >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgSort" >
< label class = "col-2" for = "display" > Sort< / label >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< option value = "3" > Monoyer< / option >
2017-02-17 00:32:43 -05:00
< / select >
< / div >
< / div >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgMirrored" >
< label class = "col-2" for = "sMirrored" > Mirrored / Direct< / label >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< hr class = "fg-divider" / >
< div class = "form-group" id = "fgOptoColour" >
< label class = "col-2" for = "tOptoColour" > Optotype colour< / label >
< div class = "col-setting" >
< input type = "text" id = "tOptoColour" class = "form-control input" value = "rgba(0,0,0,1)" / > < i > < / i >
< / div >
< / div >
< div class = "form-group" id = "fgPresetsOpto" >
< label class = "col-2" for = "bt100Blk" > Presets: < button class = "btn btn-tiny col-preset-opto" id = "bt100Blk" type = "button" value = "rgba(0,0,0,1)" > 100% Black< / button >
< / label >
< div class = "" >
< button class = "btn btn-tiny col-preset-opto" id = "bt10Blk" type = "button" value = "rgba(0,0,0,0.1)" > 10% Black< / button >
< button class = "btn btn-tiny col-preset-opto" id = "bt100Red" type = "button" value = "rgba(255,0,0,1)" > 100% Red< / button >
< button class = "btn btn-tiny col-preset-opto" id = "bt100Blue" type = "button" value = "rgba(0,0,255,1)" > 100% Blue< / button >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
2021-05-12 01:45:23 -04:00
< hr class = "fg-divider" / >
< div class = "form-group" id = "fgBgColour" >
< label class = "col-2" for = "tBgColour" > Background colour< / label >
< div class = "col-setting" >
< input type = "text" id = "tBgColour" class = "form-control input" value = "rgba(255,255,255,1)" / > < i > < / i >
< / div >
< / div >
< div class = "form-group" id = "fgPresetsBg" >
< label class = "col-2" for = "bt100Wh" > Presets: < button class = "btn btn-tiny col-preset-bg" id = "bt100Wh" type = "button" value = "rgba(255,255,255,1)" > 100% White< / button >
< / label >
< div class = "" >
< button class = "btn btn-tiny col-preset-bg" id = "bt90Blk" type = "button" value = "rgba(0,0,0,0.9)" > 90% Black< / button >
< button class = "btn btn-tiny col-preset-bg" id = "bt50Blk" type = "button" value = "rgba(0,0,0,0.5)" > 50% Black (mid-grey)< / button >
< / div >
< / div >
< / fieldset >
< fieldset >
< div class = "title" >
< a class = "questions-btn" href = "#filters" > ?< / a > < span > r/l filters< / span >
< / div >
< div class = "filter-hue" >
< div class = "form-group" id = "fgFilterRed" >
< label class = "col-2" for = "sliderRed" > Filter Red Hue< / label >
< div class = "" >
< input type = "range" min = "340" max = "380" value = "360" class = "slider red-slide" id = "sliderRed" >
< / div >
< / div >
< div class = "form-group" id = "fgFilterGreen" >
< label class = "col-2" for = "sliderGreen" > Filter Green/Blue Hue< / label >
< div class = "" >
< input type = "range" min = "110" max = "200" value = "160" class = "slider green-slide" id = "sliderGreen" >
2019-04-17 02:04:06 -04:00
< / div >
< / div >
< / div >
2017-02-17 00:32:43 -05:00
< / fieldset >
< fieldset >
< div class = "title" >
2021-05-12 01:45:23 -04:00
< a class = "questions-btn" href = "#shortcuts" > ?< / a > < span > shortcuts< / span >
2017-02-17 00:32:43 -05:00
< / div >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgPageUL" >
< label class = "col-4" for = "pageUp" > Page Up< / label >
< div class = "col-12" >
< input type = "text" class = "form-control input-sm js-shortkey" id = "pageUp" maxlength = "1" value = "u" >
2017-02-17 00:32:43 -05:00
< / div >
2021-05-12 01:45:23 -04:00
< label class = "col-4" for = "pageLeft" > Page Left< / label >
< div class = "col-12" >
< input type = "text" class = "form-control input-sm js-shortkey" id = "pageLeft" maxlength = "1" value = "g" >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgPageDR" >
< label class = "col-4" for = "pageDown" > Page Down< / label >
< div class = "col-12" >
< input type = "text" class = "form-control input-sm js-shortkey" id = "pageDown" maxlength = "1" value = "n" >
< / div >
< label class = "col-4" for = "pageRight" > Page Right< / label >
< div class = "col-12" >
< input type = "text" class = "form-control input-sm js-shortkey" id = "pageRight" maxlength = "1" value = "k" >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgShuffle" >
< label class = "col-1" for = "shuffle" > Toggle Shuffle< / label >
< div class = "col-12" >
< input type = "text" class = "form-control input-sm js-shortkey" id = "shuffle" maxlength = "1" value = "q" >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
2021-05-12 01:45:23 -04:00
< div class = "form-group" id = "fgDuochrome" >
< label class = "col-1" for = "duoBG" > Toggle Duochrome< / label >
< div class = "col-12" >
< input type = "text" class = "form-control input-sm js-shortkey" id = "duoBG" maxlength = "1" value = "z" >
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 >
2021-05-12 01:45:23 -04:00
<!-- end setting bar -->
2017-02-17 00:32:43 -05:00
<!-- guide section -->
< div id = "guide-section" class = "guide-section" >
2021-05-12 01:45:23 -04:00
< legend > Help< / legend >
2017-02-17 00:32:43 -05:00
< 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" >
2021-05-12 01:45:23 -04:00
< strong > Very quick guide: < / strong > Calibrate and configure your chart using the Settings form and consult this help guide if you get stuck. You will need a measuring tape to measure viewing distance and a ruler to measure the calibration line.< br / > Charts are in 4 categories; V for VA, R for Refraction, B for Binocular and M for Miscellaneous. Use the onscreen arrows or arrows on your keyboard to navigate horizontally between categories and vertically within categories. Alternatively, the category buttons in the flyout at bottom right give you one-click access to your most-used chart in that category. These category links are also mapped to the corresponding letters on your keyboard.< br / > 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. If there is a round button in the sidebar below the navigation arrows, the chart has a function mapped to the spacebar, such as zoom or rotate. You can also activate the function by clicking on or tapping the chart itself or the button.< br / > < strong > Why is one of the charts just black?< / strong > < br / > So you can darken your room with one click.< 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" >
2021-05-12 01:45:23 -04:00
< div class = "panel-heading" role = "tab" id = "character-set" >
2017-02-17 00:32:43 -05:00
< h4 class = "panel-title" >
< a href = "#" >
Optotypes
< / a >
< / h4 >
< / div >
< div id = "collapseOne" class = "panel-collapse collapse" >
< div class = "panel-body" >
2021-05-12 01:45:23 -04:00
The optotypes fields allow you to select the symbols to be displayed. You cannot change the array nor order of the lines displayed here.
2017-02-17 00:32:43 -05:00
< ul >
< li >
2021-05-12 01:45:23 -04:00
< strong > Optotype< / strong > : Select from a range of standard optotypes.
2017-02-17 00:32:43 -05:00
< / li >
< li >
2021-05-12 01:45:23 -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 more 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 >
2021-05-12 01:45:23 -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 (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") with each 3 lines doubling the subtense. Notation and Numerator express these subtenses as your preferred VA value. "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 >
2021-05-12 01:45:23 -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.< br / > "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.< br / > "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, with a ! instead of a /, and a proportionally adjusted denominator. 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" >
2021-05-12 01:45:23 -04:00
< p > The two CALIBRATION values are the < strong > only< / strong > values that influence the size of the letters. The RECORDING values above only change the VA labels on the letter chart lines, and have no bearing on the letters themselves.< / p >
2017-02-17 00:32:43 -05:00
< ul >
2021-05-12 01:45:23 -04:00
< li > < strong > Distance< / strong > : Enter the distance from the patient's eye to the letter chart in mm. Eg 6m is 6000mm. Even if you work in feet (see Notation above), you < strong > must< / strong > 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 display 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", Numerator 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 >
2021-05-12 01:45:23 -04:00
< strong > Length of the line below< / strong > : Calibrates the chart. WolfChart does not need to know anything about the screen you are using; it just needs the length of this green line as it is displayed. Measure the length of the green line as accurately as possible. On a touch screen this is tricky, but you'll work it out. 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 computer as pixel density may be different between the computer screen and the external display.
2017-02-17 00:32:43 -05:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div class = "panel panel-default" >
2021-05-12 01:45:23 -04:00
< div class = "panel-heading" role = "tab" id = "options" >
2017-02-17 00:32:43 -05:00
< h4 class = "panel-title" >
< a href = "#" >
2021-05-12 01:45:23 -04:00
Options
2017-02-17 00:32:43 -05:00
< / a >
< / h4 >
< / div >
2021-05-12 01:45:23 -04:00
< div id = "collapseFour" class = "panel-collapse collapse" >
2017-02-17 00:32:43 -05:00
< div class = "panel-body" >
2021-05-12 01:45:23 -04:00
< ul >
< li > < strong > Sort< / strong > : Unless the display is very large (about 1m wide by about 1.5m tall viewed at 6m), the letter chart will display in pages - see SHORTCUTS below. Here you can select whether to display the page of the smallest or largest lines first. If French, you have a Monoyer option. < / li >
< li > < strong > Mirrored/Direct< / strong > : Select "Direct" if WolfChart is to be viewed directly, otherwise select "Mirrored" and the letters and lines will be reversed, but the labels not. If changing this setting, don't forget to set the Distance (see above) accordingly.< / li >
< li > < strong > Optotype colour< / strong > : Defaults to solid black. Enter any valid rgba string or use the preset buttons for common values.< / li >
< li > < strong > Background colour< / strong > : Defaults to solid white. Enter any valid rgba string or use the preset button/s. If a Vanishing optotype is selected, this field is disabled.< / li >
< / ul >
2017-02-17 00:32:43 -05:00
< / div >
< / div >
< / div >
< div class = "panel panel-default" >
2021-05-12 01:45:23 -04:00
< div class = "panel-heading" role = "tab" id = "filters" >
2017-02-17 00:32:43 -05:00
< h4 class = "panel-title" >
< a href = "#" >
2021-05-12 01:45:23 -04:00
R/L Filter Hues
2017-02-17 00:32:43 -05:00
< / a >
< / h4 >
< / div >
2021-05-12 01:45:23 -04:00
< div id = "collapseFive" class = "panel-collapse collapse" >
2017-02-17 00:32:43 -05:00
< div class = "panel-body" >
2021-05-12 01:45:23 -04:00
WolfChart uses red and green targets for binocular dissociation tests. The default hues may work fine for your filters, but if not, you can set the hues using the sliders. The objective is for each slider to be only visible from one eye using red/green or red/blue goggles or trial set filters. Sometimes you can't get total invisibility, or there are two invisible settings. In either case the tests will work if you can make the two hues as different as possible when viewed through each coloured filter.
2017-02-17 00:32:43 -05:00
< / 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 >
2021-05-12 01:45:23 -04:00
< div id = "collapseSix" class = "panel-collapse collapse" >
2017-02-17 00:32:43 -05:00
< div class = "panel-body" >
2021-05-12 01:45:23 -04:00
< p > Use these fields to specify keyboard shortcuts for operating WolfChart. Certain keys eg. v, r, b and m are reserved and you will be alerted not to use them if you try.< / p >
2017-02-17 00:32:43 -05:00
< ul >
< li >
2021-05-12 01:45:23 -04:00
< strong > Page Up/Dn/Left/Right< / strong > : Page Up, Down, Left and Right are already mapped to the arrows on your keyboard, and the arrow buttons on screen. If your controller doesn't have arrow keys, add custom shortcuts here, eg u,n,g and k respectively< br / >
2017-02-17 00:32:43 -05:00
< / li >
< li >
2021-05-12 01:45:23 -04:00
< strong > Shuffle:< / strong > : Toggles shuffle of the letters. Each shuffle is random, but each unshuffle returns the alphabet to it's original order.
2017-02-17 00:32:43 -05:00
< / li >
< li >
2021-05-12 01:45:23 -04:00
< strong > Duochrome:< / strong > : Toggles a red/green background on V charts.
2017-02-17 00:32:43 -05:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- end guide - section -->
2021-05-12 01:45:23 -04:00
< div id = "letterChart" 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 >
2021-05-12 01:45:23 -04:00
< div id = "otherChart" >
<!-- these hidden divs below represent a chart each, using class for categorising.
They are hidden in the head style.
Letter charts (class='chart V') are created dynamically in PageLetterChart() -->
< div class = "chart R" id = "R0" style = "background-color: rgba(255,255,255,1);" >
< svg id = "rJCCDots" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 20 20"
width="200px">
< defs > < / defs >
< g id = "layer0" style = "display:none;" >
< circle cx = "2" cy = "10" r = "2" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "6" cy = "4" r = "2" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "6" cy = "16" r = "2" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "10" cy = "10" r = "2" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "14" cy = "4" r = "2" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "14" cy = "16" r = "2" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "18" cy = "10" r = "2" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< / g >
< g id = "layer1" >
< circle cx = "2" cy = "6" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "2" cy = "10" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "2" cy = "14" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "6" cy = "4" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "6" cy = "8" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "6" cy = "12" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "6" cy = "16" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "10" cy = "2" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "10" cy = "6" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "10" cy = "10" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "10" cy = "14" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "10" cy = "18" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "14" cy = "4" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "14" cy = "8" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "14" cy = "12" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "14" cy = "16" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "18" cy = "6" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle > < circle cx = "18" cy = "10" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< circle cx = "18" cy = "14" r = "1" fill = "rgba(0,0,0,1)" stroke = "none" > < / circle >
< / g >
< / svg >
< / div >
< div class = "chart R" id = "R1" style = "background-color: rgba(255,255,255,1);" >
< svg id = "rBullseye" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
viewBox="0 0 14 14" width="200px">
< defs > < / defs >
< g id = "layer0" style = "display:none;" >
< path
d="M 7 0 A 7 7 0 1 1 6.999 0z M 7 2 A 5 5 0 1 1 6.999 2z M 7 4 A 3 3 0 1 1 6.999 4z M 7 6 A 1 1 0 1 1 6.999 6z"
fill="#000000" stroke="none" fill-rule="evenodd">< / path >
< / g >
< g id = "layer1" >
< path
d="M 7 3.5 A 3.5 3.5 0 1 1 6.999 3.5z M 7 4.5 A 2.5 2.5 0 1 1 6.999 4.5z M 7 5.5 A 1.5 1.5 0 1 1 6.999 5.5z M 7 6.5 A 0.5 0.5 0 1 1 6.999 6.5z"
fill="#000000" stroke="none" fill-rule="evenodd">< / path >
< / g >
< / svg >
< / div >
< div class = "chart R" id = "R2" style = "background-color: rgba(255,255,255,1);" >
< svg id = "rSeptumChart" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
viewBox="0 0 40 28" width="200px">
< defs > < / defs >
< g id = "layer0" >
< / g >
< g id = "layer1" transform = "" >
< g id = "scChart" transform = "translate (10,1.5)" >
< g id = "scRGroup" transform = "translate (15,0)" >
< g id = "scTURN" transform = "translate(2,0)" >
< path d = "M0 0H4V1H2.5V5H1.5V1H0z" fill = "#000000" transform = "translate(0,2)" stroke-width = "0" >
< / path >
< path d = "M0 0V3A2 2 0 0 0 4 3V0H3V3A1 1 0 1 1 1 3 V0z" fill = "#000000"
transform="translate(0.79,10) scale(0.63)" stroke-width="0">< / path >
< path
d="M 0 0 H 2.5 A 1.5 1.5 0 0 1 2.5 3 L 4 5 H 2.8 L 1.3 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="#000000" transform="translate(1.1,16) scale (0.47)" stroke-width="0">< / path >
< path d = "M0 0H1L3 3.1V0H4V5H3L1 1.9V5H0z" fill = "#000000" transform = "translate(1.33,21) scale(0.33)"
stroke-width="0">< / path >
< / g >
< path d = "M8 0 H0V0.5H7.5V24.5H0V25H8z" fill = "#000000" transform = ""
stroke-width="0">< / path >
< / g >
< g id = "scLGroup" transform = "translate (-3,0)" >
< g id = "scHELP" transform = "translate(2,0)" >
< path d = "M0 0H1V2H3V0H4V5H3V3H1V5H0z" fill = "#000000" transform = "translate(0,2)" stroke-width = "0" >
< / path >
< path d = "M0 0H4V1H1V2H3V3H1V4H4V5H0z" fill = "#000000" transform = "translate(0.63,10) scale(0.67)"
stroke-width="0">< / path >
< path d = "M 0 0H1V4H4V5H0z" fill = "#000000" transform = "translate(1,16) scale (0.47)" stroke-width = "0" >
< / path >
< path d = "M 0 0H2.5A 1.5 1.5 0 0 1 2.5 3H1V5H0V1H1V2H2.5A 0.5 0.5 0 0 0 2.5 1H0z" fill = "#000000"
transform="translate(1.33,21) scale(0.33)" stroke-width="0">< / path >
< / g >
< path d = "M0 0H8V0.5H0.5V24.5H8V25H0z" fill = "#000000" transform = ""
stroke-width="0">< / path >
< / g >
< / g >
< / g >
< / svg >
< / div >
< div class = "chart B" id = "B0" style = "background-color:hsl(0,0%,90%);" >
< svg id = "bFixDisp" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
viewBox="0 0 28 26" width="200px" style="border: 1px black;">
< defs > < / defs >
< g >
< rect x = "1" y = "10.5" width = "26" height = "5" stroke-width = "0.1" fill = "#ffffff" stroke = "#000000" > < / rect >
< circle cx = "9" cy = "13" r = "1.5" fill = "none" stroke = "#000000" stroke-width = "1" > < / circle >
< path d = "M13.5 11H14.5V12.5H16V13.5H14.5V15H13.5V13.5H12V12.5H13.5V11" fill = "#000000" stroke-width = "0" >
< / path >
< circle cx = "19" cy = "13" r = "1.5" fill = "none" stroke = "#000000" stroke-width = "1" > < / circle >
< path class = "filterGreen" d = "M13 1H15V10H13V1" fill = "#2cd72c" stroke-width = "0" > < / path >
< path class = "filterRed" d = "M13 16H15V25H13V15" fill = "#d42c2c" stroke-width = "0" > < / path >
< / g >
< / svg >
< / div >
< div class = "chart B" id = "B1" style = "background-color:hsl(0,0%,90%);" >
< svg id = "bWorth4Dot" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
viewBox="0 0 35 35" width="200px">
< defs > < / defs >
< g id = "layer0" style = "display:none" >
< circle class = "filterGreen" cx = "17.5" cy = "15" r = "1" fill = "#2cd72c" stroke-width = "0" > < / circle >
< circle class = "filterRed" cx = "15" cy = "17.5" r = "1" fill = "#d42c2c" stroke-width = "0" > < / circle >
< circle class = "filterRed" cx = "20" cy = "17.5" r = "1" fill = "#d42c2c" stroke-width = "0" > < / circle >
< circle cx = "17.5" cy = "20" r = "1" fill = "rgba(0,0,0,1)" stroke-width = "0" > < / circle >
< / g >
< g id = "layer1" >
< circle class = "filterGreen" cx = "17.5" cy = "10" r = "2.5" fill = "#2cd72c" stroke-width = "0" > < / circle >
< circle class = "filterRed" cx = "10" cy = "17.5" r = "2.5" fill = "#d42c2c" stroke-width = "0" > < / circle >
< circle class = "filterRed" cx = "25" cy = "17.5" r = "2.5" fill = "#d42c2c" stroke-width = "0" > < / circle >
< circle cx = "17.5" cy = "25" r = "2.5" fill = "rgba(0,0,0,1)" stroke-width = "0" > < / circle >
< / g >
< / svg >
< / div >
< div class = "chart M" id = "M0" style = "background-color: rgba(0,0,0,1);" >
< / div >
< div class = "chart M" id = "M1" style = "background-color: rgba(0,0,0,1);" >
< svg id = "mWhiteDot" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
viewBox="0 0 10 10" width="200px" style="background-color: rgba(0,0,0,1);">
< defs > < / defs >
< g id = "layer0" style = "display:none;" >
< circle cx = "5" cy = "5" r = "5" fill = "rgba(255,255,255,1)" stroke = "none" > < / circle >
< / g >
< g id = "layer1" >
< circle cx = "5" cy = "5" r = "2.5" fill = "rgba(255,255,255,1)" stroke = "none" > < / circle >
< / g >
< / svg >
< / div >
< div class = "chart M animated" id = "M2" style = "background-color: rgba(0,0,0,1);" >
< svg id = "mLetterMorph" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" width = "200px" >
< defs >
< mask id = "letterMask" >
< rect x = "1" y = "1" width = "2" height = "3" fill = "#fff" / >
< / mask >
< / defs >
< polygon id = "SVGLetter" points = "" fill = "hsl(0,50%,50%)" fill-rule = "evenodd" >
< animate id = "morph0" attributeName = "points" dur = "0.35s" fill = "freeze"
from="0,0 1,0 1,2 3,2 3,0 4,0 4,5 3,5 3,3 1,3 1,5 0,5"
to="0,0 0,0 1,0 1,0 1,4 1,4 4,4 4,4 4,5 4,5 0,5 0,5"
/>
< / polygon >
< / svg >
< / div >
< div class = "chart M animated" id = "M3" style = "background-color: rgba(0,0,0,1);" >
< svg id = "mMilesElam" version = "1.1" width = "200px" viewBox = "0 0 320 320" fill = "none" stroke = "#fff"
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
< defs >
< path id = "r1" >
< animate id = "p1" attributeName = "d"
values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s"
repeatCount="indefinite" />
< animate attributeName = "stroke-width" values = "0;4;4;4;0" dur = "6s" repeatCount = "indefinite"
begin="p1.begin" />
< / path >
< path id = "r2" >
< animate attributeName = "d"
values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s"
repeatCount="indefinite" begin="p1.begin+1s" />
< animate attributeName = "stroke-width" values = "0;4;4;4;0" dur = "6s" repeatCount = "indefinite"
begin="p1.begin+1s" />
< / path >
< path id = "r3" >
< animate attributeName = "d"
values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s"
repeatCount="indefinite" begin="p1.begin+2s" />
< animate attributeName = "stroke-width" values = "0;4;4;4;0" dur = "6s" repeatCount = "indefinite"
begin="p1.begin+2s" />
< / path >
< path id = "r4" >
< animate id = "p1" attributeName = "d"
values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s"
repeatCount="indefinite" begin="p1.begin+3s" />
< animate attributeName = "stroke-width" values = "0;4;4;4;0" dur = "6s" repeatCount = "indefinite"
begin="p1.begin+3s" />
< / path >
< path id = "r5" >
< animate attributeName = "d"
values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s"
repeatCount="indefinite" begin="p1.begin+4s" />
< animate attributeName = "stroke-width" values = "0;4;4;4;0" dur = "6s" repeatCount = "indefinite"
begin="p1.begin+4s" />
< / path >
< path id = "r6" >
< animate attributeName = "d"
values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s"
repeatCount="indefinite" begin="p1.begin+5s" />
< animate attributeName = "stroke-width" values = "0;4;4;4;0" dur = "6s" repeatCount = "indefinite"
begin="p1.begin+5s" />
< / path >
< / defs >
< use xlink:href = "#r1" / >
< use xlink:href = "#r1" transform = "rotate(60 160 160)" / >
< use xlink:href = "#r1" transform = "rotate(120 160 160)" / >
< use xlink:href = "#r1" transform = "rotate(180 160 160)" / >
< use xlink:href = "#r1" transform = "rotate(240 160 160)" / >
< use xlink:href = "#r1" transform = "rotate(300 160 160)" / >
< use xlink:href = "#r2" transform = "rotate(30 160 160)" / >
< use xlink:href = "#r2" transform = "rotate(90 160 160)" / >
< use xlink:href = "#r2" transform = "rotate(150 160 160)" / >
< use xlink:href = "#r2" transform = "rotate(210 160 160)" / >
< use xlink:href = "#r2" transform = "rotate(270 160 160)" / >
< use xlink:href = "#r2" transform = "rotate(330 160 160)" / >
< use xlink:href = "#r3" / >
< use xlink:href = "#r3" transform = "rotate(60 160 160)" / >
< use xlink:href = "#r3" transform = "rotate(120 160 160)" / >
< use xlink:href = "#r3" transform = "rotate(180 160 160)" / >
< use xlink:href = "#r3" transform = "rotate(240 160 160)" / >
< use xlink:href = "#r3" transform = "rotate(300 160 160)" / >
< use xlink:href = "#r4" transform = "rotate(30 160 160)" / >
< use xlink:href = "#r4" transform = "rotate(90 160 160)" / >
< use xlink:href = "#r4" transform = "rotate(150 160 160)" / >
< use xlink:href = "#r4" transform = "rotate(210 160 160)" / >
< use xlink:href = "#r4" transform = "rotate(270 160 160)" / >
< use xlink:href = "#r4" transform = "rotate(330 160 160)" / >
< use xlink:href = "#r5" / >
< use xlink:href = "#r5" transform = "rotate(60 160 160)" / >
< use xlink:href = "#r5" transform = "rotate(120 160 160)" / >
< use xlink:href = "#r5" transform = "rotate(180 160 160)" / >
< use xlink:href = "#r5" transform = "rotate(240 160 160)" / >
< use xlink:href = "#r5" transform = "rotate(300 160 160)" / >
< use xlink:href = "#r6" transform = "rotate(30 160 160)" / >
< use xlink:href = "#r6" transform = "rotate(90 160 160)" / >
< use xlink:href = "#r6" transform = "rotate(150 160 160)" / >
< use xlink:href = "#r6" transform = "rotate(210 160 160)" / >
< use xlink:href = "#r6" transform = "rotate(270 160 160)" / >
< use xlink:href = "#r6" transform = "rotate(330 160 160)" / >
< / svg >
< / div >
< / div > <!-- end of #otherChart -->
2019-04-17 02:04:06 -04:00
<!-- The hidden div below contains all the svg for the letters. The elements are only allowed to be paths or polygons, with no strokes used. Changing optotype colour in the config settings will only change the fill of elements which are not classed "white" below. This protects the white filled elements of vanishing optotypes -->
2017-02-17 00:32:43 -05:00
< div style = "display:none;" id = "list-character" >
<!-- new Snellen -->
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_A" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
< path d = "M 0 5 L 1.45 0 H 2.55 L 4 5 H 2.95 L 2.65 4 H 1.3 L 1.6 3 H 2.375 L 2 1.65 L 1.05 5 H 0" fill = "black" > < / path >
2017-02-17 00:32:43 -05:00
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_D" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_E" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_F" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_H" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_L" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< polygon points = "0,0 1,0 1,4 4,4 4,5 0,5" fill = "black" / >
2017-02-17 00:32:43 -05:00
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_N" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_P" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_R" class = "optotype-symbol" 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_T" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_U" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_V" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< polygon points = "0,0 1.1,0 2,3.5 2.9,0 4,0 2.6,5 1.4,5" fill = "black" / >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_X" class = "optotype-symbol" 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.2,0 2,1.5 2.8,0 4,0 2.6,2.5 4,5 2.8,5 2,3.5 1.2,5 0,5 1.4,2.5" fill = "black" / >
2017-02-17 00:32:43 -05:00
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_Y" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< 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 = "black" / >
2017-02-17 00:32:43 -05:00
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Snellen_Z" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 -->
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_C" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_D" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_E" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_H" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_K" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_L" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< polygon points = "0,0 1,0 1,4 5,4 5,5 0,5" fill = "black" / >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_N" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_O" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_P" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_R" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_S" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_V" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< polygon points = "0,0 1.1,0 2.5,3.5 3.9,0 5,0 3,5 2,5" fill = "black" / >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_X" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< polygon points = "0,0 3.7,5 5,5 1.3,0" fill = "black" / >
< polygon points = "0,5 3.7,0 5,0 1.3,5" fill = "black" / >
2017-02-17 00:32:43 -05:00
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Sloan_Z" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 -->
2021-05-12 01:45:23 -04:00
< svg id = "LandoltC_N" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "LandoltC_E" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "LandoltC_S" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "LandoltC_W" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 -->
2021-05-12 01:45:23 -04:00
< svg id = "TumblingE_N" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "TumblingE_E" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "TumblingE_S" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2021-05-12 01:45:23 -04:00
< svg id = "TumblingE_W" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2017-02-17 00:32:43 -05:00
< 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 >
2019-04-17 02:04:06 -04:00
<!-- Vanishing Sloan -->
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_C" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" d = "M 5 2 H 4 A 1.52 1.5 0 1 0 4 3 H 4.5 V 3.25 H 4.18 A 1.78 1.75 0 1 1 4.18 1.75 H 4.69 A 2.29 2.27 0 1 0 4.69 3.25 H 4.5 V 3 H 5 A 2.52 2.5 0 1 1 5 2" fill = "white" stroke = "none" > < / path >
< path d = "M 4.7 1.75 A 2.29 2.27 0 1 0 4.7 3.25 H 4.18 A 1.78 1.75 0 1 1 4.18 1.75 H 4.69" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_D" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" 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 0.25 H 0.25 V 4.75 H 3.5 A 1.25 1.25 0 0 0 4.75 3.5 V 1.5 A 1.25 1.25 0 0 0 3.5 0.25 H 0 V 0" stroke = "none" fill = "white" > < / path >
< path class = "white" d = "M 0.75 0.75 H 3.5 A 0.75 0.75 0 0 1 4.25 1.5 V 3.5 A 0.75 0.75 0 0 1 3.5 4.25 H 0.75 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.75 V 0.75" stroke = "none" fill = "white" > < / path >
< path d = "M 0.25 0.25 H 3.5 A 1.25 1.25 0 0 1 4.75 1.5 V 3.5 A 1.25 1.25 0 0 1 3.5 4.75 H 0.25 V 0.75 H 0.75 V 4.25 H 3.5 A 0.75 0.75 0 0 0 4.25 3.5 V 1.5 A 0.75 0.75 0 0 0 3.5 0.75 H 0.25 V 0.25" stroke = "none" fill = "black" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_E" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" d = "M 0 0 H 5 V 1 H 1 V 2 H 5 V 3 H 1 V 4 H 5 V 5 H 0 V 0.25 H 0.25 V 4.75 H 4.75 V 4.25 H 0.75 V 2.75 H 4.75 V 2.25 H 0.75 V 0.75 H 4.75 V 0.25 H 0 V 0" fill = "white" stroke = "none" > < / path >
< path d = "M 0.25 0.25 H 4.75 V 0.75 H 0.75 V 2.25 H 4.75 V 2.75 H 0.75 V 4.25 H 4.75 V 4.75 H 0.25 V 0.25" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_H" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path d = "M 0.24 0.24 H 0.76 V 2.24 H 4.24 V 0.24 H 4.76 V 4.76 H 4.24 V 2.76 H 0.76 V 4.76 H 0.24 V 0.24" fill = "black" stroke = "none" > < / path >
< path class = "white" d = "M 0 0 H 1 V 2 H 4 V 0 H 5 V 5 H 4 V 3 H 1 V 5 H 0 V 0.24 H 0.24 V 4.76 H 0.76 V 2.76 H 4.24 V 4.76 H 4.76 V 0.24 H 4.24 V 2.24 H 0.76 V 0.24 H 0 V 0" fill = "white" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_K" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" d = "M 0 0 H 1 V 1.9 L 3.4 0 H 5 L 2.7 1.8 L 5 5 H 3.7 L 1.9 2.5 L 1 3.2 V 5 H 0 V 0.25 H 0.25 V 4.75 H 0.75 V 3.1 L 1.92 2.18 L 3.8 4.78 H 4.6 L 2.42 1.77 L 4.4 0.22 H 3.5 L 1 2.2 H 0.75 V 0.25 H 0" fill = "white" stroke = "none" > < / path >
< path d = "M 0.25 0.25 V 4.75 H 0.75 V 3.1 L 1.92 2.18 L 3.8 4.78 H 4.6 L 2.42 1.77 L 4.4 0.22 H 3.5 L 1 2.2 H 0.75 V 0.25 H 0.25" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_L" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path d = "M 0.25 0.25 H 0.75 V 4.25 H 4.75 V 4.75 H 0.25 V 0.25" stroke = "none" fill = "black" > < / path >
< path class = "white" d = "M 0 0 H 1 V 4 H 5 V 5 H 0 V 0.23 H 0.23 V 4.77 H 4.77 V 4.23 H 0.77 V 0.23 H 0 V 0" stroke = "none" fill = "white" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_N" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" d = "M 0 0 H 1.3 L 4 3.7 V 0 H 5 V 5 H 3.7 L 1 1.3 V 5 H 0 V 0.25 H 0.25 V 4.75 H 0.75 V 0.75 H 0.92 L 3.83 4.75 H 4.75 V 0.25 H 4.25 V 4.25 H 4.07 L 1.17 0.25 H 0 V 0" stroke = "none" fill = "white" > < / path >
< path d = "M 0.25 0.25 V 4.75 H 0.75 V 0.75 H 0.92 L 3.83 4.75 H 4.75 V 0.25 H 4.25 V 4.25 H 4.07 L 1.17 0.25 H 0.25" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_O" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" 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 = "white" stroke = "none" > < / path >
< path d = "M 2.5 0.25 C 5.55 0.35 5.55 4.65 2.5 4.75 V 4.25 C 4.8 4.15 4.8 0.85 2.5 0.75 V 0.25" fill = "black" stroke = "none" > < / path >
< path class = "white" 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 = "white" stroke = "none" > < / path >
< path d = "M 2.5 0.25 C -0.55 0.35 -0.55 4.65 2.5 4.75 V 4.25 C 0.2 4.15 0.2 0.85 2.5 0.75 V 0.25" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_P" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" 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 0.25 H 0.25 V 4.75 H 0.75 V 2.75 H 3.5 A 1.25 1.25 0 0 0 3.5 0.25 H 0 V 0" fill = "white" stroke = "none" > < / path >
< path d = "M 0.25 0.25 H 3.5 A 1.25 1.25 0 0 1 3.5 2.75 H 0.75 V 4.74 H 0.25 V 0.75 H 0.75 V 2.25 H 3.5 A 0.75 0.75 0 0 0 3.5 0.75 H 0.25 V 0.25" fill = "black" stroke = "none" > < / path >
< path class = "white" d = "M 0.75 0.75 H 3.5 A 0.75 0.75 0 0 1 3.5 2.25 H 0.75 V 1 H 1 V 2 H 3.5 A 0.5 0.5 0 0 0 3.5 1 H 0.75 V 0.75" fill = "white" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_R" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" d = "M 0 0 H 3.5 A 1.5 1.5 0 0 1 3.5 3 L 5 5 H 3.7 L 2.2 3 H 1 V 5 H 0 V 0.25 H 0.25 V 4.75 H 0.75 V 2.75 H 2.35 L 3.85 4.75 H 4.5 L 3 2.75 H 3.5 A 1.25 1.25 0 0 0 3.5 0.25 H 0 V 0" fill = "white" stroke = "none" > < / path >
< path d = "M 0.25 0.25 H 3.5 A 1.25 1.25 0 0 1 3.5 2.75 H 3 L 4.5 4.75 H 3.85 L 2.35 2.75 H 0.75 V 4.74 H 0.25 V 0.75 H 0.75 V 2.25 H 3.5 A 0.75 0.75 0 0 0 3.5 0.75 H 0.25 V 0.25" fill = "black" stroke = "none" > < / path >
< path class = "white" d = "M 0.75 0.75 H 3.5 A 0.75 0.75 0 0 1 3.5 2.25 H 0.75 V 1 H 1 V 2 H 3.5 A 0.5 0.5 0 0 0 3.5 1 H 0.75 V 0.75" fill = "white" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_S" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" 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 4.25 V 1.25 A 0.75 0.75 0 0 0 3.5 0.75 H 1.5 A 0.75 0.75 0 0 0 1.5 2.25 H 3.5 A 1.25 1.25 0 0 1 3.5 4.75 H 1.5 A 1.25 1.25 0 0 1 0.25 3.75 H 0.75 A 0.75 0.75 0 0 0 1.5 4.25 H 3.5 A 0.75 0.75 0 0 0 3.5 2.75 H 1.5 A 1.25 1.25 0 0 1 1.5 0.25 H 3.5 A 1.25 1.25 0 0 1 4.75 1.25 H 4.25 V 1.5 H 5" fill = "white" stroke = "none" > < / path >
< path d = "M4.75 1.25 A 1.25 1.25 0 0 0 3.5 0.25 H 1.5 A 1.25 1.25 0 0 0 1.5 2.75 H 3.5 A 0.75 0.75 0 0 1 3.5 4.25 H 1.5 A 0.75 0.75 0 0 1 0.75 3.75 H 0.25 A 1.25 1.25 0 0 0 1.5 4.75 H 3.5 A 1.25 1.25 0 1 0 3.5 2.25 H 1.5 A 0.75 0.75 0 1 1 1.5 0.75 H 3.5 A 0.75 0.75 0 0 1 4.25 1.25 H 4.75" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_T" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path d = "M 0.25 0.25 H 4.75 V 0.75 H 2.75 V 4.75 H 2.25 V 0.75 H 0.25 V 0.25" fill = "black" stroke = "none" > < / path >
< path class = "white" d = "M 0 0 H 5 V 1 H 3 V 5 H 2 V 1 H 0 V 0.24 H 0.24 V 0.76 H 2.24 V 4.76 H 2.76 V 0.76 H 4.76 V 0.24 H 0 V 0" fill = "white" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_V" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" d = "M 0 0 H 1.1 L 2.5 3.5 L 3.9 0 H 5 L 3 5 H 2 L 0.1 0.25 H 0.35 L 2.15 4.75 H 2.85 L 4.65 0.25 H 4.05 L 2.5 4.1 L 0.95 0.25 H 0.1 L 0 0" fill = "white" stroke = "none" > < / path >
< path d = "M 0.35 0.25 H 0.95 L 2.5 4.1 L 4.05 0.25 H 4.65 L 2.85 4.75 H 2.15 L 0.35 0.25" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_X" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" d = "M 0 0 H 1.3 L 2.5 1.62 L 3.7 0 H 5 L 3.15 2.5 L 5 5 H 3.7 L 2.5 3.38 L 1.3 5 H 0 L 1.85 2.5 L 0 0" fill = "white" stroke = "none" > < / path >
< path d = "M 0.43 0.22 H 1.18 L 2.5 1.97 L 3.82 0.22 H 4.57 L 2.87 2.5 L 4.57 4.78 H 3.82 L 2.5 3.03 L 1.18 4.78 H 0.43 L 2.13 2.5 L 0.43 0.22" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "VanSloan_Z" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path class = "white" d = "M 0 0 H 5 V 1 L 1.7 4 H 5 V 5 H 0 V 4 L 3.4 1 H 0 V 0.23 H 0.23 V 0.77 H 4 L 0.23 4.1 V 4.77 H 4.77 V 4.23 H 1.05 L 4.77 0.9 V 0.23 H 0 V 0" fill = "white" stroke = "none" > < / path >
< path d = "M 0.23 0.23 H 4.77 V 0.9 L 1.05 4.23 H 4.77 V 4.77 H 0.23 V 4.1 L 4 0.77 H 0.23 V 0.23" fill = "black" stroke = "none" > < / path >
< / svg >
<!-- new Shapes 5x5 -->
2021-05-12 01:45:23 -04:00
< svg id = "Shape5_C" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path d = "M2 0H3V2H5V3H3V5H2V3H0V2H2z" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Shape5_M" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path d = "M0 2H5V3H3.2L4.5 5H3.3L2.5 3.8L1.7 5H0.5L1.8 3H0z" fill = "black" > < / path >
< circle cx = "2.5" cy = "1" r = "1" fill = "black" stroke = "none" > < / circle >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Shape5_S" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path d = "M0 0H5V5H0V1H1V4H4V1H0z" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Shape5_T" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path d = "M0 5L2.5 0L5 5H3.7L2.5 2.5L1.3 5z" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Shape5_O" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path d = "M2.5 0 A 2.5 2.5 0 0 1 2.5 5 V 4 A 1.5 1.5 0 0 0 2.5 1 A 1.5 1.5 0 0 0 2.5 4 V 5 A 2.5 2.5 0 0 1 2.5 0" fill = "black" stroke = "none" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
< svg id = "Shape5_F" class = "optotype-symbol" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
2019-04-17 02:04:06 -04:00
< path d = "M2 0H3V2L2.5 2.5L2 2zz" fill = "black" stroke = "none" > < / path >
< path d = "M2 0H3V2L2.5 2.5L2 2zz" fill = "black" stroke = "none" transform = "rotate(72,2.5,2.5)" > < / path >
< path d = "M2 0H3V2L2.5 2.5L2 2zz" fill = "black" stroke = "none" transform = "rotate(144,2.5,2.5)" > < / path >
< path d = "M2 0H3V2L2.5 2.5L2 2zz" fill = "black" stroke = "none" transform = "rotate(216,2.5,2.5)" > < / path >
< path d = "M2 0H3V2L2.5 2.5L2 2zz" fill = "black" stroke = "none" transform = "rotate(288,2.5,2.5)" > < / path >
< / svg >
2021-05-12 01:45:23 -04:00
<!-- other letter chart furniture -->
<!-- guides for 6/12 and 6/6 - -->
< svg id = "red_rect" class = "guide-dot" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
< rect x = "0" cy = "0" width = "5" height = "5" fill = "rgba(255,0,0,1)" stroke = "rgba(100,100,125,1)" stroke-width = "0.05" / >
< / svg >
< svg id = "green_dot" class = "guide-dot" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,5,5" height = "8.73mm" style = "margin: 3.49mm;" >
< circle cx = "2.5" cy = "2.5" r = "1.5" fill = "rgba(0,200,127,1)" stroke = "rgba(100,120,106,1)" stroke-width = "0.05" / >
< / svg >
<!-- arrows and buttons for navigation -->
< div id = "buttons" >
< svg class = "arrow-button-prototype" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,4" overflow = "visible" >
< circle class = 'arrow-active' cx = '2' cy = '2' r = '2.4' fill = "transparent" stroke-width = "0.3" stroke = "rgb(102,102,102)" / >
< circle class = "arrow-dot" cx = "2" cy = "2" r = "2" fill = "rgb(102,102,102)" stroke-width = "0.1" stroke = "rgb(152,152,152)" / >
< path class = "arrow" d = "M1.5 0.5L3.5 2L1.5 3.5L1.1 3.3L2.3 2L1.1 0.7z" fill = "rgb(255,255,255)" stroke-width = "0" / >
< / svg >
< svg class = "up-arrow-prototype" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 5 7"
width="200px" >
< defs >
< mask id = "up-arrow-mask0" >
< path d = "M2.5 0.2H4.6A0.2 0.2 0 0 1 4.8 0.4V3.65A0.4 0.4 0 0 1 4.6 4L2.5 5L0.4 4A0.4 0.4 0 0 1 0.2 3.65V0.4A0.2 0.2 0 0 1 0.4 0.2H2.5z" transform = "translate(0.125,0.125) scale(0.95,0.95)" fill = "rgb(255,255,255)" stroke = "none" > < / path >
< / mask >
< / defs >
< g class = "up-arrow-g0" >
< path d = "M2.5 0.2H4.6A0.2 0.2 0 0 1 4.8 0.4V3.65A0.4 0.4 0 0 1 4.6 4L2.5 5L0.4 4A0.4 0.4 0 0 1 0.2 3.65V0.4A0.2 0.2 0 0 1 0.4 0.2H2.5z" fill = "rgb(255,255,255)" stroke-width = "0.16" stroke = "rgb(128,128,128)" > < / path >
< / g >
< g class = "up-arrow-g1" mask = "url(#up-arrow-mask0)" > < / g >
< g class = "up-arrow-g2" transform = "scale(1.25,1.25) translate(-0.5,-0.5)" >
< circle class = 'arrow-active' cx = '2.5' cy = '4.2' r = '1.5' fill = "transparent" stroke-width = "0.2" stroke = "rgb(102,102,102)" / >
< circle class = "arrow-dot" cx = "2.5" cy = "4.2" r = "1.2" fill = "rgb(102,102,102)" stroke-width = "0.067" stroke = "rgb(152,152,152)" / >
< path class = "arrow" d = "M2.5 3.25L3.45 4.5L3.3 4.75L2.5 4L1.7 4.75L1.55 4.5z" fill = "rgb(255,255,255)" stroke-width = "0" / >
< / g >
< / svg >
< svg class = "dn-arrow-prototype" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 5 7"
width="200px" >
< defs >
< mask id = "dn-arrow-mask0" >
< path d = "M2.5 6.8H0.4A0.2 0.2 0 0 1 0.2 6.6V3.35A0.4 0.4 0 0 1 0.4 3L2.5 2L4.6 3A0.4 0.4 0 0 1 4.8 3.35V6.6A0.2 0.2 0 0 1 4.6 6.8H2.5z" transform = "translate(0.125,0.25) scale(0.95,0.95)" fill = "rgb(255,255,255)" stroke = "none" > < / path >
< / mask >
< / defs >
< g class = "dn-arrow-g0" >
< path d = "M2.5 6.8H0.4A0.2 0.2 0 0 1 0.2 6.6V3.35A0.4 0.4 0 0 1 0.4 3L2.5 2L4.6 3A0.4 0.4 0 0 1 4.8 3.35V6.6A0.2 0.2 0 0 1 4.6 6.8H2.5z" fill = "rgb(255,255,255)" stroke-width = "0.16" stroke = "rgb(128,128,128)" > < / path >
< / g >
< g class = "dn-arrow-g1" mask = "url(#dn-arrow-mask0)" > < / g >
< g class = "dn-arrow-g2" transform = "scale(1.25,1.25) translate(-0.5,-2.5) rotate(180,2.5,4.2)" >
< circle class = 'arrow-active' cx = '2.5' cy = '4.2' r = '1.5' fill = "transparent" stroke-width = "0.2" stroke = "rgb(102,102,102)" / >
< circle class = "arrow-dot" cx = "2.5" cy = "4.2" r = "1.2" fill = "rgb(102,102,102)" stroke-width = "0.067" stroke = "rgb(152,152,152)" / >
< path class = "arrow" d = "M2.5 3.25L3.45 4.5L3.3 4.75L2.5 4L1.7 4.75L1.55 4.5z" fill = "rgb(255,255,255)" stroke-width = "0" / >
< / g >
< / svg >
< svg class = "bg-button-prototype" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,4" overflow = "visible" width = "200px" >
< defs >
< linearGradient id = "bg-grad0" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%" >
< stop offset = "50%" style = "stop-color:rgb(0,200,127);stop-opacity:1" / >
< stop offset = "50%" style = "stop-color:rgb(225,0,0);stop-opacity:1" / >
< / linearGradient >
< / defs >
< circle class = 'arrow-active' cx = '2' cy = '2' r = '2.4' fill = "transparent" stroke-width = "0.3" stroke = "rgb(102,102,102)" / >
< g id = "bg-button-duo" >
< circle class = "arrow-dot" cx = "2" cy = "2" r = "2" fill = "url(#bg-grad0)" stroke-width = "0.1" stroke = "rgb(152,152,152)" / >
< path d = "M0 0H4V1H1V2H4V3H1V4H4V5H0z" transform = "translate(1,0.75) scale(0.5,0.5)" fill = "rgb(0,0,0)" > < / path >
< / g >
< g id = "bg-button-white" display = "none" >
< circle class = "arrow-dot" cx = "2" cy = "2" r = "2" fill = "rgb(255,255,255)" stroke-width = "0.1" stroke = "rgb(152,152,152)" / >
< path d = "M0 0H4V1H1V2H4V3H1V4H4V5H0z" transform = "translate(1,0.75) scale(0.5,0.5)" fill = "rgb(0,0,0)" > < / path >
< / g >
< / svg >
< svg class = "shuffle-button-prototype" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,4" overflow = "visible" width = "200px" >
< defs >
< path id = "path-shuffle-arrow" d = "M0.5 1.2L1.1 0.7L1.2 0.8L1.1 1A1.4 1.4 0 0 1 2.2 1.9L2.1 2.1L1.8 2.1A1.1 1.1 0 0 0 1.1 1.4L1.2 1.6L1.1 1.7z" > < / path >
< / defs >
< circle class = 'arrow-active' cx = '2' cy = '2' r = '2.4' fill = "transparent" stroke-width = "0.3" stroke = "rgb(102,102,102)" / >
< circle class = "arrow-dot" cx = "2" cy = "2" r = "2" fill = "rgb(102,102,102)" stroke-width = "0.1" stroke = "rgb(152,152,152)" / >
< g id = "shuffle-button-shuffle" >
< use xlink:href = "#path-shuffle-arrow" fill = "rgb(152,152,152)" stroke = "none" / >
< use xlink:href = "#path-shuffle-arrow" transform = "rotate(180,2,2)" fill = "rgb(152,152,152)" stroke = "none" / >
< rect x = "1.5" y = "1.6" width = "1" height = "0.8" transform = "rotate(-60,2,2)" fill = "rgb(102,102,102)" stroke = "none" > < / rect >
< use xlink:href = "#path-shuffle-arrow" transform = "scale(-1,1) translate(-4,0) rotate(180,2,2)" fill = "rgb(152,152,152)" / >
< use xlink:href = "#path-shuffle-arrow" transform = "scale(-1,1) translate(-4,0)" fill = "rgb(152,152,152)" / >
< / g >
< g id = "shuffle-button-unshuffle" display = "none" >
< use xlink:href = "#path-shuffle-arrow" fill = "rgb(0,200,127)" stroke = "none" / >
< use xlink:href = "#path-shuffle-arrow" transform = "rotate(180,2,2)" fill = "rgb(0,200,127)" stroke = "none" / >
< rect x = "1.5" y = "1.6" width = "1" height = "0.8" transform = "rotate(-60,2,2)" fill = "rgb(102,102,102)" stroke = "none" > < / rect >
< use xlink:href = "#path-shuffle-arrow" transform = "scale(-1,1) translate(-4,0) rotate(180,2,2)" fill = "rgb(0,200,127)" / >
< use xlink:href = "#path-shuffle-arrow" transform = "scale(-1,1) translate(-4,0)" fill = "rgb(0,200,127)" / >
< / g >
< / svg >
< svg class = "zoom-button-prototype" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,4" overflow = "visible" width = "200px" >
< circle class = 'arrow-active' cx = '2' cy = '2' r = '2.4' fill = "transparent" stroke-width = "0.3" stroke = "rgb(102,102,102)" / >
< circle class = "arrow-dot" cx = "2" cy = "2" r = "2" fill = "rgb(102,102,102)" stroke-width = "0.1" stroke = "rgb(152,152,152)" / >
< circle cx = "1.6" cy = "1.6" r = "0.9" fill = "none" stroke-width = "0.2" stroke = "rgb(255,255,255)" > < / circle >
< path d = "M2 0L2.2 0.2V1.2H1.8V0.2L2 0z" fill = "rgb(255,255,255)" stroke = "none" transform = "translate(0.75,2.05) rotate(-45,2,0.7)" > < / path >
< g id = "zoom-button-plus" >
< path d = "M1 1.6H2.2M1.6 1V2.2" fill = "none" stroke-width = "0.3" stroke = "rgb(255,255,255)" > < / path >
< / g >
< g id = "zoom-button-minus" display = "none" >
< path d = "M1 1.6H2.2" fill = "none" stroke-width = "0.3" stroke = "rgb(255,255,255)" > < / path >
< / g >
< / svg >
< svg class = "rotate-button-prototype" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,4" overflow = "visible" width = "200px" >
< circle class = 'arrow-active' cx = '2' cy = '2' r = '2.4' fill = "transparent" stroke-width = "0.3" stroke = "rgb(102,102,102)" / >
< circle class = "arrow-dot" cx = "2" cy = "2" r = "2" fill = "rgb(102,102,102)" stroke-width = "0.1" stroke = "rgb(152,152,152)" / >
< g id = "rotate-button-cw" >
< path d = "M2 0.5A1.5 1.5 0 0 1 3.5 2L3.7 1.9L3.8 2L3.25 2.6L2.7 2L2.8 1.9L3 2A1 1 0 0 0 2 1V1z" transform = "rotate(-22,2,2)" fill = "rgb(255,255,255)" > < / path >
< path d = "M2 0.5A1.5 1.5 0 0 1 3.5 2L3.7 1.9L3.8 2L3.25 2.6L2.7 2L2.8 1.9L3 2A1 1 0 0 0 2 1V1z" transform = "rotate(158,2,2)" fill = "rgb(255,255,255)" > < / path >
< / g >
< g id = "rotate-button-ccw" transform = "scale(-1,1) translate(-4,0)" display = "none" >
< path d = "M2 0.5A1.5 1.5 0 0 1 3.5 2L3.7 1.9L3.8 2L3.25 2.6L2.7 2L2.8 1.9L3 2A1 1 0 0 0 2 1V1z" transform = "rotate(-22,2,2)" fill = "rgb(255,255,255)" > < / path >
< path d = "M2 0.5A1.5 1.5 0 0 1 3.5 2L3.7 1.9L3.8 2L3.25 2.6L2.7 2L2.8 1.9L3 2A1 1 0 0 0 2 1V1z" transform = "rotate(158,2,2)" fill = "rgb(255,255,255)" > < / path >
< / g >
< / svg >
< svg class = "interspace-button-prototype" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,4" overflow = "visible" width = "200px" >
< defs >
< path id = "path-interspace-arrow" d = "M0.4 2L1 1.5L1.1 1.6L1 1.8H2.1V2.2H1L1.1 2.4L1 2.5z" > < / path >
< / defs >
< circle class = 'arrow-active' cx = '2' cy = '2' r = '2.4' fill = "transparent" stroke-width = "0.3" stroke = "rgb(102,102,102)" / >
< circle class = "arrow-dot" cx = "2" cy = "2" r = "2" fill = "rgb(102,102,102)" stroke-width = "0.1" stroke = "rgb(152,152,152)" / >
< g id = "interspace-button-off" >
< use xlink:href = "#path-interspace-arrow" fill = "rgb(152,152,152)" stroke = "none" / >
< use xlink:href = "#path-interspace-arrow" transform = "rotate(180,2,2)" fill = "rgb(152,152,152)" stroke = "none" / >
< / g >
< g id = "interspace-button-on" display = "none" >
< use xlink:href = "#path-interspace-arrow" fill = "rgb(0,200,127)" stroke = "none" / >
< use xlink:href = "#path-interspace-arrow" transform = "rotate(180,2,2)" fill = "rgb(0,200,127)" stroke = "none" / >
< / g >
< / svg >
< svg class = "nav-button-prototype" xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0,0,4,4" overflow = "visible" >
< circle class = 'dot-active' cx = '2' cy = '2' r = '2.4' fill = 'transparent' stroke-width = '0.3' stroke = 'rgb(102,102,102)' / >
< circle class = "dot" cx = "2" cy = "2" r = "2" fill = "rgb(174,39,96)" stroke-width = "0.1" stroke = "rgb(152,152,152)" / >
< text class = "dot-text" x = "50%" y = "50%" font-size = "3" font-weight = "bold" text-anchor = "middle" dy = "0.35em" fill = "rgb(255,255,255)" > ?< / text >
< / svg >
< / div >
2019-04-17 02:04:06 -04:00
< / div >
<!-- end of hidden div of svg elements -->
2017-02-17 00:32:43 -05:00
< div class = "mask" > < / div >
< div class = "IENotice" >
2021-05-12 01:45:23 -04:00
< div class = "modal" > Your 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 >
2017-02-17 00:32:43 -05:00
< / 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);
};
2021-05-12 01:45:23 -04:00
//Version number
var ver = 2.1;
document.title += ver;
2017-02-17 00:32:43 -05:00
//main js
function configBarSetting() {
2021-05-12 01:45:23 -04:00
this.sidebar = function () {
2017-02-17 00:32:43 -05:00
$('.setting-button').on('click', function (e) {
e.preventDefault();
var target = $(this).attr('href');
$(target).addClass('active');
2021-05-12 01:45:23 -04:00
setColIconsAndPresets("tOptoColour");
setColIconsAndPresets("tBgColour");
2017-02-17 00:32:43 -05:00
$('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();
});
2021-05-12 01:45:23 -04:00
//allow colour preset buttons to update colour field and icon
$('.col-preset-opto').on('click', function (e) {
e.preventDefault();
$('.col-preset-opto').removeClass('disabled-btn');
$(this).addClass('disabled-btn');
$('#tOptoColour').val(e.target.value);
$('#tOptoColour ~ i').css('background',e.target.value);
});
$('.col-preset-bg').on('click', function (e) {
e.preventDefault();
$('.col-preset-bg').removeClass('disabled-btn');
$(this).addClass('disabled-btn');
$('#tBgColour').val(e.target.value);
$('#tBgColour ~ i').css('background',e.target.value);
});
//set the icon colours, enable/disable preset buttons
function setColIconsAndPresets (id) {
var box = $('#'+id);
box.next('i').css('background',box.val());
var presets = (id.includes("Opto")) ? ".col-preset-opto" : ".col-preset-bg";
$(presets).each(function(idx,el) {
$(el).removeClass('disabled-btn');
if (el.value == box.val()) {
$(el).addClass('disabled-btn');
}
});
}
//on updating colour fields, update icon and preset buttons
$('.col-setting input').on('change', function (e) {
e.preventDefault();
var colInput = $(this).attr('id');
setColIconsAndPresets(colInput);
});
//let filter colour sliders update the slider background
$('.slider').on('input', function (e) {
e.preventDefault;
var slider = $(this);
slider.css('background','hsl('+slider.val()+',80%,60%)');
})
//disable background colour fg when Vanishing Sloan is selected
$('#sOptotype').on('change', function (e) {
if (this.value == 5) {
$('#fgBgColour').removeClass('disabled-fg').addClass('disabled-fg');
$('#fgPresetsBg').removeClass('disabled-fg').addClass('disabled-fg');
} else {
$('#fgBgColour').removeClass('disabled-fg');
$('#fgPresetsBg').removeClass('disabled-fg');
}
});
2017-02-17 00:32:43 -05:00
};
2021-05-12 01:45:23 -04:00
this.accordion = function () {
2017-02-17 00:32:43 -05:00
// 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 () {
2021-05-12 01:45:23 -04:00
this.sidebar();
this.accordion();
2017-02-17 00:32:43 -05:00
}
};
function ConfigWolfChart() {
2021-05-12 01:45:23 -04:00
var objWolf = {};
var notation, viewWidth, viewHeight = document.documentElement.clientHeight, numeratorType, oldCharacter = [];
var chartArray = [], timeOut;
var anims = ['slide-out-top','slide-out-right','slide-out-bottom','slide-out-left','slide-in-top','slide-in-right','slide-in-bottom','slide-in-left'];
var colours = {
optotype: "",
backgrounds: {
optotype: "",
binocular: "",
},
fRedHue: "",
fGreenHue: "",
themes: {
R: 'rgb(174,39,96)',
B: 'rgb(104,154,104)',
M: 'rgb(214, 116, 10)',
},
}
var shortcuts = ['u','n','g','k','q','z'];
this.UpdateObjWolf = function () {
objWolf = {
dateCreated : Date.now(),
useCountTimer : null,
catsLength : 0,
catThis : "",
chartThis : "",
chartThisId : "",
//array of charts with spacebar functions, and the function type
hasSBFunc : [['rJCCDots','zoom'], ['rBullseye','zoom'], ['rSeptumChart','interspace'], ['bFixDisp','rotate'], ['bWorth4Dot','zoom'], ['mWhiteDot','zoom']],
pointer : 0,
animIn : "",
animOut : "",
catLeft : function () {
return (this.catThis>0) ? this.catThis-1 : this.catsLength-1;
},
catRight : function () {
return (this.catThis==this.catsLength-1) ? 0 : this.catThis+1;
},
chartU : function() {
return (this.chartThis< this [ this . catThis ] . arCharts . length-1 ) ? this . chartThis + 1 : 0 ;
},
chartD: function () {
return (this.chartThis>0) ? this.chartThis-1 : this[this.catThis].arCharts.length-1;
},
setUseCount : function (cat,id) {
//increment the useCount of the chart up one
var obj = this[cat].arCharts[id];
obj.useCount++;
},
getLastUsed : function (cat) {
return this[cat].lastUsed;
},
getMostUsed : function (cat) {
//calculate most browsed in the category
var max = -1, result = "";
var ar = this[cat].arCharts;
ar.forEach(function(el,idx) {
if (el.useCount > max) {
max = el.useCount;
result = idx;
}
});
return result;
},
cycler : function (idx,len) {
(idx< len-1 ) ? idx + + : idx = 0;
return idx;
}
}
}
this.Clock = function () {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = (m< 10 ) ? " 0 " + m : m ;
$('#clock-div').html(h + ":" + m);
var t = setTimeout(functionConfigWolfChart.Clock, 1000);
}
this.DisplayArrows = function () {
/*Charts are arranged in categories. User navigates left
and right between categories, and up and down within
categories.
Navigation links are built from the array of categories
and the categories are populated by divs in this page
(and later from external files also).
*/
//populate the arrow-button-div with arrows
$('.arrow-button-prototype').clone().appendTo('#btRight').attr({class:'arrow-button'}).on('click', function () {functionConfigWolfChart.navCat(objWolf.catRight(),'right')});
$('.arrow-button-prototype').clone().appendTo('#btLeft').css('transform','rotate(180deg)').attr({class:'arrow-button'}).on('click', function () {functionConfigWolfChart.navCat(objWolf.catLeft(),'left')});
$('.arrow-button-prototype').clone().appendTo('#btUp').css('transform','rotate(-90deg)').attr({class:'arrow-button', id:'up-arrow'}).on('click', function () {functionConfigWolfChart.scrollChart(objWolf.catThis,objWolf.chartU(),'top')});
$('.arrow-button-prototype').clone().appendTo('#btDn').css('transform','rotate(90deg)').attr({class:'arrow-button', id:'dn-arrow'}).on('click', function () {functionConfigWolfChart.scrollChart(objWolf.catThis,objWolf.chartD(),'bottom')});
//$('.nav-button-prototype').clone().appendTo('#thisBadge').attr({class:''});
$('.up-arrow-prototype').clone().appendTo('#btUp').attr({class:'pic-arrow', id:'up-pic-arrow'}).css({
width: '100%',
left: '0px',
top: '0px',
}).on('click', function () {functionConfigWolfChart.scrollChart(objWolf.catThis,objWolf.chartU(),'top')});
$('.dn-arrow-prototype').clone().appendTo('#btDn').attr({class:'pic-arrow', id:'dn-pic-arrow'}).css({
width: '100%',
left: '0px',
bottom: '0px',
}).on('click', function () {functionConfigWolfChart.scrollChart(objWolf.catThis,objWolf.chartD(),'bottom')});
//populate the function-button-div with function buttons
$('.zoom-button-prototype').clone().appendTo('#btSpacebarFunc').attr({class:'f-button zoom-button'}).hide();
$('.rotate-button-prototype').clone().appendTo('#btSpacebarFunc').attr({class:'f-button rotate-button'}).hide();
$('.interspace-button-prototype').clone().appendTo('#btSpacebarFunc').attr({class:'f-button interspace-button'}).hide();
$('.shuffle-button-prototype').clone().appendTo('#btShuffleFunc').attr({class: 'f-button shuffle-button' }).on('click', function () {
functionConfigWolfChart.shuffleLetters();
}).hide();
$('.bg-button-prototype').clone().appendTo('#btBgFunc').attr({class: 'f-button bg-button'}).on('click',function () {functionConfigWolfChart.duoBGFunction()}).hide();
//Hover function for buttons
$('.arrow-active').hide();
//mediaMatch here to set hover only for desktopdu
$('.arrow-button, .pic-arrow, .f-button').hover(function() {
$(this).find('.arrow-active').show();
}, function () {$(this).find('.arrow-active').hide();});
//animate flyout nav bar - also animated by mousenter below
$('#nav-button-div').on('click',expand);
function collapse(e) {
var el = $(e.currentTarget);
el.removeClass('expanded');
el.off('click').on('click',expand);
}
function expand(e) {
var el = $(e.currentTarget);
el.addClass('expanded');
el.off('click').on('click',collapse);
timer(parkFlyout, 3000);
}
function parkFlyout() {
$('#nav-button-div').removeClass('expanded');
//navDiv.className = '';
}
function timer(fn, secs) {
clearTimeout(timeOut);
timeOut = setTimeout(fn, secs);
}
$('#nav-button-outer-div').on('mouseenter', function () {
$('#nav-button-div').addClass('expanded');
timer(parkFlyout, 3000);
});
}
this.DisplayNavigations = function () {
var callBackFunction = this;
for (r=0;r< objWolf.catsLength ; r + + ) {
var thing = objWolf[r];
//populate the nav-button-div with category links
$('#nav-button-div').append("< a class = 'nav-link' id = 'bt" + thing.cat + "' title = '" + thing.title + "' > < / a > ");
$('#bt' + thing.cat).on('click', {id: r}, function (event) {
var data = event.data;
functionConfigWolfChart.navCat(data.id,'fav');
});
$('.nav-button-prototype').clone().appendTo('#bt' + thing.cat).attr({ class: 'nav-button' }).css({ marginBottom: '10px' });
$('#bt' + thing.cat + ' .dot').attr({ fill: thing.col });
$('#bt' + thing.cat + ' svg text').text(thing.cat);
$('.dot-active').hide();
$('.nav-button').hover(function () {
$(this).find('.dot-active').show();
}, function () { $(this).find('.dot-active').hide(); });
}
}
this.sidebarControls = function (selCat) {
var callBackFunction = this;
var thisLink = $('#bt'+objWolf[selCat].cat);
var thisCol = objWolf[selCat].col;
$('#nav-button-div a').css('background-color','transparent');
thisLink.css('background-color','rgb(102,102,102)');
//select and colour the arrows
if(selCat == 0) {
$('#up-pic-arrow, #dn-pic-arrow').hide();
$('#up-arrow, #dn-arrow').show();
} else {
$('#up-pic-arrow, #dn-pic-arrow').show();
$('#up-arrow, #dn-arrow').hide();
}
$('#btUp,#btDn').find('.arrow-dot').attr({fill:thisCol});
$('#btUp,#btDn').find('.pic-border').attr({stroke:thisCol});
$('#thisBadge').find('svg text').text(objWolf[selCat].cat).attr({fill:thisCol});
$('#thisBadge').find('.dot').attr({fill:'white',opacity:'80%',stroke:thisCol,'stroke-width':'0.25px'});
$('#btLeft .arrow-dot').attr({fill:thisCol});
$('#btRight .arrow-dot').attr({fill:thisCol});
//display the single charts above and below the current in the pic-arrows
$('.scrollPic').remove();
var chartUId = objWolf[selCat].cat+objWolf.chartU(), chartDId = objWolf[selCat].cat+objWolf.chartD();
if(selCat!=0) {
var upArrowInsLayer = $('#up-pic-arrow').find('.up-arrow-g1');
var upArrowPanel = $('#up-pic-arrow').find('.up-arrow-g0 path');
var upMiniChart = $('#' + chartUId);
upMiniChart.find('svg').clone().appendTo(upArrowInsLayer).attr({
width: '80%',
x: '10%',
y: '-10%',
class:'scrollPic',
transform: '',
height: '80%',
}).show();
upArrowPanel.attr('fill',upMiniChart.css('background-color'));
var dnArrowInsLayer = $('#dn-pic-arrow').find('.dn-arrow-g1');
var dnArrowPanel = $('#dn-pic-arrow').find('.dn-arrow-g0 path');
var dnMiniChart = $('#' + chartDId);
dnMiniChart.find('svg').clone().appendTo(dnArrowInsLayer).attr({
width: '80%',
x: '10%',
y: '30%',
class:'scrollPic',
transform: '',
height: '80%',
}).show();
dnArrowPanel.attr('fill',dnMiniChart.css('background-color'));
}
//select ánd configure the buttons for this category
if(objWolf.catThis==0) {
$('.f-button').hide();
$('.bg-button').show();
$('.shuffle-button').show();
} else {
$('.f-button').hide();
// display a space bar function button
var thisSVG = $('#' + objWolf.chartThisId).find('svg'), thisChart = objWolf[objWolf.catThis].arCharts[objWolf.chartThis];
if (thisSVG.length > 0) {
objWolf.hasSBFunc.forEach(function (el, idx) {
if (thisSVG[0].id == el[0]) {
var sbfb = $('.'+el[1]+'-button');
var buttonLayers = sbfb.find('g');
sbfb.show();
//set function button state
if(thisChart.isToggled){$(buttonLayers[0]).hide();$(buttonLayers[1]).show();}
else {$(buttonLayers[0]).show();$(buttonLayers[1]).hide();}
//special case for Worth4Dot, where zoom is in reverse - default is double-size
if(thisSVG[0].id == "bWorth4Dot") {$(buttonLayers[0]).hide();$(buttonLayers[1]).show();}
sbfb.off('click').on('click', function () { $("#" + objWolf.chartThisId).trigger('click'); })
}
});
}
}
}
this.navCat = function (selCat,anim) {
objWolf.catThis = selCat;
var thisCat = objWolf[selCat].cat;
if (!anim) {//anim=null is only used on initiating the chart
var arCharts = objWolf[selCat].arCharts;
if(displayOrder == 2 || displayOrder == 3){
objWolf.chartThis = arCharts.length-1;
} else {
objWolf.chartThis = 0;
}
} else if (anim == 'fav') {//nav buttons display most used chart in category
objWolf.chartThis = objWolf.getMostUsed(selCat);
} else {//arrow buttons display last used chart in category
objWolf.chartThis = objWolf.getLastUsed(selCat);
}
functionConfigWolfChart.scrollChart(objWolf.catThis,objWolf.chartThis,anim);
}
this.scrollChart = function (selCat,selChart,anim) {
//select charts from the divs in page
//also here we can pull charts from
//external files.
var functionConfigWolfChart = this;
if(selCat == 0) {
$('#otherChart').hide();
$('#letterChart').show();
} else {
$('#letterChart').hide();
$('#otherChart').show();
}
var charts = $('.'+objWolf[selCat].cat);
switch (anim) {
case "top":
objWolf.animOut = "slide-out-bottom"
break;
case "bottom":
objWolf.animOut = "slide-out-top"
break;
case "left":
objWolf.animOut = "slide-out-right"
break;
case "right":
objWolf.animOut = "slide-out-left"
break;
}
//When animating charts in and out, start sliding in the new chart
//shortly after starting to slide out the old chart, rather than waiting til
//slide out has finished. Then configure the sidebar controls when new chart
//has finished sliding in
if(anim != null) {//after first use
var outGoingChart = $('#'+objWolf.chartThisId);
var inComingChart = $('#'+charts[selChart].id);
$('#otherChart').css({
'background-color': inComingChart.css('background-color'),
})
if(anim !='fav') {//using arrow buttons
objWolf.animIn = 'slide-in-'+anim;
var animPromise = new Promise (function (resolve, reject) {
outGoingChart.removeClass(anims.join(' ')).addClass(objWolf.animOut);
outGoingChart.on('animationstart',resolve());
});
animPromise.then(
function() {
setTimeout(function() {
outGoingChart.removeClass(anims.join(' ')).hide();
inComingChart.addClass(objWolf.animIn).show();
functionConfigWolfChart.sidebarControls(objWolf.catThis);
},200);
},
function() {
console.log("something went wrong with the animations");
}
);
} else {//using navigation buttons
outGoingChart.removeClass(anims.join(' ')).hide();
inComingChart.show();
functionConfigWolfChart.sidebarControls(objWolf.catThis);
}
} else {//first use
$(charts[selChart]).show();
functionConfigWolfChart.sidebarControls(objWolf.catThis);
}
//update cat and chartThis
objWolf.chartThis = selChart;
objWolf.chartThisId = charts[selChart].id;
objWolf[selCat].lastUsed = selChart;
//select animation script for any charts that are animated external to their svg
var thisSVG = $('#' + objWolf.chartThisId).find('svg');
if(thisSVG.parent().hasClass('animated')) {
switch (thisSVG.attr('id')) {
case 'mLetterMorph':
functionConfigWolfChart.letterMorph();
break;
}
}
//record a use count for this chart after n seconds
var timer = objWolf.useCountTimer;
if(timer){clearTimeout(timer);}
objWolf.useCountTimer = setTimeout(function () {objWolf.setUseCount(selCat,selChart);}, 3000);
}
2017-02-17 00:32:43 -05:00
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;
2019-04-17 02:04:06 -04:00
case '5':
$('#sAlphabet').append('< option value = "7" > Vanishing ETDRS< / option > ');
break;
case '6':
2021-05-12 01:45:23 -04:00
$('#sAlphabet').append('< option value = "8" > Shapes< / option > ');
break;
}
2019-04-17 02:04:06 -04:00
});
};
2021-05-12 01:45:23 -04:00
2017-02-17 00:32:43 -05:00
//separating rgb from opacity allows letters to have overlapping elements
2021-05-12 01:45:23 -04:00
this.SetColorCharacter = function (optoCol) {
var rgba = optoCol.replace(/[^\d.,]/g, '').split(',');
2017-02-17 00:32:43 -05:00
var colorRGB = "rgb(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + ")";
2021-05-12 01:45:23 -04:00
var dotA = (parseInt(rgba[3])+1)*0.5;
$('#list-character').find('svg.optotype-symbol').css('opacity', rgba[3]);
2019-04-17 02:04:06 -04:00
//only update fill of black fills, or Vanishing optotypes won't work
2021-05-12 01:45:23 -04:00
$('#list-character').find('svg.optotype-symbol').find('path').not('.white').css({fill: colorRGB});
$('#list-character').find('svg.optotype-symbol').find('polygon').not('.white').css({fill: colorRGB});
$('.guide-dot').css({opacity: dotA,});
2019-04-17 02:04:06 -04:00
};
2021-05-12 01:45:23 -04:00
this.SetBgColor = function (bgCol) {
var rgba = bgCol.replace(/[^\d.,]/g, '').split(',');
var halftone = colours.optotype.replace(/[\d\.]+\)$/g, '0.5');
2019-04-17 02:04:06 -04:00
if(alphabetType==7){//Vanishing optotype needs background same color and half the opacity of the optotype color
2021-05-12 01:45:23 -04:00
$(document.body).css('background-color',halftone);
}
else {
$(document.body).css('background-color',bgCol);
2019-04-17 02:04:06 -04:00
}
2017-02-17 00:32:43 -05:00
};
this.SetHeightCharacter = function (distance) {
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));
2021-05-12 01:45:23 -04:00
var minCharacter = tanNumber * distance * (120 / lolb); // 120 because calibration line is 120 mm
2017-02-17 00:32:43 -05:00
chartArray[d].push(minCharacter);
};
};
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;
}
2021-05-12 01:45:23 -04:00
2017-02-17 00:32:43 -05:00
//set height for character
setHeightFunction.SetHeightCharacter(dist)
};
this.GenerateCharacter = function (alphabetType) {
var arrayCharacter = [],
convertFunction = this;
switch (alphabetType) {
2021-05-12 01:45:23 -04:00
//set alphabet for each optotype
2017-02-17 00:32:43 -05:00
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
2021-05-12 01:45:23 -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_H,Snellen_D,Snellen_F,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
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':
2019-04-17 02:04:06 -04:00
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;
case '7': arrayCharacter = ['VanSloan_C,VanSloan_H,VanSloan_N,VanSloan_R,VanSloan_V', 'VanSloan_D,VanSloan_K,VanSloan_O,VanSloan_S,VanSloan_V', 'VanSloan_V,VanSloan_O,VanSloan_R,VanSloan_D,VanSloan_N', 'VanSloan_H,VanSloan_Z,VanSloan_C,VanSloan_K,VanSloan_X', 'VanSloan_O,VanSloan_K,VanSloan_V,VanSloan_H,VanSloan_D', 'VanSloan_Z,VanSloan_R,VanSloan_N,VanSloan_S,VanSloan_C', 'VanSloan_K,VanSloan_S,VanSloan_D,VanSloan_C,VanSloan_H', 'VanSloan_R,VanSloan_N,VanSloan_O,VanSloan_V,VanSloan_Z', 'VanSloan_D,VanSloan_H,VanSloan_R,VanSloan_O,VanSloan_K', 'VanSloan_C,VanSloan_N,VanSloan_Z,VanSloan_S,VanSloan_V', 'VanSloan_H,VanSloan_O,VanSloan_S,VanSloan_D,VanSloan_N', 'VanSloan_C,VanSloan_V,VanSloan_K,VanSloan_Z,VanSloan_R', 'VanSloan_D,VanSloan_H,VanSloan_R,VanSloan_N,VanSloan_O', 'VanSloan_S,VanSloan_V,VanSloan_C,VanSloan_K,VanSloan_Z'];
break;
2021-05-12 01:45:23 -04:00
case '8': arrayCharacter = ['Shape5_S,Shape5_O,Shape5_M,Shape5_C,Shape5_T', 'Shape5_O,Shape5_M,Shape5_S,Shape5_C,Shape5_F', 'Shape5_M,Shape5_T,Shape5_O,Shape5_S,Shape5_C', 'Shape5_F,Shape5_O,Shape5_S,Shape5_M,Shape5_T', 'Shape5_F,Shape5_O,Shape5_M,Shape5_C,Shape5_T', 'Shape5_O,Shape5_S,Shape5_F,Shape5_T,Shape5_C', 'Shape5_S,Shape5_O,Shape5_M,Shape5_T,Shape5_C', 'Shape5_F,Shape5_M,Shape5_C,Shape5_S,Shape5_F', 'Shape5_O,Shape5_T,Shape5_S,Shape5_F,Shape5_C', 'Shape5_M,Shape5_O,Shape5_T,Shape5_F,Shape5_M', 'Shape5_C,Shape5_S,Shape5_F,Shape5_O,Shape5_T', 'Shape5_S,Shape5_F,Shape5_M,Shape5_S,Shape5_C', 'Shape5_O,Shape5_T,Shape5_C,Shape5_M,Shape5_F', 'Shape5_S,Shape5_M,Shape5_T,Shape5_O,Shape5_C'];
2017-02-17 00:32:43 -05:00
break;
2017-02-17 00:46:40 -05:00
}
2021-05-12 01:45:23 -04:00
//reverse the order of each line if config set to Mirrored
if(localsMirrored == 2) {
for(p=0;p< arrayCharacter.length ; p + + ) {
var arSplit = arrayCharacter[p].split(',');
arSplit.reverse();
var arJoined = arSplit.join(',');
arrayCharacter[p]=arJoined;
}
}
//add indicator dots to lines 3 (6/6 or equiv) and 6 (6/12 or equiv)
arrayCharacter[3]="red_rect,"+arrayCharacter[3]+",red_rect";
arrayCharacter[6]="green_dot,"+arrayCharacter[6]+",green_dot";
var arrayHeight = -1, counter = 0;
for (var i = 0; i < arrayCharacter.length ; i + + ) {
2017-02-17 00:32:43 -05:00
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 + + ) {
var alphabet = splitArr[x];
2021-05-12 01:45:23 -04:00
//set style and append svg
2017-02-17 00:32:43 -05:00
$('#list-character #' + alphabet).clone().css({
height: heightText + 'mm',
2021-05-12 01:45:23 -04:00
margin: heightText / 2 + 'mm',
}).attr({
id: alphabet + '_'+counter,
2017-02-17 00:32:43 -05:00
}).appendTo('#line-' + (i + 1));
2021-05-12 01:45:23 -04:00
counter ++;
2017-02-17 00:32:43 -05:00
};
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);
2021-05-12 01:45:23 -04:00
var scoreBoxCol = colours.optotype.replace(/[\d\.]+\)$/g, '1');
2019-04-17 02:04:06 -04:00
$('< div class = "scoreBox" > ' + scoreText + '< / div > ').insertAfter('#line-' + (i + 1)).css({color:scoreBoxCol});
2021-05-12 01:45:23 -04:00
//calculator viewport width - here we check if 5 letters plus 2 margins will fit on screen and if not,
//chop off end letters and try again. If even one letter won't fit, don't display the line at all
2017-02-17 00:32:43 -05:00
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)'),
2021-05-12 01:45:23 -04:00
thirdChartRemove = $('#line-' + (i + 1)).find('svg:nth-child(3)'),
fourthChartRemove = $('#line-' + (i + 1)).find('svg:nth-child(4)'),
2017-02-17 00:32:43 -05:00
fifthChartRemove = $('#line-' + (i + 1)).find('svg:nth-child(5)');
2021-05-12 01:45:23 -04:00
//allow for the scoreBox when fitting letters on lines
var lineWidth = viewWidth-60;//60 is the width of scoreBox set in style header
if (lineWidth >= svgWidth * 7) {
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();
}
2021-05-12 01:45:23 -04:00
else if (lineWidth >= svgWidth * 5) {
//console.log('5');
//remove dots
$('#line-' + (i + 1)).find('svg.guide-dot').remove();
$('#line-' + (i + 1)).find('svg').show();
}
else if (lineWidth >= svgWidth * 4) {
2017-02-17 00:32:43 -05:00
//console.log('4');
2021-05-12 01:45:23 -04:00
//remove dots
$('#line-' + (i + 1)).find('svg.guide-dot').remove();
2017-02-17 00:32:43 -05:00
$('#line-' + (i + 1)).find('svg').show();
2021-05-12 01:45:23 -04:00
thirdChartRemove.hide();
2017-02-17 00:32:43 -05:00
}
2021-05-12 01:45:23 -04:00
else if (lineWidth >= svgWidth * 3) {
2017-02-17 00:32:43 -05:00
//console.log('3');
2021-05-12 01:45:23 -04:00
$('#line-' + (i + 1)).find('svg.guide-dot').remove();
2017-02-17 00:32:43 -05:00
$('#line-' + (i + 1)).find('svg').show();
2021-05-12 01:45:23 -04:00
secondChartRemove.hide();
thirdChartRemove.hide();
2017-02-17 00:32:43 -05:00
}
2021-05-12 01:45:23 -04:00
else if (lineWidth >= svgWidth * 2) {
2017-02-17 00:32:43 -05:00
//console.log('2');
2021-05-12 01:45:23 -04:00
$('#line-' + (i + 1)).find('svg.guide-dot').remove();
2017-02-17 00:32:43 -05:00
$('#line-' + (i + 1)).find('svg').show();
secondChartRemove.hide();
2021-05-12 01:45:23 -04:00
thirdChartRemove.hide();
fourthChartRemove.hide();
2017-02-17 00:32:43 -05:00
}
2021-05-12 01:45:23 -04:00
else if (lineWidth >= svgWidth) {
2017-02-17 00:32:43 -05:00
//console.log('1');
2021-05-12 01:45:23 -04:00
$('#line-' + (i + 1)).find('svg.guide-dot').remove();
2017-02-17 00:32:43 -05:00
$('#line-' + (i + 1)).find('svg').show();
secondChartRemove.hide();
2021-05-12 01:45:23 -04:00
thirdChartRemove.hide();
fourthChartRemove.hide();
2017-02-17 00:32:43 -05:00
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
};
2021-05-12 01:45:23 -04:00
this.GenerateSingleCharts = function () {
var callBackFunction = this;
//make all charts not class V 100% height
var otherChart = $('#otherChart');
otherChart.css({
'height':viewHeight,
'width':viewWidth,
});
//select svg of all the charts that aren't class V
var charts = $('.chart:not(.V)')
var chartsSVG = charts.find('svg');
//all single charts except animations are based on minimum element subtense equivalent to a 6/12 letter
//get subtense of 2 arcmin calculated already for the letter charts, converted to pixels
var elSubtense = callBackFunction.ConvertMMToPixel(chartArray[6][2]/5);
for (var s=0;s< chartsSVG.length ; s + + ) {
var svg = chartsSVG[s];
//svg is centred with css text-align on the chart
var svgW = svg.viewBox.baseVal.width*elSubtense, svgH = svg.viewBox.baseVal.height*elSubtense,
svgX = viewWidth/2-svgW/2, svgY = viewHeight/2-svgH/2;
var strTrans = 'translate(0,'+svgY+')';
if(localsMirrored == 2) {
strTrans += 'scale(-1,1)';
}
var thisChart = $('#'+chartsSVG[s].id);
if(!thisChart.parent().hasClass('animated')) {//exclude animated charts which will be fullscreen
thisChart.attr({
'transform':strTrans,
'width':svgW,
});
} else {
thisChart.attr({
'width': viewWidth,
'height': viewHeight*0.8,
'transform': 'translate(0,'+viewHeight*0.1+')',
});
}
}
//update filter hues
$('.filterGreen').attr('fill','hsl('+colours.fGreenHue+',80%,60%)');
$('.filterRed').attr('fill','hsl('+colours.fRedHue+',80%,60%)');
//put a function on each single chart that can be mapped to spacebar
var singleCharts = $('.chart:not(.V)');
singleCharts.each(function (idx,el) {
var elem = $(el).find('svg');
if (elem.length>0){
$(el).off();
$(el).on('click',callBackFunction.spaceBarFunc);
}
});
};
this.spaceBarFunc = function (e) {
var callBackFunction = this;
var el = $(e.currentTarget).children('svg')[0];
var thisChart = objWolf[objWolf.catThis].arCharts[objWolf.chartThis];
switch (el.id) {
case 'rSeptumChart':
spaceSeptumChart(el);
break;
case 'bFixDisp':
rotate90(el);
swapSVGLayers($('.rotate-button'));
thisChart.isToggled = !thisChart.isToggled;
break;
case 'rJCCDots':
case 'rBullseye':
case 'bWorth4Dot':
case 'mWhiteDot':
swapSVGLayers(el);
swapSVGLayers($('.zoom-button'));
thisChart.isToggled = !thisChart.isToggled;
break;
default:
break;
}
function swapSVGLayers (el) {
var layers = $(el).children('g');
layers.each(function(idx,el) {
$(el).toggle();
});
}
function rotate90 (el) {
var angle = 0, trans = $(el).attr('transform');
angle = 90;
if(!objWolf.isRotated){trans +=' rotate('+angle+')';}
else {
var arTrans = trans.split(' ');
trans = arTrans[0];
}
$(el).attr('transform',trans);
}
function spaceSeptumChart () {
var thisChart = objWolf[objWolf.catThis].arCharts[objWolf.chartThis].isToggled = true;
var buttonLayers = $('.interspace-button').find('g');
$(buttonLayers[0]).hide();
$(buttonLayers[1]).show();
var scLGroup = $('#scLGroup'), scRGroup = $('#scRGroup');
var trans = [scRGroup.attr('transform'),scLGroup.attr('transform')], transX =[];
trans.forEach(function (el, idx) {
transX[idx] = getXTrans(el);
});
if (transX[0] == 22) {
transX=[15,-3];
thisChart.isToggled = false;
swapSVGLayers($('.interspace-button'));
}
scRGroup.attr('transform','translate('+(transX[0]+1)+',0)');
scLGroup.attr('transform','translate('+(transX[1]-1)+',0)');
function getXTrans (str) {
var temp=str.substring(
str.lastIndexOf("(") + 1,
str.lastIndexOf(",")
);
return parseInt(temp);
}
}
}
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;
2021-05-12 01:45:23 -04:00
}
this.shuffleLetters = function () {
if(objWolf.catThis == 0) {
var callBack = this;
callBack.swapSVGLayers($('.shuffle-button'));
if(!objWolf.isShuffled) {
$('.char-line').each(function (index) {
var parent = $(this);
var arVisible = parent.find('svg:not([style*="display: none"])'),
arDots = parent.find('svg.guide-dot');
//count how many letters are visible
var lineLength = arVisible.length;
//hide all the letters
arAlphabet = parent.find('svg.optotype-symbol').hide(),
//shuffle them
arAlphabet = callBack.YatesShuffle(arAlphabet);
//append shuffled letters to the number in the pre-shuffled line
for (i = 0; i < lineLength ; i + + ) {
$(arAlphabet[i]).appendTo(parent).show();
}
if (arDots.length != 0) {
parent.prepend(arDots[0]).append(arDots[1]);
}
$('#sUnshuffled').attr('display','block');
$('#sShuffled').attr('display','none');
});
} else {
callBack.UnShuffleFunction(oldCharacter);
$('#sUnshuffled').attr('display','none');
$('#sShuffled').attr('display','block');
}
objWolf.isShuffled=!objWolf.isShuffled;
}
}
2017-02-17 00:32:43 -05:00
this.UnShuffleFunction = function (oldCharacter) {
for (i = 0; i < oldCharacter.length ; i + + ) {
var id = oldCharacter[i][0],
svg = oldCharacter[i][1];
2021-05-12 01:45:23 -04:00
var dataLine = $('.chart.V').find('>div[data-line=' + id + ']').html(svg);
}
2017-02-17 00:32:43 -05:00
};
this.duoBGFunction = function () {
2021-05-12 01:45:23 -04:00
var callBack = this;
if(objWolf.catThis == 0) {
$('#letterChart').toggleClass('duo');
objWolf.isDuo = !objWolf.isDuo;
callBack.swapSVGLayers($('.bg-button'));
}
2017-02-17 00:32:43 -05:00
};
2021-05-12 01:45:23 -04:00
this.swapSVGLayers = function (el) {
var layers = $(el).children('g');
layers.each(function(idx,el) {
$(el).toggle();
2017-02-17 00:32:43 -05:00
});
2021-05-12 01:45:23 -04:00
}
this.letterMorph = function () {
var callBack = this;
var arPolygons = $('#list-character .optotype-symbol[id^=Snellen_] polygon'), maxLen = 0, counter = 0;
var interval = arPolygons.length * 1350;
var hue=0;
//find the max length the polygon points array
for (var a = 0; a < arPolygons.length ; a + + ) {
var len = arPolygons[a].points.length
if (len > maxLen) {
maxLen = len;
2017-02-17 00:32:43 -05:00
}
}
2021-05-12 01:45:23 -04:00
//make all the polygon points arrays the same length
for (var b = 0; b < arPolygons.length ; b + + ) {
var len = maxLen - arPolygons[b].points.length, ar = [];
if (arPolygons[b].points.length < 12 ) {
for (var d = 0; d < len ; d + + ) {
var dummyPt = document.getElementById("mLetterMorph").createSVGPoint({
x: 0,
y: 0,
})
arPolygons[b].points.appendItem(dummyPt);
}
2017-02-17 00:32:43 -05:00
}
2021-05-12 01:45:23 -04:00
}
//make animations between each polygon
var starter = setTimeout(() => {
newLetterMorph();
}, 1000);
var timer = setInterval(() => {
newLetterMorph();
}, (interval+1000));
var timer2 = setInterval(() => {
hue=Math.random()*360;
$('#SVGLetter').attr({
fill: 'hsl('+hue+',50%,50%)',
})
}, 450);
function newLetterMorph() {
arPolygons = YatesShuffle(arPolygons);
var newTarget = $('#mLetterMorph').clone();
newTarget.find('#SVGLetter :not(:first-child)').remove();
makeAnimations(newTarget.find('#SVGLetter'));
$('#mLetterMorph').replaceWith(newTarget);
}
function makeAnimations(targetPolygon) {
targetPolygon.find('#morph0').attr({
from: $(arPolygons[0]).attr('points'),
to: $(arPolygons[1]).attr('points'),
});
for (var e = 1; e < arPolygons.length ; e + + ) {
var animId = "morph" + (e - 1);
targetPolygon.find('#morph0').clone().attr({
id: "morph" + e,
begin: animId + ".end +1s",
from: $(arPolygons[e]).attr('points'),
to: $(arPolygons[e + 1]).attr('points'),
}).appendTo(targetPolygon);
}
var lastAnim = $(targetPolygon).find(':last-child');
lastAnim.attr({
to: $(arPolygons[0]).attr('points'),
})
//console.log(targetPolygon);
}
function YatesShuffle (array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * i); // no +1 here!.attr('points')
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
}
this.ShortCutKey = function (pageUp, pageDown, pageLeft, pageRight, shuffle, duoBG) {
2017-02-17 00:32:43 -05:00
var callBack = this;
document.body.onkeyup = function (e) {
2021-05-12 01:45:23 -04:00
//disable shortcuts if setting bar is active
if(!$('#setting-bar').hasClass('active')) {
//exclude the ctrl key wherever a letter is the keycode, but not the arrows
if (pageUp != "") {
if (e.keyCode == pageUp & & e.ctrlKey == false) {
callBack.scrollChart(objWolf.catThis,objWolf.chartU(),'top');
};
2017-02-17 00:32:43 -05:00
};
2021-05-12 01:45:23 -04:00
if (pageDown != "") {
if (e.keyCode == pageDown & & e.ctrlKey == false) {
callBack.scrollChart(objWolf.catThis,objWolf.chartD(),'bottom');
};
2017-02-17 00:32:43 -05:00
};
2021-05-12 01:45:23 -04:00
if (pageLeft != "") {
if (e.keyCode == pageLeft & & e.ctrlKey == false) {
callBack.navCat(objWolf.catLeft(),'left');
};
};
if (pageRight != "") {
if (e.keyCode == pageRight & & e.ctrlKey == false) {
callBack.navCat(objWolf.catRight(),'right');
};
};
if (e.keyCode == 38) {
2017-02-17 00:32:43 -05:00
e.preventDefault();
2021-05-12 01:45:23 -04:00
callBack.scrollChart(objWolf.catThis,objWolf.chartU(),'top');
2017-02-17 00:32:43 -05:00
};
2021-05-12 01:45:23 -04:00
if (e.keyCode == 40) {
2017-02-17 00:32:43 -05:00
e.preventDefault();
2021-05-12 01:45:23 -04:00
callBack.scrollChart(objWolf.catThis,objWolf.chartD(),'bottom');
2017-02-17 00:32:43 -05:00
};
2021-05-12 01:45:23 -04:00
if (e.keyCode == 37) {
2017-02-17 00:32:43 -05:00
e.preventDefault();
2021-05-12 01:45:23 -04:00
callBack.navCat(objWolf.catLeft(),'left');
2017-02-17 00:32:43 -05:00
};
2021-05-12 01:45:23 -04:00
if (e.keyCode == 39) {
e.preventDefault();
callBack.navCat(objWolf.catRight(),'right');
};
if (e.keyCode == 86 & & e.ctrlKey == false) {
e.preventDefault();
callBack.navCat(0,'fav');
};
if (e.keyCode == 82 & & e.ctrlKey == false) {
e.preventDefault();
callBack.navCat(1,'fav');
};
if (e.keyCode == 66 & & e.ctrlKey == false) {
e.preventDefault();
callBack.navCat(2,'fav');
};
if (e.keyCode == 77 & & e.ctrlKey == false) {
e.preventDefault();
callBack.navCat(3,'fav');
};
if (e.key === ' ' || e.key === 'Spacebar') {
e.preventDefault();
$("#"+objWolf.chartThisId).trigger('click');
}
if (shuffle != "") {
if (e.keyCode == shuffle & & e.ctrlKey == false) {
e.preventDefault();
callBack.shuffleLetters();
}
};
if (duoBG != "") {
if (e.keyCode == duoBG & & e.ctrlKey == false) {
e.preventDefault();
callBack.duoBGFunction();
};
};
}
};//end of onkeyup
2017-02-17 00:32:43 -05:00
};
this.ValidateFunction = function () {
var result = false,
2021-05-12 01:45:23 -04:00
resultDistance, resultLength;
2017-02-17 00:32:43 -05:00
var validateFunction = this;
$('#iDistance').on('change', function () {
resultDistance = validateFunction.ValidateDistance();
});
$('#iLengOfLine').on('change', function () {
resultLength = validateFunction.ValidateLengOfLine();
});
2021-05-12 01:45:23 -04:00
if (resultDistance || resultLength) {
2017-02-17 00:32:43 -05:00
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;
2021-05-12 01:45:23 -04:00
message = "Distance must be integer.";
2017-02-17 00:32:43 -05:00
}
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;
};
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();
2021-05-12 01:45:23 -04:00
//reserve the shortcut keys for chart categories
arr = [...arr,'v','r','b','m'];
2017-03-17 22:03:02 -04:00
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) {
2021-05-12 01:45:23 -04:00
$(element).parent().append('< span class = "errorMsg errorShortKey" > ShortKey ' + currentVal + ' is duplicate, or is reserved for another function. Please try again.< / span > ');
2017-03-07 22:50:30 -05:00
$(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 () {
2021-05-12 01:45:23 -04:00
localStorage.setItem("Ver", ver);
2017-02-17 00:32:43 -05:00
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("Mirrored", localsMirrored);
2021-05-12 01:45:23 -04:00
localStorage.setItem("Colours", JSON.stringify(colours));
localStorage.setItem("ObjWolf", JSON.stringify(objWolf));
localStorage.setItem("Shortcuts", JSON.stringify(shortcuts));
2017-02-17 00:32:43 -05:00
};
2021-05-12 01:45:23 -04:00
this.SetScoreBoxFont = function () {
//reduce font size of scoreBox from that set in css
//if Notation is Feet, or is Metres and Numerator is Actual
//other Notations have no numerator so are max 4 chars
if(notation==2 || (notation==1 & & numeratorType==1)) {
$('.scoreBox').css({
'font-size': '4mm',
});
}
}
//reverse the characters for mirrored display. The order of characters is also reversed at the point where
//the lines are built from the arrayCharacter variable above
2017-02-17 00:32:43 -05:00
this.SetDirectCharacter = function (localsMirrored) {
if (localsMirrored == "2") {
2021-05-12 01:45:23 -04:00
$('#letterChart svg').css('transform', 'rotateY(180deg)');
2017-02-17 00:32:43 -05:00
}
else {
2021-05-12 01:45:23 -04:00
$('#letterChart svg').css('transform', 'rotateY(0deg)');
2017-02-17 00:32:43 -05:00
}
};
this.ResetValueToDefault = function () {
var setConfigDefault = this;
$('#reset').on('click', function () {
2021-05-12 01:45:23 -04:00
setConfigDefault.SetConfigDefault();
2017-02-17 00:32:43 -05:00
//set variable for local storage
notation = $('#sNotation').val(),
2021-05-12 01:45:23 -04:00
localOptotype = $('#type').val(),
2017-02-17 00:32:43 -05:00
localsMirrored = $('#sMirrored').val(),
localDistance = $('#iDistance').val().trim(),
numeratorType = $('#sNumerator').val(),
alphabetType = $('#sAlphabet').val(),
2021-05-12 01:45:23 -04:00
shortcuts[0] = $('#pageUp').val().trim(),
shortcuts[1] = $('#pageDown').val().trim(),
shortcuts[2] = $('#pageLeft').val().trim(),
shortcuts[3] = $('#pageRight').val().trim(),
shortcuts[4] = $('#shuffle').val().trim(),
shortcuts[5] = $('#duoBG').val().trim(),
2017-02-17 00:32:43 -05:00
lenghOfline = $('#iLengOfLine').val().trim(),
displayOrder = $('#display').val(),
setConfigDefault.SetLocalStorage();
2021-05-12 01:45:23 -04:00
$('#letterChart > div').find('.char-line').html('');
$('#letterChart > div').find('.scoreBox').remove();
2017-02-17 00:32:43 -05:00
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
2021-05-12 01:45:23 -04:00
setConfigDefault.removeLetterChartPage();
2017-02-17 00:32:43 -05:00
$('.char-line').removeAttr('style');
2021-05-12 01:45:23 -04:00
configBar.init();
2017-02-17 00:32:43 -05:00
});
};
2021-05-12 01:45:23 -04:00
this.GetConfigByValue = function () {
2017-02-17 00:32:43 -05:00
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"),
2021-05-12 01:45:23 -04:00
gMirrored = localStorage.getItem("Mirrored");
gColours = JSON.parse(localStorage.getItem("Colours")),
objWolf = JSON.parse(localStorage.getItem("ObjWolf")),
gShortcuts = JSON.parse(localStorage.getItem("Shortcuts"));
2017-02-17 00:32:43 -05:00
//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);
$('#sMirrored').val(gMirrored);
2021-05-12 01:45:23 -04:00
$('#tOptoColour').val(gColours.optotype);
$('#tBgColour').val(gColours.backgrounds.optotype);
$('#sliderRed').val(gColours.fRedHue);
$('#sliderGreen').val(gColours.fGreenHue);
$('#pageUp').val(gShortcuts[0]);
$('#pageDown').val(gShortcuts[1]);
$('#pageLeft').val(gShortcuts[2]);
$('#pageRight').val(gShortcuts[3]);
$('#shuffle').val(gShortcuts[4]);
$('#duoBG').val(gShortcuts[5]);
2017-02-17 00:32:43 -05:00
};
2021-05-12 01:45:23 -04:00
this.SetConfigDefault = function () {
2017-02-17 00:32:43 -05:00
//set value for input
$('#sOptotype').val("1").change();
$('#sAlphabet').val("2");
$('#sNotation').val("1");
$('#sNumerator').val("2");
$('#display').val('1');
$('#sMirrored').val('2');
2021-05-12 01:45:23 -04:00
colours = {
optotype: 'rgba(0,0,0,1)',
backgrounds: {
optotype: 'rgba(255,255,255,1)',
binocular: 'hsl(0,0%,60%)',
},
fRedHue: '360',
fGreenHue: '160',
themes: {
R: 'rgb(174,39,96)',
B: 'rgb(154,204,154)',
M: 'rgb(214, 116, 10)',
},
}
$('#tOptoColour').val(colours.optotype).siblings('i').css('background-color',colours.optotype);
$('#tBgColour').val(colours.backgrounds.optotype).siblings('i').css('background-color',colours.backgrounds.optotype);
$('#sliderRed').val(colours.fRedHue).css('background','hsl('+colours.fRedHue+',80%,60%)');
$('#sliderGreen').val(colours.fGreenHue).css('background','hsl('+colours.fGreenHue+',80%,60%)');
2017-02-17 00:32:43 -05:00
$('#iDistance').val('');
$('#iLengOfLine').val('');
2021-05-12 01:45:23 -04:00
shortcuts = ['u','n','g','k','q','z'];
$('#pageUp').val(shortcuts[0]);
$('#pageDown').val(shortcuts[1]);
$('#pageLeft').val(shortcuts[2]);
$('#pageRight').val(shortcuts[3]);
$('#shuffle').val(shortcuts[4]);
$('#duoBG').val(shortcuts[5]);
2019-04-17 02:04:06 -04:00
};
2021-05-12 01:45:23 -04:00
this.UpdateVersion = function (version) {
//console.log(version+", "+colours+", "+shortcuts);
var majVer = Math.floor(version), minVer = (version-majVer)*10;
//create new storage items
localStorage.setItem("Ver",JSON.stringify(version));
//convert old storage items
var reserved = ['v','r','b','m'],oldShortcuts=[],banned="",errMess="";
oldShortcuts[0] = localStorage.getItem("PageUp");
oldShortcuts[1] = localStorage.getItem("PageDown");
oldShortcuts[4] = localStorage.getItem("Shuffle");
oldShortcuts[5] = localStorage.getItem("duoBG");
oldShortcuts.forEach(function (val,idx) {
if(reserved.includes(val)) {
shortcuts[idx]="";
errMess = "Warning:\nOne or more of your keyboard shortcuts will no longer work, as it is now reserved for something else. Please assign new shortcut(s) at the bottom of the config menu";
} else {
shortcuts[idx] = val;
2017-02-17 00:32:43 -05:00
}
});
2021-05-12 01:45:23 -04:00
colours.optotype = localStorage.getItem("TextColor");
colours.backgrounds.optotype = localStorage.getItem("BgColor");
localStorage.setItem("Colours",JSON.stringify(colours));
localStorage.setItem("Shortcuts",JSON.stringify(shortcuts));
//destroy no longer needed items
localStorage.removeItem("PageUp");
localStorage.removeItem("PageDown");
localStorage.removeItem("Shuffle");
localStorage.removeItem("Unshuffle");
localStorage.removeItem("duoBG");
localStorage.removeItem("TextColor");
localStorage.removeItem("BgColor");
//alert
var alertMess = "You have updated to WolfChart "+majVer+". Please take a moment to review your settings."
if(errMess!="") {
alert (alertMess+"\n"+errMess);
} else {
alert (alertMess);
}
}
2017-02-17 00:32:43 -05:00
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
};
2021-05-12 01:45:23 -04:00
this.removeLetterChartPage = function () {
var $scrollDiv = $('#letterChart').find('.V');
2017-02-17 00:32:43 -05:00
if ($scrollDiv.length > 0) {
$scrollDiv.each(function () {
2021-05-12 01:45:23 -04:00
$(this).find('>div').detach().appendTo('#letterChart');
2017-02-17 00:32:43 -05:00
});
};
2021-05-12 01:45:23 -04:00
$('.V').remove();
2017-02-17 00:32:43 -05:00
};
2021-05-12 01:45:23 -04:00
this.PageLetterChart = function () {
//#letterChart has been filled with lines of letters from smallest to largest but they are not in pages
//maintain this order
if(objWolf.chartThis){objWolf.chartThis = null};
var firstLine = parseInt($('#letterChart > div:nth-child(1)').attr('data-line')),
secondLine = parseInt($('#letterChart > div:nth-child(2)').attr('data-line'));
if (firstLine > secondLine) {
$('#letterChart > div').each(function () {
$(this).detach().prependTo($('#letterChart'))
});
}
//most efficient to page the letter chart now, then rearrange for Option Sort
var quotalHeight = 0, pageCounter = 0;
$('#letterChart >div').each(function () {
2017-02-17 00:32:43 -05:00
if ($(this).find('.char-line').height() > 0) {
2021-05-12 01:45:23 -04:00
if ($(this).height() + quotalHeight < = viewHeight) {
2017-02-17 00:32:43 -05:00
quotalHeight = quotalHeight + $(this).height();
}
else {
quotalHeight = $(this).height();
2021-05-12 01:45:23 -04:00
$('< div class = "chart V" id = "V'+pageCounter+'" > < / div > ').css('display','none').appendTo('#letterChart');
2017-02-17 00:32:43 -05:00
$(this).prevAll().each(function () {
2021-05-12 01:45:23 -04:00
$(this).detach().prependTo($('#letterChart').find('.V:last'));
2017-02-17 00:32:43 -05:00
});
2021-05-12 01:45:23 -04:00
pageCounter ++;
2017-02-17 00:32:43 -05:00
}
}
});
2021-05-12 01:45:23 -04:00
if ($('#letterChart >div').not(".V").length > 0) {
$('< div class = "chart V" > < / div > ').attr('id',"V"+pageCounter).css('display','none').appendTo('#letterChart');
$('#letterChart >div').not(".V").each(function () {
2017-02-17 00:32:43 -05:00
if ($(this).find('.char-line svg').length > 0) {
2021-05-12 01:45:23 -04:00
$(this).detach().prependTo($('#letterChart').find('.V:last'));
2017-02-17 00:32:43 -05:00
}
else {
2021-05-12 01:45:23 -04:00
$(this).detach().appendTo('#letterChart');
2017-02-17 00:32:43 -05:00
}
})
}
2021-05-12 01:45:23 -04:00
$('.V').each(function () {
2017-02-17 00:32:43 -05:00
if ($(this).find('>div').hasClass('display-none')) {
$(this).remove();
}
});
2021-05-12 01:45:23 -04:00
//---Display Order-----
//Largest at top of each page. First page is handled when scrollChart() is called
if (displayOrder == "1" || displayOrder == "2") {
//just need to reverse order of lines on each page
$('.V').each(function () {
var chart = $(this), children = chart.children();
chart.append(children.get().reverse());
});
} else {//Monoyer means smallest at top of each page, and page of smallest lines is highest numbered page
$('#letterChart').each(function () {
//just need to reverse order of pages
var letterCharts = $(this), children = letterCharts.children();
letterCharts.append(children.get().reverse());
});
}
2017-02-17 00:32:43 -05:00
2021-05-12 01:45:23 -04:00
}
this.loadCharts = function () {
functionConfigWolfChart = this;
var allCharts = $('.chart'), arTemp = [], counter = 0;
//quick and dirty way to make unique categories
allCharts.each(function (idx, el) {
var category = el.id.substr(0, 1);
arTemp[category] = 0;
});
//populate objWolf with numbered chart categories
//each with all the charts of that class,
//each chart with initial use count of 0
//and some other useful properties
for (var key in arTemp) {
if (arTemp.hasOwnProperty(key)) {
objWolf[counter] = {cat:key,title:"",col:"",lastUsed:0,mostUsed:0,arCharts:[]};
counter ++;
objWolf.catsLength ++;
2017-02-17 00:32:43 -05:00
}
2021-05-12 01:45:23 -04:00
}
//add properties for each category
var themeColours = colours.themes;
//console.log(objWolf);
for (q = 0; q < objWolf.catsLength ; q + + ) {
var thing = objWolf[q];
//console.log(thing);
thing.col = "rgb(127,127,127)";
if (thing.cat == "V") {
thing.title = "VA";
thing.col = "rgb(0,0,0)";
2017-02-17 00:32:43 -05:00
}
2021-05-12 01:45:23 -04:00
switch (thing.cat) {
case 'R':
thing.title = "Refraction";
thing.col = themeColours.R;
break;
case 'B':
thing.title = "Binocular";
thing.col = themeColours.B;
break;
case 'M':
thing.title = "Misc.";
thing.col = themeColours.M;
}
//add charts to each category in objWolf
var catCharts = $('.' + thing.cat);
catCharts.each(function (idx, el) {
thing.arCharts[idx] = {id:el.id,useCount:0,isToggled:false};
})
}
}
2017-02-17 00:32:43 -05:00
this.characterClick = function () {
2021-05-12 01:45:23 -04:00
$(document).on('click', '.optotype-symbol', function () {
var characterSVG = $('.char-line svg');
2017-02-17 00:32:43 -05:00
if ($(this).hasClass('active')) {
$(this).removeClass('active');
2021-05-12 01:45:23 -04:00
characterSVG.removeClass('disable')
2017-02-17 00:32:43 -05:00
} else {
$(this).addClass('active');
2021-05-12 01:45:23 -04:00
characterSVG.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();
2021-05-12 01:45:23 -04:00
var characterLine = $('.character-line .char-line');
var characterSVG = $('.char-line svg');
2017-02-28 03:21:50 -05:00
if($(this).hasClass('active')) {
$(this).removeClass('active');
2021-05-12 01:45:23 -04:00
characterLine.css('visibility','visible')
characterSVG.removeClass('disable active');
2017-02-28 03:21:50 -05:00
} else {
$('.character-line .scoreBox').removeClass('active');
$(this).addClass('active');
2021-05-12 01:45:23 -04:00
characterLine.css('visibility','hidden')
2017-02-28 03:21:50 -05:00
lineSVG.css('visibility','visible');
2021-05-12 01:45:23 -04:00
characterSVG.removeClass('disable active')
2017-02-28 03:21:50 -05:00
}
})
};
2021-05-12 01:45:23 -04:00
this.hideIdleMouse = function () {
var idleMouseTimer;
var forceMouseHide = false;
$("body").css('cursor', 'none');
$("#letterChart, #otherChart").mousemove(function (ev) {
if (!forceMouseHide) {
$("body").css('cursor', '');
clearTimeout(idleMouseTimer);
idleMouseTimer = setTimeout(function () {
$("body").css('cursor', 'none');
forceMouseHide = true;
setTimeout(function () {
forceMouseHide = false;
}, 200);
}, 5000);
}
});
};
this.swipeDetect = function (el, callback) {
var touchsurface = el,
swipedir,
startX,
startY,
distX,
distY,
threshold = 150, //required min distance traveled to be considered swipe
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
allowedTime = 300, // maximum time allowed to travel that distance
elapsedTime,
startTime,
handleswipe = callback || function (swipedir) { }
touchsurface.addEventListener('touchstart', function (e) {
var touchobj = e.changedTouches[0]
swipedir = 'none'
dist = 0
startX = touchobj.pageX
startY = touchobj.pageY
startTime = new Date().getTime() // record time when finger first makes contact with surface
e.preventDefault()
}, false)
touchsurface.addEventListener('touchmove', function (e) {
e.preventDefault() // prevent scrolling when inside DIV
}, false)
touchsurface.addEventListener('touchend', function (e) {
var touchobj = e.changedTouches[0]
distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
elapsedTime = new Date().getTime() - startTime // get time elapsed
if (elapsedTime < = allowedTime) { // first condition for awipe met
if (Math.abs(distX) >= threshold & & Math.abs(distY) < = restraint) { // 2nd condition for horizontal swipe met
swipedir = (distX < 0 ) ? ' left ' : ' right ' / / if dist traveled is negative , it indicates left swipe
}
else if (Math.abs(distY) >= threshold & & Math.abs(distX) < = restraint) { // 2nd condition for vertical swipe met
swipedir = (distY < 0 ) ? ' up ' : ' down ' / / if dist traveled is negative , it indicates up swipe
}
}
handleswipe(swipedir)
e.preventDefault()
}, false)
}
2017-02-17 00:32:43 -05:00
this.UpdateSetting = function () {
2021-05-12 01:45:23 -04:00
var callBackFunction = this, sideBarWidth = parseFloat($('#side-bar').css('width'));
2017-02-17 00:32:43 -05:00
$('#updateSetting').on('click', function () {
//set var from user input
notation = $('#sNotation').val(),
localOptotype = $('#sOptotype').val(),
localsMirrored = $('#sMirrored').val(),
localDistance = $('#iDistance').val().trim(),
2021-05-12 01:45:23 -04:00
viewWidth = window.innerWidth-sideBarWidth,
2017-02-17 00:32:43 -05:00
numeratorType = $('#sNumerator').val(),
2021-05-12 01:45:23 -04:00
colours.optotype = $('#tOptoColour').val().trim(),
colours.backgrounds.optotype = $('#tBgColour').val().trim(),
colours.fRedHue = $('#sliderRed').val(),
colours.fGreenHue = $('#sliderGreen').val(),
2017-02-17 00:32:43 -05:00
alphabetType = $('#sAlphabet').val(),
2021-05-12 01:45:23 -04:00
shortcuts[0] = $('#pageUp').val().trim(),
shortcuts[1] = $('#pageDown').val().trim(),
shortcuts[2] = $('#pageLeft').val().trim(),
shortcuts[3] = $('#pageRight').val().trim(),
shortcuts[4] = $('#shuffle').val().trim(),
shortcuts[5] = $('#duoBG').val().trim();
2017-02-17 00:32:43 -05:00
lenghOfline = $('#iLengOfLine').val().trim(),
displayOrder = $('#display').val(),
//reset div
2021-05-12 01:45:23 -04:00
$('#letterChart').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 > '
2017-02-17 00:32:43 -05:00
+ '< 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 > ');
2021-05-12 01:45:23 -04:00
callBackFunction.removeLetterChartPage();
2017-02-17 00:32:43 -05:00
//validate required field
var validate = callBackFunction.ValidateFunction();
if (validate) {
$('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn');
return;
}
else {
//reset body div
2021-05-12 01:45:23 -04:00
$('body,#letterChart').removeAttr('style');
//reset letter chart
$('#letterChart > div >div').html('');
$('#letterChart .scoreBox').remove();
//hide all charts
$('.chart').hide();
//empty nav div
$('.nav-link').remove();
//create objWolf live operating object
callBackFunction.UpdateObjWolf();
2017-02-17 00:32:43 -05:00
//set text color
2021-05-12 01:45:23 -04:00
callBackFunction.SetColorCharacter(colours.optotype);
callBackFunction.SetBgColor(colours.backgrounds.optotype);
2017-02-17 00:32:43 -05:00
callBackFunction.CaculatorCharacterHeight(numeratorType);
2021-05-12 01:45:23 -04:00
//generate letter charts
2017-02-17 00:32:43 -05:00
callBackFunction.GenerateCharacter(alphabetType);
2021-05-12 01:45:23 -04:00
//generate single charts
callBackFunction.GenerateSingleCharts();
//set shortcut
callBackFunction.ShortCutKey(shortcuts[0].toUpperCase().charCodeAt(0),shortcuts[1].toUpperCase().charCodeAt(0),shortcuts[2].toUpperCase().charCodeAt(0),shortcuts[3].toUpperCase().charCodeAt(0),shortcuts[4].toUpperCase().charCodeAt(0),shortcuts[5].toUpperCase().charCodeAt(0));
2017-02-17 00:32:43 -05:00
//close setting bar
$('.setting-bar').removeClass('active');
$('.guide-section').removeClass('active');
$('.mask').removeClass('active');
var $Element, maxEleWidht = 0
2021-05-12 01:45:23 -04:00
$('#letterChart').css({'width':viewWidth,'height':viewHeight});
2017-02-17 00:32:43 -05:00
//set direct for character
2021-05-12 01:45:23 -04:00
callBackFunction.SetDirectCharacter(localsMirrored);
//set smaller font for long scoreBox strings
callBackFunction.SetScoreBoxFont();
//divide letter chart into pages
callBackFunction.PageLetterChart();
//load all charts into objWolf
callBackFunction.loadCharts();
2017-02-17 00:32:43 -05:00
//local storage
callBackFunction.SetLocalStorage();
2021-05-12 01:45:23 -04:00
//display a chart in the V category
callBackFunction.navCat(0,null);
//display nav bar
callBackFunction.DisplayNavigations();
callBackFunction.Clock();
//set old character array for the unshuffle function
2017-02-17 00:32:43 -05:00
$('.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,
2021-05-12 01:45:23 -04:00
VresultDistance, VresultLength;
2017-02-17 00:32:43 -05:00
$('#iDistance').on('blur', function () {
VresultDistance = validateElement.ValidateDistance();
2021-05-12 01:45:23 -04:00
if (VresultDistance || VresultLength) {
2017-02-17 00:32:43 -05:00
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();
2021-05-12 01:45:23 -04:00
if (VresultDistance || VresultLength) {
2017-02-17 00:32:43 -05:00
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();
2021-05-12 01:45:23 -04:00
this.DisplayArrows();
2017-02-17 00:32:43 -05:00
this.UpdateSetting();
if (localStorage.getItem("Optotype") != null) {
2021-05-12 01:45:23 -04:00
//following if deals with upgrade from v1 to v2.
//From ver 2.x, can use localStorage "Ver" string for this
if (localStorage.getItem("Ver") === null) {
this.UpdateVersion(ver);
this.GetConfigByValue();
$('.setting-button').trigger('click');
$('#updateSetting').removeClass('disabled-btn');
}
else if (localStorage.getItem("Distance") != "" & & localStorage.getItem("LengthOfLine") != "") {
this.GetConfigByValue();
2017-02-17 00:32:43 -05:00
$('#updateSetting').trigger('click');
$('#updateSetting').removeClass('disabled-btn');
}
else {
$('.setting-button').trigger('click');
}
}
2021-05-12 01:45:23 -04:00
else if ($('#iDistance').val().trim() == "" || $('#iLengOfLine').val().trim() == "") {
2017-02-17 00:32:43 -05:00
$('.setting-button').trigger('click');
};
this.ResetValueToDefault();
this.characterClick();
2017-02-28 03:21:50 -05:00
this.scoreBoxClick();
2021-05-12 01:45:23 -04:00
this.hideIdleMouse();
/* this.swipeDetect(document.getElementById('letterChart'),function(swipedir) {
console.log("Swiped "+swipedir);
}); */
2017-02-17 00:32:43 -05:00
};
};
var configBar = new configBarSetting();
var configWolf = new ConfigWolfChart();
$(document).ready(function () {
configBar.init();
configWolf.Init();
});
< / script >
< / body >
2017-02-10 21:18:21 -05:00
< / html >
