Repository

https://github.com/thrize/perfectpixel

Test web app URL

http://stark-plateau-35978.herokuapp.com/#/

New Projects

Perfect Pixel is a web app which shows you pixel art match locational weather. It is very customizable and any art image can be added to it. It is a single page app, very simple, which is intended to be a home page, screen saver or a nice display for a wall or screen.

I have previously discussed the motivation for this web app in three posts (1, 2, 3) and my discover of amazing pixel artists and their work. I wanted to make a simple web app be view these images and make the project fun to do.

Screenshots

---

---

Features

1. Show pixel art image matching the weather conditions at set location
2. Show date / time, weather and credit widgets
3. Customisable options, in drawer and as URL query params
4. Save settings automatically to browser

1. Show pixel art image matching the weather conditions at set location

What it does

The main feature of the app is to find an image in the image library which is the closest match to the current weather conditions at the set location.

How it works

Three variables are taken into account to achieve this:

• Weather code
• Time of day (solar)
• Temperature

The app uses the Open Weather Map API to get the weather conditions at the set location, specifically using the weather conditions endpoint.

A distance formula is used between the numeric weather code, solar time of day (normalized, and hour added to each side of day light), and temperature (normalized, 0 to 40 degrees C).

Each pixel art image in the library is marked up with meta data in the /src/statics/json/bg-map.json file, according to the following spec example:

{
  "folder/image.ext": {
    "code": 800,
    "solar": 0.05,
    "temp": 0.2,
    "credit": "Untitled by 8PXL",
    "link": "http://softwaring.tumblr.com/post/156362892984/changed-this-piece-a-little-17-colors56",
    "anchor": "top",
    "super": "no",
    "animated": "yes",
    "season": "any",
    "setting": "urban",
    "era": "modern",
    "vibe": "classic",
    "style": "retro",
    "tone": "mid"
  },
  ...
}

• KEY: the path to the image, which is in /src/statics/art/...
• code: the weather code given by https://openweathermap.org/weather-conditions
• solar: normalized solar position (0 = night, 1 = midday)
• temp: normalized temperature (0 = 0 degress C, 1 = 40 degrees C)
• credit: text credit for artwork
• link: link to artwork or artist
• anchor: (NOT USED YET) image anchor position
• super: (NOT USED YET) one of "yes", "no" - is this image amazingly super?
• animated: (NOT USED YET) one of "yes", "no" - is this an animated gif?
• season: (NOT USED YET) combination of "any | winter | spring | summer | fall" - season in image
• setting: (NOT USED YET) one of "rural | urban | barren | sea | space | abstract" - where is the image set
• era: (NOT USED YET) one of "medieval | twencen | 80s | modern | future | farfuture | abstract" - what era in time is the image reminiscent of?
• vibe: (NOT USED YET) one of "cute | horror | realistic | sophisticated" - what is the general vibe of the image?
• style: (NOT USED YET) one of "primative | pc | anime | modern | retro" - what art style best fits this image?
• tone: one of "light", "mid", "dark" - setting the background color of image overspill

2. Show date / time, weather and credit widgets

Three widgets can appear on screen

• Date / time widget
• Weather conditions widget
• Credit widget

The credit widget cannot be removed but it can be minimized. In minimized form you can click it to get the info on the art for the current image.

The date time widget can show only the date, only the time, or both. When it shows the time, it can show hours and minutes, or hours and minutes and seconds.

The weather conditions widget shows the conditions in the form of a text adventure computer game description. e.g.

I see Clouds
at New York
in the Night.
I feel Cold.

3. Customisable options, in drawer and as URL query params

Drawer menu

The gear on the top right of the screen opens a "drawer" (in the system of Google's Material design) on the right side of the screen when clicked. This drawer contains some adjustable settings and a little information.

• Location: location to fetch weather info at
• Weather updates: number of minutes to wait until next weather info update
• Show Date: show date in widget
• Show Time: show time in widget
• Show Seconds: show seconds ticking in widget (only relevant if Show Time active)
• Show Description: show description of weather, temperature and day period conditions at location
• Minimize Credit: reduce size of pixel art artist credit (cannot be competely hidden)

URL query params

Each of these has a query parameter, in order:

• location
• weatherupdates
• showdate
• showdate
• showsecs
• showdescription
• mincredit

Additionally there is a further setting to not show the settings icon, in case the use case is full screen display purposes, this is

• nosettings

which if set to true will hide it.

4. Save settings automatically to browser

All settings are saved automatically to the browser in LocalStorage. This is not a secure storage but it should not matter as no sensitive data is saved.

Technology Stack

This app is written in JavaScript for the Quasar Framework (@quasarframework) which is built on Vue.js. As an optional deploy option there is a small Node.js server built in.

Roadmap

So far I'm pretty happy with it, but I would like to use the additional unused meta data to add more advanced options for image filtering. Otherwise this project is pretty much done as far as I wanted to take it, but I'm open to ideas.

How to contribute?

If you want to contribute to the code feel free to comment here or just go ahead and create a PR. If you discover a bug or have a feature idea, log a ticket in GitHub.

GitHub Account

Paste here the full url to your GitHub account. E.g. https://github.com/username