Develop Reference

Creating Video or GIF or time lapse from an array of image URLs

I have got a list of image url form an api endpoint, and i wish to generate a video with these images in javascript.
after the video is created i'd display it on the page, im using react btw.
images = [
"https://some-bucket.s3.amazonaws.com/demo/0173.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0126.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0160.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0184.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0177.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0166.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0174.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0167.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0187.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0197.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0190.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0192.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0189.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0188.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0182.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0198.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0196.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0163.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0117.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0199.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0191.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0148.jpg",
"https://some-bucket.s3.amazonaws.com/demo/0132.jpg"
]

I think what you might be looking for is the Transloadit /video/merge robot. For example, this template here will take all of the files uploaded and then convert them into an animated gif in order to be exported to an Amazon S3 bucket.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"animated": {
"robot": "/video/merge",
"use": {
"steps": [
{
"name": ":original",
"as": "image"
}
]
},
"result": true,
"duration": 7.8,
"framerate": "10",
"ffmpeg_stack": "v4.3.1",
"ffmpeg": {
"f": "gif",
"pix_fmt": "rgb24"
},
"resize_strategy": "pad"
},
"exported": {
"use": [
":original",
"animated"
],
"robot": "/s3/store",
"credentials": "YOUR_AWS_CREDENTIALS",
"url_prefix": "https://demos.transloadit.com/"
}
}
}
While, transloadit doesn't have native react integration, it can be used through uppy's robodog service. Here's a small React snippet that will take an array of files, run it through a specified template, and then output an array of results, using the template from before.
import Uppy from '#uppy/core'
import { Dashboard } from '#uppy/react'
import { Transloadit } from '#uppy/transloadit'
import '#uppy/core/dist/style.css'
import '#uppy/dashboard/dist/style.css'
const url_list = ["www.link1.com/image.png", "www.link2.com/image.png", "www.link3.com/image.png"]
const uppy = new Uppy()
.use(Transloadit, {
params: {
"auth": {
"key": "YOUR_TRANSLOADIT_AUTH_KEY"
}
"steps": {
"imported": {
"robot": "/http/import",
"url": url_list
},
"animated": {
"robot": "/video/merge",
"use": {
"steps": [
{
"name": "imported",
"as": "image"
}
]
},
"result": true,
"duration": 7.8,
"framerate": "10",
"ffmpeg_stack": "v4.3.1",
"ffmpeg": {
"f": "gif",
"pix_fmt": "rgb24"
},
"resize_strategy": "pad"
},
"exported": {
"use": [
"imported",
"animated"
],
"robot": "/s3/store",
"credentials": "YOUR_AWS_CREDENTIALS",
"url_prefix": "https://demos.transloadit.com/"
}
}
}
});
uppy.on("complete", (result) => {
console.log("Upload complete! We've uploaded these files: ", result.successful)
})
export default function Home() {
return (
<div className="container">
<Dashboard
uppy={uppy}
/>
</div>
)
}

How to print normalized data in React/Redux

I have a data normalized using normalizr:
{
result: "123",
entities: {
"articles": {
"123": {
id: "123",
author: "1",
title: "My awesome blog post",
comments: [ "324" ]
}
},
"users": {
"1": { "id": "1", "name": "Paul" },
"2": { "id": "2", "name": "Nicole" }
},
"comments": {
"324": { id: "324", "commenter": "2" }
}
}
}
I save entities in reducer and I want to print them on my page.
I can do that like this:
const articles = data.entities.articles;
for (let key in articles) {
console.log( articles[key].author + ', ' + articles[key].title);
}
Is that ok in React/Redux print normalized data in JSX template like this or there is exist a better way?
UPD
I create an application using this example https://github.com/reactjs/redux/tree/master/examples/real-world but I don't understand how there a data from entities printed in JSX templates.
I am confused about a data structure because usually I used arrays but in real-world example a new for me way, where data normalized like this.

To connect your reducer with your view, you need a container. Then in your view, you can do something like in following jsfiddle.
https://jsfiddle.net/madura/g50ocwh2/
var data = {
result: "123",
entities: {
"articles": {
"123": {
id: "123",
author: "1",
title: "My awesome blog post",
comments: ["324"]
}
},
"users": {
"1": {
"id": "1",
"name": "Paul"
},
"2": {
"id": "2",
"name": "Nicole"
}
},
"comments": {
"324": {
id: "324",
"commenter": "2"
}
}
}
};
console.log(data.entities.articles);
return ( < div > {
Object.keys(data.entities.articles).map(function(key) {
return <p key = {
key
} > {
data.entities.articles[key].title
} < /p>
})
} < /div>);
}
You will get your data as a property to your view after you connect with container. So you can access your data like below in your view.
this.props.data.entities.articles;

How to get the particular field from the couchdb views result using couchdb list function

