I am using croppie js for loading image on my project, image loads fine in Chrome & Firefox.
This is What I Get on Chrome and Firefox
and this on Internet Explorer 11.
Here is My code
var basic = $("#div" + selector).croppie({
viewport: {
width: 200,
height: 200
},
boundary: {
width: widthContainer,
height: 300
},
showZoomer: true,
enforceBoundary:true
});
var bindPromise = basic.croppie('bind', {
url: path
});
$("#pnlcrop .cropcontainer div.croploader").remove();
$("#div" + selector).show();
}
Can anyone tell me why this issue is happening on IE11 ?
I Solved the Issue By using enableExif: true and exif.js.
Here is my Fixed code :
$("#div" + selector).croppie('destroy');
var basic = $("#div" + selector).croppie({
enableExif: true,
viewport: {
width: 200,
height: 200
},
boundary: {
width: widthContainer,
height: 300
},
showZoomer: true,
enforceBoundary:true
});
var bindPromise = basic.croppie('bind', {
url: path,
});
Related
I am trying to implement dark mode theme in our app for iOS 13 and above. I have followed this link Dark Mode in iOS 13. But I am facing some issue. I have attached the sample code below. I am expecting if I change enable dark appearance then it should change the color of window according to semantic colors file.
var deviceDetect = require('./deviceDetect');
var dialog = require('./dialogueBox');
var currentStyle = deviceDetect.isIos() ? Ti.App.iOS.userInterfaceStyle : undefined;
var colorWindow = Ti.UI.fetchSemanticColor("backgroundColor");
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: colorWindow,
layout: 'vertical'
});
var top = Ti.UI.createView({
backgroundColor: 'red',
layout: 'horizontal',
height: Ti.UI.SIZE,
width: Ti.UI.FILL,
top: deviceDetect.isAndroid() ? 0 : '50%'
});
var view = Ti.UI.createView({
center: { x: 205, y: 250 },
height: 400,
width: 300,
backgroundColor: colorWindow,
layout: 'vertical',
top: '20%'
});
var img = Titanium.UI.createImageView({
center: { x: 150, y: 110 },
image: './logo.png',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
});
view.add(img);
var emailField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 30,
left: 10,
right: 10,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE
});
var passField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 10,
left: 10,
right: 10,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE
});
view.add(emailField);
view.add(passField);
if (deviceDetect.isIos() && currentStyle === Ti.App.iOS.USER_INTERFACE_STYLE_DARK) {
// dark mode
console.log("I am here", colorWindow, colorWindow[Ti.UI.semanticColorType]);
//win.backgroundColor = 'green';
}
if (deviceDetect.isIos()) {
Ti.App.iOS.addEventListener('traitcollectionchange', function (event) {
if (currentStyle !== Ti.App.iOS.userInterfaceStyle) {
currentStyle = Ti.App.iOS.userInterfaceStyle;
if (currentStyle == 2) {
//tfAmount.color = 'white';
// dark mode
//win.backgroundColor = colorWindow;
//view.backgroundColor =
} else {
//win.backgroundColor = '#AAAAFF';
//view.backgroundColor = '#90EE90';
}
//console.log(colorWindow);
//win.backgroundColor = colorWindow;
//Ti.API.info('User Interface Style changed: ' + currentStyle);
}
});
}
win.add(view);
win.add(top);
win.open();
Here are the semantic.colors.json file content:
{
"backgroundColor": {
"light": "#ffffff",
"dark": "#000000"
}
}
Thanks in advance!!!
let me know If I missing something.
I've slimmed down the example to see just the parts that are needed and it works fine (iOS + Android [I've used 9.1.0 already]):
/app/controllers/index.js
var colorWindow = Ti.UI.fetchSemanticColor("windowBackgroundColor");
var bgColor = Ti.UI.fetchSemanticColor("viewColor");
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: colorWindow
});
var view = Ti.UI.createView({
height: 300,
width: 300,
backgroundColor: bgColor
});
win.add(view);
win.open();
/app/assets/semantic.colors.json
{
"windowBackgroundColor": {
"dark": "#666666",
"light": "#ff0000"
},
"viewColor":{
"dark": "#00ff00",
"light": "#0000ff"
}
}
Make sure to use 9.0.3.GA (or later).
It will display a grey/green or red/blue screen, depending on your phones settings. Also make sure to close the window when changing the dark-mode on Android.
android not support selecting multiple images using react-native-image-crop-picker , how to fixed it ?
enter code here
` handlePickImage = async () => {
try {
console.log('hit')
const images = await ImagePicker.openPicker({
width: 1000,
height: 1000,
cropping: true,
multiple: true,
compressImageQuality: 0.5,
})
console.log(images)
for (const image of images) {
const path = image.path.split('/');
const fileName = path[path.length - 1]
console.log('fileNameforVideo', fileName)
this.setState(
{
files: [... this.state.files, { url: '', type: image.mime.split('/')[0], path: image.path }],
file: image.path,
fileName,
filetype: image.mime.split('/')[0],
mimeType: image.mime
})
await this.getSingedUrl();
}
} catch (error) {
console.log(error)
console.log('lol')
}
`
thanks in advance
Currently, it is possible in the following ways.
ImagePicker.openPicker({
multiple: true,
compressImageQuality: 0.5,
}).then(async images => {
const result = [];
for await (const image of images) {
const img = await ImagePicker.openCropper({
mediaType: "photo",
path: image.path,
width: 1000,
height: 1000,
});
result.push(img.path);
}
return result;
});
I am not sure if I understand correctly the issue you are experiencing, but the library you are using has a note in their docs that says:
"Android: The prop 'cropping' has been known to cause videos not to be display in the gallery on Android. Please do not set cropping to true when selecting videos."
(link to the library README here)
You seem to be setting the multiple option correctly, but I noticed you have cropping set to true, which may be the cause of your issue. I hope that helps!
I can generate the diagram in Chrome, Firefox, Safari and Microsoft Edge but not in IE11. When I look at the console, it tells me that there are two issues:
1.) 'init' is undefined
2.) Syntax error
In the initialization I do the following:
<script src="https://unpkg.com/gojs/release/go.js"></script>
<script src="/js/GenerateMap.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
init();
});
</script>
Inside GenerateMap.js I have the following:
function init() {
var newString = document.getElementById("valueFromServer").value;
var GO = go.GraphObject.make;
....}
And for the Syntax error it tells me that it's at line 13. The line containing ").":
myDiagram.nodeTemplateMap.add("",
GO(go.Node, "Auto",
// the entire node will have a light-blue background
{ resizable: false, width: 130, height: 80, background: "transparent" },
{ click: function (e, node) { var data = node.data; clicknode(data.key);} },
GO(go.Shape, "RoundedRectangle", { fill: "white" },
new go.Binding("fill", "isSelected", function (sel) {
if (sel) return "lightgoldenrodyellow"; else return "white";
}).ofObject("").makeTwoWay()),
GO(go.TextBlock, "Default Text",
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name"),
),
new go.Binding("location", "loc", go.Point.parse)
));
Why would these issues only be with IE11?
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name"),
The issue is related to the above code, at the end of the Binding method, there have an extra ',' symbol, try to remove it.
The following code should be works well, try to use it.
myDiagram.nodeTemplateMap.add("",
GO(go.Node, "Auto",
// the entire node will have a light-blue background
{ resizable: false, width: 130, height: 80, background: "transparent" },
{ click: function (e, node) { var data = node.data; clicknode(data.key);} },
GO(go.Shape, "RoundedRectangle", { fill: "white" },
new go.Binding("fill", "isSelected", function (sel) {
if (sel) return "lightgoldenrodyellow"; else return "white";
}).ofObject("").makeTwoWay()),
GO(go.TextBlock, "Default Text",
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name")
),
new go.Binding("location", "loc", go.Point.parse)
));
In the documentation, regarding the 'rallycard' object, it states: "In general, this class will not be created directly but instead will be instantiated by Rally.ui.cardboard.CardBoard as specified by its cardConfig". I have a model of a feature and I want to show it as a card like this (below) but it is not shown in the rendered page.
var card = Ext.create('Ext.Component', {
style: {
position: 'absolute',
left: '100px', //left + 'px',
top: '100px'//top + 'px'
},
items: [{
xtype: 'rallycard',
record: feature
}],
renderTo: Ext.getBody()
});
this.down('#main').add(card);
Are you getting a console error? I would guess there are probably a few other required config options in addition to card that are tripping you up.
One other small note, you don't need both a renderTo and a call to add. In this case I'd probably drop the renderTo.
I was able to find a way to do this. Since I didn't see an example anywhere I'll answer my own question (code below). You'll have to find a meaningful value for objectId.
Rally.data.ModelFactory.getModel({
type: 'PortfolioItem/Feature',
success: function(model) {
var objectId = 1234; // <-- your objectId here
model.load(objectId, {
fetch: ['Name', 'State', 'Owner'],
callback: function(result, operation) {
if(operation.wasSuccessful()) {
var owner = result.get('Owner');
console.log('owner', owner._refObjectName);
var card = Ext.create('Rally.ui.cardboard.Card', {
style: {
position: 'absolute',
left: '100px',
top: '200px',
width: '200px'
},
record: result
});
this.down('#main').add(card);
}
},
scope: this
});
},
scope: this
});
I came across a strange problem that some 'fireEvent' in views will not act after my sencha application being building production. Before building, all is normal, the action will take place as expected, however, after building production, I found that the 'fireEvent' fired by 'this' is normal, but by a variable is anormal. Following is my code.
Ext.define('WirelessCity.view.TopMenu', {
extend:'Ext.Toolbar',
alias:'widget.topmenu',
initialize: function(){
this.callParent(arguments);
var topMenu = this;
var btn = {
xtype: 'button',
width: 42,
margin: '5 0 5 3',
border: '0',
style: 'background:url(resources/images/left_btn.png);',
handler: this.onMarkButtonTap, // will work
scope: this
};
var search = {
width: 46,
margin:'3 5 0 0',
style:'background:url(resources/images/search_btn.png);border:0;background-repeat:no-repeat;',
initialize: function(){
this.element.on({
tap: function(){
topMenu.fireEvent('searchCmd', topMenu); // will not work
}
});
}
}
this.add([btn, search]);
},
config: {
docked: 'top',
//flex: 1,
height: 38,
padding: 0,
margin: 0,
border: 0,
style: 'background:url(resources/images/top.png)'
},
onMarkButtonTap: function(){
//Ext.Msg.alert('mark');
this.fireEvent('markCmd', this);
}
});
This is because you can only pass configs when creating new components, not functions (like initialize). If you want to override methods like that, you must create your own class by extending another (Ext.Button in this case).
For your specific usage though, you can just use the element option when adding the listener:
var search = {
width: 46,
margin:'3 5 0 0',
style:'background:url(resources/images/search_btn.png);border:0;background-repeat:no-repeat;',
listeners: {
element: 'element',
tap: function() {
topMenu.fireEvent('searchCmd', topMenu);
}
}
};