How to pull in images using javascript

Using JavaScript with Hype
1

Hi Guys

I need help please, i need to know how i could update an elements image bases on an image number.

So i need some sort of javascript that would based on number go and look for the image on local machine shared directory and apply that image to that element.
Or if there is a simpler solution would appreciate it.

The image number will change daily,

Attached is my project:
under group 1 i have labeled the first runner id="image1"
sectionals.zip (1.4 MB)

Any help would be really appreciated

2

Generally, if you are using an Image element in Hype, and want to change it programmatically, you would use JavaScript code that looks like this:

var imageURL = "https://example.com/path/to/image.jpg";
var element = hypeDocument.getElementById("image1");
hypeDocument.setElementProperty(element, "background-image", imageURL);

There's also ways to simply repoint the initial URL for the image when Hype tries to load with the HypeResourceLoad callback; you can search the forums for this term and will find examples.

Given the code you already have, I am guessing the question might be more about how to use something that is outside of the .hyperesources folder?

It really depends on what you mean by "on local machine shared directory?"

Is this still a web server running in the cloud that would have an http/https URL? Or is this something that is run via using a file:/// URL? Or is it you make changes on a local computer, and need a flow to update it on a remote sever? Will the image URLs themselves change, or will they stay the same? (You may also need to worry about local browser caching too).

Maybe you can elaborate a little bit on your use case and desired setup more and I'd be happy to give more specific advice for that.

1 Like
3

Hi Jonathan

Thank you for replying.
We have a middleware software that would download the base64 image and store it either on the machine where the templates are, or copy it on a NAS device.
So i need to be able to access that share through Hype.

The Element and dimensions would stay the same it would just be replaced with a new silk.
Everyday and every Race we have new silks, so i need some how based on the silk image number be able to tell Hype that "image1" which is the first runner to have the following silk allocated to it which is silk number 12009. That same runner on the next race would have a different silk allocated to it.

As you can see in the template we change the order of each runner by allocating a position number to each element and that would then move the element to position 1 or 2 or 3.

But i'm trolling the forms to see if there was an examples that could help me understand how to change the image.

4

You could use Hype Data Magic or Hype Reactive Content.

1 Like
5

Hi Max

Would you be able to please explain a bit more or create an example that i could use?

6

Vanilla JS

First off… the answer from @jonathan is the vanilla JS answer and the most hands on straight forward solution.

Hype Data Magic

For Hype Data Magic (it has a live preview) there is a simple tutorial on using images at:

Hype Reactive Content

For Hype Reactive Content (no live preview) you'd need some code to render an image into a content area. Something like …

In the function HypeReactiveContent you would set up your handler:


hypeDocument.customData.renderShirt = function(image){
    return '<img src="'+hypeDocument.resourcesFolderURL()+'/'+image+'.png">';
}

on the appropriate element, you setup the data binding:

key value
data-content renderShirt(rider1)

Now if you ever set or change the value of rider1 the image should update:

hypeDocument.customaData.rider1 = '20457';

This renders a new shirt image into the rectangle that has the data binding.
Resulting HTML example, depends on setup):

<img src="index.hyperessources/20457.png">
7

I guess if you have software that is automating this part of the process, I'd ask why not name it the same and just directly replace the file in the .hyperesources folder?

Likewise if there's data associated with the images, that could be JSON which is overwritten. Therefore you don't really need any magic on the Hype side; your middleware just needs to know the names.

However, if you don't have much control over this middleware, then you can probably just run some code. My solution is just code for swapping for the image; @MaxZieb's solution is definitely more generic and can help with the data replacements more easily.

8

Hi Jonathan

I used your code to pull the silks of, i'm trying now to write that silk image to a new ID so that when we pull template into CasperCG we could then just change the image number and it would then update silk to that, but i'm struggling it's not working


var horseimage2 = hypeDocument.getElementById('f16').innerHTML
		console.log ('hello'+horseimage2) 
		var imageURL = "https://www.sahorseracing.co.za/images/Silks/svg/png/"+horseimage2+".png";
         console.log (imageURL) 
        var silk = hypeDocument.getElementById("image1");
        hypeDocument.setElementProperty(silk, "background-image", imageURL);
9

Hmm... that code looks good to me. I notice you have logging; are the logs what you expect? Can you better define not working?

About the only thin I can think of is that the .innerHTML may have more in it than just the image name you think; sometimes styling or other characters can get in the way. You may want to use .innerText instead and also call .trim() on the result. That's just a guess though.

10

I am never 100% on the logic of why you need to set the text?

But any way This setup in the example works. And you can adapt it.

Pay attention to how I have given the inputs a class and the label & input names.

Settings rect inner code

<style>
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   font-weight: bold;
   color: Blue;
  opacity: 1; /* Firefox */
}
</style>
<label for="f15">f15:</label>
<input class="silk" type="text" id="f15text" name="f15" size="30" value="" placeholder="Test Text in f15">
 
<label for="f16">f16:</label>
<input class="silk" type="text" id="f16text" name="f16" size="30" value="" placeholder="Test Text in f16">

Hype Function


	// Each Input has the class name of silk
	var silkInputs =document.querySelectorAll('.silk')
	
	
	for (i = 0; i < silkInputs.length; ++i) {
	
	  	var horseImageValue  = silkInputs[i].value
	  	
	  	// Each Input has a name that matches its image number i.e f16
	  	var horseImageName  = "image" + silkInputs[i].name
	 	
	 	// If the input is not blank then..
		if (horseImageValue  != "" ){
			
			// Use the value
				var imageURL = "https://www.sahorseracing.co.za/images/Silks/svg/png/"+horseImageValue+".png";
		
			// Get the correct image. Each Image has a id that matches is "image" + fnumber,  i.e   imagef16
				var silk = hypeDocument.getElementById(horseImageName);
			
		  hypeDocument.setElementProperty(silk, "background-image", imageURL)	
		}
	}

Silks.hype.zip (88.0 KB)

2 Likes