Change image source

Using JavaScript with Hype
1

Hey there!

Quite new to the forum and quite new to Hype too! But it’s exciting so far :wink:

I tried to find an answer to my problem but weren’t able to find a thread. If there is one, sorry for bringing this up again!

I need to change the image source of all pasted graphics within the Hype document. Meaning:

There’re two different views (day and night), the images used in the resources folder follow the naming conventions:
day_xxx.png
night_xxx.png

My question now:
is there a way I can say via javascript please change all sources from “day_xxx” to “night_xxx”?

Thanks a lot in advance for any help!

2

Give all the image elements a class name and then iterate over them and using the element property setter API.

hypeDocument.setElementProperty(element, 'background-image', "${resourcesFolderName}/night_xxx.jpg");

3

probably can be done cleaner but as an example,

The image names are:

day_2.JPG
day_1.JPG

night_2.JPG
night_1.JPG

The two images placed in the scene have the class image_

	var images = document.querySelectorAll('.image_'); //-- get all images
	
	 
for (i = 0; i < images.length; i++) { 
 
var imagePath = hypeDocument.getElementProperty(images[i], 'background-image') //-- get image path

var name_ = imagePath.split('/') //-- split image path components

if ( name_[name_.length-1].includes("day")) {

var thisImageIndex = (name_[name_.length-1]).split('_')[1];  //-- last path component number


hypeDocument.setElementProperty(images[i], 'background-image', '${resourcesFolderName}/night_' +thisImageIndex + ".JPG")
 
             			}
    }
1 Like
4

Hey Mark,

thank you so much for your quick response!

I tried it with your example dates and it worked just fine! The thing with the images I got is, that they have longer names. In example:

day_overall_background_1.jpg
night_overall_background_1.jpg

If I use your code for this, the source will stop after the first word, i.e.:
night_overall_background_1.jpg will just be night_overall.jpg

Furthermore I realized the following:

The image changes need to be done on all scenes and also need to function the other way around (there’ll be a switch somewhere between day and night mode).
With the above code used, the image will be “day-mode” again if I switch to another scene and come back again. And it won’t work for all images on all scenes…
Do you have any idea for this?

Thanks a lot again for all your help!

Best,
Susanna

5

Hi Susanna, you can see where sharing all the information and/or a document would help in this situation :wink:

If you can zip up a copy and share it then a more tailored solution could be done

I'll leave Mark to do it as he's started but if he can't for some reason then someone can chime in :slight_smile:

6

Hi @Susanna, as DBear says, if you can post an example it would help tialor the solution for you…

7

Hey Mark and DBear,

sure, please find the testing document enclosed.

Like mentioned before:
The code would work on one scene, but unfortunately only using one word after the “day_” or “night_”.

If the mode is changed in settings it should change all the images on the different scenes.
The button is furthermore showing the actually used mode.

day_night_mode.zip (230.5 KB)

Thank you so much!

Best,
Susanna

8

So I had a quick look at that and changed a few things.

First I have put the images in persistent Symbols. This allows us to easily keep the changes if we go back and forth on scenes.

I have given the day, night buttons ids. of day and night

Both buttons call a single function. The id is used to determine which mode we want.

This function not only changes the images but also changes the button colour by also using css in the head and toggling the buttons class names.

The day and night image names from what I tell will match each other apart from the first word. day or night.

So the simple idea is to use the button id to work out which image mode we need and replace the first word of the image name to that. Then set the background image to correct image.

The day button is preset with the class so it shows as the active button when you first go to settings.

head

<style>

.buttonOn{

background-color: #5AB52C !important; 

pointer-events: none !important;
 
}

</style>

mode()

element.classList.add("buttonOn"); //-- set button class to change css background colour

 hypeDocument.setElementProperty(element, 'opacity', 1, 0.4, 'easeinout')

var mode =element.id;//-- get the mode from the id of the button
var mode1,mode2 = "";
 
 
 //-- set the mode
mode  == 'day' ? (
    mode1 = 'night',
    mode2 = 'day'
) : (
    mode1 = 'day',
    mode2 = 'night'
);

var otherButton = hypeDocument.getElementById( mode1)
otherButton.classList.remove("buttonOn");
hypeDocument.setElementProperty(otherButton, 'opacity', 0.5, 0.4, 'easeinout')

 
var images = document.querySelectorAll('.image_'); //-- get all images
	
	 
for (i = 0; i < images.length; i++) { 
 
var imagePath = hypeDocument.getElementProperty(images[i], 'background-image') //-- get image path

var name_ = imagePath.split('/') //-- split image path components
name_ = name_[name_.length-1]

if ( name_.includes(mode1)) {
 
name_ =  name_.replace(mode1,mode2);//-- switch out the first word
   
hypeDocument.setElementProperty(images[i], 'background-image', '${resourcesFolderName}/' + name_)
 
             			}
    }

Slight updated version.
Added single click (pointerEvents toggle ) and colour persistence to buttons. The buttons are now also persistence symbols.

day_night_mode_MHv2.hypetemplate.zip (85.6 KB)

Version with settings slide out…

nIghtDay_MHv2.hypetemplate.zip (77.9 KB)

1 Like
9

Hi Mark!

I tried the version with the test-file - works just fine! Thank you so much!

While trying to implement this in the big project, I got some problems:
I need to make out of all elements on the scene (which are about 15 images) a persistent symbol (in order to be able to keep the modus while switching the scenes).
But if I do this, the buttons I click i.e. to switch to the next scene will stay in it’s pressed state (I think due to the persistence…

Is there a way to change the imagesource without the need of using persistent symbols?

Sorry if this question is unclear, I’ll try to prepare a file for you showing what I mean.

Thanks anyway, you’re a great help!

10

A little confused. I never put the next scene buttons in a symbol ?

11

No, you’re right, you didn’t!
But my project file (shared with some others) did!

To make it easier (since nearly everything on the stage is an image which need to change regarding the mode) I put everything (as a group) in a persistent symbol to be able to use your code.
Afterwards there was a problem with the button pressed state by using custom behaviours - but I switched this to js now. The button kept showing the pressed state once clicked.

Seems (beside the fact that I needed to handle the buttons not with custom behaviours but js) like it’s not confusing anything else.

Thanks a lot, Mark!

12

ok. Just finished this… ( and only just seen the last reply )

So here is a version that uses global vars to remember the modus. ( Images not in symbol )

The day, nigh buttons still work as before but the function it calls only sets the modus and the said day, night css/class name.

Each scene has a On scene load JS that it calls that will pick up the modus global vars and use them.

The close settings button also calls this function.

To stop an undefined error when we search for all the images in the document, I have limited the search to the current scene.

day_night_mode_MHv3.hypetemplate.zip (79.0 KB)

3 Likes
13

Oh, wonderful!
I prefer this solution over putting everything in a persistence symbol. Thanks a lot!
Although the loading of the js-file on every scene might be a source of error. But with the undefined error I guess this is the best way to do it.

Just a small comment on the file:
Right now it won’t change the modes until clicking the close-icon. By adding the action to run also the “imagePersistance”-function when clicking the day/night button it will change the images immediately.

Great!

2 Likes
14

Brill..

I should have thought of that doh.. :blush: