How to set the hint_text to stay always on the top? - kivy

I would like to have an MDTextField, whose hint_text stays always in the top of it, even if it's not focused or they are no letter written on it, but I don´t know how nor if it is possible.
code:
from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.core.window import Window
from kivymd.uix.screen import MDScreen
Window.size = (300, 500)
navigation_helper = """
<CalculatorScreen>
name: 'calculator_screen'
MDBoxLayout:
orientation: 'vertical'
padding: (0, "70dp" , 0, 0)
pos_hint: {"top": 1}
spacing: "5dp"
MDBoxLayout:
id: food_block
padding : ("5dp",0,"5dp",0)
size_hint: (1,None)
height: "33dp"
padding: ("2dp",0,"2dp","-20dp")
MDTextField:
id: kcal_result
hint_text: "Kcal"
size_hint: (0.14,None)
height: "30dp"
MDTextField:
id: proteins_result
hint_text: "Proteínas"
readonly: True
size_hint: (0.185,None)
height: "30dp"
MDTextField:
id: carbohydrates_result
hint_text: "Glúcidos"
readonly: True
size_hint: (0.175,None)
height: "30dp"
MDTextField:
id: lipids_result
hint_text: "Grasas"
readonly: True
size_hint: (0.15,None)
height: "30dp"
MDTextField:
id: sugar_result
hint_text_font_size: "5dp"
hint_text: "Azúcar"
readonly: True
size_hint: (0.15,None)
height: "30dp"
MDTextField:
id: salt_result
hint_text : "Sal"
readonly: False
size_hint: (0.10,None)
height: "30dp"
<MainScreen>:
name: "main_screen"
BoxLayout:
orientation: 'vertical'
MDTopAppBar:
id: title_bar
title: 'Dietas'
md_bg_color: 0.08,0.07,0.45
specific_text_color: 1,1,1
left_action_items: [["menu", lambda x: nav_drawer.set_state('toggle')]]
Widget:
MDNavigationLayout:
ScreenManager:
id: scr
CalculatorScreen:
MDNavigationDrawer:
id: nav_drawer
BoxLayout:
orientation: 'vertical'
spacing: '8dp'
ScrollView:
MDList:
OneLineListItem:
text: "Calcular comida"
on_press:
scr.current= 'calculator_screen'
title_bar.title = "Calculadora Comida"
nav_drawer.set_state('close')
MainScreen:
"""
class CalculatorScreen(MDScreen):
pass
class MainScreen(MDScreen):
def disable_top_bar2(self):
self.ids.title_bar.disabled = True
def enable_top_bar(self):
self.ids.title_bar.disabled = False
class DemoApp(MDApp):
def build(self):
self.theme_cls.theme_style = ("Dark")
screen = Builder.load_string(navigation_helper)
return screen
DemoApp().run()
I tried to set a hint_text on_text but didn't work (it appears only when clicked, remained there after deleting text, and stayed big in the top)

Related

kivy scrolling in grid layout of n rows

