HI
i have developed a capture image and select from folder concept from quick report sample. now it is working fine on laptop of window and mac, it is also working fine on android phone. but when i try to select or click a pic from camera and show in grid, it do not show anything in grid.
I have checked and clicked on grid , the image return path on click on iPhone, i consoled it, but do not show image, this is the path below it returns when click on grid.
please find my code below and help:
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.1
import "../../controls" as Controls
import ArcGIS.AppFramework.Multimedia 1.0
import ArcGIS.AppFramework 1.0
import "../../assets/js/backend.js" as Backend
import Qt.labs.folderlistmodel 2.1
Page{
id: camera_submit
property var image_array:[]
property url clipBoardUrl: ""
property int captureResolution: 1024
property alias appModel:fileListModel
property int maximumAttachments: app.info.propertyValue("maximumAttachments", 15)
property real scaleFactor: AppFramework.displayScaleFactor
property bool photoReady: false
background:Rectangle {
id: iconRect
color: "#333333"
width:parent.width
}
ScrollView {
id: frame
clip: true
anchors.fill: parent
ColumnLayout {
width: frame.width
spacing: 12
clip: true
Image {
id: backgroundImage
source: "../../assets/images/imgNew.png"
width: parent.width
height: 180
Layout.alignment: Qt.AlignHCenter
Rectangle {
id: rectangle
width: parent.width
height: 180
color: "#333333"
opacity: 0.5
border.width: 0
}
Image {
id: logo_img
anchors.centerIn: parent
width: 35
height: 35
source: "../../assets/images/Group 1156@2x.png"
fillMode: Image.PreserveAspectFit
MouseArea {
id: mouseArea1
width: 36
height: 35
onClicked: {
popup1.open()
//cameraDialog.captureMode = CameraDialog.CameraCaptureModeStillImage;
// cameraDialog.open();
}
}
}
}
GridView {
id:grid
width: parent.width
height: parent.height*3
focus: true
visible: appModel.count>0
model: visualListModel
cellWidth: parent.width/3
cellHeight: cellWidth*0.8
delegate: Item {
width: grid.cellWidth
height: grid.cellHeight
Rectangle {
id:brder
anchors.centerIn: parent
width: parent.width-16*scaleFactor
height: parent.height-16*scaleFactor
color: "transparent"
radius: 3*scaleFactor
border.color: "#80cccccc"
border.width: 1*scaleFactor
Image {
id: myIcon
source: type == "attachment"? path : ""
width: parent.width-2
height: parent.height-2
fillMode: Image.PreserveAspectCrop
anchors.centerIn: parent
autoTransform: true
visible: source>""
cache: false
sourceSize.width: width
sourceSize.height: height
MouseArea {
anchors.fill: parent
onClicked: {
console.log("type==> "+type);
console.log("Path====>"+path);
if(brder.border.width!==2){
brder.border.color="green";
brder.border.width=2;
app.damage_report_image.push(path);
}
else{
myIcon.width=parent.width
myIcon.height=parent.height
brder.border.color="#80cccccc";
brder.border.width=1;
app.damage_report_image.pop(path);
}
//pop_text.text=path;
//popup2.open();
}
}
}
}
}
}
}
}
Controls.Kbutton{
id:arrow_btn
//anchors.centerIn: parent
anchors.bottom: parent.bottom
anchors.margins: 60
onClicked: {
if(app.damage_report_image.length>0){
stackView.push("../booking/Booking_submit_report.qml")
}else{
popup.popMessage = "Please add and select atleast one image."
popup.open()
}
}
anchors.horizontalCenter: parent.horizontalCenter
Image {
id: img22
height:25
width:25
source: "../../assets/images/rightarrow.png"
fillMode: Image.PreserveAspectFit
anchors.centerIn: parent
}
baseColor: "#ff7919"
borderColor: "#ff7919"
}
FileFolder{
id: mypicturesFolder
//path: settings.app_root_path+ "/cameraPictures"
path: "cameraPictures"
Component.onCompleted: {
makeFolder();
}
}
CameraDialog {
id: cameraDialog
onAccepted: {
if (captureMode === CameraDialog.CameraCaptureModeStillImage) {
if(!mypicturesFolder.exists)
mypicturesFolder.makeFolder();
var fileInfo = AppFramework.fileInfo(fileUrl);
var picfolder = fileInfo.folder
var iscopied = picfolder.copyFile(fileInfo.fileName,mypicturesFolder.path + "/"+ fileInfo.fileName)
picfolder.removeFile(fileUrl)
var picFileInfo = picfolder.fileInfo(fileInfo.fileName)
settings.selectedImageFilePath = picFileInfo.filePath
var picturepath = ""
if(Qt.platform.os === "windows")
picturepath = "file:///" + mypicturesFolder.path + "/"+ fileInfo.fileName
else
picturepath = "file://" + mypicturesFolder.path + "/"+ fileInfo.fileName
appModel.append(
{path: picturepath, type: "attachment"}
)
visualListModel.initVisualListModel();
}
}
onRejected: {
console.log("rejected ", error)
switch(error)
{
case CameraDialog.CameraErrorNo:
console.log("**No Error")
break;
case cameraDialog.CameraErrorCameraPermissionNotGranted:
console.log("**Camera Permission Not Granted")
break;
case CameraDialog.CameraErrorMicrophonePermissionNotGranted:
console.log("**Microphone Permission Not Granted")
break;
case CameraDialog.CameraErrorStoragePermissionNotGranted:
console.log("**Storage Permission Not Granted")
break;
}
}
}
ImageObject{
id: imageObject
}
ListModel{
id: fileListModel
}
ListModel{
id: visualListModel
Component.onCompleted: {
visualListModel.initVisualListModel();
}
function initVisualListModel(){
var temp;
visualListModel.clear()
var hasTag;
var countAttachment = 0;
for(var i=0;i<maximumAttachments;i++){
if(i<appModel.count){
temp = appModel.get(i);
var tempPath = temp.path;
console.log("tempPath===>"+tempPath);
var tempType = temp.type;
visualListModel.append({path: tempPath, type: tempType});
countAttachment++;
}else{
visualListModel.append({path: "", type:"placehold"})
}
}
}
}
Keys.onBackPressed: {
//timer.pressBack()
stackView.pop();
}
footer: Controls.Kfooter {
id:footer
path: '1'
}
Component.onCompleted: {
if(settings.login === ''){
stackView.push("../Login.qml");
}
}
//Popup to show messages or warnings on the bottom postion of the screen
Popup {
id: popup
property alias popMessage: message.text
background: Rectangle {
implicitWidth: camera_submit.width
implicitHeight: 60
}
//y: (loginPage.height - 60)
x: Math.round((camera_submit.width - width) / 2)
y: Math.round((camera_submit.height - height) / 2)
modal: true
focus: true
closePolicy: Popup.CloseOnPressOutside
Text {
id: message
width: parent.width
wrapMode: Text.WordWrap
anchors.centerIn: parent
font.pointSize: 7
}
onOpened: popupClose.start()
}
// Popup will be closed automatically in 2 seconds after its opened
Timer {
id: popupClose
interval: 2000
onTriggered: function(){
popup.close();
}
}
Popup {
visible: false
id: popup1
background: Rectangle {
implicitWidth: backgroundImage.width
implicitHeight: backgroundImage.height
color: "#00000000"
}
modal: true
focus: true
Row{
Layout.alignment: Qt.AlignHCenter
topPadding: 100
leftPadding: 100
spacing: 70
Row{
topPadding: 5
Image {
width: 40
height: 35
id: camera_icon1
source:"../../assets/images/Group 1156@2x.png"
MouseArea{
anchors.fill: parent
onClicked: {
//console.log("submit report camera working fine");
cameraDialog.captureMode = CameraDialog.CameraCaptureModeStillImage;
cameraDialog.open();
popup1.close();
}
}
}
}
Image {
width: 50
height: 50
id: folder_icon
source:"../../assets/images/fld.png"
opacity: 0.6
MouseArea{
anchors.fill: parent
onClicked: {
pictureChooser.open();
popup1.close();
}
}
}
}
Row{
Layout.alignment: Qt.AlignHCenter
spacing: 30
topPadding: 145
leftPadding: 90
Text {
id: camera
text: qsTr("Camera")
color: "#ffffff"
leftPadding: 8
}
Text {
id: folder
text: qsTr("Album")
color: "#ffffff"
leftPadding: 42
}
}
}
Controls.PictureChooser {
id: pictureChooser
outputFolder: mypicturesFolder
copyToOutputFolder: true
onAccepted: {
photoReady = true;
//------ RESIZE IMAGE -----
var path = AppFramework.resolvedPath(settings.selectedImageFilePath)
//resizeImage(path)
//------ RESIZE IMAGE -----
var filePath = "file:///" + path
filePath = filePath.replace("////","///");
appModel.append(
{path: filePath, type: "attachment"}
)
settings.selectedImageFilePath = filePath;
visualListModel.initVisualListModel();
}
}
Popup {
visible: false
id: popup2
x: Math.round((camera_submit.width - width) / 2)
y: Math.round((camera_submit.height - height) / 4)
background: Rectangle {
implicitWidth: 300
implicitHeight: 300
color: "#ffffff"
Row{
topPadding: 10
leftPadding: 10
Text {
id:pop_text
// text:path
wrapMode: Text.Wrap
width: 280
color: "#333333"
font.pixelSize: 16
font.family: 'Roboto'
}
}
Row{
spacing: 70
Layout.topMargin:40
topPadding: 100
leftPadding: 100
Controls.Kbutton {
text: qsTr("Ok")
font.weight: Font.Bold
Layout.alignment: Qt.AlignHCenter
width: 70
height: 45
borderColor: "#ff7919"
font.pixelSize: 14
baseColor: "#ff7919"
textColor: "#ffffff"
radius: 2
onClicked:
{
popup.close();
}
}
}
}
modal: true
focus: true
}
}
this is my another code of picture chooser:
/* Copyright 2020 Esri
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
//------------------------------------------------------------------------------
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import ArcGIS.AppFramework 1.0
Item {
id: pictureChooser
property string title: qsTr("Pictures")
property FileFolder outputFolder
//property alias outputFolder: outputFolder
property bool copyToOutputFolder: true
property bool useFileDialog: Qt.platform.os != "ios"
property url pictureUrl
signal accepted()
signal rejected()
//--------------------------------------------------------------------------
QtObject {
id: internal
property var uiComponent
}
//--------------------------------------------------------------------------
Component {
id: fileDialogComponent
FileDialog {
id: fileDialog
title: pictureChooser.title
folder: Qt.platform.os == "ios"
? "file:assets-library://":shortcuts.pictures
nameFilters: ["Image files (*.jpg *.png *.gif *.jpeg *.tif *.tiff)"]
onAccepted: {
// console.log("You chose: " + fileDialog.fileUrl)
if(fileDialog.fileUrl)
{
pictureUrl = fileDialog.fileUrl
var didload = imageObject.load(pictureUrl)
if(didload)
{
pictureChooser.accepted()
var fileInfo = AppFramework.fileInfo(fileDialog.fileUrl);
}
}
}
onRejected: {
pictureChooser.rejected();
}
}
}
//--------------------------------------------------------------------------
Component {
id: pictureChooserComponent
Rectangle {
property string picturesPath: AppFramework.standardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
property var picturesModel
anchors.fill: parent
color: palette.window
Component.onCompleted: {
refreshPictures();
}
SystemPalette {
id: palette
colorGroup: SystemPalette.Active
}
ColumnLayout {
anchors.fill: parent
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: titleRow.height + 2 * AppFramework.displayScaleFactor
color: "darkgrey"
RowLayout
{
id: titleRow
anchors {
topMargin: 2 * AppFramework.displayScaleFactor
left: parent.left
right: parent.right
}
Button {
Layout.alignment: Qt.AlignLeft
text: qsTr("<")
onClicked: {
pictureChooser.rejected();
close();
}
}
Text {
Layout.alignment: Qt.AlignHCenter
text: pictureChooser.title
color: "white"
font {
pointSize: 24
}
}
}
}
Text {
text: testJSON //picturesPath
visible: false
}
GridView {
id: picturesGridView
Layout.fillWidth: true
Layout.fillHeight: true
model: picturesModel
clip: true
cellWidth: 200 * AppFramework.displayScaleFactor
cellHeight: 115 * AppFramework.displayScaleFactor
delegate: pictureDelegate
}
}
FileFolder {
id: picturesFolder
path: picturesPath
}
Component {
id: pictureDelegate
Item {
width: picturesGridView.cellWidth
height: picturesGridView.cellHeight
Rectangle {
anchors {
fill: parent
margins: 5 * AppFramework.displayScaleFactor
}
color: "lightgrey"
border {
color: "black"
width: 1
}
Image {
anchors {
fill: parent
margins: 1
}
fillMode: Image.PreserveAspectFit
source: picturesFolder.fileUrl(modelData)
Text {
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
text: modelData
horizontalAlignment: Text.AlignHCenter
style: Text.Raised
styleColor: "black"
color: "white"
}
}
MouseArea {
anchors.fill: parent
onClicked: {
pictureChooser.pictureUrl = picturesFolder.fileUrl(modelData);
pictureChooser.accepted();
close();
}
}
}
}
}
function open() {
visible = true;
}
function close() {
visible = false;
}
function refreshPictures() {
picturesModel = picturesFolder.fileNames("*.jpg");
//console.log(JSON.stringify(picturesModel));
}
}
}
//--------------------------------------------------------------------------
ImageObject{
id: imageObject
}
onAccepted: {
internal.uiComponent = null;
var pictureUrlInfo = AppFramework.urlInfo(pictureUrl);
var picturePath = pictureUrlInfo.localFile;
var assetInfo = AppFramework.urlInfo(picturePath);
var outputFileName;
var suffix=""
if(pictureUrlInfo.fileName)
suffix = pictureUrlInfo.fileName.split('.')[1]
if(!suffix)
suffix="jpg"
if (assetInfo.scheme === "assets-library") {
pictureUrl = assetInfo.url;
outputFileName = assetInfo.queryParameters.id + "." + assetInfo.queryParameters.ext;
} else {
outputFileName = AppFramework.createUuidString(2) + "." + suffix
//console.log("outputFileName", outputFileName);
}
photoReady = true;
if (copyToOutputFolder) {
var outputFileInfo = outputFolder.fileInfo(outputFileName);
//workaround for HEIC file format to be converted to jpg
if (outputFileName.match(/\.hei(c|f)$/i)) {
imageObject.load(picturePath);
outputFileName = outputFileName.replace(/\.[a-z]*$/i, ".jpg");
outputFileInfo = outputFolder.fileInfo(outputFileName);
outputFolder.removeFile(outputFileName);
if (!imageObject.save(outputFileInfo.filePath)) {
console.error("Unable to save image:", outputFileInfo.filePath);
return;
}
picturePath = outputFolder.filePath(outputFileName);
} else {
//imageObject.load(pictureUrl)
outputFolder.removeFile(outputFileName);
var issaved = imageObject.save(outputFileInfo.filePath)
//outputFolder.copyFile(picturePath, outputFileInfo.filePath);
}
picturePath = outputFolder.filePath(outputFileName);
}
console.log(pictureUrlInfo, picturePath, assetInfo, outputFileName)
settings.selectedImageFilePath = picturePath;
}
onRejected: {
internal.uiComponent = null;
}
//--------------------------------------------------------------------------
function open() {
console.log("FileDialog", useFileDialog)
// if (useFileDialog) {
// internal.uiComponent = fileDialogComponent.createObject(pictureChooser.parent);
// } else {
// internal.uiComponent = pictureChooserComponent.createObject(pictureChooser.parent);
// }
internal.uiComponent = fileDialogComponent.createObject(pictureChooser.parent);
internal.uiComponent.open();
}
//--------------------------------------------------------------------------
function close() {
if (internal.uiComponent) {
internal.uiComponent.close();
internal.uiComponent = null;
}
}
//--------------------------------------------------------------------------
property var testJSON
}
Solved! Go to Solution.
You should change:
path: "cameraPictures"
with:
path: "~/cameraPictures"
This one change will do the following:
1. Change path to an absolute reference
2. Use AppStudio inbuilt shortcut for implicitly referencing AppFramework.userHomePath
3. The path is guaranteed to be a directly that's accessible / writable cross platform (because that's how we define userHomePath)
So, in short, "~" is your friend here.
You should change:
path: "cameraPictures"
with:
path: "~/cameraPictures"
This one change will do the following:
1. Change path to an absolute reference
2. Use AppStudio inbuilt shortcut for implicitly referencing AppFramework.userHomePath
3. The path is guaranteed to be a directly that's accessible / writable cross platform (because that's how we define userHomePath)
So, in short, "~" is your friend here.
it worked when we click picture from camera, but how to display image when we select from picturechooser on old iphone.
actually everything working fine on new iphone, but an older iphone do not work for picture chooser