I am new to Kivy. Currently i have problem, i want to have a Label with Background colours. I wrote these code but it seems that the Label of the background colour is still displaying black.
May I know if there is any other solution to resolve this issue?
label = Label(text='test',pos=(20, 20),size=(180, 100),size_hint=(None,None))
with label.canvas:
Color(0, 1, 0, 0.25)
Rectangle(pos=label.pos, size=label.size)
The way I do it, is by using my own label MyLabel
In the .py
class MyLabel(Label):
pass
In the .kv:
<MyLabel>:
back_color: .1, .1, .1, 1
canvas.before:
Color:
rgba: root.back_color
Rectangle:
pos: self.pos
size: self.size
After that, you can just do:
a_label = MyLabel()
a_label.back_color = [1, 0, 1, 1]
Related
I have a view that I want to overlay with a transparent black layer whose edges match the view exactly. The view does not clip its bounds, so subviews may be hanging off.
The obvious solution is the mask property of CALayer, but the docs say that the mask layer "must not have a superlayer" or the behavior is undefined.
I was hoping that using the presentationLayer of that view would be an effective workaround, but I don't think I fully understand what presentation layers are, as that property returns nil.
Does anyone have tips on how I could mask my transparent black layer to match the shape of the view over which it will be drawn? Thanks.
There’s a less obvious solution to this that should work better than masking: a blend-mode filter, specifically source-atop. If you add your transparent layer as a sibling of the layers it’s supposed to dim, and assign it the appropriate CI compositing filter, it will dim those layers without affecting anything outside of their boundaries. As a bonus, you’ll get correct antialiasing at the edges, unlike the masked-overlay approach.
Here’s an example. For illustrative purposes I made the dimming layer only half the height of the area it covers, but you’d of course want to make it larger.
let container = CALayer()
container.backgroundColor = NSColor.systemBlue.cgColor
container.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
let dimmedRoot = CALayer()
let dimmedLayer1 = CALayer()
dimmedLayer1.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
dimmedLayer1.backgroundColor = NSColor.systemGreen.cgColor
dimmedLayer1.transform = CATransform3DMakeRotation(0.3, 0, 0, 1)
let dimmedLayer2 = CALayer()
dimmedLayer2.frame = CGRect(x: 80, y: 80, width: 100, height: 100)
dimmedLayer2.backgroundColor = NSColor.systemPurple.cgColor
dimmedLayer2.transform = CATransform3DMakeRotation(-0.1, 0, 0, 1)
let dimmingLayer = CALayer()
dimmingLayer.frame = CGRect(x: 0, y: 50, width: 200, height: 100)
dimmingLayer.backgroundColor = NSColor(white: 0, alpha: 0.5).cgColor
dimmingLayer.compositingFilter = CIFilter(name: "CISourceAtopCompositing")
dimmedRoot.sublayers = [ dimmedLayer1, dimmedLayer2, dimmingLayer ]
container.addSublayer(dimmedRoot)
I have been trying to figure out if there a way to make a "glowing" SCNBox in SceneKit. Unfortunately, I didn't figure it out by myself.
Don't know if the solution is so simple it didn't come into my mind.
Ideas are welcome
Thanks
Make an omni light in the same position as your SCNNode. And set the value of the emission of the SCNNode the same colour as your light.
let box = SCNBox.init(width: 1, height: 1, length: 1, chamferRadius: 0.3)
box.materials.first?.diffuse.contents = UIColor.blue
box.materials.first?.emission.contents = UIColor.white
box.materials.first?.emission.intensity = 1.0
let boxNode = SCNNode.init(geometry: box)
boxNode.position = SCNVector3(x: 0, y: 0, z: -10)
self.sceneView.scene?.rootNode.addChildNode(boxNode)
let omniLight = SCNLight()
omniLight.type = .omni
omniLight.color = UIColor.yellow
boxNode.light = omniLight
I wanted to draw three gradients on top of the other on a HTML5 Canvas. But it wasn't not producing the desired effect. So I dug into the thing a little bit, and found out that rgba(0, 0, 0, 0) was not completely transparent when used in canvas gradient. Rather it was producing an unexpected blackish tone.
In CSS, it works fine though.
How can I have the same effect as it works in CSS? (see attached screenshot please)
CSS properties:
background: linear-gradient(rgba(0, 0, 0, 0), rgb(255, 0, 0));
Canvas properties:
var grad = ctx.createLinearGradient(0, 0, 0, height);
grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
grad.addColorStop(1, 'rgb(255, 0, 0)');
Indeed the algorithms seem to be different.
Not quite sure why, but I'd say that CSS doesn't consider rgba(0,0,0,0) as transparent black pixel like canvas does, but instead just as transparent.
The 2D canvas will composite straight from all the 4 RGBA channels values, until the ones of the next stop, while CSS one seems to comprehend transparent as a particular case.
To get the same result as CSS on a canvas, you'd have to set your first transparent stop to the next one, by only changing the alpha value:
var ctx = c.getContext('2d'),
grad = ctx.createLinearGradient(0,0,0,150);
grad.addColorStop(0, 'rgba(255,0,0,0)'); // transparent red
grad.addColorStop(1, 'rgba(255,0,0)');
ctx.fillStyle = grad;
ctx.fillRect(0,0,300,150);
#html{
background: linear-gradient(rgba(0, 0, 0, 0), rgb(255, 0, 0));
height: 150px;
width: 300px;
display: inline-block;
}
<div id="html"></div>
<canvas id="c"></canvas>
I have been struggling recently creating a filled Circle in Kivy that stays a circle when the window is re-sized to a different width or height. I looked at the question here:
Centering an object in Kivy
But when I implement my Circle like so:
<BigCircle>
width: min(self.size)
height: min(self.size)
pos_hint: {'center_x': .5, 'center_y': .5}
canvas:
Color:
rgb: 1, 1, 0
Ellipse:
size: self.size
pos: self.pos
<MainScreen>:
FloatLayout
size: root.size
canvas:
Color:
rgb: 1, 1, 1
Rectangle:
size: self.size
BigCircle:
id: big_cir
class MainScreen(Screen):
pass
class MyApp(App):
def build(self):
sm = ScreenManager(transition=NoTransition())
sm.add_widget(MainScreen(name="Main"))
return sm
I get the error:
[Critical][Clock ]Warning, too much iteration done before the next frame. Check your code, or increase the Clock.max_iteration attribute
I am doing nothing with the Clock, but I am using a ScreenManager. Currently, MainScreen is the only screen. If I change the height/width to not include the min() then it works, but that is necessary to keep the Circle circular. Otherwise it becomes elongated when re-sized and looks bad.
The problem is you have an infinite loop due to BigCircle width and height being adjusted based on its size (width, height). Try changing your BigCircle to:
<BigCircle>
canvas:
Color:
rgb: 1, 1, 0
Ellipse:
size: min(self.size), min(self.size)
pos: root.center_x - min(self.size)/2, root.center_y - min(self.size)/2
I am creating a few charts using Highcharts.
THe plotbackground color I use is #f0f0f0.
However instead of the light gray background that I am expecting to see. In FF I notice a pinkish shade to the background. I tried using the rgb equivalent instead of #F0F0F0 but that was of no use as well.
Below is how I am setting my option.Any pointers will be really appreciated! Thanks!
chart: { width: 325, height: 225, marginBottom: 30, spacingBottom: 0, marginLeft: 3, marginRight: 45, spacingRight: 0, spacingBottom: 30, borderRadius: 0, marginTop: 2, type: 'area', plotBackgroundColor: '#F0F0F0' }
Even worse, In case of column chart, I have drawn vertical white plotlines. The effect is alternate bands of gray and pinkish shades.