Category: kivy

Kivy – Stopwatch App ”; Previous Next In this chapter, we shall build a Stopwatch app using Python”s Kivy GUI framework. A stopwatch measures the time elapsed between the instances of starting an event and stopping it. For example, the stopwatch used to measure the time taken by an athlete to complete a 100-meter run. The GUI design for the app should resemble the following figure − The following “kv” script is used to place two labels and two buttons as shown in the above figure. The top label will be used to display the current time, and the label at the bottom will display the time elapsed after the timer is started. The left button is used to start/stop the stopwatch. The one on right resets the timer to 0. BoxLayout: orientation: ”vertical” Label: id: time font_size:40 markup:True text: ”[b]00[/b]:00:00” BoxLayout: orientation: ”horizontal” padding: 20 spacing: 20 height: 90 size_hint: (1, None) Button: text: ”Start” id: start_stop on_press : app.start_stop() Button: id: reset text: ”Reset” on_press: app.reset() Label: id: stopwatch font_size:40 markup:True text:”00:00.[size=40]00[/size]” In the application code, we define an on_stop() event handler that is invoke as soon as the GUI is populated. It schedules a time event handler which updates the label with current time after each second. def on_start(self): Clock.schedule_interval(self.update_time, 0) The update_time() method updates the current time displayed on the upper label (with id as time), and time elapsed on the lower label (with id as stopwatch) – if the timer has been started. def update_time(self, t): if self.sw_started: self.sw_seconds += t minutes, seconds = divmod(self.sw_seconds, 60) part_seconds = seconds * 100 % 100 self.root.ids.stopwatch.text = “{:2d} : {:2d}.{:2d}”.format(int(minutes), int(seconds), int(part_seconds)) self.root.ids.time.text = strftime(”[b]%H[/b]:%M:%S”) The Button with id=start is bound to start_stop() method which stores the status of the stopwatch whether it has started or stopped and accordingly updates the caption of the start button (with id as start_stop). def start_stop(self): self.root.ids.start_stop.text = ”Start” if self.sw_started else ”Stop” self.sw_started = not self.sw_started The button on right resets the time counter to 0, sets the caption of the other button to start and also resets the caption of the bottom label to 0:0.0. def reset(self): if self.sw_started: self.root.ids.start_stop.text = ”Start” self.sw_started = False self.sw_seconds = 0 Example The entire coding logic is gien in the code below − from time import strftime from kivy.clock import Clock from kivy.app import App from kivy.core.window import Window Window.size = (720, 400) class StopWatchApp(App): sw_seconds = 0 sw_started = False def update_time(self, t): if self.sw_started: self.sw_seconds += t minutes, seconds = divmod(self.sw_seconds, 60) part_seconds = seconds * 100 % 100 self.root.ids.stopwatch.text = “{:2d} : {:2d}.{:2d}”.format(int(minutes), int(seconds), int(part_seconds)) self.root.ids.time.text = strftime(”[b]%H[/b]:%M:%S”) def on_start(self): Clock.schedule_interval(self.update_time, 0) def start_stop(self): self.root.ids.start_stop.text = ”Start” if self.sw_started else ”Stop” self.sw_started = not self.sw_started def reset(self): if self.sw_started: self.root.ids.start_stop.text = ”Start” self.sw_started = False self.sw_seconds = 0 StopWatchApp().run() Output Since the name of the App class in the above code is StopWatchApp, its “kv” language design script must be named as “StopWatch.kv” and run the program. Press the Start button. The counter will start, showing the time elapsed on the bottom label. The caption changes to Stop. Press it again to stop the clock from running. Clicking the Reset button brings the label to “0”. Print Page Previous Next Advertisements ”;

