FAB ACADEMY 2024 
FABLAB U. CONTINENTAL, PERU

Principles and Practices, Project Management

Final Project

MIDI Laser Harp

As a final project he decided to make a midi controller. Specifically a MIDI laser harp. I consider myself a hobbyist of creating electronic music for several years now. That is why I am motivated to make this design. 

This project is safe, cheap and accessible since it does not require such complex components. The operation is as follows: In a framed laser harp, each laser source is paired with a light detector at close range. The Arduino continuously monitors the light level at each light detector. If the light level on a detector drops, we know that the laser beam has been blocked and send a "note on" MIDI message to the computer via the USB port (or some other means). If the light level returns, we send a "note off" MIDI message to the computer. As mentioned, it's intended to be as quick and cheap as possible, but getting materials (if you're not lucky enough to have a drawer full of lasers and photodiodes) can take a bit of time. 

In the first instance I will develop the design of the harp support that will serve as the basis for the lasers and photodiodes. In such a way that they are aligned respectively. In addition to a compartment where the control circuit and the respective connections will go. All this connected to the computer through the USB MIDI connection. And with the use of some software that allows the reproduction of sounds through the MIDI protocol.


The goal is to create a device capable of being used in a live environment, for the creation of electronic music!

"This project is intended for hobbyists, musicians and enthusiasts, including children for learning music in a different and didactic way "

Gantt Diagram

Description of the work plan for the implementation of the project in activities per week

Actividad W01 W02 W03 w04 W05 W06 W07 W08 W09 W10 W11 W12 W13 W14 W15 W16 W17 W18 W19
Sketch x
Plan x x
Prototype Design x x x x
Microcontroller
Design
x x
Mmicrocontroller
Programming
x x x x
Construction
and assembly
x x x x x x x x x

Next, Assignment 2: Project Management >>

Website Development

This sections explains how this website was created.

Currently, companies demand a large number of technological professionals who are experts in programming languages, with the aim of improving the structures of their web pages, and among these languages, the HTML5 programming profile is one of the main ones. HTML is the original language of the web. It is a language used to create web pages, which determines how the content will be presented in a web browser. It is a fundamental part of web standards, since this language is the basis for building Internet pages. Its name stands for “HyperText Markup Language”, which literally means “Hypertext Markup Language”. It is the standard with which all websites are programmed, and although some languages may have elements or fragments programmed in other languages, they always have to be "fitted" with it. Web pages are information dissemination tools for different purposes. Whatever the objective, they all have in common the language with which they are built, HTML.

STEP 1:

Nicepage gives the ultimate freedom for Web Design 3.0. It has a mobile-friendly editor, Support Joomla, WordPress Themes and HTML5 websites with no coding in free desktop aplications for Windows and Mac. Nicepage Page Builder is available as a Joomla Extension and WordPress Plugin. There is also a Nicepage edition with online hosting.

NICEPAGE software was used, due to its ease and versatility. Downloaded and installed on the computer.

STEP 2:

We use a template for our website. With a defined structure to facilitate editing and design.

STEP 3:

In the "about me" section we insert our photo, in the "upload" button

STEP 4:

Then we can add some text. Go to Menu - Add blocks and elements - Text - Text

STEP 5:

We edit text of the website footer.

STEP 6:

For the student agreement, we added a block.

STEP 7:

In the Assignments page we added a block - Grid Repeater.

STEP 8:

Then we added some images in the background of each activity. We clicked on the image to select one.

STEP 9:

In the final project page we add some text and photos.





Cloning Fabcloud account from Gitlab 

This section will explain the synchronization of the fabcloud account in Gitlab for the cloning of our website through Visual Studio Code for version control.

A version control system (or VCS), also known as a revision or source control system, is a software tool that monitors and manages changes to a file system. There are some VCS available:

1) Git is one of the best version control tools available on the market today. It is a distributed repository model compatible with existing systems and protocols like HTTP, FTP, SSH and is capable of efficiently handling small to large projects.

2) CVS: is another very popular version control system. It is a client-server repository model where multiple developers can work on the same project in parallel. The CVS client will keep the working copy of the file up to date and requires manual intervention only when an edit conflict occurs.

