Supervisor Meeting with Daniel #9

Yesterday I met with Daniel for the first time in 3 weeks.

We talked about the audio recordings I did, and he had a look through my app and my project book.

Overall, he seemed happy with how the app looked. He said it looks a lot better than the last time we met! He had a few comments about things that needed to be fixed, like scrolling, alignment and some problems I have been having with code.

He liked the project book too and just gave me tips in terms of layouts and images. We talked about the website – he said to buy the cheapest domain and create a one page website promoting the website.

So my next steps are to create the website, finish the audio, tidy up the app and finish the project book.

Randomizing images in JavaScript

In Control My Panic, there is a distraction picture part where a picture is displayed with text underneath, asking a question to the user. The picture and question are used to distract the user. I gathered a few different pictures so they would randomize for the user each time they went to use Control My Panic, as if they only saw the same photo every time, it would be less effective.

Through JavaScript, I had to figure out how to randomize images whenever the page is reloaded. I knew it would probably done through an array, but wasn’t sure how to properly do it. (JS is not my strong suit!)

I find a nice tutorial on Dynamic Web Coding that did exactly what I was looking for. I had to create an array, then create a function and then call the function in the section of my HTML I wanted it to be displayed.

array1

Creating array with the images

array2

Function getRandomImage

array3

Calling the function in the HTML

I tried to add this to my script.js file, but it wouldn’t work. When I added the code into the head of my HTML file, it worked.. dunno why it wouldn’t work in my JS file.

I had the images randomizing, but I needed text to be displayed specific to the image that was randomized. After searching online, I found out that I had to add another array for the text and then get the values from that array.

array.PNG

New array and changed function

Now the images randomize and the matching text shows. I just need to figure out how to style the text!

array4.png

 

Aligning the audio player in the center

So I spent some time trying to figure out how to align the audio player in the Relax section to the center responsively – so that no matter what size the device is, the player will always be aligned in the middle.

At the beginning, I used Firefox’s Firebug extension so I could pinpoint what the element was so I could properly target it. As it was an <audio> element, I was trying to add CSS to that – however, from looking at Firebug, I should’ve been targeting <canvas> element, which is a JavaScript element, one I’ve never used before. So I decided to change the CSS of the Canvas element instead, and this time it actually moved, unlike before.

firebug.png

It took some experimenting with different CSS code to finally get it to work. I tried changing the margin, padding, and positioning. I got it to work (sorta) when I positioned it absolutely, but there was a slight problem.

center.PNG

The absolute positioning made the element go on top of everything else, and not in the correct flow.

I didn’t really know how to fix this, so I tried some different methods. What I had never thought of doing before was to actually search how to center the canvas element. I did that, and I find code that worked! All I had to do was display it as a block, have the margin auto and padding at 0… that’s it! Such simple code for something that took me ages to figure out. Now it’s aligned in the middle responsively!

center1.PNG

 

 

 

 

Experimenting with backgrounds..again

As I was coding my app, I realised I simply did not like the look of the backgrounds. I felt that having background images (like I had originally intended) would bring the overall look of the app up more, and I would be more satisfied with it.

From looking at previous Final Year Projects, I just feel like my app doesn’t look as good as anything that has been produced. And I feel that adding background images back in would help that.

So… I did some experimentation again with backgrounds. I only did a few, but the ones I did I made sure that the text was easy to read against the background by adding a gaussian blur and a dark colour overlay.

This is my last try with background images, and I am told that they are still not legible, I will stick with the gradients I am currently using.

bg-eg1

bg-eg2-blur

bg-eg3

bg-eg4

bg-eg5

Issues I need to tackle

There are a few technical issues so far with the app that I am trying to figure out how to fix.

The first one that’s really irritating happens when you click on the page itself. When you click, an extra vertical scrollbar appears, and when you click again, it disappears. It also moves the footer to the very bottom. It also happens when you resize the browser to the smallest possible width (mobile browser size).

before1.PNG after1.PNG

Before clicking                                                After clicking

I’ve tried figuring out how to fix this. I tried stuff like overflow-y: hidden, but that didn’t work. Not really sure how to get rid of this.

Another issue is that I can’t get the audio player to align in the center of the page. Again, I tried lots of different things like margin and padding but it just won’t budge.

not-centered.PNG

Audio player is stuck to the left

Another issue is the descriptions of the exercises are cut off when the browser is at it’s smallest size. The text doesn’t fit the width on the listview (including the headers) unlike normal pages, where it aligns and fits according to the browser size. I tried using br tags but it still doesn’t fully fix the problem. Another problem you can see in the image below is that the icons are overlapping onto other li elements – another thing I have to fix.

cut-off.PNG

Text is cutting off & icon is overlapping

I need to get these issues sorted ASAP. Just need to figure out how to actually fix them…!

Relax: Mindfulness #5

This one is the last audio in the Mindfulness category. It is also the longest audio exercise so far – almost 12 minutes! I noticed when editing this that I spoke quite fast throughout, a lot faster than any of the others. I tried to fix this by breaking up the audio to help slow it down. I also reduced the playback on some parts so my voice was slower, however my voice began to sound robotic so I didn’t do it too much.

I am finally nearly finished editing all the audio. All I have left are the 6 Visualisation exercises. From what I remember, these are quite long so they’ll take a little longer to edit. Hopefully I’ll have them all done by the end of the week!

Relax: Mindfulness #4

Another Mindfulness audio. I really enjoyed this one because I liked the meaning behind the exercise and I would enjoy listening to it if I was using the app.

I also added the noise reduction on this track. I had to tweak it a few times because it was distorting my voice so much that it was way too obvious. At one stage I was getting frustrated with it so I was going to just leave the fuzzy background noise in it but I gave it one more try and it worked out the best than any of the other previous attempts.