So I've recently started working with BB cascades and is currently working on the camera component. Here's my code with which I 'am currently facing problem:
import bb.cascades 1.2
Page {
property string name: ""
function setSource(source) {
name = source;
gestureContainer.resetViewableArea();
}
Container {
layout: StackLayout {
}
id: gestureParent
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
ScrollView {
id: gestureContainer
scrollViewProperties {
scrollMode: ScrollMode.Both
}
scrollRole: ScrollRole.Main
scrollViewProperties.minContentScale: 1.0
scrollViewProperties.maxContentScale: 8.0
scrollViewProperties.pinchToZoomEnabled: true
scrollViewProperties.overScrollEffectMode:OverScrollEffectMode.Default
ImageView {
id: gestureImage
imageSource: name
}
} // ScrollView
} // Container
}
So the problem here is whenever I run the following code and open any image from my gallery, pre zoomed in version of image loads and I'am not able to zoom out of it but I can zoom in further(loaded image has zoomed value of somewhere around 8.0 of maxcontentscale).
The code is correct and works on a BlackBerry Passport with OS 10.3.1.
Related
Is it possible to get such cursor control in QML TextArea?
for example, a video on this topic
https://www.youtube.com/watch?v=XRUCnZFv9Ro
Because Qt now encourages you to use QtQuick 2.x controls instead of QtQuick 1.x controls interactions need to be recreated in the Qt environment, and you can no longer rely on the OS to do this for you. Unfortunately, the user interaction you describe would take some effort to recreate.
To start, the following code only does the first part: intercepts the long press of a space. The second part had not been implemented, i.e. the handling of mouse drag:
import QtQuick
import QtQuick.Controls
Page {
property bool spaceDown: false
Item {
width: parent.width
height: frame.height
Frame {
id: frame
width: parent.width
opacity: holdArea.focus ? 0.2 : 1.0
TextEdit {
id: textEdit
width: parent.width
Keys.onPressed: {
if (event.key === Qt.Key_Space) {
if (spaceDown) {
holdArea.forceActiveFocus();
} else {
spaceDown = true;
}
}
}
}
}
Item {
id: holdArea
focus: true
Keys.onReleased: {
spaceDown = false;
textEdit.forceActiveFocus();
}
}
}
}
You can try the first part here
I need to capture the screen of my App in iPhone. Whenever there is a pop up page to be captured, only the pop up view is visible in the screenshot, the background screen goes black in the screenshot captured. I need the screenshot to show the pop up along with the underlying page.
I am coding in Xamarin.Forms. I am using DependencyService to capture screenshot in iOS and Android.
In Android I am able to capture popup along with background page.
But in iOS the popup along with a black background is captured.
var capture = UIScreen.MainScreen.Capture();
This is the code in iOS DependencyService to capture screenshot.
I had a screenshot method that I used in one of my POC's but I am not sure if it will work with the pop-up thing or not you can try it out
private void TakeScreenshot()
{
var layer = UIApplication.SharedApplication?.KeyWindow?.Layer;
var scale = UIScreen.MainScreen.Scale;
UIGraphics.BeginImageContextWithOptions(layer.Frame.Size, false, scale);
var context = UIGraphics.GetCurrentContext();
if (context == null)
{
return; // Show popup screenshot was not taken
}
layer.RenderInContext(context);
var screenshotImage = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
if (screenshotImage != null)
{
screenshotImage.SaveToPhotosAlbum((UIImage, NSError) => { });
}
}
UPDATE: Problem solved with new released googlemaps api 3.35
Problem:
When trying to pinch (or double tap quickly) to zoom in, if there's marker on the mapview, the app may crash.
It didn't happen until Google releases their JS API 3.32 which uses a new map renderer. We used to force using 3.31 but since August it has been deleted.
Using:
Phonegap: Phonegap cli-7.1.0, Cordova iOS 4.5.4
iOS: 11, 12 (possibly all iOS versions)
Devices: iPhone 8, iPhone X, iPad Pro (possibly all Apple devices)
GoogleMaps JavaScript API: 3.32 - 3.34
React: 16.2.0
Google Maps Implementation (tried in 4 ways):
react-google-maps: crash
google-map-react: crash
normal js implementation: not crash
var marker1 = new window.google.maps.Marker({
position: { lat: 39.304, lng: -76.617 },
map: this.map
});
var marker2 = new window.google.maps.Marker({
position: { lat: 39.305, lng: -76.616 },
map: this.map
});
create a React component with normal js implementation: crash
My Marker Component:
class Marker extends Component {
componentDidMount() {
const { position, icon } = this.props;
this.marker = new window.google.maps.Marker({
position,
icon
});
}
componentWillReceiveProps(newProps) {
const { map, position } = newProps;
if (map && !this.marker.map) {
this.marker.setMap(map);
}
if (position.lat !== this.props.position.lat || position.lng !== this.props.position.lng) {
this.marker.setPosition(position);
}
}
componentWillUnmount() {
this.marker.setMap(null);
}
render() {
return false;
}
}
How I use this Component:
{_.map(studyAreas, (s, i) => (
<Marker
icon={s.icon}
position={s.position}
map={this.map}
key={i}
/>
))
}
Relevant Links
IOS : Cordova App Crash on Google Map api zoom in ios 11.3 iphone x
https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/75
In the discussion of this github issue, it seems like they had this crashing problem because of some js libraries. However, I'm having this problem even when I created a simple new phonegap app without referencing any extra libraries.
Any help, discussion, thoughts would be appreciated, thanks!
I am using angular-chart.js in my project to draw chart-doughnut with ionic. What I am doing here is setting chart height from controller code. The height I am setting is based on screen size. It is working perfectly fine on Android and Web but on iOS it is not working. Below is my code:
HTML code:
<canvas class="chart chart-doughnut" chart-data="data" height="{{height_chart}}" chart-colors="colors" chart-series="series" chart-options="options"></canvas>
Javascript code:
if (window.innerWidth < 600) {
$scope.height_chart = window.innerHeight * 0.5;
}
$scope.colors = ['#3973ac', '#d9e6f2'];
$scope.options = {
cutoutPercentage: 80,
tooltips: {
enabled: false
},
hover: {
mode: null
},
elements: {
arc: {
borderWidth: 0
}
}
};
I am not able to figure out the problem. Any pointer will be highly appreciable. Thanks
I don't know the exact reason why it happened but it is working fine on iOS real device. Issue can be reproduce only on simulator. Maybe there is some rendering issue in simulator.
I have a listview that displays a list of userdetails on right and profile pic on left which I get from back end. For downloading and loading the image I'm using a webviewsample image class from github and it works fine. Now I'm need to make the image round. As I searched through web I understand nine slicing is used to do this but I'm not sure how. Each of my listitem has a different background which changes randomly. Below are the sample image of what I have done and what I actually want.
This is my current list view
This is how I need it to be
This is the code of my custom list item that displays this view
Container {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
Container {
id:profileSubContainer
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
layout: DockLayout {
}
WebImageView {
id: profilePic
url: profilePicture
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
scalingMethod: ScalingMethod.AspectFit
visible: (profilePic.loading == 1.0)
}
ImageView {
id: defaultPic
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
scalingMethod: ScalingMethod.AspectFit
imageSource: "asset:///Images/defaultProfile.png"
visible:!profilePic.visible
}
layoutProperties: StackLayoutProperties
{
spaceQuota: 1
}
}
CustomButtonTextArea {
id: userName
layoutProperties: StackLayoutProperties {
spaceQuota: 2
}
text: username
textEditable: false
textAreaStyle: getStyle()
}
}
If you have older version of Qt where this isn't supported directly, a rather hackish way to do is this :
Cut out a circular hole from the background image (Using Photoshop/GIMP etc.) and save it as a PNG.
Now all you need to do is to arrange all the elements in such a way that it appears as if the profile pic has been cut out. If you place your profile pic first and then the background image, background image cover the profile pic, leaving only circular part from it visible (Note that it SHOULD be PNG for this to work).
Correct order will be :
a. Profile Image
b. Background Image
c. Text
You can either write these elements in that order or use the z value of elements.
Image // Background Image
{
z = 2;
}
Image // Profile Image
{
z = 1;
}
Text
{
z = 3;
}
P.S. This is pseudo code, I hope you get the idea. I did something like this with qt 4.8 long back, and it worked liked a charm.
Edit 1.
In case you want to have background of random color instead of images (as you have asked in the comment), you can try to do this using Qt.
Create the custom background with using QPainter or some similar class and some clipping mask to carve out the circular part.
Expose this class as a Qml element.
Use it for your case by passing random colors while drawing.
They talk of something similar here : http://qt-project.org/forums/viewthread/2066
P.S. Haven't tried it myself, but looks like a good direction if you are stuck otherwise.
If you can't use OpacityMask because your version of Qt doesn't support QtGraphicalEffects, you could do the same trick with Canvas, that is supported since Qt 5.0.
Rectangle{
id: root
width: 400
height: 400
color: "gray"
property string imageUrl: "./rabbid.jpg"
Canvas{
anchors{
fill: parent
margins: 50
}
Component.onCompleted:{
loadImage(imageUrl); // Ready to be used in onPaint handler
}
onPaint:{
console.log("Painting...");
var context = getContext("2d");
context.save();
context.fillStyle = "black";
context.arc(width/2, height/2, width/2, height/2, width);
context.fill();
context.globalCompositeOperation = "source-in";
context.drawImage(root.imageUrl, 0, 0, width, height);
context.restore();
}
}
}
The result:
Since Context.globalCompositeOperation = "source-in" is set, context operations will be done inside previous drawings. Take a look to Context2D for more info, and here for a graphical explanation of composite operations.