Smartface play video - smartface.io

I added video component to page then after I wrote this code as follows. But not working. How can I run this?
Pages.Page1.Video1.playVideo(true, true, function() {
alert("playybackStarrted.")
}, function() {
alert("video Initialized.")
}, function() {
alert("playyback Completed.")
}, function() {
alert("Error")
});
I tried this. I defined contentUrl as video.mp4. But I can't run this.
var video1 = new SMF.UI.Video({
top : "10%",
left : "10%",
width : "80%",
height : "40%",
controlStyle : SMF.UI.VideoControlStyle.embedded,
contentUrl : "video.mp4"
});

I added video dynamically and it runs fine as follows:
var video1 = new SMF.UI.Video({
top : "10%",
left : "10%",
width : "80%",
height : "40%",
controlStyle : SMF.UI.VideoControlStyle.embedded,
contentUrl : "..."
});
Pages.Page1.add(video1);
var btnPlay = new SMF.UI.TextButton({
top : '52%',
left : '10%',
width : "80%",
height : "10%",
text : "Play Video",
onPressed : function (e) {
video1.playVideo(true, true, function () {
alert("playybackStarrted.")
}, function () {
alert("video Initialized.")
}, function () {
alert("playyback Completed.")
}, function () {
alert("Error")
});
}
});
Pages.Page1.add(btnPlay);

Related

Overlapping of two buttons in SAPUI5

I want to create a content table using SAPUI5 but when I am trying to add more than one button they are getting overlapped.
Code:
var page2 = new sap.m.Page("page2",{
title : "Contents",
showNavButton : true,
navButtonPress : function() {
app.back();//go back to previous page
},
content : new sap.m.Button({
text : "Introduction",
press : function() {
app.to("page3");//navigate to Home
},
//enabled : false
type : sap.m.ButtonType.Transparent
}),
content : new sap.m.Button({
text : "Iview",
press : function() {
app.to("page3");//navigate to Home
},
//enabled : false
type : sap.m.ButtonType.Transparent
})
});
var Button1 = new sap.m.Button({
text : "Introduction",
press : function() {
//navigate to Home
app.to("page3");
},
//enabled : false
type : sap.m.ButtonType.Transparent
});
var Button2 = new sap.m.Button({
text : "Iview",
press : function() {
//navigate to Home
app.to("page3");
},
//enabled : false
type : sap.m.ButtonType.Transparent
})
var page2 = new sap.m.Page("page2",{
title : "Contents",
showNavButton : true,
navButtonPress : function() {
//go back to previous page
app.back();
},
content : [Button1, Button2]
});
page2.placeAt("body");

KendoUI stockchart marker plotting issue respect to axes

I am trying to create a stockchart using kendoUI. Things are working fine but with some issues. Plotting of marker is not as expected. It is not placed on the desired point on chart area.
Here is the code I have been done for it:
$($context).kendoStockChart({
dataSource : {
data : data.ChartData,
sort : {
field : "Date",
dir : "asc"
}
},
seriesDefaults : {
markers : {
background : function (a) {
return a.dataItem.color;
},
visible : true,
type : "triangle",
size : 18
},
line : {
width : 0
}
},
series : [{
type : "line",
field : "Index",
categoryField : "Date",
labels : {
background : "transparent",
color : function (a) {
return a.dataItem.color === "#000000" ? "#ffffff" : "ffffff";
},
visible : true,
position : "insideEnd",
margin : {
top : 8,
left : -18
},
font : "10px sans-serif",
center : '5%',
template : "#= dataItem.TotalCount > 1 ? dataItem.TotalCount : '' #"
}
}
],
title : {
text : "Time View Chart"
},
dateField : "Date",
navigator : {
series : {
type : "line",
field : "Index",
categoryField : "Date",
markers : {
visible : true,
type : "triangle",
size : 8
}
}
},
valueAxis : {
labels : {
//format: "{0}",
visible : true,
template : function (obj) {
return data.indexCategories[obj.value] || "";
}
},
minorUnit : 1,
majorUnit : 1,
title : {
text : ""
},
line : {
visible : true
}
}
});
Try setting the categoryAxis justified property to false, then for the valueAxis set min and max values to include all your points with some room to spare.
categoryAxis: {
justified: false,
},
valueAxis: {
min: <lowest val in your data>,
max: <highest value plus some margin for the trianb=gle marker>
},
DEMO

SAPUI5 multiple sap.m.TileContainer in JS view