3) Apache Subversion (SVN): Abbreviated as SVN, it aims to be the most suitable successor. It is a client-server repository model where directories are versioned along with copy, delete, move, and rename operations.

4) Mercurial is a distributed version control tool that is written in Python and intended for software developers. The operating systems it supports are similar to Unix, Windows, and macOS. It has high performance and scalability with advanced branching and merging capabilities and fully distributed collaborative development. In addition, it has an integrated web interface.

5) Monotone: It is written in C++ and is a tool for distributed version control. The supported operating system includes Unix, Linux, BSD, Mac OS X, and Windows. Provides good support for internationalization and localization. Furthermore, it uses a very efficient and robust custom protocol called Netsync.

STEP 1:

GIT:

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.

We downloaded and installed gitlab (https://git-scm.com/download/win) 

STEP 2:

STEP 2:

VSCodium, the closest alternative to VSCode This is an open source text editor based on VSCode but keeping all its virtues and offering compatibility with all its extensions so that we can have an experience similar to the Microsoft tool. All Microsoft telemetry and other tools like the C# code debugger have also been excluded, so we'll end up with a cleaner app. This excellent editor comes with built-in support for JavaScript, Git, TypeScript, and Node.js, and supports more than 100 programming languages. With it, we will be able to debug the code directly and it allows syntax highlighting. Through the use of plugins, we will have support for C++, Go, Java, C#, PHP, Python, etc. Its main drawback is that it has limitations at the level of updates. 

Sublime Text, complete text editing tool Another of the great alternatives to VSCode is Sublime Text, a software that has become one of the best options for editing text, especially suitable for programming, given its compatibility with a wide variety of languages. It has important features such as its ability to highlight code, skip strings or symbols, do splits, and define various syntaxes. 

This program has a total customization of the interface and includes 23 themes. Although it is an application that can be somewhat complex, it will increase our productivity once we master it. To help us, it has keyboard shortcuts and commands that will allow us to obtain significant savings during our programming tasks. Sublime Text is a free application, compatible with Windows, Linux, and macOS that we can download this program from its page. It also has a paid version, aimed at users who want to take full advantage of all its features. 

Atom, one of the most popular text editors It is a very popular tool among programming text editors. It is open source and free, being compatible with both Windows, macOS and Linux. It has been designed to be used by all types of users, although those with more advanced knowledge are the ones who will get the most out of it. This editor has compatibility with the most used programming languages such as JavaScript, C++, HTML and PHP among others. Its features include contextual autocompletion utilities, language autodetection and syntax highlighting. In addition, it allows you to use different panels simultaneously so it will be easier for us to organize our projects by folders.

VISUAL STUDIO CODE:

Visual Studio Code is a source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality.

We downloaded and installed visual studio code (https://code.visualstudio.com/download) 

STEP 3:

In gitlab app we type some commands to auth account (name and email)

STEP 4:

Clone visual studio code website account.  Enter my repository:
https://gitlab.fabcloud.org/academany/fabacademy/2022/labs/ucontinental/students/joseangel-palomares.git

And copy the https URL. 

STEP 5:

Then, in visual Studio Code, I clicked on CLONE GIT REPOSITORY.  Next, I indicate the folder where I am going to clone.


STEP 6:

On the left side of Visual Studio Code will appear my name which means it's already cloned. All my gitlab information is on my PC.






Update Synchronization

This section will explain the process of synchronization of the fabcloud account in Gitlab with our computer.

STEP 1:

We entered into the clone folder and deleted the DOCS folder contents.


STEP 2:

Go to nicepage and export the project in HTML format and save the HTML project with the name DOCS and in the path where the clone is located 

STEP 3:

Next, Synchronize my computer with visual studio code.  

STEP 4:

In left side we can see the icon SOURCE CONTROL with new changes. Click on message box and type a name then click on the check icon and commit.

STEP 5:

Then, click on Sync Changes.

STEP 6:

Type our credentials in the box. Then OK.

STEP 7:

To see the changes, refresh the webpage repository.

STEP 8:

When explore the folders and files and we can see the changes, for example in the index.html file.

Next, Assignment 02: Computer aided design