Collabanno Progress Report

Written by: Rajen Tandel

This week, I worked through a section of the React Course and learned about using SASS within React. I also got PDF highlighting over multiple clients working. The user can now add highlights/annotations and have those changes reflected in other clients’ windows.

The PDF Component can render PDF files dynamically via a text box now. Currently there are two separate components/windows. The first being the PDF view itself. The second is the search box that selects the PDF to be opened in the viewer. While the application can open these PDFs, some URLs do not work at the moment due to some permissions. I still need to hook it up to Socket.IO after to have the selected PDF show up in all client pages.

The next step is to learn how to hook up React Router to allow the application to transition from component to component like pages on a website.

Progress Report — 5/22/2018

Written by: Rajen Tandel

I spent the majority of the day working through part of an online ReactJS course. I spent a little bit of time looking at how Socket.io and pdf.js work in React. Both have libraries within React to make the implementation easier.

I learned about React Components, properties and state.

Today, I plan to work through more of the course. After working through a good portion of the course, I plan on trying to implement the PDF Viewer Component of the project.

This week we have the working prototype due. At this point, it seems like an ambitious goal considering I am still trying to learn the front end framework. I am going to try to get a working prototype by Friday though.

Progress Report 5/17/2018

Written by: Rajen Tandel

I forgot to write this yesterday. We decided on using ReactJS for the Collabanno Application. I spent some time looking over the HighlightJS library and PDF Annotate. I found that PDF Annotate has more of the features needed for Collabanno, but lacks solid documentation. HighlightJS has fewer of the features but is well documented.

Today I plan to get through a few tutorials using React to gain an understanding of the framework. Then I will look into how Socket.io works within React.

Progress Report — 5/16/2018

Written by: Rajen Tandel

I attempted to implement a feature that allows synchronized scrolling. When the host is scrolling through the web page, the changes in the view will be reflected in all of the clients. This proved to be quite challenging. At the moment, I have the pages synchronized. Meaning when a user scrolls to a certain page number, the other windows also show that page number. When using scrollTop offsets, there is a ton of back and forth that makes all the windows jittery. For now, I have left it to only scroll based on page numbers.

The next step is to implement the annotation functions/features. I will start with highlighting. Basically add a button that will change the background color of the selected text.

Collaborative PDF Progress Report — 5/15/2018

Written by: Rajen Tandel

Today, I added functionality that allows the host to open a PDF file and have that same file open in all of the client’s windows. I thought the next step should be to find a way to have synchronized scrolling. As in, when the host is scrolling up and down the document, the same scrolling is reflected in each of the client’s windows. This proved to be really difficult. The way we decided to tackle this issue is by working directly with the PDF.js viewer files.

We ended up using the following functions:

PDFViewerApplication.store.get(‘scrollTop’).then(function (a) {console.log(a);})

This function logs the distance the scroll is from the top of the page. This is useful because it allows the host to pass along this value to the other clients and scroll the other pages accordingly.

PDFViewerApplication.store.get('page').then(function (a) {console.log(a);})

This function returns the page that is currently under the hash. This means that this will return the same page value until the hash/scrollTop reaches 0, or the bottom of the page.

Now that we have these functions. All we need to do is emit a signal when the host is scrolling, the signal will contain the hash/scrollTop and the page that the host is currently on. Then the signal will be sent to every client and each client will jump, or scroll, to that portion of the document.

To Do Tomorrow:

  1. Implement the signal to allow for shared scrolling.
  2. Once that is done using the viewer’s current code, try to implement it without the existing code.

Collaborative PDF Progress Report — 5/14/2018

Written by: Rajen Tandel

I learned about socket.io and pdf.js today. I worked through the “Getting Started” section of the socket.io website. It provides a tutorial for creating a messaging application that updates in real time. After completing the Socket tutorial, I went on to figure out how pdf.js displays PDF files in web browsers.

The messaging application provides a good overview of how sockets work in Socket.io. The professor suggested using this messaging application as a sandbox for the initial prototype of the Collaborative PDF application. I altered the messaging application so that when a user sends a message, the browser jumps to the url based on the message. I didn’t include any error handling yet so it obviously crashes when the user provides an invalid url. This worked in displaying even local pdf files (after messing with Express settings).

To do Tomorrow

  1. Instead of appending a list item to the messages list. Make it so that submitting the form causes the socket to emit a command that will have all of the clients open the specified pdf file.
  2. Figure out how highlight.js works. Get it working on a local pdf file to begin with. Then try incorporating this with Step 1.

New Tools

Written by: layoutinstructor

In the past week or so, I’ve been experimenting with different editors for the multiple languages that I’ve been learning over the last few months. I’ve been working with a lot of Python for different projects in school and small projects on my own time. It’s one of my favorite languages, but I always felt as though the default editor (IDLE) was fairly barebones in terms of features after coming from editing Java in Eclipse and seeing all the different features it provided for the user. I then discovered, through word of one of my professors, Visual Studio Code. I am now switching to this editor full-time for Python, HTML, CSS, and hopefully Java eventually. I find that it is much more feature-rich than basic text editors and IDLE. I also really like the integration with Windows’ command line and the integrated terminal inside the app.