I have a single page app written in SAPUI5 using JS views. I want to create a "Dashboard" page and put some tiles on it. Therefore I am creating a "sap.m.TileContainer" in the "createContent" function of my view.js-file.
What I need to implement is to have two separate TileConatiner because I have important tiles at the top and less important ones at the bottom. But no matter what I do e.g. putting the two TileContainers in a MatrixLayout, HorizontalLayout or as "content" into a sap.m.page it is no longer shown.
One TileContainer is shown when I just return this single instance directly without any componet surrounding it.
Can anyone help me out here please?
Following code works fine:
createContent : function(oController) {
var tileContainer = new sap.m.TileContainer({
tiles : [
new sap.m.StandardTile({
icon : "sap-icon://play",
title : "Important Tile",
press : function() {
oController.nav.to("AfoStart");
}
}), new sap.m.StandardTile({
icon : "sap-icon://pause",
title : "ANOTHER Important Tile",
press : function() {
oController.nav.to("AfoStart");
}
}), new sap.m.StandardTile({
icon : "sap-icon://timesheet",
title : "Third important tile",
press : function() {
oController.nav.to("AfoStart");
}
}), new sap.m.StandardTile({
icon : "sap-icon://number-sign",
title : "UNIMPORTANT ONE",
press : function() {
oController.nav.to("AfoStart");
}
}), new sap.m.StandardTile({
icon : "sap-icon://locate-me",
title : "UNIMPORTANT TWO",
press : function() {
oController.nav.to("AfoStart");
}
})
],
});
return tileContainer;
}
This code doesnt work:
createContent : function(oController) {
var tileContainerTop = new sap.m.TileContainer({
tiles : [
new sap.m.StandardTile({
icon : "sap-icon://play",
title : "Important Tile",
press : function() {
oController.nav.to("AfoStart");
}
}), new sap.m.StandardTile({
icon : "sap-icon://pause",
title : "Another important Tile",
press : function() {
oController.nav.to("AfoStart");
}
}), new sap.m.StandardTile({
icon : "sap-icon://timesheet",
title : "Third important tile",
press : function() {
oController.nav.to("AfoStart");
}
}),
],
});
var tileContainerBottom = new sap.m.TileContainer({
tiles : [
new sap.m.StandardTile({
icon : "sap-icon://play",
title : "UNIMPORTANT ONE",
press : function() {
oController.nav.to("AfoStart");
}
}), new sap.m.StandardTile({
icon : "sap-icon://pause",
title : "UNIMPORTANT TWO",
press : function() {
oController.nav.to("AfoStart");
}
})
],
});
var page = new sap.m.Page("myPage", {
title: "Dashboard",
content: [tileContainerTop, tileContainerBottom]
});
// OR create MatrixLayout here...doenst work
// OR create HorizontalLayout here...doesnt work
return page;
}
you need to set enableScrolling of your page to false.
Because then the page will take 100% of the place. If you do not do it the page will try to be as big as its content.
A tile container is by default as big as its parent so both the page and the containers will have a height of 0.
Here i placed 2 Tile containers below each other so they take half of the screen:
http://jsbin.com/disalulekezo/1/
Best regards
You have to set enableScrolling of your page to false and adjust the height of TileContainer both. Set the height of both container as 50-50% , both the tiles will be visible on your page. Only setting enableScrolling to false will not work.

getting TypeError: el is null .../ext/ext-all-debug-w-comments.js Line 44393 when loading grid a second time

