Custom HTML navigation doesn't work on touch screen

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
  • (Edited)
I've created a navigation, using jquery to toggle through the web page widgets using 'show' and 'hide'.  However, the touch functionality on both the navigation and the web page widget does not work on our touch screen.

The webpage widgets have the interactive checked, and the functionality works on the preview screen.

Do I have to use the HTML widget to write the navigation.
Is the touch point same as a mouse click?
And would widget layers affect the functionality even if the top layers are hidden?

Any help would be great.
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Hi Acton,

Thanks for the questions. To get a point of reference, could you please provide a preview of the presentation that you have created?
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Acton,

Thanks for the information. My first thought is that the touch event of your hardware could register with chrome differently than a click, if that's the case, you'll need to change up your html to recognize a touch input.

A quick way to test if this is the case, is by using Chrome's Developer tools. I've attached a screenshot showing the Touch Breakpoint. If you open up Developer tools, then enable the touch breakpoint, then test touch on your display, the presentation should pause. If this pauses, that tells you that you will need to enable a touch command for navigation in your html.
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Hi Blake,

Sorry, took so long to look at this.... I will try and apply this and let you know soon.
Does this test require enabling the touch in Chrome Developer on the touch display?

Thanks,
Acton
(Edited)
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Acton,

As Blake has said: "You will need to enable a touch command for navigation in your html." That means in the code of your presentation.
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Thanks Darius, I'll give that a try and let you know.  I guess the touch commands have been written into the widgets?
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Hi Blake,

I have tested the the site by enabling the touch break points in the Chrome developer tools.  On both my MacBook and the touch screen, it doesn't pause as you have mentioned.  Also, I have tested the touch screen using Chrome Browser by calling the preview window, and the works as it should.

So perhaps I need to configure the RiseVision app?

I am trying a few different jquery scripts.  However, it seems I need to add the script library to the HTML, and this seems to crash some of the elements within RiseVision. ie, my scrolling banner stops working and the hide page all disappear.

Could this be a hardware issue with the RiseVision app?  Any other suggestions I should try?

Thanks for you help,
Acton
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Acton,

Have you updated the Presentation you refer to above with the jquery scripts that are stopping your banner and removing the Hide Page? I'd like to investigate further, but I want to make sure I am looking at the correct Presentation.

Thanks!
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Hi Robb,

I have just updated the HTML to reflect my attempt at activating touch points.

Thanks for your help,
Acton
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Acton, I can interact with the links in the Presentation while running on a Linux and Chromebox Display, but not on Windows. I'm not sure what is causing it to not run on Windows, it may be a glitch with my hardware that I will investigate. 

But I can confirm for 100% that the interactivity occurs on the Chrome App and Linux Player. When I interact with those buttons, all that happens is it highlights those buttons and changes their color to show it is selected, but nothing else in the Presentation changes. In the Editor, I see that section has the several Placeholders containing the Web Page Widget, but I don't see anything show in that section when I interact with those buttons. Is something supposed to happen?

Also, when I look at this Presentation, I get the impression you want it to be a Multi Page Presentation. Does any of the documentation here assist in completing this Presentation?

Thanks!
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Darius,

Really? I can open that link fine, and go to the various other pages therein. Is there a specific page that is giving you that message?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
this is weird... I clicked "here"a couple of times I found nothing there. But now it is working.
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Hi Robb,

Windows is producing the same results.  What I previously did was added a jQuery script to show and hide each webpage widget, but I assumed the RisePlayer would recognize a mouse 'click' instead of 'touch' points which was suggested it might need.  So the page you're seeing is my attempt at adding touch points.

However, I may have just answered my own question trying to answer yours.  To my understanding, the RisePlayer requires the webpage widget for the webpage content to work.

Instead, I created HTML links hoping it would be interactive outside of the webpage widget.
Does this make any sense?

Alternatively, I can build a custom webpage and host it on either my server or in google storage with a proper HTML navigation, and call this page as a single site into the web page widget.

Seems having everything in the RiseVision editor is most ideal.

Acton
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Yes, the link works for me too :)
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Interesting, the link from the email gives me a "page cannot be found", but it works fine if I click on the link in this thread.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Acton,
Another suggestion would be to check with the cabling - for example a touchscreen display monitor may have the HDMI cable for the images and also another USB cable to connect with the NUC to also enable touch. If you can confirm no further hardware or cabling issues that would be useful,
Thanks
Hannah
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Hi HSuarez,

Our touch screen is a complete unit with screen and computer inside a nice little kiosk display box from our distributor, I can take a look at the hardware and ask for support on it if I have to, however, the widgets work independently if I don't try and add additional HTML or javascript customization's to it in the editor.  For example, I can add 2 webpage widgets beside each other with 2 different webpages in each, and it would work as it should.  However, I was trying to be fancy.
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Acton,

I'm glad to hear that building the webpage will work for you. Let us know how you make out! We'd love to see what the final Presentation looks like!
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Robb,

Actually this didn't work.  Since I had to put each page in as an iframe, I think the RiseVision App blocks it, working on applying the multi-page from the link.

Will let you know.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Acton,

I was following this conversation with my one aye. I am not gonna get into the details or suggest or advice as I am not a web designer. I just wanted to show you one of my projects in process for a multi-page presentation. I am using an IFrame here too, but in a different way perhaps. Take a look at it if you are interested. I know my navigation is working just fine on a touchscreen display. If you needed any portion of code or anything, let me know, I would be glad to help you.

http://preview.risevision.com/Viewer.html?type=presentation&id=79880b96-0f01-4422-bd73-1980070b3...
(Edited)
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
HI Darius,  Thanks for the preview, that is pretty much what I am trying to achieve.  I'm still trying to figure out whether it is my HTML structure or something with the Javascript I am not understanding.

Question, is your presentation a stand alone website inside an iFrame?
What I am trying to achieve is each link directs to a different webpage widget which showcases a different webpage on our server.

I tested the touch screen again with my original presentation I posted the link for.  I noticed I can use a wireless mouse and a keyboard 'tab' to toggle through the links, and it works.   So the original suggestion may be the solution by adding touch points, otherwise I may need to figure out a multi page presentation.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Acton,

What I did there, I created a webpage with an Iframe and navigation. Navigation is loading different PRESENTATIONS (I used simple presentation preview links there) to that IFrame. The problem with that is that I do not get 'paused' widgets, but instead every presentation needs to be re-uploaded each time... duh :) But that works; I get little presentation loading window, but it ain't that bad. Still, it is not final. I have another can of worms there - another presentation with Webpage Widget pulling Joomla based website basically replicating everything you saw in that preview link. I really like it and I would go with it if we solved reliable hosting problem (this is why I cried like a little b here asking if RV would give us hosting option too in their storage). However, I had great success with website installed locally (skipping RV at all), but it is yet to be tested for reliability (I need a better Windows device for that).
Today I am gonna start making what Robb and RV were offering. I only wish there was an easier way because JS sure looks like some sort of sorcery to me :)
(Edited)
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Darius,

I don't feel so bad anymore, I'm not the only guy who doesn't know JS as intimately as I should.  But you've given me a clue I will try.  I loaded the pages into the google storage and called the link from from the storage, maybe that's why the iFrame's aren't working.  I was trying to stay away from our web servers, but I will test this out.

The RV solution does look the most promising as it pauses the gadgets/widgets/etc... when hidden.  I am still attempting it, and will definitely share when successful.
Photo of Acton Ho

Acton Ho

  • 220 Points 100 badge 2x thumb
Got it working using the multi-page presentation template given by Robb.  After adding my own CSS for the navigation.  Be aware of the z-index for the navigation, got caught a couple times it was hidden under other layers.

You can see the preview presentation here.  This will change over time as I fine tune it.  But at least I was able to get the basics down.

I'll be playing around with the HTML to figure out why my previous HTML structure wouldn't work.

Thanks everyone for your help!!!

Just a note, still haven't fully figured out the JS on renaming the widget ID's.  It seems to work fine without changing any of the widget ID's for the web page gadget.

Thanks,
Acton