CSCI460

One Final Progress Post

admin — Wed, 28 Apr 2021 18:20:17 +0000

Since my last blog post I am happy to say that after sitting down with both Dr. McVey and Dr. Pankratz, we were able to figure out the bitmap issue with using an image from the phone’s gallery. We finally found the correct line of code to create a bitmap copy to prevent the app from crashing at the save and eyedropper tool. Additionally, I had some small bugs with my undo and redo button, and I am happy to say I have (hopefully) fully debugged this and removed those bugs.

New Additions

I have successfully added a clear button to my canvas interface that is fully functional. Up until having this button, the user was able to hit the back button in order to start over, but I wanted to add a clear button in case the user just wants to start their drawing over and keep the same picture.

I have also tweaked the UI slightly so the undo, redo, and clear buttons are at the top leaving the brush, stroke, eyedropper, and color wheel buttons at the bottom of the screen with the color preview circle.

In the extra time I had before I could figure out the bitmap issue, I also added a few more brushes!

The last addition was adding the dialogue box after the user clicks the save icon to make sure they didn’t accidentally click the button prematurely.

Featured Artwork

Here is one of the pieces I made while experimenting with my brushes!

More Progress, More Roadblocks

admin — Sun, 11 Apr 2021 21:11:19 +0000

I’ve been working so hard on my application with Dr. McVey that I completely forgot to update my blog! Good news: even more progress has been made. First of all, I figured out how put a photo on my canvas! It works for both using the camera to take a photo or choosing one from camera roll. Another thing that has been solved: all my menu icons show! For some weird reason, the icons that weren’t showing had an empty srcCompat. Not sure how that happened, but it’s fixed now!

New Features

Eyedropper tool has been added and works on both a blank canvas and picture. It also will detect previous brush stroke colors over the canvas rather than the image below.
A current color icon in the bottom menu bar has been added to show the current brush color.
Both the undo and redo buttons are fully functional
The back button works where it asks you if you are sure you want to go back to the choices menu and lose your progress.
More brush filters have been added like black and white!

Drawing Examples

Current Roadblocks

My current struggles have been trying to save my canvas to camera roll. It works if the image is from taking a photo or if the canvas is blank, but it fails due to some error with hardware when the background image is chosen from the phone’s camera roll. Dr. McVey and I have been trying to troubleshoot this issue with no luck.

Finally: Progress !!

admin — Sun, 04 Apr 2021 23:33:14 +0000

I am finally able to post this: I am making real progress! Since my last post I have been able to make immense progress on my mobile application, especially since there are only a few weeks left for me to program. First of all, I have fully developed my IU for all my activities. There will still be some tweaks, but the major aspects are done. This even includes my pop-up menus I have for my CanvasActivity.

Unfortunately, Dr. McVey and I haven’t been able to figure out why my bitmaps aren’t showing up. We got past the error that was saying the bitmap was null (even when it wasn’t in the log) but it just doesn’t display anything. Weirdly enough, below in my screenshots only half of the menu icons appear on the phone.. I’m not sure if this is a related issue.

Fortunately, I didn’t need an image background to develop drawing. I have created my own custom class extending the View class that allows me to draw to the screen. I adapted the class from here. Going off of that example, I have successfully implemented an undo button and will continue to work on it so I can get redo to work. I also got my color picker pop-up menu to work with both the color wheel picture and brightness slider. Below you can see I also have an option to change opacity, but I’m still deciding if I want that there or if I should just have a default opacity built into each brush. Something else I fixed from last Friday was the ability to change the stroke on the brush. At first, when I changed the stroke, it changed it for everything on the screen, but I figured out how to stop that from happening. Going off of changing the stroke, I also began exploring different brush types. It was a little difficult to figure this out since I couldn’t get an image to load underneath my drawing, but I found this Android library: BlendMode. I think I can use directly blend modes built into this library for effects and then a combination of different blend modes with different color paint.

Current Screenshots

Starting Over?

admin — Thu, 01 Apr 2021 13:17:04 +0000

So I’m half sad, half happy that I switched my project from React Native to Android Studio as of last Friday. After lots of digging online, it seemed that React Native did not currently support drawing on screen with touch. All libraries I found that might work were sadly outdated. Because of this, I made the switch to Android. I’m very anxious basically starting over, but luckily I’ve programmed in Android Studio before and Dr. McVey knows this environment so she can better help me.

Current Screenshots

Above are two current screenshots of my project in Android. I designed the third screen but I’m having an issue with bitmaps saying they are null so I can’t navigate to my third screen. I will be meeting with Dr. McVey to discuss my bitmap issue tomorrow.

Drawing: How Hard Can it Be?

admin — Sun, 21 Mar 2021 16:14:32 +0000

