Flash Adventures Blog

Adding Themed Style to Python application

2020-09-08T12:18:00.000-07:00

This post is addition to my FREE e-book: Build simple Library Manager with Python and Tkinter.

There are many things you can do to improve your python Tkinter application, either by adding new useful features or by making look and feel more user friendly.

When it comes to Tkinter GUI library, there is widespread opinion that it looks outdated and ugly when compared to other platforms like Kivy or PyQT. However, not many people have used themed styles for Tkinter and those styles give python application really modern look. You can check all available themes on Github: https://github.com/TkinterEP/ttkthemes

To install themes open your command prompt and execute:

pip install ttkthemes

You will have to add few lines and change few lines in your application.

First, you need to import newly installed library like this:

from ttkthemes import ThemedStyle

Next, in both add_book_dialog and edit_book_dialog functions, just after creating Tk window with self.tl=Tk() add style like this:

#Setting theme
style = ThemedStyle(self.tl)
style.set_theme(“plastik”)

You can experiment here with other styles like: Aquativo, Arc, Black, Blue, Breeze, Clearlooks, Elegance, Keramik, Yaru and others, see docs for full info.

Also you will have to remove styling parameters for buttons. In add_book_dialog function, instead of line upbtn = Button(...) add new line:

upbtn = ttk.Button (self.tl, text=’Add new book’, command = lambda:self.add_book(ne1, ne2, ne3, ne4))

Please also in edit_book_dialog do the same for Enter details and Delete book buttons: instead of Button add ttk.Button and delete bg and fg parameters.

Finally at the bottom of the code there is line to create root window: root = Tk(). Just below this line add code to apply plastik style to root window also:

#Setting style
style = ThemedStyle(root)
style.set_theme(“plastik”)

Style is applied and your application should look as image below.

Python exercise: Sum values from text file and print the result

2020-09-06T13:52:00.000-07:00

Python exercise
*************

Episode: 7
Level: Beginner

Let's say you have some text file and this file have different number on every line.

input.txt

Your task is to sum all values from that file and print the result.

One solution is to use list comprehensions to make a list of values and then sum the list.

Solution:

1:  with open("input.txt", "r") as tf:  
2:    numbers = [float(line) for line in tf]  
3:    total = sum(numbers)  
4:    print(total)

With numbers above what is your result?

o_o

Windows management system for python GUI explained

2020-09-04T14:46:00.003-07:00

This explanation is about previously published tutorial Build simple Books Manager application with Python and Tkinter from scratch.

Application has one main window and two context windows. Those context windows are opening whenever user clicks on 'New book' and 'Edit book' button on the left side of the main app window.

The goal here is to prevent user to click those buttons again or to select another item from book list when any of the context windows are open.

This is done using two things. First is context_open property from main Library class. At the end of the __init__ function we declare this property to be false with:

self.context_open = False

We do this because when main window is created for the first time no context window is open.

Second thing is self.config() function.

Function config is called when any of the context window opens. So what happens inside config function?

If context_open is false, we first set:

root.protocol('WM_DELETE_WINDOW', lambda:0)

to disable root windows close button. If we don't do this, when user closes root window, context window will stay open hanging from closed application, which is a major bug. You can comment out this line to see this bug in action.

We also set buttons state to disabled and with

tree.config(selectmode="none")

we don't allow user to change list selection.

If, on the other hand, context_open is true, that means we closed context window and we need to restore state parameters for buttons, than restore option for user to be able to select item from the list and with:

root.protocol('WM_DELETE_WINDOW', root.destroy)

we restore root window close button functionality.

Last line of config function acts like a switch.

self.context_open = not self.context_open

It changes value of context_open variable from False to True and vice versa.

I hope this makes clear how windows management system works.

Thanks for reading.

Build simple Books Manager application with Python and Tkinter from scratch

2020-06-07T05:18:00.006-07:00

Get free PDF now!

INTRODUCTION

Hello. This tutorial will show you in details how to build Books Manager program using python programming language.

Why this tutorial? You can easily find online basic programming tutorials. Stuff like what are variables and loops, basic language commands, how to write "hello world" program or how to build simple calculator.

However, when you finish those beginners lessons you often find yourself repeating same tutorials all over again in a not so productive cycle.

This tutorial will help you break that cycle and build something useful, a project to move ahead to more intermediate programming.

You will learn how to setup python on your computer (you can skip this part if you already have python installed), how to build user interface using tkinter, builtin python library and finally how to use sqlite database to save and retrieve data in your program.

At the end I will give you some ideas how you can expand software you have built.

CONTENTS

Setup

Application structure

GUI Layout

Adding books dialog

Edit book dialog

Working with databases

Misc functions

Final words

SETUP

For this tutorial you will need python installed on your computer. Installation is easy and quick, it takes only few minutes to complete.

I'll show you how to install python on Windows but installation is also straightforward on other systems.

In your browser open python download page and click to download latest python version. I'm using in this tutorial python version 3.7.4 but any newer version should work fine.

Run the file you just downloaded. Python install wizard will open, which is really easy to use. You only have to accept the default settings, wait until the install is finished, and you are done with setup.

If you have any problems during install, leave comment and I'll try to help you.

You can use python builtin IDLE editor or any other IDE for python you want. You can actually use any text editor, create new text file, rename it to app.py and start typing.

Now let's write some software.

APPLICATION STRUCTURE

Application consists of imports, main class Library and few lines to start the app. Here is application code structure:

from tkinter import *
from tkinter import ttk
import sqlite3
import os.path
import csv
class Library:
    def __init__(self, master):
	
	    # UI setup 
	
    def add_book_dialog(self):
        '''
        Add new book window
        '''
    def edit_book_dialog(self):
        '''
		Edit book window 		
		'''
    def add_book(self):
        '''
        Function adds book to database
        '''
    def enter_changes(self):
        '''
        Enter changes to database function (when editing book)
        '''
    def delete_book(self, name):
        '''
        Deletes chosen book from database and list
        '''
    def update_list(self):
        '''
        Updates book list from database into treeview 
        '''
    def config(self):
        '''
        Windows management function
        '''
root = Tk()
root.title("Library")
application = Library(root)
root.mainloop()

Since this is very simple application, frontend and backend functions are all in the same file. It is a good practice to separate it however.

Last 4 lines of code are defining root variable as TK, giving it a title and starting the app.

Lat's populate our functions and explain it one by one.

GUI LAYOUT

Just below UI setup comment add code for UI. Make sure your indentation is correct.

leftFrame = Frame(width=150, height=600)
leftFrame.grid(row=0, column=0, padx=10, pady=5, sticky=N)

       
self.addbtn = ttk.Button(leftFrame, text="New book", width=15, command=self.add_book_dialog)
self.addbtn.grid(row=0, column=0, sticky=W+N)

self.modbtn = ttk.Button(leftFrame, text="Edit book", width=15, command=self.edit_book_dialog)
self.modbtn.grid(row=1, column=0, sticky=W+N)

rightFrame = Frame(width=150, height=600)
rightFrame.grid(row=0, column=1, padx=0, pady=5)

