diff --git a/README.md b/README.md index a46dfdb..ff7ba50 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,14 @@ Now that's out of the way, the objectives are: 3. Customisable optotypes and alphabets to come eg Hebrew, Chinese, Thai, Cyrillic etc +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 + - Set color of scoreBox text to be optotype color with opacity 1, so that it will always be the same or more visible than the optotype itself. + - thinking of replacing all the fills in the svg raw materials section with classes and then using jquery to fill. Could be more flexible that way? + - simplified css in .duo to try and eliminate white gaps in duochrome backgrounds. + Ver1.6 - subtense array now to 3 decimal places, enabling - improved scoring for Actual Numerators - fractional notations are rounded to 0.1m or 0.5ft and the / is replaced by a ! when Actual is selected. diff --git a/images/icons/icon-128x128.png b/images/icons/icon-128x128.png new file mode 100644 index 0000000..26a00b4 Binary files /dev/null and b/images/icons/icon-128x128.png differ diff --git a/images/icons/icon-144x144.png b/images/icons/icon-144x144.png new file mode 100644 index 0000000..4644ef7 Binary files /dev/null and b/images/icons/icon-144x144.png differ diff --git a/images/icons/icon-152x152.png b/images/icons/icon-152x152.png new file mode 100644 index 0000000..a48f975 Binary files /dev/null and b/images/icons/icon-152x152.png differ diff --git a/images/icons/icon-192x192.png b/images/icons/icon-192x192.png new file mode 100644 index 0000000..705e9db Binary files /dev/null and b/images/icons/icon-192x192.png differ diff --git a/images/icons/icon-384x384.png b/images/icons/icon-384x384.png new file mode 100644 index 0000000..b9fee0f Binary files /dev/null and b/images/icons/icon-384x384.png differ diff --git a/images/icons/icon-512x512.png b/images/icons/icon-512x512.png new file mode 100644 index 0000000..b099444 Binary files /dev/null and b/images/icons/icon-512x512.png differ diff --git a/images/icons/icon-72x72.png b/images/icons/icon-72x72.png new file mode 100644 index 0000000..30bcd5d Binary files /dev/null and b/images/icons/icon-72x72.png differ diff --git a/images/icons/icon-96x96.png b/images/icons/icon-96x96.png new file mode 100644 index 0000000..2cf9c09 Binary files /dev/null and b/images/icons/icon-96x96.png differ diff --git a/index.htm b/index.htm index 9730d84..2b35336 100644 --- a/index.htm +++ b/index.htm @@ -7,7 +7,7 @@ - WolfChart v1.6 + WolfChart v1.7 @@ -432,7 +432,7 @@ .scoreBox.active { box-shadow: 0 0 3px rgba(0,0,0,0.3); background-color: red; - color: white; + color: rgba(0,0,0,1); z-index: 9; } @@ -470,8 +470,7 @@ #displaySetting .duo { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAABCAIAAAAJn6IqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUM0RUZGMDRERUNGMTFFNjg4QUZEQ0MwRDg2MzY5M0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUM0RUZGMDVERUNGMTFFNjg4QUZEQ0MwRDg2MzY5M0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFQzRFRkYwMkRFQ0YxMUU2ODhBRkRDQzBEODYzNjkzQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQzRFRkYwM0RFQ0YxMUU2ODhBRkRDQzBEODYzNjkzQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsIzWMAAAAAmSURBVHja7NAxAQAACAMg17+anbTGDohAbgAAgHZZBwAA0O4FGADq3gHOIgDUAwAAAABJRU5ErkJggg==");/*red and green stripe*/ - background-size: 100% 100%; - background-repeat: no-repeat; + background-size: 100%; } #displaySetting .char-line { @@ -667,6 +666,7 @@ display: inline-block; cursor: pointer; vertical-align: text-top; + border: solid 2px rgba(128,128,128,1); } .colorpicker.colorpicker-inline { @@ -903,7 +903,9 @@ - + + + @@ -1006,7 +1008,7 @@
- +
@@ -1014,10 +1016,19 @@
+
+ +
+
+ + +
+
+
- ? shortcuts + ? Shortcuts
@@ -1177,9 +1188,8 @@
  • Sort: Unless the display is very large (about 1m wide by about 1.5m tall), the chart will display in pages - see SHORTCUTS below. Here you can select whether to display the page of the smallest or largest lines first on refresh or reconfigure.
  • Mirrored/Direct: Select "Direct" if the chart is to be viewed directly, otherwise select "Mirrored" and the letters and lines will be reversed, but the labels not. If changing this setting, don't forget to set the Distance (see above) accordingly.
    • -
  • - Text colour: Select from the colour picker or enter any valid rgba string Eg. rgba(0,0,0,1) is black; rgba(0,0,0,0.1) is 10% black; rgba(255,0,0,1) is pure red. -
    • +
  • Optotype colour: Defaults to solid black. Select from the colour picker or enter any valid rgba string Eg. rgba(0,0,0,1) is solid black; rgba(0,0,0,0.1) is 10% black; rgba(255,0,0,1) is solid red, rgba(255,255,255,1) is solid white.
    • +
  • Background colour: Defaults to solid white. Select from the colour picker or enter any valid rgba string. If Vanishing Sloan is selected, this value is over-ridden by optotype colour at 0.5 opacity.
    • @@ -1259,12 +1269,13 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    @@ -1498,6 +1601,12 @@ case '4': $('#sAlphabet').append(''); break; + case '5': + $('#sAlphabet').append(''); + break; + case '6': + $('#sAlphabet').append(''); + break; } }); }; @@ -1506,13 +1615,26 @@ $(this).prev().css('background', 'rgb(' + $(this).val() + ')'); }); }; + this.bgColorPicker = function () { + $('#bgColorBox').on('change', function () { + $(this).prev().css('background', 'rgb(' + $(this).val() + ')'); + }); + }; //separating rgb from opacity allows letters to have overlapping elements this.SetColorCharacter = function (colorHex) { var rgba = colorHex.replace(/[^\d.,]/g, '').split(','); var colorRGB = "rgb(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + ")"; $('#list-character').find('svg').css('opacity', rgba[3]); - $('#list-character').find('svg').find('path').css('fill', colorRGB); - $('#list-character').find('svg').find('polygon').css('fill', colorRGB); + //only update fill of black fills, or Vanishing optotypes won't work + $('#list-character').find('svg').find('path').not('.white').css({fill: colorRGB}); + $('#list-character').find('svg').find('polygon').not('.white').css({fill: colorRGB}); + }; + this.SetBgColor = function (bgHex) { + if(alphabetType==7){//Vanishing optotype needs background same color and half the opacity of the optotype color + colorHex = colorHex.replace(/[\d\.]+\)$/g, '0.5'); + $(document.body).css('background-color',colorHex); + } + else {$(document.body).css('background-color',bgHex);} }; this.SetHeightCharacter = function (distance) { var pageArray = []; //array of rows on a page @@ -1616,7 +1738,11 @@ arrayCharacter = ['LandoltC_N,LandoltC_S,LandoltC_E,LandoltC_N,LandoltC_W', 'LandoltC_E,LandoltC_E,LandoltC_N,LandoltC_W,LandoltC_S', 'LandoltC_E,LandoltC_S,LandoltC_S,LandoltC_W,LandoltC_N', 'LandoltC_N,LandoltC_W,LandoltC_N,LandoltC_S,LandoltC_E', 'LandoltC_S,LandoltC_W,LandoltC_N,LandoltC_W,LandoltC_E', 'LandoltC_W,LandoltC_E,LandoltC_S,LandoltC_N,LandoltC_S', 'LandoltC_W,LandoltC_N,LandoltC_E,LandoltC_S,LandoltC_W', 'LandoltC_S,LandoltC_N,LandoltC_N,LandoltC_W,LandoltC_E', 'LandoltC_N,LandoltC_E,LandoltC_S,LandoltC_W,LandoltC_W', 'LandoltC_N,LandoltC_S,LandoltC_E,LandoltC_N,LandoltC_W', 'LandoltC_E,LandoltC_E,LandoltC_N,LandoltC_W,LandoltC_S', 'LandoltC_E,LandoltC_S,LandoltC_S,LandoltC_W,LandoltC_N', 'LandoltC_N,LandoltC_W,LandoltC_N,LandoltC_S,LandoltC_E', 'LandoltC_S,LandoltC_W,LandoltC_N,LandoltC_W,LandoltC_E'] break; case '6': - arrayCharacter = ['TumblingE_N,TumblingE_S,TumblingE_E,TumblingE_N,TumblingE_W', 'TumblingE_E,TumblingE_E,TumblingE_N,TumblingE_W,TumblingE_S', 'TumblingE_E,TumblingE_S,TumblingE_S,TumblingE_W,TumblingE_N', 'TumblingE_N,TumblingE_W,TumblingE_N,TumblingE_S,TumblingE_E', 'TumblingE_S,TumblingE_W,TumblingE_N,TumblingE_W,TumblingE_E', 'TumblingE_W,TumblingE_E,TumblingE_S,TumblingE_N,TumblingE_S', 'TumblingE_W,TumblingE_N,TumblingE_E,TumblingE_S,TumblingE_W', 'TumblingE_S,TumblingE_N,TumblingE_N,TumblingE_W,TumblingE_E', 'TumblingE_N,TumblingE_E,TumblingE_S,TumblingE_W,TumblingE_W', 'TumblingE_N,TumblingE_S,TumblingE_E,TumblingE_N,TumblingE_W', 'TumblingE_E,TumblingE_E,TumblingE_N,TumblingE_W,TumblingE_S', 'TumblingE_E,TumblingE_S,TumblingE_S,TumblingE_W,TumblingE_N', 'TumblingE_N,TumblingE_W,TumblingE_N,TumblingE_S,TumblingE_E', 'TumblingE_S,TumblingE_W,TumblingE_N,TumblingE_W,TumblingE_E'] + 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; + 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_C,Shape5_S', 'Shape5_O,Shape5_T,Shape5_C,Shape5_M,Shape5_F', 'Shape5_S,Shape5_M,Shape5_T,Shape5_O,Shape5_C']; break; } var arrayHeight = -1; @@ -1648,7 +1774,8 @@ $('#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); - $('
    ' + scoreText + '
    ').insertAfter('#line-' + (i + 1)); + var scoreBoxCol = colorHex.replace(/[\d\.]+\)$/g, '1'); + $('
    ' + scoreText + '
    ').insertAfter('#line-' + (i + 1)).css({color:scoreBoxCol}); //caculator viewport width var svgBox = $('#line-' + (i + 1)).find('svg:first-child').width(), //get widht of line svgMargin = parseFloat($('#line-' + (i + 1)).find('svg:first-child').css('margin-left')) * 2; @@ -1997,7 +2124,6 @@ localStorage.setItem("DisplayWidth", viewWidth); localStorage.setItem("DisplayHeight", viewHight); localStorage.setItem("Mirrored", localsMirrored); - //localStorage.setItem("TextColor", colorHex); localStorage.setItem("PageUp", localPageUp); localStorage.setItem("PageDown", localPageDown); localStorage.setItem("Shuffle", localShuffle); @@ -2048,6 +2174,7 @@ viewHight = $('#iViewHeight').val().trim(), numeratorType = $('#sNumerator').val(), colorHex = 'rgba(0,0,0,1)', + bgHex = 'rgba(255,255,255,1)', alphabetType = $('#sAlphabet').val(), sPageUp = $('#pageUp').val().trim().toUpperCase().charCodeAt(0), sPageDown = $('#pageDown').val().trim().toUpperCase().charCodeAt(0), @@ -2061,9 +2188,13 @@ $('#displaySetting > div').find('.char-line').html(''); $('#displaySetting > div').find('.scoreBox').remove(); setConfigDefault.SetColorPicker('rgba(0,0,0,1)'); + setConfigDefault.SetBgColorPicker('rgba(255,255,255,1)'); $('.color i').css('background-color', 'rgba(0,0,0,1)'); + $('.bgColor i').css('background-color', 'rgba(255,255,255,1)'); $('#colorBox').val('rgba(0, 0, 0,1)'); + $('#bgColorBox').val('rgba(255,255,255,1)'); localStorage.setItem("TextColor", colorHex); + localStorage.setItem("BgColor", bgHex); $('#updateSetting').removeClass('disabled-btn').addClass('disabled-btn'); setConfigDefault.RemoveScrollDiv(); $('.char-line').removeAttr('style'); @@ -2082,6 +2213,7 @@ gDisplayHeight = localStorage.getItem("DisplayHeight"), gMirrored = localStorage.getItem("Mirrored"), gTextColor = localStorage.getItem("TextColor"), + gBgColor = localStorage.getItem("BgColor"), gPageUp = localStorage.getItem("PageUp"), gPageDown = localStorage.getItem("PageDown"), gShuffle = localStorage.getItem("Shuffle"), @@ -2099,7 +2231,7 @@ $('#iViewHeight').val(gDisplayHeight); $('#sMirrored').val(gMirrored); functionColorPicker.SetColorPicker(gTextColor); - //$('#colorBox').val(gTextColor); + functionColorPicker.SetBgColorPicker(gBgColor); $('#pageUp').val(gPageUp); $('#pageDown').val(gPageDown); $('#shuffle').val(gShuffle); @@ -2115,8 +2247,8 @@ $('#sNumerator').val("2"); $('#display').val('1'); $('#sMirrored').val('2'); - //$('#colorBox').val('0,0,0').change(); functionColorPicker.SetColorPicker('rgba(0,0,0,1)'); + functionColorPicker.SetBgColorPicker('rgba(255,255,255,1)'); $('#iDistance').val(''); $('#iLengOfLine').val(''); $('#iViewWidth').val(''); @@ -2133,6 +2265,12 @@ format: 'rgba' }); }; + this.SetBgColorPicker = function (color) { + $('#cp4').colorpicker({ + color: color, + format: 'rgba' + }); + }; this.ScrollOnClick = function () { var scrollFucntion = this; $(document).off('click', '#displaySetting > div').on('click', '#displaySetting > div', function (e) { @@ -2185,8 +2323,7 @@ $('.scroll-div').remove(); }; this.DivideScrollPage = function () { - // - console.log(window.innerHeight + " " + $(window).height()); + //console.log(window.innerHeight + " " + $(window).height()); var maxHeight = $(window).height(), quotalHeight = 0, checkHeight = false; @@ -2285,6 +2422,7 @@ viewHight = $('#iViewHeight').val().trim(), numeratorType = $('#sNumerator').val(), colorHex = $('#colorBox').val(), + bgHex = $('#bgColorBox').val(), alphabetType = $('#sAlphabet').val(), sPageUp = $('#pageUp').val().trim().toUpperCase().charCodeAt(0), sPageDown = $('#pageDown').val().trim().toUpperCase().charCodeAt(0), @@ -2323,6 +2461,7 @@ callBackFunction.SortCharacterOption(); //set text color callBackFunction.SetColorCharacter(colorHex); + callBackFunction.SetBgColor(bgHex); callBackFunction.CaculatorCharacterHeight(numeratorType); //generate text callBackFunction.GenerateCharacter(alphabetType); @@ -2471,17 +2610,23 @@ else { $('.setting-button').trigger('click'); this.SetColorPicker('rgba(0,0,0,1)'); + this.SetBgColorPicker('rgba(255,255,255,1)'); } } else if ($('#iDistance').val().trim() == "" || $('#iLengOfLine').val().trim() == "" || $('#iViewWidth').val().trim() == "") { $('.setting-button').trigger('click'); this.SetColorPicker('rgba(0,0,0,1)'); + this.SetBgColorPicker('rgba(255,155,255,1)'); }; this.ResetValueToDefault(); $('#cp3').colorpicker().on('changeColor', function (e) { localStorage.setItem("TextColor", e.color.toString('rgba')); //console.log(e.color.toString('rgba')); }); + $('#cp4').colorpicker().on('changeColor', function (e) { + localStorage.setItem("BgColor", e.color.toString('rgba')); + //console.log(e.color.toString('rgba')); + }); this.ScrollOnClick(); this.characterClick(); this.scoreBoxClick();