I’m working on a comic strip website and I have an idea of interaction section. Like coloring a sketch. It will be black n white but the user can click on a color and then click on any part of the sketch and it will be filled with the selected color. Any ideas on how to do that with Hype? Or it’s even possible to do that? Thanks in advance
for example if you’ve got a svg-code as source you add id’s to its related paths and change their fillcolor onclick
Can you help me achieve that? It will be my first time doing that.
I need to create the drawing with layers or just assign the parts of it?
no luck with it?
I missed the prior post. I’m going to try it and let you know! Thanks
I’ve built a similar SVG coloring book for an interactive kiosk with the help of @drewbullen. For some reason mine does not work in Safari but only in Chrome.
I’ve used it this way for a few months but the Chrome kiosk software I’m using is not very good, and it appears that I need to make it work in Safari now so that I can use it with xStand. Any suggestions as to why Safari won’t allow me to interact with the SVG? Here’s a link to the scene that has my example. Thanks.
this document is … well kind of a mess at the moment. 
sry
if all your svg-paths have a common class i would use this as an starting point to remove all those id-calls.
just add an eventlistener for every path of a class …
No offense taken. It is a mess. That’s what happens with deadlines sometimes. Also this only a small part of a larger interactive.
I’ll go back through and start from scratch with a simpler test file. Thanks.
1 Like
So I tried to start with a simpler example. I made it work, but only if I create a separate eventlistner for each id. They’re all the same class, but why does that matter? Can I add an event listener for an entire SVG class? Wouldn’t that change everything in the common class?
4square_clickTest.zip (17.0 KB)
thx for the example. well you can not add an event to a htmlCollection, but you’ll get the possibility to set up a loop … 
4square_clickTestClass.hype.zip (16.2 KB)
1 Like
As usual Hans You keep expanding my understanding of JavaScript.
Just now have had the opportunity to explore the code in your Hype project above…
var _box = [].slice.call(document.getElementsByClassName('box'));
What a useful part of JavaScript to know.
Thank You!
@h_classen, that’s working great now.
I do have one issue though. I was using your idle timeout function in the HTML header of the document, and that seems to be causing me issues. When I remove it, everything works fine, but if I include it, the paint function no longer works. Is this an issue with the event listeners?
I don’t like to use code that I don’t completely understand, but your idle timeout function worked so well. Thanks.
Here’s what I have. Remove the HTML header code to make the paint function work.
https://dl.dropboxusercontent.com/u/11350320/elephantPaintTestHans.hype.zip
sry one function stopped the sceneloadevent within hype to fire …
one additional thing: it does not not work on FF. Matter seems to be the fill of a svg-path which can not be applied …
1 Like
@h_classen, that was it! Thank you.
Now to my last problem. I don’t want to have a different function for each of the six paint scenes, so using the element id doesn’t work well. If I put the color name in the Class Name and use element.className instead of element.id, shouldn’t that work? It doesn’t. Can someone tell me why?
if (element.className == "DarkGreen"){
hypeDocument['currentPaintColor'] = "01C176";
}
else if (element.classname == "DarkBlue"){
hypeDocument['currentPaintColor'] = "006BBD";
}
else if (element.className == "LightBlue"){
hypeDocument['currentPaintColor'] = "019EBF";
}
else if (element.className == "LightOrange"){
hypeDocument['currentPaintColor'] = "F99D00";
}
else if (element.className == "LightGreen"){
hypeDocument['currentPaintColor'] = "A9DA0D";
}
else if (element.className == "Yellow"){
hypeDocument['currentPaintColor'] = "FEE801";
}
else if (element.className == "Purple"){
hypeDocument['currentPaintColor'] = "7002A3";
}
else if (element.className == "DarkOrange"){
hypeDocument['currentPaintColor'] = "FD7802";
}
else if (element.className == "Red"){
hypeDocument['currentPaintColor'] = "E10015";
}
else if (element.className == "Pink"){
hypeDocument['currentPaintColor'] = "F7008F";
}
I think I figure it out. Seems like Hype adds "HYPE_element " before the class name. Anyone know why?
to get it all work well ¿ 
i suppose ... 
though i thought "what a silly question" i have to appologize not that bad at all
when hype offers classes as an feature it may use attributes for its own management ... to avoid conflicts/irritations
Hi Jason!
So what does your code look like now?
Thank You!
It adds the class name so that Hype knows what type it is and probably to do with the way it finds elements.
This code will return whether the class list contains a certain class name.
if (element.classList.contains("DarkGreen")){...
1 Like
@JimScott, this is what I ended up with. I made a list with my class name and color pairs and added the “HYPE_element” text in the for loop.
var colorPairs = [["DarkGreen", "01C176"], ["DarkBlue", "006BBD"], ["LightBlue", "019EBF"],
["LightOrange", "F99D00"], ["LightGreen", "A9DA0D"], ["Yellow", "FEE801"],
["Purple", "7002A3"], ["DarkOrange", "FD7802"], ["Red", "E10015"],["Pink", "F7008F"]];
for (i = 0; i < colorPairs.length; i++) {
if (element.className == "HYPE_element " + colorPairs[i][0]){
hypeDocument['currentPaintColor'] = colorPairs[i][1];
break;
}
}
1 Like