Kivy – Code Input ”; Previous Next The CodeInput widget in the Kivy framework is a specialized TextInput box, capable of displaying editable text that is highlighted as per the syntax of the language lexer chosen. The CodeInput widget requires the pygments package to be installed. The pygments package is a Python syntax highlighter. It is used in applications that need to prettify source code. Pygments supports almost all the languages, including programming, scripting languages and even capable of providing syntax highlighting as per the framework and library syntax. The support comes in the form of Lexer classes. For example, to pickup Python syntax for highlighting the language elements, we need to import Python3Lexer, for C++ code, the CppLexer class needs to be imported. Specifically the Kivy code is highlighted with KivyLexer. If your current working environment doesn”t have pygments installed, run the following command − pip3 install pygments The CodeInput class is defined in the “kivy.uix.codeinput” module. from kivy.uix.codeinput import CodeInput codewidget = CodeInput(**kwargs) The CodeInput class inherits the TextInput class, as well as CodeNavigationBehaviou mixin. Just as a TextInput object, the CodeInput widget is a multiline text box, which can be added to other layout classes. It can be instantiated by specifying following properties − lexer − This holds the selected Lexer used by pygments to highlight the code. It is an ObjectProperty and defaults to PythonLexer. style − The pygments style object to use for formatting. When style_name is set, this will be changed to the corresponding style object. style_name − Name of the pygments style to use for formatting. style_name is an OptionProperty and defaults to ”default”. There are a number of styles available in pygments. Some of the examples are emacs, xcode, vs, bw, colorful and many more. In addition to these, the properties are also inherited from TextInput class. The CodeNavigationBehavior mixin modifies navigation behavior in the TextInput, making it work like an IDE instead of a word processor. Example In the following code, the CodeInput widget uses PythonLexer to perform syntax highlighting of a Python source code. A “code.py” file is read using Python”s file object and the data is assigned to the text property of CodeInput object. from kivy.app import App from kivy.uix.gridlayout import GridLayout from kivy.uix.codeinput import CodeInput from pygments.lexers.python import Python3Lexer from kivy.uix.scrollview import ScrollView from kivy.uix.codeinput import CodeInput from kivy.core.window import Window Window.size = (720,400) class codeinputdemoapp(App): def build(self): scr = ScrollView(size=Window.size) codinp = CodeInput(style=”emacs”) codinp.height = max(codinp.minimum_height, scr.height) file=open(”code.py”) text=file.read() codinp.text=text scr.add_widget(codinp) return scrx codeinputdemoapp().run() To highlight the code which uses Kivy related keywords and functions, load the KivyLexer. You can also experiment with the “pigment” style, changing it to “colorful” or any of the available styles. from kivy.extras.highlight import KivyLexer Read the “kivycode.py” file and load it in the CodeInput box. file=open(”kivycode.py”) text=file.read() codinp.text=text You can also try and display a C++ code with CppLexer − from pygments.lexers.c_cpp import CppLexer This time, change the style to “friendly”. file=open(”test.cpp”) text=file.read() codinp.text=text Print Page Previous Next Advertisements ”;

Kivy – Camera Handling ”; Previous Next The Kivy framework supports Camera hardware through platform-specific providers. The “opncv-python” package enables camera support for Kivy on most operating systems. Hence it is recommended that the opencv-python package should be installed in Kivy”s working environment. In this chapter, we shall build a Camera app with Kivy library”s Camera class. A Camera widget along with a ToggleButton and a normal Button are placed in a vertical box layout to construct the app interface. The Camera instance starts with the initial play state as True, which means the app window will start the video stream from the camera as soon as it is loaded. The Toggle button stops the camera when it is down. It is bound to play() method. The Capture button will be in enabled state only when the camera is playing. def play(self, instance): if instance.state==”down”: self.mycam.play=False instance.text=”Play” self.cb.disabled=True else: self.mycam.play=True instance.text=”Stop” self.cb.disabled=False The Capture button saves the current frame to a PNG file by calling export_to_png() method of the Camera object. As the image is captured, Kivy pops up a message box with a title as Image Captured. def capture(self, instance): if self.tb.text == ”Stop”: self.mycam.export_to_png(“IMG.png”) layout = GridLayout(cols=1) popup = Popup( title=”Image Captured”, title_size=24, content=layout, auto_dismiss=True, size_hint=(None, None), size=(300, 100) ) popup.open() The rest of the code involves the composition of the app interface inside the build() method. Example The complete code is given below − from kivy.app import App from kivy.lang import Builder from kivy.uix.boxlayout import BoxLayout from kivy.uix.togglebutton import ToggleButton from kivy.uix.button import Button from kivy.uix.popup import Popup from kivy.uix.camera import Camera from kivy.core.window import Window Window.size = (720, 400) class TestCamera(App): def build(self): box = BoxLayout(orientation=”vertical”) self.mycam = Camera(play=True, resolution=(640, 480)) box.add_widget(self.mycam) self.tb = ToggleButton( text=”Stop”, size_hint_y=None, height=”48dp”, on_press=self.play ) box.add_widget(self.tb) self.cb = Button( text=”Capture”, size_hint_y=None, height=”48dp”, disabled=False, on_press=self.capture ) box.add_widget(self.cb) return box def play(self, instance): if instance.state == ”down”: self.mycam.play = False instance.text = ”Play” self.cb.disabled = True else: self.mycam.play = True instance.text = ”Stop” self.cb.disabled = False def capture(self, instance): if self.tb.text == ”Stop”: self.mycam.export_to_png(“IMG.png”) layout = GridLayout(cols=1) popup = Popup( title=”Image Captured”, title_size=24, content=layout, auto_dismiss=True, size_hint=(None, None), size=(300, 100) ) popup.open() TestCamera().run() Output The camera instance loads as the application starts. Note that depending on the system and the camera device, it may take a few seconds to start. The toggle button”s caption is stop and the capture button is enabled. If you press the Stop button down, the capture button gets disabled. When in enabled state, press the Capture button. The current frame will be saved as “img.png” with a popup box coming up. Print Page Previous Next Advertisements ”;

