I am using OpenTok v2.14.0.0, for screen share. Streaming etc are working seamlessly. The only problem is, on the subscriber side, I am not able to see the complete Publisher's screen. On resizing the subscriber window (in which the streaming is happening), the video inside stretches maintaining the aspect ratio.
I have tried changing my WPF UI element control to Grid and UniformGrid, but did not work. Hence, I believe this has something to do with my subscriber's configurations. On js side, there is a property fitMode, I am looking for a similar setting on windows side.
Here is the video where one can see that the publisher (he is publishing his chrome window), gets stretched outside the bounds.
xaml control:
<Grid x:Name="SubscriberGrid"/>
when I receive the stream:
var uiElement = ((UIElement)subscriber.VideoRenderer);
SubscriberGrid.Children.Add(uiElement);
I had this issue and for me it was because I had set the fitMode property to 'cover' instead of 'contain'. Changing fitMode to 'contain' fixed the issue:
var subscriber = session.subscribe(event.stream, 'subscribers', {
insertMode: 'append',
width: "100%",
height: "100%",
fitMode: "contain"
}, function (error) {
if (error) {
console.error('Failed to subscribe', error);
}
});
Related
I am using angularjs-dragula and I am not able to auto scroll to the overflow container that is hidden from the screen.
This is my issue:
I have five containers in my dragula and the 5th container is hidden from the screen. Now I want to drag an element from the first container and drop it in the 5th container. But I am not able to do this, since the screen is not auto scrolling to the 5th container.
Does angularjs-dragula support vertical scrolling? or is there a property that I'm missing?
Example Plunkr : https://plnkr.co/edit/iD38MugmHIx298p7OlrI?p=preview
var app = angular.module('angular-dragula-demo', [angularDragula(angular)]);
app.controller('MainCtrl', function($scope, dragulaService) {
dragulaService.options($scope, 'fifth-bag', {
copy: true
});
});
It seems like this option is not implemented in Dragula. Dragula's developer suggests to use the module dom-autoscroller.
See this issue on Github: https://github.com/bevacqua/dragula/issues/121
To implement this functionality with AngularJS:
1) Download dom-autoscroller from the official repo: https://github.com/hollowdoor/dom_autoscroller/blob/master/dist/dom-autoscroller.min.js
2) Include it in your project folder
3) Enable autoscroll in your controller:
// ENABLE AUTOSCROLL FOR GOALS LIST
var scroll = autoScroll([
document.querySelector('.list')
], {
margin: 30,
maxSpeed: 10,
scrollWhenOutside: true,
autoScroll: function () {
//Only scroll when the pointer is down
return this.down
}
});
Is it possible to get some events with current size during resizing of the qx.ui.container.Resizer?
The resize event is not fired nor changeWidth.
I found a solution for my problem:
To get resize events during resizing process one firstly need to get resizing frame widget: qx.ui.container.Resizer _getResizeFrame() (this is protected function so writing own class which inherits from Resizer may be needed). Then adding listener for resize event will do the job.
Try this. It works fine in the playground.
var resizer = new qx.ui.container.Resizer().set({
width: 200,
height: 100
});
resizer.setLayout(new qx.ui.layout.Canvas());
var text = new qx.ui.form.TextArea("Resize me\nI'm resizable");
resizer.add(text, {edge: 0});
this.getRoot().add(resizer);
resizer.addListener('resize',function(e){
this.debug(resizer.getWidth());
},this);
You can try the demo in the qooxdoo playground
I have a Kendo ui chart which displays a column chart from a dynamic data source. But occassionally, the chart opens half the size of the available space. When I click on some links or change the date, it resizes itself. Any idea why its causing it?
In the datasource change event, its showing the container div's width as 0 when it shows this behaviour. I can give more details if needed
I tried the refresh method as given in one of the answers but its not of help
This happens generally when you open a chart in a animated window before it is finished expanding.
My suggestion is to redraw the chart when you are sure everything is loaded and fully opened.
$("#myChart").data("kendoChart").redraw();
If you have not disabled animations you may want to do that before this and re-enable them after.
$("#myChart").data("kendoChart").options.transitions = false;
When you have got all the necessary data in the controller you can call a Javascript CallBack function in which you can set the transition to false and then redraw the chart and set transition to true, also you can hide the chart by default and make it visible on Javascript CallBack function
Try this
var chart=$("#chart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if(chart)
{
chart.redraw();
}
Thanks
This is what I using for my charts:
if($("#areaChart").data("kendoChart")) {
$("#areaChart svg").width(Number($('.k-content').width()));
$("#areaChart svg").height(Number($('.k-content').height()));
$("#areaChart").data("kendoChart").refresh();
}
Taken from here
Have you checked the resize() Method?
I fixed it by adding a small delay after calling the CreateChart() function as below:
CreateChart(this.id, this.id + " this week", "week", null);
sleep(1000);
its working fine now
$("#divSensingData").kendoChart({
chartArea: {
width: 900,
height: 500
},
i did face same problem after resize kendo chart.
$(window).resize(function () { $("#chart").data("kendoChart").refresh(); });
it's working
Whenever I allow webcam access in chrome as a part of setup up a multi-party or a p2p conference, I am expecting to get a streamCreated notification which is not coming through. My camera turns on and the "google chrome renderer" for the page goes to 100% CPU usage. When I pause the execution of the stream I find that the execution is somewhere deep inside TB.min.js. Here's what the relevant parts of my code look like:
void meetingInProgress(info) {
var session = TB.initSession(info.sessionId);
session.connect(info.apiKey, info.token);
session.addEventListener("sessionConnected", function(e) {
console.log("Connected to session");
subscribeToStreams(session, e.streams);
session.publish("selfview", { name: name });
});
session.addEventListener("streamCreated", function(e) {
console.log("New stream");
subscribeToStreams(session, e.streams);
});
}
var subscribeToStreams = function(session, streams) {
var selfId = session.connection.connectionId;
console.log('Subscribing to streams, self id:', selfId);
console.log('No. of streams:', _.size(streams));
_.forEach(streams, function(s) {
console.log('Stream id: ', s.connection.connectionId);
if (s.connection.connectionId == selfId) {
console.log('Toggling');
$("#selfview").toggle();
}
else
session.subscribe(s, addViewport(), { width: 640, height: 480 });
});
console.log('Done subscribing to streams...');
}
Seems to me like if the publisher div element is hidden, there's a problem with receiving the streamCreated event. I was hoping to only show the publisher div panel when the user actually approves the use of camera. When I disable this div visibility toggling, things seem to work better.
Unfortunately, with the latest release, this will happen when the publisher is hidden. If you still want to hide it, the best option for now would be to make it a 1x1 pixel and have it absolutely positioned at -1, -1 of the screen.
I have a small query with regards to Sencha Touch. i am trying to program some code which has an event kickstart as you scroll down the main panel (The end ideal experiment I am trying to achieve is to get the Panel to render images as you scroll down, but at the moment I am settling for just firing off a console.log from a function).
I was wondering if anyone knew of a method which would the program to detect how far down someone has scrolled vertically and fire off an event once you reach a certain y coordinate. I know of the scrollTo event, but I cannot seem to find any events which allow me to detect the x and y coordinate.
The basic coding for my panel is as follows:
headlinepanel = new Ext.Panel(
{
layout:
{
type:'vbox',
align:'stretch'
},
monitorOrientation: true,
scroll:
{
direction: 'vertical',
bounces: false,
outOfBoundRestrictFactor : 0,
threshold:20,
},
style: 'background-color:black;',
listeners:
{
afterrender: function()
{
if(headlinepanel.scroller.offsetBoundary.bottom == 500)
{
console.log("You are here!");
}
}
}
});
This is what I have at the moment and I tried to see if I could get the offsetBoundary property to work, but none of my programming friends has tried something like this before, so I am not very familar with this. I would appriciate any help, but I understand if this is not really possible with Sencha. Thank you for reading this.
This is how you listen for scroll events:
headlinepanel.scroller.on('scroll',function(me,offset){
console.log(offset.x);
console.log(offset.y);
});
This event is fire on every change, there are other events too. Check the API here: http://docs.sencha.com/touch/1-1/#!/api/Ext.util.Scroller-event-scroll
And here is an example: http://jsfiddle.net/sSyqF/14/