Especially looking for an idea or way around to achieve this.
I am trying to build a video editor/mixture as in the above image using react js. This UI primarily targets to align different video/image media with timelines. As user drag video/image in any of the layer, it just needs to expand or shrink with time scale.
Three screens are for three different videos. A feature like a crop/split is not required. This UI collect information and send it to the server which will do the rest of the processing. Required contents are already on our servers.
Any solution/possible direction on collecting media information drag into layers with the time scale on the top ?. What are the best resources to achieve this UI using React JS?
You should be using timeline of vis.js with the following options :
var start = new Date(1970, 0, 1, 0, 0, 0, 0);
var end = new Date(1970, 00, 01, 0, 1, 0, 0);
var options = {
zoomKey: "ctrlKey",
horizontalScroll: true,
verticalScroll: true,
orientation: "top",
moveable: true,
zoomable : true,
editable: true,
min: start,
max: end,
start: start,
end: end,
zoomMax: 10000000,
zoomMin: 1000,
stack:false,
showCurrentTime: true,
multiselect: true,
multiselectPerGroup: true,
};
This will give you a multiline scrollable (both horizontal and vertical) sliding timeline which is the basis of a video editor.
I suggest your timeLine component to have a module and scale both provided by its father component. The nested divs have their own module length, but not scale, and the same happens with the timeLine component. So, you only talk about modules length. Then i.e. you set the equivalence 1 module = 50px
I hope this help you!
Related
I have angular service which provides highcharts config for highcharts-ng. I prepare data for this service in controller and than call service with data as parameter. All work. But if my range is for example something like this [15,130,0.2] my spiderweb chart is little bit squeezed. So I would like to do different axis scales and I have found solution by using parallel-coordinates.js.
And I have problem to make it works. First picture is what I have and second is what I would like to achieve.
What I have : https://jsfiddle.net/DuFuS/en51rbxc/
What I want: http://jsfiddle.net/DuFuS/tbzfhou5/
First of all (and the most important thing), you're using very old version of highcharts-ng package, and that's why parallel-coordinates.js module isn't working properly.
This module create additional axes basing on the amount of data passed to the chart constructor, but in this version of package, data is unfortunately an empty object on chart init, so the parallel-coordinates.js module doesn't add any additional axis at all.
Next things which causes the problems are typos in configuration here:
chart: {
parallerlCoordinates: true,
parallerAxes: {
...
Should be parallelCoordinates and parallelAxes.
In order to make your chart works, please update the version of highcharts-ng package to 1.2.1, then rebuild your configuration object (because the structure had changed with new version), like below:
return {
chart: {
parallelCoordinates: true,
parallelAxes: {
gridLineWidth: 0,
lineWidth: 2,
showFirstLabel: false,
showLastLabel: true
},
polar: true,
type: 'line'
},
xAxis: {
categories: data.categories,
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
series: data.series
};
After all changes, chart will look as you expected.
Live example: https://jsfiddle.net/rza5uk67/
Package docs: https://github.com/pablojim/highcharts-ng
My application shows a map with react-leaflet and uses LayersControl to switch between an OSM TileLayer and HERE TileLayer. The code is as follows:
<LayersControl position="topright">
<LayersControl.BaseLayer
name={this.props.intl.formatMessage({id:'map.normal_map'})}
checked={true}
>
{ tileLayerOSM }
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name={this.props.intl.formatMessage({id:'map.terrain_map'})}>
{ tileLayerHERE }
</LayersControl.BaseLayer>
</LayersControl>
The problema I see is the following: when moving the OSM map, some 'squares' are downloaded from HERE while they are not ready with OSM. See the network trace:
I would like to avoid this behavior, since it is a bit annoying for the user, who see changes in the visualization for a short period of time.
I don't have experience using Leaflet with React, but these is clearly not the desired behaviour.
In Leaflet that (retrive the both base layers at the same time) happens when you add both to the map. Something like:
const accessToken = 'foo';
let osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
const mapbox = 'https://api.mapbox.com/styles/v1/mapbox/basic-9/tiles/256/{z}/{x}/{y}?access_token={accessToken}';
const map = L.map('map').setView([42.2, -8.8], 12);
map.addLayer(osm);
map.addLayer(mapbox); // only one should be added to the map
or directly when instantiating the map:
let map = L.map('map', {
center: [42.2, -8.8],
zoom: 12,
layers: [osm, mapbox] // only one should be added to the map
});
With this kind of baselayers you only must add one to the map and use the layer control to switch between one or the other. When only one is added only the tiles for one of the maps are requested, saving bandwith.
As a "shot in the dark" I will try to make the checked value explicit for all layers. First both as a harcoded false, nothing should be shown in the map. Then one with checked=true harcoded and the other with false, and so on. Probably the trouble is how those attributes are managed.
I try to implement a virtual scrolling loading qx.ui.mobile.list.List. At least a lazy loading one. There is no event available by qooxdoo to know when the List is scrolled to the end. Is there some way to know the 'onScrollEnd' event or is there a better way?
The team added the feature in August, called waypoints. Here's the post. You need to define offsets at which you wish the event to be risen. Here's example from the post to illustrate the idea.
var scrollContainer = page._getScrollContainer();
scrollContainer.setWaypointsY(["0%", "50%", "100%", 200, ".waypoint"]);
scrollContainer.addListener("waypoint", function(evt)
{
console.log("Waypoint reached:" + evt.getData());
}, this);
Event payload has the following structure.
{
"offset" : 0,
"input" : "10%",
"index" : 0,
"element" : 0
}
There's also a complete demo in mobile showcase of lazy-loading list implemented with waypoints: showcase, code.
I am using Google's Street View Static Image API. It works great, but I am wondering if it is possible to get meta data for the images I am saving, specifically the date. Is there anyway to know the date of the static image?
Thanks,
Lee
Yes, you can get the image date using the Google Maps Street View Service in JavaScript.
Briefly, you would need to go through the usual setup steps to get Google Maps working on your page, then you would do something akin to:
var sv = new google.maps.StreetViewService();
var berkeley = new google.maps.LatLng(37.869085,-122.254775);
sv.getPanoramaByLocation(berkeley, 50, function(data) {
console.log(data.imageDate);
});
data.imageDate will contain the date in YYYY-MM format.
You can use StreetViewService's both getPanoramaById and getPanoramaByLocation methods to obtain this data. Please see here.
var panoramaOptions = {
position: streetViewLocation,
pov: {
heading: 0,
pitch: 5,
zoom: 1
},
visible: true,
addressControl: false,
imageDateControl:true
};
I have a problem with WMS overlays in OpenLayers. Basically I just want to add data from a WMS server as an overlay and not as a base layer. This appears to be a very simple problem but I am unable to find a solution. If I set singleTile to true, the overlays appears over the whole map but you cannot zoom in. If it is set to false, only one tile is displayed at every zoom level. If I set it as a base layer, it works just fine but I really want the overlay solution so I can make it transparent and see the map behind it.
Demonstration of the problem, with a different dataset but the issue is the same:
http://jsfiddle.net/adbnC/2/
I think it might be related to some coordinate system issues but I am no expert so any help is appreciated.
Thanks a lot!
Here is the relevant section of the code that does not work as expected:
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000",
"http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false,
// Setting single tile to true will kind of work but than one
// cannot zoom in any more.
singleTile: false
}
);
I can't quite get what exactly is wrong here, but I think it has something to do with messed up reference systems. Here is a workaround:
Modified Jsfiddle.net
I changed the map projection to spherical mercator and now it seems to work fine for me:
var mapOptions = {
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m"
};
map = new OpenLayers.Map('map', mapOptions);
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000", "http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false
});
map.addLayer(osm);
map.addLayer(pop_layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
Let me know if that helped!