0

NASA Viewer not working + How does JPEG - BMP Adafruit IO co
Moderators: adafruit_support_bill, adafruit

Please be positive and constructive with your questions and comments.

NASA Viewer not working + How does JPEG - BMP Adafruit IO co

by gallaugher on Sun Apr 28, 2019 9:56 am

Hi!
I'd like to be able to use Adafruit IO to convert JPEG images to BMPs, similar to what's happening in the NASA Viewer project:
https://learn.adafruit.com/pyportal-nas ... age-viewer

However, I can't seem to get the original NASA project to work. It is querying the NASA site & getting data from JSON to display. I suspect the error occurs today because] the current pic of the day from NASA is a YouTube link, not a jpeg. The error ends in:
KeyError: content-length

To work around this, I replaced IMAGE_LOCATION in my python code with another nasa jpeg: e.g.
image_json_path=IMAGE_LOCATION
with:
image_json_path="https://images-assets.nasa.gov/image/iss049e003166/iss049e003166~thumb.jpg"
It runs, and even fetches today's date & today's pic's image description from the NASA API, but no image.
When looking at the JSON, since NASA doesn't have the https: header, I changed the line to:
image_json_path="//images-assets.nasa.gov/image/iss049e003166/iss049e003166~thumb.jpg"

Again, the code runs in that the PyPortal isn't showing errors, and the PyPortal updates with JSON Text:
2019-04-28
All of Mercury
However, I don't see the converted image.
I think everything else is setup fine. secrets.py has my adafruit.io username & password. The initial NASA url (the YouTube one causing the errors) showed up with console output indicating "original URL" and "convert URL" (although the "KeyError: content-length" follows).

When I change the image_json_path above, I don't get any error, but also don't see any "original URL" and "covert URL" messages, as I did when using the unmodified code.

After I get this working, will it be possible to use Adafruit.IO to perform a conversion from a JPEG to a BMP? I'm hoping that I can pass it URLs to data I'm saving to Google's Firebase Storage. I've done a proof-of-concept showing the PyPortal can access json-formatted data from Google's Cloud Firebase. If I can get the portal to perform the JPEG to bmp conversion, then I should be able to create an iOS app that allows the user to layout screens & buttons, then forward them to the PyPortal for kiosk-like navigation. Any help on this is much appreciated.

BTW: Here's a video with an initial test w/unsatisfactory line-by-line PyPortal rendering. If I can get the JPEG to BMP conversion happening on Adafruit IO (or figure out how I can do the similar conversion in Swift, then save to Google Firebase Storage which should be readable by the PyPortal), then I can likely create a neat "roll-your-own-PyPortal TouchScreen Kiosk" iOS app, passing in calculated regions to act as PyPortal screen "buttons", and offering a faster rendering than what's shown in the video. If I can pre-load these images, I should be able to get user speed similar to my first experiment with one BMP for each PyPortal "screen".
https://youtu.be/aovAkFS3Hc4

Thanks!
John

gallaugher
 
Posts: 97
Joined: Tue Aug 14, 2018 12:42 pm

Re: NASA Viewer not working + How does JPEG - BMP Adafruit I

by adafruit_support_mike on Tue Apr 30, 2019 12:54 am

[moved to the Adafruit.io forum]

adafruit_support_mike
 
Posts: 57354
Joined: Thu Feb 11, 2010 2:51 pm

Re: NASA Viewer not working + How does JPEG - BMP Adafruit I

by brubell on Tue Apr 30, 2019 11:34 am

Hi gallaugher, I've dug through the PyPortal library quite a bit in the past week and I'd like to help you get your project working.

The response parsed from the NASA website looks like the following:

Code: Select all | TOGGLE FULL SIZE
{
  "copyright": "Mario Zauner",
  "date": "2019-04-03",
  "explanation": "The famous Horsehead Nebula in Orion is not alone.  A deep exposure shows that the dark familiar shaped indentation, visible just below center, is part of a vast complex of absorbing dust and glowing gas.  To bring out details of the  Horsehead's pasture, an amateur astronomer used a backyard telescope in Austria to accumulate and artistically combine 7.5 hours of images in the light of Hydrogen (red), Oxygen (green), and Sulfur (blue). The resulting spectacular picture details an intricate tapestry of gaseous wisps and dust-laden filaments that were created and sculpted over eons by stellar winds and ancient supernovas.  The Flame Nebula is visible just to the left of the Horsehead, while the bright star on the upper left is Alnilam, the central star in Orion's Belt. The Horsehead Nebula lies 1,500 light years distant towards the constellation of Orion.    Bounce around the Universe: Random APOD Generator",
  "hdurl": "https://apod.nasa.gov/apod/image/1904/HorseheadFlame_Zauner_4404.jpg",
  "media_type": "image",
  "service_version": "v1",
  "title": "Wisps Surrounding the Horsehead Nebula",
  "url": "https://apod.nasa.gov/apod/image/1904/HorseheadFlame_Zauner_960.jpg"
}


Where `url` is the image location.

Image_json_path does not expect a URL with a static JPG, but it expects a JSON response (like the one posted above) with an image URL inside of it.


HOWEVER, I added a image_url_path kwarg to PyPortal (PyPortal.image_url_path = "https://images-assets.nasa.gov/image/iss049e003166/iss049e003166~thumb.jpg") to make the library work with static images instead of JSON responses.

brubell
 
Posts: 402
Joined: Fri Jul 17, 2015 10:33 pm

Re: NASA Viewer not working + How does JPEG - BMP Adafruit I

by gallaugher on Wed May 01, 2019 12:38 am

First - awesome & thanks for your help!

