Interaction with Graphics Also displaying GIFs. Text Output on the graphics window There is a class called Text which will put the message on the graphics.

Slides:



Advertisements
Similar presentations
Getting Input in Python Assumes assignment statement, typecasts.
Advertisements

EasyGUI “Probably the Easiest GUI in the world”. Assumptions (Teachers’ Notes) This resources sets out an introduction to using easyGUI and Python
Python Programming: An Introduction to Computer Science
Graphics Shapes. Setup for using graphics You have to import the graphics library You can use either “import graphics” or “from graphics import *” or.
Chapter 2 Programming by Example. A Holistic Perspective Three sections separated by blank lines. Program comment File: FileName.java
1 Python Programming: An Introduction to Computer Science Chapter 3 Objects and Graphics.
Chapter 4 Objects and Graphics
Python: Graphics
Microsoft Visual Basic 2012 CHAPTER TWO Program and Graphical User Interface Design.
CSC 110 Objects and Graphics [Reading: chapter 4] CSC 110 E 1.
Chapter 5 Graphics.  We’ve been doing command line programming, but now it’s time to try GUI programming—programming in a graphical user interface, using.
Java Programming, 3e Concepts and Techniques Chapter 3 Section 65 – Manipulating Data Using Methods – Java Applet.
C# B 1 CSC 298 Writing a C# application. C# B 2 A first C# application // Display Hello, world on the screen public class HelloWorld { public static void.
Visual BasicC++ Diane Zak. Microsoft © Small (But Powerful) Basic Presented by Diane Zak.
Mastering Char to ASCII AND DOING MORE RELATED STRING MANIPULATION Why VB.Net ?  The Language resembles Pseudocode - good for teaching and learning fundamentals.
Visual Basic 2005 CHAPTER 2 Program and Graphical User Interface Design.
Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 5 Working with Images Starting Out with Games & Graphics in.
Chapter 2 - More Controls More controls – Text boxes - used for user input – Frames - containers to group items – check boxes - user select an option -
Engage! Android User Input, Variables,
1. S:\Courses\CSSE\ibrahima\CS2340\Notes Folder Section1 Folder Section2 2.
Intro Python: Variables, Indexing, Numbers, Strings.
Chapter 2 P. 1 Introducing more controls (on the Toolbox) (Fig. 2.1) - Text box - Frame - Option button - Check box - Image Example P. 44 Figure 2.2 Message.
Variables When programming it is often necessary to store a value for use later on in the program. A variable is a label given to a location in memory.
Dialog Boxes.
Python Programming, 1/e1 Programming Thinking and Method (5a) Zhao Hai 赵海 Department of Computer Science and Engineering Shanghai Jiao Tong University.
McGraw-Hill/Irwin Programming in Visual Basic 6.0 © 2002 The McGraw-Hill Companies, Inc. All rights reserved. Update Edition Chapter 2 More Controls.
Copyright © 2015 Pearson Education, Inc. Publishing as Pearson Addison-Wesley C H A P T E R 13 GUI Programming.
CSC 1010 Programming for All Lecture 7 Input, Output & Graphics.
Xiaojuan Cai Computational Thinking 1 Lecture 5 Objects and Graphics Xiaojuan Cai (蔡小娟) Fall, 2015.
Web Development Lecture # 09 Text Formatting in HTML.
Microsoft Visual Basic 2010 CHAPTER TWO Program and Graphical User Interface Design.
1 Printing in Python Every program needs to do some output This is usually to the screen (shell window) Later we’ll see graphics windows and external files.
Animation II: Revenge of the Clones CSC 161: The Art of Programming Prof. Henry Kautz 10/16/2009.
Documenting a function. Documenting a function definition We have a template for information that we need you to put at the top of each function - if.
1 Project 3 String Methods. Project 3: String Methods Write a program to do the following string manipulations: Prompt the user to enter a phrase and.
Introduction to Programming Python Lab 5: Strings and Output 05 February PythonLab5 lecture slides.ppt Ping Brennan
Introduction to Programming
Python Programming, 2/e1 Python Programming: An Introduction to Computer Science Chapter 4 Objects and Graphics.
5. COMPUTING WITH GRAPHICS OBJECTS Dennis Y. W. Liu and Rocky K. C. Chang October 8, 2015 (Adapted from John Zelle’s slides)
CS 115 Lecture 7 Graphics – coordinate systems, Text, Entry, aliases Taken from notes by Dr. Neil Moore.
Vahé Karamian Python Programming CS-110 CHAPTER 4 Objects and Graphics.
CS 115 Lecture 6 Graphics Taken from notes by Dr. Neil Moore.
JavaScript: A short introduction Joseph Lee Created by Joseph Lee.
Python Programming, 2/e1 Python Programming: An Introduction to Computer Science Chapter 4 Objects and Graphics Killer cars.
 You won’t write a single line of program code.  Instead, you’ll use visual programming techniques.  Visual Studio processes your actions (such as mouse.
ENGINEERING 1D04 Tutorial 4. What are we doing today? Focus Functions Scope of Variables Returning Values Objects Graphics library Aliasing Events Mouse.
Introduction to Programming
Graphics Taken from notes by Dr. Neil Moore & Dr. Debby Keen
Development Environment
GUI in Python Ismail Abumuhfouz.
Python Programming: An Introduction to Computer Science
Introduction to Programming
Topics Graphical User Interfaces Using the tkinter Module
Python Programming: An Introduction to Computer Science
Data Types and Conversions, Input from the Keyboard
Python Programming: An Introduction to Computer Science
Section 64 – Manipulating Data Using Methods – Java Swing
Python: Simple Graphics and Event-driven Programming
Graphics Part I Taken from notes by Dr. Neil Moore
Graphics Part I Taken from notes by Dr. Neil Moore
CS 115 Lecture Graphics II – coordinate systems, Text, Entry, aliases
Use proper case (ie Caps for the beginnings of words)
CS 115 Lecture Graphics II – coordinate systems, Text, Entry, aliases
Introduction to TouchDevelop
Graphics Part I Taken from notes by Dr. Neil Moore
Topics Graphical User Interfaces Using the tkinter Module
Class 7 coordinates: pixel and with setCoords aspect ratio Rectangle
Introduction to Python
Class 8 setCoords Oval move Line cloning vs copying getMouse, getKey
Presentation transcript:

Interaction with Graphics Also displaying GIFs

Text Output on the graphics window There is a class called Text which will put the message on the graphics window msg = Text(Point(10, 200), “Hello”) msg.draw(win) Will put the word Hello on the graphics window, centered horizontally at the given point. You can use setSize to change the font size, setStyle to change to “bold” or “italic”, and setFace to change the font. You can use setText to change the message displayed. The 2 nd argument to Text must be a String and ONE string!! If you want to output numbers you will have to use typecasting and concatenation

Interaction also implies input! How does the program get input from the user using the graphics window? Using getMouse to let the user indicate a location on the window Using a text Entry to let the user enter text from the keyboard

getMouse() getMouse is a method associated with the GraphWin class, so you call it using a window object, like win. win.getMouse() It does return a value, specifically a Point object, indicating where the user clicked The use we have had for getMouse, to act as a pause at the end of the program, ignores this return value. If you want to save the point for later use, you would store it in a variable User_point = win.getMouse()

Using getMouse() msg = Text(Point(50, 50),”click a point”) msg.draw(win) userPt = win.getMouse() circ = Circle (userPt, 25) circ.draw(win) This will draw a small circle around the point the user clicked. Note that the constructor Point does not have to be called when the argument is already a point! Do not write “circ = Circle(Point(userPt),25)”

How to do text Input from the graphics window You should prompt the user on the graphics window just as you did on the Shell screen when not doing graphics. This needs a Text object Then create an Entry object (which allows the user to type in a box) Arguments: Point for box to center on, integer size of box Put some text into the Entry object (using setText) Use a getMouse to pause until the user clicks (after they type) Use getText to get the user input from the Entry object (will be string) Then process the string input as desired

Using text Entry prompt = Text (Point(150, 200), “Enter a number”) prompt.draw(win) user_input = Entry(Point(150, 150), 5) # box big enough for 5 chars user_input.setText(“ “) # 5 spaces, could also be a default value user_input.draw(win) win.getMouse() # must be there! Or getText will not work number = float(user_input.getText())

How to display a GIF on the graphics window Uses the Image class pic = Image(Point(100, 100), “cat.gif”) Assumes there is a file called cat.gif in the same folder as the source file pic will be an image object which can be drawn on the graphics window centered at the point give pic.draw(win) Many other methods exist to manipulate the image pixel by pixel getPixel, setPixel, save HINT: you have to save your source code (.py) before these methods will work. The interpreter has to have somewhere to look for the gif file