Kivy – Page Layout ”; Previous Next The PageLayout class in Kivy is a little different from the other container widgets in Kivy. With PageLayout, you can create a simple multi-page layout so that it allows easy flipping from one page to another using borders. Transitions from one page to the next are made by swiping in from the border areas on the right or left hand side. As PageLayout does not support the size_hint, size_hint_min, size_hint_max, or pos_hint properties, only one widget per page can be displayed. However, you can put multiple widgets in a page by putting a compound layout object such as box layout, grid layout or float layout in a single page. The PageLayout class is defined in the “kivy.uix.pagelayout” module. from kivy.uix.pagelayout import PageLayout pg = PageLayout(**kwargs) You can define following properties as keyword arguments for the PageLayout constructor − anim_kwargs − The animation kwargs used to construct the animation. It is a DictProperty and defaults to {”d”: .5, ”t”: ”in_quad”}. border − The width of the border around the current page used to display the previous/next page swipe areas when needed. It is a NumericProperty and defaults to 50dp. page − The currently displayed page, which is a NumericProperty and defaults to 0. swipe_threshold − The threshold used to trigger swipes as ratio of the widget size. swipe_threshold is a NumericProperty and defaults to 0.5. PageLayout recognizes the touch events and you can override the following event handlers − on_touch_down(touch) − Receive a touch down event with touch parameter as MotionEvent class. It returns a bool. If True, the dispatching of the touch event will stop. If False, the event will continue to be dispatched to the rest of the widget tree. on_touch_move(touch) − Receive a touch move event. The touch is in parent coordinates. n_touch_up(touch) − Receive a touch up event. The touch is in parent coordinates. Here is a simple PageLayout example. We place three buttons, each as a separate page. class PageApp(App): def build(self): pg = PageLayout() btn1 = Button(text =”Page 1”) btn2 = Button(text =”Page 2”) btn3 = Button(text =”Page 3”) pg.add_widget(btn1) pg.add_widget(btn2) pg.add_widget(btn3) return pg When run, the Button with page 1 caption displays. Swipe from right to left with the mouse pressed, to display the second and third pages. Swiping from left to right brings the previous pages in focus. Example In the following example, we add two float layouts in the PageLayout. The “kv” file is used to design the UI. First, the Python code to run the PageLayout app − from kivy.app import App from kivy.uix.label import Label from kivy.uix.button import Button from kivy.uix.textinput import TextInput from kivy.uix.floatlayout import FloatLayout from kivy.uix.pagelayout import PageLayout from kivy.config import Config Config.set(”graphics”, ”width”, ”720”) Config.set(”graphics”, ”height”, ”400”) Config.set(”graphics”, ”resizable”, ”1”) class PageDemoApp(App): def build(self): pass if __name__ == ”__main__”: PageDemoApp().run() Given below is the “PageDemo.kv” file script. The PageLayout embeds to FloatLayout objects. Upper float layout is the design of a registration page, and the bottom float layout is the second page consisting of login screen. PageLayout: FloatLayout: orientation:”vertical” Label: text:”Register” font_size:”20pt” pos_hint:{”center_x”: .5, ”center_y”: .9} Label: text:”Name” size_hint:(.2, .1) pos_hint:{”x”:.2, ”y”:.75} TextInput: size_hint:(.4, .1) pos_hint:{”x”:.3, ”y”:.65} Label: text:”email” size_hint:(.2, .1) pos_hint:{”x”:.2, ”y”:.55} TextInput: size_hint:(.4, .1) pos_hint:{”x”:.3, ”y”:.45} Label: text:”Password” size_hint:(.2, .1) pos_hint:{”x”:.2, ”y”:.35} TextInput: password:True size_hint:(.4, .1) pos:(400, 150) pos_hint:{”x”:.3, ”y”:.25} Button: text:”Submit” size_hint : (.2, .1) pos_hint : {”center_x”:.5, ”center_y”:.09} FloatLayout: orientation:”vertical” size:(720,400) canvas.before: Color: rgba: 0,0,0, 1 Rectangle: pos: self.pos size: self.size Label: text:”Login” font_size: ”30pt” pos_hint:{”center_x”: .5, ”center_y”: .75} Label: text:”email” size_hint:(.2, .1) pos_hint:{”x”:.2, ”y”:.55} TextInput: size_hint:(.4, .1) pos_hint:{”x”:.3, ”y”:.45} Label: text:”Password” size_hint:(.2, .1) pos_hint:{”x”:.2, ”y”:.35} TextInput: password:True size_hint:(.4, .1) pos:(400, 150) pos_hint:{”x”:.3, ”y”:.25} Button: text:”Submit” size_hint : (.2, .1) pos_hint : {”center_x”:.5, ”center_y”:.09} Output Save both the “PageDemoApp.py” and “PageDemo.kv” files, and run the Python script. You should first get the registration page. Now, swipe the screen from right to left to make the login page appear in the application window − Print Page Previous Next Advertisements ”;

Kivy – Input Recorder ”; Previous Next The functionality of Recorder class in Kivy framework is still under development, and is still at experimental stage. The Recorder object records the input events such as touch events, key events and click events. They are recorded in a file with a “.kvi” extension. Kivy uses this file and replays the events by generating equivalent fake events and dispatches them to the event loop. The Recorder class is defined in the “kivy.input.recorder” module − from kivy.input.recorder import Recorder rec = Recorder(**kwargs) To start recording, press F8 after the Recorder object is instantiated. The event data is recorded in the “recorder.kvi” file in the current folder. You can specify any other filename to the file attribute. rec = Recorder(filename=”myrecorder.kvi”) Press F7 to replay the events. To control the recording and replay manually, use the record and play properties of the Recorder object. To start recording − rec = Recorder(filename=”myrecorder.kvi”) rec.record = True rec.start() To stop recording − rec.record = False rec.stop() Similarly, to start replay − rec.play = True rec.start() and, to stop playback − rec.play = False rec.stop() You can make the replay go on in a loop − def playloop(instance, value): if value is False: instance.play = True rec = Recorder(filename=”myrecorder.kvi”) rec.bind(play=playloop) rec.play = True Example In the code given below, a Label is added to a Scatter widget, so that you can perform rotation, zooming and transformation. Further, the text property of the label updates as the user changes the contents of the TextInput box. The recording and replay of events is defined on the on_press event of two buttons. Here”s the complete code − from kivy.app import App from kivy.uix.label import Label from kivy.uix.scatter import Scatter from kivy.uix.boxlayout import BoxLayout from kivy.uix.textinput import TextInput from kivy.uix.togglebutton import ToggleButton from kivy.input.recorder import Recorder from kivy.core.window import Window Window.size = (720,400) class scatterdemoapp(App): def build(self): self.rec = Recorder(filename=”myrecorder.kvi”) box=BoxLayout(orientation=”vertical”) box1=BoxLayout(orientation=”horizontal”) text1=TextInput(text=”Hi”, pos_hint={”top”:1},height=100, size_hint=(.5, None)) b1=ToggleButton(text=”record”,pos_hint={”top”:1}, height=100, size_hint=(.25, None)) b1.bind(on_press=self.on_recording) b2=ToggleButton(text=”play”, pos_hint={”top”:1},height=100, size_hint=(.25, None)) b2.bind(on_press=self.on_playing) box1.add_widget(text1) box1.add_widget(b1) box1.add_widget(b2) box.add_widget(box1) scatr=Scatter() self.lbl=Label(text=”Hi”, font_size=60, pos=(Window.width/2-100,200 )) text1.bind(text=self.lbl.setter(”text”)) scatr.add_widget(self.lbl) box.add_widget(scatr) return box def on_recording(self, obj): if obj.state==”down”: self.rec.record=True self.rec.start() else: self.rec.record=False self.rec.stop() def on_playing(self, obj): if obj.state==”down”: self.rec.play=True self.rec.start() else: self.rec.play=False self.rec.stop() scatterdemoapp().run() Output The App window appears as shown here − Hit the record button and all the screen activities including the key_down events are recorded in the “.kvi” file. The console window shows that inputs have been recorded. [INFO ] [Recorder ] Recording inputs to ”myrecorder.kvi” [INFO ] [Recorder ] Recorded 901 events in ”myrecorder.kvi” On pressing the play button to replay the recorded events. Accordingly the console echoes the corresponding log. [INFO ] [Recorder ] Start playing 901 events from ”myrecorder.kvi” Print Page Previous Next Advertisements ”;

