8.2 – ToDo’s

> ToDo list for this week

Now, that I pretty much finished the buttons and have them looking perfect, I need to enhance the video scaling since it is extremely annoying when it scales into the buttons. While I am on that I might also just change from locally saved videos to using uploaded once like through Vimeo:

Looking into fixing the scaling.
– Since I don’t know how I have to approach it I can’t really say if I am able to do it as I wish or if another way might be the better solution.
Looking into hosting my videos on another website.

I might also need to look first into hosting and than into scaling and positioning because if not I might end up wasting time on a thing that is getting overwritten anyways.

8.1 – Retrospective

RetroSpective Of the last week (Week 7)

Week seven was definitely a new experience for me. As I said in the Retrospective of Development Step 6, I noticed that this DevStep was more of many small steps rather than one big which I personally liked a lot. Since it gave me more room to grow and more opportunities to research, learn and fail. Because the more mistakes I can make, the more I can learn out of them. The coming week looks like one big task but I will put more focus on dividing it in many more small ones so I have the same learning experience as last week. This is what I did:

I designed and made my own Icons in Photoshop.

I implemented those into the existing “item-buttons”.

I enhanced my knowledge regarding button functions through Stack Overflow and w3schools.

With that knowledge I repositioned all buttons and added some effects.

7.3 – D.S. 6 – Making the Item Buttons

Development Step SIX

Making the item buttons

Since I changed the genre button in the last development step and read already into CSS, I can now immediately dive straight into setting up images for buttons. For that first of all I need some images. Three to be precise. One gun, one banana and one dildo icon. I made those in photoshop and just drew them by hand:

Now, that I have the icons I have to implement them into my Item-buttons. To do that I googled “how to use icons for buttons CSS” and found this forum link. I looked at the code and tried it with my icons, the problem I encounter though was, that the icon did not scale, which means that when my button is for example 100×100 px you can only see the top left 100×100 px big corner of my icon. And again I asked google, and found this answer “Most modern browsers have support for CSS background-image options like background-size, so you may really use something like this:” on stack overflow.

So if I add background-size 100% to the other attributes, the outcome looks like this:

And this is my code for each Icon:

.buttonIB{
background: url(data/BananaIcon.png) no-repeat;
background-size: 100%;
cursor: pointer;
border: none;
width: 100px;
height: 100px;
}

Now I removed the play button since I will add it in later again and make it better looking, I moved the three item buttons below the video and added a little hover animation which just increases the size from the selected button by 20 px with these lines of code:

.buttonIB{
[...]
transition: all .2s;
}

.buttonIB:hover {
width: 120px;
height: 120px;
}

The goal now is to position the three buttons in a triangle shape around the genre button, that means that I have one left, one right and one below. Since I don’t have a real idea on how to solve it I googled myself around and stumbled across the following links: stack overflow, w3schools 1, w3schools 2 and w3.org, and what I learned out of those are the following things:

position: absolute;

Which is kinda tricky to be honest, because even tho it fixes the problem that the button jumped up when the video reloaded since it now is “fixed” to a certain position, it now feels more difficult to position correctly so I am still looking for a solution to position it perfectly.

top or bottom or right or left: x%;

This positions the button at 50% of the screen, the problem is that it takes the first (or last) pixel of the button and not the middle which results in the button being offset by 50 pixels (half of the button). The interesting thing is, that if I position the button at 50%, 50% top and right, and then use the following code (transform) I can transform it by 50% top and bottom to the left so it now is positioned from the middle point of the button rather from the top left most pixel, which can center it perfectly.

transform: translate( x%, x%);

With transform: translate the given object should be translated (moved) to for example the middle of the screen when 50%, 50% would be used. The problem I encountered here was that it did indeed positioned my Item buttons correctly but somehow had no effect on my Genre Button.

So what I did to fix this problem, I just tried out everything I could, and to show you my “workflow” I made a time-laps which shows the time I took in 20 seconds. You can see how I am just trying out by removing lines of code and checking what might be causing the problem. After a while I found out that the wiggle effect stops the object from being transformed since you can only transform an object once. My solution to this was just simply removing the wiggle from the button because it didn’t really fit in and was very small anyways. I also encountered the same problem when I looked for how to rotate the buttons and just figured out by myself that I can call several different commands in one transform (e.g. transform: translate(-50%, -50%) rotate(75deg);).

In the end of the time laps you can also see me trying to remove the annoying blue selection which appears when I click a button. I googled for “how to remove the blue selection css” and found a link to stack overflow. Here they described

input:focus {
outline: none;
}

which should fix that selection box, but somehow it did not work for me. I also tried “box-shadow: none” with no success, so I just left it like it was for now.

And this is the product of this weeks development step:

EDIT: Ha! jokes on me. Few minutes after I posted this video, I checked one more time on how to remove the annoying blue selection box and found here, that I could just add “outline: none;” to the buttons and the blue selection box is history! So, well, another problem solved.

Retrospective:

This Development Step was rather made out of several small steps than one big step since I had a lot of different and small problems that always jumped in between me and my goal. But I am not saying that this was a bad thing. Actually I really liked it, because even tho it might have taken me longer since I always have to stop the progress and learn something new, but also the many small mistakes made me learn way more in total. So in a conclusion, I am very happy of this weeks “Development Step” and am looking forward for the next one which will, probably contrast this one since there will be one big problem to focus on (the video scaling).

7.2 – ToDo’s

> ToDo list for this week

After getting a little more used to CSS I will now focus on getting deeper into the designing of my buttons and website:

Designing Images for the buttons.
– This may not be part of any of the technologies but I still need self made images/ icons that I can use for my buttons.
Making the “Item-Buttons” using my icons.

I want my buttons to look very different and self-explanatory so I am planning on using one icon per button and having some kind of wobble effect upon interaction.

7.1 – Retrospective

RetroSpective Of the last week (Week 6)

In this week I started working with a new technology other than javascript. So I had to start slow by reading into CSS and googled a lot around, reading through forums and learning websites. I am satisfied with the progress and the outcomes since I spent quite some time on learning throughout this development step:

I started reading into CSS (w3schools.com, quackit.com).

I tried out different layouts for my buttons.

I fixed a bug/ visual glitch which made the screen flash for a split second when changing videos.

6.3 – D.S. 5 – Getting Started with CSS

Development Step FIVE

Getting started with CSS

Like I mentioned previously, I am not really affine with css so I will start this off by just googling for the possibilities and functionalities of css.

After googling for “css functionalities” and clicking on the first two links I noticed that there are also special css functions (w3schools.com, quackit.com) and that the functions are only a small part of css:

So I googled “videos in css” to get something more specific for me and again went on w3schools, and checked out the three examples on the Responsive Web Design Video section.

The first example was using width 100% which basically resulted in the video always scaling with the window of the browser.
The second example did something similar but it only scaled when the browser width was smaller than 400px (maximum video size). It accomplished this by setting the “max-width” to 100% which might be something that I want to use since I don’t want my video to scale bigger than it is since it would loose quality.
The third and last example was, again working with the 100% width expression but it added more objects which made everything scale together depending on the size of the window.

Before trying this out, I also went ahead and looked for different things for my buttons. So I figured the first thing I should do is go on w3schools and check the css button functions to get a good overview of what would be doable. After reading through the features I just implemented some on my project to try them out in live action.

.myvideo{
width: 640px;
height: 480px;
}

.button {
background-color: #555555;
border: none;
border-radius: 6px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}

.button:hover {
background-color: #ffffff;
color: black;
border: 2px solid #555555;
}

The results where stunning 😀

But since I just learned that the video itself doesn’t really have any cool possibilities for layouts etc. I want to emphasise the buttons a lot more. This is why I googled “cool buttons css” and the first link I found was this one.

Looking through the buttons, these two were the most interesting and fitting to my layout: “Jelly Button by ayamflow”, “Particle Button by Timo Hausmann”. But I wasn’t really satisfied so I tried out another link. And here I found one interesting design. Still not being happy, I searched the web even further and checked this and this. And found these two more button effects (1, 2). That makes my following plan the following:

I want to have this button as the main Genre switching button and the next genre will also be displayed on the button (GIF).
This wiggle effect might help to call to action and put more importance on the genre button (GIF).

And for the three objects I planned using images with this effect on the buttons which should make it way more playful.

Sadly, after copying the code into my existing code and also linking the used stylesheet, the “Jelly Button” didn’t work out at all. my result is basically just a deformed button since it somehow can’t link itself to the stylesheet or read jQuery.

So instead of trying to fix it I moved on because it’s not really worth spending my time on this feature. What I did instead was implementing the wiggle script from Lewitje and it worked out perfectly since he didn’t use any external sources. I implemented the wiggling, changed the speed at which it plays and customised the button so it fits the rest (for now). I also placed it below the video as the main button. And while I was at positioning I changed the video look to max-width 100% so it scales with the website to its max resolution and the button scaling with it – always staying centered.

And this is my result:

As we can see in the video, the buttons are still functioning, the genre button wiggles every 4 seconds, and when I scale the window the genre button and the video scales with it.

But we can also notice a small “bug” which happens when we change the genre/video. When the video is changed you can see the background for a second and the button moves up since the video object disappears for a split second. It is indeed only a small thing but I personally don’t like it and will try to fix it now.
Luckily I more or less know already what the problem is so my solution would be to put some kind of filler object in the size of the video behind it so when we switch the video the button stays in its position. And if I use like a black box then it wont flash up white.

Since google is my best friend I just quickly googled the problem that I have to see if someone else maybe got it fixed and this is what i googled “video flashes when changing html js”. The first link with the headline “Html video tag blinking when Setting new source? [duplicate]” looked promising and it referred me to the solved question “HTML5 Play movie from multiple parts without flashing screen“.
The way it was solved by preloading all the videos and having a black box as the background. So I looked at the solution and tried implementing it into my code. The problem that I encountered was that the guy with the solution had another approach at switching the videos because he only had two videos and hid one of them which makes it easy for him to preload the two videos. Nonetheless did I add “preload=”auto”” to my video and put “background: black;” into my css – video class. But this brought me to another problem. As we can see in this video, my video now has a black background which you can see for a split second when I change videos, but it doesn’t cover the whole background and doesn’t scale with the video.

And again I started googling. But this time I wasn’t as successful. To make it short, I googled “css scaling video background” and found two decent looking links, one of them putting the video as a background video in a division (tried it out and it would have either made the whole page black or nothing), and the other link using “min-width: 100%;” which actually made my video background to be almost 100% of the video. I actually tried out many different things, like putting my video in a div, changing all kind of attributes from that div, changing the attributes of the video, and so on but sadly I couldn’t get to any better solution than this for now.
Note: I also removed the controls to make it a little less flashy since they are useless anyways.

Retrospective:

So far it looks very pleasing and I am satisfied with the Genre button and the scaling video width. I am not fully happy with the switching “animation” and the flashing but I do think that the progress I made and the solution I have for now are perfectly fine. I do still want to do something about this in the future but I think it will be something that comes with time and shouldn’t be focused down completely. Although this development step was more than 8 hours of work it was more than fine since the last dev. step was a little less.

6.2 – ToDo’s

> ToDo list for this week

With this being the sixth week and me being more or less done with the script for the functionalities, I feel positive going into the design aspect with css now:

Getting used to css and knowing the possibilities.
– So far I only worked once with css in my life and it wasn’t the most productive thing so I’m still very new to this language. To know what it’s capable of and what my different possibilities are is important.
Getting started with implementing some of the stuff I know.

I can’t really estimate yet what kind of functionalities I am able to implement since I don’t really know the power of css yet. But once I know I will try out the things I found.

6.1 – Retrospective

RetroSpective Of the last week (Week 5)

