1
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Setting rotating backgrounds on Atom.io

前回のキマブロ: atom.ioのstyles.lessについて

It's kind of silly to write up an entry on this, but I thought this would be something fun to share.

I've been using atom.io now for about a week and I've wanted to shuffle around my backgrounds. Seeing as how LESS doesn't seem to provide the facilities for doing random select of array elements (without unsafe script handling), I decided to move this into my init script.

Let's get started.

styles.less

Going by what my coworker told me, I decided to make .editor transparent. Doing that, my stylesheet gets very small:

@transparent_pink: rgba(255, 192, 203, .5);
@semitransparent_yellow: rgba(255, 255, 0, .75);
@editor_background: rgba(20, 20, 0, .7); // もっと夏っぽく!!!

.editor {
  background: @editor_background;
}

.comment {
  color: @semitransparent_yellow;
}

.editor {
  .cursor {
    border-color: pink;
    border-width: 2px;
  }

  .selection .region {
    background: @transparent_pink;
  }
}

Yes, I did put that comment "夏っぽく" there because yellow-tinted pictures remind me of the yellow summer sunlight (though I believe the hue of the sunlight has more to do with the temperature, but I'm not sure).

init.coffee

This is where all the heavy lifting gets done. Because I didn't want to deal with multiple files yet (because I haven't consolidated/updated my dotfiles in a while on GitHub), I wanted to keep everything in one file. Unfortunately, that means I have some formatting code and also just raw data in my script.

There's only a few bits relevant to this article, so I'll just show them in slices.

First, we need to set the update interval on our background:

update_interval = 60 * 5

Then, we need a function for setting the background and backgroundSize style properties:

setBackground = (image_url) ->
  pane = document.getElementsByClassName('pane')[0]
  pane.style.background = "url('{image_url}')"
                            .replace('{image_url}', image_url)
  pane.style.backgroundSize = "cover"

Populate a collection of images:

images = []
images.push('https://farm4.staticflickr.com/3675/9164642229_9fd0560b31_o_d.jpg')
images.push('http://media-cache-ec0.pinimg.com/originals/39/8a/ff/398aff8e6dcea2befe58f09480857a4b.jpg')
[...]

A random select function for the image to be set:

randomSelect = () ->
  index = Math.floor(Math.random() * images.length)
  setBackground(images[index])

Finally, the initialization of the first background and the intervals:

randomSelect()

setInterval(randomSelect, (1000 * update_interval))

Conclusion

できました! Using this method, I was able to get a background image to rotate in my .pane every 5 minutes.

screenshot

You can view/copy my config here: https://gist.github.com/kimagure/8c57fd492eec7c363abc

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1
Help us understand the problem. What are the problem?