Arduino Simulator [2] Day 33



This post continues on yesterdays project [if you want to check it out, click here] Now that I have the design sorta working together nicely, I’ll start working on the IDE. [Pre warning this post is filled with script discussion]

My first step was to work on the info and blink sketch tabs. I want the style to change as well as the display based on which tab is selected. So I made a function that handles that and lord and beholds I have it working

I also forgot to fix the bottom console [which I will use to display messages to the user if they have anything wrong with their code or if it’s working]

okay great. Now I want to set up the lights for animation. I decided to have a container with circles that will trigger based on what the user writes. I started off by positioning the container [and here I thought my design stage was over… boy was I wrong]

I added borders so I can see if I positioned stuff right [thats how I work I’m sure people have a better approach mine is this way]. I then tested it’s position based on different resolutions and well…



As you can see, it’s not really working according to plan. So I start messing around with the position to get it to work the way I want and

I got the alignment of the container to work the way I want it to. but now the positioning with the IDE is all messed up. So back to the CSS again we go

Okay, we’re getting there. Now I want to have the light diodes container and here’s me working on them



Okay, lets test responsiveness

Darn it! I’ll fix that later, for now, I want to start working on the animation of the light. I started off by playing with the opacity

I showed this to my sister [’Adwa’ aka the designer sister] and she was like “umm what am I looking at?” and I was like “don’t you see it?” “see what?” “the blinking?!” “I don’t see nothing…”. So based on the user feedback [’Adwa’] I try to work with the opacity a bit more

umm it still looks iffy.. so I try some more

sorta looks better… At this point, I was wishing that coding was as easy as animation in photoshop. I started getting frustrated and decided to move on and work on the IDE and come back later to fix the lights.

I started by setting up the default functions

now I need a place for the user to write their code. and for that, I used a text area. good design principle has you having your code in an external file and here I go testing the hight of the text area

and that shit isn’t working. I even tried the !important attribute still. So [please don’t judge me] I opted for bad design and used inline style and it worked

Thus far this is how my IDE looks like

At this point, I realized how long of a ride I still have to go. Anyways [I think this post will have poorly structured sentences and for that I am sorry]

I decided to handle the first error which is when both functions are empty. easy start.

Alrighty, I started off with the setup function. Now I’ll be doing tons of string manipulation so helpful resources I used here are

In any Arduino set up the function you need a pinMode for setting up the output and here is what I was checking for. I checked if the setup includes such a function

As you can see I misspelled it and it gave me a false value. and here’s when I got it right

Now, that I know the statuses, I want the console to work based on specific values. As in, it displays the proper message to the user if they messed up the pinMode function or output or port number

awesome! Now thus far, I’ve been checking for a single line of code. I want to test multiple lines I first checked the value I’ve been getting by alerting it. This helped me know what I want to split the string.  So, I start splitting the string to have the different lines of code to check individually. I logged the array to the console to make sure I’m getting the right values [always debug your code people]

awesome. Now I work on testing them each to display the right error message and…

I now have the console working based on the setup function. Whew I’m kinda tired now… But still, we have our work cut out for us. I still have to check out the number ports because testing numbers with strings in a range don’t really work. So I start off by grabbing the port number. [I test this by alert]

Okay fantastic, now grabbing the array of ports

Okay, I now move on to my loop function. The same with setup I had to check for certain functions such as digitalWrite and HIGH and LOW. all went well until I ran into an error with the high and low which made it kinda work iffy

The only work when both are either HIGH or LOW, but I don’t want that. I want to work if either it’s high or low not both. I kept debugging. and finally figured out the error was in my function I  fixed the issue and now all is well

My gosh, we still haven’t even reached the point where we animate the light…

I decided to work on more error handling later and move on to animating the light based on the code. I had the code working well. A helpful resource was

I went back now to fixing the light animation. This point I decided to also play around with the size. So I thought both size and opacity would work [maybe]

ummm… I wish that there was a way to change the anchor point to have it scale based on the center rather than the top left. I started messing around with transform-origin

As you can see the code runs based on the pins in the code but… still, the anchor isn’t moving. I try some more

Nope. Nope. Nope. I started getting seriously angry now. But then a light bulb moment happened. Wait a minute. I spent hours yesterday working on this vector image and Athoug you idiot. It’s an SVG image!!! freakin work with it. so I did.

Okay now I’m a bit happy with how it looks like [compared to what it looked like before]

Now, let’s see if it works with the script

I start working with the animation frames and this is what I have thus far

Man, that was a hassle! You can check out today’s code here. I still have loads to do to have this work properly to witch it will have a part 3. I’m grateful to have you stick around this far if you actually read the post.

It would be helpful if you tested it and send me your errors so I can work on it tomorrow. I still have to work more on the animation, function handling for the delay and high and low, and much more. Btw what do you guess think of it this far? I’m loving it! Now how it looks [though I think it looks pretty awesome] but now I’m starting to think and the way I’m handling this project. Okay, I’ll stop blabbering, see you tomorrow and 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 *