self.tree = ttk.Treeview(rightFrame, show="headings", height=20, column=4, selectmode="browse")
self.tree.grid(row=0, column=1, rowspan=20, sticky=N)
self.vsb = ttk.Scrollbar(rightFrame, orient="vertical", command=self.tree.yview)
self.vsb.grid(row=0, column=2, sticky=N+S+E+W, rowspan=20)
self.tree.configure(yscrollcommand=self.vsb.set)
self.tree["columns"]=("one","two","tree","four")
self.tree.column("one", width=140)
self.tree.column("two", width=240)
self.tree.column("tree", width=100)
self.tree.column("four", width=100)
self.tree.heading("one", text='Author', anchor=N)
self.tree.heading("two", text='Title', anchor=N)
self.tree.heading("tree", text='Pages', anchor=N)
self.tree.heading("four", text='Date', anchor=N)

self.msg=Label(text='*', fg='red')
self.msg.grid(row=21, column=1)

self.context_open = False
self.update_list()

OK. We have two frame inside root, leftFrame and rightFrame. Left will hold buttons and right one will hold Treeview widget for books data.

Both leftFrame and rightFrame have some basic parameters like width, height, padding and layout position. Here we use grid layout. You can read more about layouts in Tkinter docs. Besides grid there is also pack and place layouts.

Left frame contains two buttons, one for adding new book addbtn and one for editing existing book data modbtn. You place them inside leftFrame with adding leftFrame as first parameter, you add button text, width and command, which is actually name of our function below (see application structure).

Sticky parameter inside grid layout positions buttons as we want them. Value is W-west and N-north. There are also E-east and S-south sides as you probably assumed.

Right frame has also a scrollbarr which you need to attach to treeview widget with tree.configure.

After you add treeview columns with desired text, you also have Label widget at the bottom of the window to display info. Notice how that message (msg) widget grid position row is 21, because we earlier set rowspan=20 for our treeview.

That's it for the interface, at the bottom we call update_list function to populate our tree with existing data from database and we also set context_open to False which we use to enable and disable editing of root elements when other windows are open.

ADDING BOOKS DIALOG

Let's look at the code for Add book window. We have 4 parts at the top and every one of them has label: Author, Title, Pages and Date and Entry widget. At the bottom is Button widget with attached command to execute sql query. More on that later.

def add_book_dialog(self):
    '''
    Add new book dialog 
    '''
    try:
        self.msg["text"] = ""
        self.tl = Tk()
        self.tl.title("Add book")
        self.tl.resizable(False, False)
        
        # window position
        x=root.winfo_rootx()+150
        y=root.winfo_rooty()+50
        self.tl.geometry('+%d+%d' % (x,y))


        Label(self.tl,text='Author:').grid(row=0, column=0, sticky=W)
        ne1var = StringVar()
        ne1 = Entry(self.tl, textvariable=ne1var)
        ne1.grid(row=0, column=1, sticky=W)
        ne1.insert(0,"")

        Label(self.tl,text='Title:').grid(row=1, column=0, sticky=W)
        ne2var = StringVar()
        ne2 = Entry(self.tl, textvariable=ne2var)
        ne2.grid(row=1, column=1, sticky=W)
        ne2.insert(0,"")

        Label(self.tl,text='Pages:').grid(row=2, column=0, sticky=W)
        ne3var = StringVar()
        ne3 = Entry(self.tl, textvariable=ne3var)            
        ne3.grid(row=2, column=1, sticky=W)
        ne3.insert(0,"")

        Label(self.tl,text='Date:').grid(row=3, column=0, sticky=W)
        ne4var = StringVar()
        ne4 = Entry(self.tl, textvariable=ne4var)
        ne4.grid(row=3, column=1, sticky=W)
        ne4.insert(0,"")

        # Button calls function for executing sql command      
        upbtn = Button(self.tl, bg="grey", fg="white", text= 'Add new book', command=lambda:self.add_book(ne1,ne2,ne3,ne4))
        upbtn.grid(row=5, column=0, sticky=W, pady=10, padx=10)

        self.config()
        self.tl.protocol("WM_DELETE_WINDOW", self.config)
                                
        self.tl.mainloop()
    except IndexError as e:
        self.msg["text"] = "Error while adding a book"

As you see from the code above, entire function is inside try except so we make sure everything is ok.

We set window to be resizable. With root.winfo_rootx and y we set position of our new window in relation to root window.

All 4 Label Entry widget pairs are the same except for the names of the variables. As you can see we have to use here tkinter's StringVar type and not regular python type. See docs for more info.

Button has a little style, we set background and foreground colors with bg and fg attributes.

When user clicks on the button add_book function is executed with 4 parameters, values from our previously entered widgets. Here, we don't have code to check validation, which is something to think about for some next version.

When we call config function at the bottom, this disables other buttons and only add book window is operational.

EDIT BOOK DIALOG

Edit book window is very similar to add book window. Labels and Entry widgets are also there.

This window has two buttons. Enter details button actually enters data into database and Delete book button is doing two things. First is to delete the book from the database and second one is to update data in Treeview widget.

Here is the code:

def edit_book_dialog(self):
    try:
        self.msg["text"] = " "
        conn = sqlite3.connect('data.db')
        c = conn.cursor()
        name = self.tree.item(self.tree.selection()[0])['values'][1]
        
        query = "SELECT * FROM t WHERE Title = '%s';" %name
        db_data = c.execute(query)

        for item in db_data:
            _author = item[0]
            _title = item[1]
            _pages = item[2]
            _date = item[3]
            
        self.tl = Tk()
        self.tl.title("Edit details")
        x = root.winfo_rootx()+120
        y = root.winfo_rooty()+50
        self.tl.geometry('%dx%d+%d+%d' % (380, 155, x, y))
        self.tl.resizable(False, False)

        Label(self.tl,text='Author: ').grid(row=0, column=0, sticky=E+W)
        new_author = Entry(self.tl, width=30)
        new_author.grid(row=0, column=1, sticky=W, padx=10)
        new_author.insert(0,_author)

        Label(self.tl, text='Title: ').grid(row=1, column=0,sticky=E+W)
        new_title = Entry(self.tl, width=30)
        new_title.grid(row=1, column=1, sticky=W, padx=10)
        new_title.insert(0,_title)

        Label(self.tl, text='Pages:').grid(row=2, column=0,sticky=E+W)
        new_pages = Entry(self.tl, width=30)
        new_pages.grid(row=2, column=1, sticky=W, padx=10)
        new_pages.insert(0,_pages)

        Label(self.tl, text='Date:').grid(row=3, column=0,sticky=E+W)
        new_date = Entry(self.tl, width=30)
        new_date.grid(row=3, column=1, sticky=W, padx=10)
        new_date.insert(0,_date)
                                    
        upbtn = Button(self.tl, bg="grey", fg="white", text='Enter details',
                       command=lambda:self.enter_changes(new_author,new_title,new_pages,new_date,name))
        upbtn.grid(row=4, column=0, sticky=W, padx=10, pady=10)

        dbtn = Button(self.tl, bg="grey", fg="white", text="Delete book", command=lambda:self.delete_book(name))
        dbtn.grid(row=4, column=1, sticky=W, padx=10, pady=10)

        conn.commit()
        c.close()
        
        self.config()
        self.tl.protocol("WM_DELETE_WINDOW", self.config)

        self.tl.mainloop()
        
    except IndexError as e:
        self.msg["text"] = "Select book to edit"

First part of the function is database stuff. We will discuss databases later. Adding Labels, Entry widgets and Buttons is exactly the same as in previous function. Only difference are functions which are called when buttons are clicked, enter_changes and delete_book functions.

One more thing. When user clicks edit button one item from Treeview must be selected, otherwise message is displayed: "select book to edit" and window is not opened. That's why function body is inside try except block.

WORKING WITH DATABASE

When you start the application for the first time there is no database create, so we have to add code to create if it does not exist. We do this at the beginning of Library class, just below init method and above our UI setup code. Place this code there and watch for correct indentation:

if not os.path.exists('data.db'):
    print('create database ...')
    con = sqlite3.connect("data.db")
    cur = con.cursor()
    cur.execute("CREATE TABLE t (Author,Title,Pages,Date);")
    con.commit()
    con.close()
    if os.path.exists('data.db'):
        print('done.')
    else:
        print('error creating database.')

First we check if data.db already exists. If not we create one. We use sqlite3 connect function, we must then set the cursor to execute sql query.

Our table t has 4 fields: Author, Title, Pages and Date. In the end, commit changes and close the connection. This is how you create new database to store values. Simple.

Remember edit_book_dialog function? We connect to our database there also, but first we take selected treeview item, actually its title value and compare it with appropriate row in database to return entire row. We use this line:

name = self.tree.item(self.tree.selection()[0])['values'][1]

Value [1] is second value in list (Title), since zero is first (Author). We have set in our code for user to be able to select only one item per selection, so selection value will always be [0] in selection()[0] part.

We have 3 more function to work with our database:

def add_book(self,a,b,c,d):
    '''
    Function adds book to database
    '''
    a1 = a.get()
    b1 = b.get()
    c1 = c.get()
    d1 = d.get()
    conn = sqlite3.connect('data.db')
    c = conn.cursor()
    c.execute("INSERT INTO t(Author,Title,Pages,Date) VALUES (?,?,?,?)", (a1,b1,c1,d1))
    conn.commit()                  
    c.close()
    self.msg["text"] = "Book added."
    
    self.config()
    self.update_list()
    
def enter_changes(self,new_author,new_title,new_pages,new_date,name):
    '''
    Enter changes to database function
    '''
    inAuthor = new_author.get()
    inTitle = new_title.get()
    inPages = new_pages.get()
    inDate = new_date.get()
    inName = name
    conn = sqlite3.connect('data.db')
    c = conn.cursor()
    c.execute('UPDATE t SET Author=(?), Title=(?), Pages=(?), Date=(?) WHERE Title=(?) AND Author=(?)',
              (inAuthor,inTitle,inPages,inDate,inName,inAuthor))
    conn.commit()
    c.close()
    self.msg['text'] = "Data for '%s' is changed" %name
    self.config()
    self.update_list()

def delete_book(self, name):
    '''
    Deletes chosen book from database and list
    '''
    dName = name
    conn = sqlite3.connect('data.db')
    c = conn.cursor()
    sql_query = """DELETE from t WHERE Title=(?)"""
    c.execute(sql_query, (dName,))
    conn.commit()
    c.close()
    self.msg["text"] = "Book is deleted"
    self.config()
    self.update_list()

Add book function adds new book entry to database and enter changes data come from edit book dialog, so enter changes function will change data for already existing book.

Delete book, off course deletes the book. Note that this function takes only Title as value to find database item, so if there are 2 or more books in the database with the same Title (possible situation) all will be deleted. Solution will be to check to values, for example Title and Author's name. You can do this as exercise.

MISC FUNCTIONS

We have only left with two last helper functions and application is finished. Let's see them.

def update_list(self):
    '''
    Updates book list from database into treeview 
    '''
    
    # delete current items
    x = self.tree.get_children()
    for item in x:
        self.tree.delete(item)
    # read new data
    conn = sqlite3.connect('data.db')
    c = conn.cursor()
    lst = c.execute("SELECT * FROM t ORDER BY Date(Date) desc")
    for row in lst:
        self.tree.insert("", END, text="", values=(row[0], row[1], row[2], row[3]))
    conn.commit()    
    c.close()

def config(self):
    '''
    Windows management function
    '''
    if self.context_open:
        self.addbtn.config(state=NORMAL)
        self.modbtn.config(state=NORMAL)
        self.tree.config(selectmode="browse")
        self.tl.destroy()
        # restore root close button function
        root.protocol('WM_DELETE_WINDOW', root.destroy)
    else:
        # ignore root close button
        root.protocol('WM_DELETE_WINDOW', lambda:0)
        self.addbtn.config(state=DISABLED)
        self.modbtn.config(state=DISABLED)
        self.tree.config(selectmode="none")
    self.context_open = not self.context_open

Update list function first deletes entire Treeview and then connects with database, reads the data and populates Treeview again. This is to make sure that when we change or delete a book, list is updated.

Finally config function, as I said before, disables buttons and treeview selection when other dialogs are open.

FINAL WORDS

Please notice this is one way of doing things, but it is not the only way. You task is to find your own style and way of thinking how to solve problems with programming. Programming is much more about thinking and less about typing.

Here are some things you can do to add more features to this app.

Make statistics button and display top authors by number of books.

Make statistics button and display number of pages you read per year.

Use Mathplot lib to display those data as graphs.

Make function to export data as text file or to email it to someone.

etc.

You can star and fork entire code on Github.

If you have any question about the code post comment or contact via Facebook or Twitter.

Thank you for reading.

o_o

List of all Python exercises for beginners

2020-06-06T14:01:00.002-07:00

[to be continued]

Episode 7 (beginner) : Sum values from text file and print the result

Episode 6 (beginner) : Print every other line from text file

Episode 5 (beginner) : Write Miles to Kilometres converter

Episode 4 (beginner) : Find common elements between two lists

Episode 3 (intermediate) : Rolling the dice

Episode 2 (beginner) : Find number of vowels in given string

Episode 1 (beginner) : Find and print max and min elements from list

o_o

Python exercise: Print every other line from a file

2020-05-18T13:10:00.002-07:00

Python exercise
*************

Episode: 6
Level: Beginner

Working with text files in Python is very easy and it does not require any additional library. To open a file for reading you just need to do:

f = open("somefile.txt", "w")

and for writing to a file do next:

f.write("some line")

When you are done just close the file with:

f.close()

Write Python script which prints every other line from a file.

You will need a counter and you will need to check that counter is even or odd number. Here is one of the possible solutions.


with open('somefile.txt', 'r') as f:
    counter = 0
    for line in f:
        counter += 1
        if counter % 2 == 0: 
            print(line)
f.close()

You can also write separate function to check if counter is odd or even number.

