i plug some utility files to the main application.
But on function Flang() from there is not referenced: web sniffer in console issues:
ReferenceError: FLang is not defined
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
<script type="text/javascript" src="application.js" ></script>
<script type="text/javascript" src="js/menu.js" ></script>
<script type="text/javascript" src="js/lang.js" ></script>
<script type="text/javascript" src="js/directories/assortment.js" ></script>
<title id="page-title">Main Application v.2.0</title>
...
lang.js:
...
function FLang(str){
if (ComboBoxLang.getValue()=='en')
return str;
else if (ComboBoxLang.getValue()=='ru')
return FappLangRu(str);
else
return str;
};
In the network inspector i see this file lang.js loaded, yet still this function is not defined:
at application.js (last line in this snippet):
application.js:
Ext.Loader.setPath('Ext.ux', '../app/extjs/examples/ux');
Ext.require([
'Ext.ux.grid.FiltersFeature',
'Ext.ux.grid.*',
]);
Ext.ns("appMain");
...
appMain.NorthRegion = Ext.create('Ext.panel.Panel', {
region: 'north',
xtype: 'panel',
id: 'NorthRegion',
border:true,
title: FLang('Subsystems'),
appMain.WestRegion= Ext.create('Ext.panel.Panel', {
region: 'west',
xtype: 'panel',
collapsible: true,
floatable: true,
width: 100,
split: true,
border:true,
title: FLang('Subsystem control'),
}); // end of $WestRegion
appMain.CenterRegion = Ext.create('Ext.tab.Panel', {
region: 'center',
xtype: 'tabpanel',
border: true,
title: FLang('Main window'),
autoScroll:true,
});
Does it somehow relate to namespacing, since prior to that without namespacing there was no reference problem?
Edits
After defining all the regions and their contents, we start app this way:
Ext.onReady(function() {
var MainView = Ext.create('Ext.Viewport', {
layout:'border',
border:true,
items:[
appMain.NorthRegion,
appMain.WestRegion,
appMain.CenterRegion
], // end of viewport items
});
}); // end of Ext.onReady() function
Try to change order of including lang.js and application.js in your index.html. However, even if it does work there is still one problem. You must not create components before the document is ready, hence, all Ext.create calls must be wrapped in onReady.
See Ext/Touch Component Life Cycle to learn more.
Related
Heyho!
I tried all the day to bind the data of a JSON file to the data model of a SAPUI5 chart but without success. I miss the link between the JSON file and the dataset by path.
Added is the file containing the standalone code but without the json file which just contains calday and counter with some data. There seems no problem by defining the data directly in the script as data and refering in the dataset to it. Which I tried lately as you recognize at the /data path.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Flattened DataSet bound to OData Entity with filter</title>
<link rel="stylesheet" type="text/css" href="">
<script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.viz" data-sap-ui-theme="sap_goldreflection">
</script>
<script>
var oModelJSON = new sap.ui.model.json.JSONModel();
oModelJSON.loadData(file.json);
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: 'Calendar Day',
value: "{calday}"
}],
measures: [{
name: 'Counter',
value: '{counter}'
}],
data: {
path: "/data"
}
});
var oChart = new sap.viz.ui5.Column({
width: "80%",
height: "400px",
plotArea: {
'colorPalette': d3.scale.category20().range()
},
title: {
visible: true,
text: 'Counter per Calendar Day'
},
dataset: oDataset
});
oChart.setModel(oModelJSON );
oChart.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Every time JWPlayer finished playing a video it fades to black. I'd rather it just showed the last frame of the video. Is there any way to do that?
<script type="text/javascript" src="jwplayer.js" ></script>
<script type="text/javascript">
function changeVideo(filename) {
jwplayer("video").remove();
jwplayer("video").setup({
file: filename,
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false'
});
jwplayer('video').load();
jwplayer('video').play();
}
</script>
</head>
<div id="video"></div>
<body>
<script type="text/javascript">
jwplayer("video").setup({
file: "vid.mp4",
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false'
});
</script>
<p>Vid2</p>
It won't show the last frame of the video, but you can just supply a poster image, which it will show before playing and after playing. Better than a blank screen.
You can use our JavaScript API to stop a second before the end of the video.
I actually wrote a small plugin for this.
Demo - http://www.pluginsbyethan.com/github/stopatend.html
Plugin - https://github.com/emaxsaun/stopatend
Hope this helps you!
Edit:
For your changeVideo function, use this instead:
function changeVideo(filename) {
jwplayer("video").setup({
file: filename,
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false',
autostart: true
});
}
By calling setup you are basically removing already, and you can't just do a load() by itself, and doing load() is the same as autostart = true, try that.
Here is a full HTML page of how to do this.
I could not add the full stop at end script here because it was too long for the answer, but I've tested this and it works.
<!DOCTYPE html>
<html>
<head>
<title>Change Video</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js" type="text/javascript"></script>
</head>
<body>
<div id="player"></div>
<script type="text/javascript" language="javascript">
jwplayer("player").setup({
file: "http://content.bitsontherun.com/videos/w5co0c24-hV866gPy.mp4",
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false'
});
//PUT ENTIRE STOP AT END SCRIPT HERE
function changeVideo(filename) {
jwplayer("player").setup({
file: filename,
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false',
autostart: true
});
//PUT ENTIRE STOP AT END SCRIPT HERE
}
</script>
<p><a href="#" onclick='changeVideo("http://vjs.zencdn.net/v/oceans.mp4");'>Vid2</a></p>
</body>
</html>
There is a much easier way to show the image at the end of the video. Just include this code:
playerInstance.onComplete(function() {
playerInstance.stop();
});
This works in jwplayer version 7. If you use version 6 you want to upgrade to 7 to get rid of the logo. You need a key for 7, but it is free for personal use.
I use this function with multiple videos in a custom playlist. The entire Javascript code looks like this:
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "fileA.mp4",
image: "fileA.jpg",
width: 996,
height: 560,
captions: {
fontSize: 12,
backgroundOpacity: 50
},
tracks: [{
file: "fileA.srt",
"default": true
}]
});
playerInstance.onComplete(function() {
playerInstance.stop();
});
function playVideo(video,img,cc) {
playerInstance.load([{
file: video,
image: img,
tracks: [{
file: cc,
"default": true
}]
}]);
playerInstance.play();
};
</script>
A click in your custom playlist should result in a call to playVideo. If you don't use captions you can omit cc and the captions and tracks blocks. Every video will show its corresponding image when playing is complete.
New to Typeahead/Bloodhound, and I'm struggling to get a very basic example of Typeahad.js working on localhost when querying a simple rest service that returns valid json. When I point my url to one used in the typeahead examples, it works fine (by "works", I mean the suggestion popup appears with the default string representation i.e. json). I am returning valid json and the appropriate header
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>States</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script>
$(document).ready(function () {
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
//local: states
remote: {
url: '../search.php?q=%QUERY',
//url: 'https://twitter.github.io/typeahead.js/data/films/post_1960.json',
wildcard: '%QUERY'
}
});
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'states',
//display: 'value',
source: states
});
});
</script>
</head>
<body>
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</body>
Image showing the response headers for my service.
Any idea what I may be doing wrong?
I built this bit of code from a pretty long search on the web full of failures trying with various players to play this,
http://85.132.71.4:1935/turktv/ntv.sdp/playlist.m3u8
m3u8 stream. I will put up my compact(paste it into an html file) code in here in hopes someone can point me in the right direction. Thank you for reading.
<html>
<head>
<title>test page</title>
</head>
<body>
<script type='text/javascript' src='http://dev.landgraaf.net/jwplayer.js'></script>
<div id='livefeed'></div>
<script type="text/javascript">
jwplayer('livefeed').setup({
'id': 'playerID',
'width': '480',
'height': '300',
'provider': 'video',
'file': 'http://85.132.71.4:1935/turktv/ntv.sdp/playlist.m3u8',
'image': 'http://dev.landgraaf.net/webcam.jpg',
'bufferlength':5,
'modes': [
{type: 'flash', src: 'http://dev.landgraaf.net/player.swf'},
{
type: 'html5',
config: {
levels: [ {'file': 'http://85.132.71.4:1935/turktv/ntv.sdp/playlist.m3u8'} ],
'provider': 'video',
'x-webkit-airplay': 'allow'
}
}
]
});
</script>
</body>
</html>
M3U8 does not run in Flash mode in JW5. You would need JW6 for this. Here is some more information - http://www.longtailvideo.com/support/jw-player/28856/using-apple-hls-streaming, if you would like a trial of us, please contact us - http://www.jwplayer.com/contact-us/
According to the example in this website, I followed the steps, but I dont get any output in the browser.
As Stated in the example, the file "index.html" should be in the following path
'D:\xampp\htdocs\helloext\extjs\index.html'
and its"index.html" contents are the following:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
when I run this example in both Chrome or FireFox, however, there is not output to be displayed.
Please guide me to have this samll example run correctly
Did you follow the instructions at the end of section 2.1 (Application Structure)? You need to create the app.js file:
Now you're ready to write your application code. Open app.js and
insert the following JavaScript code:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});