I am using Jitsi-Meet iframe Api to have a custom video calling feature. It is working as expected. However I would like to add a feature to this. The feature is to auto-join or auto-start the meeting on http load. How do I do this instead of the user manually pressing the join button?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src='https://meet.jit.si/external_api.js'></script>
<script>
$(document).ready(function () {
var domain = "meet.jit.si";
var options = {
roomName: "TestingMeet",
width: "100%",
height: 1080,
parentNode: document.querySelector("#meet"),
configOverwrite: {
},
interfaceConfigOverwrite: {
DEFAULT_BACKGROUND: "#3b98ff",
noSsl: true,
SHOW_JITSI_WATERMARK: false,
HIDE_DEEP_LINKING_LOGO: true,
SHOW_BRAND_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,
SHOW_POWERED_BY: false,
TOOLBAR_BUTTONS: [
'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
'fodeviceselection', 'hangup', 'profile', 'recording',
'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
'videoquality', 'filmstrip', 'feedback', 'stats', 'shortcuts',
'tileview'
],
}
}
var api = new JitsiMeetExternalAPI(domain, options);
api.executeCommands({
displayName: ['nickname'],
toggleVideo: [],
toggleAudio: []
});
});
</script>
<style>
.title {
text-align: center;
font-family: "Segoe UI";
font-size: 48px;
}
</style>
</head>
<body>
<div id="meet"></div>
</body>
</html>
I got it, there is an option called as configOverwrite; and you have to add this inside:
var options = {
roomName: "RoomName",
width: "100%",
height: 1080,
parentNode: document.querySelector("#meet"),
configOverwrite: {
prejoinPageEnabled: false //This here
},
...
...
Another way, just pass #config.prejoinPageEnabled=false, in the url and done.
Now you should pass:
configOverwrite: {
prejoinConfig: {
enabled: false
}
}
Related
When I try to create a BarChart in js view tab, it gives me this error.
Here is my html code
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<link rel="stylesheet" type="text/css" href="Styles/MainPage.css"/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.viz"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("empcrud");
//sap.ui.localResources("Styles");
var app = new sap.m.App("AppId", { initialPage: "idEMainPage1" });
var page = sap.ui.view({ id: "idEmpDetails1", viewName: "empcrud.EmpDetails", type: sap.ui.core.mvc.ViewType.JS });
var page1 = sap.ui.view({ id: "idEMainPage1", viewName: "empcrud.MainPage", type: sap.ui.core.mvc.ViewType.JS });
var page2 = sap.ui.view({ id: "idGrafPage1", viewName: "empcrud.Grafik", type: sap.ui.core.mvc.ViewType.JS });
app.addPage(page).addPage(page1).addPage(page2);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
And here is my view code where I use sap.viz.ui5
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [
{
axis: 1,
name: 'Uname',
value: "{Uname}"
}
],
measures: [
{
name: 'Modno',
value: '{Modno}'
},
],
data: {
path: "/results"
}
});
var oBarChart = new sap.viz.ui5.Bar({
width: "80%",
height: "400px",
plotArea: {
//'colorPalette' : d3.scale.category20().range()
},
title: {
visible: true,
text: 'Modno Grafiği'
},
dataset: oDataset
});
When I try to paste my view code in html script its works fine, also with xml view it works. I think its about the connection between js view and html. However view can not see sap.viz.Is there a way to define sap.viz in js or how can I overcome that?
Thanks.
The problem is about sapui lib, just add online core library and just works fine.
"https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
Recently I came across vegas.js plugin
not sure how to use it... Read the documentation but did not get a clear idea. http://vegas.jaysalvat.com/documentation/setup/
Did the steps accordingly but no images are showing.
<script>
$.vegas('slideshow', {
backgrounds:[
{ src:'img/F1.jpg', fade:1000 },
{ src:'img/f2.jpeg', fade:1000 },
]
})('overlay', {
src:'/vegas/overlays/11.png'
});
</script>
Could you try using firebug/inspector, click on console, and paste in what is going on. There will be errors in there. Also could you post how you're including the file? Post with your html if possible.
As you can se in the settings section the overlay property goes inside of the vegas function.
$(document).ready(function() {
var imagecollection = [{
src: 'https://i.stack.imgur.com/oURrw.png'
},
{
src: 'http://i.imgur.com/SZPjHwz.jpg'
},
{
src: 'http://www.boyter.org/wp-content/uploads/2016/08/ChJzv9lUYAA9D5E.jpg'
},
{
src: 'https://pbs.twimg.com/media/Cg0x8vnXEAEB2Le.jpg'
}
/* Slideshow not working? Check your image links. */
];
$("#ShowSlideShowHere").vegas({
slides: imagecollection,
transition: 'fade',
preloadImage: true,
timer: true,
shuffle: true,
delay: 5000,
animation: 'kenburns',
cover: true,
overlay: 'https://media.istockphoto.com/vectors/isolated-christmas-falling-snow-overlay-on-transparent-background-vector-id628152000'
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script>
</head>
<body>
<div style="height:100vh">
<div id="ShowSlideShowHere" style="height:100vh">sadasdasdas</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Here is the code I'm using to export Kendo multiple grid to Excel, how can I export with all pages
Example - multiple grid Excel export
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<style>
#products .k-grid-toolbar
{
display:none !important;
}
</style>
</head>
<body>
<button id="export" class="k-button"><span class="k-icon k-i-excel"></span>Export to Excel</button>
<div id="products"></div>
<div id="orders"></div>
<script>
// used to sync the exports
var promises = [
$.Deferred(),
$.Deferred()
];
$("#export").click(function(e){
// trigger export of the products grid
$("#products").data("kendoGrid").saveAsExcel();
// trigger export of the orders grid
$("#orders").data("kendoGrid").saveAsExcel();
// wait for both exports to finish
$.when.apply(null, promises)
.then(function(productsWorkbook, ordersWorkbook) {
// create a new workbook using the sheets of the products and orders workbooks
var sheets = [
productsWorkbook.sheets[0],
ordersWorkbook.sheets[0]
];
sheets[0].title = "Products";
sheets[1].title = "Orders";
var workbook = new kendo.ooxml.Workbook({
sheets: sheets
});
// save the new workbook,b
kendo.saveAs({
dataURI: workbook.toDataURL(),
fileName: "ProductsAndOrders.xlsx"
})
});
});
$("#products").kendoGrid({
toolbar: ["excel"],
excel: {
allPages: true
},
dataSource: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 20
},
height: 550,
pageable: true,
excelExport: function(e) {
e.preventDefault();
promises[0].resolve(e.workbook);
}
});
$("#orders").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 20,
serverPaging: true
},
height: 550,
pageable: true,
columns: [
{ field:"OrderID" },
{ field: "ShipName", title: "Ship Name" },
{ field: "ShipCity", title: "Ship City" }
],
excelExport: function(e) {
e.preventDefault();
promises[1].resolve(e.workbook);
}
});
</script>
</body>
</html>
Let me know if any concern.
I'm using Kendo UI 2013.2.716 and JQuery 2.0.3 and I am placing a grid on my page, and my question is:
Does anyone know how to tell what has been destroyed by the destroy command from the grid?
For example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo.common.min.css" rel="stylesheet" />
<link href="kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
$(document).ready(function() {
var products = [];
for(var i = 1; i <= 40; i++) {
products.push({
ProductId: i,
ProductName: "Product " + i
});
}
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
}
}
},
requestEnd: function (e) {
if (e.type === "destroy") {
alert("OK, so something got destroyed, but what??");
}
}
},
editable: "inline",
columns: [
"ProductName",
{ command: "destroy", title: " ", width: "100px" }
]
});
});
</script>
</body>
</html>
I found the requestEnd callback in the documentation but I am totally flummoxed as to know where the item that was destroyed would be. I just need the ID of the item really so that I can update other parts of my page appropriately.
I am wondering if I need to capture it somehow beforehand.
You need to configure the transport object on your datasource. In your current configuration, does anything really get destroyed? Sure, the item may disappear from your grid, but I wonder if it's still there in the datasource. Maybe that's what you intended.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.destroy
If you're just looking for a way to get at the data that's being destroyed, hook into the parameterMap() function of the transport object. In there you can manipulate the object being deleted before the operation is executed.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap
Thanks to #Brett for pointing out the destroy property on the transport. This code does the trick - allowing me to capture what was being destroyed (see the transport.destroy part):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo.common.min.css" rel="stylesheet" />
<link href="kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
}
}
},
transport: {
read: function (options) {
var products = [];
for(var i = 1; i <= 40; i++) {
products.push({
ProductId: i,
ProductName: "Product " + i
});
}
options.success(products);
},
destroy: function (options) {
var data = $("#grid")
.data("kendoGrid").dataSource.data();
var products = [];
for(var i = 0; i < data.length; i++) {
if (data[i].ProductId !== options.data.ProductId) {
products.push(data[i])
}
}
options.success(products);
alert("Woo hoo - the product with the ID: "
+ options.data.ProductId + " was destroyed!");
}
}
},
editable: "inline",
columns: [
"ProductName",
{ command: "destroy", title: " ", width: "100px" }
]
});
});
</script>
</body>
</html>
I am trying to do simple operations with dojo datagrid before I move on to complicated ones. However, I am now stuck at saving to store. I am using the code in the browser and the players data in a .json file, for convenience, I put all in the source code for now.
When I refresh the browser, the data I just saved is not updated to the json file. Why is it so? And how do I fix it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
.dojoxGrid table { margin: 0; }
html, body { width: 100%; height: 100%; margin: 0; }
</style>
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
// our test data store for this example:
var store = new dojo.data.ItemFileWriteStore({
//url: 'players.json'
data: {
label: 'pId',
items: [{"Player":"Wayne Gretzky","Games":"1487","Points":"2857","PPG":"1.92"},
{"Player":"Mark Messier","Games":"1756","Points":"1887","PPG":"1.07"},
{"Player":"Gordie Howe","Games":"1767","Points":"1850","PPG":"1.04"},
{"Player":"Ron Francies","Games":"1731","Points":"1798","PPG":"1.03"},
{"Player":"Marcel Dionne","Games":"1348","Points":"1771","PPG":"1.31"},
{"Player":"Steve Yzerman","Games":"1514","Points":"1755","PPG":"1.16"},
{"Player":"Mario Lemieux","Games":"915","Points":"1723","PPG":"1.88"},
{"Player":"Joe Sakic","Games":"1378","Points":"1641","PPG":"1.19"},
{"Player":"Jaromir Jagr","Games":"1273","Points":"1599","PPG":"1.25"},
{"Player":"Phil Esposito","Games":"1282","Points":"1590","PPG":"1.24"}]}
});
// set the layout structure:
var layout = [{
field: 'Player',
name: 'Player',
width: '200px',
styles:"text-align:center;"
},
{
field: 'Games',
name: 'Games Played',
width: '50px',
styles:"text-align:center;"
},
{
field: 'Points',
name: 'Points',
width: '50px',
styles:"text-align:center;"
},
{
field: 'PPG',
name: 'Points Per Game',
width: '50px',
styles:"text-align:center;"
}];
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {
Player: '*'
},
store: store,
clientSort: true,
rowSelector: '20px',
structure: layout
},
document.createElement('div'));
// append the new grid to the div "gridContainer":
dojo.byId("gridContainer").appendChild(grid.domNode);
// Call startup, in order to render the grid:
grid.startup();
//dojo.forEach(grid.structure, function(itemData, index, list){
//itemData.editable = true;
//});
var btnAdd = new dijit.form.Button({
label: "Add",
onClick: function(){
grid.store.newItem({
Player: "Someone",
Games: "1000",
Points: "1000",
PPG: "1.0"
});
}
}, "btnAdd");
var btnRemove = new dijit.form.Button({
label: "Remove",
onClick: function(){
var items = grid.selection.getSelected();
if(items.length){
dojo.forEach(items, function(selectedItem){
if(selectedItem !== null){
grid.store.deleteItem(selectedItem);
}
});
}
}
}, "btnRemove");
var btnSave = new dijit.form.Button({
label: "Save",
onClick: function(){
grid.store.save({onComplete: saveDone, onError: saveFailed});
}
}, "btnSave");
});
function saveDone(){
alert("Done saving.");
}
function saveFailed(){
alert("Save failed.");
}
</script>
</head>
<body class=" tundra">
<button id="btnAdd" type="button"></button>
<button id="btnRemove" type="button"></button>
<button id="btnSave" type="button"></button>
<br />
<div id="gridContainer" style="width: 100%; height: 100%;"></div>
</body>
</html>
The source code is also here: http://jsfiddle.net/cDCWk/
You need to implement something server side to handle the .save() part of dojo.data.ItemFileWriteStore as explained here.
I have modified your source code, in order for it to be a bit easier to deal with: http://jsfiddle.net/kitsonk/cDCWk/1/
Also, personally, implementing something server-side for ItemFileWriteStore might be a bit silly when you can far more easily integrate the Grid with the dojox.data.JsonRestStore or the new dojo.store.JsonRest.