Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update the MusicKeyboard widget on maximizing. #2857

Merged
merged 12 commits into from
Mar 12, 2021
Merged

Update the MusicKeyboard widget on maximizing. #2857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8d61c5d
Refactor status.js
daksh4469 Feb 24, 2021
8c0b1bf
Feature: Maximizing action on musickeyboard
daksh4469 Feb 24, 2021
2b9f751
Refactored some code
daksh4469 Feb 24, 2021
2f4eccc
Update js/widgets/status.js
daksh4469 Feb 25, 2021
cba6800
Eliminate vertical scroll to fix issue
daksh4469 Feb 25, 2021
80f4a44
Merge branch 'daksh4469-master' of https://github.com/daksh4469/music…
daksh4469 Feb 25, 2021
216b19d
Handle Overflows and set scroll
daksh4469 Feb 25, 2021
4a3f131
Fix issue in case of no grid
daksh4469 Feb 26, 2021
4b73c9e
docs: target more beginners
meganindya Mar 7, 2021
2e40ecd
docs: add link for MB 2.0
meganindya Mar 7, 2021
0b14fd4
Merge branch 'master' of https://github.com/sugarlabs/musicblocks int…
daksh4469 Mar 10, 2021
7aa8aa5
Check maximizing action
daksh4469 Mar 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 68 additions & 37 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

## <a name="RUNNING_MUSIC_BLOCKS"></a>Running Music Blocks

Expand Down Expand Up @@ -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).

## <a name="MODIFYING_MUSIC_BLOCKS"></a>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.

## <a name="REPORTING_BUGS"></a>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.

## <a name="CONTRIBUTING"></a>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
Expand All @@ -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 &mdash; _Music Blocks 2.0_.

### Tech Stack

Music Blocks is a Web Application and is written using browser technologies &mdash; `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
Expand Down Expand Up @@ -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)._

## <a name="MODIFYING_MUSIC_BLOCKS"></a>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.

## <a name="REPORTING_BUGS"></a>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.

## <a name="CREDITS"></a>Credits

Music Blocks is a fork of [Turtle Blocks JS](https://github.com/sugarlabs/turtleblocksjs) created by
Expand Down
169 changes: 103 additions & 66 deletions js/widgets/musickeyboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
daksh4469 marked this conversation as resolved.
Show resolved Hide resolved
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
daksh4469 marked this conversation as resolved.
Show resolved Hide resolved
blocks

- js/logo.js
PREVIEWVOLUME
*/

/*exported MusicKeyboard*/
- js/logo.js
PREVIEWVOLUME
*/
/* exported MusicKeyboard */

function MusicKeyboard() {
const FAKEBLOCKNUMBER = 100000;
Expand Down Expand Up @@ -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].
Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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);
};
Expand All @@ -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;
Expand Down Expand Up @@ -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";
}
// }
};

Expand Down Expand Up @@ -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();
};

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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]],
Expand Down
Loading