diff --git a/README.md b/README.md index 849a154548..536ee356bd 100644 --- a/README.md +++ b/README.md @@ -7,24 +7,38 @@ Leibniz Music Blocks is a _Visual Programming Language_ and collection of _manipulative tools_ for exploring musical and mathematical concepts in an integrative and fun way. -**Refer the following sections below to get familiar with this project:** +## Getting Started + +Music Blocks is an interactive Web Application — the interaction is done via basic mouse +events like _click_, _right click_, _click and drag_, etc. and keyboard events like _hotkey press_. +The application is audio-visual; it produces graphics artwork and music. Here are a couple of +screenshots to give you an idea of how the application looks like: + +![alt tag](./screenshots/Screenshot-1.png) + +![alt tag](./screenshots/Screenshot-2.png) + +Some background on why music and programming can be found [here](./WhyMusicBlocks.md). + +**Refer to the following sections to get familiar with this application:** - [Running Music Blocks](#RUNNING_MUSIC_BLOCKS) - [How to set up a local server](#HOW_TO_SET_UP_A_LOCAL_SERVER) - [Using Music Blocks](#USING_MUSIC_BLOCKS) -- [Modifying Music Blocks](#MODIFYING_MUSIC_BLOCKS) -- [Reporting Bugs](#REPORTING_BUGS) -- [Contributing](#CONTRIBUTING) -- [Credits](#CREDITS) -- [Music Blocks in Japan](#MUSIC_BLOCKS_IN_JAPAN) -## Screenshots +If you are a developer (beginner, experienced, or pro), you are very welcome to participate in the +evolution of Music Blocks. -![alt tag](./screenshots/Screenshot-1.png) +**Refer to the following sections to get an idea:** -![alt tag](./screenshots/Screenshot-2.png) +- [Contributing](#CONTRIBUTING) +- [Modifying Music Blocks](#MODIFYING_MUSIC_BLOCKS) +- [Reporting Bugs](#REPORTING_BUGS) -Some background on why music and programming can be found [here](./WhyMusicBlocks.md). +**Refer to the following for more information regarding the evolution of this project:** + +- [Credits](#CREDITS) +- [Music Blocks in Japan](#MUSIC_BLOCKS_IN_JAPAN) ## Running Music Blocks @@ -97,38 +111,11 @@ Once Music Blocks is running, you'll want suggestions on how to use it. Follow Looking for a block? Find it in the [Palette Tables](./guide/README.md#APPENDIX_1). -## Modifying Music Blocks - -The core functionality for Music Blocks resides in the [`js/` directory](./js/). Individual -modules are described in more detail in [js/README.md](./js/README.md). - -**NOTE:** As for any changes, please make your own copy by cloning this -[repository](https://github.com/sugarlabs/musicblocks.git). Make your changes, test them, and then -make a pull request. - -See [Contributing Code](https://github.com/sugarlabs/sugar-docs/blob/master/src/contributing.md) -to get a general idea about this organizations guidelines. See [Contributing](#CONTRIBUTING) -section for specific details about this repository. - -## Reporting Bugs - -Bugs can be reported in the [issues tab](https://github.com/sugarlabs/musicblocks/issues) of this -repository. - -If possible, please include the browser _console log output_, and _steps to reproduce_, when -reporting bugs. To access the console, type `Ctrl-Shift-J`/`F12` on most browsers. Alternately, -_right click_ and select `Inspect`. You may need to set the `Default levels` for the console to -`Verbose` in order to see all of the output, however, in most cases that won't be required. In fact, -it'll only clutter the list, so select it only when required. - ## Contributing Please consider contributing to the project, with your ideas, your music, your lesson plans, your artwork, and your code. -Programmers, please follow these general -[guidelines for contributions](https://github.com/sugarlabs/sugar-docs/blob/master/src/contributing.md). - ### Special Notes Music Blocks is being built from the ground-up, to address several architectural problems with this @@ -144,6 +131,26 @@ these issues, whilst adding buffers for future additions. We'll also be using a tech-stack to develop and maintain this project given its scale. After the core is built, we'll be porting features from this application to it. +Refer to the repository [**sugarlabs/musicblocks-2**](https://github.com/sugarlabs/musicblocks-2) +for more information about the new project — _Music Blocks 2.0_. + +### Tech Stack + +Music Blocks is a Web Application and is written using browser technologies — `HTML`, `CSS` +(`SCSS`), `JavaScript`, `SVG`, etc. + +If you're just getting started with development, you may refer to the following resources: + +- [HTML tutorial - w3schools.com](https://www.w3schools.com/html/default.asp) +- [HTML reference - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML) +- [CSS tutorial - w3schools.com](https://www.w3schools.com/css/default.asp) +- [CSS reference - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS) +- [JavaScript tutorial - w3schools.com](https://www.w3schools.com/js/default.asp) +- [JavaScript reference - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript) + +Programmers, please follow these general +[guidelines for contributions](https://github.com/sugarlabs/sugar-docs/blob/master/src/contributing.md). + ### New Contributors Use the [discussions](https://github.com/sugarlabs/musicblocks/discussions) tab at the top of the @@ -201,6 +208,30 @@ anything. Begin to fix the problem, test, make your commits, push your commits, request. Mention an issue number in the pull request, but not the commit message. These practices allow the competition of ideas (Sugar Labs is a meritocracy)._ +## Modifying Music Blocks + +The core functionality for Music Blocks resides in the [`js/` directory](./js/). Individual +modules are described in more detail in [js/README.md](./js/README.md). + +**NOTE:** As for any changes, please make your own copy by cloning this +[repository](https://github.com/sugarlabs/musicblocks.git). Make your changes, test them, and then +make a pull request. + +See [Contributing Code](https://github.com/sugarlabs/sugar-docs/blob/master/src/contributing.md) +to get a general idea about this organizations guidelines. See [Contributing](#CONTRIBUTING) +section for specific details about this repository. + +## Reporting Bugs + +Bugs can be reported in the [issues tab](https://github.com/sugarlabs/musicblocks/issues) of this +repository. + +If possible, please include the browser _console log output_, and _steps to reproduce_, when +reporting bugs. To access the console, type `Ctrl-Shift-J`/`F12` on most browsers. Alternately, +_right click_ and select `Inspect`. You may need to set the `Default levels` for the console to +`Verbose` in order to see all of the output, however, in most cases that won't be required. In fact, +it'll only clutter the list, so select it only when required. + ## Credits Music Blocks is a fork of [Turtle Blocks JS](https://github.com/sugarlabs/turtleblocksjs) created by diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index 739d2b6f27..d5c5296072 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -11,40 +11,29 @@ // License along with this library; if not, write to the Free Software // Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA -/*global logo,blocks, _, platformColor, docById, MATRIXSOLFEHEIGHT, toFraction, Singer, - SOLFEGECONVERSIONTABLE, slicePath, wheelnav, DEFAULTVOICE, PITCHES, PITCHES2, - MATRIXSOLFEWIDTH, i18nSolfege, getNote, FIXEDSOLFEGE1, NOTESSHARP, NOTESFLAT, - last, SHARP, FLAT, PREVIEWVOLUME, noteToFrequency, SOLFEGENAMES, PITCHES3, - EIGHTHNOTEWIDTH, convertFromSolfege, FIXEDSOLFEGE*/ - +/* global docById,platformColor,FIXEDSOLFEGE,FIXEDSOLFEGE1,SHARP,FLAT,last,Singer,_,noteToFrequency, + EIGHTHNOTEWIDTH,MATRIXSOLFEHEIGHT,i18nSolfege,MATRIXSOLFEWIDTH,toFraction,wheelnav,slicePath,blocks,getNote,PREVIEWVOLUME, + DEFAULTVOICE,PITCHES3,SOLFEGENAMES,SOLFEGECONVERSIONTABLE,NOTESSHARP,NOTESFLAT,PITCHES,PITCHES2,convertFromSolfege,logo */ /* - Globals location - - lib/wheelnav - slicePath, wheelnav - - - js/utils/musicutils.js - EIGHTHNOTEWIDTH, noteToFrequency, PITCHES, PITCHES2, NOTESSHARP, NOTESFLAT, - FLAT, SHARP, MATRIXSOLFEHEIGHT, toFraction, SOLFEGECONVERSIONTABLE, DEFAULTVOICE, - MATRIXSOLFEWIDTH, i18nSolfege, FIXEDSOLFEGE1, SOLFEGENAMES, PITCHES3, - getNote, convertFromSolfege, FIXEDSOLFEGE - - - js/utils/utils.js - _, last, docById - - - js/turtle-singer.js - Singer - - - js/utils/platformstyle.js - platformColorcl - - - js/activity.js + Global Locations + - lib/wheelnav + slicePath, wheelnav + - js/utils/utils.js + _,docById,last + - js/turtle-singer.js + Singer + - js/utils/musicutils.js + noteToFrequency,getNote,FIXEDSOLFEGE,FIXEDSOLFEGE1,SHARP,FLAT,EIGHTHNOTEWIDTH,MATRIXSOLFEHEIGHT,i18nSolfege,MATRIXSOLFEWIDTH, + toFraction,DEFAULTVOICE,PITCHES,PITCHES2,PITCHES3,SOLFEGENAMES,SOLFEGECONVERSIONTABLE,NOTESSHARP, + NOTESFLAT,convertFromSolfege + - js/utils/platformstyle.js + platformColor + - js/activity.js blocks - - - js/logo.js - PREVIEWVOLUME - */ - -/*exported MusicKeyboard*/ + - js/logo.js + PREVIEWVOLUME +*/ +/* exported MusicKeyboard */ function MusicKeyboard() { const FAKEBLOCKNUMBER = 100000; @@ -84,7 +73,6 @@ function MusicKeyboard() { this.blockNumberMapper = {}; this.instrumentMapper = {}; let selectedNotes = []; - this._rowBlocks = []; // Each element in the array is [start time, note, id, duration, voice]. @@ -299,7 +287,28 @@ function MusicKeyboard() { }); } this._createTable(); - + if (this.widgetWindow._maximized) { + this.widgetWindow.getWidgetBody().style.position = "absolute"; + this.widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)"; + this.widgetWindow.getWidgetBody().style.width = "200vh"; + const outerDiv = docById("mkbOuterDiv"); + outerDiv.style.maxHeight = "725px"; + docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; + docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; + docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; + docById("mkbInnerDiv").style.width = "95.5vw"; + const innerDiv = docById("mkbInnerDiv"); + innerDiv.scrollLeft = innerDiv.scrollWidth; + this.widgetWindow.getWidgetBody().style.left = "60px"; + } else { + const outerDiv = docById("mkbOuterDiv"); + outerDiv.style.maxHeight = "400px"; + this.widgetWindow.getWidgetBody().style.position = "relative"; + this.widgetWindow.getWidgetBody().style.left = "0px"; + this.widgetWindow.getWidgetBody().style.height = "550px"; + this.widgetWindow.getWidgetBody().style.width = "1000px"; + docById("mkbOuterDiv").style.width = w + "px"; + } delete startTime[id]; delete temp1[id]; delete temp2[id]; @@ -392,12 +401,30 @@ function MusicKeyboard() { blockNumber: this.blockNumberMapper[element.id] }); this._createTable(); - }; - element.onmouseout = function () { - // __endNote(); + if (this.widgetWindow._maximized) { + this.widgetWindow.getWidgetBody().style.position = "absolute"; + this.widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)"; + this.widgetWindow.getWidgetBody().style.width = "200vh"; + const outerDiv = docById("mkbOuterDiv"); + outerDiv.style.maxHeight = "725px"; + docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; + docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; + docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; + docById("mkbInnerDiv").style.width = "95.5vw"; + this.widgetWindow.getWidgetBody().style.left = "60px"; + } else { + const outerDiv = docById("mkbOuterDiv"); + outerDiv.style.maxHeight = "400px"; + this.widgetWindow.getWidgetBody().style.position = "relative"; + this.widgetWindow.getWidgetBody().style.left = "0px"; + this.widgetWindow.getWidgetBody().style.height = "550px"; + this.widgetWindow.getWidgetBody().style.width = "1000px"; + docById("mkbOuterDiv").style.width = w + "px"; + } }; + element.onmouseup = function () { __endNote(this); }; @@ -419,6 +446,29 @@ function MusicKeyboard() { const tur = logo.turtles.ithTurtle(0); this.bpm = tur.singer.bpm.length > 0 ? last(tur.singer.bpm) : Singer.masterBPM; + this.widgetWindow.onmaximize = function () { + if (widgetWindow._maximized) { + widgetWindow.getWidgetBody().style.position = "absolute"; + widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)"; + widgetWindow.getWidgetBody().style.width = "200vh"; + docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; + const outerDiv = docById("mkbOuterDiv"); + outerDiv.style.maxHeight = "725px"; + docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; + docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; + widgetWindow.getWidgetBody().style.left = "60px"; + } + else { + const outerDiv = docById("mkbOuterDiv"); + outerDiv.style.maxHeight = "400px"; + widgetWindow.getWidgetBody().style.position = "relative"; + widgetWindow.getWidgetBody().style.left = "0px"; + widgetWindow.getWidgetBody().style.height = "550px"; + widgetWindow.getWidgetBody().style.width = "1000px"; + docById("mkbOuterDiv").style.width = w + "px"; + } + }; + widgetWindow.onclose = () => { let myNode; document.onkeydown = saveOnKeyDown; @@ -469,6 +519,21 @@ function MusicKeyboard() { selectedNotes = []; // if (!that.keyboardShown) { this._createTable(); + if (widgetWindow._maximized) { + const outerDiv = docById("mkbOuterDiv"); + outerDiv.style.maxHeight = "725px"; + docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; + docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; + widgetWindow.getWidgetBody().style.left = "60px"; + } else { + const outerDiv = docById("mkbOuterDiv"); + outerDiv.style.maxHeight = "400px"; + widgetWindow.getWidgetBody().style.position = "relative"; + widgetWindow.getWidgetBody().style.left = "0px"; + widgetWindow.getWidgetBody().style.height = "550px"; + widgetWindow.getWidgetBody().style.width = "1000px"; + docById("mkbOuterDiv").style.width = w + "px"; + } // } }; @@ -526,33 +591,6 @@ function MusicKeyboard() { BUTTONDIVWIDTH ); - //Change widget size on fullscreen mode, else - //revert back to original size on unfullscreen mode - widgetWindow.onmaximize = function () { - if (widgetWindow._maximized) { - widgetWindow.getWidgetBody().style.position = "absolute"; - widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)"; - widgetWindow.getWidgetBody().style.width = "200vh"; - docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; - docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; - try { - docById("mkbInnerDiv").style.width = "calc(200vh - 64px)"; - } catch (e) { - // Does this happen? - // eslint-disable-next-line no-console - console.debug("Error calculating InnerDiv width"); - } - - widgetWindow.getWidgetBody().style.left = "70px"; - } else { - widgetWindow.getWidgetBody().style.position = "relative"; - widgetWindow.getWidgetBody().style.left = "0px"; - widgetWindow.getWidgetBody().style.height = "550px"; - widgetWindow.getWidgetBody().style.width = "1000px"; - docById("mkbOuterDiv").style.width = w + "px"; - } - }; - widgetWindow.sendToCenter(); }; @@ -1122,6 +1160,7 @@ function MusicKeyboard() { let n = Math.max(Math.floor((window.innerHeight * 0.5) / 100), 8); const outerDiv = docById("mkbOuterDiv"); + outerDiv.style.overflowY = "hidden"; if (this.displayLayout.length > n) { outerDiv.style.height = this._cellScale * MATRIXSOLFEHEIGHT * (n + 5) + "px"; } else { @@ -2488,8 +2527,6 @@ function MusicKeyboard() { this._save = function () { this.processSelected(); - // console.debug("Generating action stack for: "); - // console.debug(selectedNotes); const newStack = [ [0, ["action", { collapsed: false }], 100, 100, [null, 1, 2, null]], [1, ["text", { value: _("action") }], 0, 0, [0]], diff --git a/js/widgets/status.js b/js/widgets/status.js index ef98f78f6d..a2388070ed 100644 --- a/js/widgets/status.js +++ b/js/widgets/status.js @@ -98,12 +98,12 @@ class StatusMatrix { } cell.style.width = "212.5px"; this.widgetWindow.onmaximize = () => { - this.isMaximized = !(this.isMaximized); - console.debug("Maximized " + this.isMaximized); + this.isMaximized = !this.isMaximized; cell.style.width = "100vw"; cell.style.paddingLeft = "30px"; - cell.style.fontSize = Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR)*0.90 + "%"; - if(!(this.isMaximized)){ + cell.style.fontSize = + Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%"; + if (!this.isMaximized) { cell.style.width = "212.5px"; } }; @@ -120,7 +120,8 @@ class StatusMatrix { const row = header.insertRow(); cell = row.insertCell(); // i + 1); - cell.style.fontSize = Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR)*0.90 + "%"; + cell.style.fontSize = + Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%"; // console.debug(statusField[1]); @@ -169,7 +170,7 @@ class StatusMatrix { cell = row.insertCell(); cell.style.backgroundColor = platformColor.selectorBackground; cell.style.fontSize = - Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR)*0.90 + "%"; + Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%"; cell.innerHTML = ""; cell.style.height = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + "px"; cell.style.textAlign = "center"; @@ -179,7 +180,8 @@ class StatusMatrix { if (_THIS_IS_MUSIC_BLOCKS_) { const row = header.insertRow(); cell = row.insertCell(); - cell.style.fontSize = Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR)*0.90 + "%"; + cell.style.fontSize = + Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%"; const str = _("note"); const label = str.charAt(0).toUpperCase() + str.slice(1); cell.innerHTML = " " + label + ""; @@ -190,7 +192,7 @@ class StatusMatrix { cell = row.insertCell(); cell.style.backgroundColor = platformColor.selectorBackground; cell.style.fontSize = - Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR)*0.90 + "%"; + Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%"; cell.innerHTML = ""; cell.style.height = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + "px"; cell.style.textAlign = "center";