How to properly set up a rails app to load hype files in a view

Hi, I’m trying to export a page with animations from Hype 3 into a rails 4.2+ environment. I have the application set up to load the html file, however I’m looking for a simple way to integrate 1 view with it’s supported js files into the program. When we load our landing page, it flickers orange but then searches for js to load and it fails. Please provide some guidance on how to properly export a view from Hype and how to properly insert it into the Rails app file structure (e.g. are there file references to be modified etc)

below are screen shot that illustrate the issue i am having. I am able to get my app to load appropriate html.er file that houses the entire content from the hype index file as you can see… my css and javascript files are in the appropriate place for it to load into the view “i tested it with a plain html and css file worked great” BUT for some reason with the hype version none of the java files are being detected. any idea to What is going on and why. and if there is an guidance you can offer to help using hype files in a rails app environment

@jonathan @DBear @JohnnyMoon @JohnnyMoon @MarkHunte @Photics @Daniel
src="/uploads/db2156/original/2X/9/9acdeef671f6ba4b566f2957d6d54a30790c4bfa.png" width=“690” height=“484”>


<img

Have you tried pointing it to the generated script minus the ?##### number after it? Maybe this is confusing things.

Unfortunately I’m away from the office now until Tuesday so can’t do anything without computer.

D

It actually is pointed there. I have no idea where those random numbers are being generated from.

@JohnnyMoon Do you mean a scene?

D

@Daniel could you move these to a new post?

Does your index_hype_generated_script.js file exist in the directory shown here (the fifth line)?

http://forums.tumult.com/uploads/db2156/optimized/2X/7/73acf43596a151bdbb69dc60690fd292e55b90d8_1_690x131.png

If it does exist there, I would check file permissions. If it does not exist, move it into that /assets/javascripts/ folder.

it does exist, Iand it wasn’t a permissions issue

@Daniel would it be any help if i shared the actual hype document?

Can you see if this happens when you remove the cache manifest reference at the top of the HTML file?

it doesn’t seem to have any fx at all

Can you share your .hype document?

What I don’t get is how you’re getting Hype-specific errors (as thought the document has loaded) even though your console says that the JS file could not be found. My guess is that it is a custom JS issue. Can you load that document when you preview straight from Hype? Does it work on a live web server? I ask this because loading from localhost might be part of the problem, since I see you’ve got a lot of extra JS loaded from your resource library.

landing page.hype.zip (399.5 KB)

That project is missing jQuery, which the console says the bootstrap.min.js needs

@MarkHunte Thanks Mark I updated the resource folder, and tried to run it again… below all the run results as well as the updated hype file.

landing page.hype.zip (461.9 KB)

Where did that jQueryInputFocus.js come from?

It looks like it’s code was copied and pasted. In doing so the line numbers were included. … They need to be removed.

its part of different page. the rails app is routed to pull all the assets from the same directory which is separate from where the hype html file is. but i also have a copy of the hype resources there as a fall back

Problem solved. Turns out i had to point it to the js file from vendor/assets/javascripts/ from within the newly era that contained my entire hype html… Super excited and back on track… Thanks for all the help and support guys!

I’ve written a Ruby gem that makes it easier to integrate Hype animations into the Rails Asset Pipeline. See https://github.com/nmagedman/hype_assets for installation/usage instructions, but the basic idea is that you tack on a .hype extension onto your foo_hype_generated_script.js file, and otherwise treat it like any other js file.

I would definitely appreciate feedback!

1 Like