Chat Application - Messages aren't well positionned

122 views
Skip to first unread message

h.ga...@hotmail.fr

unread,
Jan 15, 2021, 4:44:07 AM1/15/21
to Kivy users support
Hello everyone,
I am trying to make a chat application using Python (3.7) & Kivy (or KivyMD when it's possible). I'm also trying to take example to the "Kivy-chat-app" Framework (https://github.com/Hash-Studios/Kivy-Chat-App). But it seems I didn't understand everything. When I send a message, it isn't send at the top of the app. Just like this. Why isn't the messages at the very top of the app?

screen1.png


Here is my python code :

from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.scrollview import ScrollView
from kivy.graphics import Color, Rectangle, BorderImage

import page_chat


class ScrollableLabel(ScrollView):

   
def __init__(self, **kwargs):
       
try:
           
super().__init__(**kwargs)

       
except Exception as e:
           
print("3 : ", e)
     
   
def _update_rect(self, instance, value):
       
self.rect.pos = instance.pos
       
self.rect.size = instance.size

   
   
# Method called externally to add new message to the chat history
   
def update_chat_history(self, message):
       
try:
           
print("avant un message: ", self.ids.label_history_content.pos)
           
print("avant un message: ", self.ids.label_history_content.height)
           
self.ids.label_history_content.text += '\n' + message
           
print("après un message :", self.ids.label_history_content.height)
           
           
self.ids.grid_SL.height = self.ids.label_history_content.texture_size[1] + 15
           
self.ids.label_history_content.height = self.ids.label_history_content.texture_size[1]
           
#self.ids.label_history_content.text_size = (self.ids.label_history_content.width, None)
           
self.scroll_to(self.ids.label_scrolling)
           
       
except Exception as e:
           
print("4 : ", e)

   
def update_chat_history_layout(self, _=None):
       
try:
           
self.ids.grid_SL.height = self.ids.label_history_content.texture_size[1] + 15
           
self.ids.label_history_content.height = self.ids.label_history_content.texture_size[1] - self.ids.box_text_button.height
           
#self.ids.label_history_content.text_size = (self.ids.label_history_content.width * 0.98, None)
       
except Exception as e:
           
print("5 : ", e)



And here is my kv file :

<MainWidget>:
    orientation: 'vertical'
    height : self.height
    id: mainBoxLayout
    toolbar: toolbar
    tabs: tabs
    pos_hint : {"top" : 1}
    MDToolbar:
        id: toolbar
        title: "BiBOT v1"
        md_bg_color: 0.5843, 0, 0.2392, 0.8
        height: self.parent.height / 20
        width: self.parent.width
           
    MDTabs:
        id: tabs
        on_tab_switch: root.on_tab_switch(*args)
        background_color: 0.5843, 0.7529, 0.2392, 0.8
        text_color_normal: 0, 0, 0, 1
        text_color_active: 0, 0, 0, 1
        tab_bar_height : self.parent.height / 20
        width: self.parent.width

       
<Tab>:
    BoxLayout:
        id: box
        orientation: "vertical"

<Tab>:
    BoxLayout:
        id: box
        orientation: "vertical"

<ScrollableLabel>:
    size_hint_y: 1
    GridLayout:
        id: grid_SL
        size_hint_y: None
        cols: 2
        orientation : 'vertical'      
        MDLabel:
            id: label_history_content
            size_hint_y : None
            valign : "top"
            markup : True
            color : 0,0,0,1
            font_style : 'Caption'
            theme_text_color : 'ContrastParentBackground'
        MDLabel:
            id: label_scrolling
            size_hint: None, None
            #size: self.texture_size  

<ChatPage>:  
    rows : 2  
    orientation: "vertical"
    pos_hint : {"top" : 1}
    id: box_chat_history
   
    ScrollableLabel:
        id: history    
        size_hint_y : 1
        pos_hint: {"top": 1}
   
    BoxLayout:
        id: box_text_button
        cols: 2
        size_hint : 1, 0.07
       
        MDTextFieldRect:
            id: text_send
            hint_text: "Helper text on focus"
            helper_text: "Text is always here"
            helper_text_mode: "on_focus"
            height: self.parent.height
            width: self.parent.width
            fill_color : 0.1,0,0.1
   
        MDRectangleFlatButton:
            id: bouton_send
            text: "Send"
            text_color: 0, 0, 1, 1
            md_bg_color: 1, 1, 0, 1
            height: self.parent.height
            width: self.parent.width * 0.2


I don't understand what I am doing wrong, if anyone can help,
Thanks in advance!

Elliot Garbus

unread,
Jan 15, 2021, 8:30:22 AM1/15/21
to kivy-...@googlegroups.com

You have a class called ScrollableLabel, this class should be derived from a GridLayout, and added to the ScrollView.  It should not be a ScrollView.

 

 

From: h.ga...@hotmail.fr
Sent: Friday, January 15, 2021 2:44 AM
To: Kivy users support
Subject: [kivy-users] Chat Application - Messages aren't well positionned

 

Hello everyone,

I am trying to make a chat application using Python (3.7) & Kivy (or KivyMD when it's possible). I'm also trying to take example to the "Kivy-chat-app" Framework (https://github.com/Hash-Studios/Kivy-Chat-App). But it seems I didn't understand everything. When I send a message, it isn't send at the top of the app. Just like this. Why isn't the messages at the very top of the app?

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/1e259e3b-5a6c-4df5-abe8-14e5cd57c3b9o%40googlegroups.com.

 

Elliot Garbus

unread,
Jan 15, 2021, 8:36:10 AM1/15/21
to kivy-...@googlegroups.com

Here is an example using a boxlayout:

 

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import StringProperty

kv =
"""
<InfoLine>:
    size_hint_y: None
    height: 48
    Label:
        text: root.label_text
    Button:
        text: root.button_text
        on_release: print(f'Button: {self.text} pressed')
   
BoxLayout:
    orientation: 'vertical'
    Label:
        text: 'BoxLayout in a ScrollView'
        size_hint_y: None
        height: 48
    ScrollView:
       do_scroll_x: False
        do_scroll_y: True
        scroll_type:['bars', 'content']
        bar_width: 20
        BoxLayout:
            orientation: 'vertical'
            id: sv_box
            size_hint_y: None
            height: self.minimum_height
            InfoLine:
            InfoLine:
                label_text: 'Test'
                button_text: 'Initialized in kv'
              
"""


class InfoLine(BoxLayout):
    label_text = StringProperty(
'default')
    button_text = StringProperty(
'default')


class ScrollBoxApp(App):
   
def build(self):
       
return Builder.load_string(kv)

   
def on_start(self):
       
for i in range(100):
           
self.root.ids.sv_box.add_widget(InfoLine(label_text=f'Label {i}', button_text=f'Button {i}'))


ScrollBoxApp().run()
Reply all
Reply to author
Forward
0 new messages