• Stars
    star
    125
  • Rank 286,335 (Top 6 %)
  • Language
    HTML
  • Created almost 12 years ago
  • Updated over 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Custom Desktop Wallpaper Generator with NodeJS and PhantomJS

Desckit

Desckit

Custom desktop wallpaper generator with NodeJS and PhantomJS

Changelog

Version 0.0.6

  • Updated code and dependencies for modern libs - the code-rot is real, folks
  • Added option to set the generated images as wallpapers - only windows support for now I'm afraid, I'm only working on a windows machine, so if you want other platforms support, feel free to write a few lines of code and send a pull request!
  • Changed the weather module from Yahoo! weather to forecast.io

Earlier versions

Preview / Example Output

Based on base-desck desck

Example output

Installation

For Windows, please place the phantomsjs.exe on your PATH.

Clone and run the application on your local computer

$ git clone git://github.com/weisjohn/desckit.git
$ cd desckit
$ npm install
$ node .

Once ready, navigate your browser to http://localhost:1280/descks/base-desck/display to preview the base-desck desck and it's output.

To generate a desktop wallpaper append render to the url (like so: http://localhost:1280/descks/base-desck/render which will create a new file (or overwrite existing one) in /desckit/public/cache/base-desck/ directory.

Windows Configuration

asd To display your wallpaper in Windows 7/8 use the built in wallpaper rotation tool.

  1. Right click anywhere on your descktop
  2. Select Personalize (the lower-most item)
  3. Select Desktop Background in the bottom area of the window
  4. Click on Browse... next to Picture location: dropdown
  5. Locate and select the /desckit/public/cache/[DESCK_NAME] directory where [DESCK_NAME] is the style you want to use
  6. Select the update interval (I use 1 minute), make sure Shuffle is not marked
  7. Click Save changes

If you configured the application correctly you will now see the generated wallpaper showing on your desktop.

You might run into some issues running phantomjs on windows properly (make sure you follow all the recommended installations steps as seen on node-gyp repo), in which case installing phantom with the following flags might be helpful: $ npm install phantom -msvs_version=2012

Mac OS X Configuration

To display your wallpaper in Mac OSX use the built in wallpaper rotation tool.

  1. Open System Preferences
  2. Select Desktop & Screen Save (in the top-left area)
  3. Click the + button to choose a folder
  4. Locate and select the /desckit/public/cache/[DESCK_NAME] directory where [DESCK_NAME] is the style you want to use
  5. Select the Change picture: interval make sure Random order is not selected

If you configured the application correctly you will now see the generated wallpaper showing on your desktop.

Custom Scripts

The application supports custom scripts to be created.

See /public/descks/base-desck/ to get started with creating your own descks. The best way to get started with Desckit is by hacking away at that desck.

A Desck (AKA Script Files)

To create a desck you will need to create a new directory in /desckit/public/descks with your name of choise, and put a desck.json in it (a good starting point would be to copy base-desck desck).

There are currently 2 mandatory script files:

  • script.ejs - This is the HTML template for the layout of the desktop wallpaper.
  • script.js - This is the Server-side(!!) script to be run when the script is requested. This runs in your NodeJS instance so you can configure it to do whatever you want that is supported by NodeJS.

Optionally, you can include more files in scripts:

  • script.styl- This is the Stylus CSS source file that will generate a script.css file when needed.

Change those files to create your own customized descktop backgrounds.

Command Line

You can run desckit from the command line as well. This will be the prefered option to run the project in the future.

$ npm install -g desckit

To render the base-desck script only one time (think cron)

$ desckit -S base-desck 

To re-render every two minutes, specify an interval of 120 seocnds:

$ desckit -S base-desck -I 120

To automatically set the generated file as wallpaper (currently supports only windows)

$ desckit -W

Examples

There is one provided example at the moment named base-desck that you can use to play around with the application.

Possibilities

Since this is basically a web-page being rendered into a desktop background, there are a lot of things that can be done with it; just to give you some direction:

  • Use HD Youtube or Vimeo videos as backgrounds
  • Display a different style based on the time of day
  • Display news headlines
  • Display HackerNews threads
  • Show top pics from /r/pics/
  • Use parallax effects

Since this is being rendered on a WebKit based browser, basically anything that you can think of creating with HTML5 can be rendered onto your desktop.

Developing

To see the internals of desckit as it operates, set an environment variable for DEBUG equal to desckit, such as:

$ DEBUG=desckit* node-dev app.js 
  desckit Express server listening on port 1280 +0ms

We do this to help the command-line tool version output clean.

General Information

At this point the application is in preview/alpha version designed to show the capabilities of this technique. Most of the configuration is hard-coded (like the screen-resolution), you are welcome to change it to fit your needs. Some of the modules used are outdated (like datejs), and in general this is a work in progress aimed at hackers rather than the end-user at this point.

The Future

The goals for this project are:

  1. Create a simple and easy to use way to generate custom wallpapers using a Wysiwyg style designer
  2. Create modular widgets that could be configured to the users needs and wants
  3. Create integration with sites like Github, CSSDeck, jsfiddle along with an internal way to store users styles/designs
  4. Create a gallery of designs with ranking so users who are not into creating their own custom design could select an existing design, add or remove certain modules, and use it without hacking any code
  5. Provide an easy API to allow use of the software on mobile phones and tablets This is the very first step, unveiling the concept idea, and showing the very rudimentary capabilities, the next step will be decided by you, the user.

Contact

Created by Eli Sklar

Email: [email protected]

Twitter: @EliSklar

Contributors

More Repositories

1

djit

Javascript Spreadsheet Engine
JavaScript
53
star
2

ImageHash

Simple technique to store additional data inside images
JavaScript
42
star
3

djit.su

Reactive Editor
JavaScript
40
star
4

Safebit

Safebit is a powerful and smart Bitcoin wallet designed to be easy to use and secure
JavaScript
18
star
5

bitcoin-wallet

Bitcoin Evolved - A new kind of Bitcoin client to make Bitcoin easy and enjoyable to use
16
star
6

eplog

Notion logging from CLI
JavaScript
11
star
7

project-banner

A package for Atom text editor to display an informative banner for your projects
JavaScript
5
star
8

djot

Djot is a live code playground and tool to enhance your daily digital life and workflow
JavaScript
4
star
9

graze

Modern content stack with sever-side rendering
JavaScript
4
star
10

ji

Ji Language — Use symbols as functions in regular text
JavaScript
3
star
11

extrakey

ExtraKey - Make your mobile device act as a secondary keyboard
JavaScript
3
star
12

Bookmark-Highlight

Highlight links that are saved in the browser's bookmarks
JavaScript
2
star
13

Nodejs-Server

JavaScript
2
star
14

voxgen

Speech synthesising from the cli using Half-Life and Black Mesa VOX voice packs
JavaScript
1
star
15

Client-Side-Caching

Create a Javascript Client Side Caching of Javascript Files
1
star
16

graze-plugin-antd

Ant Design integration for Graze
JavaScript
1
star
17

code-banner

At a glance contextual information for your VSCode project and files
TypeScript
1
star
18

open-state

The foundation of Open State
1
star
19

Eli-Sklar-Repository

1
star
20

angular-material-fullstack

Using angular-fullstack generator for yeoman we added angular-material as a dependency to bower and modified the template to demo some basic angular-material components.
JavaScript
1
star
21

grazed.github.io

HTML
1
star
22

gitbook

Testing Gitbooks
1
star
23

create-graze-app

CLI tool to create Graze sites and apps
JavaScript
1
star
24

Elipsee

Tiny jQuery plugin to shorten text based on the number of rows required
JavaScript
1
star