Digital-logic circuitry forms the foundation of almost every modern device we use today. From laptops to calculators to fridges, the brains of our world are powered by digital circuitry.

Unfortunately, the barrier of entry to learning is incredibly high. If you want to learn about digital logic, you have two options:

1) Watch a lecture - While there are many wonderful professors out there, most digital logic classes require a very high amount of prerequisite knowledge. On top of that, these classes are usually taught by drawing static diagrams on the board and the professor explaining truth tables of logic gates and circuits. For kids and other beginners, this is very hard to follow and not very intuitive.

2) Experiment with circuit simulators - If students could start right off by experimenting with actual circuits, they could build up the intuition required to understand these concepts. However, the lack of formal lesson structure combined with extremely complex and unintuitive user interfaces causes these tools to be very difficult to use without prior understanding of the material.

Because of this, most people never get the chance to learn how the circuits that run our lives actually work. In fact, even many programmers don't really understand how the CPUs in their machines execute the commands they provide. For students or children who are disadvantaged or have less access to resources, educational resources on these concepts can be almost impossible to reach.

Logic Learner aims to change that.

What it does

Logic learner is an educational tool that teaches students or kids concepts about digital logic circuitry in an intuitive, tactile, and accessible way!

What that means, in practice, is that we have an app which teaches students. The app is arranged in a linear set of lessons ranging from simple power sources to full adders (circuits that add numbers together in hardware), latches/flip-flops (computer memory), and more! Each lesson provides an explanation of one, focused new concept or new logic gates. The app also contains challenges the student can solve with the knowledge given by the previously solved lessons.

Now, here's the fun part: Instead of having to learn a complicated circuitry simulation software or learning by staring at boring, unintuitive logic tables, we have a unique method of education. The student simply draws their circuit on paper in marker and points their camera at it. The app then scans the document and the circuit on it and simulates the hand-drawn circuit before projecting it back onto the paper on the camera screen! Students can easily and intuitively interact with the circuit by tapping or clicking power sources/switches to turn the power on or off, allowing them full control to experiment with their circuit.

Our app then analyzes whether the circuit solves the lesson. If so, it moves on to the next lesson.

While our app won't teach you how to build a CPU from scratch, it will give you all the tools and foundational knowledge you need to continue learning on your own!

How we built it

The app itself is a WPF application. The design and UI/UX of the app was designed through a combination of drawing it out on a whiteboard and mocking it up on Figma. Once that was completed, the design was then converted to XAML and connected through WPF's frontend library.

The circuitry simulation and document detection aspect was built using Wireform and WireformSketch, two circuit simulation and computer vision libraries built previously by one of our team members using OpenCv.

We built a layer on top of these libraries that performs circuit equivalence analysis to check whether or not the student's circuit matches the intended solution. We also built a transformation matrix that transforms clicks/touches on the app's screen to points on the real world circuit which allows the user to tap individual circuit elements on their screen to interact with them.

We then designed and wrote each lesson and loaded them into the application.

Challenges we ran into

One of the most significant technical challenges we ran into was the lack of support for EmguCv (A C# wrapper of OpenCv which runs all of WireFormSketch's computer vision code) on Xamarin, our original platform of choice. After debugging and experimenting for hours, we discovered that the Android/IOS version required an expensive commercial license for EmguCv, so we migrated the project over to WPF.

Another challenge we ran into was design. When designing an educational application whose target audience includes children, it is very important to have simple, intuitive UX choices. As such, we went through multiple iterations of design in Figma to discover the simplest, most visual solutions to our design goals.

Accomplishments that we're proud of

One of the hardest parts of this project was designing the lessons. Digital Logic is hard. It's abstract and very conceptual, so hooking it in to intuitive understanding through lessons is quite difficult. However, our team experimented with different lesson formats to discover the best way to teach these concepts in a way that is understandable by students, kids, and other beginners. We landed on our final approach: Focus on one, simple concept at a time. Using this model as a framework for our lessons, we were able to reach fairly complex topics in a very intuitive and easy to follow way.

Similarly, our team is very proud of the impact our project can have. We deeply believe in the value of education, and are proud to have created a tool which increases the accessibility of a very important field of science. As such, accessibility and intuitiveness were major design goals of our project. Because all that is required is a device, a camera, and paper/pens, our lessons are very accessible for anyone, regardless of background or experience!

What we learned

Because this was the first hackathon for many of us, we learned a lot about working under pressure, team organization, and collaborative development. We're very proud of our teamwork this weekend. With all of us living in different places and only being able to connect over zoom, structure and organization were incredibly important. From creating a 10+ page design doc overnight to even distribution and divide-and-conquer approaches to team management, we quickly developed a system of organization that worked. Not only did we create an awesome product, but we had a great time doing it!

On the technical side, none of us had significant ios/android app development experience and we also had no prior WPF experience. However, through sharing resources and some long nights watching YouTube videos, we figured learned how to work with tools such as Blend for Visual Studio and how to develop for WPF and XAML-based projects in general.

The WPF library itself was a whole other learning experience, especially for a frontend developer who's used to working with HTML and CSS! Navigating through the different screens and passing event handlers up from child components proved to be a tough but manageable challenge. Overall, this was a great learning experience, and we now feel more comfortable writing user interfaces using C# and XAML files.

What's next for Logic Learner

While we created a functional app this hackathon that teaches the basic foundations of digital logic, there's lots of room to grow Logic Learner even more, from platform expansions and content extensions!

Firstly, we plan to migrate the project back to Xamarin and provide IOS and Android build targets by converting WireFormSketch away from EmguCv. This would require a significant amount of time to do as the library that we were working off of relied on the EmguCv library (which has a $300 commercial mobile development license)! This, of course, was completely inaccessible to us in the scope of this hackathon, and developing a new library for circuit parsing would take way too much time. By cutting out EmguCv, we would no longer be restricted by platform and even programming language for that matter. This would make the app more scalable to different applications, such as a web app!

Secondly, we plan on adding more complex components and circuit lessons to further advance student's understanding. We can create complex lessons on creating actual CPU components like an ALU, an instruction selectors, RAM, Registers, and more! Logic Learner provides a platform for an unlimited number of lessons. We also thought it would be cool to have professionals and professors contribute to the lessons on this app, whether it be editing/writing lessons or simply providing challenging problems to solve.

Third, we want this project to be as fun and intuitive for students as possible. This means we plan on adding more polish, more sound effects, more rewards/achievements to incentivize students to keep on learning! As a mobile app, there's a much easier interactive component that can be taken advantage of. This allows for the app to be much more polished than it is at the moment and really feel like an industry-standard learning tool.

Finally, we plan on further integrating with Google Cloud or CockroachDB to provide a public workplace where students can share custom made lessons or exciting circuits on the public database! This will allow people from all over the world to share their passion for digital logic or provide niche lessons on other interesting circuit components!

Built With

Share this project: