Turning your phone into a virtual-joystick

Image
Update: I kept working on this and I have released it as a package for Windows, Linux and macOS. Check it out: https://github.com/zenineasa/joystick/releases/tag/v1.0.0 -- During the days when I was pursying my master's programme, my friends and I used to occasionally go to a classroom in the university, turn on a projector, connect devices like Nintento Switch or Gaming computers and loads of joysticks, and play different simple multiplayer games; MarioKart was my favourite. From time-to-time, when I get together with people, I ponder that it would be a good idea if I bought such devices. Indeed, I do have a laptop, which could easily run such games; SuperTuxKart is similar enough to MarioKart and it can run on Linux, Windows and Mac. However, I do not have joysticks with me at the moment. Therefore, I think it would be a good idea if I simply worked on a project that would enable using our phones as joysticks. From a high-level, the plan is to host APIs on a NodeJS server that wo...

Slideshow on Google Images

I opened Google Images and searched for Batman, which is probably my favourite Super Hero. I had connected my laptop to a TV screen and I wanted to see all the images as a slideshow. And, just like many other posts in this blog, I started using the Chrome Developer Tools.

I clicked on the first image. The image was being displayed on the side and a button to move to the next image came in. I right-clicked on the button and did an Inspect and I found that the button was having classes KJaJCe irc-rab. I ran the following command to see if there are other elements with the same class.

document.getElementsByClassName('KJaJCe irc-rab')


I saw that there were three elements, but the button to go to the next image was always having an index of 1. So, I went ahead and did the following:

a = document.getElementsByClassName('KJaJCe irc-rab')[1];
a.click();

Each time I ran a.click it showed me the next pic on the right-hand side and I was convinced that if I keep this in a setInterval loop, I could have the slideshow running.

setInterval(function(){
    a = document.getElementsByClassName('KJaJCe irc-rab')[1];
    a.click();
}, 2000);
I was satisfied for a while that this worked, but I felt that I need the images to fill in the entire screen. The idea is to change the image width and height into 100%. I had a little trouble to get this done, but I was successful at the end.

As I simply tried to edit the style using both the console and JavaScript commands, I found that it would be hard to simply try to expand the image. Therefore, I decided to create a lightbox and append it to the body, then clone the new coming images into the lightbox. The following is the code to do that.

style = document.createElement('style');
style.innerHTML = `
#lightbox{
    background: #000000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-Index: 999;
}
#lightbox img{
    width: 100%;
    height: 100%;
}
`;
document.body.appendChild(style);
var lightbox = document.createElement("div");
lightbox.id = "lightbox";
document.body.appendChild(lightbox);
setInterval(function(){
    a = document.getElementsByClassName('KJaJCe irc-rab')[1]
    a.click();
    lightbox.innerHTML = '';
    divs = document.getElementsByClassName('KkFss');
    for(var i = 0; i < divs.length; i++){
        var clone = divs[i].cloneNode(true)
        clone.style.position = "fixed";
        clone.style.left = "0px";
        clone.style.top = "0px";
        clone.style.width = "100%";
        clone.style.height = "100%";
        clone.style.zIndex = 999 + parseInt(divs[i].parentElement.parentElement.parentElement.parentElement.parentElement.style.zIndex);
        clone.style.display = "block";
        clone.className = "changed";
        lightbox.appendChild(clone);
        console.log(divs.length);
    }
}, 2000);
You can copy paste the code above in your Chrome Developer Tools Console and see the effects as shown in the image below.



Now that you have the code to create Google Image Slideshow, you could go ahead and create your own extension out of it so that you don't have to copy-paste the code each time you wish to activate the slideshow. If you don't already know that, you could go ahead and read my blog post titled How to Create your own Ad Blocker Chrome Extension.

Comments

Popular posts from this blog

Created a video to help people get started with HexHoot

First impression of Lugano - Mindblowing

Turning your phone into a virtual-joystick