Help using the tap web app

110 views
Skip to first unread message

noam.hi...@gmail.com

unread,
Aug 18, 2013, 1:20:38 PM8/18/13
to tap-d...@googlegroups.com
Hi,

I'm trying to install and serve the tap web app, but I'm not sure how to serve it,
and can't find any instructions how to do it...

I am probably missing something really simple here, this is what I have done:

- clone the git repo.
- follow https://github.com/IMAmuseum/tap-web-app/wiki/JS-Build
grunt runs successfully.

simply having the folder in my apache's public_html directory and open index.html gives me a blank page.

so, how do i correctly serve it?


Thanks in advance,
- Noam


Kyle Jaebker

unread,
Aug 19, 2013, 7:46:00 AM8/19/13
to tap-d...@googlegroups.com
Noam,

You will need to provide a TourML document for the web app to process. If you edit the file dist/Config.js you will see that one of the settings is: tourMLEndpoint. You must set this to a TourML document and then the web app will parse it and display your content. If you do not have a TourML document, you will want to look at this repository to setup the drupal authoring tools https://github.com/IMAmuseum/tap-cms

Hope that helps,

Kyle

--
You received this message because you are subscribed to the Google Groups "TAP Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tap-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

This email message is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact Kyle Jaebker by reply email and destroy all copies of the original message.

noam.hi...@gmail.com

unread,
Aug 19, 2013, 4:49:15 PM8/19/13
to tap-d...@googlegroups.com
Hello Kyle, thanks for replying.

I tried to change tourMLEndpoint in dist/Config.js to various paths to tourml files -- but I always keep
getting a blank page.

By default it is '../../tour.xml' and tour.xml is a simple tour that comes with the rest of the source code.
I changed it to '../tour.xml' and some other stuff but nothing worked. Also tried with another tour that
I created with tap-cms (which I do have working).

So I don't think that that is the problem, I think it is rather more likely it is related to node.js, because
I don't fully understand how it works. In all the basic node.js tutorials I've seen that they build a simple
server, but in tap-web-app there is nothing like that. Can you explain how that should work?

Kyle Jaebker

unread,
Aug 20, 2013, 2:42:34 PM8/20/13
to tap-d...@googlegroups.com
Noam,

The tap web app does not require node.js to run. That is just used as part of the build step. In addition, you do not need to run the build unless you have made changes to the web app code. It should work with a proper tourml set in your Config.js file.

Do you have a link you could share? I would be happy to take a quick look and see if I can spot the issue.

noam.hi...@gmail.com

unread,
Aug 21, 2013, 8:08:54 AM8/21/13
to tap-d...@googlegroups.com
> The tap web app does not require node.js to run.
I see.

> Do you have a link you could share? would be happy to take a quick look and see if I can spot the issue.
It's on my laptop and the server is not public, so I don't know how to give you access but thanks.


Since it is not a node.js problem I went looking at the javascript console when looking at index.html and devel.html,
as for index.html I saw:

> [14:02:41.014] ReferenceError: $ is not defined @ http://localhost/~noam/tap-web-app/:19

meaning jquery isn't even imported... this line implies that it should be:
    <script src="dist/js/TAP-Web-App-1.1.0-with-dependencies.js"></script>
even if i include it with another <script> tag there are other things that are missing.


I did have some luck with devel.html though. It seems to be configured with 'Config.js' and not 'dist/Config.js'

I downloaded some tourml file that i found after looking in the tap website, so I can use it for testing:
http://www.beholdamerica.com/mobiletour/  (http://www.beholdamerica.com/mobiletour/data/BeholdAmerica.xml)

When I set tourMLEndpoint in Config.js as follows:
var tourMLEndpoint = './BeholdAmerica.xml';

Then devel.html shows something other then a blank page (!!!), but it does not look like the site mentioned above,
there is just a black bar on the top with "Select a Tour" and 3 long empty buttons (that do nothing when pressed).

interestingly if i set tourMLEndpoint to the full url from their site  (http://www.beholdamerica.com/mobiletour/data/BeholdAmerica.xml)
then devel.html is blank again. (although the javascript console does show that this url is loaded)

It will be helpful if you can explain the behaiviours that I'm seeing here and how to fix it.


Thank you,
- Noam

Don Erwin

unread,
Aug 21, 2013, 10:58:24 PM8/21/13
to tap-d...@googlegroups.com
Noam,

Just a thought.  I had to rename the TAP-Web-App-1.1.0-with-dependencies.js file to Tap-Web-App-1.1.0-with-dependencies.js.  Note the case sensitivity issue between "TAP" and "Tap".

Give it a try and see if it helps...

-Don

noam.hi...@gmail.com

unread,
Aug 22, 2013, 7:59:42 AM8/22/13
to tap-d...@googlegroups.com
Don,

I have actually tried that but forgot to mention it. In both cases I get "ReferenceError: $ is not defined",
is that also the case for you when you look at the javascript console?


- Noam

Don Erwin

unread,
Aug 22, 2013, 9:08:40 AM8/22/13
to tap-d...@googlegroups.com
Yes, I get that exact error on IE, Firefox, and Safari only.  I do not get the error in Chrome.  Have you tried opening it in Chrome?  I documented this same issue in the previous post titled "Web App won't display in IE??".  

Let's keep in touch as I am eager to get this resolved, too!

-Don


--
You received this message because you are subscribed to a topic in the Google Groups "TAP Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tap-discuss/d6UyS5puYHA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tap-discuss...@googlegroups.com.

Kyle Jaebker

unread,
Aug 22, 2013, 1:48:04 PM8/22/13
to tap-d...@googlegroups.com
I have found a few bugs today that might be related (I haven't had time to throughly test). Grab a new copy from GitHub and let me know if that helps.

Kyle

noam.hi...@gmail.com

unread,
Aug 25, 2013, 11:15:44 AM8/25/13
to tap-d...@googlegroups.com
Kyle,

I have updated to your last changes, unfortunately there is not much change.
The case sensitivity of "TAP-Web-App-....js" issue is resolved when the file
name and the reference match - no problem there.

There is one important thing though that I want to ask: where is the TapAPI variable defined?
In the js console I get now "Reference Error: TapAPI is not defined" and it is indeed not defined
anywhere as far as I can tell. That name is used like:

TapAPI.helper = { // some stuff }
TapAPI.XYZ = { // more stuff }

And yet it has no definition.

I think if we solve this it should work.


Thanks,
- Noam

Kyle Jaebker

unread,
Aug 25, 2013, 9:30:23 PM8/25/13
to tap-d...@googlegroups.com
Noam,

I will try to look into this more tomorrow, but the TapAPI variable gets dfined in the TapAPI.js file (which gets included with the compiled js file in the dist folder)… See here: https://github.com/IMAmuseum/tap-web-app/blob/master/js/tap/TapAPI.js

I did a quick search in https://raw.github.com/IMAmuseum/tap-web-app/master/dist/js/TAP-Web-App-1.1.0-with-dependencies.js and TapAPI is defined in there. Its the first thing after all of the dependencies are included.

noam.hi...@gmail.com

unread,
Sep 10, 2013, 9:41:09 AM9/10/13
to tap-d...@googlegroups.com
I still can't get it to work.

It shows 3 buttons without any text and without links (see screenshot).

The number of buttons do change if I add or delete tours in the tourml file,
so there's that. It seems to get the right file and all, but does not show the
content.

First, can anyone try to run it with the following file(1) set in dist/Config.js (tourMLEndpoint: 'BeholdAmerica.xml'),
and tell what do you see?

(1) http://www.beholdamerica.com/mobiletour/data/BeholdAmerica.xml


I did go around the code and added some "console.log" statments in TAP-Web-App-1.1.0-with-dependencies.js.
I couldn't figure out what is the source of the problem... I currently get in the js console:
Empty string passed to getElementById() in line 44073, what's that about?

44072                hash = path.stripHash( path.stripQueryParams(path.parseLocation().hash) ),
44073                hashPage = document.getElementById( hash );


Another thing that I was able to do:
in the function tourInfoPopup which is in TapAPI.classes.views.TourListView,
the variable target was always null when I printed it out, so I _manually_ set it to an ID of
an actual tour in the file ('tour-112') and then when you click at any of the buttons you get
the actual popup with the description from the TourML file (wow!). Also, that is another indication that it does
in fact read the file.


Hope you can help me to solve the issue soon,
- Noam




Kyle Jaebker

unread,
Sep 10, 2013, 10:55:34 AM9/10/13
to tap-d...@googlegroups.com
Noam,

I just looked at your tourml file and a couple things you can do to get further along…

The reason you are not seeing anything in the tour list is because there are no AppResources with a usage of image in the tour metadata. The web-app uses this image to create the tour listing screen. See here for an example:

Additionally, I notice that your tourml has the following view attributes on your stops:

tour_video_stop
tour_image_stop
tour_audio_stop
tour_stop_group

For those to be mapped to the proper views you will need to update the Config.js file and add the following to the view registry property:

viewRegistry: {
        'tour_audio_stop': {
            view: 'AudioStopView',
            icon: 'images/audio.png'
        },
        'tour_image_stop': {
            view: 'ImageStopView',
            icon: 'images/photo.png'
        },
        'tour_stop_group': {
            view: 'StopGroupView',
            icon: 'images/list.png'
        },
        'tour_video_stop': {
            view: 'VideoStopView',
            icon: 'images/video.png'
        },
    },

That will ensure that the stops you have are mapped to the correct views. I also noticed a view of type "page" this is not something that we have out of the box support for. You could potentially adapt the web stop in the web app to display this content though.

Hope that helps.

Kyle

From: "noam.hi...@gmail.com" <noam.hi...@gmail.com>
Reply-To: "tap-d...@googlegroups.com" <tap-d...@googlegroups.com>
Date: Tuesday, September 10, 2013 9:41 AM
To: "tap-d...@googlegroups.com" <tap-d...@googlegroups.com>
Subject: Re: Help using the tap web app

--
You received this message because you are subscribed to the Google Groups "TAP Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tap-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Kyle Jaebker

unread,
Sep 11, 2013, 1:33:09 PM9/11/13
to tap-d...@googlegroups.com
Noam,

Just committed a couple of fixes that might get you further along.

Kyle
Reply all
Reply to author
Forward
0 new messages