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).
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.
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 ?
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.
@petester Thanks for the links I shall have a look 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…
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…
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".
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.
@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
Don’t worry I am not stepping in on this just a quick mediation attempt . 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.
Amazing, thx a million
but I don’t mind, let do this…