I finished week five by implementing all the item functionalities. It may not look like a lot but now I have basically the whole script ready and I am indeed proud of that. And it wasn’t easy since there were some processes I can’t really show in this blog since they are either in my head or just trying out by changing different things in the code.
So let’s look back and summarise what happened in the fifth week:

I made the functionality with the objects work.

I fixed a problem so you can now switch between genres and items without loosing track.

I have to functioning variables that will also help me keeping track of everything.

5.3 – D.S. 4 – Implementing the Items

Development Step Four

Implementing the items

Now lets implement the 3 items, the dildo, the gun and the banana. Since we already have the sources loaded, we only need to create a function that can switch trough the items.

To set that up I created another variable called “currentItem” that will keep track of the current Item (Banana = 1, Dildo = 2, Gun = 3). Then I made three buttons because with the items you are supposed to individually click them instead of “scrolling through” them.
For each button I made a new function that looked like this for every object:

function Banana() {
if (currentGenre == 1){vid.src = src1;}
else if (currentGenre == 2){vid.src = src4;}
else if (currentGenre == 3){vid.src = src7;}
else if (currentGenre == 4){vid.src = src10;}
else if (currentGenre == 5){vid.src = src13;}
else if (currentGenre == 6){vid.src = src16;}
vid.load();
}

This should now, if the genre is 3 (horror) for example, switch to the horror clip with the banana, and same for all other genres and objects. But if we look at the outcome from this clip, we can spot a problem:

As we can see, both functions work on their own but when switching from genres to objects or the other way around they seem to reset or jump forward.. But we can also observe that, while the counter for the currentGenre variable is going from 1-6, the currentItem variable is always staying at 1.

Looking back at the code I actually found out that the problem is, that even while I am switching the video to different items, I am not changing anything with the variable. So all I had to change was adding “currentItem = 1;” (or 2 or 3) at the beginning of the function.

With that change, the genre button will now also keep the item saved, so when I switch the genre from action gun to comedy for example then it will keep the gun item.

But that is only one of the two problems. The other one is that when we click on the genre button after the items it will repeat the genre once, and when we click on the items it will jump one genre ahead.

Before diving straight into the code I actually sat down once more and tried to find the problem by just looking at the video and breaking it down.

  • When I play the videos, the cG (currentGenre) is at 1 and it plays Action (1).
  • Clicking the first time on the Genre button changes the video to the same Action (1) and cG stays at 1, even tho the first click should already jump to Comedy (2).
  • Switching at any point to another Item, keeps the cG variable but shows one Genre further.
  • If I then click on the Genre Button again it repeats the currentGenre.

The information that we can draw out of this is actually helpful and interesting. We already know that the problem lies somewhere in the variable currentGenre and maybe when its getting updated within the swapping Genre function.

Actually, after looking only at the first part of the function,

function sGenre() {
time = vid.currentTime;
statusElementG.innerText = currentGenre;
if (currentGenre == 1) {
if (currentItem == 1){vid.src = src1;}
else if (currentItem == 2){vid.src = src2;}
else if (currentItem == 3){vid.src = src3;}
currentGenre = 2;
}

I can see that the cG is getting written out before it changes so the value that we see on the website is always the old value, so what I did was removing the “statusElementG.innerText = currentGenre;” and put it at the end of the function so we then have the correct and updated cG.

Now we can see that even tho it is playing the Action, which is genre 1, the cG variable is already at 2 which means that changing an item now would also show the second genre. And to fix that I need to update the cG variable before it changes the genre.

So instead of putting the cG to one value further after every click, I now add + 1 to the variable as soon as the function gets called, but since we only have 6 genres, I added an if statement that sets the variable to 1 if it gets bigger than 6:

currentGenre++;
if (currentGenre > 6){
currentGenre = 1;
}

And this is the final result:

Retrospective:

Looking back at the To Do for this week and the Development Step I made I am more than satisfied with my progress. I now have a perfectly functioning interaction, just as I wanted and needed it. The steps for the future will now probably be to go deeper into html and css to make my whole layout and make everything look dope.