![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/disp/7e48188642003.560c0d8d681d9.png)
ARDUINO UI REDESIGN
This is a freetime project that I did for myself. I work a lot on electronics and Arduino Boards and circuits and what I noticed was that their UI is very old school so this is my re-design for the old GUI of Arduino software. Total overhal with new fonts and colors and a dark interface. Go on and have a look.
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/87b60c8642003.560c0dc88e6e5.png)
Old Design of the Arduino UI
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/65f6ca8642003.560c0da3b064a.jpg)
The basic interface of Arduino with dark colors and change of layout. The main thing to notice is the Arduino logo on the corner which is dynamic and changes states.
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/c777e38642003.560c0e092be22.jpg)
The way the programs are written have also changed with numbering on all lines to show the line the user is on. Also the colors and the font of the formatting has been changed so that it is easier for the user to write lines of codes without loosing track and also auto formatting.
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/disp/a2d4e68642003.560c0da36d016.jpg)
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/2e799f8642003.560c0d1975d23.jpg)
The Arduino logo has changed it colour to its active color. That states specifies that there is a Arduino Board attached to the USB of the computer and ready to UPLOAD data.
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/00d6fa8642003.560c0d1a93f5a.jpg)
The right button on the righ hand corner is to check and review the code written. If the code is correct then is shows the binary sketch size on the console window on the right.
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/fa84208642003.560c0d8c7ebcc.jpg)
On a Mac Screen
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/f131c78642003.560c0e080df1e.jpg)
The right button on the righ hand corner is to check and review the code written. If the code is incorrect then it shows the problem in the console window on the right as well as the state of the Arduino logo turns to Red.
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/751a3b8642003.560c0ddce55c6.jpg)
The three states of the software.
Left: Inactive - No board attached
Middle: Active - All ready
Right: Error - Error in Code while verifying
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/cf11a78642003.560c0d1a3cdff.jpg)
There is a upload button right next to the review button. It uploads the code to the attached Arduino Board to use. When pressed a window pops up to show the progress of upload.
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/disp/13dc758642003.560c0d9fe2c88.jpg)
The Uploading pop up screen
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/a9ba8a8642003.560c0dc5a8f91.jpg)
On a Mac Screen
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/9c465b8642003.560c0d8cce268.jpg)
The pop up window shows COMPLETE when the whole code has been uploaded into the attached Arduino Board.
![Arduino User Interaction codes hardware](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/9dfbd98642003.560c0e08cfa2e.jpg)
On a Mac Screen
This is a free time project of mine to see how I can change the look of an existing working UI. Thanks for watching and I want to how it looks. So please do comment.