o_o

Free Password Manager - Help page

2020-05-16T15:16:00.001-07:00

Free Password Manager

This tiny application is created during Python + Tkinter practice in May 2020 while Covid-19 still ruled the world.

Application is free for personal use only. DO NOT sell it or claim it is yours.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Application does not use any encryption. I'm not responsible for any loss of data or damages.

DOWNLOAD

Password Manager usage

Generate button - it creates new random password displayed in entry widget below.

Use button - Copies generated password into first available slot of manager in first column. You can use second column to save information about where and how you use this password.

Save button - saves current password list permanently (using python shelve library).

Refresh button - updates password list and removes empty rows if there are any.

Export button - exports all passwords and info to data.csv file in same directory as program exe file.

Del button - deletes same row (you should Refresh list after that)

Copy button - copies only password from the same row, not the info text.

Author button opens default browser to this blog home page.

Help button opens default browser to this page.

TODO: Master password, proper encryption, unlimited number of slots.

If you have any suggestions on how to improve this application let me know in the comments.

Thank you.

Subscribe to receive updates via email, leave comment below and I'll send you download link.

Python exercise: Write Miles to Km Converter

2020-05-12T04:41:00.000-07:00

Python exercise
*************

Episode: 5
Level: Beginner

Single Mile is approximately 1.609 Kilometres. Write Python function which gets input from user and converters given Miles to Km. You should also check if number is greater than zero. If not, ask user for another input. If number is positive display it in Km.

If string is entered function is called again to display input once more.

If negative value is entered function is called again.

Solution:

 def converter():  
   ''' Write function which converts Miles to Km '''  
   print("Enter number in Miles: ")  
   a = input()  
   try:  
     a = float(a)  
     if a > 0:  
       print(str(a * 1.609) + " Km.")  
     else:  
       converter()  
   except:  
     converter()

 converter()

How would create tkinter UI for converter? This will be next post subject.

o_o

Python exercise : Find common elements between two lists

2020-05-02T13:58:00.000-07:00

Python exercise

Episode: 4

Level: Beginner

In this episode we will write function in Python 3 which finds and prints common elements between two lists.

Let's say we have two lists:

A = [2, 73, "Flanture", 5, "blog"]

B = ["Blog", 2, 44, "Flanture", 72]

Write function intersection with two arguments and return list with common elements as a result.

Solution:

 
def intersection(a, b):  
   common = []  

   for el in a:  
     if el in b:  
       common.append(el)  
   return common  


A = [2, 73, "Flanture", 5, "blog"]  
B = ["Blog", 2, 44, "Flanture", 72]  

result = intersection(A, B)  

print(result)  

# output : [2, 'Flanture']

Shorter version uses list comprehensions:

 
def intersection(a, b):  
   return [el for el in a if el in b]  

A = [2, 73, "Flanture", 5, "blog"]  
B = ["Blog", 2, 44, "Flanture", 72]  

print(intersection(A, B))  

# output : [2, 'Flanture']

Which version do you prefer?

P.S. Why string "blog" is not common element of lists A and B?

Python Exercise : Rolling The Dice

2020-04-28T13:47:00.000-07:00

Python exercise

Episode: 3
Level: Intermediate

What do you think how many times you have to roll the dice to get each number (1 - 6) at least two times? How about 3 times or more? Write a Python program to find out.

First we have to import random library. We are interested in randint(a, b) method since our dice can produce numbers from 1 to 6.

We need two functions, game function and tests function. Finally we need to call tests function to get the results.

Inside game function we need 2 variables, one list of same six numbers and counter. The idea is to have list like this L = [2, 2, 2, 2, 2, 2]. When we roll the dice and let's say get number 5, we will subtract 1 from fifth element in the list, so our list will look like this L = [2, 2, 2, 2, 1, 2]. We add 1 to counter.

When sum of list elements is zero, this means we got all numbers at least twice. Print counter and you are done.

Tests function will have two parameters. One to choose how many times we want every number to appear and second parameter is number of cycles. More cycles means better average number and precise result. Please be aware if your computer can handle large numbers. Start small and than increase.

OK, now let's see the code.

 import random  
 def game(rep):  
   l = [rep for i in range(6)]  
   counter = 0   
   def roll():  
     return random.randint(1, 6)  
   def check_list(lst):  
     return sum(lst) == 0  
   while(not check_list(l) ):  
     n = roll()  
     if l[n - 1] > 0:  
       l[n - 1] -= 1  
     counter += 1  
   return counter  
 def tests(g, times):  
   result = [game(g) for j in range(times)]  
   average = str(sum(result) / times)  
   print("Average number of rolls is: " + average)

Here are my results:

tests(1, 100000) > 14,7

This means if you want to get all numbers from 1 to 6, you have to roll the dice on average 14,7 times! This is very precise number since I've done 100.000 tests here.

If you want to get all numbers at least twice you need to roll the dice on average 24,1 times.

tests(2, 100000) > 24,1

tests(3, 100000) > 32,6
tests(4, 100000) > 40,7
tests(5, 100000) > 48,6
tests(6, 100000) > 56,2

As you can see there are 8 more rolls for every next level after 2.

Now you know it.

Thanks for your time.

Python exercise : Find number of vowels in given string

2020-04-26T03:56:00.000-07:00

Python exercise

**************

Episode: 2
Level: Beginner

If you have any given string like S="Hello World" write Python 3 function which returns number of vowels in that string.

S="Hello World"
Vowels are a, e, i, u, o

function totalVowels(str):
# your code here

Please comment your answer.

You can also, instead of using predefined string, let user type any string. How would you do that?

Expand solution

First solution is to use for loop.

 L = ["a","e","i","o","u"]  
 s = "Hello World"  
 s = s.lower()  
 counter = 0  
 for i in range(len(s)):  
   if s[i] in L:  
     counter += 1  
 print("Your string has "+ str(counter)+" vowels.")

A bit more elegant solution which executes faster is to use list comprehensions.

 def totalVowels(str):  
   vowels=['a','e','i','o','u']  
   counter=[l for l in str.lower() if l in vowels]  
   return len(counter)  
 print("Your string has " + str(totalVowels("Hello World")) + " vowels.")

Thank you.

Python exercise : Find and print max and min elements from given list

2020-04-25T03:38:00.000-07:00

Python exercise

Episode: 1
Level: Beginner

Find and print max and min elements from list L=[56, 12, 78, 14, 44, 85, 9] without using max() and min() functions. Use python 3 print command.

One obvious way to find min and max elements from any given list of integers is to use built in Python functions max() and min().

 L=[56, 12, 78, 14, 44, 85, 9]  
 print(max(L))  
 print(min(L))

This gives 85 and 9.

But how can you solve this problem without using those functions?

Comment your solution.

Expand solution

You can simply sort the list and print first element to get min. To get max you reverse the list and again print the first element.

 # print min value  
 L.sort()  
 print(L[0])  
 # print max value  
 L.reverse()  
 print(L[0])

I hope this exercise is useful for you if you are just starting with learning Python. Please share this post and come back again for many more exercises. If you have any questions feel free to ask.

Thank you.

Using Python Lists - Tutorial with Examples

2020-03-22T04:32:00.000-07:00

Python lists basics

List in Python is a sequence of elements.

List elements, or items, are written between square brackets. They are separated by comma.

Python List elements does not have to be of the same type.

It is perfectly OK to have lists like this:

 L = [7.9, "Hi", True, 2]

Let's quick check what type are list L elements using type() function like this:

 for i in L:  
   print(type(i))

Result is:

 <class 'float'>  
 <class 'int'>  
 <class 'bool'>  
 <class 'str'>

As you can see you can have float, integer, boolean and string, all in one list.

Python list elements have position or index which is a number greater or equal to zero.

List L element 7.9 has index 0 (zero). Element "Hi" has index 1. Element True has index 2. Element 2 has index 3.

If you want to print elements of the list along with their type add next line inside for loop:

 print(i)

The result is:

 <class 'float'>  
 7.9  
 <class 'str'>  
 Hi  
 <class 'bool'>  
 True  
 <class 'int'>  
 2

Function len()

Function len() is used when you want to find out how many elements list holds.

 print("List L has "+str(len(t))+" elements")

Run this script and you will get message: List L has 4 elements.

We are using string concatenation within print command and str() function converts integer into string.

Python Lists Slicing

Slicing [start:end] means everything between start and end, including start but not end.
When start is omitted it means from beginning of list. When end is omitted it means until end of list.

lst = [2, 14, 89, 33, 7, 43]

print("lst = [2, 14, 89, 33, 7, 43]")

print(lst[:]) -> [2, 14, 89, 33, 7, 43]
print(lst[3:]) -> [33, 7, 43]
print(lst[:4]) -> [2, 14, 89, 33]
print(lst[3:5]) -> [33, 7]

Python min and max functions

Find maximum and minimum numbers from list 66, 72, 12, 90, 43.

While this is very easy task for humans, you can tell the result right away, there are situations where you need to write a program to find the solution. Let's say numbers are not predefined but entered by user or returned from some function or calculation or you have very large collection of numbers, you will not spend 2 hours to look for min and max, right?

If you have your numbers in a list, finding min and max is straightforward:

 L = [66, 72, 12, 90, 43]  
 print(max(L))  
 print(min(L))

If you know that sort() function sorts any list in ascending order and reverse() function reverses the list in place, how would you find largest and smallest element of the list without using max and min functions?

Very easy:

 L = [66, 72, 12, 90, 43]  
 L.sort()  
 print(L[0])  
 L.reverse()  
 print(L[0])

- TO BE CONTINUED -

Free ebook - Programming and Animation Tutorials

2020-03-09T14:46:00.000-07:00

Back in 2010 I published an ebook.

It was 102 pages collection of 40+ tutorials from this blog. Mostly stuff like ActionScript coding and Flash animations. I didn't edit any of the tutorials, I just copied and paste the tutorials in Microsoft Word and converted to PDF.

I've made simple cover and decided to do some self-publishing.

I managed to sell around 150 copies of it. Not much, but effort was paid.

Posting it here for free just for historical reasons.

Even though Flash is long time dead some code can be easily converted to JavaScript, which I already did with some of the tutorials. You can find them in JavaScript section of the blog.

List of all tutorials

1. AS3 Random Star Field Animation

2. How to split ActionScript Array in two or more

3. Flash Tutorial : How to create vertigo animation

4. Simple AS3 Data Structure - part II

5. Simple AS3 Data Structure

6. Using BitmapSplit function with Tweener

7. How to start with PaperVision3D

8. AS3: Dynamic Bitmap Split Function

9. Running Flex 4 SDK and FlashDevelop

10. Energy Bar Flash Game AS3 Tutorial

11. Using Deco Tool in Flash CS4 (Vine Fill)

12. Improved Spiderweb AS3.0 Class

13. Coding spiderwebs in ActionScript3.0

14. Pyramids using AS3 drawing API

15. ActionScript3.0 Triangle Class

16. Understanding shearing using Matrix object

17. HowTo create Flash video captions using Subtitle Workshop

18. AS3.0 preloader part II : adding transparency

19. AS3.0 Flash Preloader With Moving TextField

20. Level Timer code explained

21. How To Create Flash Game Level Timer

22. Curves and Fills with AS3 Drawing API

23. Flash AS3 Star System Simulation Tutorial

24. AS3 Loading Animation Tutorial

25. AS3 Drawing API examples

26. ActionScript Random Number Generator With Blur Effect

27. Manipulating Shapes Using Bone Tool in Flash CS4

28. Create Flash Banner Using FuseKit Simple Tutorial

29. Using ActionScript Point class distance method for constant speed
moving in roadMap function

30. Maui Flash Zoom Tool

31. Flash Pixel Explosion Tutorial

32. It's never to late (shuffle AS function + more)

33. Free FLV to WMV Conversion

34. Object Movement Functions

35. Tiled Flash Backgrounds Tutorial PART II

36. Tiled Flash Backgrounds Tutorial PART I

37. Making Zoom Tool with Masking in Flash

38. Flash Tutorial : Rain Effect

39. Flash Scale Menu Explained

40. Simple Flex Effects Example

41. Math2 ActionScript functions

42. Custom Gradients Flash Tutorial

43. Code for scale menu

44. Simple Event Mechanism Flash Tutorial

Please SHARE it if you find it interesting! Thank you.

8 Most Used Python IDEs or Editors by Developers

2020-03-01T12:47:00.000-08:00

What is your favorite Python IDE/Editor?

This question is particularly important among programming beginners. Very often they wanna know what editor is used among senior developers, so they can choose the right tools for their struggle ahead.

Maybe it is about saving some time in learning only one specific IDE.

Options for Python programming environment are many.

There are advanced IDEs with introspection based code and integrated debugger like Thonny, NetBeans, PyCharm, PyStudio, Exedore for Mac OS X and others.

There are IDEs like Komodo, Aptana Studio 3, Pcode, eric with introspection based code or integrated debugger and some of them are open source, some commercial.

There are also IDEs with integrated GUI builder like BoaConstructor, Visual Python or MonkeyStudio.

Even more options are available when we talk about Python Editors. There are many multiplatform editors but also platform specific like Beaver for Unix or Notepad++ for Windows or Coda and XCode for Mac.

Most used Python IDE or Editor in 2020

Here are results for most used Python IDE or Editor by developers so far in 2020 according to poll conducted in one of the largest FB Python Developers community.

As you can see from this graph, clear winners are Visual Studio Code and PyCharm. Both of these tools are used by one third of all Python developers.

VS Code is used just slightly more than PyCharm 35% against 31%.

Other IDEs or Editors worth mentioning are Jupyter Notebook with 9%, Spyder with 8%, Sublime Text with 7%, Atom with 5%, IDLE which comes with Python 3% and VIM 2%.

So, what's yours favorite Python IDE or Editor?

*_*

Two ways to write Hello World program in Python

2020-02-28T14:49:00.000-08:00

There are two ways to write Hello World program in Python.

First way is to use print statement like this:

 print("Hello World")

When program is executed python shell will print very satisfying text message like this:

Nothing fancy.

Second Way is to use tkinter module and create basic GUI window with appropriate title like this:

 from tkinter import *  
 window = Tk()  
 window.title("Hello Python World")  
 window.mainloop()

If you do this something magical happens! All of a sudden a window appears, your eyes are opening wide and you realize: I have created something great, I'm ... programmer!

And you run this simple script over and over again, checking it works every time, and magic is still there.

Few years later, magic is still there.

Every time.

This is the first post on this blog (after 300+ of them) about Python programming language.

I think it is appropriate to start with hello world.

*_*

Simple CSS / JavaScript Random Number Generator

2020-02-20T15:36:00.000-08:00

This simple Random Number Generator has only few lines of JavaScript code and some simple CSS styling.

It can be easily modified to have any of the preferred number of ciphers. This example has 3 div tags, one for every cipher. To create Random Number Generator with 4 cipher just add another div tag and one more line of JavaScript code.

Click on Roll button to create new number.

Random Number Generator :::

Roll

HTML file is straightforward, some DIV elements and button.

 <body>  
  <div class="box">  
     <div class="eqi-container">  
      <div id="v1">0</div>  
      <div id="v2">0</div>  
      <div id="v3">0</div>  
     </div>  
  </div>      
  <div class="btn" onclick="roll()">Roll</div>  
     <script src="app.js"></script>  
 </body>

JavaScript has only one function with 3 calls to Math.random function.

 function roll() {  
     document.getElementById("v1").innerHTML = Math.floor(Math.random() * 10);  
     document.getElementById("v2").innerHTML = Math.floor(Math.random() * 10);  
     document.getElementById("v3").innerHTML = Math.floor(Math.random() * 10);      
 }

Finally CSS file for styles.

 .box {  
  width:800px;  
  margin:auto;  
 }  
 .eqi-container {  
  border: 5px solid silver;   
  display: flex;  
  justify-content: space-between;  
 }  
 .eqi-container div {  
  width: 200px;  
  height: 200px;  
  background: navy;  
  text-align: center;  
  vertical-align: middle;  
  line-height: 200px;  
  color: white;  
  font-size: 120px;   
  font-family: Verdana;  
 }  
 .btn {  
  margin-top: 30px;  
  border: 5px solid silver;  
  width: 150px;  
  height: 50px;  
  margin-left: auto;  
  margin-right: auto;  
  background: navy;  
  text-align: center;  
  vertical-align: middle;  
  line-height: 50px;  
  color: white;  
  font-size: 30px;  
  font-style: bold;   
  font-family: Verdana;   
  cursor: pointer;  
 }

*_*

Starting out with Gdevelop 5 for Game Development

2020-02-17T14:40:00.000-08:00

After some thinking I decided to go for Gdevelop 5 for my first 2D HTML game ever. Godot engine and Phaser were option too, but since no programming is required when using Gdevelop 5 and engine/editor is open source, I decided to try it.

I finished platform tutorial from their website after downloading and installing the software and my first reaction was to re-skin it but then I realized that I want something more casual and maybe in the long run suitable for Android export.

Using Gdevelop 5 for Game Development

Using Paint.net I created few simple graphics (different color balls, some walls and gradient background) and made one level of Pass the ball game. Goal is to pass to ball to the other side of the screen with single direction movement with hitting moving walls.

Adding events was really easy and fun. Just click Add Condition button and start typing in search field for appropriate action and right event would pop up. Then add action like add permanent force or stop the ball or change X position, hit run button and I'm playing right away.

You can't get simpler than that.

After a while I decided to make things better and I downloaded from OpenGameArt some cars and trains sprites and some sand background. Pass the ball became Car Against Trains.

Here is the look of first two levels.

Playing difficulty should always gradually grow, so first two levels are easy. I have two different trains on first and second level. Brown train goes from right to left and green train goes in opposite direction. They have same speed. First level is trivial, second is just a little bit challenging.

Player can move left and right, can stop the car and launch it. Once the car moves up, player can't do anything with it. Car will hit the train and go back to start or pass to the other side and go to next level.

Adding Events (Conditions and Actions) in Gdevelop5

There are several events on every level:

- Moving trains at the beginning of the Scene.

- Change trains position on screen out.

- Move Car on key press.

- Car / Trains collision.

- Level finish event.

- Stop the Car on boundaries.

First, let's introduce game objects.

As you can see, Car object and all Trains are bold and italic which means they are set as global objects, they will appear on every level. Background will change from level to level and LevelText will also change. OK, now the events.

Move trains / set scene variables

Each Train gets own direction, GTrain moves to the right with speed 150 px, KTrain to the left with same speed. I have also train with speed 75 on other levels to make things more interesting and I have static Train as obstacle, I'll maybe remove that later when I add more graphic elements.

Scene variable CarMoving is set to 0. This will be used in other events.

Change trains position on screen out

This is simple event. Move (reuse) train when it is out of screen boundaries.

Move car on key press

I'm using CarMoving variable here to prevent user to move the Car once it started going in vertical direction. This is desired choice. I could have done it differently but the game would be much complicated, and I wanted something simpler to begin with.

Car / Trains collisions

This will change later when collision animation is added. Right now Car just re-appears on start position. Again CarMoving variable needs to be set to 0 again.

Level is finished

When user / player "wins" the level, avoid all trains and get to the other side of the screen, scene changes.

Moving the Car

If key is pressed and CarMoving is 0 means Car is still in horizontal movement only. Down key stops the Car, right moves it to the right, left moves it to the left, obviously. This could be done without Down key action also.

Stop Car on screen boundaries

Finally last event is stopping the Car on screen boundaries.

Again, very simple and straightforward to add events, and fun.

Next are levels 3 and 4. Here is how they look.

Now these are more difficult. Blue train on level 3 has half the speed of green and brown trains. Red train on level 4 is static. It acts as a shield, sort of narrowing playing field for the Car.

I was thinking of other options too. Should the car be able to move left and right after launching. Can player stop the car once start moving left and right.

For now there is no animation for the Car. Also background will improve by adding elements like trees, bushes and stones. Music and sounds will be added.

There are several improvements I'm considering. One is water field which slows down the Car and Ice field which speeds it up. How about a tunnel where Car can enter on the right and exit on the left side of the screen. Also it can go over the train. Possibilities are endless really.

I hope you enjoyed this Introduction and will follow me on my journey.

Please share this post if you find it interesting.

Thanks for reading.

*_*

Game Engine for first 2D HTML Game

2020-02-04T02:29:00.000-08:00

It is expected that Global Game Market Revenue in 2020 will be around $160Bn with projected growth in 2021. and 2022.

This means it was never better time to start with game development.

But how to start if you are solo developer?

Game Engine for first 2D HTML Game

Recently I asked on Twitter "What would you recommend to someone who wants to make 2D HTML game as a beginner?

Here are voting results:

Clear winner here is Godot engine, however only 3 options were available and maybe if there were more, maybe the end result would be different.

Here are some of the comments I received.

@indiedevnet wrote:

IMO Phaser will give you a solid appreciation for what you need to build for any game, whereas something like GameMaker or Godot abstract a bit. But maybe you don't want to make the lower level stuff, in which case GameMaker is great for beginners.

@eric81766 said:

I'd prefer Godot to Phaser in general because it seems to me that learning Godot is a bit more versatile. For a first game: whatever takes best advantage of what you already know since the "making a game" part is going to require a lot of thinking/learning.

and @qubet_b commented:

I recommend prototyping in RPG Maker MV and making your official product in Game Maker Studio 2.

As I said, there were only 3 options to Poll question, but so many engines available. After some searching online there was IMO one other candidate not mentioned here which is also very good option for first 2D HTML game if you are solo developer - Gdevelop 5.

I'm not going into details here but I need to mention that after only 2 hours of working with Gdevelop5 I have simple working HTML game with 5 levels, ready to be played.

That means I guess I'll spend some more time on this engine and maybe I can produce few games and tutorials which I will post here.

What would You recommend as first engine to use?

Thank you.

*_*

More about drawing on Canvas using HTML sliders and JavaScript

2020-01-24T14:29:00.000-08:00

In previous post Simple reactive JavaScript sliders you could see how to attach listener to HTML sliders and how to use JavaScript to draw on Canvas. By moving the sliders shape is changing dynamically. This is very basic example.

One slightly complicated example is to generate circles on random positions. Below is the code.

Drawing on Canvas using HTML sliders and JavaScript

Function Circle has 3 parameters, x is x position of the circle, y is y position of the circle on Canvas and z is radius, current Radius slider value. Both x and y are randomly chosen using Math.random JavaScript function.

How this works? Every time slider changes position onSliderChange function is called and if user moves slider to the right Circle object is generated and pushed to array. Then all circles are drawn on Canvas using drawCircles function. If user moves slider to the left elements from array are deleted using pop() function. Simple.

Code is separated into functions in a way that it is very easy to instead of drawCircles one can write drawRectangle or drawAnyShape etc.

This opens up possibility to write wide range of generators like background generators or some digital art etc.

Styles.css file is the same as in previous tutorial so I'll skip that.

Here are other two files.

index.html

 <!DOCTYPE html>  
 <html>  
   
   <head>  
     <meta charset="utf-8">  
     <title>Circles example</title>  
         <link rel="stylesheet" type="text/css" href="styles.css">  
   </head>  
   <body>  
   <div id="menu" style="width:160px;float:left;">  
   <p>  
     Circles: <input type="range" class="styled-input" id="_cir" value="0" min="0" max="20" step="1"><br>  
     Radius: <input type="range" class="styled-input" id="_rad" value="20" min="20" max="200" step="10"><br>  
         <br>  
   </p>  
   </div>  
   <div id="content" style="background-color:#EEEEEE;float:left;">  
   <canvas id="myCanvas" width="600" height="500" style="border:1px solid #d3d3d3;">  
   Your browser does not support the HTML5 canvas tag.</canvas>  
   </div>  
     <script src="app.js"></script>  
   </body>  
 </html>

app.js

 "use strict";  
 var currCanvas = "myCanvas";  
   
 var arr = [];  
   
 var slider_cir = document.getElementById('_cir');  
 slider_cir.addEventListener('input', onSliderChange);  
   
 var slider_rad = document.getElementById('_rad');  
 slider_rad.addEventListener('input', onSliderChange);  
   
 function Circle(x, y, z) {  
   this.x = x;  
   this.y = y;  
     this.z = z;  
 }  
   
 function init() {  
     // starting position  
     slider_cir.value = 0;  
     slider_rad.value = 20;  
 }  
   
 function addRandomCircle() {  
     // function adds random circle to arr   
     var p = new Circle(Math.floor(Math.random()*600), Math.floor(Math.random()*500), slider_rad.value);  
     // console.log(p);  
     return p;  
 }  
   
 function drawCircles() {  
   
     var ptn;  
     for (ptn = 0; ptn < arr.length; ptn++) {  
         // draw circles one by one  
         var c = document.getElementById("myCanvas"),  
         ctx = c.getContext("2d");  
         ctx.beginPath();  
         ctx.lineWidth = 3;  
         ctx.strokeStyle = 'black';          
         ctx.arc(arr[ptn].x, arr[ptn].y, arr[ptn].z, 0, 2 * Math.PI);  
         ctx.stroke();  
     }            
 }  
   
 function onSliderChange() {  
       
     // update canvas on any slider change  
   var c = document.getElementById("myCanvas"),  
   ctx = c.getContext("2d");  
     ctx.clearRect(0, 0, 600, 500);      
   
     var l = arr.length;  
       
     if (slider_cir.value > l) {  
         // add new circles  
         var diff = slider_cir.value - l;  
           
         var i;  
         for (i=0; i<diff; i++) {  
             var p = addRandomCircle();  
             arr.push(p);  
         }  
           
     } else if (slider_cir.value < l) {  
                 // remove circles   
                 var diff = l - slider_cir.value;  
                 var i;  
                 for (i=0; i<diff; i++) {  
                     arr.pop();  
                 }  
             }  
     drawCircles();  
       
 }  
   
 init();

*_* - If you like this post, please share it. Thanx.

Simple Reactive JavaScript sliders and drawing on Canvas

2020-01-22T14:40:00.001-08:00

For one planned future project I need to create reactive sliders. When user moves any of the sliders (in this example I have six of them) Canvas drawing is updated on any change.

Simple solution is to attach one function, let's call it onSliderChange to every slider and call this function on input like this:

var slider_ax = document.getElementById('ax');
slider_ax.addEventListener('input', onSliderChange);

-- slider_ax is variable for first slider
-- ax is id of slider input html element
-- onSliderChange is the name of the function

Every slider gets this function.

Now function onSliderChange will first clear the Canvas and then call makeTriangle function. In this example, makeTriangle consist of 3 drawLine functions for every line in the triangle. This shape is used only for presentation purposes, but it can be really anything.

Here is how it looks.

note: Sliders values can change with keyboard also, using tab and left and right arrow and shift tab to go up.

index.html

 <!DOCTYPE html>  
 <html>  
   
   <head>  
     <meta charset="utf-8">  
     <title>Sliders example</title>  
         <link rel="stylesheet" type="text/css" href="styles.css">  
   </head>  
   <body>  
   <div id="menu" style="width:160px;float:left;">  
   <p>  
     Ax: <input type="range" class="styled-input" id="ax" value="300" min="0" max="600" step="20"><br>  
     Ay: <input type="range" class="styled-input" id="ay" value="20" min="0" max="500" step="20"><br>  
     Bx: <input type="range" class="styled-input" id="bx" value="100" min="0" max="600" step="20"><br>  
     By: <input type="range" class="styled-input" id="by" value="50" min="0" max="500" step="20"><br>  
     Cx: <input type="range" class="styled-input" id="cx" value="400" min="0" max="600" step="20"><br>  
         Cy: <input type="range" class="styled-input" id="cy" value="500" min="0" max="500" step="20"><br>  
         <br>  
   </p>  
   </div>  
   <div id="content" style="background-color:#EEEEEE;float:left;">  
   <canvas id="myCanvas" width="600" height="500" style="border:1px solid #d3d3d3;">  
   Your browser does not support the HTML5 canvas tag.</canvas>  
   </div>  
     <script src="app.js"></script>  
   </body>  
 </html>

styles.css

 p {  
     font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif;   
     font-size:11px;   
     font-weight:700;  
     width:50px;  
 }  
    
 .styled-input {   
     -webkit-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;   
     -moz-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;   
     box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;   
     background-color:#EEE;   
     border-radius:0;   
     -webkit-border-radius:0;   
     -moz-border-radius:0;   
     border:1px solid #999;   
     color:#666;   
     font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif;   
     font-size:11px;   
     font-weight:700;   
     padding:1px 3px;   
     height:20px   
 }

app.js

 "use strict";  
 var currCanvas = "myCanvas";  
   
 var slider_ax = document.getElementById('ax');  
 slider_ax.addEventListener('input', onSliderChange);  
   
 var slider_ay = document.getElementById('ay');  
 slider_ay.addEventListener('input', onSliderChange);  
   
 var slider_bx = document.getElementById('bx');  
 slider_bx.addEventListener('input', onSliderChange);  
   
 var slider_by = document.getElementById('by');  
 slider_by.addEventListener('input', onSliderChange);  
   
 var slider_cx = document.getElementById('cx');  
 slider_cx.addEventListener('input', onSliderChange);  
   
 var slider_cy = document.getElementById('cy');  
 slider_cy.addEventListener('input', onSliderChange);  
   
 function drawLine(x1, y1, x2, y2, ccanvas) {  
   var ctx = document.getElementById(ccanvas).getContext("2d");  
   ctx.beginPath();  
   ctx.moveTo(x1, y1);  
   ctx.lineTo(x2, y2);    
   ctx.lineWidth = 3;  
   ctx.strokeStyle = 'black';  
   ctx.stroke();  
 }  
   
 function makeTriangle(ax, ay, bx, by, cx, cy, ccanvas) {  
     drawLine(ax, ay, bx, by, ccanvas);  
     drawLine(bx, by, cx, cy, ccanvas);  
     drawLine(cx, cy, ax, ay, ccanvas);  
 }  
   
 function onSliderChange() {  
     // update canvas on any slider change  
   var c = document.getElementById("myCanvas"),  
   ctx = c.getContext("2d");  
     ctx.clearRect(0, 0, 600, 500);      
     makeTriangle(slider_ax.value, slider_ay.value, slider_bx.value, slider_by.value, slider_cx.value, slider_cy.value, currCanvas);  
 }  
   
 makeTriangle(slider_ax.value, slider_ay.value, slider_bx.value, slider_by.value, slider_cx.value, slider_cy.value, currCanvas);

*_*

Game Development Screenshot Saturday Episode 1

2020-01-19T14:18:00.000-08:00

Hello and welcome to my blog if you are first time visitor.

Here are my TOP 5 Indie Game Development Screenshots for this week.

For more cool stuff please follow me on Twitter >> FLANTURE

5. Minute of Islands by @minuteofislands

4. BattleTronik by @fracteed made with Godot engine.

3. Early morning screenshot by @claudio_tulio made with Unity

2. This game is also being created with Unity by @thebigfatjay and it looks great!

1. My favorite screenshot this week is from game Vernal Edge by @hymynameismatt

I hope you liked these shots from work in progress games.

Once again, follow me on twitter >> FLANTURE and more screenshots next week.

Learn HTML - Quiz for beginners

2019-10-01T15:12:00.000-07:00

Take this short quiz for beginners to start learning about HTML. Hover for answer.

Question 1: The head element is placed between which two tags?

body and script
body and h1
html and body
h1 and h3

Answer

Question 2: Which tag does not describe metadata?

meta
script
title
data

Answer

Question 3: Which element does not have end tag?

html
body
script
none of the above

Answer

Question 4: There is only one valid comment among next answers, which one?

<!- Valid comment ->
<! Valid comment >
<!-- Valid comment ->

Answer

Question 5: What tag is used to display smallest heading?

Answer

This is just a start. Quiz will be regularly updated. Stay tuned.

How many answers did you get correctly out of 5?

*_*

Game of Thrones Final Season CSS Intro Animation

2019-03-21T14:59:00.000-07:00

While waiting for White Walkers to kill us all, I've decided to play a little bit more with CSS animations.

This simple text intro have 4 keyframes where letter-spacing is changing, creating interesting movie-like effect. Title text is fading in from black to white and subtitle appears at the end giving the animation dramatic ending, which is expected from this kind of show.

In this case animation lasts for 3 seconds, feel free to play with parameters as you like.

Here is the code and demo:

 
<!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
      <title>Game of Thrones intro</title>  
      <style>  
      * {  
           padding: 0;  
           margin: 0;  
           font-family: sans-serif;  
      }  
      body {  
           background: #000;  
      }  
      .container {  
           text-align: center;  
           position: absolute;  
           top: 50%;  
           left: 50%;  
           transform: translate(-50%,-50%);  
      }  
      .container span {  
           text-transform: uppercase;  
           display: block;  
      }  
      .text_title {  
           color: white;  
           font-size: 60px;  
           font-weight: 700;  
           letter-spacing: 8px;  
           margin-bottom: 20px;  
           background: black;  
           position: relative;  
           animation: text 3s 1;  
      }  
      .text_subtitle {  
           font-size: 30px;  
           color: #5DADE2;  
      }  
      @keyframes text {  
           0% {  
                color: black;  
                margin-bottom: -40px;  
           }  
           25% {  
                letter-spacing: 25px;  
                margin-bottom: -40px;  
           }  
           75% {  
                letter-spacing: 5px;  
                margin-bottom: -40px;  
           }  
           95% {  
                letter-spacing: 8px;  
           }  
      }       
      </style>  
  </head>  
 <body>  
  <div class="container">  
   <span class="text_title">Game of Thrones</span>  
      <span class="text_subtitle">final season</span>  
  </div>  
 </body>  
 </html>

The Spring is coming! Happy Coding :) *_*

How To use Google Fonts in your projects

2019-03-01T08:25:00.000-08:00

This is tutorial for beginners in web design but also a self reminder.

If you want to build a website sometimes it is not enough to have only fonts already available on user computer. Those fonts are limited in number and more generic. Best way to include more fonts and make design more fun is to use fonts hosted on external server like Google Fonts.

Navigate to fonts.google.com and select the fonts you want. Currently there are 915 font families hosted on this server and it is likely this number will grow. Search for the fonts you want and select them by clicking on red circle with plus sign on top right side of the font.

When you are done selecting fonts, click on black rectangle at the bottom of the page.

Then select @import option and copy everything between style tag.

Paste selected text into your css file and you are done. Doing this you won't need to worry if users have fonts you wanna use, unless Google shuts down this service when company collapses in few hundred years.

*_*