i have edit profile page with gender picker that have two picker rows (as one should expect...) male and female. i want to change the selected row according to data that i load from an API.
this is my view.xml
<Picker id="genderPicker">
<PickerRow title="Male"></PickerRow>
<PickerRow title="Female"></PickerRow>
</Picker>
style.tss
"Picker": {
top: 2,
bottom: 2,
left: 110,
width: 120,
height: 50,
backgroundColor: '#666',
selectionIndicator: true
}
"PickerRow": {
color: '#fff'
}
controller.js
if (gender == 'm') {
Ti.API.info('g-m');
$.genderPicker.setSelectedRow(0, 0, false);
} else {
Ti.API.info('g-f');
$.genderPicker.setSelectedRow(0, 1, false);
}
i get the value of the gender and according to it i set the selected row but nothing happen.
The first index of row is 0 not 1
if (gender == 'm') {
Ti.API.info('g-m');
$.genderPicker.setSelectedRow(0, 0, false);
} else {
Ti.API.info('g-f');
$.genderPicker.setSelectedRow(0, 1, false);
}
Your controller.js should be
if (gender == 'm') {
Ti.API.info('g-m');
$.genderPicker.setSelectedRow(0, 0, false);
} else {
Ti.API.info('g-f');
$.genderPicker.setSelectedRow(1, 0, false);
}
first param is the Column.
Send is the Row.
Related
I've created a plnkr to auto-group row-spans the way you would really expect it to work out of the box IMHO.
Anyhow... doing this surfaces an apparent bug... the rowSpan is not consistently applied to the grid.. if you scroll up and down, it sometimes applies, and sometimes does not.
In the screenshot below... you can see 'Aaron Peirsol' is spanning... but if I scroll up and down it might not span on him... not consistent.
Here 'Aaron Peirsol' is no longer spanning all 3 rows -- all I did was scroll up and back down
See this Sample
https://plnkr.co/edit/UxOcCL1SEY4tScn2?open=app%2Fapp.component.ts
Here I've added columndefs for the grouping
{
field: 'athlete',
rowSpan: params => params.data.groupCount,
cellClassRules: {
'cell-span': "data.isFirst && data.groupCount>1",
},
width: 200,
},
{field:'groupCount', width: 20}, /* included for debugging */
{field:'isFirst', width: 20}, /* included for debugging */
And here I'm doing the auto-grouping code:
onGridReady(params: GridReadyEvent) {
this.http
.get<any[]>('https://www.ag-grid.com/example-assets/olympic-winners.json')
.subscribe((data) => {
let groupKey = 'athlete';
let sorted = data.sort((a,b) => (a[groupKey] > b[groupKey]) ? 1 :
((b[groupKey] > a[groupKey]) ? -1 : 0));
let filtered = sorted.filter(x => {
return x[groupKey] < 'Albert' && x[groupKey];
});
var groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
let keyValue = x[key];
if (rv[keyValue] === undefined)
{
rv[keyValue] = 0;
}
if (keyValue) {
rv[keyValue] ++;
}
return rv;
}, {});
};
let grouped = groupBy(filtered, groupKey);
let prev = '';
for (let i=0; i<filtered.length; i++)
{
let keyValue = filtered[i][groupKey];
filtered[i]['groupCount'] = grouped[keyValue];
if (keyValue == prev)
{
filtered[i]['isFirst'] = false;
}
else
{
filtered[i]['isFirst'] = true;
}
prev = keyValue;
}
this.rowData = filtered});
}
OK, found the issue...
rowSpan function must only return a span count for the first row of the span...
every other row it must return 1
I've updated the plunker
public columnDefs: ColDef[] = [
{
field: 'athlete',
rowSpan: params => params.data.groupRowCount == 1 ? params.data.groupCount: 1, //THIS IS CRUCIAL.. only return count for first row
cellClassRules: {
'cell-span': "data.groupRowCount==1 && data.groupCount>1",
},
width: 200,
},
I am trying to put grid(developed with scrollview) inside scrollview but I can't set grid height with content height. I can't handle this problem with .fixedsize()
GeometryReader{ reader in
ScrollView{
Text(reader.size.height.description)
Text(reader.size.height.description)
FlowStack(columns: 3, numItems: 27, alignment: .leading) { index, colWidth in
if index == 0{
Text(" \(index) ").frame(width: colWidth).border(Color.gray)
.background(Color.red)
}
else if index == 1{
Text(" \(index) ").frame(width: colWidth).border(Color.gray)
}
else if index == 2{
Text(" \(index) ").frame(width: colWidth).border(Color.gray)
}
else{
Text(" \(index) ").frame(width: colWidth).border(Color.gray)
}
}
.background(Color.red)
Text(reader.size.height.description)
Text(reader.size.height.description)
}.fixedSize(horizontal: false, vertical: false)
}
Result
What I want
I don't know what did you wrote in FlowStack struct, that's why it's really hard to give right answer. There is how I solve this grid:
struct GridScrollView: View {
var body: some View {
GeometryReader{ geometry in
VStack {
Text("height: \(geometry.size.height.description)")
Text("width: \(geometry.size.width.description)")
ScrollView{
FlowStack(columns: 3, numItems: 60, width: geometry.size.width, height: geometry.size.height)
}
}
}
}
}
my FlowStack code:
struct FlowStack: View {
var columns: Int
var numItems: Int
var width: CGFloat
var height: CGFloat
private var numberOfRows: Int {
get {
numItems / columns
}
}
private var cellWidth: CGFloat {
get {
width / CGFloat(columns) - 4 // with padding
}
}
private var cellHeight: CGFloat {
get {
height / CGFloat(numberOfRows) - 4 // with padding
}
}
var body: some View {
ForEach(0..<self.numberOfRows, id: \.self) { row in
HStack {
ForEach(1...self.columns, id: \.self) { col in
Text("\(row * self.columns + col)")
.frame(width: self.cellWidth, height: self.cellHeight, alignment: .center)
.background(Color.red)
.border(Color.gray)
.padding(2)
}
}
}
}
}
and the result is:
P.S. that's my quick solution. I think you can also use this grid from github, it's quite massive, but flexible in my opinion
I'm trying webGL for the first time, thing is I am working on Expo with the expo-gl package, aiming to build a filter component for photo editing. So far, I have been able to create a context successfully. When creating the shaders everything works fine (I can render a triangle, two triangles, etc...)
Problem comes when I try to load an image as a texture, I get no errors, but all I get is a black screen on the emulator and the phone (both android).
I have done checks for powOf2 images and image.onload, and I did a console.log for gl.texImage2D but got undefined. I would really appreciate any insight or help for this issue.
I divided into 4 parts what I think are the relevant pieces of code for this issue.
1.shaders(template literals):
const vertexShaderSource = '
attribute vec2 a_texCoord;
attribute vec4 a_position;
varying vec2 v_texCoord;
void main() {
gl_Position = a_position;
v_texCoord = a_texCoord;
}
';
const fragmentShaderSource = '
precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() {
gl_FragColor = texture2D(u_image, v_texCoord);
}
';
2.ReactNative(expo) state and lifecicle:
export default class App extends React.Component {
state = {
ready: false,
image: null,
};
componentDidMount() {
(async () => {
const image = Asset.fromModule(require('./bw.jpg'));
await image.downloadAsync();
this.setState({
ready: true,
image,
});
})();
}
render() {
return (
<View style={styles.container}>
<Image source={require('./back.jpg')} style={{ width: '100%' }} />
<GLView
style={{ width: '100%', height: '100%', position: 'absolute' }}
onContextCreate={this._onContextCreate}
/>
</View>
);
}
3.gl context:
_onContextCreate = gl => {
if (_initialized) { return }
function createShader(gl, type, source) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (success) {
return shader;
}
//on error
console.log(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
}
//get shaders
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
function createProgram(gl, vertexShader, fragmentShader) {
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
//on error
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (success) {
return program;
}
console.log(gl.getProgramInfoLog(program));
gl.deleteProgram(program);
}
//create program
var program = createProgram(gl, vertexShader, fragmentShader);
//get attributes
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
//a_position buffer for fragment shader
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// three 2d points
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-1, -1,
-1, 1,
1, -1,
1, 1,
1, -1,
-1, 1,
]), gl.STATIC_DRAW);
//create the viewport
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Clear the canvas
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// use program
gl.useProgram(program);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(
positionAttributeLocation, 2, gl.FLOAT, false, 0, 0)
gl.drawArrays(gl.TRIANGLES, 0, 6);
4.Code for the texture, and end of _onContextCreate:
//get image from state
const image = this.state.image
var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
var uSampler = gl.getUniformLocation(program, 'u_image');
// provide texture coordinates for the rectangle.
var texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
var positions = [
-1,-1,
-1, 1,
1,-1,
1, 1,
1,-1,
-1, 1,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(texCoordLocation);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
//create texture
var texture = gl.createTexture();
//check if image is ready
if (image.downloaded) loadTexture(texture, image)
//get image width & height for pow2 check.
const { width, height } = Image.resolveAssetSource(image);
function loadTexture(texture, img) {
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(uSampler, 0);
//pow2 check
if (isPowerOf2(width) && isPowerOf2(height)) {
gl.generateMipmap(gl.TEXTURE_2D);
} else {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
}
return texture
}
function isPowerOf2(value) {
return (value & (value - 1)) == 0;
}
gl.flush();
gl.endFrameEXP();
_initialized = true;
};
Thanks in advance!
Trying to change the colour of progress bar dynamically using v-bind (don't have to use it).
Here is my code:
<b-progress height={} v-model="item.value.value" class="progress-xs" variant="{ 'success': item.value.value > 50, 'warning': item.value.value > 30, 'danger': item.value.value > 10}"></b-progress>
ittus's answer is pretty close, but it didn't work for me. I was able to get it working by dynamically setting color rather than variant, which doesn't appear to be a progress property
<b-progress
height={}
v-model="item.value.value"
class="progress-xs"
:color="getColor(item)">
</b-progress>
methods: {
getColor: function(item) {
if (item.value.value > 50) {
return 'green'
} else if (item.value.value > 30) {
return 'yellow'
} else if (item.value.value > 10) {
return 'red'
}
return ''
}
}
You need to bind :variant and define custom methods to get variant type:
<b-progress
height={}
v-model="item.value.value"
class="progress-xs"
:variant="getVariantType(item)">
</b-progress>
methods: {
getVariantType: function(item) {
if (item.value.value > 50) {
return 'success'
} else if (item.value.value > 30) {
return 'warning'
} else if (item.value.value > 10) {
return 'danger'
}
return ''
}
}
The default titanium slider only allows you to have one pin on it.
How could you modify it, so that it accepts a range of values. Such as age range?
Cheers.
UPDATE (after installing module):
// Double Slider example
var tidoubleslider = require('com.semanticpress.tidoubleslider');
var dSlider = tidoubleslider.createSlider({
top: 40,
height: 50,
width: 280,
leftTrackImage:'left2.png',
highlightedLeftTrackImage:'highlightedLeft2.png',
disabledLeftTrackImage:'disabledLeft2.png',
centerTrackImage:'center2.png',
highlightedCenterTrackImage:'highlightedCenter2.png',
disabledCenterTrackImage:'disabledCenter2.png',
rightTrackImage:'right2.png',
highlightedRightTrackImage:'highlightedRight2.png',
disabledRightTrackImage:'disabledRight2.png',
leftThumbImage:'thumb.png',
highlightedLeftThumbImage:'highlightedThumb.png',
disabledLeftThumbImage:'disabledThumb.png',
rightThumbImage:'thumb.png',
highlightedRightThumbImage:'highlightedThumb.png',
disabledRightThumbImage:'disabledThumb.png',
min:0,
max:50,
leftValue:25,
rightValue:50,
enabled: true
});
$.ageSliderView.add(dSlider);
var leftLabel = Ti.UI.createLabel({
top:30,
left:20,
width:100,
height: 20,
color:'black',
text:dSlider.leftValue
});
$.ageSliderView.add(leftLabel);
var rightLabel = Ti.UI.createLabel({
top:30,
right:20,
width:100,
height: 20,
color:'black',
text:dSlider.rightValue,
textAlign:'right'
});
$.ageSliderView.add(rightLabel);
dSlider.addEventListener('touchstart', function(e) {
if (typeof e.value !== 'undefined') {
if (e.thumbIndex === 0) {
leftLabel.text = e.value.toFixed(1);
leftLabel.color = 'red';
}
else {
rightLabel.text = e.value.toFixed(1);
rightLabel.color = 'red';
}
}
else {
leftLabel.color = 'gray';
rightLabel.color = 'gray';
}
});
dSlider.addEventListener('change', function(e) {
if (e.thumbIndex === 0) {
leftLabel.text = e.value.toFixed(1);
}
else {
rightLabel.text = e.value.toFixed(1);
}
});
dSlider.addEventListener('touchend', function(e) {
if (typeof e.value !== 'undefined') {
if (e.thumbIndex === 0) {
leftLabel.text = e.value.toFixed(1);
leftLabel.color = 'black';
}
else {
rightLabel.text = e.value.toFixed(1);
rightLabel.color = 'black';
}
}
else {
leftLabel.color = 'black';
rightLabel.color = 'black';
}
});
The slider does not appear on the screen. I guess it is because the slider images are missing?
Here you go.The slider With raning option in titanium
https://github.com/tzmartin/Ti-Double-Slider/tree/master/dist
Thanks