Loading an image dynamically. What is wrong here?

Using JavaScript with Hype
1

Here is the attached hype doc.
load-image.hype.zip (26.9 KB)

	const cards = {
		'tea-cup' : 'tea-cup.png' 
	};

var e = hypeDocument.getElementById("card0Img_Id"); 

hypeDocument.setElementProperty(e, "background-image", "url('${resourcesFolderName}/" + cards['tea-cup'] + "')"  );

//e.style.backgroundImage = "url('${resourcesFolderName}/" + cards['tea-cup'] + "')";
2

you can dismiss the url-part. just the string: “${resourcesFolderName}/filename.jpg”

it may be necessary to disable hypes fileoptimisation …

3

Like this? It still does not seem to work.

hypeDocument.setElementProperty(e, "background-image", "${resourcesFolderName}/" + cards['tea-cup'] );
When I verify the value of ${resourcesFolderName}, it is wrong. It says: index.hyperesources

In the editor using <img src=“url(’${resourcesFolderName}/” + cards[‘tea-cup’] + “’)” />
works good though.

4

You would need to uncheck ‘Automatically optimize while exporting’ for that image for that code to work. If you drop a PNG into Hype and there is no transparency, the file will be converted to a JPG if it will save space.

load-image.hype.zip (32.4 KB)

In this case, the unoptimized PNG is 3 times more to download:

50%20PM
Screenshot 2019-08-15 at 1.13.50 PM.png1068×514 109 KB

You can un-optimize these images en-masse by click + shift + selecting a range of images in the library and unchecking that box.

1 Like
5

@Daniel
Still would be nice to set a document-wide default to “Never Optimize Images”.
Clicking this checkbox would disable “Automatically optimize” until the “Never Optimize Images” checkbox was deselected. I think this placement would be more obvious than a “Preferences” location.

Before I put in an official feature request - is there a reason I am overlooking why this feature would not be useful?

NeverOptImages

6

I recently made my first sprite sheet in Hype and on export it was 2.1 MB which went after running it through Image optimizer down to 1.13 MB.

It makes me wonder a bit why Hype doesn’t leave the optimization part over to the user?

7

Not really, it is a good request! From this app developer's perspective the primary issue is more that it is in a blurry state between being a document option, an application option, and an export option: I don't want users to turn it off globally when it probably would be of significant benefit (you'll not believe the load times that many documents had from dragging in large photos) but also don't want the next-stage annoyance of having to check it for every document or for export slices.

Regardless, this has been thought of a lot and there is currently app-level "support" for it but no UI (in so much this is technically unsupported and may change!). You can fire up the /Applications/Utilities/Terminal.app and enter this command:

defaults write com.tumult.Hype4 newResourcesAreSetToAutoResize -bool NO

As the name implies this is only for newly added resources; existing ones must still be unchecked.

8

Thanks @Jonathan for the “Never optimize” Terminal command (any others lurking?)

The main annoyance is when You have a project with a lot of images (say 75+). When You drag new ones into the Resource panel they of course get mixed in with the others. Tracking these new additions down individually, often needing to scroll to find them, to turn off the “Optimize” checkbox is a PITA. :tired_face:

EDIT:
Another thought - what if, when images are dragged in to the Resource folder, they remained selected~highlighted so the check boxes at the bottom of the panel could be selected~deselected affecting just these new images? That would be a valuable enhancement.