UI

Page 1:

Page 2:

Page 3:

Customization

The rest of this section is intended for advanced users and assumes a decent amount of knowledge of their photo editing application of choice. Please read this learn guide page about indexing bitmaps in GIMP before continuing.

I'll go through the process I used to make the bitmaps in case you'd also like to do that. I've included all of the images I used for this in different formats in the project zip.

First, I used the ECP to get the list of all the apps installed on the device. The lines below were run on Linux. Powershell also has curl, although it's just an alias of Invoke-RestMethod, so you might need to use a slightly different syntax.

Download: file
$ curl http://192.168.1.3:8060/query/apps

In my case, that command returned this XML:

Download: file
[email protected]:~$ curl http://192.168.1.3:8060/query/apps
<?xml version="1.0" encoding="UTF-8" ?>
<apps>
	<app id="31012" type="menu" version="1.9.33">FandangoNOW Movies & TV</app>
	<app id="12" type="appl" version="4.2.81176083">Netflix</app>
	<app id="2285" type="appl" version="6.32.3">Hulu</app>
	<app id="8378" type="appl" version="4.12.4">HBO GO</app>
	<app id="38820" type="appl" version="2.15.2">Showtime Anytime</app>
	<app id="7767" type="appl" version="131.0.950">EPIX</app>
	<app id="47389" type="appl" version="4.6.158">FXNOW</app>
	<app id="65067" type="appl" version="3.9.27">STARZ</app>
	<app id="13" type="appl" version="11.4.2020060412">Prime Video</app>
	<app id="63344" type="appl" version="3.4.140">Comedy Central</app>
	<app id="68669" type="appl" version="7.11.0">NBC</app>
	<app id="73376" type="appl" version="4.6.158">ABC</app>
	<app id="552944" type="appl" version="1.2.55">Roku Tips & Tricks</app>
	<app id="65978" type="appl" version="2.10.2002191329">CNNgo</app>
	<app id="12716" type="appl" version="2.10.0">AMC</app>
	<app id="151908" type="appl" version="2.9.42">The Roku Channel</app>
	<app id="46041" type="appl" version="6.13.248">Sling TV</app>
	<app id="837" type="appl" version="1.0.80000286">YouTube</app>
	<app id="28" type="appl" version="5.3.50">Pandora</app>
	<app id="14362" type="appl" version="2.0.39">Amazon Music</app>
</apps>

Let's say that we wanted the icon for Netflix. Netflix has an ID of 11, so that's what I'll use to specify I'm looking for Netflix's icon.

Download: file
$ curl http://192.168.1.3/query/icon/12 --output netflix.jpg

I did this for all the app icons I wanted and then transferred them to my Windows partition and opened them in Photoshop, although you can also use GIMP for this.

First, open the image.

Then, you may need to try to move the image around, it should give you a pop-up asking to convert it to a normal layer, click 'Convert to Normal Layer.' Make sure to not actually move the image around.

Press CTRL+A and click Edit->Free Transform or CTRL+T. Squish the image on the sides a bit. You'll get a feel for it, but in this case I went for 240 pixels wide.

Now, select the crop tool and crop the image to 218 pixels wide.

Click Image->Image Size and change the width and height to 80 pixels.

Now, do this for every image you want and copy them to your page, rotating them -90 degrees.

After that, convert it to indexed color through Image->Mode->Indexed Color and use the settings shown below. Save the image as a bmp using the smallest bits of color you can (usually 4-bit or 8-bit).

If you're running out of memory once you've put your bitmaps on the device, then they're probably too big. I'd recommend converting them to a smaller bit depth here. On images that are just black and white, it usually looks ok to just use 2 colors, which lets you have a very small file.

This guide was first published on Jul 09, 2020. It was last updated on Jul 09, 2020.
This page (UI & Customization) was last updated on Oct 17, 2020.