I have a grid layout inside of a relative layout that i would like to have a variable number of rows with each row having a fixed length. this would use a scroll bar so a large amount of items could be included.
Below is the relevant part of my kv file, at the moment I am manually adding items, ideally I would not have this hard coded but i'm not sure how...
RelativeLayout:
size_hint: 0.35, 1
pos_hint: {"x": 0, "y": 0}
TextInput:
id : inpSearch
size_hint: 0.9,0.05
pos_hint: {"x": 0, "y": 0.9}
GridLayout:
size_hint: 1, 0.8
pos_hint: {"x": 0, "y": 0.1}
cols: 2
rows: 20
Button:
id : btnMov1
text: 'Title'
Button:
id : btnRmv1
text: 'Remove'
Button:
id : btnMov2
text: 'Title'
Button:
id : btnRmv2
text: 'Remove'
Button:
id : btnMov3
text: 'Title'
Button:
id : btnRmv3
text: 'Remove'
Button:
id : btnMov4
text: 'Title'
Button:
id : btnRmv4
text: 'Remove'
Button:
id : btnMov5
text: 'Title'
Button:
id : btnRmv5
text: 'Remove'
Button:
id : btnMov6
text: 'Title'
Button:
id : btnRmv6
text: 'Remove'
Button:
id : btnMov7
text: 'Title'
Button:
id : btnRmv7
text: 'Remove'
Button:
id : btnMov8
text: 'Title'
Button:
id : btnRmv8
text: 'Remove'
Button:
id : btnMov9
text: 'Title'
Button:
id : btnRmv9
text: 'Remove'
Button:
id : btnMov10
text: 'Title'
Button:
id : btnRmv10
text: 'Remove'
Button:
id : btnMov11
text: 'Title'
Button:
id : btnRmv11
text: 'Remove'
Button:
id : btnMov12
text: 'Title'
Button:
id : btnRmv12
text: 'Remove'
Button:
id : btnMov13
text: 'Title'
Button:
id : btnRmv13
text: 'Remove'
Button:
id : btnMov14
text: 'Title'
Button:
id : btnRmv14
text: 'Remove'
Button:
id : btnMov15
text: 'Title'
Button:
id : btnRmv15
text: 'Remove'
Button:
id : btnMov16
text: 'Title'
Button:
id : btnRmv16
text: 'Remove'
Button:
id : btnMov17
text: 'Title'
Button:
id : btnRmv17
text: 'Remove'
Button:
id : btnMov18
text: 'Title'
Button:
id : btnRmv18
text: 'Remove'
Button:
id : btnMov19
text: 'Title'
Button:
id : btnRmv19
text: 'Remove'
Button:
id : btnMov20
text: 'Title'
Button:
id : btnRmv20
text: 'Remove'
Button:
id : "btnAnm"
text: "Add"
size_hint: 0.5, 0.05
pos_hint: {"x": 0, "y": 0.05}
I'm happy to keep this hard coded and have a fixed number of items but I would like to have a scroll bar so that I can fit more items in.
You can achieve what you are looking for by inserting the GridLayout into a ScrollView via add_widget()
main.py
import kivy
from kivy.app import App
from kivy.uix.scrollview import ScrollView
from kivy.core.window import Window
from kivy.uix.gridlayout import GridLayout
class MyGrid(GridLayout):
pass
class myApp(App):
def build(self):
layout = MyGrid(size_hint_y=None, size_hint_x=1)
layout.bind(minimum_height=layout.setter('height'))
root = ScrollView(size_hint=(1, None), size=(Window.width, Window.height))
root.add_widget(layout)
return root
if __name__ == "__main__":
myApp().run()
my.kv
<ScrollView>:
canvas:
Color:
rgb: 0, 0, 1
Rectangle:
pos: self.pos
size: self.size
<GridLayout>:
canvas:
Color:
rgb: 1, 0, 0
Rectangle:
pos: self.pos
size: self.size
cols:2
size: root.width, root.height
TextInput:
id : inpSearch
size_hint: 1, None
Label:
text: ''
Button:
id : btnMov1
text: 'Title'
size_hint: 1, None
size: self.texture_size
padding: 20, 15
Button:
id : btnRmv1
text: 'Remove'
size_hint: 1, None
size: self.texture_size
padding: 20, 15
Button:
id : btnMov2
text: 'Title'
size_hint: 1, None
size: self.texture_size
padding: 20, 15
Button:
id : btnRmv2
text: 'Remove'
size_hint: 1, None
size: self.texture_size
padding: 20, 15
Button:
id : btnMov3
text: 'Title'
size_hint: 1, None
size: self.texture_size
padding: 20, 15
Button:
id : btnRmv3
text: 'Remove'
size_hint: 1, None
size: self.texture_size
padding: 20, 15
Button:
id : "btnAnm"
text: "Add"
size_hint: 1, None
size: self.texture_size
padding: 20, 15
Note that for the widgets to display correctly you must specify additional properties as shown in the example.

Kivy: How do you make a rounded TextInput in kivy?

