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.

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

Add design document for Masonry (previously Project-builder/code-builder) #404

Open
wants to merge 15 commits into
base: develop
Choose a base branch
from

Conversation

Karan-Palan
Copy link
Collaborator

@Karan-Palan Karan-Palan commented May 13, 2024

Description:

#399

This pull request adds the design document for the Masonry framework, previously known as Project-builder/code-builder. The design document outlines the architectural overview, key features, main user activities, subsystems, additional functionality, and design considerations for Masonry. It provides a comprehensive guide for developers, contributors, and community members involved in the development and maintenance of this component. The document aims to ensure clarity, consistency, and alignment with project objectives, facilitating effective collaboration and implementation.

Find the document here - https://github.com/Karan-Palan/musicblocks-v4/blob/gsoc2024/karan-palan/community-bonding/modules/code-builder/docs/Masonry_Design_Document.md

@Karan-Palan Karan-Palan marked this pull request as draft May 13, 2024 07:04
@Karan-Palan Karan-Palan marked this pull request as ready for review May 14, 2024 08:47
Comment on lines 11 to 14
![duration bricks](./images/image.png)
- String Data Brick (representing note names, pitches, etc.)

![pitches and note names](./images/image-1.png)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are two variations to these. Ones that allow editing and ones that don't. 10 is editable, sol isn't. Might be worth discussing if we'd want specific visual characteristics for ones that can be edited. For instance, Scratch and Blockly have textboxes and dropdowns.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, after reviews from others , we can finalize things. For now we can add these sub points to each data brick:

  • Editable Data Bricks: Contain editable text fields or drop-down menus for selecting predefined options.
  • Non-editable Data Bricks: Display fixed note names or pitches.

modules/code-builder/docs/PRD.md Outdated Show resolved Hide resolved
modules/code-builder/docs/PRD.md Outdated Show resolved Hide resolved
modules/code-builder/docs/PRD.md Outdated Show resolved Hide resolved
modules/code-builder/docs/PRD.md Outdated Show resolved Hide resolved
Comment on lines 128 to 129
- Visual indicators (e.g., ghost preview, outline) for valid drop locations
- Snap-to-grid or precise positioning when dropping Bricks
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps a bit more details about these two.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct?

  • Visual indicators (e.g., ghost preview, outline) for valid drop locations: When dragging a Brick from the palette to the workspace, a semi-transparent "ghost" image of the Brick appears to show where it will be placed. Additionally, an outline or highlight may appear on valid drop areas to guide the user.
  • Snap-to-grid or precise positioning when dropping Bricks: Bricks will align to a grid to ensure organized placement. Users can also position Bricks precisely according to their preferences. This helps maintain a clean and structured workspace, and users can toggle snapping on or off depending on their needs.

Comment on lines 134 to 136
- Options for creating new Bricks or Brick instances directly from the palette
- Context menus or shortcuts for duplicating or cloning existing Bricks
- Visual feedback or animations when creating or instantiating new Bricks
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Creating as in?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this point in regards to a bi-weekly meet where it was discussed to have some kind of custom thing there users can create bricks(ex, Happy birthday some-one wants to play, so user can instantiate that stack of bricks required to create a Happy birthday program in MB and then name it "Happy-birthday-brick" and drag it) from the palette itself.
This would be a feature that may or may not be implemented but it came across my mind so I wrote it down

modules/code-builder/docs/PRD.md Outdated Show resolved Hide resolved
modules/code-builder/docs/PRD.md Outdated Show resolved Hide resolved
modules/code-builder/docs/PRD.md Outdated Show resolved Hide resolved
modules/code-builder/docs/PRD.md Outdated Show resolved Hide resolved
modules/code-builder/docs/PRD.md Show resolved Hide resolved

### b. Stack Editing:
- **Connection Editing**: Options for rerouting, splitting, or merging connections.
- **Quick Edit Shortcuts**: Context menus or keyboard shortcuts speed up editing.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a note on the lines of "this is up for further discussion"

modules/code-builder/docs/PRD.md Show resolved Hide resolved
modules/code-builder/docs/PRD.md Show resolved Hide resolved
@Karan-Palan
Copy link
Collaborator Author

I went through couple of videos, made a few diagrams and defined all the process in one file. Please check it @meganindya

https://github.com/Karan-Palan/musicblocks-v4/blob/gsoc2024/karan-palan/community-bonding/modules/code-builder/docs/Architecture/

@pikurasa
Copy link
Collaborator

I guess my one question is: are we considering mobile (and other variable screen sizes)?

As long as we don't back ourselves into a corner, I don't mind starting with the typical desktop/laptop screen size ratios, but I just want to make sure we don't forget about it completely.

Also, it may be helpful to consider this now; it may help us keep things simple, too.

@pikurasa
Copy link
Collaborator

Side Note: If we want to implement a design similar to Scratch in the future, we can consider the following approach for connecting blocks:

In Scratch, blocks are connected horizontally in a row for sequential execution. Each block has a tab at the bottom and a notch at the top, allowing them to snap together in a linear sequence. This design makes it clear which blocks will execute in order.

In the last meeting, we said that we are fine with doing "infix" for v4. At the very least, the hope is that will help us stack longer strings of notes together.

Here's some info on the jargon (for my own sake, if for no other reason): http://www.cs.man.ac.uk/~pjj/cs212/fix.html

@pikurasa
Copy link
Collaborator

Context Menus: For more complex properties, a separate interface allows detailed configuration. dedicated editors

https://github.com/Karan-Palan/musicblocks-v4/raw/gsoc2024/karan-palan/community-bonding/modules/code-builder/docs/images/image-5.png

For set instrument, let's not do pie menu.

Pie menu is great for pitch, but not for Set Instrument.

For set instrument, I think something like what we have for Tam Tam is fine.

Tam Tam screenshot

@pikurasa
Copy link
Collaborator

A sort-of wish list item of mine is to have a music visualizer. https://blockly.games/music?lang=en has a very simple version that looks like this:

Screenshot from 2024-05-24 21-22-26

The idea is to show the music somewhere on the screen. I imagine that a sliver of the bottom of the screen would be the best "real estate" to use because standard music notation mainly takes up space horizontally (over time).

(So, I don't recommend implementing it the same way as blockly, but it is nice to have one version to test.)

@pikurasa
Copy link
Collaborator

My last comment on the PRD for today is: I wonder if there is a way to make the "My Action" feature more easily discoverable?

Screenshot from 2024-05-24 21-27-24

I really do think that it would help kids code bigger projects.

Perhaps we want to pre-load it with a few useful Actions to help folks get the idea ???

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants