I'm trying to learn Axios and Vue with using Twitch API. I'm fetching data from that API and there is thumbnail_url which is for channel's thumbnail photos but I have to change that data's width and height because it's coming like this;
https://static-cdn.jtvnw.net/previews-ttv/live_user_shroud-{width}x{height}.jpg
And I was trying to do like this;
beforeMount(){
helix.get('streams?language=en').then((response) => {
for(var i=0; i < response.data.data.length; i++){
response.data.data[i].thumbnail_url.replace("width", "40")
}
console.log(response.data.data)
this.results = response.data.data
})
.catch(function (error) {
console.log(error);
});
},
Actually, I didn't understand what that is not working. I know there is a point that I missed. If someone can help me, It'd be great.
And If It is not correct way to do this, what is the correct way?
Thanks a lot.
You should use replace("{width}", "40"); instead
var url = 'https://static-cdn.jtvnw.net/previews-ttv/live_user_shroud-{width}x{height}.jpg';
url = url.replace("{width}", "40");
url = url.replace("{height}", "60");
console.log(url);
In your code change this
var thumbnail_url = response.data.data[i].thumbnail_url;
thumbnail_url = thumbnail_url.replace("{width}", "40");
thumbnail_url = thumbnail_url.replace("{height}", "60");
response.data.data[i].thumbnail_url = thumbnail_url;
As you comment you can do it without variable also
response.data.data[i].thumbnail_url = response.data.data[i].thumbnail_url.replace("{width}", "40").replace("{height}", "60");
Related
For a few days now i have been trying to extract images from a pdf, modify them, and then replace them in my pdf document. It works perfectly when working with jpeg images, but when it comes to png... I'm able to modify the image and then save it correctly, but when changing the buffer in the pdf, it turns all black. So there's my code :
try {
(async () => {
let imageData = imgTab.type === 'jpg' ? imgTab.data : await savePng(imgTab);
console.log(imgTab.type);
let typeJimp = "image/png";
if(imgTab.type === 'jpg'){
typeJimp = "image/jpeg";
}
const img = await Jimp.read(imageData).then(async function (image) {
image.color([
{ apply: 'hue', params: [90] }]);
*//HERE, the image saved is okay! It is modified as I want it to be*
image.write("testimage"+objIdx+"."+imgTab.type);
let data = fs.readFileSync("testimage"+objIdx+"."+imgTab.type);
let bufferData = Buffer.from(data);
*//The problem is when i do this to replace the buffer of my original image*
pdfObject.contents = bufferData;
fs.writeFileSync('client/public/test_modified.pdf', await pdfDoc.save());
}).catch(function (err) {
//return Promise.reject(err);
console.log(err);
});
})();
}
The main code to extract the images can be found here : pdf-lib extract images
I don't know if there's something special to do to make the buffer work, but if you do, feel free :)
Thanks in advance !
////
Okay, so for now, i just use it that way :
const img = await Jimp.read(imageData).then(async function (image) {
image.color([
{ apply: 'hue', params: [90] }]);
let data = await image.getBufferAsync('image/jpeg')
var res = await pdfDoc.embedJpg(data);
res.ref = pdfRef;
var test = await res.embed();
fs.writeFileSync('client/public/test_modified.pdf', await pdfDoc.save());
})
My pdfRef is the ref of the initial object i was trying to modify.
I'm trying to test if an Html video is currently playing, but can't seem to figure out how to get the currentTime. I've been trying things like:
async videoIsPlaying(indexOfVideo = 0) {
return ClientFunction(() => {
const video = document.getElementsByTagName('video')[indexOfVideo];
return video.currentTime > 0;
});
}
but my expect:
await t.expect(await playerPage.videoIsPlaying()).eql(true);
is returning:
AssertionError: expected [Function: __$$clientFunction$$] to deeply equal true
What am I doing wrong? Also, I'm using .eql() because .ok() returns truthy for any result.
Ahhh... just needed to fire the function, and also pass in the index thusly...
async videoIsPlaying(indexOfVideo = 0) {
return await ClientFunction((indexOfVideo) => {
const video = document.getElementsByTagName('video')[indexOfVideo];
return video.currentTime > 0;
})(indexOfVideo);
}
Just FYI, this function lives in a page object
I'm developing an App that gets data from ACS, the post objects.
In my app there is button and when the users click that button it get the posts data.
In every post there is also a photo_id, which allows me to get the photo url from the cloud.
But there is a problem, it has a callback function and by the time the callback occurs it is too late.
Anyway, the code below only shows the last post with a photo, the first post doesn't have a photo.
(there are only 2 post objects so far).
I believe the problem is in the callback, but I can't seem to fix it.
Hope you guys can help me out, thanks in advance!
Here is my code:
function getCarsClick() {
Cloud.Posts.query({
page: 1,
per_page: 20
}, function (e) {
if (e.success) {
var tableData = [];
for (var i = 0; i < e.posts.length; i++) {
var post = e.posts[i];
var row = Titanium.UI.createTableViewRow();
var title = Titanium.UI.createLabel({
text:post.title,
font:{fontSize:18,fontWeight:'bold'},
color:'#ef349d',
width:'auto',
textAlign:'left',
top:2,
left:40,
height:30
});
var subtitle = Titanium.UI.createLabel({
text:post.content,
font:{fontSize:12,fontWeight:'normal'},
color:'#000000',
width:'auto',
textAlign:'left',
bottom:10,
left:60,
height:32
});
row.add(title);
row.add(subtitle);
row.hasChild=true;
row.height = 80;
row.selectedBackgroundColor = '#ef349d';
Cloud.Photos.show({
photo_id: post.photo_id
}, function (e) {
if (e.success) {
var photo = e.photos[0];
var img1 = Ti.UI.createImageView({image:photo.urls.square_75,width:30,height:30,left:2, top:2});
row.add(img1);
} else {
alert('Error:\n' +
((e.error && e.message) || JSON.stringify(e)));
}
});
tableData.push(row);
}
//add table data
$.tableview1.setData(tableData);
} else {
alert('Error:\n' +
((e.error && e.message) || JSON.stringify(e)));
}
});
}
If you pass a photo into the post using the default parameter provided, the image should come back by default and not require you to make an additonal API call to get the photo.
I would also suggest if you are just starting out to use Alloy and more importantly use ListViews not TableView
https://github.com/aaronksaunders/AppC-Alloy-Book-Misc
I have a problem with module.export on titanium. I tried following https://wiki.appcelerator.org/display/guides/CommonJS+Modules+in+Titanium but it doesn't work at all.
I have 2 little pieces of code. App.js:
var fenetreBase = Titanium.UI.createWindow({fullscreen:true,backgroundColor:"white",exitOnClose:true});
fenetreBase.open();
var vueimage = new (require('UI/viewimage'))();
vueimage.test();
fenetreBase.add(vueimage);
and viewimage.js in the folder UI.
function viewimage() {
var lavue = Ti.UI.createView({backgroundColor:'red' });
var item =...
lavue.add(item...);
return lavue;
}
viewimage.prototype.test = function() {
Ti.API.info("test");
};
module.exports = viewimage;
I have an error saying
Object #<view> has no method 'test' in app.js vueimage.test()
In my mind, I follow the example of "Instantiable Objects" in the wiki above but I may have not understand something. I expect I made a stupid mistake. I tried many other things, each uglier than other and it doesn't work anyway.
Can somebody tell me where the mistake is?
your mistake is assuming that you have an instance of viewimage when you run:
var vueimage = new (require('UI/viewimage'))();
you are getting an instance of
var lavue = Ti.UI.createView({backgroundColor:'red' });
which doesn't have a test property.
Perhaps you could use an object like this instead:
function viewimage() {
var result = {};
var lavue = Ti.UI.createView({backgroundColor:'red' });
var item =...
lavue.add(item...);
result.lavue = lavue;
result.test = function() {
Ti.API.info("test");
};
return result;
}
EDIT
In your App.js:
var vueimage = new (require('UI/viewimage'))();
vueimage.test();
fenetreBase.add(vueimage.lavue);
I have used Ti.Network.createHTTPClient in Titanium and see that the control goes neither inside onLoad nor onError. What could be the reason?
var loader = Titanium.Network.createHTTPClient();
loader.onload = function() {
alert("Hello");
}
loader.onError = function(e)
alert("Error: " + e.error);
}
Add these 2 lines to make it work! You did not send the request, nor did you send the URL
// add url in here
loader.open("GET",'[URL HERE]');
// Send the request.
loader.send();
var xhrSitelogin = Titanium.Network.createHTTPClient();
xhrSitelogin.open('POST', webservice_url);
xhrSitelogin.send({
method : "userlogin",
username : username,
password : password
});
xhrSitelogin.setTimeout(10000);
xhrSitelogin.onerror = function() {
showAlertBox('Service timed out. Please try again.');
//Hide Indicator
};
xhrSitelogin.onload = function() {
alert(this.responseText);
//RESPONSE RECEIVED
};
Vote Up or mark best if you consider it help full.
Hi dosth try with this am not sure it will work if it work i will be happy
var taskRequest = Titanium.Network.createHTTPClient();
var api_url = 'http://myawesomeapi.heroku.com/users/' +
Ti.App.Properties.getString("userID") + '/tasks';
taskRequest.onload = function() {
var tasks = [];
// code populating the tasks array
alert(tasks);
callback( tasks ); // invoke the callback
}
taskRequest.open('GET', api_url, false);
taskRequest.setRequestHeader('Content-Type', 'application/json');
taskRequest.send();
<....>
loader.open("POST/GET","URL");
loader.onload(response){
//get the response
console.log(this.responseText);
};
loader.send();
Use this pattern.
If you need to set any header then use loader.setRequestHeader("Content-Type", "application/json; charset=utf-8"); after the open()/before onload() and send()