Update your desktop wallpaper with images from Reddit, Google Photos, or your local files every morning. Of course, we want to make sure the images we're getting match our device's resolution and we can specify if images that include faces or text are used.
In order to set up the back end, you'll need to make sure you've provided credentials to a firebase project with Cloud Vision, Firestore, Cloud Functions, and Authentication enabled. Set a Service Account on your local machine.
Enable the Google Photos API in your Google Cloud project. Next, you need to setup a client ID so we can get a refresh token for Google users.
Go to Google Cloud credentials > Create Credentials > OAuth Client ID. The client ID will be for a Web Application and the authorized JavaScript origin should be http://localhost:5000 and the authorized redict URI should be http://localhost:5000. If you change AUTH_PORT in {PROJECT ROOT}/web_wallpaper/src/constants.js, you will have to update these values to use the new port.
Open the configuration in {PROJECT ROOT}/web_wallpaper/src/constants.js and set the CLIENT_ID to the client ID of the credentials you just created.
Enter the firebase folder in {PROJECT_ROOT}/firebase. In order to limit users' access to data, push the firestore rules with: firebase deploy --only firestore:rules.
Configure your firebase functions with the command:
firebase functions:config:set
env.secret={ANY STRING FOR YOU APP SECRET}
env.func_url={THE URL FOR YOUR FIREBASE FUNCTIONS}
env.api_key={API KEY FOUND IN GCP > APIS & Services > CREDENTIALS > API_KEYS}
Deploy the cloud functions using the command: firebase deploy --only functions . You can also test these functions before deployment by running npm test in {PROJECT ROOT}/firebase/functions. These test will populate your Firestore with test collections due to the difficulty in mocking the database API.
Open the configuration in {PROJECT ROOT}/web_wallpaper/src/constants.js and set the API_URL to your firebase API.
Build the background service using pkg. First, install the pkg command with npm install -g pkg. Next, run npm run pack:service in {PROJECT ROOT}/web_wallpaper. This will bundle es6 imports in a dist directory. We still need to build the service executable. Go to {PROJECT ROOT}/web_wallpaper/src/service and execute pkg ./package.json
A webwallservice.exe file should now be in the {PROJECT ROOT}/web_wallpaper/src/service directory.
Now that your back end is setup, enter the front end folder at {PROJECT_ROOT}/web_wallpaper. The front end runs on electron and electron-vue. Install these and other dependencies by running npm install in the front end directory. To launch the electron app use npm run dev
| Source Configuration | Device Configuration |
|---|---|
 |
 |
There are two major components to the app: sources and devices. Sources are places where images are pulled from. Subreddits, Google Photo Albums, and local files are all potential sources and each one has a unique configuration. Devices are laptops, desktops, and (later) phones that you've used the app on. Different devices can specify restrictions on resolution, aspect ratio, and background color while using global sources.
- Wallpaper carousel
- Minimum Resolution
- Aspect Ratio Config
- Color Filters
- Source Cards
- Wallpaper carousel
- Image carousel
- Face and text filtering
- Show different configuration types
- Exclude devices
- Add missing subreddit sorting options (random, hot, etc.)
- Select person, album, or place
- Authenticate with API (after login)
- Pull image from database every morning
- Handle wallpaper updates from electron
- Prompt on expired credentials
- Tests
- Update wallpapers for all users
- Cleanup expired data
- Handle user deletion
- Color filters
- Google Photos
- Local files