well guys I've researched but everything is so minimal about this. all I've found was This: Kivy: TextInput border radius. So guys can you tell how to make a rounded textinput in kivy like easier. I need a solution. I've tried radius: [58], nope. I've heard of ellipse in the link above in the code, although I'm not sure how to use it. What does it do - how do you use it - or is it not the solution.
Solution: copy and paste this script and execute it (remember to change the name of the background picture in the source code "a12.jpeg"), the reason why the inputs seem bigger in the last 2 screenshots it is because for PC the resolution has to be higher but in the phone it will look at normal size.
from kivymd.app import MDApp as jbsidis
from kivy.lang import Builder as jbsidisx
class jbsidis_Josue_Carranza(jbsidis):
def __init__(self, **kwargs):
super().__init__(**kwargs)
def build(self):
return jbsidisx.load_string(M)
M="""
#:import Window kivy.core.window.Window
Screen:
bg_color: (1,1,1,.3)
highlight_color1jbsidis: [0,0,0,0]
highlight_color2jbsidis: (0,0,0,.3)
canvas.before:
Color:
rgba: [1,1,1,1]
Rectangle:
size: self.size
pos: self.pos
source: "a12.jpeg"
FloatLayout:
MDIconButton:
size_hint: .4, .05
pos_hint: {"center_x": .1, "top": .975}
text: "Back"
icon: 'chevron-left'
markup: True
TextInput:
id: email_jbsidis
hint_text_color: [0,0,0, 1]
foreground_color: [1,1,1,1]
hint_text: "Email"
background_color: [0,0,0,0]
background_image: ""
background_normal: ""
background_active: ""
multiline: False
size_hint: .7 ,.1 #.06
pos_hint: {'center_x':.5, 'center_y':.8} #'center_y':.8
canvas.before:
Color:
rgba: root.highlight_color2jbsidis if root.ids.email_jbsidis.focused else [1,1,1,.5]
RoundedRectangle:
size: self.size
pos: self.pos
radius: 10,
FloatLayout:
MDIconButton:
text: "[u]Reset password[/u]"
icon: 'email-send-outline'
markup: True
color: Window.clearcolor
opposite_colors: True
pos_hint: {'center_x':.8, 'center_y':.8}
TextInput:
id: password_jbsidis
hint_text: "Password"
foreground_color: [1,1,1,1]
background_color: [0,0,0,0]
background_image: ""
background_normal: ""
background_active: ""
multiline: False
password: True
size_hint: .7 ,.1 #.06
pos_hint: {'center_x':.5, 'center_y':.65}
canvas.before:
Color:
rgba: root.highlight_color2jbsidis if root.ids.password_jbsidis.focused else [1,1,1,.5]
RoundedRectangle:
size: self.size
pos: self.pos
radius: 10,
FloatLayout:
MDIconButton:
icon: 'lock-outline'
markup: True
color: Window.clearcolor
opposite_colors: True
pos_hint: {'center_x':.8, 'center_y':.65}
MDIconButton:
id: jbsidis_s
text: "[u]Reset password[/u]"
icon: 'lock-open-outline'
markup: True
color: Window.clearcolor
pos: password_jbsidis.pos[0]+password_jbsidis.size[0], password_jbsidis.pos[1]+dp(4)
pos_x: password_jbsidis.pos[0]
opposite_colors: True
MDRaisedButton:
id: jbsidis_i
text: "Sign In"
pos_hint: {"center_x": .5, "top": .5}
MDRaisedButton:
id: button_jbsidis
text: "Sign up"
size_hint: .2 ,.05
pos_hint: {"right": .85, "center_y": .1}
opacity: 0
disabled: True
bg_color: (0,0,0,1)
color: [0,0,0,1]
"""
jbsidis_Josue_Carranza().run()
Pictures:
I'm not sure what you mean by rounded text input, but a way to make an input an ellipse-like is by using KivyMD. Inside of KivyMD there is something called MDTextFieldRound which gives you this. Here is a page on it: https://kivymd.readthedocs.io/en/0.104.1/components/text-field/

KonvaJs: Subgroup not rendering in correct position in relation to parent group

I am trying to get an information card (consisting of a Konva.Rect and Konva.Text) to appear below an image while hovering over it. I've tried combining the info card into a separate child group and added it to a parent group that consists of the image and the image label. The issue is that when hovering over the image the rectangle appears far off to the right rather than in the correct x,y position. How can I set the child group's coordinates such that if the image moves across the screen the info card will always appear below it?
I've tried setting the rectangle's x attribute as group.x() (where group is the parent group's x coordinate). I've also tried setting it as image.x() yet the rectangle still appears far off to the right of the parent image.
let group = new Konva.Group({
x: 100,
y: 20,
id: attr.status,
visible: ng.checkboxValues[status] ? true : false,
});
let image = new Konva.Image({
x: group.x(),
y: group.y(),
image: DOMImage,
width: 40,
height: 40,
listening: true,
visible: true,
});
let robotAlias = new Konva.Text({
x: image.x() - 20,
y: image.y() + 10,
text: attr.alias,
fontSize: 13,
fontFamily: 'Roboto',
fill: ng.colorMap[attr.status],
visible: true,
});
let complexText = new Konva.Text({
x: image.x(),
y: image.y(),
text: `${attr.alias}-${attr.status}`,
fontSize: 15,
padding: 10,
fontFamily: 'Roboto',
align: 'center',
fill: this.colorMap[attr.status],
height: 60,
width: 160,
visible: true,
});
let rect = new Konva.Rect({
x: image.x(),
y: image.y(),
stroke: '#fff',
strokeWidth: 1,
fill: '#fff',
height: 60,
width: 160,
shadowColor: 'black',
shadowBlur: 5,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
visible: true,
});
let descriptionCardGroup = new Konva.Group({
x: image.x(),
y: image.y(),
visible: false,
name: `${attr.id}`,
})
group.add(image);
group.add(robotAlias);
descriptionCardGroup.add(rect);
descriptionCardGroup.add(complexText);
group.add(descriptionCardGroup);
Here's a screenshot of the current behavior: https://ibb.co/QMYjxrw

prawn-table set header's row background color

pdf.table([header, row1, row2], width: 490, cell_style: { size: 7, align: :center }) do
style(row(0), padding: [4,2], font: "#{Prawn::BASEDIR}/data/fonts/DejaVuSans-Bold.ttf")
# style(row(0).columns(2..3), width: 10 )
# style(row(0), cell_style: {background_color: "#f5f5dc"} )
style(row(1), padding: [16,10])
style(row(1).columns(-2..-1), align: :right)
style(row(2).column(0), borders: [])
style(row(2).column(-2..-1), padding: [6,10], align: :right)
end
I want row(0) to have a background color, but can't find out how (see the commented out lines - those are not working).
I use prawn-rails and prawn-table gems.
Thanks!
Ok.. I am too quick with asking questions.
Here is how you do that (use row_colors option):
pdf.table([header, row1, row2], width: 490, cell_style: { size: 7, align: :center}, row_colors: ['F0F0A3', nil, nil]) do
style(row(0), padding: [4,2], font: "#{Prawn::BASEDIR}/data/fonts/DejaVuSans-Bold.ttf")
style(row(1), padding: [16,10])
style(row(1).columns(-2..-1), align: :right)
style(row(2).column(0), borders: [])
style(row(2).column(-2..-1), padding: [6,10], align: :right)
end
I don't think, it is the best way to achieve the header's background color, but what I did is just set the colors for each row (actually color for the first row, and nil for each left).

How to offset the title control in Titanium

How do I offset the title control in titanium?
Right now I am trying to put a left: -100 property on the label that is in the title control and that works for when you open up the view but then it moves back into the center.
Are there any suggestions on how I can achieve this move over?
Thanks in advance!
var txtSearch = Titanium.UI.createTextField({
hintText: 'Keyword to search for',
height: 'auto',
width: 220,
left: -100,
font: {fontSize: 12},
enabled: true,
keyboardType:Titanium.UI.KEYBOARD_EMAIL,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
clearButtonMode: Titanium.UI.INPUT_BUTTONMODE_ONFOCUS
});
win.setTitleControl(txtSearch);
var btnSearch = Titanium.UI.createButton({
title: 'Search',
height: 'auto',
width: 'auto',
font: {fontSize: 13}
});
win.rightNavButton = btnSearch;
If I click the search button and it brings me to the search results page and then I hit the back button the textbox is not moved over and looks fine.. Only when the page first loads
Try adding the text field to a view, then setting the view as the title control:
var container = Ti.UI.createView({
width: 320
});
var txtSearch = Titanium.UI.createTextField({
hintText: 'Keyword to search for',
height: 'auto',
width: 220,
left: 0,
font: {fontSize: 12},
enabled: true,
keyboardType:Titanium.UI.KEYBOARD_EMAIL,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
clearButtonMode: Titanium.UI.INPUT_BUTTONMODE_ONFOCUS
});
container.add(txtSearch);
win.setTitleControl(container);

Resources