Welcome Map Sign

(Sarah Pritchard) #1

I’m building an interactive welcome screen for an office complex.

After a week of trying things from the forums, I’m unable to get it to work in the conventual visual hype build.

I found some js script in the forums Button changed when pressed and stays that way until other button is pressed (Color Picker)

Which I think could be adapted

Being a complete beginner Im very confused as to how to do this.

Advice would be most helpful as to how I achieve the interactions below

What I would like to do is…

Tapping on office/space text, text highlights and the office space highlights on map,

Another office/space text space is touched the previous space disappears, new space and text are highlighted

Highlighted space needs to time out and revert to dormant mode after 10 seconds if there is no interaction with the screen

The other thing is I need to disable are gestures ie expand, reduce, swipe

Thanks in advance for any help


Hi Sarah!

Welcome to the Forum.

Something that is not clear to me - what else is supposed to happen when with the graphic for an office space or the text bar for the office space is clicked - other than they both highlight?

What is the advantage of the text bar - why not just have the map with the office names filled in?

These two questions might influence a solution (from my perspective).

Also how are You at JavaScript? (Timelines would probably work, but a little JavaScript might prove useful).

(Mark Hunte) #3

The project in the link has probably a more a complicated structure than is needed.

here is a simple example.

It uses class names and id’s to get all the element groups and the correct ones to change. The timer is simply a timeline calling the same function as the selections.
The timer is reset also each time the function is called either by the timer timeline of the selection.

The structure of this is very simple.

The main thing to remember is that the colour change is very fast. So rather than try and workout what colour to reset back to neutral just reset them all in one sweep and then set the two elements that you need to be changed to yellow.

office.hype.zip (17.6 KB)


Ignore the function that runs on scene load. That me just being lazy and not wanting to name the elements by manually editing the innerHTML

(Ken Heins) #4

For me, your office.hype.zip file crashes Hype on Hype preview. 3.6.5

(Sarah Pritchard) #5

This is perfect, thank you so much,

You mentioned inner Html and I blocked out

officeSelections[i].innerHTML = officeSelections[i].id

offices[i].innerHTML = offices[i] .id and renamed all the elements

It worked a treat, :slight_smile: Amazing, thx a million

Quick question: How one might pull "Display name”

from identity instead of using the inner Html to display

the name? Not required, just curious.

(Sarah Pritchard) #6

Just had another thought if said office was co sharing space and I wanted to link
numerous names from right hand side to one office space How might I achieve that ?

(Pete) #7

Sarah, @MarkHunte took the javascript approach since its a bit easier and faster for him but if your are like many that don’t usually code and someone that relies on out of box options this might not be clear for you. Like @JimScott mentioned using timelines, If it were me, I would’ve taken the timelines option. As an alternative, this believe it or not can be achieved with scenes which is what I would’ve recommended for you to begin with.

Here are a few examples that got me started to using the timelines.

(Mark Hunte) #8

Hi Not at my Mac at the mo,

Can you explain what you mean a little more I am not sure I fully understand?

(Sarah Pritchard) #9

Hi Mark,Iwas curious as to how one would pull the assets name From the Identity box instead of giving them a name in the inner html?

(Sarah Pritchard) #10

@petester Thanks for the links I shall have a look :slight_smile: Genuinely suspect I should start learning the coding angle of this application, the visual feels limited and a bit convaluted in comparison.
I will give the timeline approach a go, see if I can create a co sharing space with multiple office names from one of the space spaces…

Thanks for all the input

(Mark Hunte) #11

I assume you mean Symbol name.

You can use Symbol onload in the Symbol Inspector Actions to run something like

//-- Calling Elements should be a duplicate Symbols which you can rename individually// NOT Copies which point to the same instance therefore one display name.
	 var thisOffice = hypeDocument.getSymbolInstanceById(element.id).symbolName() 
		//-- get and set the innerHTML of an element inside the symbol
		 var innerObject  =   element.querySelector('.OfficeSelectionInnerObject')
     	innerObject.innerHTML = thisOffice

And use the name also to name the corrosponding office…

(Sarah Pritchard) #12

Exactly what I was thinking, Brilliant :slight_smile: Thank you.

(Pete) #13

I assure you that is not case with Hype. Hype was built around the idea of giving its users the control with less code primarily. Now, to take the project to the next level, scripting is made available. On another note, It might just be how you perceive this project and how it was presented to you in the first place. I could’ve created this interaction entirely with scenes and it wouldn’t take me long it would look better and less confusing to you. It could very well be your not being familiar with the features of the program and what you can achieve with Hype. That said, I strongly recommend you get trained on what you can do with built-in Hype features before you can say “visuals feels limited and convoluted”.

Trial out skillshare for 30 Days and get trained on the below.

(Mark Hunte) #14

Thanks @petester,

I totally agree, I meant to comment on that in my post but got side tracked and forgot…

Both ways go hand in hand. Sometimes for me at least it is easier to conceive an idea in code and other time in the UI.

Also a small point , I can do things with just the UI but not with just the javascript.

(Pete) #15

To marks point @spux there you have it, everyone has their own preference on how they use the program.

For @MarkHunte he’s a code ninja and might I just add one of the few that is kind enough to share his thought process with everyone here on the forum, we should all be thankful to have him. @spux your free to interpret and rationalize to how you see fit, but the truth of the matter is, Hype’s built-in features are not limited nor are they convoluted if anything, they work across the board together as one great app.

(Mark Hunte) #16

So… any way…

@petester if you do have sometime on your hands maybe this would be good to demonstrate with an example.

It would be a great for all of our learning curves, including us so called ninjas!!

(Pete) #17

You Ninja

Sure, DM’d earlier @spux to provide me with a hype file. This would mean I would do the entire project for her :wink: but I don’t mind, let do this

(Sarah Pritchard) #18

@petester I’m flumixed to be honest I’ve drawn out use cases and can’t work out how to do it soley on a visual level I think one genuinly needs JS to complete this project.

Listed again below the projects full requirements for you to play with.

Tapping on office/space text, text highlights and the office space is highlighted on the map,
Another office/space text space is tapped the previous space disappears, new space and text is highlighted
Highlighted space needs to time out and revert to dormant mode after 8-10 seconds if there is no interaction with the screen

Co-sharing offices 1 and 2 will require linking to numerous names on the right

Gestures need to be disabled ie expand, reduce, swipe as the only interaction will be touch/tap interaction

attached clean working file
Interactive sign.zip (269.9 KB)

(Loves Hype) #19

Don’t worry I am not stepping in on this just a quick mediation attempt :slight_smile: . I think this project needs JS todo the switching and the color and animation can be done with relative timelines and/or symbols. One note though… technically using the mouse/tap actions, scenload etc. with actions like starttimeline and so on validates already as JS Programming only that you don’t type it… you click it together. Also another note for a decentralized activation and deactivation of animations custom behavior is perfect.

Best regards from the train station.