In my last week of working on my CS-343 final project, I was focused on implementing the remaining features that I had planned to add in my original wireframe. This included creating a working puzzle game that the player could customize and developing my layout further to make it more appealing. While I was able to create a puzzle game and clean up my layout a little, I was unable to get everything to work the way I intended before I presented the project on Friday. My final version of my project, and the one that I presented, looks like this:

As you can see, I was able to create a simple grid-based puzzle game, which was my plan from the beginning. While working on my layout and data service over the past week, I finally came up with an idea for a basic game I would be able to implement in time for the presentation. I decided to use a puzzle I have seen before, in which the player interacts with tiles on a grid to change their color as well as the color of all adjacent tiles. The goal of the puzzle is to make all tiles the same color within the time limit. I was able to create a new Angular component to represent my tiles that alternate between gray and white when clicked. However, my attempts to make them change the colors of adjacent tiles let to many issues. I had the puzzle working in this way temporarily, but it would stop behaving correctly after the player reset the puzzle for the first time. I think this had something to do with how I was recreating my array of tiles in TypeScript and how that interacted with the HTML files. Clearly, I am still not an expert in TypeScript or HTML, even after a month of working on this project. Since I couldn’t get the puzzle to work the way I wanted, I ended up settling for a game where only the tile that was clicked would change colors. This makes the puzzle extremely easy, but at least it works consistently.

Aside from my troubles with the game mechanics, the rest of the development went pretty well. I was able to change the behavior of my width and height forms to alter the dimensions of the puzzle in tiles instead of the dimensions of a rectangle in pixels. I was also able to implement a timer that could have its time limit customized as well. If this timer runs out, a message displays saying that the game is lost. If all tiles are made white within the time limit, a victory message displays and the timer stops. You can see the application in action in the following screenshots:

Overall, I found this project to be an enjoyable experience that taught me a lot about creating web applications using the Angular framework. It not only taught me how to work with TypeScript, HTML, and CSS, but it also helped me figure out how to create GUI layouts in HTML using <mat-grid-list> and how to pass data between components using a data service. While my difficulties getting the game to work correctly prevented me from implementing everything I wanted to, such as a more appealing GUI or a back-end server to save player scores, I think the experience will definitely help me write better single-page applications in the future.

From the blog CS@Worcester – Computer Science with Kyle Q by kylequad and used with permission of the author. All other rights reserved by the author.

So, we finished The project and it remained mostly the same though the process. The biggest change was that at first one of the processors was going to be running shortest time remaining process scheduling rather than both of them being round robin. Very late in the process after everything but the process manager was written we decided to remove the second processor. So we only had one processor running with round robin. Neither one of us could figure out how to make the algorithm not let both processors work on the same instruction. Other than that, everything else was the same.

There were a few parts of the project that were difficult. First of all just figuring out the overall design was fairly difficult. Although doing a UML was a big help with that. What we ended up deciding that the tables would all be collections of another class. The next part that was difficult was figuring out the data structure for the job and block list. At first we thought we would use an arraylist as the structure but that there was then to find anything the managers would have to run through the entire list. Next we thought what about a map but regular maps are not ordered so the order the jobs went in would remain so we tried a linked list map but this didn’t work because there is no way to get the next or last element in the linked list map. The one we tried that worked was a tree map since tree map are sorted and have methods to get the next and last element in the map. The hardest part by far however was coding the method to run the processors it went through four or five rewrites in the end we managed to get it though.

There were a few important things we learned doing this project. First of all we learned how the different tables interact with the managers and how complicated that interaction is. We also learned how big of a help making a plan for a project is to figure out how to do it. In this case we did it using a UML. We also learned a lot about the different steps each manager has to do. Overall we both really enjoyed the project and learned a lot from it.

There we several things we would do differently or add if we had time. First of all we would figure out how to do the two processors. In addition to that we would have liked to add the job table to the display. The most complicated thing we would have liked to add is an option to select a different operating system configuration. Such as an option for dynamic memory allocation or a paging system. On the processor side we would have liked to add an option to select a number of processors and be able to pick what type of scheduling each processor did. Those are the only things we can think of though.

This is a picture of the full UML

This is a picture of the Application

From the blog CS@Worcester – Tim&#039;s WebSite by therbsty and used with permission of the author. All other rights reserved by the author.

From the blog CS@Worcester – Tim’s Blog by therbsty and used with permission of the author. All other rights reserved by the author.

hi guys, so for a our final project my group all decided to make an angular application, the application is called Simulated Operating System it runs on spring boot rest api server. Our application acts like a real example of what a real one would. It will be written to simulate the process and the memory managers.

An operating system is software that manages the hardware with managers, so that the computer. is able to run. They are very important because without them the computers can not operate. It is also important to understand how they work so that you can write more efficient code.

