I've tried with different images in several resolutions (50x30, 70x50, 100x70). All of them are good enough out of titanium app, but I cannot get custom pins without pixel effect into the app.
I'm using Titatnium 3.0.
How can I make my custom images to obtain a best visual result?
Images source: http://imgur.com/a/glhIy#6ceV2Vk
Code:
var annot = Titanium.Map.createAnnotation({
longitude : franchise.direction.loc[0],
latitude : franchise.direction.loc[1],
title : franchise.name,
subtitle : franchise.direction.address,
image : "testing_pin.png",
animate : false,
draggable : false
});
$.mapView.addAnnotation(annot);
These are the Pin icon sizes I use, and they look sharp on my maps.
pin#2x.png: 80px x 80px #72 dpi
pin.png: 40px x 40px
Related
I am trying to use mask on my QWidget. I want to overlay existing widget with row of buttons - similar to Skype
Notice that these buttons don't have jagged edges - they are nicely antialiased and widget below them is still visible.
I tried to accomplish that using Qt Stylesheets but on pixels that should be "masked out" was just black colour - it was round button on black, rectangular background.
Then I tried to do this using QWidget::mask(). I used following code
QImage alpha_mask(QSize(50, 50), QImage::Format_ARGB32);
alpha_mask.fill(Qt::transparent);
QPainter painter(&alpha_mask);
painter.setBrush(Qt::black);
painter.setRenderHint(QPainter::Antialiasing);
painter.drawEllipse(QPoint(25,25), 24, 24);
QPixmap mask = QPixmap::fromImage(alpha_mask);
widget.setMask(mask.mask());
Sadly, it results in following effect
"Edges" are jagged, where they should be smooth. I saved generated mask so I could investigate if it was the problem
it wasn't.
I know that Linux version of Skype does use Qt so it should be possible to reproduce. But how?
One possible approach I see is the following.
Prepare a nice high resolution pixmap with the circular button icon over transparent background.
Paint the pixmap on a square widget.
Then mask the widget leaving just a little bit of margin beyond the border of the circular icon so that the widget mask jaggedness won't touch the smooth border of the icon.
I managed to get a nice circular button with not so much code.
Here is the constructor of my custom button:
Button::Button(Type t, QWidget *parent) : QPushButton(parent) {
setIcon(getIcon(t));
resize(30,30);
setMouseTracking(true);
// here I apply a centered mask and 2 pixels bigger than the button
setMask(QRegion(QRect(-1,-1,32,32),QRegion::Ellipse));
}
and in the style sheet I have the following:
Button {
border-radius: 15px;
background-color: rgb(136, 0, 170);
}
With border-radius I get the visual circle and the mask doesn't corrupt the edges because it is 1 pixel away.
You are using the wrong approach for generating masks. I would generate them from the button images themselves:
QImage image(widget.size(), QImage::Format_Alpha8);
widget.render(&image);
widget.setMask(QBitmap::fromImage(image.createMaskFromColor(qRgba(0, 0, 0, 0))));
I am developing a image gallery application using titanium android. The image view is used to view the images. But my problem is first time the images load properly. When I am using the app long time the the app use more cache memory as well as the image is not loading. The code is below
var SelfieImageView = Ti.UI.createImageView({
width : '100%',
height : Ti.UI.SIZE,
image : 'http://mydomain.com/image1.png' ,
defaultImage : '/images/Default-Back-Ground--Advertisements.png',
bottom : 3,
Index : FollowingFeedStartIndex,
});
Attached is the code for we have implemented for the busy indicator on iOS. But this does not wrap the busyText on iOS.
$.r.setBusyIndicator(new WL.BusyIndicator('content', {
opacity : 0.65,
fullScreen : false,
text : busyText
}));
Wrapping is not available.
You can use a different busy indicator altogether: a native busy implementation by you, or an indicator provided by a 3rd party library (jQuery Mobile, ...), etc.
Otherwise, you need to use the boxLength property which controls the height and width of the busy square holding the text, like this:
var busy = new WL.BusyIndicator(null, {
text: "Ouverture de session",
boxLength: 170 // Play with this value.
});
busy.show();
Related question: IBM Worklight 6.1 - How to customize WL.BusyIndicator's height and width?
I am drawing stencils using Dojo and I need to make some of the stencils "unmovable" - that is, when a user clicks on the stencil, it is not able to be dragged around the screen.
I guess there's not a lot of code to post here as I'm struggling with the Dojo docs to see if this is possible. I'm adding my stencil using the following line of code:
dojoDrawing.addStencil("rect", {
x : someXVal,
y : someYVal,
width : someWidth,
height : someHeight
});
Any guidance is much appreciated.
Although it doesn't seem ideal, I was able to accomplish what I wanted by making the stencil disabled:
var stencil = dojoDrawing.addStencil("rect", {
x : someXVal,
y : someYVal,
width : someWidth,
height : someHeight
});
stencil.disable();
This changes the stencil colors to the disabled state and makes it not selectable and therefore not movable.
I am working on a mobile application and using sencha touch charts. By default horizontal bar chart is fitting exactly into screen. If there are more number of bars,then bars are appearing very thin and looking odd. I want to fix bar width to have uniform look and feel irrespective of number of bars being displayed. No matter even user need to scroll down to see entire chart. I have tried below option in series configuration, but it did not work.
style : {
size : 30
}
Please help me.
Thanks,
Nag.
am able to change the bar width by setting barWidth option in touchcharts-debug.js by refering to the following link
http://docs.sencha.com/touch-charts/1-0/source/Bar.html
but the axis labels are not rendering properly labels are fitting into screen
I tried this code in my interactions to render the labels, it's working fine
{
type: 'panzoom',
showOverflowArrows: false,
//axes: ['bottom'],
axes: {
bottom: false,
left: {
startZoom: 2
}
}
}