Kivy – Canvas Stress ”; Previous Next In this chapter, we shall find out how efficient is the graphics engine. This can be done by adding a large number of graphics instructions to the canvas of a Kivy object. The program given below measures the time required by the graphics engine to draw ten thousand rectangles at random positions and with randomly chosen color value. Thus it will give an evaluation of how much stress the canvas can sustain. Syntax A rectangle instruction is drawn on the canvas of any Kivy widget with the following syntax − with self.root.canvas: Color(r,g,b,a) Rectangle(pos, size) We shall generate random values for RGB as well as x and y coordinates for the rectangle and display 10, 000 rectangles. The time taken for it is calculated by the perf_counter() function. t1=perf_counter() with self.root.canvas: for i in range(10000): Color(r,g,b,a) Rectangle(pos, size) t2=perf_counter() The time required to draw will be “t2 – t1”. It will be displayed on the title bar of the Kivy app window. Example The complete program is as follows − from kivy.app import App from kivy.graphics import * from kivy.uix.floatlayout import FloatLayout from kivy.uix.gridlayout import GridLayout from kivy.uix.button import Button from random import random as r from time import perf_counter from kivy.core.window import Window Window.size = (720, 400) class StresstestApp(App): def add_rects(self, *args): self.t1 = perf_counter() with self.root.canvas: for i in range(10000): Color(r(), 1, 1, mode=”hsv”) Rectangle( pos=(r() * self.root.width + self.root.x, r() * self.root.height + self.root.y), size=(20, 20) ) self.t2 = perf_counter() self.title = str(self.t2 – self.t1) + “Sec. to draw 10000 rectangles” def build(self): main = GridLayout(cols=1) self.root = FloatLayout(size=(Window.width, 100)) self.btn1 = Button( text=”start”, size_hint=(1, None), pos_hint={”center_x”: .5, ”center_y”: .1} ) self.btn1.bind(on_press=self.add_rects) self.root.add_widget(self.btn1) main.add_widget(self.root) return main StresstestApp().run() Output Run the program and click the “start” button. You will get the time taken displayed on the title bar as shown in the following figure − Print Page Previous Next Advertisements ”;

Kivy – Widget Animation ”; Previous Next Any widget in Kivy toolkit can be animated. All you need to do is define an object of Animation class, choose at least one property of the target widget to animate and specify its final value to be reached after the animation effect is complete. Call the start() method of the Animation object, passing the target widget to it. anim = Animation(property1=value1, property2=value2, ..) anim.start(widget) In the following example, we have placed four Kivy Buttons. Two buttons are placed along the X-axis, keeping the “y” coordinate to 0 and randomizing the “x” coordinate so that one button is placed in first half and the other in second half. Similarly, two more buttons are placed along the Y-axis, their “x” coordinate as 0 and y coordinate value assigned randomly. Buttons placed along X-axis are animated to move up and down. The “y” coordinate value starts from its initial value all the way upto the maximum height of the window, and back to original position. The up and down movement is looping as the repeat property is set to True. Both horizontally placed buttons are bound to the method below − def animate1(self, instance): animation = Animation(pos=(instance.pos[0], Window.height)) animation += Animation(pos=(instance.pos[0], 0)) animation.repeat=True animation.start(instance) Similarly, the vertically arranged buttons b3 and b4 are bound to the following method. Their “x” coordinate value changes from their current value to maximum width and back. def animate2(self, instance): animation = Animation(pos=(Window.width, instance.pos[1])) animation += Animation(pos=(0, instance.pos[1])) animation.repeat=True animation.start(instance) While animation of each button can begin by pressing each button, we can make all the four buttons start animating simultaneously on a touch down event. The above callbacks are triggered by the trigger_action() method. def on_touch_down(self, *args): self.b1.trigger_action(5) self.b2.trigger_action(10) self.b3.trigger_action(15) self.b4.trigger_action(20) Rest of the code is just setting up the UI of four buttons in the build() method of the App class. Example Here”s the complete code − import kivy kivy.require(”1.0.7”) import random from kivy.animation import Animation from kivy.app import App from kivy.uix.button import Button from kivy.uix.floatlayout import FloatLayout from kivy.core.window import Window Window.size = (720,400) class TestApp(App): def animate1(self, instance): animation = Animation(pos=(instance.pos[0], Window.height)) animation += Animation(pos=(instance.pos[0], 0)) animation.repeat=True animation.start(instance) def animate2(self, instance): animation = Animation(pos=(Window.width, instance.pos[1])) animation += Animation(pos=(0, instance.pos[1])) animation.repeat=True animation.start(instance) def on_touch_down(self, *args): self.b1.trigger_action(5) self.b2.trigger_action(10) self.b3.trigger_action(15) self.b4.trigger_action(20) def build(self): box=FloatLayout() # create a button and attach animate() method # as a on_press handler self.b1 = Button( size_hint=(.15, .08), text=”BTN1”, pos=(random.randint(Window.width/2, Window.width), 0), on_press=self.animate1 ) self.b2 = Button( size_hint=(.15, .08), text=”BTN2”, pos=(random.randint(0, Window.width/2), 0), on_press=self.animate1 ) self.b3 = Button( size_hint=(.15, .08), text=”BTN3”, pos=(0, random.randint(0, Window.height/2)), on_press=self.animate2 ) self.b4 = Button( size_hint=(.15, .08), text=”BTN4”, pos=(0, random.randint(Window.height/2, Window.height)), on_press=self.animate2 ) box.add_widget(self.b1) box.add_widget(self.b2) box.add_widget(self.b3) box.add_widget(self.b4) box.bind(on_touch_down=self.on_touch_down) return box if __name__ == ”__main__”: TestApp().run() Output The program starts with the button position randomized. Click anywhere on the application window. Buttons b1 and b2 will start moving up and down. Buttons b3 and b4 will start moving back and forth. This is the initial position − The following figure is a screenshot of button positions while they are moving − Print Page Previous Next Advertisements ”;

Kivy – Canvas ”; Previous Next Unlike some of the other GUI toolkits (such as TKinter for example), Kivy doesn”t have an independent Canvas widget. Instead, you need to use the canvas that each Widget in Kivy already has by default. When you create a widget, you can create all the instructions needed for drawing on its canvas. We need to note that all the widgets have a different canvas but all the canvas draw in exactly the same drawing space, i.e. the coordinate space. Moreover, the drawing space is not limited to the position and size of the widget. The (0,0) of the drawing space is always the bottom-left corner. The “canvas.before” property particularly useful when you need to manipulate the Color of an instance. On the other hand, canvas.after is used to execute any instructions after the children were added. It is called after traverse all the children. Canvas in Kivy is a set of drawing instructions. To draw, you will need a Canvas object and Instruction objects. For example, to draw a rectangle on a label”s canvas − from kivy.graphics import * with label.canvas: Color(1., 0, 0) # Add a red color # Add a rectangle Rectangle(pos=(10, 10), size=(500, 500)) If you have to do the same by not using Python”s context manager − label.canvas.add(Color(1., 0, 0)) label.canvas.add(Rectangle(size=(500, 500))) You can draw shapes such as rectangle, ellipse, line and Beizer on any widget”s canvas, including the Widget object itself. (Widget class is the base for all the other visual widgets in Kivy) To draw a rectangle on the canvas, we need to specify the pos and size attributes − from kivy.graphics import Rectangle Rectangle(**kwargs) Parameters pos − List of X and Y coordinate values specifying Position of the rectangle, in the format (x, y). size − List specifying the width and height of the rectangle, in the format (width, height). The following code draws a rectangle on the canvas of a Widget object − widget=Widget() with widget.canvas: Color(0,0,1,1) Rectangle(pos=(50,300), size_hint=(None, None), size=(300,200)) The instructions Color and Rectangle are automatically added to the canvas object and will be used when the window is drawn. Syntax You may want to use the “kv” language syntax − Widget: canvas: color: rgb: 0,0,1 Rectangle: pos: self.pos size: self.size A Label object in Kivy doesn”t have a backgound color property. To get around this, you can draw a rectangle fille with the desired color on its canvas to lend background. lbl = Label(text=”Hello World”, font_size=24) with lbl.canvas.before: Color(1,1,0) Rectangle(pos=lbl.pos, size=lbl.size) Or, using the “kv” script − Label: text:”Hello World” font_size:24 canvas.before: Color: rgb: (1,1,0) Rectangle: pos:self.pos size=:self.size Syntax You can draw an ellipse on the canvas using the following syntax − from kivy.graphics import Ellipse Ellipse(*args, **kwargs) Parameters segments − Defines how many segments are needed for drawing the ellipse. More the segments, drawing will be smoother if you have many segments. angle_start − float, defaults to 0.0 and Specifies the starting angle, in degrees, of the disk portion. angle_end − float, defaults to 360.0, specifies the ending angle, in degrees, of the disk portion. angle_end − End angle of the ellipse in degrees, defaults to 360. angle_start − Start angle of the ellipse in degrees, defaults to 0. pos − the position on the canvas coordinate system size − the X and Y radii of the ellipse. If both are equal, it becomes a circle. You can also draw an image directly on the canvas, by assigning the image file as the source property of rectangle or ellipse. Example 1 The following code implements all the drawing instructions explained above to display a rectangle, an ellipse and an image on a widget canvas. It also places a label with a rectangle having background color drawn on its canvas. from kivy.app import App from kivy.uix.image import Image from kivy.uix.widget import Widget from kivy.uix.label import Label from kivy.uix.button import Button from kivy.graphics import * from kivy.core.window import Window Window.size = (720,400) class canvasdemoapp(App): def build(self): widget=Widget() # rectangle on canvas with widget.canvas: Color(0,0,1,1) Rectangle( pos=(50,300), size_hint=(None, None), size=(300,200) ) Color(0.5, .2, 0.4, 1) d = 100 # ellipse Ellipse(pos=(600,100), size=(d+75, d)) Color(.5,.5,.5) # image Rectangle(source=”kivy-logo.png”, pos=(50,100)) Color(1,1,1) Rectangle(source=”TPlogo.png”, pos=(300, 100)) # label with background lbl = Label( text=”Hello World”, font_size=24, pos=(Window.width/2, 300), size =(200,200), color=(0,0,1,1) ) with lbl.canvas.before: Color(1,1,0) Rectangle(pos=lbl.pos, size=lbl.size) widget.add_widget(lbl) btn=Button( text=”Button”, font_size=24, background_color= (.8, .4, .3, 1), pos=(500,10) ) widget.add_widget(btn) return widget canvasdemoapp().run() Output When you run this code, it will produce the following output − Example 2 The Widget object responds to all the touch events (such as on_touch_down and on_touch_move, etc.). In the example below, a callback on the on_touch_down event on a Widget object obtains the coordinates where the touch event occurred and draws a circle (ellipse of equal X and Y radii) with random values of RGB colours. from kivy.app import App from kivy.uix.widget import Widget from kivy.graphics import * import random from kivy.core.window import Window Window.size = (720,300) class widget(Widget): def on_touch_down(self, touch): colorR = random.randint(0, 255) colorG = random.randint(0, 255) colorB = random.randint(0, 255) self.canvas.add(Color( rgb=(colorR / 255.0, colorG / 255.0, colorB / 255.0) )) d = 30 self.canvas.add(Ellipse( pos=(touch.x – d / 2, touch.y – d / 2), size=(d, d) )) class circlesapp(App): def build(self): return widget() circlesapp().run() Output Run the program and generate touch_down event at different places. Circles will be painted at locations. Print Page Previous Next Advertisements ”;