For the quick, here's a gist that shows what's working & what's not. Looks like Adafruit.io doesn't like the super-long URLs that Google uses for Firebase Storage:
https://gist.github.com/gallaugher/cd17 ... ed10357453

TLDR
There are a lot of long URLs in this note & I noticed Adafruit's posting system shrinks them down. The links should work, but just in case I put this post in a Google Doc at:
http://bit.ly/ForAdafruitMay1

- to clarify: my interest in the NASA Viewer is so I can learn to view multiple web-served Images on a PyPortal. Right now I've created a working prototype app that allows a user to mock up 320x240 PyPortal-sized screen. The user can create text, move it around, change fonts & colors, and add images. I was originally going to save text & formatting data to recreate the text fields on the portal, but text rendering on the PyPortal was really slow and I've realized that I can save any portion of a screen in iOS as an image. This will let me serve up a single image to represent each kiosk screen on the PyPortal, which should be faster than my slow text-rendering experiment. I can also save the coordinates of any buttons in the app, the PyPortal can get these via a JSON call, and the local PyPortal-based Python script can use it to handle touch-screen navigation. The result should allow anyone to create a kiosk-style PyPortal using an iOS app, and they should be able to use the app to update the PyPortal, remotely. My initial motivation was to use this as an interactive office sign, but I'm hoping there are other uses, as well. If I can get it to work, I'll share everything I've done & put together some instructional docs + YouTube video, in hopes it may be useful to others.

With that as background, I'm currently trying to figure out the best way to for the PyPortal to access image data (currently stored in Google Cloud Firestore). The Cloud Firestore data can be accessed in JSON (see URL below).
https://firestore.googleapis.com/v1beta ... s/(default)/documents/elements/

I'll likely change up the data model when I can think more clearly, but the extra depth that comes from the JSON at that URL is mostly an artifact of how Cloud Firestore produces JSON from its data. For now, every "element" from the JSON delivered above is an element on a "kiosk", either a screen or a button on a screen that leads to another screen. The element named "Home" is the starting point.

There are a few ways I've experimented with to serve images when the PyPortal makes a request.

DOWNLOAD FROM A FIREBASE STORAGE URL
First, I tried storing images in Firebase Storage "buckets", google's preferred way to store larger data files like images & videos. I can save in any format - jpg, png, bmp from my iOS app. Google can present URLs for Firebase Storage, but they are very long & my guess is that Adafruit.io doesn't like the super-long URLs. For example, there is an adafruit logo at the URL below - if you copy & paste it in a browser you'll see it:
https://firebasestorage.googleapis.com/ ... 8600fe9ef0

When I ran this, in the data source in the gist at the start of the post, it didn't work:
image_url_path="https://firebasestorage.googleapis.com/v0/b/doorsign-3557c.appspot.com/o/adafruit_logo.png?alt=media&token=98f38b55-d738-4142-ae46-e98600fe9ef0")

Serial console shows an error:
MemoryError: memory allocation failed, allocating 41175 bytes

But if I put the same image on my own website at a smaller URL, this line works replacing above:
image_url_path="https://gallaugher.com/wp-content/uploads/2019/04/adafruit_logo.png")

Unsure if it's Adafruit.IO that doesn't like the long URLs. If it would be possible to provide a URL directly to PyPortal's python code & avoid Adafruit.IO, here's an image_url_path that has a .bmp stored in Firebase Storage:
https://firebasestorage.googleapis.com/ ... 1162e1c390

Put it in a browser & you should see the file.

ALSO: Even if I can get data from some online source, will it be possible to access multiple bmps and cache them on the PyPortal to use them for quick display? I haven't added an SD card to my PyPortal yet, and I don't think I've seen any code on this. What do you think of this plan?

ANOTHER OPTION:
Since the image is somewhat small (just 320x240), I saved this bmp data as part of a key-value pair in straight-up JSON. I don't know if PyPortal can work with this, at all, but as an example, the JSON accessed from the URL below:
https://firestore.googleapis.com/v1beta ... s/(default)/documents/elements/

will show an key "name" with the value "projects/doorsign-3557c/databases/(default)/documents/elements/AC8A6EEE-7B17-4F62-A44A-522B626BE69E" followed by ["fields"]["bmpImage"]["bytesValue"] and a very long value that should be a black & white image of the Adafruit logo.

Do you know if this is usable? If it is & I can save each screen like this & have the PyPortal download all screens in batch for faster local serving.

I'm likely not seeing other options, too. This may be WAY more complicated than you're interested in helping with, but if we can get this solved, hopefully we'll have the foundation for something that makes the PyPortal even more useful.

Thanks!
John
PS I'd mentioned this in the original post, but the YouTube video from a few days ago (link below) shows what I've been able to accomplish so far, with local navigation vs. the initial (unsatisfactory) text-rendering from JSON shown side-by-side. The app will be stronger. I'm already working on replacing the "screen drawing" app with something that allows you to drag around text boxes like you'd do in PowerPoint or Keynote, and edit them directly.
https://youtu.be/aovAkFS3Hc4

gallaugher
 
Posts: 97
Joined: Tue Aug 14, 2018 12:42 pm

Re: NASA Viewer not working + How does JPEG - BMP Adafruit I

by kevinjwalters on Wed May 29, 2019 6:22 pm

I've got an idea (adafruit/Adafruit_CircuitPython_PyPortal #38) for post fetch tranforms on the JSON object in case this is of interest. I've coded this up and am using that to deal with the YouTube video urls for NASA picture viewer. See my recent post on Not getting actual images from NASA Image Viewer (pyportal).

kevinjwalters
 
Posts: 362
Joined: Sun Oct 01, 2017 3:15 pm

Please be positive and constructive with your questions and comments.