After the UI and basic things were added, I started to work on some functions. It had one basic function which was just converting binary to colors but I started adding functions to make the binary numbers move left. After this I realized that it might be difficult for a user to individually go in and press all the buttons to clear them so I added a function to clear all the binary numbers. In addition to this, I also did a lot of debugging, for example: the color shown on the screen started inverted from the actual binary code but I went in and fixed it by initializing the binary numbers and making sure the screen is updating when it needs to.
What I learned
Bit Manipulation:
The application focuses on manipulating and displaying binary values, representing them as bits. It allows users to toggle individual bits, add or subtract values, invert bits, and rotate bits left.
Color Manipulation:
The code includes functionality to represent binary values as RGB colors. It updates the color display, RGB values, and a color picker based on the binary input.
ASCII Character Display:
The application translates the binary input into ASCII characters, displaying the corresponding character if printable, or indicating if it's a non-printable character.
Background Manipulation:
Users can toggle a background GIF on and off, demonstrating how JavaScript can manipulate the appearance of the entire webpage.
Input Validation:
There is some input validation, such as handling invalid hex color codes and non-printable ASCII characters, enhancing the user experience.
Understanding Binary Operations:
The code provides practical examples of how to perform common binary operations, such as inverting bits and rotating bits left.
What I could have done if I had more time:
I could have added more features that didn't relate to simply updating the array of binary numbers. An example of this is the opacity slider that or the color picker was added by my teammates. In addition we were planning to add a color book feature where you could choose a pixel and color it with the color chosen using the binary code.
What I did:
During this project, I was supposed to add a color picker that people can manually change. I was also in charge of adding images and functionality to the images. Toward the end, I helped find out some of the things within the website to get better code.
Buttons and images:
I added a feature where a line of the button displays an on and off button and a light that turns on or off depending on what button is being shown, either on or off. I also added a moving image to the back of the website to make the page less boring. I encountered a problem when doing this code: the on and off buttons weren't working. It would only show the on button and not change to off. I was able to fix the functionality to complete this code.
Color picker:
I added a color picker that was underneath the main color display. The purpose of this color picker was for the user to manually change the color of the main color display to the color of their liking. This is because finding a color you want using binary is hard. When changing this color picker, it would change the binary numbers to match the same color. A problem faced in this project was that the color picker wasn't updating the color display immediately, which meant it had a delay. I was able to fix this by adding another function that made sure to update all pieces of code.
Hex color display:
This code was very short and took the binary numbers being changed and converted them into hexadecimal form.
First Commit of the Project
https://github.com/ninaadkiran/tinga2/commit/a053bd378d46007247ef135cbc831835e5a9e9c3
Color Displays after calling binary code
https://github.com/ninaadkiran/tinga2/commit/01efcba3c7674ba5ac090b1bd1cdeb726085b05f
Display of RGB values
https://github.com/ninaadkiran/tinga2/commit/b54417e199d954d0066cffa5011d89011415b0c4
Backend:
The First Commit:
I first copied this from the teacher because we knew that we wanted to use something similar to call the binary from. We cahnged it a lot later to make it original and got rid of a lot features from it that we didn't need. The code generates an HTML table with a dynamic number of columns based on the value of the constant BITS. Inside the table, there are two rows. The first row contains images of bulbs and buttons, and the second row has input fields for displaying binary digits. The JavaScript section initializes constants such as BITS, MAX, MSG_ON, IMAGE_ON, MSG_OFF, and IMAGE_OFF. Several functions are defined, including getBits to retrieve the current binary representation, setConversions to update various conversions of the binary value, decimal_2_base for converting decimal to binary, and toggleBit for toggling individual bits and updating the display accordingly. There's also an add function for performing addition and subtraction on the binary representation. The script enables dynamic interaction with the binary display, allowing users to toggle bits, perform arithmetic operations, and view conversions in different number bases.
Color Display:
updateColorDisplay, is designed to update a color display based on binary input. It first retrieves a binary representation of a color through the getBits function. The binary string is then divided into three parts (representing red, green, and blue components) and converted to decimal values. The function also fetches the opacity from an HTML slider. The color display's background is then set using these RGB values and opacity. Additionally, the function updates the hexadecimal color code, RGB values, and a set of buttons based on the binary representation. The buttons and corresponding images are toggled between 'on' and 'off' states depending on whether the binary digit is 1 or 0. Overall, this function dynamically updates a color display along with additional information based on binary input and user interactions.
RGB Display:
It defines a constant BITS and calculates the maximum decimal value (MAX) that can be represented with the specified number of bits. The updateColorDisplay function reads a binary string and converts its substrings into decimal values for red, green, and blue components. The RGB values are then used to set the background color of an HTML element representing a color display. Additionally, the function updates the inner HTML of elements corresponding to the red, green, and blue values. The code also includes a comment mentioning that the Liquid for loop includes the last number, and it seems to indicate a consideration for handling binary inversion with the invertBits function, though the actual implementation of this function is not provided in the snippet. Overall, the code appears to be part of a web application that dynamically updates a color display and associated information based on binary input.
Front end:
Red: 0
Green: 0
Blue: 0
shows the green, red, and blue
"\n",
"\n",
"\n",
" \n",
" \n",
" RGB Color Picker\n",
"
Ninaad
What I did:
After the UI and basic things were added, I started to work on some functions. It had one basic function which was just converting binary to colors but I started adding functions to make the binary numbers move left. After this I realized that it might be difficult for a user to individually go in and press all the buttons to clear them so I added a function to clear all the binary numbers. In addition to this, I also did a lot of debugging, for example: the color shown on the screen started inverted from the actual binary code but I went in and fixed it by initializing the binary numbers and making sure the screen is updating when it needs to.
What I learned
Bit Manipulation:
Color Manipulation:
ASCII Character Display:
Background Manipulation:
Input Validation:
Understanding Binary Operations:
What I could have done if I had more time:
I could have added more features that didn't relate to simply updating the array of binary numbers. An example of this is the opacity slider that or the color picker was added by my teammates. In addition we were planning to add a color book feature where you could choose a pixel and color it with the color chosen using the binary code.
Key Commits:
Josh
What I did: During this project, I was supposed to add a color picker that people can manually change. I was also in charge of adding images and functionality to the images. Toward the end, I helped find out some of the things within the website to get better code.
Buttons and images: I added a feature where a line of the button displays an on and off button and a light that turns on or off depending on what button is being shown, either on or off. I also added a moving image to the back of the website to make the page less boring. I encountered a problem when doing this code: the on and off buttons weren't working. It would only show the on button and not change to off. I was able to fix the functionality to complete this code.
Color picker: I added a color picker that was underneath the main color display. The purpose of this color picker was for the user to manually change the color of the main color display to the color of their liking. This is because finding a color you want using binary is hard. When changing this color picker, it would change the binary numbers to match the same color. A problem faced in this project was that the color picker wasn't updating the color display immediately, which meant it had a delay. I was able to fix this by adding another function that made sure to update all pieces of code.
Hex color display: This code was very short and took the binary numbers being changed and converted them into hexadecimal form.
Key Commits: Color picker button function Hexidecimal
Daniel
Key Commits:
First Commit of the Project https://github.com/ninaadkiran/tinga2/commit/a053bd378d46007247ef135cbc831835e5a9e9c3 Color Displays after calling binary code https://github.com/ninaadkiran/tinga2/commit/01efcba3c7674ba5ac090b1bd1cdeb726085b05f Display of RGB values https://github.com/ninaadkiran/tinga2/commit/b54417e199d954d0066cffa5011d89011415b0c4 Backend: The First Commit: I first copied this from the teacher because we knew that we wanted to use something similar to call the binary from. We cahnged it a lot later to make it original and got rid of a lot features from it that we didn't need. The code generates an HTML table with a dynamic number of columns based on the value of the constant BITS. Inside the table, there are two rows. The first row contains images of bulbs and buttons, and the second row has input fields for displaying binary digits. The JavaScript section initializes constants such as BITS, MAX, MSG_ON, IMAGE_ON, MSG_OFF, and IMAGE_OFF. Several functions are defined, including getBits to retrieve the current binary representation, setConversions to update various conversions of the binary value, decimal_2_base for converting decimal to binary, and toggleBit for toggling individual bits and updating the display accordingly. There's also an add function for performing addition and subtraction on the binary representation. The script enables dynamic interaction with the binary display, allowing users to toggle bits, perform arithmetic operations, and view conversions in different number bases. Color Display: updateColorDisplay, is designed to update a color display based on binary input. It first retrieves a binary representation of a color through the getBits function. The binary string is then divided into three parts (representing red, green, and blue components) and converted to decimal values. The function also fetches the opacity from an HTML slider. The color display's background is then set using these RGB values and opacity. Additionally, the function updates the hexadecimal color code, RGB values, and a set of buttons based on the binary representation. The buttons and corresponding images are toggled between 'on' and 'off' states depending on whether the binary digit is 1 or 0. Overall, this function dynamically updates a color display along with additional information based on binary input and user interactions. RGB Display: It defines a constant BITS and calculates the maximum decimal value (MAX) that can be represented with the specified number of bits. The updateColorDisplay function reads a binary string and converts its substrings into decimal values for red, green, and blue components. The RGB values are then used to set the background color of an HTML element representing a color display. Additionally, the function updates the inner HTML of elements corresponding to the red, green, and blue values. The code also includes a comment mentioning that the Liquid for loop includes the last number, and it seems to indicate a consideration for handling binary inversion with the invertBits function, though the actual implementation of this function is not provided in the snippet. Overall, the code appears to be part of a web application that dynamically updates a color display and associated information based on binary input.
Front end:
Red: 0 Green: 0 Blue: 0