Kivy – Text Input ”; Previous Next You often see a rectangular box being used in desktop and web applications, meant for the user to enter some text. A textbox is an essential widget in any GUI toolkit. In Kivy, the TextInput provides a control in which the user can enter and edit text. The TextInput control can be customized to receive a single line or multiline text. A certain part of the text can be selected with mouse. One can also perform full screen editing inside it with the cursor movement. The TextInput class is defined in kivy.uix.textinput module. from kivy.uix.textinput import TextInput textbox = TextInput(**kwargs) Following properties are defined in the TextInput class − allow_copy − Decides whether to allow copying the text. allow_copy is a BooleanProperty and defaults to True. background_color − Current color of the background, in (r, g, b, a) format.It is a ColorProperty and defaults to [1, 1, 1, 1] (white). border − Border used for BorderImage graphics instruction. Used with background_normal and background_active. Can be used for a custom background. It must be a list of four values: (bottom, right, top, left). border is a ListProperty and defaults to (4, 4, 4, 4). cursor − Tuple of (col, row) values indicating the current cursor position. You can set a new (col, row) if you want to move the cursor. The scrolling area will be automatically updated to ensure that the cursor is visible inside the viewport. cursor is an AliasProperty. cursor_color − Current color of the cursor, in (r, g, b, a) format. cursor_color is a ColorProperty and defaults to [1, 0, 0, 1]. cut() − Copy current selection to clipboard then delete it from TextInput. delete_selection(from_undo=False) − Delete the current text selection (if any). disabled_foreground_color − Current color of the foreground when disabled, in (r, g, b, a) format. disabled_foreground_color is a ColorProperty and defaults to [0, 0, 0, 5] (50% transparent black). font_name − Filename of the font to use. The path can be absolute or relative. Relative paths are resolved by the resource_find() function. font_name − is a StringProperty and defaults to ”Roboto”. This value is taken from Config. font_size − Font size of the text in pixels. font_size is a NumericProperty and defaults to 15 sp. foreground_color − Current color of the foreground, in (r, g, b, a) format. oreground_color is a ColorProperty and defaults to [0, 0, 0, 1] (black). halign − Horizontal alignment of the text. halign is an OptionProperty and defaults to ”auto”. Available options are : auto, left, center and right. hint_text − Hint text of the widget, shown if text is ””. hint_text a AliasProperty and defaults to ””. hint_text_color − Current color of the hint_text text, in (r, g, b, a) format, ColorProperty and defaults to [0.5, 0.5, 0.5, 1.0] (grey). input_filter − Filters the input according to the specified mode, if not None. If None, no filtering is applied. It is an ObjectProperty and defaults to None. Can be one of None, ”int” (string), or ”float” (string), or a callable. insert_text(substring, from_undo=False) − Insert new text at the current cursor position. Override this function in order to pre-process text for input validation. line_height − Height of a line. This property is automatically computed from the font_name, font_size. Changing the line_height will have no impact. line_height is a NumericProperty, read-only. line_spacing − Space taken up between the lines. line_spacing is a NumericProperty and defaults to 0. minimum_height − Minimum height of the content inside the TextInput. minimum_height is a readonly AliasProperty. multiline − If True, the widget will be able show multiple lines of text. If False, the “enter” keypress will defocus the textinput instead of adding a new line on_touch_down(touch) − Receive a touch down event. The touch parameter is object of MotionEvent class. It returns bool If True, the dispatching of the touch event will stop. If False, the event will continue to be dispatched to the rest of the widget tree. on_touch_move(touch) − Receive a touch move event. The touch is in parent coordinates. on_touch_up(touch) − Receive a touch up event. The touch is in parent coordinates. padding − Padding of the text: [padding_left, padding_top, padding_right, padding_bottom]. Padding also accepts a two argument form [padding_horizontal, padding_vertical] and a one argument form [padding]. Padding is a VariableListProperty and defaults to [6, 6, 6, 6]. password − If True, the widget will display its characters as the character set in password_mask. password_mask − Sets the character used to mask the text when password is True. password_mask is a StringProperty and defaults to ”*”. paste() − Insert text from system Clipboard into the TextInput at current cursor position. readonly − If True, the user will not be able to change the content of a textinput. select_all() − Select all of the text displayed in this TextInput. select_text(start, end) − Select a portion of text displayed in this TextInput. Parameters are start – Index of textinput.text from where to start selection and end – Index of textinput.text till which the selection should be displayed selection_color − Current color of the selection, in (r, g, b, a) format. selection_from − If a selection is in progress or complete, this property will represent the cursor index where the selection started. selection_text − Current content selection. selection_text is a StringProperty and defaults to ””, readonly. tab_width − By default, each tab will be replaced by four spaces on the text input widget. You can set a lower or higher value. tab_width is a NumericProperty and defaults to 4. text − Text of the widget. It is an AliasProperty. Usage To create a simple hello world − widget = TextInput(text=”Hello world”) If you want

