How do you change Kivy’s theme colour?

What if you are not happy with Kivy’s default blue theme? What if you want the accent colour to be red or green? Do you have to change the look of each control then? No, you don’t.

image

It turns out to be really easy, actually. Open your favourite imaging software (I use Paint.NET and Photoshop) and open <Kivy’s installation folder>/kivy/kivy/data/images/defaulttheme-0.png

This is the default look:

image

Just change the Hue of the image defaulttheme-0.png:

image

Save it and you have changed Kivy’s default look:

image 

image

That’s it!

Kivy rulz: ClockWidget: Final version

The code of the final version of the multi-touch enabled ClockWidget:

Kivy ClockWidget on a Lenovo X220T

ClockWidget.py:

import kivy
kivy.require('1.2.0')

import time

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty, StringProperty, NumericProperty
from kivy.clock import Clock
from kivy.uix.scatter import Scatter
from kivy.config import Config
Config.set('modules', 'touchring', '')

Weekday = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

def getDayOfWeek(dateString):
 t1 = time.strptime(dateString,"%m/%d/%Y")
 t2 = time.mktime(t1)
 return(time.localtime(t2)[6])

class ClockWidget(Scatter):
 uxTime = StringProperty('')
 uxSeconds = NumericProperty(0)
 uxSecondsStr = StringProperty('')
 uxDate = StringProperty('')
 uxDay = StringProperty('')

def update(self, dt):
 self.uxTime = time.strftime(&quot;%H:%M&quot;, time.localtime())
 self.uxSecondsStr = time.strftime(&quot;%S&quot;, time.localtime())
 self.uxSeconds = int(self.uxSecondsStr)
 self.uxDate = time.strftime("%d %B %Y", time.localtime())
 self.uxDay = Weekday[getDayOfWeek(time.strftime("%m/%d/%Y", time.localtime()))]

class ClockWidgetApp(App):
 def build(self):
    clockWidget = ClockWidget()
    Clock.schedule_interval(clockWidget.update, 1)
    return clockWidget

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

ClockWidget.kv:

#:kivy 1.0

<ClockWidget>:
   scale_max: 100
   size_hint: None, None
   size: (512, 512)
   pos: (50, 50)

FloatLayout:
   canvas:
   Color:
      rgb: 1, 1, 1
   Ellipse:
      size: 150, 150
      pos: 430, 240

   Color:
      rgb: 0, 0, 1
   Ellipse:
      size: 150, 150
      angle_start: 0
      angle_end: root.uxSeconds * 6
      pos: 430, 240

   Color:
      rgb: 0, 0, 0

   Ellipse:
      size: 130, 130
      pos: 440, 250

   Label:
      text: root.uxSecondsStr
      font_size: 70
      pos: 455, 260

   FloatLayout:
      size: root.width, root.height

   Label:
      id: time_label
      text: root.uxTime
      font_size: 100
      pos: 0, 50

   Label:
      id: date_label
      text: root.uxDate
      font_size: 30
      pos: 40, -20

   Label:
      id: day_label
      text: root.uxDay
      font_size: 30
      pos: 160, -60

Kivy rulz: ClockWidget: First version

kivy-logo-black-512

A couple of days ago, I discovered Kivy. It allows for rapid development of applications that make use of innovative user interfaces, such as multi-touch applications.

Some facts about Kivy:

  • based on Python
  • cross-platform: Windows, Mac OS X, Linux, Android, iOS
  • 100% free to use (LGPL v3 license)
  • GPU accelerated (OpenGL ES 2.0)
  • stable
  • well documented
  • damn fast

Let’s see how easy it is to build something.

We are going to build a ClockWidget. The design is based on the MoonyDesk digital clock, which you can find on CodePlex:

moonydesk

This is the result:

First version of the Kivy ClockWidget

I was able to build this in under four hours, although I am new to Kivy and had to go a lot through the documentation while I was implementing this.

In a following blog post we will add multi-touch behavior, so we are able to move, resize and rotate the widget. That will be a lot more fun.

Next time I will share the code with you.