Since my last post, I was able to successfully put the image I selected onto the map. The controls below my canvas are still in progress. The bright colors are part of me testing where the button is located while I try to move it.

I have decided to move onto a different aspect of my project: drawing on my canvas with my finger. So far I have found this image filter library, but I’ve been having troubles figuring how to implement it so the filter is only applied to where I touch. I’ve been searching for a library that supports just simply drawing plain colors on a canvas, but all of the ones I’ve found have been outdated. My thought was to take a sketch library, like this one, save what your finger drew as a transparent image, and mask it with the original image using this image mask library. Sadly, that particular library hasn’t been updated in three years, so it is way outdated. Once I have the masked image, I wanted to see if I could just layer all the images using this layered image library. Unfortunately this layered image library isn’t quite what I was looking for, but it showed me that layering images might be possible in React Native.

Update: I’m currently looking at this svg library to see if it could work at creating the shape of what the user drew.

Attempting to create the canvas UI

admin — Tue, 16 Mar 2021 17:50:50 +0000

Since my last blog post, I was able to get rid of the hook error by rearranging my code. I don’t fully understand hooks in React Native, but I learned about them enough to know where to properly place it in my code. I am still stuck with moving from selecting the photo to my canvas navigation screen. Before I looked into this more though I began trying to design the UI in React Native which seemed a lot easier than it has been. I’m having trouble trying to get a bottom bar for my tools because the CSS through Javascript is slightly different than the regular CSS I’m used to, but I’m slowing figuring it out.

As you can see above, the styling is working differently between viewing my app in a browser than on my iPhone. The canvas also appears in a different spot, but I plan on continuing experimenting this week to solve this!

Showing and selecting a Photo

admin — Tue, 09 Mar 2021 00:53:54 +0000

I have run into one too many roadblocks when trying to figure out how to do this. React Native’s module titled “Camera Roll” has been deprecated, so I’ve been searching for another library to make this possible. Last week, I thought maybe Expo’s MediaLibrary might be the answer, but I couldn’t figure out how to use it. Overall, there may be documentation online for different libraries, but not a lot of examples showing how to implement them. Below are a list of different websites I found along my journey of researching.

While I did find a lot of dead ends, I am SO happy to say I found an example using Expo’s ImagePicker library. There is source code that I was able to run on my device where I could select a photo and display it. Here are screenshots from running this example on my phone (source code can be found on the ImagePicker documentation page).

Now, I just need to figure out how to implement that within my app. I’m getting an “Invalid Hook Error” which I have no idea what that means, so back to researching it is!

Accessing Photos

admin — Thu, 04 Mar 2021 19:42:42 +0000

Accessing Photos and More

I am happy to say I have found a way to access my device photos while using React Native for both iOS and Android. Expo has its own library for dealing with media library on both these devices. All I had to do was include the following code and I had access to it:

import * as MediaLibrary from ‘expo-media-library’;

While I didn’t have the time I’d like to figure out how to fully use this and implement it on my app due to my other capstone project, I was able to at least get the prompt on my iPhone to allow my app to access its photos. The full documentation of the library can be found here.

Navigation Screens

Additionally, I have settled on how I’m setting up my three navigation screens. How I previously set it up went along great with what I read in the book. The only difference is the book is unfortunately referencing an old API.

Next Up

Moving forward, I will be working this weekend to figure out how to go from my “Import Photo” button, to showing and choosing a photo, then to the canvas screen.

The Process of Learning JavaScript

admin — Fri, 26 Feb 2021 19:32:38 +0000

Coding in a brand new language has definitely been a big road bump. I slowly trying to learn aspects of JavaScript with various support pages online, but I finally was able to pick up some textbooks from Dr. McVey to help me dive a little deeper. I can happily say though that I have a start screen that continues on to another page in the app.

Moving forward, I now have access to an Android as well and I’m going to figure out how to access the camera roll. Fingers crossed that I’m moving onto the next step on my timeline at this time next week!

Planning before coding

admin — Fri, 19 Feb 2021 19:49:51 +0000

While I have not started any coding yet, I have planned out my project quite a bit. I successfully set up an environment using React Native. This means I will be using Javascript to code my project. While I have not coded using this language before, I am up for the challenge.

Layout

I’ve settled on a very simple layout. The following pictures show the three screens I wish my app to have:

We had mini poster sessions yesterday and I got a lot of great feedback for moving forward. One feature specifically was how I can implement an undo button. The conclusion I came to was that every brushstroke is it’s own layer, making it easier to remove a brushstroke. I also decided when adding the brushstroke effects, I will be keeping it separately on a layer to preserve the original picture. Then at the end, I can add a simple toggle switch to see the before and after of the user’s artwork.