Using Hype Reactive Content to set (background)images

Hi @MaxZieb

Is it possible to fill the background image of a rectangle with an image from the resource folder? I can't seem to get the syntax correct if it is possible.
Example project attached:
imageReplace.zip (26.9 KB)

Thank you for your help.

Herman

From my understanding the extension applies innerHTML, so changing the css-property background-image is not the right usecase here.

anyway ... you can add some stepinfunction to manipulate the argument and make it an imagetag to be placed inside the targetelement.

changeImg.hype.zip (31,6 KB)

.... to say i'm not familiar using the extension ... just had a look ... so there might be a better way ... from the logic i'd use HypeDataMagic here

1 Like

You can use the data-content as Hans suggested, by inserting an image
changeImg-content.hype.zip (32,5 KB)

You can also create an effect by just forwarding the element either as element or $elm
changeImg-effect.hype.zip (32,9 KB)

These two files above use a general function like in the example from @h_classen
You can also create a content or effect with dedicated functions
(either including the var or constructing it)
changeImg-dedicated-effect.hype.zip (43,1 KB)
changeImg-dedicated-content.hype.zip (51,1 KB)


These are all examples only using Hype Reactive Content.
You can also combine it with Hype Data Magic.

2 Likes

@h_classen and @MaxZieb
:saluting_face: Elegant, very elegant! Love it.
Much appreciated.

PS: I'm not wanting to go to dataMagic yet. If I use the drag and drop enabler, reactiveContent and Statekit and dataMagic, I may just get lost. :sweat_smile:

ah ... i was not aware that one can pass $elm along ... :slight_smile:

Yeah, this is possible since v1.1.6 element or as a shorthand $elm, see this update:

The code defining the execution context can be found on line 198 on the unminifed version. As you can see there the context consistent of all command found in hypeDocument plus element and $elm. Furthermore, the proxy resolves unknown variables to the scope (in this instance that is customData). Only keys found in window or the context can escape the proxy trap for unknown keys. By the way, the context is enforced using a with statement … and if you think this is a wild approach it is actually how VUE does it as well.

2 Likes

BTW you can literally also just change a background of a Hype Image on stage this way. That way you have a little preview initial image.

2 Likes

2 posts were split to a new topic: Using Hype Reactive Content in combination with Hype StateKit