Is it possible to create tappable areas that create points?

What I’m hoping to do it make it so that when a person taps in any area on the grid that one of the blue icons appears.Is that even possible? or should I have an asset bank of the boxes and make then draggable to areas? I would prefer a tap to create the dot as I’m not 100% sure how many plots would be on the graph.

I have included graphic as an example.

thanks for any help in advance!

1 Like

With only one point, this is easy. It’s done with JavaScript. On tap/click, change the location of a circular element with Hype’s Set/Get API. Basically, the location of the circular element is changed to the location of the tap/click.

With multiple circles, that’s complicated, as you’d have to keep track of when to move each circle.

This is just a proof of concept. It probably would need working on to fit you full needs.

But it is to show a way of adding plots at the mouse click point.

This example uses javascript and cloning.

Some notes:

When we clone within Hype. Hype is not aware of the cloned elements. Which means there can be some adverse results. I have hopefully countered two of these in this example.

1, You must always remove any Hype class names inherited from a cloned Hype element. If you do not the Hype js will at some point have it’s brains exit sideways which is not pretty. One example will be if you try and go to a new scene , you will crash and burn with errors. Because hype is trying to account for the extra named class element and cannot.

2, Clicking on a cloned element with a click event added works fine. But although what ever click function you use should work. Hype will register the event as a click on the layer below the clone also. But will not get the position correct.

if you click on an existing plot it is removed correctly but because Hype does not know about the plots, it will think we have clicked some where on the plotter and add a new plot on the plotter in the region of the top left. To avoid this we do not create any plots that are going to be in the region that hype wants to then create these errant plots. see the JS for creating the plots (44.1 KB)


I have made a new plotter which I will post in the templates a bit later.

This was not an easy one do, due to dealing with clones in hype not being seen by hype. And one of the hard parts was working out the deletion of plot lines.

You all can see it here first, I want to get some feed back before I put up the template .ie usability etc.

Live Demo:

1 Like

So before I release this it would be really good to get some feed back on usage.

Like :

  • Would it benefit if I add a way to hide all the nodes and leave the lines.
  • Should it have a full colour pallet. And node Pallet…
  • What could this be used for. My thinking is interactive educational pages.

@michelangelo I will also be putting it up on Hypedocks

Yes of course :slight_smile:

any thoughts on it… re. my questions as you are also the design genius… :smile:

would you like to change the graphics of this template?

The main background is just a layer which people can change to match their needs.
But if I introduce a pallet would be nice to have something that looks nice and maybe even offer different background templates to choose from.

My real questions is, are these sort of changes needed in this template, the other aim is to keep changes that others need to do as simple as possible, which would hopefully be just changing out images/svg. Rather than touch the code.

Also is this useful ?.

Wow! amazing work! I appreciate the examples as well!

I would think that changing the graphics would be something to make it easier for people to use as a template. Like being able to change the graphic for the points and background as you said.

thanks again! I did not expect full examples!

1 Like

Just had another thought. If someone was using this on an iPad they would not be able to hold shift or alt. to delete or add lines. I assume this functionality could be transferred to on screen buttons though? or could we use touch events like doubletap using a library like hammer.js or touchy.js?

1 Like

1; nice idea
2; with custom behavior
3; Yes it could be useful

the current background is ok :slight_smile: [quote=“MarkHunte, post:9, topic:6309”]
Also is this useful ?.
Yes, as a tecnical example and interactive educational pages.

Alternative use :
a classic Game for Kids, a less noble use but fun

in this case all marker are fixed and you can add only lines with a final goal ( complete the path). In this case we can make multiple scenes with an image per page. the user can move/add/remove all points (X,Y) to customize the game.


Just to let you know I have not forgotten this thread. Working on the next version in the slots of time I get :smile: