I am a beginner. I have this kv code:
<Pat_layout>:
BoxLayout:
orientation: "vertical"
size: root.width, root.height
Label:
id: name_label
text: "Exercises Appear Here"
font_size: 32
Image:
id: image_window
size_hint: (1, .5)
source: 'images/dim_6543.jpg'
Button:
background_normal: ''
background_color: 0, .3, .4, .95
size_hint: (1, .5)
font_size: 32
text: "Press For Next Exercise"
on_press: root.press()
And I get this:
output image with label, image, button
The chord diagram should have a white background. I have searched and tried things for hours, days. How can I get the middle section, the image, to show a white background around the chord diagram? The chord diagram does not have any surrounding background; it's been cropped to just the diagram.
Any help would be tremendously appreciated....
Thank you.
You want to draw a white rectangle filling the Image. The code for this is something like:
Image:
canvas.before:
Color:
rgba: 1, 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
Yay, thanks inclement! I copied your code in and it works perfectly! Thank you!
Jim
Related
Using normal vector layers, I already draw directed antenna symbolizers like this:
Basically this is a point with a direction (and a horizontal beam width, but let's forget about that for now). This is what I try to recreate in OL 6.8.1 using WebGLPoints layer, but have issues with creating the correct style. I way able to rotate simple triangle symbols but they are overlapping, and they should touch by the corners:
I guess the key to the problem is setting some offset, but this is where I failed to find a working solution. This is the style I currently use:
symbol: {
symbolType: 'triangle',
size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa' ],
rotateWithView: true,
offset: [ 0,0 ],
opacity: 0.4,
rotation: ['-', ['*', ['get','azy'] , 0.01745329251 ], 3.1415926],
}
(notes: as you can see the symbol size is zoom dependent, I use 2 different colors based on the 'band' attribute and rotate it using the 'azy' attribute (which is the desired direction in degrees, counted from N as 0, clockwise))
The rotation works okay, but for the offset, I need some help. I'm not even sure of it's affected by the rotation or not... Thanks in advance! If you have any other solution for the problem using WebGL, I'd appreciate that too!
So, here's the solution, thanks to #Mike! The trick is to multiply the offset with -1, so the corners of the triangles touch.
symbol: {
symbolType: 'triangle',
size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa' ],
rotateWithView: false,
offset: ['array', 0, ['*', ['interpolate', ['exponential', 2.5], ['zoom'], 6, 3, 20, 48], -1] ],
opacity: 0.75,
rotation: ['-', ['*', ['get','azy'] , 0.01745329251 ], 3.1415926],
}
Note: the offset is smaller with 2 pixels that half the size. With half size, the triangles did not touch, had a few pixels gap. It looks like this:
Another solution is that I created a png with the desired symbol:
Note that the center of picture is the center of circle of which the sector was cut out, so when rotated, it will stay over the point of the rotation. The style is:
symbol: {
symbolType: 'image',
src: 'tools/testbench/olmap2/cell_symbol.png',
size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa' ],
rotateWithView: false,
opacity: 0.75,
rotation: ['*', ['get','azy'] , 0.01745329251 ]
},
The result is:
This is somewhat slower, but I guess the 800x800px png is an overkill for this, so maybe downsizing it would solve the performance issue :) The pro side of this solution that I can create circle segments in different opening angles, so the antenna's (horizontal) beamwidth could be shown too. With the triangle symbolizer I cannot do this. (If later I could draw custom polygons in OL, that would be the perfect solution for this.)
Working on a project in Three.js, and the RGB values I get back don't seem to correlate with the on screen graphics as they should.
I set a material like this:
var planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, vertexColors: THREE.FaceColors });
Apply it to a plane geometry, and then later change it with this:
face.color.setHSL(0, 0, 0.0)
Then repeatedly later change it with
face.color.offsetHSL(0, 0, 0.1)
The colors do in fact go from black to green, but then will not continue on and tend towards white.
Looking at the RBG values, they then tell me that the color values are equal to:
Color {b: 1, g: 1, r: 1}
and using getHSL it says:
{h: 0, s: 0, l: 1}
Yet the plane is very clearly green, and not white.
I'm obviously missing something big about how colors work here, but I cant for the life of me make heads or tails of this. Can anyone see what I'm doing wrong? Thanks inadvance.
I have 3 axes (velue-axis)
Can one axis be displayed on the left
Other two axes to display on the right?
http://demos.telerik.com/kendo-ui/line-charts/multiple-axes
(In this example, the axis is located on the right, but I do not know how to configure it)
Thanks.
Granted this isn't entirely clear when you first look at the demo. The important thing to look at is this section:
categoryAxis: {
categories: [],
axisCrossingValues:[]//This is the fella you are looking for.
}
I have tweaked the demo slightly to show you one of the axis in the middle of the chart. http://dojo.telerik.com/ASidu
The number is simply the position column on the chart that the axis should be rendered. By default if this in't set then all axis should be on the left hand side as normal. but if we start applying a number greater than 0 then the axis will shift. So in the example we have 3 value axis set up:
valueAxes: [{
name: "rain",
color: "#007eff",
min: 0,
max: 60
}, {
name: "wind",
color: "#73c100",
min: 0,
max: 60
}, {
name: "temp",
min: -30,
max: 30
}],
so if we look at them from crossing the y-axis (i.e. the bottom axis) we have 31 columns available to us 1- 31 so in my tweak I have applied this to the crossingAxis:
axisCrossingValues: [32, 15, 0]
This is effectively telling each of the value axes where they should be positioned:
so:
"rain" should be at position 32
"wind" should be at position 15
"temp" should be at position 0
So the order in which you add your value axes will determine which setting they take based on the order you include them.
Hopefully that helps clear things up for you. If you need any more info let me know and I will update accordingly
I'm not really getting the glBlendFunc() function and how it works.
Is there a blend mode that lets destination black be black while overriding any other dst colour?
I have a black and white canvas containing colouring edges and shapes. I'd like to draw a brush anywhere over the canvas but not overriding the edges so they remain black once the image is fully coloured. Ideally, since the destination has some grey around the edges for smoothness, the grey shades would be tinted with the brush colour.
Thank you!
I believe what you need is glBlendFunc(GL_DST_COLOR, GL_ZERO).
To explain you how the blend function works:
When blending you have 2 colours, source and destination. Source is the colour you are trying to apply (a textel, a solid colour...). Destination is the colour currently on the buffer. The 2 parameters in the glBlendFunc tell how to multiply the source and destination colour before adding them together to get the result colour.
So in the case of glBlendFunc(GL_DST_COLOR, GL_ZERO) and having a black and white destination buffer (as you described) will act like this:
if destination colour is white (1,1,1,1) and you will apply some colour for instance (.1, .2, .3, 1) the result will be R = (.1, .2, .3, 1)*(1,1,1,1) + (1,1,1,1)*(0,0,0,0) = (.1, .2, .3, 1)
if destination colour is black (0,0,0,0) and you will apply some colour for instance (.1, .2, .3, 1) the result will be R = (.1, .2, .3, 1)*(0,0,0,0) + (0,0,0,0)*(0,0,0,0) = (0, 0, 0, 0)
if destination colour is grey (.5,.5,.5,1.0) and you will apply some colour for instance (.1, .2, .3, 1) the result will be R = (.1, .2, .3, 1)*(.5,.5,.5,1.0) + (.5,.5,.5,1.0)*(0,0,0,0) = (.05, .1, .15, 1)
This case of yours is a bit specific but in most cases the alpha channel is only used. For instance most common blending is glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) which means the source colour will be multiplied with source alpha while the destination colour will be multiplied with 1.0-source alpha, so a white shape with alpha of .75 over a grey background RGB .5 (any alpha) will result in RGB all 1.0*.75 + .5*(1.0-.75) = .75 + .125 = .875.
Note that this procedure of yours might cost you if you will need some other blending type on the overlay. In that case you will need to look into stencil buffers. Another issue is you might not want to see the black and white part on places you do not draw the overlay. In this case you can simply use the destination alpha to do this blending for you: glColorMask can help you draw only to the alpha channel of your buffer where you can use alpha .0 for "black" areas and 1.0 for "white" areas, when drawing a shape over the buffer you would then use glBlendFunc(GL_DST_ALPHA, GL_ZERO).
I am trying to rotate an image on its center using the angle of the mouse on the stage. It rotates using:
dlayerA1.rotate(degree);
but it flys all over and does not rotate on its center!! Complete project http://jsfiddle.net/user373721/eHJgJ/.
Would appreciate your suggestions, thanks in advance.
Simple solution is that you are not rotating an image at all, you are rotating the layer, also your layer is centered at 0,0 , so your image rotates around that. If you initially set up your image at 0,0 you will see that it rotates much nicer.
Try these simple test changes:
// reposition the layer
dlayerA1 = new Kinetic.Layer({x: 50,y: 50});
//move the image
dImage1 = new Kinetic.Image({
x: 0,
y: 0,
image: dicom1,
width: 150,
height: 150
});
//inside handleMouseMove(), switch it to dImage1 being rotated <---- this is the fix that answers your original question
dImage1.rotate(degree);