xl97:
Couple things...
1.) I dont have any experience with Node.js so I wont be including that in anything I talk about.
I also have none, hence wanting to make sure about suitability for purpose before I try to get in to deep.
xl97:
2.) Java != Javascript.. Not sure who or where that came from.. but it needs to be clear.. and we need to use the correct naming conventions.
That's my mistake, I'll blame it on being tired, but I should know better
xl97:
3.) Can we clarify (maybe I missed it?) abotu HOW this Windows 10 PC is set up?
-
You say it Running an HTML5/Java??/jQuery page...
-
Java means javascript then? or real Java?
-
What does 'running' mean? Its a bit confusing as to what 'running' means.. because later you talk about installing a 'Web Server'??
It this just a static HTML page running locally of the desktop or something?? Or do you have web server software installed so it run say PHP scripts or have a database..etc..?
The single page is hosted locally C:/ on an All-In-One TouchScreen Win 10 Desktop PC, running KioWare kiosk software, which is effectively Google Chrome with a passworded full-screen lock. I do have full access to the PC for setting up.
Apart from some HTML and CSS formatting, the page consists a jquery-3.4.1 script to run 6x fullscreen videos on button click and return to home/menu either at the end of playback, or if a home button is clicked.
Having everything stored locally on the desktop is beneficial;
1: for initial buffering as the videos are approx 350mb
2: in the event something doesn't work/breaks or gets unplugged the Kiosk side still continues to run normally with out the display lights.
xl97:
If you do NOT need two way communications..
this is an easy set-up IMHO..
- Install WAMP server
- Create 'web page'
- Upon page submission (of you can use AJAX if you dont want to submit the whole page) you call/execute a simple PHP script (I'm more familiar with PHP, so that is my go-to language) that sends out the data via COMM PORT.
- Your connected Arduino will 'listen' for any incoming serial data, parse it, and behave as you code it to, when an incoming action/command if sent.
I can not think of any reason I need two way communications.
I did look into a WAMP server, through my various googlings, and it looks like it should serve my purposes. My concern was that WAMPs documentation said it was very bad to shut it down without closing everything properly and could cause config issues/corruption. I can't control how this unit will always be turned off. For all I know they may just decide to unplug it from the wall at the end of the day.
I'll look into learning more about PHP and AJAX, do you know of any tutorials/examples that would help my specific situation.
Here's the kiosk page code, if that is any help.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="copyright" content="Bluntmedia 2020">
<meta name="language" content="EN">
<title>Bridges</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="tabs-menu">
<a class="video-tab" id="vid-1" href="JavaScript:Void(0);"></a>
<a class="video-tab" id="vid-2" href="JavaScript:Void(0);"></a>
<a class="video-tab" id="vid-3" href="JavaScript:Void(0);"></a>
<a class="video-tab" id="vid-4" href="JavaScript:Void(0);"></a>
<a class="video-tab" id="vid-5" href="JavaScript:Void(0);"></a>
<a class="video-tab" id="vid-6" href="JavaScript:Void(0);"></a>
</div>
<div id="tabs-content">
<button class="modal-close" >MENU</button>
<div id="modal-1" class="modal">
<video id="video-1"><source src="video/1_1.mp4" type="video/mp4"></video>
</div>
<div id="modal-2" class="modal">
<video id="video-2"><source src="video/2_1.mp4" type="video/mp4"></video>
</div>
<div id="modal-3" class="modal">
<video id="video-3"><source src="video/3_1.mp4" type="video/mp4"></video>
</div>
<div id="modal-4" class="modal">
<video id="video-4"><source src="video/4_1.mp4" type="video/mp4"></video>
</div>
<div id="modal-5" class="modal">
<video id="video-5"><source src="video/5_1.mp4" type="video/mp4"></video>
</div>
<div id="modal-6" class="modal">
<video id="video-6"><source src="video/6_1.mp4" type="video/mp4"></video>
</div>
</div>
<!-- ============= Background Image ============= -->
<img id="bg-image" src="navigation-home-screen.jpg" alt="Background">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
// open modal and play video
$('#vid-1').on('click', function() {
$('#modal-1').show();
$('#video-1').get(0).play();
});
$('#vid-2').on('click', function() {
$('#modal-2').show();
$('#video-2').get(0).play();
});
$('#vid-3').on('click', function() {
$('#modal-3').show();
$('#video-3').get(0).play();
});
$('#vid-4').on('click', function() {
$('#modal-4').show();
$('#video-4').get(0).play();
})
$('#vid-5').on('click', function() {
$('#modal-5').show();
$('#video-5').get(0).play();
});
$('#vid-6').on('click', function() {
$('#modal-6').show();
$('#video-6').get(0).play();
});
$('.video-tab').on('click', function() {
// $('img#bg-image').animate({opacity: 0, duration: 1000 }).animate({opacity: 1, duration: 1000 });
$('.modal-close').animate({opacity: 1, duration: 1000 });
});
// Close modal and sop all video
var modalClose = $('.modal-close');
modalClose.on('click', function() {
$('img#bg-image').css({opacity: 0}).animate({opacity: 1, duration: 1000 });
$('.modal-close').animate({opacity: 0, duration: 1000 });
$('.modal').hide();
$('div.modal video').each(function(){
this.pause();
this.currentTime = 0;
});
});
// Close modal on video end
var jqueryVideo = $('video');
jqueryVideo.on('ended', function() {
$(this).parent().hide();
});
</script>
</body>
</html>