I'm using a panel called "content panel" in the center of a border layout of my viewport.
I swap content in and out as needed by click handlers against the menu buttons. The second time I swap in this grid it gives this error. This is the only grid that does it in the app and the only grid that has a paging bar. I know the error has something to do with the paging bar being rendered. What am I missing?
controller (changes is the button that's failing):
Ext.define('DDI.controller.DDI', {
extend : 'Ext.app.Controller',
views : [ 'panel.BannerPanel', 'panel.ContentPanel', 'panel.NavPanel', 'panel.FooterPanel', 'Welcome' ],
init : function() {
this.control({
'navpanel button[text=Home]' : {
click : function() {
var cp = Ext.getCmp('contentpanel');
cp.removeAll();
cp.add({
xtype : 'welcomepanel'
});
}
},
...
'navpanel button[text=Changes]' : {
click : function() {
var cp = Ext.getCmp('contentpanel');
var height = Ext.getBody().getViewSize().height - 100;
// cp.removeDockedComponent(cp.getDockedComponent(0));
cp.removeAll(false);
cp.add({
xtype : 'changesummaryview',
height : height
});
cp.doLayout();
}
},
....
The grid panel is defined as such:
var changeStore = Ext.create('DDI.changetracker.store.Change');
Ext.define('DDI.changetracker.view.ChangeSummaryView', {
extend : 'Ext.grid.Panel',
alias : 'widget.changesummaryview',
id : 'changesummaryview',
title : 'All Change Summary',
scroll : 'both',
store : changeStore,
tbar : [
'Open Change Summary View',
'-',
{text : 'New Change'
}, {
xtype : 'button',
text : 'Print'
},
'->',
{xtype : 'exporterbutton'
}
],
bbar : Ext.create('Ext.PagingToolbar', {
store : changeStore,
displayInfo : true
}),
listeners : {
'render' : function(grid) {
grid.view.tip = Ext.create('Ext.tip.ToolTip', {
target : grid.getEl(),
showDelay : 2000,
// Each grid row causes its own seperate show and hide.
delegate : ".x-grid-cell",
items : [], // add items later based on the record
// Render immediately so that tip.body can be referenced prior
// to the first show.
listeners : {
// Change content dynamically depending on which element
// triggered the show.
beforeshow : function updateTipBody(tip) {
var rec = grid.view.getRecord(
Ext.get(tip.triggerElement).findParentNode('.x-grid-row'));
grid.fireEvent('rowhover', tip, rec);
return true;
}
}
});
}
},
columns : [
{
header : 'ticket',
dataIndex : 'ticket',
filter : {
type : 'string'
},
flex : 1,
editor : 'textfield'
},
{
header : 'account_name',
dataIndex : 'account_name',
flex : 1,
editor : {
xtype : 'customercombo',
fieldLabel : ''
}
},
{
header : 'employee_1',
dataIndex : 'employee_1',
flex : 1,
editor : {
xtype : 'personelcombo',
fieldLabel : '',
valueField : 'name'
}
},
{
header : 'dns_team_approved',
dataIndex : 'dns_team_approved',
filter : {
type : 'string'
},
flex : 1,
editor : {
xtype : 'dnsapprovecombo',
fieldLabel : ''
}
},
{
header : 'approval_status',
dataIndex : 'approval_status',
flex : 1,
editor : {
xtype : 'approvalstatuscombo',
fieldLabel : ''
}
},
{
header : 'status',
dataIndex : 'status',
flex : 1,
filter : {
type : 'list',
options : [ [ '%', 'All' ], [ 'OPEN', 'OPEN' ], [ 'HOLD', 'HOLD' ], [ 'CLOSED', 'CLOSED' ],
[ 'CANCELED', 'CANCELED' ] ],
value : '%',
active : true,
single : true
},
editor : {
xtype : 'statuscombo',
fieldLabel : '',
store : 'Status'
}
}, {
header : 'open_date',
dataIndex : 'open_date',
flex : 1,
editor : 'textfield'
}, {
header : 'next_check',
dataIndex : 'next_check',
flex : 1,
editor : 'textfield',
renderer:function(value, metadata, record, rowIndex, colIndex, store){
a=value.split(" ");
d=a[0].split("-");
t=a[1].split(":");
dateValue=new Date(d[0],d[1]-1,d[2],t[0],t[1],t[2]);
today=new Date();
if (dateValue <= today){
return '<span style="background-color: #FFff66">'+value+'</span>';
}
return value;
}
}, {
header : 'start_time',
dataIndex : 'start_time',
flex : 1,
editor : 'textfield',
renderer:function(value, metadata, record, rowIndex, colIndex, store){
a=value.split(" ");
d=a[0].split("-");
t=a[1].split(":");
dateValue=new Date(d[0],d[1]-1,d[2],t[0],t[1],t[2]);
today=new Date();
if (dateValue <= today){
return '<span style="background-color: #FF8080">'+value+'</span>';
}
return value;
}
}, {
header : 'end_date',
dataIndex : 'end_date',
flex : 1,
editor : 'textfield'
}, {
header : 'is_expedited',
dataIndex : 'is_expedited',
flex : 1,
editor : 'textfield'
} ],
features : [ {
ftype : 'filters',
encode : false,
local : false
} ],
plugins : [ {
ptype : 'cellediting',
clicksToEdit : 2,
pluginId : 'cellediting'
} ]

Highcharts, zoom in bottom navigation bar

Call function drawTable when I zoom on main chart, but don't call when I zoom on bottom navigation bar.
Example:
http://jsfiddle.net/gh/get/jquery/1.6/highslide-software/highcharts.com/tree/master/samples/stock/chart/events-selection/
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container',
zoomType: 'x',
events: {
selection: function(event) {
if (event.xAxis) {
drawTable(event.xAxis[0].min, event.xAxis[0].max);
} else {
$('#table').html('Selection reset');
}
}
}
},
rangeSelector : {
selected : 1
},
title : {
text : 'Total Traf'
},
xAxis : {
maxZoom : 14 * 24 * 3600000 // fourteen days
},
series : [{
name : 'TT',
data : data,
tooltip: {
yDecimals: 2
}
}]
});
});
I think this is some what in the direction of what you are looking for:
http://jsfiddle.net/7VgJM/3/
I was not quite sure what you were asking, but made an educated guess.