From 90108a6e739e68b95993692069e419bb5bd3a1a7 Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Mon, 13 Nov 2017 19:08:52 -0500 Subject: [PATCH 01/13] working tag interface labels, highlighting todo --- lib/glyphChart.js | 102 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 90 insertions(+), 12 deletions(-) diff --git a/lib/glyphChart.js b/lib/glyphChart.js index ff7ece3..ba9fc37 100644 --- a/lib/glyphChart.js +++ b/lib/glyphChart.js @@ -57,14 +57,14 @@ GlyphChart.prototype = { for (i = 0 ; i < glyphs.length ; i++) { b = this.bounds(i); if (mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]) { - if ( mx - b[0] + my - b[1] > this.gR || - mx - b[0] + b[3] - my > this.gR || - b[2] - mx + my - b[1] > this.gR || - b[2] - mx + b[3] - my > this.gR ) - this.isAnySelected = true; - break; - - } + if ( mx - b[0] + my - b[1] > this.gR || + mx - b[0] + b[3] - my > this.gR || + b[2] - mx + my - b[1] > this.gR || + b[2] - mx + b[3] - my > this.gR ) + this.isAnySelected = true; + break; + + } } for (i = 0 ; i < glyphs.length ; i++) @@ -73,10 +73,87 @@ GlyphChart.prototype = { if (this.isDragging) this.drawGlyph(this.iDragged, This().mouseX, This().mouseY); + // TESTING + this.drawTagList(); + // TESTING + _g.restore(); sketchPage.setFuzzyLines(this._isFuzzyLines); }, + // WORK-IN-PROGRESS + tags : ["all", "creature", "math"], + tagBoundWidth : 125, + tagBoundHeight : 50, + tagBounds : function(i) { + var ht = this.tagBoundHeight; + var x = width() - this.tagBoundWidth - _g.panY; + // THIS COMMENTED CODE WOULD CYCLE THE BOX AROUND TO THE NEXT COLUMN, DISABLED FOR NOW FOR TAGS, LIKELY TO RE-ACTIVATED LATER + var y = ((i /*% this.glyphsPerCol*/) * height()) / (height() / (this.tagBoundHeight - 1)) + ht * .1 - _g.panY; + return [ x, y, x + this.tagBoundWidth - _g.panY, y + ht * .85 ]; + }, + drawTagList : function() { + var mx = This().mouseX, my = This().mouseY, i, b; + console.log(mx + " " + my); + _g.save(); + color(this.scrim()); + + //fillRoundRect(width() - this.tagBoundWidth - _g.panY, 0, width() + 200 - _g.panY, height(), 0.5); + + const that = this; + + function drawTag(i, txt) { + var b = that.tagBounds(i); // logic in tagBounds(i) is wrong, needs to be adjusted + var gX = b[0], gY = b[1], gW = b[2]-b[0], gH = b[3]-b[1]; // PROBABLY WRONG / NEEDS TO BE ADJUSTED + + var x = gX + (height() / that.tagBoundHeight) * .1; + var y = gY; + var t = (that.t - i - 0.55) * 2.5 + i + .5; + var isSelected = mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]; + + // isHighlighted check TODO + + var gR = that.gR; + var sc = height() / 2000 * 10 / that.tagBoundHeight; + var n, d, j; + + + + fillPolygon(createRoundRect(gX, gY, gW, gH, gR)); + + + lineWidth(0.5); + color(that.color()); + if (isWhiteBackground()) { + line(gX + gW, gY + gH - gR, gX + gW, gY + gR); + line(gX + gW - gR, gY + gH, gX + gR, gY + gH); + var rx = gX + gW - gR + .707 * gR; + var ry = gY + gH - gR + .707 * gR; + line(gX + gW - gR, gY + gH, rx, ry); + line(gX + gW, gY + gH - gR, rx, ry); + } + else { + line(gX + gR, gY, gX + gW - gR, gY); + line(gX, gY + gR, gX, gY + gH - gR); + var rx = gX + gR - .707 * gR; + var ry = gY + gR - .707 * gR; + line(gX + gR, gY, rx, ry); + line(gX, gY + gR, rx, ry); + } + + _g_text(txt, [gX + 2, y + 2, 0]); + + _g.strokeStyle = _g.fillStyle = /*isHighlighted ? defaultPenColor : */ that.color(); + _g.lineWidth = /*isHighlighted ? 2 : */ 1; + } + + for (let i = 0; i < this.tags.length; i++) { + color(this.scrim()); + drawTag(i, this.tags[i]); + } + + _g.restore(); + }, drawGlyph : function(i, cx, cy) { var mx = This().mouseX, my = This().mouseY; var glyph = glyphs[i]; @@ -92,6 +169,7 @@ GlyphChart.prototype = { var t = (this.t - i - .55) * 2.5 + i + .5; var txt = glyphs[i].indexName; var isSelected = mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]; + var isHighlighted = isSelected || (this.strokeCountMask & 1 << nn) != 0; var gR = this.gR; var sc = height() / 2000 * 10 / this.glyphsPerCol; @@ -130,20 +208,20 @@ GlyphChart.prototype = { for (n = 0 ; n < nn ; n++) { d = glyph.data[n]; if (isSelected) - if (mix(i, i+1, n / nn) <= t) + if (mix(i, i+1, n / nn) <= t) fillOval(x + d[0][0] * sc - 3, y + d[0][1] * sc - 3, 6, 6); else - continue; + continue; _g_beginPath(); _g_moveTo(x + d[0][0] * sc, y + d[0][1] * sc); - var incr = isSelected ? 1 : max(1, floor(d.length / 10)); + var incr = isSelected ? 1 : max(1, floor(d.length / 10)); for (j = 1 ; j < d.length ; j += incr) { if (isSelected && mix(i, i+1, (n + j / d.length) / nn) > t) break; _g_lineTo(x + d[j][0] * sc, y + d[j][1] * sc); } - if (incr > 1) + if (incr > 1) _g_lineTo(x + d[d.length-1][0] * sc, y + d[d.length-1][1] * sc); _g_stroke(); } From 24fddcd5e4aebf81895ce06417c4b3ff160aa5b0 Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Tue, 14 Nov 2017 19:38:28 -0500 Subject: [PATCH 02/13] almost there, need to fix logic for combining stroke count masks and also fix click --- lib/g.js | 10 ++- lib/glyphChart.js | 170 ++++++++++++++++++++++++++++++++------------ lib/sketch.js | 1 + lib/sketchGlyph.js | 5 ++ lib/sketchPage.js | 22 +++++- sketches/bird.js | 1 + sketches/boolean.js | 1 + sketches/face.js | 1 + sketches/fish.js | 1 + sketches/mask.js | 1 + sketches/midi.js | 1 + sketches/piano.js | 1 + 12 files changed, 166 insertions(+), 49 deletions(-) diff --git a/lib/g.js b/lib/g.js index 8b83af2..a60883d 100644 --- a/lib/g.js +++ b/lib/g.js @@ -867,6 +867,7 @@ if (--remainingRequests.count == 0) onRemoteSketchesFinishedLoading(); + } sketchRequest.send(); } @@ -1145,6 +1146,8 @@ eval("addSketch(new " + type + "())"); sketchTypeLabels.push(sk().labels); + glyphChart.addTags(sk().tags); + // RENDER EACH OF ITS SELECTIONS ONCE TO CREATE GLYPH INFO. @@ -1166,7 +1169,7 @@ if (status == 0) { code = sketchTypeToCode(type, sk().labels[n]); - names.push(registerGlyph(code, glyphTrace, sk().labels[n])); + names.push(registerGlyph(code, glyphTrace, sk().labels[n], sk().tags)); } } @@ -1443,7 +1446,7 @@ } } - function registerGlyph(name, strokes, indexName) { + function registerGlyph(name, strokes, indexName, tags) { if (indexName === undefined) { indexName = name; var j = indexName.indexOf('Sketch'); @@ -1465,6 +1468,7 @@ var glyph = new SketchGlyph(name, strokes); glyph.indexName = indexName; + glyph.registerTags(tags); for (var i = 0 ; i < glyphs.length ; i++) if (indexName < glyphs[i].indexName) { @@ -2865,6 +2869,8 @@ if (! isPhone() && window.imuData) if (sketch.labels.length == 0) sketch.labels.push(sketch.label); + if (sketch.tags.length == 0 && sketch.tag) + sketch.tags.push(sketch.tag); sketchPage.add(sketch); sk().arrows = []; sk().children = []; diff --git a/lib/glyphChart.js b/lib/glyphChart.js index ba9fc37..ce74758 100644 --- a/lib/glyphChart.js +++ b/lib/glyphChart.js @@ -4,7 +4,16 @@ function GlyphChart() { this.t = 0; this.iDragged = 0; this.isDragging = false; + this.isSelectingTag = false; + this.iSelectedTag = 0; + this.latestTagHoveredOver = null; + this.strokeCountMask = 0; + + this.tags = ['']; + // BITMAP OF ON / OFF STATES FOR EACH TAG + this.tagStates = {}; + this.numActiveTags = 0; } GlyphChart.prototype = { @@ -67,89 +76,143 @@ GlyphChart.prototype = { } } + this.drawTagList(); + for (i = 0 ; i < glyphs.length ; i++) this.drawGlyph(i); if (this.isDragging) this.drawGlyph(this.iDragged, This().mouseX, This().mouseY); - // TESTING - this.drawTagList(); - // TESTING + this.latestTagHoveredOver = null; _g.restore(); sketchPage.setFuzzyLines(this._isFuzzyLines); }, // WORK-IN-PROGRESS - tags : ["all", "creature", "math"], tagBoundWidth : 125, tagBoundHeight : 50, + resetTagHeader : "Reset Tags", tagBounds : function(i) { + const txtLen = (i == 0) ? this.resetTagHeader.length : this.tags[i].length; var ht = this.tagBoundHeight; - var x = width() - this.tagBoundWidth - _g.panY; - // THIS COMMENTED CODE WOULD CYCLE THE BOX AROUND TO THE NEXT COLUMN, DISABLED FOR NOW FOR TAGS, LIKELY TO RE-ACTIVATED LATER - var y = ((i /*% this.glyphsPerCol*/) * height()) / (height() / (this.tagBoundHeight - 1)) + ht * .1 - _g.panY; - return [ x, y, x + this.tagBoundWidth - _g.panY, y + ht * .85 ]; + var x = width() - (txtLen * 10) - _g.panY; + // THIS COMMENTED CODE WOULD CYCLE THE BOX AROUND TO THE NEXT COLUMN, + // DISABLED FOR NOW FOR TAGS, LIKELY TO RE-ACTIVATED LATER + var y = ((i /*% this.glyphsPerCol*/) * height()) / (height() / this.tagBoundHeight) + ht * .1 - _g.panY; + + return [ x, y , x + min(this.tagBoundWidth, txtLen * 10) - _g.panY, y + ht * .85 ]; + }, + addTags : function(tags) { + tags.sort(); + + for (let k = 0, i = 1; k < tags.length; k++) { + const tag = tags[k]; + if (this.tagStates[tag] !== undefined) { + continue; + } + this.tagStates[tag] = false; + for (; i < this.tags.length; i++) { + if (tag < this.tags[i]) { + this.tags.splice(i, 0, tag); + break; + } + } + if (i == this.tags.length) { + for (; k < tags.length; k++) { + this.tags.push(tags[k]); + } + } + } + }, + disableAllTags : function() { + console.log("DISABLING TAGS"); + for (let i = 1; i < this.tags.length; i++) { + this.tagStates[this.tags[i]] = false; + } + this.numActiveTags = 0; }, drawTagList : function() { var mx = This().mouseX, my = This().mouseY, i, b; - console.log(mx + " " + my); - _g.save(); - color(this.scrim()); - //fillRoundRect(width() - this.tagBoundWidth - _g.panY, 0, width() + 200 - _g.panY, height(), 0.5); + _g.save(); const that = this; - function drawTag(i, txt) { - var b = that.tagBounds(i); // logic in tagBounds(i) is wrong, needs to be adjusted - var gX = b[0], gY = b[1], gW = b[2]-b[0], gH = b[3]-b[1]; // PROBABLY WRONG / NEEDS TO BE ADJUSTED + function drawTag(i) { + var b = that.tagBounds(i); + var gX = b[0], gY = b[1], gW = b[2]-b[0], gH = b[3]-b[1]; var x = gX + (height() / that.tagBoundHeight) * .1; var y = gY; var t = (that.t - i - 0.55) * 2.5 + i + .5; var isSelected = mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]; - // isHighlighted check TODO - - var gR = that.gR; - var sc = height() / 2000 * 10 / that.tagBoundHeight; - var n, d, j; + if (isSelected && i > 0) { + that.latestTagHoveredOver = that.tags[i]; + } + // WHETHER THIS TAG HAS BEEN CLICKED ON THE CURRENT FRAME + var isClicked = that.isSelectingTag && i == that.iSelectedTag; + + // IF SO, TOGGLE ACTIVE STATE + const tag = that.tags[i]; + if (isClicked) { + // RESET ALL TO OFF STAT + if (i == 0) { + that.disableAllTags(); + } + // TOGGLE INDIVIDUAL STATE + else { + console.log("TOGGLE"); + const prevState = that.tagStates[tag]; + that.tagStates[tag] = !prevState; + that.numActiveTags += (prevState == true) ? -1 : 1; + } + } + // NEW STATE + var isActive = ((i == 0) ? false : that.tagStates[tag]); - fillPolygon(createRoundRect(gX, gY, gW, gH, gR)); + var isHighlighted = isSelected || isActive; + var gR = that.gR; + var sc = height() / 2000 * 10 / that.tagBoundHeight; + var n, d, j; - lineWidth(0.5); - color(that.color()); - if (isWhiteBackground()) { - line(gX + gW, gY + gH - gR, gX + gW, gY + gR); - line(gX + gW - gR, gY + gH, gX + gR, gY + gH); - var rx = gX + gW - gR + .707 * gR; - var ry = gY + gH - gR + .707 * gR; - line(gX + gW - gR, gY + gH, rx, ry); - line(gX + gW, gY + gH - gR, rx, ry); + if (i == 0) { + //fillPolygon(createRoundRect(gX, gY, gW, gH, gR)); } - else { - line(gX + gR, gY, gX + gW - gR, gY); - line(gX, gY + gR, gX, gY + gH - gR); - var rx = gX + gR - .707 * gR; - var ry = gY + gR - .707 * gR; - line(gX + gR, gY, rx, ry); - line(gX, gY + gR, rx, ry); - } - - _g_text(txt, [gX + 2, y + 2, 0]); - _g.strokeStyle = _g.fillStyle = /*isHighlighted ? defaultPenColor : */ that.color(); - _g.lineWidth = /*isHighlighted ? 2 : */ 1; + lineWidth(0.5); + // color(that.color()); + // if (isWhiteBackground()) { + // line(gX + gW, gY + gH - gR, gX + gW, gY + gR); + // line(gX + gW - gR, gY + gH, gX + gR, gY + gH); + // var rx = gX + gW - gR + .707 * gR; + // var ry = gY + gH - gR + .707 * gR; + // line(gX + gW - gR, gY + gH, rx, ry); + // line(gX + gW, gY + gH - gR, rx, ry); + // } + // else { + // line(gX + gR, gY, gX + gW - gR, gY); + // line(gX, gY + gR, gX, gY + gH - gR); + // var rx = gX + gR - .707 * gR; + // var ry = gY + gR - .707 * gR; + // line(gX + gR, gY, rx, ry); + // line(gX, gY + gR, rx, ry); + // } + + _g.strokeStyle = _g.fillStyle = isHighlighted ? defaultPenColor : that.color(); + _g.lineWidth = isHighlighted ? 2 : 1; + + _g_text(((i == 0) ? that.resetTagHeader : that.tags[i]), [gX + 2, y + 2, 0]); } for (let i = 0; i < this.tags.length; i++) { color(this.scrim()); - drawTag(i, this.tags[i]); + drawTag(i); } _g.restore(); @@ -170,7 +233,26 @@ GlyphChart.prototype = { var txt = glyphs[i].indexName; var isSelected = mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]; - var isHighlighted = isSelected || (this.strokeCountMask & 1 << nn) != 0; + var emphasizedByTag = false; + if (glyph.tags.length > 0 && this.numActiveTags > 0) { + function glyphIsEmphasized(chart) { + for (let i = 0; i < glyph.tags.length; i++) { + if (chart.tagStates[glyph.tags[i]] == true) { + return true; + } + } + return false; + } + emphasizedByTag = glyphIsEmphasized(this); + } + + const maskNZ = (this.strokeCountMask & 1 << nn) != 0; + + var isHighlighted = isSelected || + (emphasizedByTag && !maskNZ) || + (maskNZ && (emphasizedByTag || this.numActiveTags == 0)) || + (this.latestTagHoveredOver != null && glyph.tags.indexOf(this.latestTagHoveredOver) >= 0); + var gR = this.gR; var sc = height() / 2000 * 10 / this.glyphsPerCol; var n, d, j; diff --git a/lib/sketch.js b/lib/sketch.js index 229a932..dede77a 100644 --- a/lib/sketch.js +++ b/lib/sketch.js @@ -31,6 +31,7 @@ function Sketch() { this.isNegated = false; this.isShowingLiveData = false; this.labels = []; + this.tags = []; this.keyDown = function(key) {}; this.keyUp = function(key) {}; this.mouseDown = function(x, y) {}; diff --git a/lib/sketchGlyph.js b/lib/sketchGlyph.js index 888d36b..0f65591 100644 --- a/lib/sketchGlyph.js +++ b/lib/sketchGlyph.js @@ -86,6 +86,7 @@ function SketchGlyph(name, src) { this.name = name; this.data = []; + this.tags = []; if (src.length > 0 && typeof(src[0]) == 'string') { for (var n = 0 ; n < src.length ; n++) { @@ -143,4 +144,8 @@ function SketchGlyph(name, src) { this.data[n].push(mix(stroke[i-1], stroke[i], u)); } } + + this.registerTags = function(tags) { + this.tags = tags; + } } diff --git a/lib/sketchPage.js b/lib/sketchPage.js index 2630ea3..e91ea3c 100644 --- a/lib/sketchPage.js +++ b/lib/sketchPage.js @@ -223,10 +223,19 @@ if (x >= b[0] && x < b[2] && y >= b[1] && y < b[3]) { glyphChart.isDragging = true; glyphChart.iDragged = i; - break; + return; + } + } + + + for (var i = 0; i < glyphChart.tags.length ; i++) { + var b = glyphChart.tagBounds(i); + if (x >= b[0] && x < b[2] && y >= b[1] && y < b[3]) { + glyphChart.isSelectingTag = true; + glyphChart.iSelectedTag = i; + return; } } - return; } if (bgClickCount == 1 && group.contains(x, y)) { @@ -530,8 +539,9 @@ return; } - if (isShowingGlyphs && ! glyphChart.isDragging) { + if (isShowingGlyphs && ! glyphChart.isDragging && ! glyphChart.isSelectingTag) { isShowingGlyphs = false; + glyphChart.disableAllTags(); return; } @@ -539,6 +549,12 @@ glyphs[glyphChart.iDragged].toFreehandSketch(This().mouseX, This().mouseY, 2.5 * height() / glyphChart.glyphsPerCol); glyphChart.isDragging = false; isShowingGlyphs = false; + glyphChart.disableAllTags(); + return; + } + + if (glyphChart.isSelectingTag) { + glyphChart.isSelectingTag = false; return; } diff --git a/sketches/bird.js b/sketches/bird.js index 98f1784..d7c5578 100644 --- a/sketches/bird.js +++ b/sketches/bird.js @@ -1,5 +1,6 @@ function() { this.label = "bird"; + this.tag = 'creatures'; this.is3D = true; this.bird = new Bird(); diff --git a/sketches/boolean.js b/sketches/boolean.js index 9f989c9..f869095 100644 --- a/sketches/boolean.js +++ b/sketches/boolean.js @@ -1,6 +1,7 @@ function() { this.label = "Boolean"; + this.tag = "logic"; this.state = true; this.onClick = ['toggle T/F', function() { this.state = ! this.state; }]; this.render = function() { diff --git a/sketches/face.js b/sketches/face.js index 08a3d18..bbfee94 100644 --- a/sketches/face.js +++ b/sketches/face.js @@ -1,5 +1,6 @@ function() { this.label = 'face'; + this.tag = 'people'; this.is3D = true; this.mode = 0; this.isNeutral = false; diff --git a/sketches/fish.js b/sketches/fish.js index d956eba..57e51b8 100644 --- a/sketches/fish.js +++ b/sketches/fish.js @@ -1,5 +1,6 @@ function() { this.label = 'fish'; + this.tag = 'creatures'; this.swim = false; this.onSwipe[0] = ['SWIM!', function() { this.swim = true; }]; this.angleY = 0; diff --git a/sketches/mask.js b/sketches/mask.js index 3720e87..e77cac1 100644 --- a/sketches/mask.js +++ b/sketches/mask.js @@ -1,5 +1,6 @@ function() { this.label = 'mask'; + this.tag = 'people'; this.is3D = true; var that = this; diff --git a/sketches/midi.js b/sketches/midi.js index f955893..8738981 100644 --- a/sketches/midi.js +++ b/sketches/midi.js @@ -1,5 +1,6 @@ function() { this.label = "Midi"; + this.tags = ["music", "audio"]; // Draw as a musical note. diff --git a/sketches/piano.js b/sketches/piano.js index 7b8ef09..f9c1094 100644 --- a/sketches/piano.js +++ b/sketches/piano.js @@ -3,6 +3,7 @@ function() { TODO: Add chords. */ this.label = 'piano'; + this.tags = ['music', 'audio']; this.minOctave = 3; this.maxOctave = 3; this.pt = newVec3(-100,0,0); From df63992d984f4299f0ff8d4d8d67bad99ff9bc16 Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Thu, 16 Nov 2017 13:54:44 -0500 Subject: [PATCH 03/13] fixed click toggle for tags --- lib/g.js | 2 +- lib/glyphChart.js | 41 ++++++++++++++++++++++------------------- lib/sketchGlyph.js | 6 +++++- lib/sketchPage.js | 12 +++++------- 4 files changed, 33 insertions(+), 28 deletions(-) diff --git a/lib/g.js b/lib/g.js index a60883d..33e170a 100644 --- a/lib/g.js +++ b/lib/g.js @@ -1468,7 +1468,7 @@ var glyph = new SketchGlyph(name, strokes); glyph.indexName = indexName; - glyph.registerTags(tags); + glyph.assignTags(tags); for (var i = 0 ; i < glyphs.length ; i++) if (indexName < glyphs[i].indexName) { diff --git a/lib/glyphChart.js b/lib/glyphChart.js index ce74758..51302e3 100644 --- a/lib/glyphChart.js +++ b/lib/glyphChart.js @@ -5,8 +5,8 @@ function GlyphChart() { this.iDragged = 0; this.isDragging = false; this.isSelectingTag = false; + this.isClicked = false; this.iSelectedTag = 0; - this.latestTagHoveredOver = null; this.strokeCountMask = 0; @@ -43,6 +43,9 @@ GlyphChart.prototype = { return [ x, y, x + ht * .75, y + ht * .85 ]; }, draw : function() { + if (this.isClicked) + console.log(this.isClicked); + this._isFuzzyLines = sketchPage.isFuzzyLines(); sketchPage.setFuzzyLines(false); @@ -66,14 +69,14 @@ GlyphChart.prototype = { for (i = 0 ; i < glyphs.length ; i++) { b = this.bounds(i); if (mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]) { - if ( mx - b[0] + my - b[1] > this.gR || - mx - b[0] + b[3] - my > this.gR || - b[2] - mx + my - b[1] > this.gR || - b[2] - mx + b[3] - my > this.gR ) - this.isAnySelected = true; - break; + if (mx - b[0] + my - b[1] > this.gR || + mx - b[0] + b[3] - my > this.gR || + b[2] - mx + my - b[1] > this.gR || + b[2] - mx + b[3] - my > this.gR) + this.isAnySelected = true; + break; - } + } } this.drawTagList(); @@ -84,8 +87,6 @@ GlyphChart.prototype = { if (this.isDragging) this.drawGlyph(this.iDragged, This().mouseX, This().mouseY); - this.latestTagHoveredOver = null; - _g.restore(); sketchPage.setFuzzyLines(this._isFuzzyLines); @@ -97,7 +98,7 @@ GlyphChart.prototype = { tagBounds : function(i) { const txtLen = (i == 0) ? this.resetTagHeader.length : this.tags[i].length; var ht = this.tagBoundHeight; - var x = width() - (txtLen * 10) - _g.panY; + var x = width() - (txtLen * 10) - _g.panY - 400; // THIS COMMENTED CODE WOULD CYCLE THE BOX AROUND TO THE NEXT COLUMN, // DISABLED FOR NOW FOR TAGS, LIKELY TO RE-ACTIVATED LATER var y = ((i /*% this.glyphsPerCol*/) * height()) / (height() / this.tagBoundHeight) + ht * .1 - _g.panY; @@ -154,7 +155,10 @@ GlyphChart.prototype = { } // WHETHER THIS TAG HAS BEEN CLICKED ON THE CURRENT FRAME - var isClicked = that.isSelectingTag && i == that.iSelectedTag; + var isClicked = that.isClicked && that.isSelectingTag && i == that.iSelectedTag; + if (isClicked) { + that.isClicked = false; + } // IF SO, TOGGLE ACTIVE STATE const tag = that.tags[i]; @@ -165,7 +169,7 @@ GlyphChart.prototype = { } // TOGGLE INDIVIDUAL STATE else { - console.log("TOGGLE"); + //console.log("TOGGLE"); const prevState = that.tagStates[tag]; that.tagStates[tag] = !prevState; that.numActiveTags += (prevState == true) ? -1 : 1; @@ -233,9 +237,9 @@ GlyphChart.prototype = { var txt = glyphs[i].indexName; var isSelected = mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]; - var emphasizedByTag = false; + var highlightedByTag = false; if (glyph.tags.length > 0 && this.numActiveTags > 0) { - function glyphIsEmphasized(chart) { + function isHighlightedByTag(chart) { for (let i = 0; i < glyph.tags.length; i++) { if (chart.tagStates[glyph.tags[i]] == true) { return true; @@ -243,15 +247,14 @@ GlyphChart.prototype = { } return false; } - emphasizedByTag = glyphIsEmphasized(this); + highlightedByTag = isHighlightedByTag(this); } const maskNZ = (this.strokeCountMask & 1 << nn) != 0; var isHighlighted = isSelected || - (emphasizedByTag && !maskNZ) || - (maskNZ && (emphasizedByTag || this.numActiveTags == 0)) || - (this.latestTagHoveredOver != null && glyph.tags.indexOf(this.latestTagHoveredOver) >= 0); + ( maskNZ && (highlightedByTag || this.numActiveTags == 0) ) || + ( !maskNZ && (highlightedByTag) ); var gR = this.gR; var sc = height() / 2000 * 10 / this.glyphsPerCol; diff --git a/lib/sketchGlyph.js b/lib/sketchGlyph.js index 0f65591..b86d217 100644 --- a/lib/sketchGlyph.js +++ b/lib/sketchGlyph.js @@ -145,7 +145,11 @@ function SketchGlyph(name, src) { } } - this.registerTags = function(tags) { + this.assignTags = function(src) { + const tags = []; + for (let i = 0; i < src.length; i++) { + tags.push(src[i]); + } this.tags = tags; } } diff --git a/lib/sketchPage.js b/lib/sketchPage.js index e91ea3c..40570b3 100644 --- a/lib/sketchPage.js +++ b/lib/sketchPage.js @@ -95,6 +95,7 @@ this.sketches = []; this.zoom = 1; palette.dragXY = null; + } SketchPage.prototype = { @@ -200,6 +201,7 @@ return; this.isPressed = true; + this.isClick = true; this.isMouseDownOverBackground = ! isHover(); this.travel = 0; @@ -227,15 +229,16 @@ } } - - for (var i = 0; i < glyphChart.tags.length ; i++) { + for (var i = 0 ; i < glyphChart.tags.length ; i++) { var b = glyphChart.tagBounds(i); if (x >= b[0] && x < b[2] && y >= b[1] && y < b[3]) { glyphChart.isSelectingTag = true; glyphChart.iSelectedTag = i; + glyphChart.isClicked = true; return; } } + return; } if (bgClickCount == 1 && group.contains(x, y)) { @@ -553,11 +556,6 @@ return; } - if (glyphChart.isSelectingTag) { - glyphChart.isSelectingTag = false; - return; - } - if (isSketchDragActionEnabled && this.travel > clickSize()) { endSketchDragAction(x, y); bgClickCount = 0; From 8204c2e80665b3e277973781c77faf47259dfd76 Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Thu, 16 Nov 2017 19:31:38 -0500 Subject: [PATCH 04/13] actually fixed click tag bug --- lib/glyphChart.js | 29 ++++++++++++----------------- lib/sketchPage.js | 5 +++++ 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/lib/glyphChart.js b/lib/glyphChart.js index 51302e3..3dabc9c 100644 --- a/lib/glyphChart.js +++ b/lib/glyphChart.js @@ -11,7 +11,7 @@ function GlyphChart() { this.strokeCountMask = 0; this.tags = ['']; - // BITMAP OF ON / OFF STATES FOR EACH TAG + // MAP OF ON / OFF STATES FOR EACH TAG this.tagStates = {}; this.numActiveTags = 0; } @@ -43,9 +43,6 @@ GlyphChart.prototype = { return [ x, y, x + ht * .75, y + ht * .85 ]; }, draw : function() { - if (this.isClicked) - console.log(this.isClicked); - this._isFuzzyLines = sketchPage.isFuzzyLines(); sketchPage.setFuzzyLines(false); @@ -117,6 +114,7 @@ GlyphChart.prototype = { for (; i < this.tags.length; i++) { if (tag < this.tags[i]) { this.tags.splice(i, 0, tag); + i++; // NEED TO TEST break; } } @@ -128,7 +126,6 @@ GlyphChart.prototype = { } }, disableAllTags : function() { - console.log("DISABLING TAGS"); for (let i = 1; i < this.tags.length; i++) { this.tagStates[this.tags[i]] = false; } @@ -150,29 +147,27 @@ GlyphChart.prototype = { var t = (that.t - i - 0.55) * 2.5 + i + .5; var isSelected = mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]; - if (isSelected && i > 0) { - that.latestTagHoveredOver = that.tags[i]; - } - // WHETHER THIS TAG HAS BEEN CLICKED ON THE CURRENT FRAME - var isClicked = that.isClicked && that.isSelectingTag && i == that.iSelectedTag; - if (isClicked) { - that.isClicked = false; - } + var isClicked = isSelected && that.isClicked && i == that.iSelectedTag; // IF SO, TOGGLE ACTIVE STATE const tag = that.tags[i]; if (isClicked) { + that.isClicked = false; // RESET ALL TO OFF STAT if (i == 0) { that.disableAllTags(); } // TOGGLE INDIVIDUAL STATE else { - //console.log("TOGGLE"); const prevState = that.tagStates[tag]; that.tagStates[tag] = !prevState; - that.numActiveTags += (prevState == true) ? -1 : 1; + if (prevState == true) { + that.numActiveTags--; + } + else { + that.numActiveTags++; + } } } @@ -185,9 +180,9 @@ GlyphChart.prototype = { var sc = height() / 2000 * 10 / that.tagBoundHeight; var n, d, j; - if (i == 0) { + // if (i == 0) { //fillPolygon(createRoundRect(gX, gY, gW, gH, gR)); - } + // } lineWidth(0.5); // color(that.color()); diff --git a/lib/sketchPage.js b/lib/sketchPage.js index 40570b3..c1d9102 100644 --- a/lib/sketchPage.js +++ b/lib/sketchPage.js @@ -556,6 +556,11 @@ return; } + if (glyphChart.isSelectingTag) { + glyphChart.isSelectingTag = false; + return; + } + if (isSketchDragActionEnabled && this.travel > clickSize()) { endSketchDragAction(x, y); bgClickCount = 0; From 440bed7e4f9f3f8467d747238ae4245dab6f5516 Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Thu, 16 Nov 2017 20:24:58 -0500 Subject: [PATCH 05/13] hover over tag to highlight a sketch glyph --- lib/glyphChart.js | 41 ++++++++++++++++++++++++++++++++--------- 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/lib/glyphChart.js b/lib/glyphChart.js index 3dabc9c..5a68ceb 100644 --- a/lib/glyphChart.js +++ b/lib/glyphChart.js @@ -7,9 +7,11 @@ function GlyphChart() { this.isSelectingTag = false; this.isClicked = false; this.iSelectedTag = 0; + this.hoveredOverTag = null; this.strokeCountMask = 0; + // ARRAY OF REGISTERED TAGS this.tags = ['']; // MAP OF ON / OFF STATES FOR EACH TAG this.tagStates = {}; @@ -72,7 +74,6 @@ GlyphChart.prototype = { b[2] - mx + b[3] - my > this.gR) this.isAnySelected = true; break; - } } @@ -84,6 +85,8 @@ GlyphChart.prototype = { if (this.isDragging) this.drawGlyph(this.iDragged, This().mouseX, This().mouseY); + this.hoveredOverTag = null; + _g.restore(); sketchPage.setFuzzyLines(this._isFuzzyLines); @@ -95,7 +98,7 @@ GlyphChart.prototype = { tagBounds : function(i) { const txtLen = (i == 0) ? this.resetTagHeader.length : this.tags[i].length; var ht = this.tagBoundHeight; - var x = width() - (txtLen * 10) - _g.panY - 400; + var x = width() - (txtLen * 10) - _g.panY; // THIS COMMENTED CODE WOULD CYCLE THE BOX AROUND TO THE NEXT COLUMN, // DISABLED FOR NOW FOR TAGS, LIKELY TO RE-ACTIVATED LATER var y = ((i /*% this.glyphsPerCol*/) * height()) / (height() / this.tagBoundHeight) + ht * .1 - _g.panY; @@ -152,8 +155,12 @@ GlyphChart.prototype = { // IF SO, TOGGLE ACTIVE STATE const tag = that.tags[i]; + if (isSelected) { + that.hoveredOverTag = tag; + } if (isClicked) { that.isClicked = false; + that.clickStart = time; // RESET ALL TO OFF STAT if (i == 0) { that.disableAllTags(); @@ -233,12 +240,26 @@ GlyphChart.prototype = { var isSelected = mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]; var highlightedByTag = false; - if (glyph.tags.length > 0 && this.numActiveTags > 0) { + if (glyph.tags.length > 0) { function isHighlightedByTag(chart) { - for (let i = 0; i < glyph.tags.length; i++) { - if (chart.tagStates[glyph.tags[i]] == true) { - return true; + // IF ANY TAGS ARE LOCKED-IN + if (chart.numActiveTags > 0) { + for (let i = 0; i < glyph.tags.length; i++) { + if (chart.hoveredOverTag == glyph.tags[i] || + chart.tagStates[glyph.tags[i]] == true) { + return true; + } } + return false; + } + // OTHERWISE CHECK ONLY THE HOVERED-OVER TAG IF IT EXISTS + if (chart.hoveredOverTag != null) { + for (let i = 0; i < glyph.tags.length; i++) { + if (chart.hoveredOverTag == glyph.tags[i]) { + return true; + } + } + return false; } return false; } @@ -246,10 +267,12 @@ GlyphChart.prototype = { } const maskNZ = (this.strokeCountMask & 1 << nn) != 0; - + // GLYPH IS SELECTED DIRECTLY var isHighlighted = isSelected || - ( maskNZ && (highlightedByTag || this.numActiveTags == 0) ) || - ( !maskNZ && (highlightedByTag) ); + // GLYPH HAS NO LOCKED-IN OR HOVERED-OVER TAGS, CONSIDER THE STROKE COUNT MASK + (this.numActiveTags == 0 && this.hoveredOverTag == null && maskNZ) || + // GLYPH HAS A LOCKED-IN OR HOVERED-OVER TAG, CONSIDER THE COUNT MASK ONLY IF IT IS ACTIVE + (highlightedByTag && (maskNZ || this.strokeCountMask == 0)); var gR = this.gR; var sc = height() / 2000 * 10 / this.glyphsPerCol; From 0faac395ce54ddead313a7df75a642e4f5677f16 Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Thu, 16 Nov 2017 20:36:57 -0500 Subject: [PATCH 06/13] added example tags to several existing sketches --- sketches/bounce.js | 1 + sketches/cube.js | 1 + sketches/cube4d.js | 1 + sketches/flap.js | 1 + sketches/matrix.js | 1 + sketches/mipmap.js | 1 + sketches/mipmap2.js | 1 + sketches/mult.js | 1 + sketches/pendulum.js | 1 + sketches/perspective.js | 1 + sketches/phong.js | 1 + sketches/raytrace.js | 1 + sketches/rocket.js | 1 + sketches/smiley.js | 1 + sketches/soundfile.js | 1 + sketches/speaker.js | 1 + sketches/vec.js | 1 + 17 files changed, 17 insertions(+) diff --git a/sketches/bounce.js b/sketches/bounce.js index 4191fc5..dbad014 100644 --- a/sketches/bounce.js +++ b/sketches/bounce.js @@ -1,5 +1,6 @@ function() { this.label = "bounce"; + this.tag = 'physics'; this.isBouncing = false; this.bouncing = 0; this.y = 0; diff --git a/sketches/cube.js b/sketches/cube.js index a508c2f..6356bfe 100644 --- a/sketches/cube.js +++ b/sketches/cube.js @@ -1,5 +1,6 @@ function() { this.label = 'cube'; + this.tag = 'geometry'; this.is3D = true; this._isSolid = true; diff --git a/sketches/cube4d.js b/sketches/cube4d.js index 61894ce..69fd610 100644 --- a/sketches/cube4d.js +++ b/sketches/cube4d.js @@ -1,5 +1,6 @@ function() { this.label = 'cube4d'; + this.tag = 'geometry'; this.is3D = true; this.onClick = ['unrotate', function() { trackball.identity(); }]; this.onPress = function(B) { A.copy(B); } diff --git a/sketches/flap.js b/sketches/flap.js index 8a09ead..8a320fd 100644 --- a/sketches/flap.js +++ b/sketches/flap.js @@ -1,5 +1,6 @@ function() { this.label = 'flap'; + this.tag = 'creatures'; this.isWandering = false; this.isExiting = false; diff --git a/sketches/matrix.js b/sketches/matrix.js index 3f081a7..fd3c7d5 100644 --- a/sketches/matrix.js +++ b/sketches/matrix.js @@ -1,5 +1,6 @@ function() { this.labels = 'Matrix bezier bspline hermite'.split(' '); + this.tag = 'mathematics'; this.inLabel = ['', '\u2715']; function rounded(x) { return floor(x * 100) / 100; } var c = "cos"; diff --git a/sketches/mipmap.js b/sketches/mipmap.js index 8c48099..045f5bc 100644 --- a/sketches/mipmap.js +++ b/sketches/mipmap.js @@ -1,5 +1,6 @@ function() { this.label = 'mipmap'; + this.tag = 'computer graphics'; this.render = function() { for (var i = 0 ; i < 2 ; i++) { mClosedCurve([[-1,1],[1,1],[1,-1],[-1,-1]]); diff --git a/sketches/mipmap2.js b/sketches/mipmap2.js index bdb067b..e454bf6 100644 --- a/sketches/mipmap2.js +++ b/sketches/mipmap2.js @@ -1,5 +1,6 @@ function() { this.label = 'mipmap2'; + this.tag = 'computer graphics'; this.is3D = true; this.mode = 0; this.onCmdClick = function() { this.mode++; } diff --git a/sketches/mult.js b/sketches/mult.js index 7713593..216d6ef 100644 --- a/sketches/mult.js +++ b/sketches/mult.js @@ -3,6 +3,7 @@ function() { Multiply a number, vector or matrix by a number, vector or matrix. */ this.label = "Mult"; + this.tags = ["operators", "mathematics"]; this.render = function() { mLine( [-1, 1], [ 1, -1] ); mLine( [ 1, 1], [-1, -1] ); diff --git a/sketches/pendulum.js b/sketches/pendulum.js index 9c495e0..ae5a2cf 100644 --- a/sketches/pendulum.js +++ b/sketches/pendulum.js @@ -1,5 +1,6 @@ function() { this.label = "pendulum"; + this.tag = "physics"; var xx, yy, spring = new Spring(), force = 0, adjustHeight = 1, angle = 0, bobRadius, hubWidth, rodHeight, swingMode = 'swing'; diff --git a/sketches/perspective.js b/sketches/perspective.js index 66bf417..b4cd403 100644 --- a/sketches/perspective.js +++ b/sketches/perspective.js @@ -1,5 +1,6 @@ function() { this.label = 'perspect'; + this.tag = 'computer graphics'; this.point = newVec3(); this.dy = 0; this.onPress = function(point) { this.point.copy(point); } diff --git a/sketches/phong.js b/sketches/phong.js index 7e0e8fd..a741838 100644 --- a/sketches/phong.js +++ b/sketches/phong.js @@ -1,5 +1,6 @@ function() { this.label = "phong"; + this.tag = "computer graphics"; this.rx = .707; this.ry = .707; this.code = [["", "R = 2 * N * dot(N,L) - L"]]; diff --git a/sketches/raytrace.js b/sketches/raytrace.js index 4e605dd..ac9fb0c 100644 --- a/sketches/raytrace.js +++ b/sketches/raytrace.js @@ -1,5 +1,6 @@ function() { this.label = 'raytrace'; + this.tag = 'computer graphics'; this.mode = 0; this.onCmdClick = function() { this.mode++; } this.render = function() { diff --git a/sketches/rocket.js b/sketches/rocket.js index 51f48b2..999e94f 100644 --- a/sketches/rocket.js +++ b/sketches/rocket.js @@ -1,5 +1,6 @@ function() { this.label = "rocket"; + this.tags = ["vehicles", "aircrafts"]; this.onSwipeTime = 0; this.velocity = 0; this.altitude = 0; diff --git a/sketches/smiley.js b/sketches/smiley.js index 25bc619..5e8defd 100644 --- a/sketches/smiley.js +++ b/sketches/smiley.js @@ -1,5 +1,6 @@ function() { this.label = 'smiley'; + this.tag = 'people'; this.onSwipe[6] = ['wink', function() { this.isWink = ! this.isWink; }]; this.render = function() { mDrawOval([-1,-1],[1,1],32,PI/2,PI/2-TAU); diff --git a/sketches/soundfile.js b/sketches/soundfile.js index aae176f..b699ec8 100644 --- a/sketches/soundfile.js +++ b/sketches/soundfile.js @@ -1,6 +1,7 @@ function() { var self = this; this.label = 'Soundfile'; + this.tag = 'audio'; this.soundBuffer = null; this.soundBufferChannelData = null; diff --git a/sketches/speaker.js b/sketches/speaker.js index b6b787e..ac7c98e 100644 --- a/sketches/speaker.js +++ b/sketches/speaker.js @@ -1,5 +1,6 @@ function() { this.label = 'speaker'; + this.tags = ['audio', 'signals']; this.render = function() { var a = .3; mCurve([[1,-1],[-a,-a],[-1,-a],[-1,a],[-a,a],[1,1]]); diff --git a/sketches/vec.js b/sketches/vec.js index 3f93930..b46b5b0 100644 --- a/sketches/vec.js +++ b/sketches/vec.js @@ -6,6 +6,7 @@ function() { return 1 - this.selection % 2; } this.labels = 'Hvec2 Vvec2 Hvec3 Vvec3 Hvec4 Vvec4'.split(' '); + this.tag = 'mathematics'; this.value = [1,0,0,0]; this.row = 0; this.precision = 1; From daada5330c5455845afc0f8d6ca3cb71431bad97 Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Fri, 17 Nov 2017 13:01:47 -0500 Subject: [PATCH 07/13] add color cues for tag select de-select, align text correctly, click position bug needs to be fixed --- lib/glyphChart.js | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/lib/glyphChart.js b/lib/glyphChart.js index 5a68ceb..5196d24 100644 --- a/lib/glyphChart.js +++ b/lib/glyphChart.js @@ -91,19 +91,23 @@ GlyphChart.prototype = { sketchPage.setFuzzyLines(this._isFuzzyLines); }, - // WORK-IN-PROGRESS + tagBoundWidth : 125, tagBoundHeight : 50, resetTagHeader : "Reset Tags", + tagActiveColor : "green", + tagColorOnActivate : "green", + tagColorOnDeactivate : "red", tagBounds : function(i) { const txtLen = (i == 0) ? this.resetTagHeader.length : this.tags[i].length; var ht = this.tagBoundHeight; - var x = width() - (txtLen * 10) - _g.panY; + var strLen = textWidth(((i == 0) ? this.resetTagHeader : this.tags[i]) + ' '); + var x = width() - strLen - _g.panX; // THIS COMMENTED CODE WOULD CYCLE THE BOX AROUND TO THE NEXT COLUMN, // DISABLED FOR NOW FOR TAGS, LIKELY TO RE-ACTIVATED LATER var y = ((i /*% this.glyphsPerCol*/) * height()) / (height() / this.tagBoundHeight) + ht * .1 - _g.panY; - return [ x, y , x + min(this.tagBoundWidth, txtLen * 10) - _g.panY, y + ht * .85 ]; + return [ x, y , x + strLen, y + ht]; }, addTags : function(tags) { tags.sort(); @@ -117,7 +121,7 @@ GlyphChart.prototype = { for (; i < this.tags.length; i++) { if (tag < this.tags[i]) { this.tags.splice(i, 0, tag); - i++; // NEED TO TEST + i++; break; } } @@ -188,10 +192,10 @@ GlyphChart.prototype = { var n, d, j; // if (i == 0) { - //fillPolygon(createRoundRect(gX, gY, gW, gH, gR)); + // fillPolygon(createRoundRect(gX, gY, gW, gH, gR)); // } - lineWidth(0.5); + // lineWidth(0.5); // color(that.color()); // if (isWhiteBackground()) { // line(gX + gW, gY + gH - gR, gX + gW, gY + gR); @@ -210,8 +214,23 @@ GlyphChart.prototype = { // line(gX, gY + gR, rx, ry); // } - _g.strokeStyle = _g.fillStyle = isHighlighted ? defaultPenColor : that.color(); - _g.lineWidth = isHighlighted ? 2 : 1; + let stroke = defaultPenColor; + if (isSelected) { + if (isClicked) { + stroke = (isActive) ? that.tagColorOnActivate : that.tagColorOnDeactivate; + } + else { + stroke = defaultPenColor; + } + } + else { + stroke = (isActive) ? that.tagActiveColor : that.color(); + } + + _g.strokeStyle = _g.fillStyle = stroke; + + _g.lineWidth = (isActive) ? 2 : + (isHighlighted ? 2 : 1); _g_text(((i == 0) ? that.resetTagHeader : that.tags[i]), [gX + 2, y + 2, 0]); } From a882e64392a0015b8f0cb728ad5333f0af1899a8 Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Fri, 17 Nov 2017 14:43:45 -0500 Subject: [PATCH 08/13] no longer show labels for un-highlighted glyphs, for clarity --- lib/glyphChart.js | 7 ++++++- sketches/holospecs.js | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/glyphChart.js b/lib/glyphChart.js index 5196d24..d06334b 100644 --- a/lib/glyphChart.js +++ b/lib/glyphChart.js @@ -322,8 +322,13 @@ GlyphChart.prototype = { _g.strokeStyle = _g.fillStyle = isHighlighted ? defaultPenColor : this.color(); _g.lineWidth = isHighlighted ? 2 : 1; - if (isSelected || ! this.isAnySelected) + if (isHighlighted || + (this.strokeCountMask == 0 && + this.numActiveTags == 0 && + this.hoveredOverTag == null && + !this.isAnySelected)) { _g_text(txt, [gX + 2, y + 2, 0]); + } y += height() / 45 * 10 / this.glyphsPerCol; diff --git a/sketches/holospecs.js b/sketches/holospecs.js index df3df74..3996e3f 100644 --- a/sketches/holospecs.js +++ b/sketches/holospecs.js @@ -1,5 +1,6 @@ function() { this.label = 'holospecs'; + this.tags = ["future", "vr", "ar"]; this.is3D = true; this.displayMode = 0; this.onClick = ['next mode', function() { this.displayMode = (this.displayMode + 1) % 4; }]; From c8b4505147ef731cd488364b538bb62918ebe894 Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Fri, 17 Nov 2017 16:21:08 -0500 Subject: [PATCH 09/13] found temporary fix for half-size tag collision detection bug by doubling legal size --- lib/sketchPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/sketchPage.js b/lib/sketchPage.js index c1d9102..3371df7 100644 --- a/lib/sketchPage.js +++ b/lib/sketchPage.js @@ -231,7 +231,7 @@ for (var i = 0 ; i < glyphChart.tags.length ; i++) { var b = glyphChart.tagBounds(i); - if (x >= b[0] && x < b[2] && y >= b[1] && y < b[3]) { + if (x >= /*(width() - (2 * (width() - b[0])))*/ -width() - 2 * b[0] && x < b[2] && y >= b[1] && y < b[3]) { glyphChart.isSelectingTag = true; glyphChart.iSelectedTag = i; glyphChart.isClicked = true; From f84b5c5a49063adbf6459bf2b181c5df892968fa Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Fri, 17 Nov 2017 17:04:01 -0500 Subject: [PATCH 10/13] replaced buggy condition with more verbose correct version for now --- lib/sketchPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/sketchPage.js b/lib/sketchPage.js index 3371df7..4c1bb2d 100644 --- a/lib/sketchPage.js +++ b/lib/sketchPage.js @@ -231,7 +231,7 @@ for (var i = 0 ; i < glyphChart.tags.length ; i++) { var b = glyphChart.tagBounds(i); - if (x >= /*(width() - (2 * (width() - b[0])))*/ -width() - 2 * b[0] && x < b[2] && y >= b[1] && y < b[3]) { + if (x >= (width() - (2 * (width() - b[0]))) && x < b[2] && y >= b[1] && y < b[3]) { glyphChart.isSelectingTag = true; glyphChart.iSelectedTag = i; glyphChart.isClicked = true; From 4d14f9018a632ae525ac8e1682845a3f7be79386 Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Fri, 24 Nov 2017 21:30:41 -0500 Subject: [PATCH 11/13] tags thinner for more space, highlighted with border when active --- lib/g.js | 5 ++- lib/glyphChart.js | 80 +++++++++++++++++++++-------------------------- 2 files changed, 39 insertions(+), 46 deletions(-) diff --git a/lib/g.js b/lib/g.js index 33e170a..d36691c 100644 --- a/lib/g.js +++ b/lib/g.js @@ -1468,7 +1468,10 @@ var glyph = new SketchGlyph(name, strokes); glyph.indexName = indexName; - glyph.assignTags(tags); + + if (tags) { + glyph.assignTags(tags); + } for (var i = 0 ; i < glyphs.length ; i++) if (indexName < glyphs[i].indexName) { diff --git a/lib/glyphChart.js b/lib/glyphChart.js index d06334b..1fa9001 100644 --- a/lib/glyphChart.js +++ b/lib/glyphChart.js @@ -92,22 +92,18 @@ GlyphChart.prototype = { sketchPage.setFuzzyLines(this._isFuzzyLines); }, - tagBoundWidth : 125, - tagBoundHeight : 50, + // RESET TAGS TEMPORARILY A TAG BUTTON (SHOULD CHANGE) resetTagHeader : "Reset Tags", - tagActiveColor : "green", - tagColorOnActivate : "green", - tagColorOnDeactivate : "red", tagBounds : function(i) { const txtLen = (i == 0) ? this.resetTagHeader.length : this.tags[i].length; - var ht = this.tagBoundHeight; + var ht = 1.5 * textHeight(); var strLen = textWidth(((i == 0) ? this.resetTagHeader : this.tags[i]) + ' '); var x = width() - strLen - _g.panX; // THIS COMMENTED CODE WOULD CYCLE THE BOX AROUND TO THE NEXT COLUMN, // DISABLED FOR NOW FOR TAGS, LIKELY TO RE-ACTIVATED LATER - var y = ((i /*% this.glyphsPerCol*/) * height()) / (height() / this.tagBoundHeight) + ht * .1 - _g.panY; + var y = ((i /*% this.glyphsPerCol*/) * height()) / (height() / ht) + ht * .1 - _g.panY; - return [ x, y , x + strLen, y + ht]; + return [ x, y , x + strLen + 20, y + ht]; }, addTags : function(tags) { tags.sort(); @@ -149,7 +145,7 @@ GlyphChart.prototype = { var b = that.tagBounds(i); var gX = b[0], gY = b[1], gW = b[2]-b[0], gH = b[3]-b[1]; - var x = gX + (height() / that.tagBoundHeight) * .1; + var x = gX + (height() / (1.5 * textHeight())) * .1; var y = gY; var t = (that.t - i - 0.55) * 2.5 + i + .5; var isSelected = mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]; @@ -164,16 +160,15 @@ GlyphChart.prototype = { } if (isClicked) { that.isClicked = false; - that.clickStart = time; // RESET ALL TO OFF STAT if (i == 0) { that.disableAllTags(); } // TOGGLE INDIVIDUAL STATE else { - const prevState = that.tagStates[tag]; - that.tagStates[tag] = !prevState; - if (prevState == true) { + const prevWasOn = that.tagStates[tag]; + that.tagStates[tag] = !prevWasOn; + if (prevWasOn) { that.numActiveTags--; } else { @@ -188,44 +183,38 @@ GlyphChart.prototype = { var isHighlighted = isSelected || isActive; var gR = that.gR; - var sc = height() / 2000 * 10 / that.tagBoundHeight; + var sc = height() / 2000 * 10 / (textHeight() * 1.5); var n, d, j; - // if (i == 0) { - // fillPolygon(createRoundRect(gX, gY, gW, gH, gR)); - // } - - // lineWidth(0.5); - // color(that.color()); - // if (isWhiteBackground()) { - // line(gX + gW, gY + gH - gR, gX + gW, gY + gR); - // line(gX + gW - gR, gY + gH, gX + gR, gY + gH); - // var rx = gX + gW - gR + .707 * gR; - // var ry = gY + gH - gR + .707 * gR; - // line(gX + gW - gR, gY + gH, rx, ry); - // line(gX + gW, gY + gH - gR, rx, ry); - // } - // else { - // line(gX + gR, gY, gX + gW - gR, gY); - // line(gX, gY + gR, gX, gY + gH - gR); - // var rx = gX + gR - .707 * gR; - // var ry = gY + gR - .707 * gR; - // line(gX + gR, gY, rx, ry); - // line(gX, gY + gR, rx, ry); - // } - - let stroke = defaultPenColor; - if (isSelected) { - if (isClicked) { - stroke = (isActive) ? that.tagColorOnActivate : that.tagColorOnDeactivate; + function highlightTagAsActive() { + fillPolygon(createRoundRect(gX, gY, gW, gH, gR)); + lineWidth(0.25); + color(that.color()); + if (isWhiteBackground()) { + line(gX + gW, gY + gH - gR, gX + gW, gY + gR); + line(gX + gW - gR, gY + gH, gX + gR, gY + gH); + var rx = gX + gW - gR + .707 * gR; + var ry = gY + gH - gR + .707 * gR; + line(gX + gW - gR, gY + gH, rx, ry); + line(gX + gW, gY + gH - gR, rx, ry); } else { - stroke = defaultPenColor; + line(gX + gR, gY, gX + gW - gR, gY); + line(gX, gY + gR, gX, gY + gH - gR); + var rx = gX + gR - .707 * gR; + var ry = gY + gR - .707 * gR; + line(gX + gR, gY, rx, ry); + line(gX, gY + gR, rx, ry); } - } - else { - stroke = (isActive) ? that.tagActiveColor : that.color(); } + // RESET-TAGS SHOULD BE A DIFFERENT ELEMENT + // (NOT THE SAME TYPE OF BUTTON...CURRENT IMPLEMENTATION TEMPORARY) + if (isActive || i == 0) { + color(that.scrim()); + highlightTagAsActive(); + } + + const stroke = (isSelected) ? defaultPenColor : that.color(); _g.strokeStyle = _g.fillStyle = stroke; @@ -322,6 +311,7 @@ GlyphChart.prototype = { _g.strokeStyle = _g.fillStyle = isHighlighted ? defaultPenColor : this.color(); _g.lineWidth = isHighlighted ? 2 : 1; + // CHECK WHETHER TO DISPLAY SKETCH NAME if (isHighlighted || (this.strokeCountMask == 0 && this.numActiveTags == 0 && From 0dc82dff3938ddd3b835031285d813891252a61d Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Sat, 25 Nov 2017 13:37:25 -0500 Subject: [PATCH 12/13] reversed tag draw order, thickened borders when active --- lib/glyphChart.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/lib/glyphChart.js b/lib/glyphChart.js index 1fa9001..244b76b 100644 --- a/lib/glyphChart.js +++ b/lib/glyphChart.js @@ -94,9 +94,11 @@ GlyphChart.prototype = { // RESET TAGS TEMPORARILY A TAG BUTTON (SHOULD CHANGE) resetTagHeader : "Reset Tags", + + heightScale : 1.5, tagBounds : function(i) { const txtLen = (i == 0) ? this.resetTagHeader.length : this.tags[i].length; - var ht = 1.5 * textHeight(); + var ht = this.heightScale * textHeight(); var strLen = textWidth(((i == 0) ? this.resetTagHeader : this.tags[i]) + ' '); var x = width() - strLen - _g.panX; // THIS COMMENTED CODE WOULD CYCLE THE BOX AROUND TO THE NEXT COLUMN, @@ -145,7 +147,7 @@ GlyphChart.prototype = { var b = that.tagBounds(i); var gX = b[0], gY = b[1], gW = b[2]-b[0], gH = b[3]-b[1]; - var x = gX + (height() / (1.5 * textHeight())) * .1; + var x = gX + (height() / (that.heightScale * textHeight())) * .1; var y = gY; var t = (that.t - i - 0.55) * 2.5 + i + .5; var isSelected = mx >= b[0] && my >= b[1] && mx < b[2] && my < b[3]; @@ -183,12 +185,12 @@ GlyphChart.prototype = { var isHighlighted = isSelected || isActive; var gR = that.gR; - var sc = height() / 2000 * 10 / (textHeight() * 1.5); + var sc = height() / 2000 * 10 / (textHeight() * that.heightScale); var n, d, j; function highlightTagAsActive() { fillPolygon(createRoundRect(gX, gY, gW, gH, gR)); - lineWidth(0.25); + lineWidth(0.5); color(that.color()); if (isWhiteBackground()) { line(gX + gW, gY + gH - gR, gX + gW, gY + gR); @@ -224,7 +226,7 @@ GlyphChart.prototype = { _g_text(((i == 0) ? that.resetTagHeader : that.tags[i]), [gX + 2, y + 2, 0]); } - for (let i = 0; i < this.tags.length; i++) { + for (let i = this.tags.length - 1; i >= 0; i--) { color(this.scrim()); drawTag(i); } From 2fde11bba0148bbed65da8bb86dd111f192edd3b Mon Sep 17 00:00:00 2001 From: KTRosenberg Date: Wed, 13 Dec 2017 13:39:50 -0500 Subject: [PATCH 13/13] added note about necessary update to reset tags button --- lib/glyphChart.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/glyphChart.js b/lib/glyphChart.js index 244b76b..f5bd1d9 100644 --- a/lib/glyphChart.js +++ b/lib/glyphChart.js @@ -92,7 +92,8 @@ GlyphChart.prototype = { sketchPage.setFuzzyLines(this._isFuzzyLines); }, - // RESET TAGS TEMPORARILY A TAG BUTTON (SHOULD CHANGE) + // TODO: "RESET TAGS" IS TEMPORARILY A TAG BUTTON + // (SHOULD CHANGE INTO SOMETHING ELSE SO AS NOT TO BE CONFUSED WITH ACTUAL TAGS) resetTagHeader : "Reset Tags", heightScale : 1.5,