Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Button Generator
ID	1847123742
Created	11 years ago, 1375241245615
Updated	1 years ago, 1699582512167
Code	/** Button Generator, 2nd Generation Move the cursor into the display canvas and click the mouse. That brings up a menu. Click on the NEW BUTTON menu item. That creates a BUTTON that you can position anywhere. Click again to stop the button's motion. Click the mouse a fourth time somewhere outside of the diamond and click on the GENERATE CODE menu item. This opens the Processing.js environment's console which will contain Javascript code. Select and COPY all of the Javascript code and PASTE it into a new Khan Academy Javascript program at https://www.khanacademy.org/computer-programming/new/pjs. Restart that program. That program will display a fully functioning button that you created here. Okay, you just used a cannon to kill a fly. None-the-less, you probably could not have created a working diamond shaped button any quicker. The rest of this tome describes how you can create any number of buttons of numerous SHAPES, SIZES and COLORS and how to add TEXT strings in or around those buttons. It also provides the means for making persistent buttons, radio buttons, MENUs and SCROLLBARs. / / Are you looking for the original Better Button Generator? That can be found as a spin-off of this program at https://www.khanacademy.org/computer-programming/original-button-generator/4892297918480384 / /* In addition, easy to copy and use libraries are provided that adhere to the same techniques described by Pamela in her "A Button object type" tutorial at https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/programming-buttons/a/a-button-object-type , though the library deals with twenty nine (!) properties of buttons that include four additional callback functions besides "onClick". These libraries can be used without the help of the button editing or generating features of this program. Indeed, many of the 29 button properties are not available via this program's button editor. The Button Generator or "editor" is driven by menus. Most menu item have an equivalent "hot key" that can be pressed in its stead. The main menu is brought up by clicking the mouse in any available white space on the canvas. Once up, a button's menu can be selected from the main menu. Both menus often auto-dismiss themselves. The button menu is always dismissed when the main menu is brought up. The main menu's items are mostly self explanatory. The MENU DEMO menu item creates a small button that when clicked brings up a four item menu. If that demonstration already exists, then the MENU DEMO menu item destroys the demo. Similarly, the SCROLLBAR DEMO menu item creates or destroys a scrollbar demonstration. Note that the demos are not editable. As originally mentioned, the GENERATE CODE menu item produces all of the Javascript code necessary to produce a new Javascript program with the buttons that you have designed. In some cases it may be necessary to Restart the new program to get it to work. In extreme cases you may need to Reload the page to get it to work. Unlike most hot keys, the "g" hot key is not identical to the GENERATE CODE menu item. The key produces Javascript code without including copies of the dependent libraries. You will have to manually copy & paste the various required libraries in order to produce a working program. (This is because some browsers limit the amount of code that they display via println and all of the code in the all of libraries may exceed that limit.) As with the main menu, the button menu items are also self explanatory. All act upon the last button that you have clicked. For example to delete a button, click on that button and then click on the DELETE menu item. With the exception noted below, the NEW button menu item produces a button that is like the last selected button or a default diamond shaped button if no button was selected. The CLONE button is similar to NEW button. However when you subsequently edit most properties of a cloned button, then all clones of that button are affected by the edit. So if you want two or more buttons to look the same no matter how you modify any of them, then choose the CLONE menu item instead of the NEW menu item. Clones do NOT share "x", "y", "label", or "title" properties. A clone does NOT influence the NEW button menu item. The MOVE menu item allows you to move the selected button to a new location on the canvas. Motion stops when you click the mouse or type the ENTER or RETURN key. Additionally, typing any of the four ARROW keys move the button by only ONE pixel in their respective directions. The MORE SIDES and LESS SIDES change the shape of the selected button. One side less than a triangle is a rectangle. One side less than that is a an ellipse. The SIZE of the button is modified by typing the four ARROW keys. UP and RIGHT arrows make the button bigger; LEFT and DOWN arrows, smaller. The regular polygon shapes can be ROTATEd; rectangles and ellipses cannot. A button can have text inside it (called a "label") or beside it (called a "title"). The EDIT LABEL and EDIT TITLE menu items edit those two properties with a very simple text editor. While editing, the TEXTSIZE of the string can be increased with the UP arrow key and decreased with the DOWN arrow key. The gross ALIGNMENT of the text can changed by typing either of the LEFT or RIGHT arrow keys. Pixel precision alignment is accomplished by holding down the CONTROL key and typing any of the four ARROW keys. The edit is committed and editing terminates when you type ENTER or RETURN or when you click the mouse. The color of a button is determined by three properties called "fill", "hovered" and "selected". Each property has a menu item associated with it that allow you to click the mouse on a color to assign to that property. The editor presents a modest color picker for your assistance. Color editing can be aborted by typing the ENTER or RETURN key. SUNDRY: (1) The "j" hot key which is not associated with any menu item prints a JSON encoding of the current buttons' configurations. That string is written to stable storage and also drives the UNDO functionality. (2) The background of this program is white. There is a hook for providing an image background (see the variable "bgImage") that might assist in color editing. ------------------------------- Execution environment. In order for the libraries to work, mouseMoved must invoke Button.mouseMoved, mousePressed must invoke Button.mousePressed, and mouseReleased must invoke Button.mouseReleased. The buttons are redrawn by invoking Button.draw. The generated code supplies minimal code that satisfies the requirements. Note that the libraries do not depend on constant refreshing, so a draw function is NOT required. None-the-less, your program must invoke Button.draw to display the buttons. Button Properties: To see all the attributes associated with a button, expand the Javascript code for the "Button" library and peruse the twenty nine properties of the "defaultConfig" object. The button editor gives you control over 19 of these properties. The other ten can be set by editing the Javascript in your program. The features and values of most properties should be obvious, but a few are discussed below. The "firstVertex" property determines the rotation of any regular polygon shape. (It does not apply to rectangles or ellipses.) Its value is an angle measure. The default is to draw the first vertex of the polygon directly above its center. That angle measure is -90° or -π/2 radians. Though not obvious by their default values, "onClick", "onPress", "onRelease", "onHover" and "offHover" are event or callback FUNCTIONS. (The button editor provides minimal code using the buttons' "onClick" property.) The use and definitions of the first three should be obvious. The last two are similar to mouseOver and mouseOut, but apply to cursor hovering over a button. All functions are invoked passing no arguments. However, the button associated with the event is always the value of the Javascript keyword "this". The program may modify button b's properties. The best way to that is to invoke b.set(propertyName, newValue); which guarantees that internal dependencies are also modified. Such dependencies exist in the case of cloned buttons and any property affecting a button's geometry. Properties can be modified in bulk by passing a config object to button b's reInit method, e.g. b.reInit({ shape: 8, width: 42, firstVertex: -22.5, label: "STOP", labelFill: color(255), fill: color(205, 10, 15) }); The properties "x", "y", "label", and "title" are (almost) always unique to their buttons and have no side-effects. So direct assignment to such properties is fine. For example, b.x = mouseX; b.y = mouseY; / var Button = (function() { var referTo = "https://www.khanacademy.org/cs/p/1847123742"; var tau = (cos(PI) < 0) ? TWO_PI : 360; / KA silliness / / * This lists all of the properties of a button that are used * to draw that button and their default values. / var defaultConfig = { shape: "rect", / "ellipse", "rect" or the integers > 2 / x: width/2, / horizontal position / y: height/2, / vertical position / width: 150, height: 0, / only for rectangles and ellipses / rounded: 0, / only for rectangles / firstVertex: -tau/4 / polygon's 1st vertex is straight up /, strokeWeight: 1, stroke: color(0), fill: color(0, 234, 255), hovered: color(3, 162, 173), selected: color(6, 102, 140), label: "", labelFill: color(0), / label's text color / labelSize: 0, / zero is rederived wrt width / labelAlignX: CENTER, / horizontal alignment / labelDx: 0, / pixel resolution fine tuning / labelDy: 0, title: "", titleFill: color(0), / title's text color / titleSize: 0, / zero is rederived wrt width / titleAlign: BOTTOM, / location of the title wrt button / titleDx: 0, / pixel resolution fine tuning / titleDy: 0, / Handler FUNCTIONS if used: / onClick: 0, onPress: 0, onRelease: 0, onHover: 0, offHover: 0 }; / THE Constructor function for a Button. / var Button = function(config, invisible) { config = config \|\| null; this.reInit(config); Button.allButtons.push(this); void ((! invisible) && Button.buttons.push(this)); }; Button.enclosure = (0 \|\| arguments).callee; Button.buttons = []; / array of managed (visible) buttons / Button.allButtons = []; Button.selected = null; Button.hovered = null; Button.defaultConfig = defaultConfig; defaultConfig.stamp = -Infinity; / internal use only. / / * Propagate properties from "from" to "to" provided they * are on the white-list (defaultConfig). / Button.propagate = function(from, to) { for (var p in from) { if (from.hasOwnProperty(p) && defaultConfig.hasOwnProperty(p)) { to[p] = from[p]; } } }; / * Now, place all the button defaults in the Button.prototype! / Button.propagate(defaultConfig, Button.prototype); / Generic reinitialization knows nothing about buttons. / Button.prototype.reInit = function(config, noReInitialize) { for (var p in config) { if (config.hasOwnProperty(p)) { this[p] = config[p]; } } void ((! noReInitialize) && this._reInitialize && this._reInitialize()); var now = millis(); if (this.dependentsProto) { this.stamp = now; Button.propagate(this, this.dependentsProto); } Button.lastUpdate = this.lastStamp = now; }; / set guarantees dependency regeneration. / Button.prototype.set = function(prop, val, noReInitialize) { this[prop] = val; void ((! noReInitialize) && this.reInit()); }; / Re-derived dependent button properties. / Button.prototype._reInitialize = function() { var sides = this.shape; if (sides === "rect" \|\| sides === rect \|\| sides === "rectangle") { sides = 2; } else if (sides === "ellipse" \|\| sides === ellipse \|\| sides === "circle") { sides = 1; } else { sides = constrain(sides \| 0, 1, 128); } var width = this.width; var height = this.height; if (sides < 3) { if (! height) { height = round(width/3); this.set("height", height, true); } } else { height = width; } / * Implied constants: / this.radiusH = height / 2; var radius = this.radius = width / 2; if (this.label.length && (! this.labelSize)) { this.set("labelSize", round((sides < 3) ? (0.37 height) : (0.6 * radius)), true); } if (this.title.length && (! this.titleSize)) { this.set("titleSize", round((sides < 3) ? (0.37 * height) : (0.6 * radius)), true); } if (sides > 2) { /* Only use Math.* and positive radians henceforth / var toRadians = (tau === TWO_PI) ? function(r){return r;} : radians; var firstVertex = this.firstVertex; this.norm0 = toRadians(firstVertex % tau); this.theta = TWO_PI / sides; this.inrad = ceil(radius Math.cos(this.theta / 2)); /* * The first normalized segment runs from (radius, 0) * to radius(cosine(theta), sine(theta), so ey/ex is the slope of the segment's outer edge. / this.ey = radius Math.sin(this.theta) - 0; this.ex = radius * Math.cos(this.theta) - radius; /* Precomputed vertices, relative to an (x, y) origin. / var vx = this.vx = []; var vy = this.vy = []; for (var t = this.norm0, i = 0; i < sides; i++, t += this.theta) { vx[i] = radius Math.cos(t); vy[i] = radius * Math.sin(t); } this.isMouseInside = this.isInPolygon; this.drawShape = this.polygon; } else if (sides < 2) { this.isMouseInside = this.isInEllipse; this.drawShape = ellipse; } else { this.isMouseInside = this.isInRect; this.drawShape = rect; } }; /* Callback function for rendering a polygon. / function polygonVertex(val, i) { vertex(this.x + this.vx[i], this.y + this.vy[i]); } / Draw a polygon for this button. / function polygon() { beginShape(); this.vy.forEach(polygonVertex, this); endShape(CLOSE); } Button.prototype.polygon = polygon; / Draw this button's label. / function drawLabel() { var labelAlignX = this.labelAlignX; var ly = this.y + this.labelDy; var lx = this.x + this.labelDx; if (labelAlignX === LEFT) { lx -= (this.width - this.labelSize) / 2; } else if (labelAlignX === RIGHT) { lx += (this.width - this.labelSize) / 2; } fill(this.labelFill); textAlign(labelAlignX, CENTER); textSize(this.labelSize); text(this.label, lx, ly); } Button.prototype.drawLabel = drawLabel; / Draw this button's title. / function drawTitle() { var titleAlign = this.titleAlign; var tx = this.x + this.titleDx; var ty = this.y + this.titleDy; var width = this.width; var height = this.height \|\| width; if (titleAlign === RIGHT) { tx += width / 2; textAlign(LEFT, CENTER); } else if (titleAlign === BOTTOM) { ty += height / 2; textAlign(CENTER, TOP); } else if (titleAlign === LEFT) { tx -= this.width / 2; textAlign(RIGHT, CENTER); } else if (titleAlign === TOP) { ty -= height / 2; textAlign(CENTER, BOTTOM); } fill(this.titleFill); textSize(this.titleSize); text(this.title, tx, ty); } Button.prototype.drawTitle = drawTitle; / Draw ALL the fields of this button. / var zilch = 1/1024; / for zero stroke weights / function drawMethod() { fill((this === Button.selected) ? this.selected : (this === Button.hovered) ? this.hovered : this.fill); stroke(this.stroke); strokeWeight(this.strokeWeight + zilch); this.drawShape(this.x, this.y, this.width, this.height, this.rounded); void (this.label && this.drawLabel()); void (this.title && this.drawTitle()); void (Button.crosshairs && this.crosshairs()); / Generator support / } Button.prototype.draw = drawMethod; / Callback function for buttons in an array. / function eachButton(b) { if (Array.isArray(b)) { drawTheseButtons(b); / recur on the array. / } else { b.draw(); } } / * Draw the buttons in theseButtons array. * Draw forward, from front to back. / function drawTheseButtons(theseButtons) { theseButtons.forEach(eachButton); } / Draw all the buttons. / function drawStatic() { void ((Button.lastRefresh < Button.lastUpdate) && Button.propUpdate()); pushStyle(); rectMode(CENTER); ellipseMode(CENTER); drawTheseButtons(Button.buttons); popStyle(); } Button.draw = drawStatic; / Make this button not visible. / Button.prototype.invisible = function() { var i = Button.buttons.indexOf(this); void ((i >= 0) && Button.buttons.splice(i, 1)); }; / Make this button visible. / Button.prototype.visible = function() { void ((Button.buttons.indexOf(this) < 0) && Button.buttons.push(this)); }; / Remove this button from the tracking arrays. / Button.prototype.forget = function() { this.invisible(); var i = Button.allButtons.indexOf(this); void ((i >= 0) && Button.allButtons.splice(i, 1)); }; / * Return true iff the mouse is in the * ellipse centered at this coordinates. / Button.prototype.isInEllipse = function() { var termX = 2 (mouseX - this.x) / this.width; var termY = 2 * (mouseY - this.y) / this.height; return termX * termX + termY * termY <= 1; }; /* * Return true iff the mouse is in the * rectangle centered at this coordinates. / Button.prototype.isInRect = function() { var x = this.x, y = this.y, w2 = this.width/2, h2 = this.height/2; return mouseX > (x - w2) && mouseY > (y - h2) && mouseX <= (x + w2) && mouseY <= (y + h2); }; / * Return true iff the mouse is in the * polygon centered at this coordinates. / Button.prototype.isInPolygon = function() { var d = dist(this.x, this.y, mouseX, mouseY); if (d > this.radius) { / Not even close! / return false; } if (d <= this.inrad) { / Really close! / return true; } / Normalize (x, y) and get mouse polar coordinates. / var polar = Math.atan2(mouseY - this.y, mouseX - this.x); / Normalize polar angle to first polygon slice. / polar = (polar - this.norm0 + TWO_PI) % this.theta; / Convert back to Cartesian coordinates. / var x = d Math.cos(polar); var y = d * Math.sin(polar); /* Compute X intercept from (x, y), parallel to polygon's first edge. / var t = -y / this.ey; x += t this.ex; return (x <= this.radius); }; /* * Find which button is hovered over in theseButtons. * Search backwards, from back to front. Success is * promoted to the back. / var findHover = function(theseButtons) { var hovered = null; for (var last = theseButtons.length - 1, i = last; i >= 0; i--) { var b = theseButtons[i]; if (Array.isArray(b)) { hovered = findHover(b); / recur on the array / } else if (b.isMouseInside()) { hovered = b; } if (hovered) { void ((i !== last) && theseButtons.splice(i, 1)); / snip / theseButtons[last] = b; / b, not hovered! / break; } } return hovered; }; / * Something changed. That may affect Button.hovered. * This also invokes the onHover and offHover callbacks. / Button.update = function() { void ((Button.lastRefresh < Button.lastUpdate) && Button.propUpdate()); var newHovered = findHover(Button.buttons); if (newHovered !== Button.hovered) { void (Button.hovered && Button.hovered.offHover && Button.hovered.offHover()); Button.hovered = newHovered; void (newHovered && newHovered.onHover && newHovered.onHover()); } return Button.hovered; }; / * Find and return a (new?) hovered or selected button. * This MUST be invoked by Processing.js via mouseMoved. / Button.mouseMoved = function() { if (Button.selected) { return Button.selected; } else if (Button.hovered && Button.hovered.isMouseInside()) { return Button.hovered; } return Button.update(); }; / This MUST be invoked by Processing.js via mousePressed. / Button.mousePressed = function() { var s = Button.selected \|\| Button.hovered; if (s) { Button.selected = s; void (s.onPress && s.onPress()); } return s; }; / This MUST be invoked by Processing.js via mouseReleased. / Button.mouseReleased = function() { var bs = Button.selected; void (bs && bs.onClick && bs.isMouseInside() && bs.onClick()); Button.selected = null; void (bs && bs.onRelease && bs.onRelease()); Button.mouseMoved(); }; return Button; })(); / Constructor function / var ButtonGroup = (function() { var referTo = "https://www.khanacademy.org/cs/p/1847123742"; / Simply construct an invisible, cloneable button. / var ButtonGroup = function(config) { this.clones = []; Button.call(this, config, true); this.cloneable(); }; ButtonGroup.prototype = Object.create(Button.prototype); ButtonGroup.enclosure = (0 \|\| arguments).callee; / Make another clone. / ButtonGroup.prototype.newMember = function(config, invisible) { var clone = new this.clone(config, invisible); var clones = (this.clones) ? this.clones : this.parent().clones; clones.push(clone); return clone; }; / Forgets this cloned button. / ButtonGroup.prototype.forget = function() { Button.prototype.forget.call(this); var clones = this.parent && this.parent().clones; if (clones) { var i = clones.indexOf(this); if (i >= 0) { clones.splice(i, 1); / snip / } } }; / Destroy this group. / ButtonGroup.prototype.destroy = function() { while (this.clones.length > 0) { this.clones.pop().forget(); } this.forget(); Button.update(); }; / * Make a new method "clone" which is a constructor * function that shares most of this button's * properties. / Button.prototype.cloneable = function() { if (this.hasOwnProperty("clone")) { return; / been there, done that / } var parent = this; var constructor = parent.constructor; / A new CONSTRUCTOR function. / var Clone = this.clone = function(config, invisible) { constructor.call(this, config, invisible); / A new clone is automatically cloneable! / this.clone = Clone; }; this.dependentsProto = Clone.prototype = Object.create(Object.getPrototypeOf(parent)); Button.propagate(this, this.dependentsProto); Clone.prototype.parent = function() { return parent; }; }; / Find which button owns property "prop" and set it to the value "val". / Button.prototype.set = function(prop, val, noReInitialize) { for (var last, who = this; who; last = who, who = who.parent && who.parent()) { if (who.hasOwnProperty(prop)) { break; } } who = who \|\| last; who[prop] = val; who.reInit(null, noReInitialize); }; / Refresh propagated values? / Button.lastRefresh = -Infinity; Button.propUpdate = function() { for (var l = Button.allButtons.length, i = 0; i < l; i++) { var b = Button.allButtons[i]; void ((b.lastStamp < b.stamp) && b.reInit()); } Button.lastRefresh = millis(); }; return ButtonGroup; })(); / Constructor function / var Menu = (function() { var referTo = "https://www.khanacademy.org/cs/p/1847123742"; / * Default configuration parameters for each item of * a menu. These override the default Button configuration. * The critical property for configuring a menu is "item". * Its value should an array of strings that make the menu * items or entries. / var defaultConfig = { shape: "rect", / rectangle, always! / width: 16, height: 16, labelSize: 11, fill: color(255), hovered: color(200), selected: color(150), }; / THE Menu Constrcutor. / var Menu = function(config) { this.reInit(config); }; Menu.enclosure = (0 \|\| arguments).callee; / This exists to splice in new default options for menus. / var MenuGroup = function(config) { ButtonGroup.call(this, config, true); }; MenuGroup.prototype = Object.create(ButtonGroup.prototype); Object.assign(MenuGroup.prototype, defaultConfig); / * When a menu's item has an event, the returned closure * converts the button event into a menu event and invokes * the user's function, passing the buttom as an argument. * If the result is false then the menu is dismissed. / var buttonEvents = { onClick: 0, onPress: 0, onRelease: 0, onHover: 0, offHover: 0 }; var onEvent = function(event) { var menu = this; var group = menu.group; return function() { if (group[event]) { if (! group[event].call(menu, this)) { menu.invisible(); } } }; }; / Rebuild the menu items. / Menu.prototype.reInit = function(config) { var group = this.group; if (group) { var clones = group.clones; for (var l = clones.length; --l >= 0; ) { clones[l].forget(); } clones.length = 0; } else { var item = config.item; delete config.item; this.item = (item) ? item.slice(0) : []; / dup / group = this.group = new MenuGroup(config); group.menu = this; config.item = item; } var item = this.item; var clones = group.clones; var l = clones.length; / Set up the event functions. / var itemConfig = {}; for (var e in buttonEvents) { if (group[e]) { itemConfig[e] = onEvent.call(this, e); } } / Rebuild each menu item's button and computed max width. / var width = defaultConfig.width; textSize(group.labelSize); for (var l = item.length, i = 0; i < l; i++) { itemConfig.label = item[i]; var b = group.newMember(itemConfig, true); width = max(width, textWidth(item[i] + "W")); } group.set("width", 2 ceil(width / 2), true); this.orderedClones = clones.slice(0); /* dup / }; / Return the menu associated with the item button b. / Menu.itemsMenu = function(b) { var parent = b && b.parent && b.parent(); if (parent) { return parent.menu; } }; / "Activate" or make this menu visible. / Menu.prototype.visible = function(x, y, noAdjust) { var group = this.group; var clones = group.clones; x = (typeof x === "number") ? x : group.x; y = (typeof y === "number") ? y : group.y; for (var l = clones.length, i = 0; i < l; i++) { var b = clones[i] = this.orderedClones[i]; if ((! noAdjust) && (i === 0)) { if (x - b.width/2 < 0) { x -= (x - b.width/2); } else if (x + b.width/2 > width) { x += (width - 1 - x - b.width/2); } } b.x = x; b.y = y; y += b.height; } / Avoid going below the canvas/ var diff = height - y; for (i = 0; (! noAdjust) && (diff < 0) && (i < l); i++) { clones[i].y += diff; } void ((Button.buttons.indexOf(clones) < 0) && Button.buttons.push(clones)); Button.update(); }; / "Dismiss", or make this menu invisible. / Menu.prototype.invisible = function() { var clones = this.group.clones; var i = Button.buttons.indexOf(clones); void ((i >= 0) && Button.buttons.splice(i, 1)); / snip / Button.update(); }; / Destroy this menu. / Menu.prototype.destroy = function() { var group = this.group; var clones = group.clones; var i = Button.buttons.indexOf(clones); void ((i >= 0) && Button.buttons.splice(i, 1)); / snip / group.destroy(); }; return Menu; })(); / Constructor function / var Scrollbar = (function() { var referTo = "https://www.khanacademy.org/cs/p/1847123742"; var clear = color(1, 2, 3, 0); / transparent color / / * This library constructs and operates GENERIC scrollbars. * A scrollbar's slider's size and position are determined by * the four properties found in a STATS object (like the one * shown below) that is owned & operated by the scrollbar's * creator. Note that the library has no notion what (if * anything) is being scrolled. That is up to the creator. / var defaultStats = { start: 0, / readonly by this library / stop: 100, / readonly by this library / cursor: 66, / rw - position of the silder / partialSize: 15 / readonly by this library / }; / * When a user action occurs, the creator-supplied "onChange" * function is called with a changeCode and the stats object. * If the code is UP, then the user is pushing the "start" * (the top-most or left-most) button. If it's DOWN, then s/he * is pushing the "stop" (the bottom-most or right-most) button. * Otherwise, the user is moving the slider - in this case the * stats.cursor value is updated to reflect the slider's new * position where stats.start ≤ stats.cursor ≤ stats.stop * * In all cases, it is up to the creator to set new & appropriate * values of the stats' properties and/or react to those values. / var defaultOnChange = function(changeCode, stats) { if (changeCode === UP) { stats.cursor -= 0.5; } else if (changeCode === DOWN) { stats.cursor += 0.5; } stats.cursor = constrain(stats.cursor, stats.start, stats.stop); if (stats.cursor === stats.start) { stats.partialSize = 2; } else if (stats.cursor === stats.stop) { stats.partialSize = 30; } }; / * The size, location, and color of the scrollbar is defined by a * "rail" button that is supplied by the creator. As with the stats * object, the creator can modify the rail button's properties while * the program is executing. The relative dimensions of the rail * determine if the scrollbar is vertical (like below) or horizontal. * The colors of the rail will also detemine the colors of other * buttons created by this library. / var defaultRailConfig = { width: 14, height: height - 1, x: width - 1 - 7, y: (height - 1)/2, fill: color(245), hovered: color(175), selected: color(120) }; / * The creator also supplies the scrollbar's slider button, * IN ITS SMALLEST SIZE. The library will resize the slider * according to the stats.partialSize property, but it will * never be smaller than its original specification. / var defaultSliderConfig = { width: defaultRailConfig.width - 4, height: 2 (defaultRailConfig.width - 4), /* smallest height! / fill: color(145) }; / * Scrollbar CONSTRUCTOR function. onChange is a * function that is called due to user actions. * ailbutton is a button that encompasses the entire * scrollbar mechanism. sliderButton is a button at its * MINIMUM size that is used to slide along a portion * of the rail. All arguments can be defaulted. / var Scrollbar = function(stats, onChange, railButton, sliderButton) { this.stats = stats \|\| Object.assign({}, defaultStats); this.onChange = onChange \|\| defaultOnChange; this.rail = railButton \|\| new Button(defaultRailConfig); this.slider = sliderButton \|\| new Button(defaultSliderConfig); if (this.slider.shape !== "rect" \|\| this.rail.shape !== "rect") { throw({message: "new Scrollbar rail and slider must be rectangles!"}); } this.start = new Button({ fill: this.rail.fill, hovered: this.rail.hovered, selected: this.rail.selected }); this.stop = new Button({ fill: this.rail.fill, hovered: this.rail.hovered, selected: this.rail.selected }); this.slide = new Button({ fill: clear, hovered: clear, selected: clear }); Button.buttons.push(this.buttons = [ this.rail, this.start, this.stop, this.slider, this.slide]); if (this.rail.width > this.rail.height) { / horizontal scrollbar / this.arrows = [ "◀", "▶" ]; this.minSliderLen = this.slider.width; this.X = "y"; this.Y = "x"; this.H = "width"; this.W = "height"; } else { / vertical scrollbar / this.arrows = [ "▲", "▼" ]; this.minSliderLen = this.slider.height; this.X = "x"; this.Y = "y"; this.H = "height"; this.W = "width"; } this.update(); this.onArrow(UP); this.onArrow(DOWN); this.onSlide(MOVE); }; Scrollbar.enclosure = (0 \|\| arguments).callee; / * If c is between a and b, then return c. Otherwise * return the one that c is nearest to. / var mostViable = function(c, a, b) { var dac = a - c; var dbc = b - c; if (dac dbc <= 0) { return c; } return (abs(dac) < abs(dbc)) ? a : b; }; /* * Update all aspects of the scrollbar. The scrollbar's creator will * invoke this when s/he changes the values of the stats properties. / Scrollbar.prototype.update = function() { var x = this.X, y = this.Y, w = this.W, h = this.H, stats = this.stats, buttons = this.buttons, rail = this.rail, slide = this.slide, slider = this.slider, start = this.start, stop = this.stop; / Everything is dependent on rail's location and dimensions. / var width = start[w] = stop[w] = slide[w] = rail[w]; start[x] = stop[x] = slide[x] = slider[x] = rail[x]; slide[y] = rail[y]; start[y] = rail[y] - (rail[h] - width)/2; stop[y] = rail[y] + (rail[h] - width)/2; start[h] = stop[h] = width; slide[h] = rail[h] - 2start[h]; start.label = this.arrows[0]; stop.label = this.arrows[1]; start.labelSize = stop.labelSize = ceil(0.8 * width); /* slider's position: / var sstart = stats.start; var sstop = (stats.stop === sstart) ? sstart + 1 : stats.stop; var cursor = stats.cursor; var cursor = mostViable(stats.cursor, sstart, sstop); var totalSize = abs(sstop - sstart); var partial = constrain(abs(stats.partialSize), 0, totalSize); slider[h] = constrain(map(partial, 0, totalSize, 0, slide[h]), this.minSliderLen, slide[h]); var minY = ceil(rail[y] - rail[h]/2 + start[h] + slider[h]/2); var maxY = floor(rail[y] + rail[h]/2 - stop[h] - slider[h]/2); slider[y] = map(cursor, sstart, sstop, minY, maxY); / Order is very important in Button's functionality. / var slideIdx = buttons.indexOf(slide); if (slideIdx !== buttons.length - 1) { buttons.splice(slideIdx, 1); / snip / buttons.push(slide); } }; / * Sets up appropriate scrolling when an arrow button is pressed. * Not intended for user comsumption! / Scrollbar.prototype.onArrow = function(changeCode) { var scrollbar = this; var sProp = (changeCode === UP) ? "start" : "stop"; var button = this[sProp]; var hisDraw; var nextTime, interval; / * A draw function invoked numerous times per second by * Processing.js. Each time, the scroll bar is advanced, * iff the user's onChange allows it. / var myDraw = function() { var now = millis(); if (now < nextTime \|\| ! button.isMouseInside()) { return; } scrollbar.onChange(changeCode, scrollbar.stats); / Reflect stats reality in the slider's position. / scrollbar.update(); void (hisDraw && hisDraw()); / re-render everything! / loop(); interval -= 20; nextTime = now + interval; }; / A pressed mouse on an arrow begins the process... / var press = function() { button.labelFill = scrollbar.rail.fill; if (! hisDraw) { hisDraw = draw; } draw = myDraw; nextTime = millis(); interval = 250; loop(); }; / When the mouse is released, we are done. / var release = function() { if (hisDraw) { draw = hisDraw; } hisDraw = 0; delete button.labelFill; redraw(); }; button.onPress = press; / plumb the arrow button / button.onRelease = release; / ditto / }; / * Sets up appropriate scrolling when the slide is pressed. * Not intended for user consumption. / Scrollbar.prototype.onSlide = function(changeCode) { var scrollbar = this; var hisDragged; / * Invoked by Processing.js as the mouse is dragged. Computes * a new stats cursor value based on the mouse's position and * lets the user know. / var myDragged = function() { var y = scrollbar.Y, h = scrollbar.H, stats = scrollbar.stats, rail = scrollbar.rail, start = scrollbar.start, stop = scrollbar.stop, slider = scrollbar.slider; var minY = ceil(rail[y] - rail[h]/2 + start[h] + slider[h]/2); var maxY = floor(rail[y] + rail[h]/2 - stop[h] - slider[h]/2); var mouse = (y === "y") ? mouseY : mouseX; var cursor = map(mouse, minY, maxY, stats.start, stats.stop); stats.cursor = mostViable(cursor, stats.start, stats.stop); scrollbar.onChange(changeCode, scrollbar.stats); scrollbar.update(); redraw(); }; / Initiate dragging when the slide is pressed. / var press = function() { if (mouseDragged !== myDragged) { hisDragged = mouseDragged; mouseDragged = myDragged; } mouseDragged(); }; / We are done when the mouse is released. / var release = function() { if (mouseDragged === myDragged) { mouseDragged = hisDragged; } hisDragged = 0; }; this.slide.onPress = press; / plumb the slide button / this.slide.onRelease = release; / ditto / }; / Destroy this scrollbar. / Scrollbar.prototype.destroy = function() { var buttons = this.buttons; while (buttons.length > 0) { buttons.pop().forget(); } var i = Button.buttons.indexOf(buttons); void ((i >= 0) && Button.buttons.splice(i, 1)); / snip / Button.update(); }; return Scrollbar; })(); / Constructor function / var RadioButtons = (function() { var referTo = "https://www.khanacademy.org/cs/p/1847123742"; / * Constructor function takes an array of buttons or * a single ButtonGroup and applies "radio button" * policy to them. / var RadioButtons = function(buttons) { this.arg = buttons; var ba = this.buttons = (Array.isArray(buttons)) ? buttons : buttons.clones; for (var l = ba.length, i = 0; i < l; i++) { this.radioClick(ba[i]); } }; RadioButtons.encosure = (0 \|\| arguments).callee; / * Sets button b's onClick function to the one * that implements the radio button mechanism. / RadioButtons.prototype.radioClick = function(b) { var radioButton = this; var hisOnClick = b.onClick; var hisFill = b.fill; var hisHovered = b.hovered; var hisSelected = b.selected; b.onClick = function() { var doit = false; for (var l = radioButton.buttons.length, i = 0; i < l; i++) { var b = radioButton.buttons[i]; if (this !== b) { b.fill = hisFill; b.hovered = hisHovered; b.radioButtonOn = false; } else if (! b.radioButtonOn) { b.radioButtonOn = doit = true; b.fill = b.hovered = hisSelected; } } / Now invoke the user's original onClick function. / void (doit && hisOnClick && hisOnClick.call(this, radioButton)); }; }; return RadioButtons; })(); / Constructor function / var ColorPicker = (function() { var ColorPicker = function(height, granularity) { var side = round(min(256, height \|\| 128)); var stripe = round(side / 8); this.grain = round(granularity \|\| 1); var gb = this.stripe = createGraphics(stripe, side, JAVA2D); gb.colorMode(HSB); for (var y = 0; y < side; y++) { gb.stroke(map(y, 0, side, 256, 0), 255, 255); gb.line(0, y, stripe, y); } this.rect = createGraphics(side + stripe, side, JAVA2D); this.rect.colorMode(HSB); this.reSquare(128); this.width = this.rect.width; this.height = this.rect.height; }; ColorPicker.prototype.draw = function(x, y) { x = x \|\| 0; y = y \|\| 0; var side = this.rect.height; pushStyle(); imageMode(CORNER); image(this.stripe, x + side, y); if ((mouseX !== pmouseX \|\| mouseY !== pmouseY) && mouseY > y && mouseY < y + side && mouseX > x + side && mouseX < x + this.width) { this.reSquare(hue(get(mouseX, mouseY))); } image(this.rect, x, y); popStyle(); }; ColorPicker.prototype.reSquare = function(hue) { var gb = this.rect; var side = gb.height; var grain = this.grain; gb.strokeWeight(grain); for (var y = 0; y < side; y += grain) { var brite = map(y, 0, side, 256, 0); for (var x = 0; x < side; x += grain) { var sat = map(x, 0, side, 0, 256); gb.stroke(hue, sat, brite); gb.point(x, y); } } gb.image(this.stripe, side, 0); }; return ColorPicker; })(); / Constructor function / / Example of a button onClick handler. / var genericClick = function() { var secs = floor(millis() / 1000); var txt = this.label \|\| this.title \|\| ""; println(secs + ' Button "' + txt + '" at (' + this.x + ', ' + this.y + ') clicked!'); }; / Example of a menu onClick handler. / var genericMenuClick = function(item) { var secs = floor(millis() / 1000); println(secs + ' Menu item "' + item.label + '" at (' + item.x + ', ' + item.y + ') clicked!'); return true; / keep it up! / }; var menuDemo = function(x, y, diam) { if (menuDemo.menu) { menuDemo.menu.destroy(); menuDemo.button.forget(); menuDemo.menu = menuDemo.button = null; return; } x = x \|\| 40; y = y \|\| 40; diam = diam \|\| 8; / * This demo code creates a small persistent button * and ties a menu to it. Clicking the button * activates and dismisses the menu. * First, make a four item menu: / var menu = menuDemo.menu = new Menu({ item: [ "One", "Two", "Thirty Three", "Four" ], onClick: genericMenuClick }); / Button's onClick handler. / var isUp = false; var buttonOnOff = function() { isUp = ! isUp; if (isUp) { / Note that all buttons use rectMode(CENTER) ! / menu.visible(this.x + this.width + menu.group.width/2, this.y); } else { menu.invisible(); } var tmp = this.fill; this.hovered = this.fill = this.selected; this.selected = tmp; }; / Make the button! / var button = menuDemo.button = new Button({ shape: "ellipse", x: x, y: y, width: diam, height: diam, fill: color(8, 203, 37), hovered: color(8, 203, 37), selected: color(255, 0, 54), onClick: buttonOnOff }); }; var scrollbarDemo = function(horizontal) { if (scrollbarDemo.slider) { scrollbarDemo.slider.destroy(); scrollbarDemo.slider = null; return; } / * This library constructs and operates GENERIC scrollbars. * A scrollbar's slider's size and position are determined by * the four properties found in a STATS object (like the one * shown below) that is owned & operated by the scrollbar's * creator. Note that the library has no notion what (if * anything) is being scrolled. That is up to the creator. / var demoStats = { start: 21, / readonly by the library / stop: 157, / readonly by the library / cursor: 103, / rw - position of the silder / partialSize: 20 / readonly by the library / }; / * When a user action occurs, the creator-supplied "onChange" * function is called with a changeCode and the stats object. * If the code is UP, then the user is pushing the "start" * (the top-most or left-most) button. If it's DOWN, then s/he * is pushing the "stop" (the bottom-most or right-most) button. * Otherwise, the user is moving the slider - in this case the * stats.cursor value is updated to reflect the slider's new * position where stats.start ≤ stats.cursor ≤ stats.stop * * In all cases, it is up to the creator to set new & appropriate * values of the stats' properties and/or react to those values. / var demoOnChange = function(changeCode, stats) { if (changeCode === UP) { stats.cursor -= 0.5; } else if (changeCode === DOWN) { stats.cursor += 0.5; } stats.cursor = constrain(stats.cursor, stats.start, stats.stop); if (stats.cursor === stats.start) { stats.partialSize = 2; } else if (stats.cursor === stats.stop) { stats.partialSize = 39; } }; / * The size, location, and color of the scrollbar is defined by a * "rail" button that is supplied by the creator. As with the stats * object, the creator can modify the rail button's properties while * the program is executing. The relative dimensions of the rail * determine if the scrollbar is vertical (like below) or horizontal. * The colors of the rail will also detemine the colors of other * buttons created by this library. / var demoRailConfig = { width: 14, height: height - 1, x: width - 1 - 7, y: (height - 1)/2, fill: color(245), hovered: color(175), selected: color(120) }; if (horizontal) { demoRailConfig.height = demoRailConfig.width; demoRailConfig.width = width - 1; demoRailConfig.x = (width - 1)/2; demoRailConfig.y = height - 1 - demoRailConfig.height/2; } var demoRail = new Button(demoRailConfig); / * The creator also supplies the scrollbar's slider button, * IN ITS SMALLEST SIZE. The library will resize the slider * according to the stats.partialSize property, but it will * never be smaller than its original specification. / var demoSliderConfig = (horizontal) ? { width: 1.7 (demoRailConfig.height - 4), /* smallest width! / height: demoRailConfig.height - 4, fill: color(145) } : { width: demoRailConfig.width - 4, height: 1.7 (demoRailConfig.width - 4), /* smallest height! / fill: color(145) }; var demoSlider = new Button(demoSliderConfig); var sb = scrollbarDemo.slider = new Scrollbar(demoStats, demoOnChange, demoRail, demoSlider); / * Whenever the creator updates any property of the STATS * object s/he should notify the scrollbar library of the * the change by invoking sb.update(); / return sb; }; /* * DeKhan is a library with five static functions: * loopDetect(f) returns a function like f with no loop detection code. * * renew(f) returns a function like f with the "new" keyword reinserted. * * applyRegExp(f, rExp, replacement) returns a function like f where the * caller specifies replacmenet arguments, rExp and replacement. * * printText(source) prints source via println in a broswer sensitive fashion. * * print(f, prefix, suffix) prints the (nearly) original source * of function f along with optional prefix and suffix strings. / var DeKhan = (function() { / Regular expressions derived from Element118 delag() function. / var plusPlusExp = new RegExp("__env__\\.KAInfiniteLoopCount\\+\\+;\\n", "g"); var ifClauseExp = new RegExp("\\n\\sif \$__env__\\.KAInfiniteLoopCount > 1000\$ {[\\s]+__env__\\.KAInfiniteLoopProtect\$'[^']'\$;[^}]+}", "g"); var newExp = new RegExp("__env__\\.PJSCodeInjector\\.applyInstance\$(\\S+), '\\S+'\$", "g"); var envExp = new RegExp("__env__\\.", "g"); var noBreakSpace = "\u00a0"; / primenumbers7532@gmail.com / var lineBreak = String.fromCharCode(10); / Larry Serflaten for IE Windows / var spaceExp = new RegExp(" ", "g"); var newlineExp = new RegExp("\\n", "g"); var wasFrameCount = frameCount; frameCount = function() { frameCount = wasFrameCount; return this; }; var globals = frameCount(); var metIpseMecum = (0 \|\| arguments).callee; / Given source code, return a function in the global scope. / var conjureFunctionFrom = function (source) { / Copied from Element118 delag() function. / return Object.constructor('return (function(__env__) {return ' + source + ';});')()(globals); }; return { / Return a function like f without any loop detection. / loopDetect: function(f) { var source = f.toString(); source = source.replace(plusPlusExp, ""); source = source.replace(ifClauseExp, ""); return conjureFunctionFrom(source); }, / Return a function like f where the caller supplies the filter. / applyRegExp: function(f, rExp, replacement) { var source = f.toString(); source = source.replace(rExp, replacement); return conjureFunctionFrom(source); }, / Return a function like f that uses the keyword "new" again. / renew: function(f) { return this.applyRegExp(f, newExp, "new $1"); }, / * Print completely deKhanified function f source out via println. * All arguments are optional. / print: function(f, prefix, suffix) { f = f \|\| metIpseMecum; prefix = prefix \|\| ""; suffix = suffix \|\| ""; f = this.loopDetect(f); f = this.renew(f); var source = f.toString(); source = source.replace(envExp, ""); source = prefix + source + suffix; this.printText(source); }, / Print source line(s) out via println. / printText: function(source) { source = source \|\| " "; / blank line if nothing else... / source = source.replace(spaceExp, noBreakSpace); source = source.replace(newlineExp, lineBreak); println(source); }, }; })(); / Library / var thumb; / Why we are here. Generates buttons, etc. / var Generator = (function(thumb) { var Generator = {}; var defaultButton = new Button({ shape: 4, / diamond / width: 24 / or a radius of 12 / }, true); var focus; var moving; var grid; var mainMenu, buttonMenu; var tau = (cos(PI) < 0) ? TWO_PI : 360; var rotation = [ [0], [0], [0], [-tau/4, tau/2, tau/4, 0], / triangle / [-tau/4, -tau/8], / diamond / square / [-tau/4, 0, tau/4, tau/2], / pentagon / [-tau/4, -tau/6], / hexagon / [-tau/4, tau/2, tau/4, 0], / heptagon / [-tau/4, -tau/16] / octagon / ]; rotation.ellipse = rotation[1]; rotation.rect = rotation[2]; var labelJustify = { LEFT: LEFT, CENTER: CENTER, RIGHT: RIGHT }; var titleJustify = { BOTTOM: BOTTOM, RIGHT: RIGHT, TOP: TOP, LEFT: LEFT }; var colorProps = [ "stroke", "fill", "hovered", "selected", "labelFill", "titleFill" ]; var alignProps = [ "labelAlignX", "titleAlign" ]; var picker = null; var bgImage = null; var json = (function(w) { return this[w]; })("JSON"); var ls = (function(w) { return this[w]; })("localStorage"); var lsKey = "ButtonGenerator.2"; var sbdCnt = 0; var undo = [], currentPoint = null; var selectedCnt = {}; var drawGrid; var dependencies = []; var keyed = {}; / for the key stroke handler / var mm = {}, bm = {}; / main and button menus handlers. / var calleeExp = new RegExp("\\n.\\.enclosure.arguments.\\.callee;", "g"); / Click handler for every button created by this Generator. / var onClick = function() { focus = this; }; / Determines the first item of the main menu. / var mainMenuMod = function(cnt) { var item = mainMenu.item; if ((cnt > 0) && (item[0] !== "Buttons . . .")) { item[0] = "Buttons . . ."; mainMenu.reInit(); } else if ((cnt === 0) && (item[0] !== "New Button")) { mainMenu.invisible(); item[0] = "New Button"; mainMenu.reInit(); } }; / * Remember our current mode and return a * function that restores it. / var enterMode = function(curse) { var was = { keyPressed: keyPressed, keyReleased: keyReleased, mouseMoved: mouseMoved, mousePressed: mousePressed, mouseClicked: mouseClicked, mouseReleased: mouseReleased, draw: draw }; cursor(curse); return function() { cursor(ARROW); keyPressed = was.keyPressed; keyReleased = was.keyReleased; mouseMoved = was.mouseMoved; mousePressed = was.mousePressed; mouseClicked = was.mouseClicked; mouseReleased = was.mouseReleased; draw = was.draw; }; }; / Help serialize objects into a JSON string. / var jsonFilter = function(prop, val) { if (val instanceof Button) { var config = val.getConfig("clones"); delete config.stamp; return config; } return val; }; / * Gathers up all configuration information of the current buttons * and saves it as a JSON string to stable storage. Also pushes * the same kind of string onto the undo array. / var checkpoint = function() { Button.update(); var buttonCnt = 0; var buttons = []; var parents = []; var state = { buttons: buttons, groups: parents, scrollbarDemo: (sbdCnt % 4), menuDemo: false }; var candidates = Button.buttons; / Destroy the scrollbar before gathering our state. / if (sbdCnt % 2) { scrollbarDemo(); / destroy / } for (var i = candidates.length; --i >= 0; ) { var b = candidates[i]; if (Array.isArray(b)) { / nothing / } else if (b.clone && b.parent) { var parent = b.parent(); var j = parents.indexOf(parent); if (j < 0) { parents.push(parent); buttonCnt += parent.clones.length; } } else if (b === menuDemo.button) { state.menuDemo = true; } else { buttons.push(b); buttonCnt++; } } mainMenuMod(buttonCnt); var s = json.stringify(state, jsonFilter); ls.setItem(lsKey, s); var undoLen = undo.length; if ((typeof currentPoint === "string") && (undoLen < 1 \|\| undo[undoLen - 1] !== currentPoint)) { undo.push(currentPoint); if (undoLen > 100) { undo.shift(); } } currentPoint = s; / Undestroy the scrollbar? / if (sbdCnt % 2) { scrollbarDemo(sbdCnt % 4 === 3); } return s; }; / Return configuration info of the current state. / var gatherButtons = function() { return json.parse(checkpoint()); }; / Rebuild buttons based upon state configuration. / var rebuildButtons = function(state) { / First reset everything. / if (sbdCnt % 2) { scrollbarDemo(); / destroy / } sbdCnt = state.scrollbarDemo; if (menuDemo.button) { menuDemo(); / destroy / } Button.allButtons.length = Button.buttons.length = 0; var buttonCnt = 0; var buttons = state.buttons; var groups = state.groups; for (var l = buttons.length, i = 0; i < l; i++) { buttons[i].onClick = onClick; new Button(buttons[i]); buttonCnt++; } for (var l = groups.length, i = 0; i < l; i++) { var g = groups[i]; var clones = g.clones; delete g.clones; g.onClick = onClick; var bg = new ButtonGroup(g); for (var m = clones.length, j = 0; j < m; j++) { bg.newMember(clones[j]); buttonCnt++; } } mainMenuMod(buttonCnt); if (state.menuDemo) { menuDemo(); } sbdCnt = state.scrollbarDemo; if (sbdCnt % 2) { scrollbarDemo(sbdCnt % 4 === 3); } }; / * Restore our state based on jsonString. If it is * empty, try to get a string from stable storage. / var restoreState = function(jsonString) { try { jsonString = jsonString \|\| ls.getItem(lsKey); if (jsonString) { var state = json.parse(jsonString); rebuildButtons(state); } } catch (err) { println("restoreState fails\n" + err.message + "\n" + jsonString); } }; / Stringify a property's value for eventual printing. / var valToString = function(prop, val) { if (typeof val === "string") { return '"' + val + '"'; } if (colorProps.indexOf(prop) >= 0) { var r = red(val); var g = green(val); var b = blue(val); return "color(" + r + ", " + g + ", " + b + ")"; } if (alignProps.indexOf(prop) >= 0) { for (var p in titleJustify) { if (val === titleJustify[p]) { return p; } } for (var p in labelJustify) { if (val === labelJustify[p]) { return p; } } } if (prop === "firstVertex" && val !== 0) { return val + ((tau === 360) ? " / degrees! /" : " / radians /"); } return "" + val; }; / Stringify all the properties of config. / var propsToString = function(config) { var reordered = {}; var s = ""; for (var p in Button.defaultConfig) { if (config.hasOwnProperty(p)) { reordered[p] = config[p]; delete config[p]; } } for (p in config) { reordered[p] = config[p]; delete config[p]; } for (p in reordered) { config[p] = reordered[p]; s += "\n " + p + ": " + valToString(p, config[p]) + ","; } return s; }; / Append another function to the dependencies array. / var anotherDependent = function(func) { var i = dependencies.indexOf(func); if (i < 0) { var l = func.dependsOn ? func.dependsOn.length : 0; for (var j = 0; j < l; j++) { anotherDependent(func.dependsOn[j]); } dependencies.push(func); } }; / Spew out the source code for function func. / var functionPrinter = function(func) { var fname = func.fname \|\| "f"; var prefix = "var " + fname + " = "; var suffix = ";"; var postLine = (func.postLine) ? (func.postLine + "\n\n") : "\n"; if (func.enclosure) { func = DeKhan.applyRegExp(func.enclosure, calleeExp, ""); prefix += "("; suffix = ")();"; } DeKhan.print(func, prefix, suffix); DeKhan.printText(postLine); }; / Print what the users copy & paste to new programs. / var printButtons = function(state, excludeLibraries) { var buttons = state.buttons; var groups = state.groups; var s = ""; var onClickCnt = 0; dependencies.length = 0; for (var l = buttons.length, i = 0; i < l; i++) { anotherDependent(Button); var b = buttons[i]; s += "new Button({"; s += propsToString(b); s += "\n onClick: genericClick\n});\n"; onClickCnt++; } for (var l = groups.length, i = 0; i < l; i++) { anotherDependent(ButtonGroup); var g = groups[i]; var clones = g.clones; delete g.clones; s += "var bg = new ButtonGroup({"; s += propsToString(g); s += "\n onClick: genericClick\n});\n"; onClickCnt++; for (var m = clones.length, j = 0; j < m; j++) { anotherDependent(Button); var b = clones[j]; s += "bg.newMember({"; s += propsToString(b); s += "\n}); \n"; } } / Default plumbing to Processing.js / s += " \nmouseMoved = Button.mouseMoved;\n"; s += "mousePressed = Button.mousePressed;\n"; s += "mouseReleased = Button.mouseReleased;\n \n"; s += "draw = function() {\n"; s += " background(255);\n"; s += " Button.draw();\n"; s += "};"; if (state.menuDemo) { anotherDependent(menuDemo); anotherDependent(genericMenuClick); } if (state.scrollbarDemo % 2) { anotherDependent(scrollbarDemo); scrollbarDemo.postLine = "var sb = scrollbarDemo(" + (state.scrollbarDemo % 4 === 3) + ");"; } if (onClickCnt) { anotherDependent(genericClick); } while(dependencies.length > 0) { var lib = dependencies.shift(); void ((! excludeLibraries) && functionPrinter(lib)); } DeKhan.printText(s + "\n"); }; / * Edit the string property pStr of the focus button, fb. * That may involve also editing/consulting related fields * like its textSize and positioning information. * * The string field is always associated with the focus button, * but the related values may be associated with its ButtonGroup! / var stringEditor = function(fb, pStr, pStrSz, pDx, pDy, pAlign, jChoices, pDraw) { var exitEditMode = enterMode(WAIT); var lastTime = 0; var doBar = false; / Convert from object to array: / var justifyChoices = []; for (var p in jChoices) { justifyChoices.push(jChoices[p]); } var jcLen = justifyChoices.length; var pressed = []; keyPressed = function() { pressed[keyCode] = true; }; mouseMoved = mousePressed = function() {}; mouseReleased = function() { checkpoint(); exitEditMode(); }; if (typeof fb[pStr] !== "string") { fb[pStr] = ""; / We edit strings. / fb.reInit(); } / The actual editor. / keyReleased = function() { if (keyCode === ENTER \|\| keyCode === RETURN \|\| keyCode === ESC) { mouseReleased(); } else if (keyCode === UP) { if (pressed[CONTROL]) { fb.set(pDy, fb[pDy] - 1); } else { fb.set(pStrSz, fb[pStrSz] + 1); } } else if (keyCode === DOWN) { if (pressed[CONTROL]) { fb.set(pDy, fb[pDy] + 1); } else { fb.set(pStrSz, fb[pStrSz] - 1); } } else if (keyCode === LEFT) { if (pressed[CONTROL]) { fb.set(pDx, fb[pDx] - 1); } else { var j = justifyChoices.indexOf(fb[pAlign]); fb.set(pAlign, justifyChoices[(jcLen - 1 + justifyChoices.indexOf(fb[pAlign])) % jcLen]); } } else if (keyCode === RIGHT) { if (pressed[CONTROL]) { fb.set(pDx, fb[pDx] + 1); } else { fb.set(pAlign, justifyChoices[(jcLen + 1 + justifyChoices.indexOf(fb[pAlign])) % jcLen]); } } else if (keyCode === BACKSPACE \|\| keyCode === DELETE) { fb[pStr] = fb[pStr].substring(0, fb[pStr].length - 1); } else if ((keyCode !== CONTROL) && (key.toString().toLowerCase() !== key.toString().toUpperCase())) { fb[pStr] += key.toString(); } fb.reInit(); pressed[keyCode] = doBar = false; lastTime = millis(); }; / draw flashes the string input cursor. / draw = function() { Generator.draw(); if (doBar) { pDraw.call(fb, "\|"); } var now = millis(); if (now - lastTime > 500) { doBar = ! doBar; lastTime = now; } loop(); }; loop(); / Let's light this candle! / }; / * Simple color selector for the pColor property of focus * button, fb. The editor sets that property's value to * color value of the pixel beneath mouse cursor when the * mouse is clicked. / var colorEditor = function(fb, pColor) { var exitEditMode = enterMode(CROSS); var fbFill = fb.fill; / save / / Update the buttons' fill color in real time. / mouseMoved = function() { fb.set("fill", get(mouseX, mouseY)); Button.hovered = null; redraw(); }; / Commit (or abort) the change. / mouseClicked = function(abort) { picker = null; fb.set("fill", fbFill); / restore / if (! abort) { fb.set(pColor, get(mouseX, mouseY)); } fb.reInit(); checkpoint(); exitEditMode(); }; / Any key stroke aborts the editor. / keyReleased = function() { mouseClicked(true); }; picker = new ColorPicker(128, 2); mouseMoved(); / Let's light this candle! / }; / Determine the next value for a button's "shape" property. / var shapePlusPlus = function(shape) { if (shape === "ellipse") { return "rect"; } else if (shape === "rect") { return 3; / triangle / } return min(shape + 1, 8); }; / Determine the previous value for a button's "shape" property. / var shapeMinusMinus = function(shape) { if (shape === "ellipse") { return shape; } else if (shape === "rect") { return "ellipse"; } else if (shape === 3) { return "rect"; } return max(3, shape - 1); }; / Keystroke handling functions: / keyed.g = function() { printButtons(gatherButtons(), true); / skips the libraries / }; keyed.j = function() { println(checkpoint()); / show the JSON checkpoint string / }; keyed[ENTER] = keyed[RETURN] = keyed[ESC] = function() { if (moving) { moving = null; checkpoint(); } }; keyed[UP] = function() { if (moving) { moving.y = moving.y - 1; } else if (typeof focus.shape === "string" \|\| focus.shape < 3) { focus.set("height", focus.height + 2); Button.update(); } else { keyed[RIGHT](); } }; keyed[DOWN] = function() { if (moving) { moving.y = moving.y + 1; } else if (typeof focus.shape === "string" \|\| focus.shape < 3) { focus.set("height", max(4, focus.height - 2)); Button.update(); } else { keyed[LEFT](); } }; keyed[LEFT] = function(f) { if (moving) { moving.x = moving.x - 1; } else if (focus) { focus.set("width", max(4, focus.width - 2)); Button.update(); } }; keyed[RIGHT] = function() { if (moving) { moving.x = moving.x + 1; } else if (focus) { focus.set("width", focus.width + 2); Button.update(); } }; / Button menu handlers: / bm["New (n)"] = keyed.n = mm["New Button"] = function() { var config = (focus && ! focus.parent) ? focus.getConfig() : defaultButton.getConfig(); delete config.label; delete config.title; config.x = mouseX; config.y = mouseY; config.onClick = onClick; focus = moving = new Button(config); return false; / menu dismissed / }; bm["Clone (c)"] = keyed.c = function() { if (focus) { focus = ButtonGroup.cloneable(focus); focus = moving = focus.newMember({ x: mouseX, y: mouseY, onClick: onClick }); return false; / menu dismissed / } return true; / menu stays up / }; bm["Move (m)"] = keyed.m = function() { moving = focus; return ! moving; }; bm["More sides (>)"] = keyed[">"] = keyed["."] = function() { if (focus) { focus.set("shape", shapePlusPlus(focus.shape)); if (focus.shape > 2) { delete focus.height; } checkpoint(); } return true; / menu stays up / }; bm["Less sides (<)"] = keyed["<"] = keyed[","] = function() { if (focus) { focus.set("shape", shapeMinusMinus(focus.shape)); checkpoint(); } return true; / menu stays up / }; bm["Rotate (r)"] = keyed.r = function() { if (focus) { var choices = rotation[focus.shape]; var i = choices.indexOf(focus.firstVertex); i = ++i % choices.length; focus.set("firstVertex", choices[i]); checkpoint(); } return true; / menu stays up / }; bm["Edit label (l)"] = keyed.l = function() { if (focus) { stringEditor(focus, "label", "labelSize", "labelDx", "labelDy", "labelAlignX", labelJustify, focus.drawLabel); return false; / menu dismissed / } return true; / menu stays up / }; bm["Edit title (t)"] = keyed.t = function() { if (focus) { stringEditor(focus, "title", "titleSize", "titleDx", "titleDy", "titleAlign", titleJustify, focus.drawTitle); return false; / menu dismissed / } return true; / menu stays up / }; bm["Fill color (f)"] = keyed.f = function() { if (focus) { colorEditor(focus, "fill"); return false; / menu dismissed / } return true; / menu stays up / }; bm["Hover color (h)"] = keyed.h = function() { if (focus) { colorEditor(focus, "hovered"); return false; / menu dismissed / } return true; / menu stays up / }; bm["Select color (s)"] = keyed.s = function() { if (focus) { colorEditor(focus, "selected"); return false; / menu dismissed / } return true; / menu stays up / }; bm["Delete (d)"] = keyed.d = function() { if (focus) { focus.forget(); focus = null; checkpoint(); } return true; / menu stays up / }; / Main menu handlers: / mm["Buttons . . ."] = function() { buttonMenu.visible(mouseX + buttonMenu.group.width/2, mouseY); return false; / menu dismissed / }; mm["Menu demo"] = function() { menuDemo(); checkpoint(); return false; / menu dismissed / }; mm["Scrollbar demo"] = function() { scrollbarDemo(++sbdCnt % 4 === 3); checkpoint(); return false; / menu dismissed / }; mm["Undo (u) (z)"] = keyed.u = keyed.z = function() { if (undo.length > 0) { var s = undo.pop(); currentPoint = null; restoreState(s); checkpoint(); } return true; / menu stays up / }; mm["Generate code (g)"] = function() { printButtons(gatherButtons()); return false; / menu dismissed / }; mm["Dismiss menu"] = function() { buttonMenu.invisible(); return false; / menu dismissed / }; var thumbnail = '{"buttons":[{"shape":3,"width":68,"x":70,"y":190,"firstVertex":90,"fill":-13312,"label":"Yield","labelSize":17,"labelDy":-4},{"shape":"ellipse","width":58,"x":70,"y":300,"height":58,"fill":-11934891,"label":"GO","labelSize":21},{"shape":8,"width":58,"x":70,"y":100,"firstVertex":-22.5,"fill":-1095368,"label":"STOP","labelSize":17},{"shape":3,"width":30,"x":311,"y":100,"firstVertex":0,"fill":-4665904,"hovered":-10389061,"selected":-5973005,"title":"Right","titleSize":12,"titleAlign":39,"titleDx":3},{"shape":3,"width":30,"x":290,"y":80,"firstVertex":-90,"fill":-4665904,"hovered":-10389061,"selected":-5973005,"title":"Up","titleSize":13,"titleAlign":101,"titleDy":-1},{"shape":3,"width":30,"x":269,"y":100,"firstVertex":180,"fill":-4665904,"hovered":-10389061,"selected":-5973005,"title":"Left","titleSize":12,"titleAlign":37,"titleDx":-3},{"shape":4,"width":18,"x":290,"y":100,"firstVertex":-45,"fill":-12524057,"hovered":-10389061,"selected":-5973005},{"shape":3,"width":30,"x":290,"y":120,"firstVertex":90,"fill":-4665904,"hovered":-10389061,"selected":-5973005,"title":"Down","titleSize":13},{"shape":5,"width":34,"x":200,"y":200,"firstVertex":90,"fill":-12524057,"hovered":-10389061,"selected":-5973005}],"groups":[{"clones":[{"x":241,"y":188,"label":"Air"},{"x":200,"y":159,"label":"Army"},{"x":225,"y":233,"label":"Navy"},{"x":175,"y":234,"label":"CG"},{"x":160,"y":188,"label":"Marines"}],"shape":5,"width":52,"firstVertex":-90,"labelSize":12,"labelDy":-2,"fill":-1017646}],"scrollbarDemo":1,"menuDemo":false}'; / The keyReleased function that MUST be invoked by Processing.js. / Generator.keyReleased = function() { var k = (keyed[keyCode]) ? keyCode : key.toString().toLowerCase(); if (keyed[k]) { keyed[k](); redraw(); } }; / The draw function that MUST be invoked by Processing.js. / var firstTime = true; Generator.draw = function() { / Firsttime shouldn't be needed, KA screws it up on Restart. / if (firstTime) { var t = typeof thumb; t = (t === "string" \|\| t === "undefined") ? thumb : thumbnail; currentPoint = null; restoreState(t); checkpoint(); firstTime = false; return; } noLoop(); if (bgImage) { image(bgImage, 0, 0, width, height); } else { background(255); } if (moving \|\| (grid && Button.selected)) { Button.crosshairs = true; var b = (moving) ? moving : Button.selected; drawGrid(b.x, b.y); } else if (focus) { focus.strokeWeight = 1.5; } selectedCnt.x = selectedCnt.y = 0; Button.draw(); if (focus && !moving) { delete focus.strokeWeight; } Button.crosshairs = false; if (picker) { var x = (focus.x < width/2) ? (width - picker.width) - 20 : 20; var y = (focus.y < height/2) ? (height - picker.height) - 20 : 20; picker.draw(x, y); } strokeWeight(1); }; / The mousePressed function that MUST be invoked by Processing.js. / Generator.mousePressed = function() { if (moving) { grid = false; Button.mousePressed(); moving = null; checkpoint(); } else { grid = Button.hovered && (! Menu.itemsMenu(Button.hovered) && (! Button.hovered.scrollbar)); if ((! picker) && ! Button.mousePressed()) { / Click on nothing brings up main menu. / buttonMenu.invisible(); mainMenu.visible(mouseX + mainMenu.group.width/2, mouseY); } } redraw(); }; / The mouseReleased function that MUST be invoked by Processing.js. / Generator.mouseReleased = function() { Button.mouseReleased(); redraw(); }; / The mouseMoved function that MUST be invoked by Processing.js. / Generator.mouseMoved = function() { if (moving) { void (moving.menu && moving.menu.invisible()); moving.x = mouseX; moving.y = mouseY; } Button.mouseMoved(); redraw(); }; / Draw a crosshairs grid centered at (x, y) / var drawGrid = function(x, y) { var r = 0, dr = 12; strokeWeight(1); stroke(1); while((x+r<width) \|\| (x-r>0) \|\| (y+r<height) \|\| (y-r>0)) { line(x + r, y, x + r + dr, y); line(x - r, y, x - r - dr, y); line(x, y + r, x, y + r + dr); line(x, y - r, x, y - r - dr); r += 3/2dr + 2; point(x + r, y); point(x - r, y); point(x, y + r); point(x, y - r); r += dr/2 + 2; } fill(0); textAlign(CENTER, CENTER); var sz = 11; textSize(sz); text(x, x, sz); text(x, x, height - sz); sz += 3; text(y, sz, y); text(y, width - sz, y); }; /* Potentially draws crosshairs in a button. / Button.prototype.drawCrosshairs = function() { if (Button.hovered && ! Menu.itemsMenu(this)) { var sx = Button.hovered.x, sy = Button.hovered.y; var x = this.x, y = this.y; var horz, vert; if (this === Button.hovered) { horz = (selectedCnt.x > 0); vert = (selectedCnt.y > 0); } else if (y === sy) { horz = true; selectedCnt.x++; } else if (x === sx) { vert = true; selectedCnt.y++; } if (horz \|\| vert) { stroke(1); strokeWeight(1); } if (horz) { var dx = 0.6 this.radius; line(x - dx, y, x + dx, y); } if (vert) { var dy = 0.6 * (this.radiusH \|\| this.radius); line(x, y - dy, x, y + dy); } } }; Button.prototype.crosshairs = Button.prototype.drawCrosshairs; /* Extracts this's config into an object. / Button.prototype.getConfig = function(whitelist) { var whiteList = []; for (var i = 0; i < arguments.length; i++) { whiteList.push(arguments[i]); } var config = {}; for (var p in this) { if (this.hasOwnProperty(p) && (Button.defaultConfig.hasOwnProperty(p) \|\| (whiteList.indexOf(p) >= 0))) { config[p] = this[p]; } } return config; }; / Draw this button's label and another string. / Button.prototype.drawLabel = function(another) { var labelAlignX = this.labelAlignX; var label = this.label; var ly = this.y + this.labelDy; var lx = this.x + this.labelDx; if (labelAlignX === LEFT) { lx -= (this.width - this.labelSize) / 2; } else if (labelAlignX === RIGHT) { lx += (this.width - this.labelSize) / 2; } fill(this.labelFill); textAlign(labelAlignX, CENTER); textSize(this.labelSize); text(label, lx, ly); if (another) { if (labelAlignX === CENTER) { lx += textWidth(label)/2; } else if (labelAlignX === LEFT) { lx += textWidth(label); } else { lx += textWidth(another); } textSize(this.labelSize \|\| (this.width/3)); text(another, lx, ly); } }; / Draw this button's title and another string. / Button.prototype.drawTitle = function(another) { var titleAlign = this.titleAlign; var title = this.title; var tx = this.x + this.titleDx; var ty = this.y + this.titleDy; var width = this.width; var height = this.height \|\| width; if (titleAlign === RIGHT) { tx += width / 2; textAlign(LEFT, CENTER); } else if (titleAlign === BOTTOM) { ty += height / 2; textAlign(CENTER, TOP); } else if (titleAlign === LEFT) { tx -= this.width / 2; textAlign(RIGHT, CENTER); } else if (titleAlign === TOP) { ty -= height / 2; textAlign(CENTER, BOTTOM); } fill(this.titleFill); textSize(this.titleSize); text(title, tx, ty); if (another) { if (titleAlign === RIGHT) { tx += textWidth(title); } else if (titleAlign === LEFT) { tx += textWidth(another); } else { tx += textWidth(title)/2; } textSize(this.titleSize \|\| (this.width/3)); text(another, tx, ty); } }; / Exchange button b for one that is a clone of a ButtonGroup. / var keepers = [ "x", "y", "label", "title" ]; ButtonGroup.cloneable = function(b, invisible) { if (b.hasOwnProperty("clone")) { return b; } b.forget(); var c = b.getConfig(); var cloneConfig = {}; var buttonConfig = {}; for (var p in c) { if (c.hasOwnProperty(p)) { var config = (keepers.indexOf(p) < 0) ? cloneConfig : buttonConfig; config[p] = c[p]; } } var cg = new ButtonGroup(cloneConfig); return cg.newMember(buttonConfig, invisible); }; / Construct the button menu / var item = []; for (var p in bm) { item.push(p); } buttonMenu = new Menu({ item: item, labelAlignX: LEFT, onClick: function(b) { var doit = bm[b.label]; var results = doit && doit(); return results; } }); / Construct the main menu / var item = []; for (var p in mm) { item.push(p); } item.shift(); / get rid of "Buttons . . ." item. / mainMenu = new Menu({ item: item, labelAlignX: LEFT, onClick: function(b) { var doit = mm[b.label]; return doit && doit(); } }); / Plumbing for eventual printing. */ Button.fname = "Button"; ButtonGroup.fname = "ButtonGroup"; ButtonGroup.dependsOn = [ Button ]; Menu.fname = "Menu"; Menu.dependsOn = [ ButtonGroup ]; Scrollbar.fname = "Scrollbar"; Scrollbar.dependsOn = [ Button ]; genericClick.fname = "genericClick"; menuDemo.fname = "menuDemo"; menuDemo.dependsOn = [ Menu, genericMenuClick ]; menuDemo.postLine = "menuDemo(); // demo a menu"; genericMenuClick.fname = "genericMenuClick"; scrollbarDemo.fname = "scrollbarDemo"; scrollbarDemo.dependsOn = [ Scrollbar ]; cursor(ARROW); return Generator; })(thumb); draw = Generator.draw; keyReleased = Generator.keyReleased; mouseMoved = Generator.mouseMoved; mousePressed = Generator.mousePressed; mouseReleased = Generator.mouseReleased; // I am honored any time anybody uses my code for any // purpose. Copy freely! All my programs are at // https://www.khanacademy.org/profile/BobLyon/programs // I can be reached at Robert.B.Lyon at gmail dot com
Folds	58,454,456,543,545,694,696,997,999,1045,1047,1101,1119,1168,1170,1267,1269,1282,1283,1352
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBievuPwBgw
Votes	711
Spin-Offs	19
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"1727802136","title":"Meta Object Editor","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Bob Lyon
Author Name	BobLyon
Author ID	kaid_1116520053705160540512971
Author Profile Access	COACH

Archive Data

Added	2 months ago, 1739283164052
Updated	4 days ago, 1744820633973
Source Deleted	unknown