2

I there any way to access images in contained within a local Asset Catalog from within TVML on the AppleTV?

I notice several of the templates in this example from Apple call out to resource:// URLs, which are common use images (more info on the dev forms). Here's an example button that gets rendered with the cloud symbol:

<buttonLockup>
  <badge src="resource://button-cloud" class="whiteBadge" />
  <title>Title 3</title>
</buttonLockup>

TVML Cloud Button

I tried pointing to some of my own resources instead of button-cloud but didn't have any success.

I have been able to change the icon on these buttons by linking to an externally served image like so:

<buttonLockup>
  <badge src="http://localhost:5000/static/heartFull.png" class="whiteBadge" width="50" height="50"/>
  <title>Title 3</title>
</buttonLockup>

Since these buttons will be re-used throughout my app, I'd rather load them locally than repeatedly calling them over HTTP if possible.

Nick
  • 3,172
  • 3
  • 37
  • 49
  • Here's my same question on the Apple Dev Forums: https://forums.developer.apple.com/message/62622 – Nick Sep 28 '15 at 07:27
  • According to an Apple rep in the thread linked above there (currently) is no way to do this. I've filed an enhancement request at https://bugreport.apple.com (you could file one too if this would be helpful to you). – Nick Sep 28 '15 at 21:19
  • 1
    Some resources are documented in [Resource Icons](https://developer.apple.com/library/prerelease/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/ResourceValues.html#//apple_ref/doc/uid/TP40015064-CH44-SW7), however there is no cloud icon there. – Ivan Solntsev Oct 21 '15 at 11:56
  • Be careful with this. I used a full URL for my image (not just localhost) and the image worked on the simulator...but failed to load when run on on the actual device. – Darren Ehlers Jan 08 '16 at 21:01
  • @DarrenEhlers I had no such problem when loading from a HTTPS URL. Make sure you're using HTTPS or [have whitelisted HTTP](http://stackoverflow.com/a/31254874/1304462). – Nick Jan 10 '16 at 20:49

3 Answers3

4

I had some success linking directly to the filesystem

<badge src=\"file:///<url to bundle>/<relative path to resource>/<icon>.png\" width=\"50\" height=\"50\" />

with... url to bundle from NSBundle.mainBundle().bundleURL.absoluteString, relative path according to your setup, eg. resources, images, ... and icon well, your image to show on the badge.

Pulling from Assets.xcassets hasn't worked out so far, but then I am still in training. :-D

Baa
  • 246
  • 1
  • 8
  • Thanks @Baa Unfortunately my TVML is generated server side so `NSBundle.mainBundle().bundleURL` isn't going to cut it for me. Still, nice work, I'm upvoting in hopes it helps someone else. – Nick Dec 16 '15 at 00:00
  • 1
    @nickv2002 - How about having your server include some special token (like `%RESOURCES%`), that you could inflate on Apple TV just before the page is actually brought into view? – Baa Dec 23 '15 at 10:06
  • That might work but it still lacks the the ease and utility of just pointing to Asset Catalogs. I'm just starving a few images up over the web for now hoping this gets addressed in tvOS 10 or something. – Nick Dec 23 '15 at 20:05
0

I think the icons namespaced with resource are provided by the OS itself and can't be modified. This is only a hunch and I haven't verified it.

https://developer.apple.com/library/content/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/ResourceValues.html

Sid Jain
  • 177
  • 1
  • 11
0

Thanks @Baa, really helped me out! Just wanted to add that in order to reference the path to the bundle on the JS side, I needed to add the following Swift code to my AppDelegate.swift file within the appController(_ appController: TVApplicationController, evaluateAppJavaScriptIn jsContext: JSContext) function (may need to be manually added, if you don't see it):

jsContext.setObject(Bundle.main.bundleURL.absoluteString, forKeyedSubscript: "BUNDLE_URL" as NSCopying & NSObjectProtocol)

Then on the JS side, I could load static images from the bundle with the following:

const imageFromBundle = `${BUNDLE_URL}myImageName.png`;

Note, as far as I could see, the file:/// prefix was unnecessary and loading bundled images worked fine for me without it.

bonesyblue
  • 21
  • 2