Below i mentioned the design document.
{
"_id": "_design/link",
"_rev": "62-0c0f00dd9dbedab5c2cca61c356bbff4",
"views": {
"link": {
"map": "function(doc) {\n if (doc.projects) { for (var i in doc.projects) { emit(doc._id, {_id: doc.projects[i].proj_id}); }} \n}"
},
"lists": {
"sample": "function(head, req) {while(row = getRow()){ send(row.doc.proj_name);} }"
}
}
}
The view result:
{
total_rows: 1,
offset: 0,
rows: [
{
id: "SCI130202",
key: "SCI130202",
value: {
_id: "PID00034"
},
doc: {
_id: "PID00034",
_rev: "1-0a363e98a605a72fd71bb4ac62e0b138",
client_id: "E000022",
client_name: "Edinburgh Steel",
type: "manage projects",
proj_id: "PID00034",
proj_name: "Global_upgrade_Oracle",
proj_domain: "Information Technology",
proj_start_date: "2014-10-08",
proj_end_date: "2015-07-07",
delivery_manager: null,
proj_standards: null,
proj_currency_type: "INR",
onsite: "No",
location: "Edinburgh",
proj_status: "Noy yet Start",
budgeted_margin: 45,
budgeted_hrs: 300,
projected_revenue: 200000,
billing_rate: 30,
unit_measure: "per month",
billing_cycle: "Milestone",
proj_core_tech_skills: [ ],
proj_secon_skills: [ ],
proj_sdlc_skills: [ ],
tag: "",
margin: [
{
desired_onsite: null,
desired_offshore: null,
lower_limit: null
}
]
}
}
]
}
I tried but the error comes like
function raised error: (new TypeError("row.doc is undefined", ""))
How to get the proj_name,proj_start_date and proj_end_date using couchdb list function?

You need to add the include_docs=true option to the URL you are using to query the view/list. Views do not automatically include the document.

And maybe you shouldn't use a list to filter your view result - just let the view emit what you need:
emit(doc._id, {
_id: doc.projects[i].proj_id
});
Turns into:
emit(doc.proj_id, {
proj_name: doc.proj_name,
proj_id: doc.proj_id,
proj_start_date: doc.proj_start_date,
proj_end_date: doc.proj_end_date
});
You don't need to emit the doc._id - it is automatically emitted for every row.

(Handlebarsjs templating) How to get data from external JSON source?

See this link: http://jsfiddle.net/Rousnay/FJzre/ it is working, the JSON data come trough http://json.virtuecenter.com/json-data/blogs/tags?callback=?
but it is not working when i want to get data from http://sunday-theater-club.simpletix.eu/API/ThemeUIHandler.asmx/GetMenuItems?callback=?
Can anyone help me with jsfiddle example. please.

The returned data is not valid to the template, when getting from "http://sunday-theater-club.simpletix.eu/API/ThemeUIHandler.asmx/GetMenuItems?callback=?" you end up with:
[
{
"text": "Home ",
"url": "/Default.aspx"
},
{
"text": "Events ",
"url": "/Event-List/"
},
{
"text": "Test",
"url": "/Pages/8276/Test/"
}
]
and when getting from "http://json.virtuecenter.com/json-data/blogs/tags?callback=?" you have:
{
"blogsTags": [
{
"tag":"GovernorBentley",
"count":1,
"separation_path":"\/blogs\/byTag\/GovernorBentley.html"
},
{
"tag":"Huntsville",
"count":1,
"separation_path":"\/blogs\/byTag\/Huntsville.html"
},
{
"tag":"Voting Responsibility",
"count":1,
"separation_path":"\/blogs\/byTag\/Voting Responsibility.html"
},
{
"tag":"Voting Rights",
"count":1,
"separation_path":"\/blogs\/byTag\/Voting Rights.html"
}
],
"pagination": {
"limit":20,
"total":4,
"page":1,
"pageCount":1
}
}
your template expects a "blogsTags" property.

Finding child object using one of its properties in JSON

I am trying to find a child object in JSON by one of its properties and add more properties to that object. I am not sure how to do this using JQuery (or regular javascript). For example: From the following JSON, I would like to find a category with id 123-1 and then add another category object as a child object. Thanks for your help.
JSON:
{
"result": {
"category":
{
"id": 123,
"name": "cat1",
"rules": [
{
"rulename": "r1",
"regex": ""
},
{
"rulename": "r2",
"regex": ""
}
],
"category":
{
"id": "123-1",
"name": "cat1-1",
"rules": [
{
"rulename": "r1-1",
"regex": ""
}
]
}
}
}
}
Javascript:
function addSubCategory(catId, anotherCatObj) {
//Step1: Find category object with catID in the existing json
//Step3: add the supplied object as a child.
}

function appendCategoryTo(categories, destinationCategoryId, newCategoryToAdd){
var success = false;
for (var i = 0; i < categories.length && !success; i++){
var category = categories[i];
if (category.id == destinationCategoryId){
category.category = category.category || [];
success = !!category.category.push(newCategoryToAdd);
} else if (category.category) {
success = appendCategoryTo(category.category, destinationCategoryId, newCategoryToAdd);
}
}
return success;
}
you have to start at the obj.result.category node in order to take advantage of the recursive ability, but you can easily wrap that method in another that makes it more polite.
but, as-is, here's an example usage:
appendCategoryTo(o.result.category, '123-1', {
id: '123-1-1',
name: 'cat-1-1-1',
rules: []
});
console.log(JSON.stringify(o));
Which adds a new category property to the nested category as an array (i assume this follows the nomenclature) then adds the element to that new array--thus giving you:
{
"result": {
"category": [
{
"id": 123,
"name": "cat1",
"rules": [
{
"rulename": "r1",
"regex": ""
},
{
"rulename": "r2",
"regex": ""
}
],
"category": [
{
"id": "123-1",
"name": "cat1-1",
"rules": [
{
"rulename": "r1-1",
"regex": ""
}
],
"category": [ // BEGIN new addition
{
"id": "123-1-1",
"name": "cat-1-1-1",
"rules": [
]
}
] // END new addition
}
]
}
]
}
}
Example to play with on jsfiddle, btw: http://jsfiddle.net/cqRzX/