i'm looking for creating a menu on both platform in a container view. But i can't find anything about this here or on the doc.
Look like i need to create a window or something like that but i can't do this or maybe i didn't understand how it works.
My company asked me to update this app but i never worked on appcelerator before, so i'm pretty confused..
If someone can take time to explain me what to do or what to search :)
Thanks !
Here is the file where i'm trying to add a menu, as you can see i added a label, but i don't think it's that good ^^
exports.createView = function(args){
args = args || {};
var specialStyle = _.extend({
backgroundColor: '#35363a'
, height: Alloy.isHandheld ? 50 : 100
, width: Ti.UI.FILL
, top: OS_IOS ? /*(Alloy.isHandheld ? 25 : 50)*/ /* */ 22 /* */ : 0
, left : 0
}, args);
// On crée le cadre
var headerView = Ti.UI.createView(specialStyle);
var containerView = Ti.UI.createView({
width:Ti.UI.FILL
, height: Ti.UI.FILL
, top: 0
, left:0
, layout: 'horizontal'
, zIndex: 10
});
headerView.add(containerView);
// Ajout du bouton pour quitter
var labelQuit;
containerView.add(labelQuit = Ti.UI.createLabel({
height: Ti.UI.FILL
, width: '13%'
, backgroundColor: "red"
, font: {
fontFamily:'nepting'
, fontSize:Alloy.isHandheld ? 17 : 34
}
, text : ''
, color: '#fff'
, top : 0
, left: 0
, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
, isLabelQuitApp : true
}));
// Espace pour le nom de l'utilisateur
containerView.add(Ti.UI.createView({
width:'5%'
, left: 0
}));
// Utilisateur connecté, sur le header view principal
var labelUser;
headerView.add(labelUser = Ti.UI.createLabel({
width: Ti.UI.FILL
, height: Ti.UI.FILL
, top: 0
, left: 0
, text : Alloy.Globals.connectionInfo.userLogin || 'UTILISATEUR Dummy'
, color: '#ccc'
, font: {
fontSize: Alloy.isHandheld ? 12 : 24,
fontFamily: 'DINOT-Light'
}
, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
, zIndex: 2
}));
// Logo de la marque paramétrée
var imageCustomLogo, customLogoView;
// Ajout de la vue du logo personnalisé au conteneur
containerView.add(customLogoView = Ti.UI.createView({
width: '50%'
, backgroundColor: "green"
, left: 0
, height: Ti.UI.FILL
, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
}));
// Ajout de l'image
customLogoView.add(imageCustomLogo = Ti.UI.createImageView({
image : '/images/customLogo.png'
, width: '70%'
//, height: Alloy.isHandheld ? 42 : 84
}));
var menu;
containerView.add(menu = Ti.UI.createLabel({
height: Ti.UI.FILL
, width: '12%'
, top: '40%'
, backgroundColor: "purple"
, font: {
fontFamily:'nepting'
, fontSize:Alloy.isHandheld ? 17 : 34
}
, text : ''
, color: '#fff'
, top : 0
, left: 0
, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
}));
// On retourne le cadre du header
return headerView;
};
Related
I want to assign text or label using OpenLayers to Icons. I am able to assign the label to the icon but it places text on the icon .but I want to display label at offset so icon and label both display properly. I have tried using offsetY but it is not working and does not change the placement.
var styleToponimiFunction = function(feature,resolution) {
console.log(feature);
var iconName;
if (feature.get("remark")=='Daerah Istimewa') {
iconName='daerah_istimewa2.png';
}
else if (feature.get("remark")=='Kecamatan'){
iconName='kecamatan.png';
}
iconStyle = [new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: "fraction",
anchorYUnits: "pixel",
scale:0.03,
opacity:1,
src: "icons/" + iconName,
})),
text: new ol.style.Text({
text: feature.get('namobj'),
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({ color: 'black' }),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2,
textAlign: 'center',
Baseline: 'hanging',
offsetX : 0,
offsetY : -12,
}),
declutter: true,
overflow: true
}),
})
]
return iconStyle;
}
The text options should not be inside the Stroke constructor, also Baseline should be textBaseline
stroke: new ol.style.Stroke({
color: '#fff',
width: 2,
}),
textAlign: 'center',
textBaseline: 'hanging',
offsetX : 0,
offsetY : -12,
How to increase touch area of control points on mobile device with FabricJS? Because on mobile they are too small for smooth interactive with. But not change size of control points ( for nice view ).
Here is my code:
How to increase interactive of control points = view control points size x 2 ?
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
// test customize control points
var rect = new fabric.Rect({
left: 30,
top: 30,
fill: 'red',
width: 150,
height: 150
});
canvas.add(rect);
rect.set({
transparentCorners: false,
cornerColor: 'white',
cornerStrokeColor: 'rgba(14,19,24,.15)',
borderColor: 'rgba(41,198,203,1)',
selectionLineWidth: 8,
cornerSize: 12,
cornerStyle: 'circle',
});
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Please show me the way to resolve this problem.
By the way: ( on mobile device ) is there any way to allow drag object only object is selected before?
Thank you very much!
You need to override _setCornerCoords method of object and change the value of cornerHypotenuse.
DEMO
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
// test customize control points
var rect = new fabric.Rect({
left: 30,
top: 30,
fill: 'red',
width: 150,
height: 150
});
canvas.add(rect);
rect.set({
transparentCorners: false,
cornerColor: 'white',
cornerStrokeColor: 'rgba(14,19,24,.15)',
borderColor: 'rgba(41,198,203,1)',
selectionLineWidth: 8,
cornerSize: 5,
cornerStyle: 'circle'
});
rect._setCornerCoords = function() {
var coords = this.oCoords,
newTheta = fabric.util.degreesToRadians(45 - this.angle),
cornerHypotenuse = this.cornerSize * 2 * 0.707106,
cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta),
sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta),
x, y;
for (var point in coords) {
x = coords[point].x;
y = coords[point].y;
coords[point].corner = {
tl: {
x: x - sinHalfOffset,
y: y - cosHalfOffset
},
tr: {
x: x + cosHalfOffset,
y: y - sinHalfOffset
},
bl: {
x: x - cosHalfOffset,
y: y + sinHalfOffset
},
br: {
x: x + sinHalfOffset,
y: y + cosHalfOffset
}
};
}
}
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
I have problem with how to re-presentation of node in SVG with "letter-spacing" in SVG document to fabric.TextBox.
In file SVG text node is:
<text transform="matrix(1 0 0 1 51.5211 22.2889)" style="fill:#3C2415; font-size:11px; letter-spacing:3;">MINH TUẤN</text>
And my fabric.TextBox is:
var textbox_0_1 = new fabric.Textbox("MINH TUẤN", {
width: 200,
fontSize: 11,
fill: "#3C2415",
editable: true,
textAlign: "center",
charSpacing: 3,
});
Here is display on SVG & FabricJS:
How to find correct charSpacing which is respectively with letter-spacing attribute in SVG's Text node ?
Notes:
In fabric.TextBox document write:
charSpacing :Number
additional space between characters expressed in thousands of em unit
And in document for SVG write:
(if no unit identifier is provided) values in user space — for example, "15"
And Here is my code:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var textbox_0_1 = new fabric.Textbox("MINH TUẤN", {
top: 20,
left: 20,
width: 200,
fontSize: 11,
fill: "#000000",
editable: true,
textAlign: "center",
charSpacing: 3,
});
canvas.add(textbox_0_1);
setObjectCoords();
canvas.renderAll();
function setObjectCoords() {
canvas.forEachObject(function(object) {
object.setCoords();
});
}
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Thank you,
You need to parse from pixel to em.
DEMO
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
width: 300,
height: 100
});
var letterSpacing = 5, fontSize = 30;
var textbox = new fabric.Text("MINH TUẤN", {
top: 20,
fontSize: fontSize,
fill: "#000000",
fontFamily : "Verdana"
});
canvas.add(textbox);
var parsedSpacing = fabric.util.parseUnit(letterSpacing, fontSize) / fontSize * 1000;
textbox.set({charSpacing : parsedSpacing});
canvas.requestRenderAll();
console.log(parsedSpacing)
canvas{
border:1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<svg width="300" height="100" viewBox="0 0 300 100">
<text font-size="30" letter-spacing="5" font-family="Verdana" y="40">MINH TUẤN</text>
</svg>
<canvas id="editorCanvas"></canvas>
I'm trying to overlap elements as shown in the wireframe, as well as position them.
I've tried
- position: 'relative' and the element disappears
- position: 'absolute' but alignItems: 'center' does nothing
Can anyone help identify what's missing?
Wireframe of Wishlist (ignore the different header; it was from an old version)
This is what I get instead, even after using flex
I've attached code from all the separate .js files, and left out all import and export statements.
Thank you!
----------- in WishlistDetail.js------------
// Each Item on The Wishlist
const WishlistDetail = () => {
return (
<View>
<WishlistCard>
<WishlistThumbnail />
<WishlistThumbnailFilter />
<WishlistPrice />
<WishlistItemDetail />
</WishlistCard>
</View>
);
};
---------- in WishlistCard.js------------------
// Creating WishlistCard
const WishlistCard = (props) => {
return (
<View style={styles.containerStyle}>
{props.children}
</View>
);
};
// WishlistCard Style
const styles = StyleSheet.create({
containerStyle: {
borderWidth: 0.75,
backgroundColor: 'white',
borderColor: 'rgb(217, 217, 217)',
height: 125 // ******* not too sure
}
});
---------- in WishlistThumbnail.js------------------
const WishlistThumbnail = () => {
const { wishlistThumbnailStyle } = styles;
return (
<View>
<Image
style={wishlistThumbnailStyle}
source={{ uri: 'http://www.startwire.com/job-applications/logos/amazon.png' }}
/>
</View>
);
};
// All Styling
const styles = StyleSheet.create({
wishlistThumbnailStyle: {
height: 95,
width: 95,
padding: 20,
position: 'absolute',
justifyContent: 'center'
}
});
---------- in WishlistThumbnailFilter.js------------------
// Creating Wishlist Thumbnail Filter
const WishlistThumbnailFilter = () => {
return (
<View style={styles.wishlistThumbnailFilterStyle} />
);
};
// Image Filter Style - 146 125 192.2
const styles = StyleSheet.create({
wishlistThumbnailFilterStyle: {
width: 160,
borderTopColor: 'rgba(13, 13, 13, 0.05)',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderTopWidth: 250,
borderLeftWidth: 0,
borderRightWidth: 90
}
});
---------- in WishlistPrice.js------------------
const WishlistPrice = () => {
const { textStyle, viewStyle } = styles;
return (
//INSERT PRICE HERE
<View style={viewStyle}>
<Text style={textStyle}>30€</Text>
</View>
);
};
// Wishlist Price Style
const styles = StyleSheet.create({
viewStyle: {
backgroundColor: 'transparent',
padding: '3',
// alignItems: 'flex-end',
justifyContent: 'flex-end',
position: 'absolute'
// position: 'relative'
},
textStyle: {
fontSize: 11.5,
fontFamily: 'Bariol_Regular',
color: 'rgb(127, 127, 127)'
}
});
---------- in WishlistItemDetail.js------------------
// This contains both Wishlist Title and Wishlist Text
const WishlistItemDetail = () => {
const { wishlistItemDetailStyle, wishlistItemTitleStyle, wishlistItemTextStyle } = styles;
return (
<View style={wishlistItemDetailStyle}>
<Text style={wishlistItemTitleStyle}>Wishlist Item Title</Text>
<Text style={wishlistItemTextStyle}>Wishlist Item Text</Text>
</View>
);
};
// Header Style
const styles = StyleSheet.create({
wishlistItemDetailStyle: {
backgroundColor: 'transparent',
position: 'absolute',
padding: 5
},
wishlistItemTitleStyle: {
fontSize: 15,
fontFamily: 'Bariol_Regular',
color: 'rgb(51, 51, 51)'
},
wishlistItemTextStyle: {
fontSize: 12,
fontFamily: 'Bariol_Regular',
color: 'rgb(70, 70, 70)'
}
});
without wanting to go into too much detail, this seems to look like an issue of column vs row in you flexDirection.
In order to get the style of the wireframe you provided you need to use a combination of both row and column. Check out this documentation: https://facebook.github.io/react-native/docs/flexbox.html
So one row consists of two main views styled in a flexrow and the one I marked blue is styled in a column (which is the default).
Hope this helps
I am new in Titanium Studio. I am trying to do that when user clicks the any button in window1, it goes the second window. I mean I cannot connect to button1 and button2 in order to pass through the second window.
Here is the my sample code. Can anyone help me please?
Titanium.UI.setBackgroundColor('#000');
var win1 = Ti.UI.createWindow({
layout : 'vertical',
title : 'Welcome to BMI'
});
var button1 = Ti.UI.createButton(
{
title:'Standart',
top : 300,
height: 20,
width: 100
});
button1.addEventListener('click', function(e)
{
win1.close();
win2.open();
});
var button2 = Ti.UI.createButton(
{
title:'Metric',
top : 350,
height: 20,
width: 100
});
button2.addEventListener('click', function(e)
{
win1.close();
win2.open();
});
win1.add(button1);
win1.add(button2);
win1.open();
var win2 = Ti.UI.createWindow({
backgroundColor: 'white',
layout: 'vertical',
title: 'BMI'
});
var label1 = Ti.UI.createLabel({
color: '#900',
font: { fontSize:48 },
shadowColor: '#aaa',
shadowOffset: {x:5, y:5},
text: 'Body Mass Index',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
top: 30,
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
var label2 = Ti.UI.createLabel({
color:'blue',
text: 'Welcome to BMI',
textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
top: 30,
width: 300, height: 200
});
win2.add(label1);
win2.add(label2);
I think you should not face problem to execute this code but i think you need to do some modification in your code.
Titanium.UI.setBackgroundColor('#000');
function openNewWin(){
var win2 = Ti.UI.createWindow({
backgroundColor: 'white',
layout: 'vertical',
title: 'BMI'
});
var label1 = Ti.UI.createLabel({
color: '#900',
font: { fontSize:48 },
shadowColor: '#aaa',
shadowOffset: {x:5, y:5},
text: 'Body Mass Index',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
top: 30,
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
var label2 = Ti.UI.createLabel({
color:'blue',
text: 'Welcome to BMI',
textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
top: 30,
width: 300, height: 200
});
win2.add(label1);
win2.add(label2);
win2.open({
modal : true
});
}
var win1 = Ti.UI.createWindow({
layout : 'vertical',
title : 'Welcome to BMI'
});
var button1 = Ti.UI.createButton(
{
title:'Standart',
top : 300,
height: 20,
width: 100
});
button1.addEventListener('click', function(e)
{
win1.close();
openNewWin();
});
var button2 = Ti.UI.createButton(
{
title:'Metric',
top : 350,
height: 20,
width: 100
});
button2.addEventListener('click', function(e)
{
win1.close();
openNewWin();
});
win1.add(button1);
win1.add(button2);
win1.open({
modal : true
});