Aside from using different editors for all different languages, I also do a fair amount of text editing, especially considering that I made a fairly recent update to my Type Instructor that reads from a .txt file rather than hard-coded exercises. For editing random text files, I used to use Notepad++, which served me very well for the purposes I used it for, but then I realized that I could just use Visual Studio Code for that as well, and the few items I have edited in there have really worked out for me.

I’m hoping to bring my workflow completely to Visual Studio Code and use it as my full-time “Swiss Army Knife” editor for everything, including Java.

First Steps

Written by: layoutinstructor

Since my last post I have made quite a bit of progress in regards to both my knowledge and progress on this project. Since the end of last year, I have gained much more experience in Java, while also learning Python, HTML, and a good amount of CSS. I have begun programming smaller applications in Python that I use for different daily calculations and small text-based games. These are mostly to help cement my knowledge of python and help me to learn even more. I have built a few small web pages, none of which have been fairly basic and I have left them unpublished.

The main thing I have done since last year is that I have started working on the actual typing instructor program. In its current state, the instructor is only programmed to teach the home row, but in the next few weeks I plan to finish up the alphanumeric keys so that someone that uses it will be able to learn how to type pretty much anything they would need to with little or no problem.

After I’m done writing the program needed to do the basics of typing, I plan to move on to use-case applications, like teaching a Java programmer the shortcuts they may need for their line of work, so they can learn these and know them by heart, rather than having to look at the keyboard every time they want to comment out a block of code. I plan to write this piece of the program for at least Java, if not Python as well.

Along with the language-oriented piece of my program, I will also add a menu to help a person pick up where they may have left off or to pick which language’s shortcuts they’d like to learn. This will also help to consolidate the system of running the instructor so that it can be ready for GUI and possibly web-based integration.

Progress on this project can be followed over at: https://github.com/channing173/Type-Instructor

Going Forward

Written by: layoutinstructor

As I move on in this project, I plan to keep investigating the different tutor sites that I have looked at in my previous post as well as keep going in learning the different programming languages needed for this program to function.

Things have started out slow, but I have been investigating more and more typing instructors throughout the past couple of months, getting a feel for how they function and what makes them accurate in how they teach a person to type on the standard QWERTY layout. Something that has also interested me in looking at these different instructors is what they are teaching you to type, whether it be a paragraph of nonsense, some random words, or for sites like typingcat, something that actually relates to your profession, much like what we are trying to do here.

I have also been slowly but surely moving forward in Codecadamy, finishing up the last couple of exercises before I move on to HTML5 and some more tedious languages like Javascript. This means that I should be able to investigate the actual programming that goes into typing tutor sites and figure out how to implement some of those strategies into my own personal work.

Last but certainly not least, I have been crudely sketching out some of my ideas for a GUI of sorts that could be used to represent the typing tutor we are trying to produce. The design I’m trying to work towards is fairly simple, but I think that a simpler design could make the program easier to navigate for someone newer to computers and doesn’t want to go through the hassle of trying to figure out a complicated program just to learn something like typing, which is one of the main audiences for the instructor. The last step of the process will of course be to implement my programming knowledge and build the program around this GUI so that it works as I have imagined it here, but that is much farther away, as I am only now learning the basics.

Typing Instructors and Python

Written by: layoutinstructor

In the last two weeks, I must admit I haven’t made as much progress as I would’ve hoped for. I had a couple of midterms that I needed to study for, as well as a research paper that I’m currently working on as well. Even though I haven’t had too much time the last couple of weeks, I plan to double up and buckle down to get done what I need to in the next couple of weeks.

That’s not to say I haven’t done anything. I’ve been chugging along through the Python course in Codeacademy, in hopes that I will be able to expand my knowledge of programming languages and use it to create the type instructor, the main goal of this project. After I’ve completed the course in Python, I plan to move on to HTML and get that done by the next time I post. That way, I will have a couple of new languages down and can get some harder ones done from then on.

Over the past few weeks, I have also been using and analyzing different typing instructors and testers to see what they have to offer, and maybe to get some ideas of my own going forward. I have been investigating the design of the instructor, as well as seeing what kinds of features they may have to offer that could overlap with what we’re doing. This could definitely help give a point of reference for the new instructor based on the others already out there.

After going through about ten different instructors and testers, I started to notice a heavy trend throughout. Most of these have a fairly simple user interface, with a large block of text for the user to type, and a box below it to type in. Most of the testers have a clock to show the user how long they have left to complete the section as well. One other thing that was present in just about every program was that the text was highlighted in some way to show you what word or letter you were on in the section so you wouldn’t lose track.

One thing that I found incredibly interesting was the fact that one of the sites, typingcat, had a section specifically aimed towards different professions and languages. They also had different sections in the curriculum based on what you thought you needed to learn.

After looking at all of these different types of programs, I plan to move forward and start to sketch my own rendition of a typing instructor for our particular case scenario. This should help to form the basis of what the final product will look and feel like for the user, and combined with my new knowledge of programming, I can work towards making it into a reality.