DEV Community: Nick Gottschlich

Build your SO their own "attention button" this Valentine's Day

Nick Gottschlich — Mon, 01 Feb 2021 04:01:52 +0000

Valentine's day is coming up! It's time to start thinking about what you are going to get for that special somebody. But everything just feels so played out! Flowers, chocolate, jewelry, it's all just so gauche you say.

No, this Valentine's day you want to give them something special. Something that comes from the heart. Something personal you've built with your own blood, sweat and tears! And something cheap, because you just spent all your money on GameStop stock. Well you're in luck, because with just a raspberry pi and a few spare parts I'm going to teach you how to build your SO their very own attention button. This magical button will, at their simple press, summon you for whatever type of attention your special someone needs. Sound great, right?

Let's get started!

Parts needed

Raspberry Pi - https://www.raspberrypi.org/products/raspberry-pi-4-model-b/
Raspberry Pi Power Supply (if one didn't come with your kit) - https://www.raspberrypi.org/products/type-c-power-supply/
Breadboard - https://www.amazon.com/DEYUE-breadboard-Set-Prototype-Board/dp/B07LFD4LT6
Breadboard cables - https://www.amazon.com/EDGELEC-Breadboard-Optional-Assorted-Multicolored/dp/B07GD2BWPY/132-5436773-5950636?psc=1
Breadboard buttons - https://www.amazon.com/Tactile-Momentary-Assortment-Kit-200-Switches/dp/B0723BG637

Assembly

Set up your raspberry pi! See https://projects.raspberrypi.org/en/projects/raspberry-pi-getting-started for instructions. You will likely need to be able to hook up your Pi to a keyboard, mouse and monitor to get this to work. Once you've booted to the Raspbian desktop you're good to go.

Hooking up Pi

Now, you'll need to hook up your Raspberry Pi to your push button. This is pretty simple to do! Get out your breadboard, push button, and two male-to-female breadboard cables.

On the raspberry pi, connect your cables to ground (pin 6) and GPIO 2 (pin 3). See https://pinout.xyz/# for details.

Note: You can actually use any GPIO button you want, I just went with GPIO 2

Hooking up breadboard

Now, take those cables and connect them to your breadboard. They should be placed vertically, one spot apart on the column, and then the button should be placed on the same rows as the two cables.

See this diagram I borrowed from here. Ignore the placement of the gpio pin, just pay attention to the breadboard.

And this image:

And that's it! You now have your hardware wired up!

Code

You can either write this code directly on the Raspberry pi using the text editor and terminal, or you can SSH into your Pi and use a terminal on a different computer. To do that, first find the IP of your pi using hostname -I and then on another computer ssh pi@IP_ADDRESS and enter your password. I highly recommend using something like VS Code SSH to develop on Pi.

Registering button press

The code we will write will be in Python. Let's start with just getting the button to register. We will be using the gpiozero library to do this:

import time
from gpiozero import Button

button = Button(2)

while True:
    if button.is_pressed:
        print('button pressed!')
    time.sleep(0.2)

Wow, that was easy! If you've used a different GPIO pin then I did (remember to check https://pinout.xyz/# !) just use that number in the place of where I wrote "2". Save your file as attn_button.py and run your code with python attn_button.py (or python3 attn_button.py if needed).

Now press the button on your Pi and watch the text appear in your terminal! You've got your button wired up!

Sending a notification:

A button is no good if it doesn't do anything, right? So now we need the button to ping your phone whenever ~~the user~~ your special smookums smashes that button. I decided to leverage the twitter API for this as it made it easy to send notifications to my phone, but there are limitless ways to go about this. Try experimenting with something like https://ifttt.com/ or even developing your own Android or iOS app if you want to get creative!

The way I did it was by creating a new twitter account which then will DM my main twitter account (see how I snuck that in there) whenever the button is pressed.

Setting up the twitter API

Head to https://developer.twitter.com and set up the API on whatever account will be sending the DM. You then will need to create a new project from the dashboard:

This will lead you through a quick process.

Once you finish, you will need to copy your API key and API secret key to your python file:

twitter_api_key = 'KEY'
twitter_api_key_secret = 'SECRET_KEY'

Then, head to the "app settings" of the app that was created and click the "keys":

Click "generate" next to access token and secret and copy those over to your python script as well:

twitter_access_token = 'ACCESS_TOKEN'
twitter_access_token_secret = 'ACCESS_TOKEN_SECRET'

Almost there, I promise! Now, install the python twitter api wrapper called tweepy by running pip install tweepy or pip3 install tweepy and add import tweepy to the top of your file.

Finally, get the ID of the twitter account you will be sending the message to using https://tweeterid.com/. Obviously, you will need to be logged into this account on a mobile device you carry around and have notifications for direct messages turned on.

Now, here is your final code:

import time
from gpiozero import Button
import tweepy

twitter_api_key = 'API'
twitter_api_key_secret = 'API_SECRET'
twitter_access_token = 'ACCESS_TOKEN'
twitter_access_token_secret = 'ACCESS_TOKEN_SECRET'

button = Button(2)

while True:
    if button.is_pressed:
        print('button pressed!')
        auth = tweepy.OAuthHandler(twitter_api_key, twitter_api_key_secret)
        auth.set_access_token(twitter_access_token, twitter_access_token_secret)

        api = tweepy.API(auth)

        api.send_direct_message('TWITTER_ACCT_ID', 'Yo! Your SO needs attention! Get to it!')
        time.sleep(1)
    time.sleep(0.2)

Phew! That was a lot, but now we are ready! Take a read through this code and you'll find it's pretty self explanatory. tweepy.OAuthHandler and auth.set_access_token get access to twitter, and send_direct_message sends a message. The time functions are just there to prevent the code from sending a whole bunch of DMs at once. Easy, right!

Go ahead and run the script and give it a test, with the script running, you should be able to press the button and very quickly get a ding on your phone indicating a twitter DM has just arrived. That's it!

Keeping the script running.

Now, one last thing, you've gotta make sure the script stays running all the time. There's an easy way to do this. You are going to use linux's screen command.

In an SSH'd terminal to your Pi: screen -S attn-button then run your file with python attn_button.py. That's it! You can close the terminal and your python script will still be running.

Congrats, you're done!

You now have a working attention button. Nice work! Your special someone is going to love it.

What's next?

Why not try adding multiple buttons that can send multiple messages? Maybe try 3d printing a more professional looking button then the sketchy looking breadboard? There are all kinds of ways to extend this project.

Thanks for reading!

JavaSpooky: Using JavaScript to revive an old horror webcomic from a flashplayer grave.

Nick Gottschlich — Sat, 31 Oct 2020 19:47:40 +0000

Back in the day, a certain internet webcomic achieved a level of infamy for it's startling twist.

However, the shocking twist that powered that comic was written with Adobe Flash Player, which will be completely deprecated from the internet on December 31, 2020.

And thus, a part of internet history was lost to the ages...

Or was it? (BE WARNED, the below link contains spooky jump scares)

https://thatspookycomic.github.io/

Were you brave enough to try it out? I decided to recreate the infamous effect using nothing but vanilla JS, HTML, and CSS along with some new-school web APIs. You can compare the results of the page above with a recording of the original effect.

So how was it done?

The Jump Scare sound

Let's start from the top of the page. You probably noticed the pumpkin emoji that the page tells you to click on, right?

Seems like a cute little innocent Halloween fun, right? Well, it actually hides a sinister purpose.

In order to play the jump scare noises on the page, I use a web API called Audio.

Now, the Audio tool is designed to prevent the annoyance of auto-playing media that starts when a webpage is opened. If the user has not interacted with the document, when you try to play a sound you get this error:

So in order for us to do something like:



const spookySound = new Audio('audio/spooky-sound.mp3');
spookySound.play();

We first have to incentive the user to click somewhere on the page! So I dropped in a little JS to update a pumpkin emoji onclick:



<span id="clickEmoji" onclick="emojiClickChange()">🎃</span>



function emojiClickChange() {
  document.getElementById('clickEmoji').innerText = "👻";
}

We are now ready to fire off some scary sounds!

Triggering the Jump Scare

Next up, we need to detect when the user has scrolled to a certain point on the page, where we need to fire the jump scare effect.

To do that, we use the Intersection Observer API.

I dropped an id on the two images where I wanted the jump scare to occur:



<img src="images/7.jpg" id="firstTarget" />
...
<img src="images/17.jpg" id="secondTarget" />

and then I create an observer and observe those images:



let observer = new IntersectionObserver(handler);
observer.observe(document.getElementById('firstTarget'));
observer.observe(document.getElementById('secondTarget'));

Now, we can create a function that will be called whenever the state of those observed items changes!



function handler(entries) {
  for (entry of entries) {
    if (
      entry.target.id === 'firstTarget'
      && entry.isIntersecting
      && !firstJumpScareActivated
    ) {
      playFirstJumpScare();
    }
  }
}

Whenever any of the observed items changes state the handler function is called. We can read entry.target.id to know what item we are dealing with, isIntersecting to know if the user has scrolled the item into view, and I use a boolean XJumpScareActivated to make sure the effect only happens once.

One last thing, if your images load in slow, the effect might be triggered if the id is briefly in frame when the page loads. The right way to fix this is to wait for all images to be loaded before starting the intersection observer, but for the sake of simplicity, a setTimeout did the job for me:



setTimeout(() => {
  observer.observe(document.getElementById('firstTarget'));
  observer.observe(document.getElementById('secondTarget'));
}, 3000)

Great, we can now tell when the user has scrolled our target item into view, and we are ready to play sound. Last up, we need to create the rapid scrolling jump effect!

Auto scrolling the user around

In order for this jump scare to work properly, we want to rapidly scroll the user through the comic frames while playing a sound. The scariest part of this effect comes from the fact that the user thinks they have control of the pace of the comic, and we want to rapidly tear that control away from them.

The way I built this was by scrolling to each part of the page I wanted to scroll the user to, and in the dev tools console, typing window.scrollY:

Now that I had the Y coordinate I wanted, I just trigger the scroll effect at setTimeout intervals on each Y coordinate. The code looks like this:



function playFirstJumpScare() {
  setTimeout(() => {
    clickSound.play();
    window.scrollTo(0, 8441);
  }, 800)

  setTimeout(() => {
    window.scrollTo(0, 9090);
  }, 900)

  setTimeout(() => {
    window.scrollTo(0, 9660);
  }, 1000)

  ...
}

Future improvements could involve putting all the times and scroll positions into an array of objects and mapping through them:



[
  {
    time: 800,
    scrollPos: 8441
  },
  ...
]

But today is Halloween already and I needed to release this thing, stat! So for now, the code stays ugly.

Once I activate the jump scare, I set a boolean to true so that it doesn't happen again:



firstJumpScareActivated = true;

Finally, to get the website online, I created a new GitHub account and used GitHub Pages, you can see the full code of the website here.

I hope this was informative, interesting, and most importantly, terrifying. Feel free to share the comic with all your friends this spooky last night of October! Happy Halloween!

How to create a scheduler with with Electron, Vue and node-schedule

Nick Gottschlich — Wed, 12 Aug 2020 00:43:58 +0000

Hello, my name is Nick Gottschlich, and I am the creator of Social Amnesia, an Electron/Vue application to help you delete your reddit and twitter content. One feature of this application is scheduling daily runs:

If you're interested in how this was created, and how to create your own scheduling tool with Electron and Vue (think for an alarm clock, a daily reminder, a message scheduler, etc.), then read on!

If you haven't already set up your own Electron/Vue app, there are a few short steps to do that, using the vue CLI (command line interface).

npm install -g @vue/cli
vue create electron-vue-node-scheduler
I like to use class-style component syntax, so to follow along with my code, select "typescript" and "Use class-style component syntax"
cd electron-vue-node-scheduler
vue add electron-builder

Now, let's build prototype a simple component that will act as our user interface. We can use Vue Bootstrap to speed up development.

Install with vue add bootstrap-vue.

Now, we can start up our app with yarn electron:serve.

Alright, now we can build the actual component.

You new boilerplated Electron/Vue app comes with a convenient HelloWorld.Vue component which we will be modifying to be our scheduler component.

Go ahead and copy paste this code over everything that was in HelloWorld.Vue:

<template>
  <div>
    <b-time
      v-model="value"
      locale="en"
      @context="onContext"
    ></b-time>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

The b-time here is the bootstrap-vue time component.

We now have set up an easy to use and good looking time selector component. Go ahead and play around with it:

Great, now let's get the actual time out of this so we can use it for our scheduler.

Here's how you will update your class component:

export default class HelloWorld extends Vue {
  value = '';

  onContext(context) {
    console.log('context value', context.value);
  }

  data() {
    return {
      value: this.value,
    };
  }
}

Now, we are keeping track of the value using Vue's data function and we will get an update through onContext whenever the time picker is changed by the user:

Great, now we can set up our scheduler. We will use node-schedule for this.

yarn add node-schedule

Then in your add a <code>import schedule from "node-schedule";</code>. Then update your component like so: <div class="highlight"><pre class="highlight javascript"><code>export default class HelloWorld extends Vue { value = ''; // eslint-disable-next-line @typescript-eslint/no-empty-function scheduleJob = schedule.scheduleJob('* * * * *', () => {}); onContext(context) { // get hours and minutes off of something like '19:12:00' const hours = context.value.split(':')[0]; const minutes = context.value.split(':')[1]; this.scheduleJob.cancel(); this.scheduleJob = schedule.scheduleJob( `${minutes || '00'} ${hours || '00'} * * *`, () => { console.log('job ran on schedule!'); }, ); } data() { return { value: this.value, }; } } </code></pre></div> Okay, this is getting a bit more confusing. Let's break it apart: <code>scheduleJob = schedule.scheduleJob('* * * * *', () => {});</code> This creates a local scheduleJob we can reference. We need to keep track of this, because any time the time is updated, we are going to cancel any previously scheduled jobs and create a new scheduled job. If the asterisks are confusing you, that's <a href="https://github.com/node-schedule/node-schedule#cron-style-scheduling">cron-style scheduling</a>: <img src="https://dev-to-uploads.s3.amazonaws.com/i/xugukl05tmyvv11oofl6.png" alt="cron style scheduling"/> Now, onContext (meaning whenever the user changes the time schedule component), we will get a string in the format of 'HH:MM:SS'. We want to break up this string to get hours, and minutes, which we do with the split function: <code>const hours = context.value.split(':')[0];</code> Finally, we <code>cancel</code> the previous scheduled job, and create a new one at the time the user has now decided: <img src="https://dev-to-uploads.s3.amazonaws.com/i/60yngargkfuieadba7z1.png" alt="screenshot showing job ran on schedule"/> Great, that's it! You now have everything you need to build your own scheduler app! And how cool is this, since it's in electron, it's a native app that will run on Windows, Mac and Linux! Next I would recommend looking into Electron's <a href="https://www.electronjs.org/docs/api/tray">Tray functionality</a> so that you can minimize the app to the tray instead of closing it, so your scheduled job will still run at the right time while the app is running in the background. Here is the <a href="https://github.com/Nick-Gottschlich/electron-vue-node-scheduler">GitHub Repo</a> that you can look at if you want to see the code I used in this post.