We picked this project topic because Visual aids are important for teaching and understand theories and attaining knowledge. When we thought about creating the application, we thought about how it would give a better understanding about how operating systems work. In other words, it is more of a practical method for students to learn and understand how a computer’s operating system and managers work.

Our application acts like a real example of what a real operating system and process in the memory managers would do. The programs will be organized into a rest back end and an angular front end.

The angular app is the user interface and has a table to enter the jobs which are strings and it also has a table for the main memory which is 100 addresses long and contains strings. It has 4 buttons, the first one to clear the input table the second one to update the screen. Third one for loading the job into memory the last one for running the instructions on the processor. The memory manager will have fixed partition layout with blocks of sizes  5,10,15,20,25,25 it will also uses best fit job placement. The process manager will have one processor running round robin scheduling with a time quantum of 4.

The back end will use five endpoints the memory manager controller has 3 and the process manager controller has 2. The memory manager controllers first endpoint is  a post called /memorymanager/newjob which creates a new job using a body for the instructions and then load it into memory. The memory manager controllers second endpoint is a get called /memorymanager/getmemorytable which returns the memory table. The memory manager controllers third endpoint is a get called /memorymanager/getoutput which returns the output. The process manager controllers first endpoint is a put called /processmanager/run which runs the processor once. The process manager controllers second endpoint is a put called /processmanager/getoutput which returns the output.

The simulated OS itself is setup with 3 tables block, memory and job. The block table is a tree map of block objects with start and end index as well as size and status. The memory table is just an array of strings. The job table is a tree map of jobs with a block id for the job a8nd a deque of instructions. The OS has all these tables exist in a database class. It also has the two managers job and process which operate on the database tables.

From the blog CS@Worcester – Tim&#039;s WebSite by therbsty and used with permission of the author. All other rights reserved by the author.

From the blog CS@Worcester – Tim’s Blog by therbsty and used with permission of the author. All other rights reserved by the author.

hi again, so after leaning how to use angular the next i learned about was how make rest api call on it. which i would need for my project i am about to start.

From the blog CS@Worcester – Tim&#039;s WebSite by therbsty and used with permission of the author. All other rights reserved by the author.

From the blog CS@Worcester – Tim’s Blog by therbsty and used with permission of the author. All other rights reserved by the author.

hi all, so for my software construction class i have a leaned about angular apps. first i had to install the angular/cli with nodejs. then create a new project and learn about HTML, CSS since i had no experience with it. Angular is a web development platform that using typescript and HTML and CSS for client side wen applications .it was released in 2010 when it was know as angularJS. it was initially made for single-page applications.

angular has many good things about it such as very detailed documentation. its also supported by google meaning that its trustworthy and will be better supported for longer. it is also an amazing ecosystem for third part components. it also using a component based architecture making different components mesh together very well. it also using an ahead of time compiler which makes web pages load and run much faster in addition to be more secure. it also uses CLI which makes creating new projects much simpler and faster. angular elements also lets you add custom elements to app build with other things. another great feature is the ivy renderer. other good things are angular material, dependency injection and angular universal.

angular does however have some disadvantages. First of all it can be some what hard to learn at first. this is because it is fairly complex and it also require you to learn typescript and manage dependencies between components. it also has issues with SEO because of how it is done. lastly it has a lot of difficulties with backwards compatibility i found this out on my project since everything a lot of the stuff i was searching for gave me results for a different version of angular than i was using and it didn’t work for me.

overall though i think angular is a very useful tool.

https://yalantis.com/blog/when-to-use-angular/

From the blog CS@Worcester – Tim&#039;s WebSite by therbsty and used with permission of the author. All other rights reserved by the author.

From the blog CS@Worcester – Tim’s Blog by therbsty and used with permission of the author. All other rights reserved by the author.

With CS 343’s final presentation tomorrow, this will be the last post for this project. (Unless I choose to keep playing around with it later) The work on this project has really helped me learn HTML, CSS, and TS.

The newest feature I added to my Pokedex SPA was having the background colors linked to the selected pokemon’s typing.

This took a bit a time, figuring out how to dynamically link the HTML background color to the TS pokemon data. I eventually found the use of angular’s [ngStyle] to be very useful. This method injects a JSON object with CSS properties defined in it. With it, I simply used a method in the TS to grab the pokemon’s typing and return a created JSON object with the CSS property ‘background’ with either a solid color for single typing or a gradient for dual typing.

This project was a lot of fun and I’ve learned a lot. I am tentatively looking forward to tomorrow’s presentations.

From the blog CS@Worcester – D’s Comp Sci Blog by dlivengood and used with permission of the author. All other rights reserved by the author.