Code League Level Viewer

Riot API Key

We'll use the Riot Games developer API to make our queries and retrieve our Summoner's level statistic. In order to do so, you'll need to register for a free account with Riot Games and get your API key.

First, you'll need to have a League of Legends account login, and have played the game so that you have selected a Summoner name. Head here to get started or to log in.

Once you've verified your account via email, and created your Summoner name, you can proceed to create a developer account. Head here to do so https://developer.riotgames.com/

When you create your developer account, you'll be given a development API key. Keep that key (or the email containing it) handy, we'll need to copy and paste it into our code in a moment. The key will appear in your Riot Games dashboard for future reference.

Note, this key will expire after 24 hours and needs to be regenerated. It will get us going at first, but later we'll look at creating a Personal App with a permanent key.

You'll need to place the API key in your secrets.py file as shown below using a text editor or Mu:

Download: file
secrets = {
        'ssid' : 'your_wifi_ssid',
        'password : 'your_wifi_password',
        'league_token' : 'your_very_long_riot_dev_api_key'
        }

Add CircuitPython Code and Assets

In the embedded code element below, click on the Download: Project Zip link, and save the .zip archive file to your computer.

Then, uncompress the .zip file, it will unpack to a folder named PyPortal_LeagueLevel.

Copy the contents of the PyPortal_LeagueLevel directory to your PyPortal's CIRCUITPY drive, and then be sure to rename the league_level.py file to code.py so it will automatically run when the PyPortal restarts.

"""
This project will access the League of Legends API, grab a Summoner's Level
and display it on a screen.
You'll need a Riot API key in your secrets.py file
If you can find something that spits out JSON data, we can display it!
"""
import time
import board
from adafruit_pyportal import PyPortal

try:
    from secrets import secrets
except ImportError:
    print("WiFi secrets are kept in secrets.py, please add them there!")
    raise

#Choose a valid Summoner name
SUMMONER_NAME = "RiotSchmick"

# Set up where we'll be fetching data from
DATA_SOURCE = "https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/"+SUMMONER_NAME
DATA_SOURCE += "?api_key="+secrets['league_token']
DATA_LOCATION = ["summonerLevel"]
CAPTION = "SUMMONER  "+SUMMONER_NAME

# the current working directory (where this file is)
cwd = ("/"+__file__).rsplit('/', 1)[0]
pyportal = PyPortal(url=DATA_SOURCE,
                    json_path=(DATA_LOCATION),
                    status_neopixel=board.NEOPIXEL,
                    default_bg=cwd+"/lol_background.bmp",
                    text_font=cwd+"/fonts/Collegiate-50.bdf",
                    text_position=(135, 200),
                    text_color=0xffbe33,
                    caption_text=CAPTION,
                    caption_font=cwd+"/fonts/Collegiate-24.bdf",
                    caption_position=(5, 20),
                    caption_color=0xffbe33)

# track the last value so we can play a sound when it updates
last_value = 0

while True:
    try:
        value = pyportal.fetch()
        print("Response is", value)
        if last_value < value:  # ooh it went up!
            print("New level!")
            pyportal.play_file(cwd+"/triode_low_fade.wav")
        last_value = value
    except (ValueError, RuntimeError) as e:
        print("Some error occurred, retrying! -", e)
    #check again in two minutes
    time.sleep(60*2)

Editing the Code

You can edit the code.py file with any text editor you like. Adafruit suggests installing the free Mu Python editor as it's super handy, recognizes Adafruit boards, and has a built in serial monitor/REPL to interact with the board. Find out more about Mu here.

Add Summoner Name

Open up code.py in Mu and then edit the SUMMONER_NAME variable to whichever one you want to display.

For the Summoner named Ohbowz, that line will look something like this:

SUMMONER_NAME = "Ohbowz"

When you're done, save the code.py file again to your PyPortal's CIRCUITPY drive.

This is what the final contents of the CIRCUITPY drive will look like:

