Kivy - Widgets keep geting centred in floatlayout

Question

I'm trying to program a layout for radar in Kivy 2.0.0 with python 3.6.8 and everything is looking fine until I try to add dots to my layout. Instead of being in the right position, they keep getting centered. Does anybody know the reason why that is happening?

I based my code on this rotating line example: Example

Is there a way for those dots to be positioned by their "pos" value?

Python code

from kivymd.app import MDApp
from kivy.uix.widget import Widget
from kivy.properties import NumericProperty, ObjectProperty
from kivy.uix.button import Button
from kivy.animation import Animation
from kivymd.uix.textfield import MDTextField
from kivy.clock import Clock
import random
import math


class RadarDot(Widget):
    random_color = [random.random(), random.random(), random.random(), 1]

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        Clock.schedule_once(self.auto_destruct, 4)

    def auto_destruct(self, *args):
        self.parent.remove_widget(self)

class RotatingLineWidget(Widget):
    length = NumericProperty(10.0)
    angle = NumericProperty()

class RadarApp(MDApp):

    def build(self):
        self.line = self.root.ids.line

    def on_start(self):
        pass


if __name__ == '__main__':
    RadarApp().run()

Kivy code:

<RadarDot>:
    canvas:
        Color:
            rgba: self.random_color
        Ellipse:
            size: 20, 20


<BorderCircle@Widget>:
    canvas:
        Color:
            rgba: 1, 1, 1, 1
        Translate:
            xy: self.pos[0], self.pos[1]
        Line:
            width: 2
            circle: [0, 0, 300, -90 , 90]

<BottomLine@Widget>:
    canvas:
        Color:
            rgba: 1, 1, 1, 1
        Translate:
            xy: self.pos[0], self.pos[1]
        Line:
            width: 2
            points: 300, 0, -300, 0

<BorderCircleMedium@Widget>:
    canvas:
        Color:
            rgba: 1, 1, 1, 1
        Translate:
            xy: self.pos[0], self.pos[1]
        Line:
            width: 2
            circle: [0, 0, 200, -90 , 90]

<BorderCircleSmall@Widget>:
    canvas:
        Color:
            rgba: 1, 1, 1, 1
        Translate:
            xy: self.pos[0], self.pos[1]
        Line:
            width: 2
            circle: [0, 0, 100, -90 , 90]

<RotateButton>:

<RotationInput>:

<RotatingLineWidget>:
    canvas:
        PushMatrix
        Rotate:
            angle: self.angle
            axis: 0,0,1
        Color:
            rgba: 0.2, 1, 0.3, 1
        Translate:
            xy: self.pos[0], self.pos[1]
        Line:
            points: 0, 0, 0, self.length * 1
            width: 2
        PopMatrix

ScreenManager:
    canvas.before:
        Color:
            rgba: 0, 0, 0, .8

        Rectangle:
            pos: self.pos
            size: self.size

    Screen:
        size_hint: 1, 1
        id: main_float

        FloatLayout:

            line: line

            BorderCircle:
                pos: root.size[0]/2, root.size[1]/2

            BorderCircleMedium:

            BorderCircleSmall:

            BottomLine:

            RotatingLineWidget:
                main_float: main_float
                id: line
                length: 300
                angle: 0

            RadarDot:
                pos: 200, 30

            RadarDot:
                pos: 500, 600

Answer 1

You haven't provided a pos for the Ellipse, so the default (0,0) is used. Try adding pos to your <RadarDot> rule:

<RadarDot>:
    canvas:
        Color:
            rgba: self.random_color
        Ellipse:
            size: 20, 20
            pos: self.pos