diff --git a/README.md b/README.md index daa599b..a5e5989 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,34 @@ -# Hacktoberfest -Current issues: -1. Need to get rid of display width setting - chart needs to display full width and height in all cases. -2. Cross browser issue with display height - typically on tablet browsers, when the user scrolls down, the browser enters full screen mode, breaking the format +# WolfChart v2.0 +by Ballantyne de Wolf, Offspring Digital -# WolfChart v1.7 -by Ballantyne de Wolf and Offspring Digital - -This is professional optometrist/optician/ophthalmologist tool for measuring visual acuity. It cannot be used safely by the general public. +This is professional optometrist/optician/ophthalmologist tool for sight testing. It cannot be used safely by the general public. If you have any concerns about your vision or eyes, consult a qualified professional. Now that's out of the way, the objectives are: - 1. Clinically relevant, scientifically supported visual acuity measurement in the widest possible range of clinical and research settings + 1. Clinically relevant, scientifically supported sight testing tools, in the widest possible range of clinical and research settings. 2. Open source with GNU licence 3. Can be used on a wide variety of screen hardware - 3. Customisable optotypes and alphabets to come eg Hebrew, Chinese, Thai, Cyrillic etc + 3. Customisable optotypes and alphabets to come eg Arabic, Hebrew, Chinese, Thai, Cyrillic etc + +To Do List + +Ver2.1 + - Now displays charts in 4 categories, using direction buttons and keys to navigate + - Paging up and down the letter chart now done by showing and hiding fullscreen pages, rather than scrolling a larger-than-fullscreen page + - Right hand sidebar containing controls + - Chart keeps track of your usage, offering your most-used chart on key strokes and nav buttons + - Fixed viewport - now uses document.documentwindow.clientHeight and a trimmed window.innerWidth at all times + - Single charts have spacebar/onclick/button function to eg zoom + - Removed colour pickers, replaced with text, preset buttons and hue-only sliders for filter tests + - Various improvements under bonnet + - Switched off PWA features like manifest and sw.js - will maybe bring them back later. - -Ver1.7 +Ver1.8 + - fixed bug of bg colour not stored on first use. + - added coloured dots at 6/4.8(20/16,-0.1,1.1, normal VA) and 6/12(20/40,0.3,0.5, legal VA). + - did some code cleaning + + Ver1.7 - added colour picker for background that defaults to white. This is maybe only useful in a research environment. - added Vanishing Sloan optotype/Vanishing ETDRS alphabet.When selected, body background colour is same as optotype colour but 0.5 opacity. Used jquery.not() to exempt white filled elements from optotype color. Body bg reverts to stored with all other optotypes. - Added prototype Shapes optotype diff --git a/index.htm b/index.htm index 790901f..434f3ce 100644 --- a/index.htm +++ b/index.htm @@ -7,12 +7,10 @@ - WolfChart v1.7 - - - - + WolfChart v + + + + #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 { + display: block; + 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; + } + #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; + } + } +
- - - - - +
Settings
- ? OPTOTYPES + ? OPTOTYPES
-
- +
+
-
- +
+
@@ -934,8 +904,8 @@
-
- +
+
mm + mm
-
- +
+
- mm (be precise) + mm (be precise)
-
-
- ? Display area -
-
- -
- mm -
-
- -
? options
-
- +
+
-
- +
+
-
- -
-
- - -
+
+
+ +
+
-
- -
-
- - +
+ +
+ + + +
+
+
+
+ +
+ +
+
+
+ +
+ + + +
+
+ +
+
+
+ ? r/l filters +
+
+
+ +
+ +
+
+
+ +
+
- ? Shortcuts + ? shortcuts
-
- -
- Shift + +
+ +
+ +
+ +
+
-
- -
- Shift + +
+ +
+ +
+ +
+
-
- -
- Shift + +
+ +
+
-
- -
- Shift + -
-
- -
- -
- Shift + +
+ +
+
@@ -1070,10 +1059,10 @@
- +
-

Help

+ Help @@ -1090,12 +1079,12 @@
- Very quick guide: Calibrate and configure your chart using this help guide. Click or tap on white space to scroll the chart up and down, or use the up and down arrows on your keyboard. Click or tap on any letter to mask it. Click or tap on any line label to mask that line. Click or tap again to unmask.

+ Very quick guide: 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.
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.
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.
Why is one of the charts just black?
So you can darken your room with one click.

-