Advice on product / technical requirements


#1

Hi.

I’m a designer and iOS Dev who’s been tasked with doing a website design / animations / layout, but I’ll be working with a web dev to do all the back end coding and data display.

I have a question and I’m trying to find out which product on the market is right for this task (got 2 weeks to do it).

I’m looking at this, Blocs, Rapidweaver.

I’m not a web dev, so html, javascript etc is all beyond me.

I’m trying to display a google map view with specific locations on it. When a user clicks or touches (mobile device) on one of these custom pins, I need to slide over (but not obscure - so maybe shrink main view a bit) a panel which shows data on it - this data is pulled from several API’s and the web dev is doing the pulling and customising of the data and needs to ‘hook this up’ to show on ‘my’ panel.

This panel needs to show this live data with transition animations and drop down / scrolling sub sections.

When the user touches a different pin on the map, this slide over goes away and comes right back but with all new pulled down API fetched data and we start over.

Is this the right app to do this, bearing in mind I need to ‘design’ it and do all the graphics and layout, but the web dev needs to hook up the received API data (JSON etc) and connect it to the fields and animations on my panel / screens.

Or is this something Rapid Weaver is better suited at?

Or can’t this be done on a ‘no-coding’ app, and it’s got to be coded at ‘runtime’?

Please, any advice would be great.

I’ve written this as an iOS app using MapKit etc, but now I’ve been tasked to do this ‘on the web’… :confused:

Thanks for any help / suggestions.


#2

I think the majority of the labor would be working with the Google Maps API – here’s one example of running JavaScript when clicking on a pin: https://developers.google.com/maps/documentation/javascript/examples/event-poi

So in the example code there, you could pretty easily do a couple things with Tumult Hype’s JavaScript API:

Shrink the HTML widget containing the map:

mapframe = hypeDocument.getElementById('googlemap');
hypeDocument.setElementProperty(mapframe, 'width', 200, .2, 'easeinout');

(This would adjust the width to be 200 pixels wide over .2 seconds using the easeinout easing transition).

And then display a timeline containing additional data (also using the api):

hypeDocument.startTimelineNamed('timelineName', hypeDocument.kDirectionForward)

In that timeline, you could create a set of elements which dynamically load different text content based on what your backend dev links to place data. You would run these actions also in response to clicking specific points – you can use this example to adapt: https://developers.google.com/maps/documentation/javascript/examples/event-simple

What your backend dev would feed your frontend is map points (which you would initialize when building the GMap), text data to display in different elements based on those map points, and it would be your job to map the data to individual elements based on the map points being clicked. I don’t think any app has specific tools for assisting in this type of project – the required mapping of data to elements would look the same if you’ll be handling the design.

There’s a lot of examples on the forums here regarding loading JSON data dynamically into Hype elements that will be helpful for you. Doing this live would just require a constant polling / refreshing of that data. Hope that helps!


#3

@Daniel

Thank you for your very quick and helpful reply.

I’ve just been searching YouTube for a tutorial video on linking backend data / JSON to Hype Elements - couldn’t find any, but if you have an idea where / what to look for, I’d really appreciate it.

Do you think there is any merit in Hype PRO for doing this, or is the standard version equally up to the task?


#4

This is a great place to start, many thanks to @dbear:

But searching for Json will show you a variety of examples (on this forum).


#5

Ha! I’d just found that minutes before your reply. Great - I’m on the right track.

Did you see my question about the PRO version?

Finally, because the ‘panel’ I want to slide in will have LOTS and lots of these little text areas that are individual javascript / json calls, is there something in Hype that will trigger an animation when the js / json is complete?

So I can animate say, some nice progress bar or spinner, and then when it’s complete, I can animate reveal the text?

I looked at the ‘Actions’ in the inspector on the text box element from the example you referenced by they all seemed user driven and not data driven… I must be missing something… any pointers please?