Arduino Simulator [1] Day 32



I love electronics, I’ve dabbled a bit in it before. However it’s been a while since I last played around with any, and I miss it. That is why I chose to do a simulator. Partially because I miss it, and the other part is because I have no idea How I’ll do it [a challenge is approaching][jeez I am lame]

So I decided to do the design first [maybe because that I know how to do]. All this time I’ve been using illustrator to do any vector art. This time, I want to use something different so I chose Sketch [a lot of people have been using it for mobile UI so might I as well try it for myself]. [Note: I’ve been told to add more progress pictures thus I oblige 🙂 ] I started off with the Arduino board and here are the images that show the progress from start to finish



Man, that took a while… I’m just happy that it doesn’t contain complex shapes [because I’m no artist yo] I then moved on to doing the breadboard



The board was much easier than the microcontroller. Now it’s time to add the resistors. I started off with designing one

and then multiplied them

Now move on to the diodes [also known as LEDs] same approach designed one

Then multiplied them

Brilliant. Now, I need to wire them together

At this point, I started getting bored. I think my head was running with ideas on how to get it to work that the design part started to get a tad annoying. None the less, wired everything together! And this is how it looks like.

Okay, now I move on to actually designing the site itself. I started off with the basic layering. The idea is having the Arduino on one side and the IDE on the other so that when the user writes the sketch and runs it, the Arduino would respond. I started testing the responsiveness of the site. Because I want the mobile view to look different. It sorta works as you can see.

But I’m still not liking the alignment.

Brilliant! Now the responsiveness is working as I would want it to. Now, I move on to designing the IDE. As with the Arduino, this was a process… [especially that it’s all CSS] here are the images that show the process

Adding some interaction for when the user wants to click [to run the sketch]

[back to uploading the progress]

Having the IDE responsive to make sure all elements align properly and don’t break when it’s mobile view

[back to progress]

And at this point, I reached exhaustion. That is why I decided to split this project into two parts. 1 [which is this one] being the design part, while the next one [tomorrow] would be the actual functionality. However, thus far this is how the site looks like

You can check it out on my site here.

I’d love it if you guys share your feedback with me or your projects. I’d love to check them out. Umm, I guess that is it for today, until tomorrow happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *