I have a working code to embed a Wowza manifest.mpd live video stream into a MPEG-dash player on a website but in order for it to work, you have to put in the URL to the manifest file and then click connect.
I need to get rid of the input box and just have it load the manifest file automatically on page load.
I've tried adding the src to the video tag as the manifest URL but it doesn't load. I'm guessing that when clicking connects to load the manifest file the script is also doing something else but with no scripting knowledge I don't know what.
Can anyone suggest what I would change the code to so that it will load the script as it does when you click connect but automatically on page load?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MPEG-DASH Player - Live Video Streaming</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/wowza.css" type="text/css" />
<!-- Libraries -->
<script src="app/lib/jquery/js/jquery-1.8.3.min.js"></script>
<script src="app/lib/jquery/js/jquery-ui-1.9.2.custom.min.js"></script>
<!-- https://github.com/kriskowal/q -->
<script src="app/lib/q.js"></script>
<!-- https://github.com/creynders/dijon-framework -->
<script src="app/lib/dijon.js"></script>
<!-- Misc Libs -->
<script src="app/lib/xml2json.js"></script>
<script src="app/lib/objectiron.js"></script>
<script src="app/lib/long.js"></script>
<script src="app/lib/Math.js"></script>
<!-- Player -->
<script src="app/js/streaming/MediaPlayer.js"></script>
<script src="app/js/streaming/Context.js"></script>
<script src="app/js/streaming/ErrorHandler.js"></script>
<script src="app/js/streaming/Capabilities.js"></script>
<script src="app/js/streaming/Debug.js"></script>
<script src="app/js/streaming/VideoModel.js"></script>
<script src="app/js/streaming/vo/SegmentRequest.js"></script>
<script src="app/js/streaming/ManifestLoader.js"></script>
<script src="app/js/streaming/ManifestUpdater.js"></script>
<script src="app/js/streaming/ManifestModel.js"></script>
<script src="app/js/streaming/MediaSourceExtensions.js"></script>
<script src="app/js/streaming/SourceBufferExtensions.js"></script>
<script src="app/js/streaming/VideoModelExtensions.js"></script>
<script src="app/js/streaming/BufferExtensions.js"></script>
<script src="app/js/streaming/FragmentController.js"></script>
<script src="app/js/streaming/AbrController.js"></script>
<script src="app/js/streaming/FragmentLoader.js"></script>
<script src="app/js/streaming/Stream.js"></script>
<script src="app/js/streaming/BufferController.js"></script>
<script src="app/js/streaming/rules/SwitchRequest.js"></script>
<script src="app/js/streaming/rules/DownloadRatioRule.js"></script>
<script src="app/js/streaming/rules/InsufficientBufferRule.js"></script>
<script src="app/js/streaming/rules/LimitSwitchesRule.js"></script>
<script src="app/js/streaming/rules/BaseRulesCollection.js"></script>
<!-- Metrics -->
<script src="app/js/streaming/vo/MetricsList.js"></script>
<script src="app/js/streaming/MetricsModel.js"></script>
<script src="app/js/streaming/vo/metrics/BufferLevel.js"></script>
<script src="app/js/streaming/vo/metrics/HTTPRequest.js"></script>
<script src="app/js/streaming/vo/metrics/PlayList.js"></script>
<script src="app/js/streaming/vo/metrics/RepresentationSwitch.js"></script>
<script src="app/js/streaming/vo/metrics/TCPConnection.js"></script>
<script src="app/js/streaming/vo/metrics/DroppedFrames.js"></script>
<!-- Dash -->
<script src="app/js/dash/Dash.js"></script>
<script src="app/js/dash/DashContext.js"></script>
<script src="app/js/dash/vo/Segment.js"></script>
<script src="app/js/dash/DashParser.js"></script>
<script src="app/js/dash/DashHandler.js"></script>
<script src="app/js/dash/BaseURLExtensions.js"></script>
<script src="app/js/dash/FragmentExtensions.js"></script>
<script src="app/js/dash/DashManifestExtensions.js"></script>
<script src="app/js/dash/DashMetricsExtensions.js"></script>
<script src="app/js/dash/DashMetricsConverter.js"></script>
<!-- App -->
<!--script src="app/js/main.js"></script-->
<!-- Framework CSS -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/wowza.css" type="text/css" />
<script>
function supports_media_source()
{
"use strict";
var hasWebKit = (window.WebKitMediaSource !== null && window.WebKitMediaSource !== undefined),
hasMediaSource = (window.MediaSource !== null && window.MediaSource !== undefined);
return (hasWebKit || hasMediaSource);
}
</script>
</head>
<body>
<div class="container">
<!-- HEADER -->
<div class="span-18">
<h1>Live Video Streaming</h1>
<h2>MPEG-DASH Player</h2>
</div>
<div class="span-6 last">
<img src="img/wowza-logo_1024.png" class="logo" style="height:72px;width:205px" />
</div>
<hr class="heading">
<!-- END HEADER -->
<!-- EXAMPLE PLAYER: WIDTH of this player should be 630px, height will vary depending on the example-->
<div class="span-16">
<div id="supported" style="display:none">
<div>
<style>
video {
background-color: #000000;
}
</style>
<video id="videoObj" x-webkit-airplay="allow" controls alt="Example File" width="630" height="354" onerror="failed(event)" src="http://undergroundsoundz.com:1935/uszlive/myStream/manifest.mpd"></video>
</div>
<table>
<tr>
<td>
<button id="playObj" type="button" style="width:50px" onclick="JavaScript:playControl()" disabled="disabled">Pause</button>
</td>
</tr>
<tr>
<td align="right">
<b>Stream:</b>
</td>
<td>
<input id="connectStr" size = "56" type="text" placeholder="" value="http://undergroundsoundz.com:1935/uszlive/myStream/manifest.mpd"/>
<button id="connectObj" type="button" style="width:80px" onclick="JavaScript:connect()">Connect</button>
</td>
</tr>
<tr>
<td align="right">
<b>Status:</b>
</td>
<td>
<label id="statusStr" size = "100" type="text" placeholder="" value="">Disconnected</label>
</td>
</tr>
</table>
</div>
<div id="debug_log" style="height: 425px; width: 630px; overflow: auto; clear: both;">
</div>
<script>
if ( supports_media_source() ) {
supported.style.display="";
videoObj.style.display="";
}
else {
notsupported.style.display="";
}
var player;
function connect()
{
if(connectObj.textContent == "Disconnect") {
if(player!=null)
player.stop();
videoObj.src = null;
videoObj.load();
connectObj.textContent = "Connect";
playObj.disabled = "disabled";
playObj.textContent = "Pause";
statusStr.textContent = "Disconnected";
}
else {
connectObj.textContent = "Disconnect";
playObj.disabled = "";
playObj.textContent = "Pause";
statusStr.textContent = "Playing";
var video = document.querySelector("video"),
context = new Dash.di.DashContext();
player = new MediaPlayer(context);
player.startup();
debug = player.debug;
//debug.init(console);
player.autoPlay = true;
player.attachView(video);
player.setIsLive(true);
player.attachSource(connectStr.value);
}
}
function playControl() {
if (videoObj.paused == false) {
videoObj.pause();
statusStr.textContent = "Paused";
playObj.textContent = "Play";
}
else {
videoObj.play();
statusStr.textContent="Playing";
playObj.textContent = "Pause";
}
}
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
statusStr.textContent='You aborted the video playback.';
break;
case e.target.error.MEDIA_ERR_NETWORK:
statusStr.textContent='A network error caused the video download to fail part-way.';
break;
case e.target.error.MEDIA_ERR_DECODE:
statusStr.textContent='The video playback was aborted due to a corruption problem or because the video used features your browser did not support.';
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
statusStr.innerHTML= 'The video could not be loaded, either because the server or network failed or because the format is not supported.<br/>';
statusStr.innerHTML+= '<span style="color:red;">Please close all tabs and then try running the appropriate <span style="font-style:italic;">LaunchDashPlayer</span> script for your system in your \"examples/LiveVideoStreaming/MPEGDASHPlayer\" folder.</span>';
break;
default:
statusStr.textContent = 'An unknown error occurred.';
break;
}
}
</script>
</div>
</div>
</body>
Related
I want to load some options via ajax request and show them into select tag HTML. After I get data and create a select tag manually, the HTML file doesn't show the select tag. I used jquery and put the codes in other files.
I try to put ajax request in both $(document).ready() and function but it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META SECTION -->
<title>Atlant - Responsive Bootstrap Admin Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<!-- END META SECTION -->
<!-- CSS INCLUDE -->
<link rel="stylesheet" type="text/css" id="theme" href="/public/css/theme-default.css"/>
<!-- EOF CSS INCLUDE -->
</head>
<body onload="onLoadCenterName()">
<!-- START PAGE CONTAINER -->
<div class="page-container">
<!-- PAGE CONTENT -->
<div class="page-content ">
<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
<div class="row">
<div class="col-md-12">
<form id="addSiteForm" class="form-horizontal"
style="margin-top: 20px;margin-left: 50px;margin-right: 50px">
<div class="panel panel-default">
<div class="panel-heading ">
<h3 class="panel-title "><strong>Add New Site</strong></h3>
</div>
<div class="panel-body">
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Select User Type</label>
<div class="col-md-6 col-xs-12">
<select id="addSiteSelectCenterInput" class="form-control select">
</select>
<span class="help-block">Select type of the user account </span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
<!-- START PRELOADS -->
<audio id="audio-alert" src="/public/audio/alert.mp3" preload="auto"></audio>
<audio id="audio-fail" src="/public/audio/fail.mp3" preload="auto"></audio>
<!-- END PRELOADS -->
<!-- START SCRIPTS -->
<!-- START PLUGINS -->
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap.min.js"></script>
<!-- END PLUGINS -->
<!-- START THIS PAGE PLUGINS-->
<script type='text/javascript' src='/public/js/plugins/icheck.js'></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.mCustomScrollbar.js"></script>
<!-- END THIS PAGE PLUGINS-->
<!-- START TEMPLATE -->
<!-- <script type="text/javascript" src="/public/js/settings.js"></script>-->
<script type='text/javascript'
src='/public/js/plugins/validationengine/languages/jquery.validationEngine-en.js'></script>
<script type='text/javascript' src='/public/js/plugins/validationengine/jquery.validationEngine.js'></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap-select.js"></script>
<script type='text/javascript' src='/public/js/plugins/noty/jquery.noty.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topCenter.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topLeft.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topRight.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/themes/default.js'></script>
<script type="text/javascript" src="/public/js/plugins.js"></script>
<script type="text/javascript" src="/public/js/actions.js"></script>
<script type="text/javascript" src="/public/js/addSite.js"></script>
<!-- END TEMPLATE -->
<!-- END SCRIPTS -->
</body>
</html>
addSite.js
function onLoadCenterName() {
$.ajax({
type: 'GET',
url: '/centers/getAllCenters',
dataType: 'json',
contentType: 'application/json',
success: function (data) {
console.log("SUCCESS : ", data);
let selectList = document.getElementById("addSiteSelectCenterInput");
$.each(data, function (key, value) {
console.log(key, value._id, value.centerName);
const option = document.createElement("option");
option.value = value._id;
option.text = value.centerName;
selectList.appendChild(option);
// $('#addSiteSelectCenterInput')
// .append($("<option></option>")
// .attr("value", )
// .text(value.centerName));
});
console.log(selectList);
noty({
text: 'Successful load centers ',
layout: 'topRight',
type: 'success',
timeout: true
}).setTimeout(5000);
$.mpb("update", {
value: 100, speed: 5, complete: function () {
$(".mpb").fadeOut(200, function () {
$(this).remove();
});
}
});
},
error: function (e) {
console.log("ERROR : ", e);
noty({
text: 'There was an error',
layout: 'topRight',
type: 'error',
timeout: true
}).setTimeout(5000);
$.mpb("update", {
value: 100, speed: 5, complete: function () {
$(".mpb").fadeOut(200, function () {
$(this).remove();
});
}
});
}
});
}
in chrom console, result is here:
<select id="addSiteSelectCenterInput" class="form-control select" style="display: none;">
<option value="5d0f86f0a2b7a41bdcd3c91f">sdf</option><option value="5d0f9c4067731820fcabf1eb">scaasdad</option></select>
According to your console result, the <select> is not visible because it has the attribute style="display: none;".
There is nothing in the code that you have provided that would add that attribute, so you obviously haven't given us all the relevant code.
So you either need to remove that attribute... or don't hide the control in the first place.
To show it via jQuery use .show()...
$("#addSiteSelectCenterInput").show()
Or in vanilla JS change the style.display property...
document.getElementById("addSiteSelectCenterInput").style.display = "";
I am trying to add a draggable to the frames but it is not working and throwing the below exception
created the Frames using iframe but could not apply the draggable for my frames.Please help me to solve my problem.
Uncaught ReferenceError: HSplitter is not defined at HTMLDivElement.onmousedown
Please find my code below:
var HSplitter = {
mouseDown: function (_split, event)
{
if(!this.isToggle)
{
this.parent = _split.parentNode.parentNode; //td
this.currentSplit = _split;
this.splitterWidth = $(this.currentSplit).getWidth();
this.splitPointX = Event.pointerX(event);
this.drag = true;
this.splitDiv = $(this.parent).getElementsByClassName("HSplitDiv")[0];
//min width of a parent container couldn't be less than splitter width.
if( this.minWidth < this.splitterWidth )
this.minWidth = this.splitterWidth;
this.mouseOver(_split, event);
$(this.splitDiv).setStyle({paddingRight: '0px'}); //reset padding
this._splitDivOverflow(true); //set overflow to ON
}
},
mouseUp: function (split, event)
{
if(!this.isToggle)
{
this.drag = false;
this._setDynamicOverflow();
}
},
};
<head>
<link href="/Work/css/tab_style.css" type="text/css" rel="stylesheet"/>
<link href="D:/cnsdi-projects/style.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="/Work/css/1.10.19/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/Work/css/1.10.19/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script type="text/javascript" src="/Work/js/3.3.7/bootstrap.min.js">
</script>
</head>
<body>
<div class="tab-content" >
<div id="sectionA" class="tab-pane fade in active" style="overflow:visible;">
<iframe scrolling="yes" src="pg1.html" name="leftside" style="position:absolute;top:140px;left:0%;width:25%;height:100%;border: none;" ></iframe>
<div class="split1" onselect="return false;" unselectable="on" onmouseup="HSplitter.mouseUp(this, event);" onmousedown="HSplitter.setMaxMinWidth('-1','-1'); HSplitter.mouseDown(this, event);" style="left: auto;">
<span class="collapse l-splt-btn" onclick="HSplitter.splitToggle(this);"></span>
</div>
<iframe src="pg2.html" name="rightside" scrolling="yes" style="position:absolute;top:140px;left:25%;width:75%;height:50%;border: none;"></iframe>
<div class="split"><div class="vcollapse d-splt-btn" onclick="VSplitter.splitToggle(this);" toppaneheight="50%" id="idx1320192_vspltbtn"></div></div>
<iframe src="pg3.html" name="rightside" scrolling="yes" style="position:absolute;top:450px;left:25%;width:75%;height:30%;border: none;"></iframe>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"></script>
Please input this code in your site header and if it doesn't work , let me know.
Thank you!
I have a jquery issue I have two divs showing and hiding and both are set to refresh but one is over riding the other. I am not sure why the load1 were div1 is at keeps overriding the load2 div2. so when i click on button completed the received div is automatically refreshing and changing the page back to received. I will try to get this on fiddle.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://localhost/test/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom_edit.css" rel="stylesheet">
<link href="http://localhost/test/assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<pre><button class="btn btn-sm btn-primary" id="received">Received</button><button class="btn btn-sm btn-success" id="completed">Completed</button></pre>
<div id="load1">
<div id="div1">
<h3>Received Section</h3>
//code goes here......
</div>
</div>
<div id="load2">
<input type="hidden" id="show_completed" value="1" name="show_completed">
<div id="div2">
<h3>Completed Section</h3>
//code goes here......
</div>
</div>
<footer>
<script src="http://localhost/test/assets/jquery/jquery-3.1.0.min.js"></script>
<script src="http://localhost/test/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
var $show_completed = document.getElementById('show_completed');
if($show_completed.value == '0')
{
setInterval(function() {
$("#load1").load(location.href+" #load1>*","");
}, 10000); // seconds to wait, miliseconds
}
else($show_completed.value == '1')
{
setInterval(function() {
$("#load2").load(location.href+" #load2>*","");
}, 100000); // seconds to wait, miliseconds
}
</script>
<script type="text/javascript">
$(document).ready( function () {
$('#div2').fadeOut();
} );
$("#received").on('click', function() {
document.getElementById("show_completed").value='0';
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#completed").on('click', function() {
document.getElementById("show_completed").value='1';
$("#div2").fadeIn();
$("#div1").fadeOut();
});
</script>
</footer>
</body>
</html>
Try this... Hope it helps
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://localhost/test/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom_edit.css" rel="stylesheet">
<link href="http://localhost/test/assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://localhost/test/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/dataTables.bootstrap.js"></script>
</head>
<body>
<pre>
<button class="btn btn-sm btn-primary" id="received">Received</button>
<button class="btn btn-sm btn-success" id="completed">Completed</button>
</pre>
<div id="load1">
<div id="div1">
<h3>Received Section</h3>
//code goes here......
</div>
</div>
<div id="load2">
<input type="hidden" id="show_completed" value="1" name="show_completed">
<div id="div2">
<h3>Completed Section</h3>
//code goes here......
</div>
</div>
<script type="text/javascript">
var $show_completed = document.getElementById('show_completed');
if($show_completed.value == '0'){
setInterval(function() {
$("#load1").load(location.href+" #load1>*","");
}, 10000); // seconds to wait, miliseconds
} else($show_completed.value == '1'){
setInterval(function() {
$("#load2").load(location.href+" #load2>*","");
}, 100000); // seconds to wait, miliseconds
}
</script>
<script type="text/javascript">
$(document).ready( function () {
$('#div2').fadeOut();
});
$("#received").on('click', function() {
document.getElementById("show_completed").value='0';
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#completed").on('click', function() {
document.getElementById("show_completed").value='1';
$("#div2").fadeIn();
$("#div1").fadeOut();
});
</script>
</body>
</html>
I have two questions
How to display the initial message and/or upon button click. The current code I have displays the message continuously. I want it to display initially and once users starts pressing other button I want the message "Start guessing" to disappear and only appear after user clicks Start Over button.
How to display the correct answer when user clicks on Give up.
HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<title>Template that uses Bootstrap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initialscale=1.0"/>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div data-ng-controller="myCtrl">
<div class="container">
<h1>Guessing Game</h1><br>
<label>Enter Guess:</label>
<input type="text" id="guess" name="guess" data-ng-model="guess"/><br>
<span data-ng-bind="Message"></span>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary btn-md" data-ng-click="checkGuess()">Check</button>
<button class="btn btn-warning btn-md" data-ng-click="showAnswer()">Give Up</button>
<button class="btn btn-info btn-md" data-ng-click="startGame()">Start Over</button>
</div></div>
<div class="row">
<div class="col-xs-7">
<div ng-show="deviation<0" class="alert alert-warning">Guess higher</div>
<div ng-show="deviation>0" class="alert alert-warning">Guess lower</div>
<div ng-show="deviation===0" class="alert alert-success">You got it!</div>
</div></div>
</div>
</div>
<!-- jQuery – required for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- All Bootstrap plug-ins file -->
<script src="js/bootstrap.min.js"></script>
<!-- Basic AngularJS -->
<script src="js/angular.min.js"></script>
<!-- Your Controller -->
<script src="js/app.js"></script>
</body>
</html>
Angular
/*global angular */
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function ($scope) {
"use strict";
$scope.checkGuess = function () {
$scope.deviation = $scope.original - $scope.guess;
};
$scope.startGame = function () {
$scope.guess = null;
$scope.original = Math.floor(Math.random() * 1000 + 1);
$scope.deviation = null;
$scope.display = false;
$scope.Message = "Start guessing.";
};
$scope.showAnswer = function () {
$scope.original = Math.floor(Math.random() * 1000 + 1);
$scope.display = true;
};
$scope.startGame();
}
);
1) Use ng-hide to hide your element when needed:
<span data-ng-bind="Message" ng-hide="hideMessage"></span>
In the checkGuess and showAnswer functions set the hideMessage to true:
$scope.hideMessage = true;
In the startGame function, set it to false:
$scope.hideMessage = false;
2) In your HTML add a tag:
<div ng-show="showOriginal">{{previousOriginal}}</div>
And in your showAnser and startGame function, add:
$scope.showOriginal = true;
$scope.previousOriginal = angular.copy($scope.original);
And remove of the showAnswer function:
$scope.original = Math.floor(Math.random() * 1000 + 1)
Finally, in the startGame function, set it to false:
$scope.showOriginal = false;
Hello i'm building an application where i want to dynamically change the source of an image in order to force reload it . The problem is that in order of this i only get a broken image on the browser. Instead , if a run the function manually by a button it runs perfect .
HTML document
<!DOCTYPE html>
<html lang="en" ng-app='cameraApp'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Node JS Camera</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src='https://code.angularjs.org/1.4.4/angular-sanitize.min.js'></script>
<script src="cameraApp.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>Welcome to NodeJS Camera v1</h1>
</div>
<div ng-controller="HomeController">
<div class="cameraControl col-md-5">
<p>Here is the camera control</p>
<button class="btn btn-default" ng-click="getSnapshot()">Snapshot</button>
<button class="btn btn-info" ng-click="intervalFunction()">Start Feed</button>
</div>
<div class="lifeFeed col-md-7">
<p>Here is the live feed</p>
<p><button class="btn btn-default" ng-click="readSnapshot()">Snapshot Read</button></p>
<img width='600' height='600' ng-src="{{snapshot}}" alt="SnapShot taken">
</div>
</div>
</div>
</body>
</html>
cameraApp.js
var cameraApp = angular.module('cameraApp',[]);
cameraApp.controller('HomeController', function($scope,$http,$timeout) {
function updateImage() {
var img = 'snapshots/camera.jpg'+ '?decache=' + Math.random();
console.log('Snapshot Loaded');
$scope.snapshot = img;
};
$scope.readSnapshot = updateImage;
$scope.getSnapshot = function() {
$http.get('/api/getSnapshot')
.then(function(response) {
// this callback will be called asynchronously
// when the response is available
console.log('Snapshot captured');
$scope.readSnapshot();
}, function(response) {
console.log('Error in capturing...');
});
}
$scope.intervalFunction = function() {
$timeout(function() {
$scope.getSnapshot();
$scope.intervalFunction();
}, 2000);
};
// Kick off the interval
$scope.intervalFunction();
});
There are two solutions I've used for this in the past.
1) Use an ng-if/ng-show on your img tag. This will prevent the broken image from displaying.
<img ng-if='snapshot'>
2) Set a default image that will load and then be replaced once the other images load.
$scope.snapshot = 'snapshots/default.png';