Kivy – Spelling ”; Previous Next Kivy library comes with a spelling module in its “kivy.core” package. It provides abstracted access to a range of spellchecking backends as well as word suggestions. The API is inspired by the “python-enchant” library. You need to install enchant to be able to use this feature. pip3 install pyenchant Example Create an object of Spelling class (defined in “kivy.core.spelling” module) to call its various methods. For instance, the list_languages() method returns a list of supported languages. from kivy.core.spelling import Spelling s = Spelling() s.list_languages() Output It will list down all the supported languages − [”en_BW”, ”en_AU”, ”en_BZ”, ”en_GB”, ”en_JM”, ”en_DK”, ”en_HK”, ”en_GH”, ”en_US”, ”en_ZA”, ”en_ZW”, ”en_SG”, ”en_NZ”, ”en_BS”, ”en_AG”, ”en_PH”, ”en_IE”, ”en_NA”, ”en_TT”, ”en_IN”, ”en_NG”, ”en_CA”] You can select a specific language from the list for subsequent use. s.select_language(”en_US”) The check() method in the Spelling class checks if a given word is valid in the currently active language. If yes, it returns True. If the word shouldn”t be checked, returns None (e.g. for ””). If it is not a valid word in self._language, then it returns False. >>> s.check(”this”) True >>> s.check(”thes”) False You can obtain suggestions from the Spelling class for a given word. s.suggest(”wold”) [”wild”, ”wolf”, ”old”, ”wolds”, ”woald”, ”world”, ”would”, ”weld”, ”sold”, ”woad”, ”word”, ”told”, ”wood”, ”cold”, ”gold”] If you try to select a language which is not present in the list of supported language, Kivy raises the following NoSuchLangError exception − s.select_language(”Hindi”) kivy.core.spelling.NoSuchLangError: Enchant Backend: No language for “Hindi” When a language-using method is called but no language was selected prior to the call, Kivy raises “NoLanguageSelectedError”. Print Page Previous Next Advertisements ”;