theron_hp
(Herman)
September 7, 2022, 9:42pm
1
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
h_classen
(Hans-Gerd Claßen)
September 8, 2022, 7:32am
2
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
MaxZieb
(Loves Hype)
September 8, 2022, 8:29am
3
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
theron_hp
(Herman)
September 8, 2022, 8:47am
4
@h_classen and @MaxZieb
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.
h_classen
(Hans-Gerd Claßen)
September 8, 2022, 11:13am
5
ah ... i was not aware that one can pass $elm
along ...
MaxZieb
(Loves Hype)
September 8, 2022, 7:07pm
6
h_classen:
can pass $elm
along
Yeah, this is possible since v1.1.6 element
or as a shorthand $elm
, see this update:
↑ look at project
1.1.6 Added bubble type listener for action and behavior as data-content-changed-action, data-content-changed-behavior, data-visibility-changed-action and data-visibility-changed-behavior. Added $elm and element to code execution even if not used in conjunction with Hype Action Events
In addition to the custom behavior listener approach, you can now listen to content or visibility changes based on setting a data attribute. These attributes are now supported data-content-chan…
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.
return hypeDocument.triggerAction (code, {
element: options.element,
event: { type: options.type},
scope: scope,
});
} else {
try {
let $context = new Proxy(Object.assign({
element: options.element,
$elm: options.element,
}, hypeDocument), {
set (target, key, val, receiver) {
if (!Reflect.get(target, key, receiver)) return Reflect.set(scope, key, val);
return Reflect.set(target, key, val, receiver);
},
get(target, key, receiver) {
var value = Reflect.get(target, key, receiver);
if (value) return value;
2 Likes
MaxZieb
(Loves Hype)
September 9, 2022, 12:10am
7
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
MaxZieb
(Loves Hype)
Split this topic
September 27, 2022, 10:41am
8