If you run into any errors, such as "ImportError: no module named `adafruit_display_text.label`" be sure to update your libraries to the latest release bundle!

How It Works

The League of Legends Level Viewer is doing a few cool things using CircuitPython and the PyPortal:

Background Splash Screen

First, we'll display a splash screen with the LoL logo. This is a  320x240 pixel RGB 16-bit raster graphic in .bmp format.

Font

We'll be displaying the image title and today's date as text created with a bitmapped font to overlay on top of the background image once that's loaded. The font used here is a bitmap font made from the Collegiate typeface. You can learn more about converting type in this guide.

JSON

In order to retrieve the Summoner's level statistic, we'll be making a query to the Riot Games API.

When you make a request of the with your API key added, you'll get a JSON file returned as the response.

In fact, you can run the same query as the PyPortal does to see the result. Copy and paste this link https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/RiotSchmick?api_key=

into your browser, and then copy and past your API key to the end.

When you enter this in your web browser, you'll see a result returned like this:

Download: file
    {
  "id": "b6zzOOT1ATbtZtnX9nQ1HLoUNEfOZA8Mr9565oYyfhqO",
  "accountId": "9Fxgj1Zf5SZSNUWGBcy-aIlviyRwal9t8U8f5nMb-FVpMw",
  "puuid": "MNEzp8-ybiX49XIssYwrnuVgxDPvaeeYU8AFSKWcV7FnvRHaL8H5wb2HqrbwEU-HOvNXfINHU0rzAw",
  "name": "RiotSchmick",
  "profileIconId": 3872,
  "revisionDate": 1555377428000,
  "summonerLevel": 138
}
  

That result is a JSON (JavaScript Object Notation) array. It is comprised of a single element with seven key:value pairs. For example, there is one key called name which has a value of RiotSchmick

which is expressed this way:

"name": "RiotSchmick"

And another we care about is the summonerLevel key, which has a value of 138

So that is expressed as:

"summonerLevel": 138

Since this JSON object array has a consistent way to return the results to us, the code we're running on the PyPortal can easily parse the data and display it!

Here's what the JSON file looks like in the "code beautifier" of Firefox.

You can see how it's done in this part of code.py:

Download: file
SUMMONER_NAME = "RiotSchmick"
DATA_SOURCE = "https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/"+SUMMONER_NAME
DATA_SOURCE += "?api_key="+secrets['league_token']
DATA_LOCATION = ["summonerLevel"]
CAPTION = "SUMMONER  "+SUMMONER_NAME

Then, in the pyportal query we ask for the summonerLevel for a given Summoner name from that URL, and then use the text_ arguments to set the font, position, and colorof the text when it is displayed.

Download: file
pyportal = PyPortal(url=DATA_SOURCE,
                    json_path=(DATA_LOCATION),
                    status_neopixel=board.NEOPIXEL,
                    default_bg=cwd+"/lol_background.bmp",
                    text_font=cwd+"/fonts/Collegiate-50.bdf",
                    text_position=(135, 200),
                    text_color=0xffbe33,
                    caption_text=CAPTION,
                    caption_font=cwd+"/fonts/Collegiate-24.bdf",
                    caption_position=(5, 20),
                    caption_color=0xffbe33)

With all of this prepared, during the main loop of while True: the code will query the API  for the JSON data.

Finally, the text will be displayed over the image.

This updates every two minutes in order to stay current.

Clearly my Gulpfish Summoner has some leveling up to do.

Personal App

In order to use a permanent API key, you'll need to register a personal app. You can do so from your Riot Games developer portal.

Click on the Register Project button, then choose the Register App button under the Personal Application section.

Then, simply fill out the application details, including a unique name for your app, and click Submit. It can take a few days for applications to be reviewed. In the meantime, you may need to regenerate your API key every 24 hours from the dashboard.

This guide was first published on Apr 19, 2019. It was last updated on Apr 19, 2019.
This page (Code League Level Viewer) was last updated on Aug 02, 2020.