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

Add files via upload 

ver1.3 includes duochrome function toggled on any chart with shortcut key that you set in the config form.
duochrome background is stored as a base64 encoded .png image 2000x1px in the css, uses css3 background properties to stretch to 100%x100%
Updated help accordingly.
Cleaned up some spelling mistakes
This commit is contained in:
ballantynedewolf 2017-01-31 12:04:28 +11:00 committed by GitHub
parent 53db737ae0
commit dd2bd38180
1 changed files with 74 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
index.htm
View File

@ -448,14 +448,22 @@
font-size: 0; font-size: 0;
} }
#displaySetting .duo {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAABCAIAAAAJn6IqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUM0RUZGMDRERUNGMTFFNjg4QUZEQ0MwRDg2MzY5M0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUM0RUZGMDVERUNGMTFFNjg4QUZEQ0MwRDg2MzY5M0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFQzRFRkYwMkRFQ0YxMUU2ODhBRkRDQzBEODYzNjkzQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQzRFRkYwM0RFQ0YxMUU2ODhBRkRDQzBEODYzNjkzQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsIzWMAAAAAmSURBVHja7NAxAQAACAMg17+anbTGDohAbgAAgHZZBwAA0O4FGADq3gHOIgDUAwAAAABJRU5ErkJggg==");/*red and green stripe*/
background-size: 100% 100%;
background-repeat: no-repeat;
}
#displaySetting .char-line { #displaySetting .char-line {
display: inline-block; display: inline-block;
} }
#displaySetting .scroll-div { #displaySetting .scroll-div {
height: 100vh; height: 100vh;
} }
.clear-both { .clear-both {
height: 0; height: 0;
clear: both; clear: both;
@ -1022,6 +1030,14 @@
<span class="keyboard">Shift + </span><input type="text" class="form-control input-sm" id="unShuffle" maxlength="1"> <span class="keyboard">Shift + </span><input type="text" class="form-control input-sm" id="unShuffle" maxlength="1">
</div> </div>
</div> </div>
<div class="form-group">
<label class="col-2">Duochrome</label>
<div class="col-8 ">
<span class="keyboard">Shift + </span><input type="text" class="form-control input-sm" id="duoBG" maxlength="1">
</div>
</div>
</fieldset> </fieldset>
<fieldset class="footer-fieldset"> <fieldset class="footer-fieldset">
<div class="action-button"> <div class="action-button">
@ -1174,6 +1190,9 @@
<li> <li>
<strong>Shuffle/Unshuffle:</strong>: Shuffle randomises the letters normally shown on a chart line into a different order. You can shuffle as many times as you like. Unshuffle returns the letter order to the default. <strong>Shuffle/Unshuffle:</strong>: Shuffle randomises the letters normally shown on a chart line into a different order. You can shuffle as many times as you like. Unshuffle returns the letter order to the default.
</li> </li>
<li>
<strong>Duochrome:</strong>: Toggles a red/green background on any version of the chart.
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -1225,6 +1244,7 @@
<div data-line="14" class="character-line"> <div data-line="14" class="character-line">
<div class="char-line" id="line-14"></div> <div class="char-line" id="line-14"></div>
</div> </div>
</div> </div>
<div style="display:none;" id="list-character"> <div style="display:none;" id="list-character">
<!--new Snellen--> <!--new Snellen-->
@ -1649,25 +1669,25 @@
$('#line-' + (i + 1)).find('svg').show(); $('#line-' + (i + 1)).find('svg').show();
} }
else if (convertViewWidth >= svgWidth * 4) { else if (convertViewWidth >= svgWidth * 4) {
console.log('4'); //console.log('4');
$('#line-' + (i + 1)).find('svg').show(); $('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide(); firstChartRemove.hide();
} }
else if (convertViewWidth >= svgWidth * 3) { else if (convertViewWidth >= svgWidth * 3) {
console.log('3'); //console.log('3');
$('#line-' + (i + 1)).find('svg').show(); $('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide(); firstChartRemove.hide();
fifthChartRemove.hide(); fifthChartRemove.hide();
} }
else if (convertViewWidth >= svgWidth * 2) { else if (convertViewWidth >= svgWidth * 2) {
console.log('2'); //console.log('2');
$('#line-' + (i + 1)).find('svg').show(); $('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide(); firstChartRemove.hide();
secondChartRemove.hide(); secondChartRemove.hide();
fifthChartRemove.hide(); fifthChartRemove.hide();
} }
else if (convertViewWidth >= svgWidth) { else if (convertViewWidth >= svgWidth) {
console.log('1'); //console.log('1');
$('#line-' + (i + 1)).find('svg').show(); $('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide(); firstChartRemove.hide();
secondChartRemove.hide(); secondChartRemove.hide();
@ -1675,7 +1695,7 @@
fifthChartRemove.hide(); fifthChartRemove.hide();
} }
else { else {
console.log('0'); //console.log('0');
$('#line-' + (i + 1)).find('svg').hide(); $('#line-' + (i + 1)).find('svg').hide();
$('#line-' + (i + 1)).parent().find('.scoreBox').hide(); $('#line-' + (i + 1)).parent().find('.scoreBox').hide();
$('#line-' + (i + 1)).parent().addClass('display-none'); $('#line-' + (i + 1)).parent().addClass('display-none');
@ -1699,14 +1719,16 @@
// } // }
//}); //});
}; };
/*this.ShuffleFunction = function (selector) {
$(selector).parent().each(function () { this.YatesShuffle = function (array) {
$(this).children(selector).sort(function () { for (var i = array.length - 1; i > 0; i--) {
return Math.random() - 0.5; var j = Math.floor(Math.random() * i); // no +1 here!
}).detach().appendTo(this); var temp = array[i];
}); array[i] = array[j];
return this; array[j] = temp;
};*/ }
return array;
};
this.UnShuffleFunction = function (oldCharacter) { this.UnShuffleFunction = function (oldCharacter) {
//$('#displaySetting').html(oldCharacter); //$('#displaySetting').html(oldCharacter);
@ -1717,22 +1739,9 @@
}; };
}; };
this.YatesShuffle = function (array) { this.duoBGFunction = function () {
//var m = array.length, t, i; //alert("duochrome function");
//while (m) { $('.character-line').toggleClass('duo');
// i = Math.floor(Math.random() * m--);
// t = array[m];
// array[m] = array[i];
// array[i] = t;
//}
//return array;
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * i); // no +1 here!
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}; };
this.SortCharacterOption = function () { this.SortCharacterOption = function () {
@ -1755,7 +1764,7 @@
} }
}; };
}; };
this.ShortCutKey = function (pageUp, padeDown, shuffle, unShuffle) { this.ShortCutKey = function (pageUp, padeDown, shuffle, unShuffle, duoBG) {
var callBack = this; var callBack = this;
document.body.onkeydown = function (e) { document.body.onkeydown = function (e) {
if (e.keyCode == 38) { if (e.keyCode == 38) {
@ -1810,29 +1819,29 @@
fifthChartRemove = $(this).find('svg:nth-child(5)'); fifthChartRemove = $(this).find('svg:nth-child(5)');
var convertViewWidth = callBack.ConvertMMToPixel(viewWidth); var convertViewWidth = callBack.ConvertMMToPixel(viewWidth);
if (convertViewWidth >= svgWidth * 5) { if (convertViewWidth >= svgWidth * 5) {
console.log('show all'); //console.log('show all');
$(this).find('svg').show(); $(this).find('svg').show();
} }
else if (convertViewWidth >= svgWidth * 4) { else if (convertViewWidth >= svgWidth * 4) {
console.log('4'); //console.log('4');
$(this).find('svg').show(); $(this).find('svg').show();
firstChartRemove.hide(); firstChartRemove.hide();
} }
else if (convertViewWidth >= svgWidth * 3) { else if (convertViewWidth >= svgWidth * 3) {
console.log('3'); //console.log('3');
$(this).find('svg').show(); $(this).find('svg').show();
firstChartRemove.hide(); firstChartRemove.hide();
fifthChartRemove.hide(); fifthChartRemove.hide();
} }
else if (convertViewWidth >= svgWidth * 2) { else if (convertViewWidth >= svgWidth * 2) {
console.log('2'); //console.log('2');
$(this).find('svg').show(); $(this).find('svg').show();
firstChartRemove.hide(); firstChartRemove.hide();
secondChartRemove.hide(); secondChartRemove.hide();
fifthChartRemove.hide(); fifthChartRemove.hide();
} }
else if (convertViewWidth >= svgWidth) { else if (convertViewWidth >= svgWidth) {
console.log('1'); //console.log('1');
$(this).find('svg').show(); $(this).find('svg').show();
firstChartRemove.hide(); firstChartRemove.hide();
secondChartRemove.hide(); secondChartRemove.hide();
@ -1840,7 +1849,7 @@
fifthChartRemove.hide(); fifthChartRemove.hide();
} }
else { else {
console.log('0'); //console.log('0');
$(this).find('svg').hide(); $(this).find('svg').hide();
$(this).parent().find('.scoreBox').hide(); $(this).parent().find('.scoreBox').hide();
$(this).parent().addClass('display-none'); $(this).parent().addClass('display-none');
@ -1861,6 +1870,13 @@
e.preventDefault(); e.preventDefault();
}; };
}; };
if (duoBG != "") {
if ((e.shiftKey && e.keyCode == duoBG)) {
callBack.duoBGFunction();
e.preventDefault();
};
};
}; };
}; };
this.ValidateFunction = function () { this.ValidateFunction = function () {
@ -1899,7 +1915,7 @@
} }
else if (distance < 3000) { else if (distance < 3000) {
result = true; result = true;
message = "Distance must be larger or equal to 3000."; message = "Distance must be greater than or equal to 3000.";
} }
if (result) { if (result) {
$('#iDistance').parent().append('<span class="errorMsg errorDistance">' + message + '</span>'); $('#iDistance').parent().append('<span class="errorMsg errorDistance">' + message + '</span>');
@ -1985,6 +2001,7 @@
localStorage.setItem("PageDown", localPageDown); localStorage.setItem("PageDown", localPageDown);
localStorage.setItem("Shuffle", localShuffle); localStorage.setItem("Shuffle", localShuffle);
localStorage.setItem("Unshuffle", localUnShuffle); localStorage.setItem("Unshuffle", localUnShuffle);
localStorage.setItem("duoBG", localduoBG);
}; };
this.SetPositionScore = function (isSmall) { this.SetPositionScore = function (isSmall) {
//set margin for score text //set margin for score text
@ -2026,7 +2043,7 @@
var setConfigDefault = this; var setConfigDefault = this;
$('#reset').on('click', function () { $('#reset').on('click', function () {
setConfigDefault.SetConfingDefault(); setConfigDefault.SetConfingDefault();
//set varible for local storage //set variable for local storage
notation = $('#sNotation').val(), notation = $('#sNotation').val(),
localOptotype = $('#sOptotype').val(), localOptotype = $('#sOptotype').val(),
localsMirrored = $('#sMirrored').val(), localsMirrored = $('#sMirrored').val(),
@ -2034,6 +2051,7 @@
localPageDown = $('#pageDown').val(), localPageDown = $('#pageDown').val(),
localShuffle = $('#shuffle').val(), localShuffle = $('#shuffle').val(),
localUnShuffle = $('#unShuffle').val(), localUnShuffle = $('#unShuffle').val(),
localduoBG = $('#duoBG').val(),
localDistance = $('#iDistance').val().trim(), localDistance = $('#iDistance').val().trim(),
viewWidth = $('#iViewWidth').val().trim(), viewWidth = $('#iViewWidth').val().trim(),
viewHight = $('#iViewHeight').val().trim(), viewHight = $('#iViewHeight').val().trim(),
@ -2043,9 +2061,11 @@
sPageUp = $('#pageUp').val().trim().toUpperCase().charCodeAt(0), sPageUp = $('#pageUp').val().trim().toUpperCase().charCodeAt(0),
sPageDown = $('#pageDown').val().trim().toUpperCase().charCodeAt(0), sPageDown = $('#pageDown').val().trim().toUpperCase().charCodeAt(0),
sShuffle = $('#shuffle').val().trim().toUpperCase().charCodeAt(0), sShuffle = $('#shuffle').val().trim().toUpperCase().charCodeAt(0),
sduoBG = $('#duoBG').val().trim().toUpperCase().charCodeAt(0);
lenghOfline = $('#iLengOfLine').val().trim(), lenghOfline = $('#iLengOfLine').val().trim(),
displayOrder = $('#display').val(), displayOrder = $('#display').val(),
sUnShuffle = $('#unShuffle').val().trim().toUpperCase().charCodeAt(0); sUnShuffle = $('#unShuffle').val().trim().toUpperCase().charCodeAt(0);
sduoBG = $('#duoBG').val().trim().toUpperCase().charCodeAt(0);
setConfigDefault.SetLocalStorage(); setConfigDefault.SetLocalStorage();
$('#displaySetting > div').find('.char-line').html(''); $('#displaySetting > div').find('.char-line').html('');
$('#displaySetting > div').find('.scoreBox').remove(); $('#displaySetting > div').find('.scoreBox').remove();
@ -2074,7 +2094,8 @@
gPageUp = localStorage.getItem("PageUp"), gPageUp = localStorage.getItem("PageUp"),
gPageDown = localStorage.getItem("PageDown"), gPageDown = localStorage.getItem("PageDown"),
gShuffle = localStorage.getItem("Shuffle"), gShuffle = localStorage.getItem("Shuffle"),
gUnshuffle = localStorage.getItem("Unshuffle"); gUnshuffle = localStorage.getItem("Unshuffle"),
gduoBG = localStorage.getItem("duoBG");
//set value for input //set value for input
$('#sOptotype').val(gOptotype).change(); $('#sOptotype').val(gOptotype).change();
$('#sAlphabet').val(gAlphabet); $('#sAlphabet').val(gAlphabet);
@ -2092,6 +2113,7 @@
$('#pageDown').val(gPageDown); $('#pageDown').val(gPageDown);
$('#shuffle').val(gShuffle); $('#shuffle').val(gShuffle);
$('#unShuffle').val(gUnshuffle); $('#unShuffle').val(gUnshuffle);
$('#duoBG').val(gduoBG);
}; };
this.SetConfingDefault = function () { this.SetConfingDefault = function () {
var functionColorPicker = this; var functionColorPicker = this;
@ -2112,6 +2134,7 @@
$('#pageDown').val(''); $('#pageDown').val('');
$('#shuffle').val(''); $('#shuffle').val('');
$('#unShuffle').val(''); $('#unShuffle').val('');
$('#duoBG').val('');
}; };
this.SetColorPicker = function (color) { this.SetColorPicker = function (color) {
$('#cp3').colorpicker({ $('#cp3').colorpicker({
@ -2270,7 +2293,7 @@
} }
}); });
}; };
this.charaterCLick = function () { this.characterClick = function () {
$(document).on('click', '.char-line svg', function () { $(document).on('click', '.char-line svg', function () {
if ($(this).hasClass('active')) { if ($(this).hasClass('active')) {
$(this).removeClass('active'); $(this).removeClass('active');
@ -2281,6 +2304,7 @@
} }
}) })
}; };
this.UpdateSetting = function () { this.UpdateSetting = function () {
var callBackFunction = this; var callBackFunction = this;
$('#updateSetting').on('click', function () { $('#updateSetting').on('click', function () {
@ -2292,6 +2316,7 @@
localPageDown = $('#pageDown').val(), localPageDown = $('#pageDown').val(),
localShuffle = $('#shuffle').val(), localShuffle = $('#shuffle').val(),
localUnShuffle = $('#unShuffle').val(), localUnShuffle = $('#unShuffle').val(),
localduoBG = $('#duoBG').val(),
localDistance = $('#iDistance').val().trim(), localDistance = $('#iDistance').val().trim(),
viewWidth = $('#iViewWidth').val().trim(), viewWidth = $('#iViewWidth').val().trim(),
viewHight = $('#iViewHeight').val().trim(), viewHight = $('#iViewHeight').val().trim(),
@ -2304,6 +2329,7 @@
lenghOfline = $('#iLengOfLine').val().trim(), lenghOfline = $('#iLengOfLine').val().trim(),
displayOrder = $('#display').val(), displayOrder = $('#display').val(),
sUnShuffle = $('#unShuffle').val().trim().toUpperCase().charCodeAt(0); sUnShuffle = $('#unShuffle').val().trim().toUpperCase().charCodeAt(0);
sduoBG = $('#duoBG').val().trim().toUpperCase().charCodeAt(0);
//reset div //reset div
$('#displaySetting').html('<div data-line="1" class="character-line"><div class="char-line" id="line-1"></div></div><div data-line="2" class="character-line"><div class="char-line" id="line-2"></div></div>' $('#displaySetting').html('<div data-line="1" class="character-line"><div class="char-line" id="line-1"></div></div><div data-line="2" class="character-line"><div class="char-line" id="line-2"></div></div>'
+ '<div data-line="3" class="character-line"><div class="char-line" id="line-3"></div></div><div data-line="4" class="character-line"><div class="char-line" id="line-4"></div></div>' + '<div data-line="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>'
@ -2339,7 +2365,7 @@
callBackFunction.GenerateCharacter(alphabetType); callBackFunction.GenerateCharacter(alphabetType);
//set shorcut //set shorcut
callBackFunction.ShortCutKey(sPageUp, sPageDown, sShuffle, sUnShuffle); callBackFunction.ShortCutKey(sPageUp, sPageDown, sShuffle, sUnShuffle, sduoBG);
//close setting bar //close setting bar
$('.setting-bar').removeClass('active'); $('.setting-bar').removeClass('active');
$('.guide-section').removeClass('active'); $('.guide-section').removeClass('active');
@ -2500,7 +2526,7 @@
//console.log(e.color.toString('rgba')); //console.log(e.color.toString('rgba'));
}); });
this.ScrollOnClick(); this.ScrollOnClick();
this.charaterCLick(); this.characterClick();
// this.ValidateFunction(); // this.ValidateFunction();
}; };
}; };