Projecdossier Klaas - De.meester 2010 2011

Bundle
of projects
Project presented by Klaas De Meester In order to obtain the Bachelors degree in New Media and Communication Technology For the academic year of 2010-2011
Klaas De Meester
Bundle of projects
2010/2011
1 Foreword
1.1 Who am I?
Im Klaas De Meester, student New Media and Communication technology. I started my course in 2008. I choose to do nMCT1 because Ive always been interested in working on computers and learning new things. This interest started in high school, where I did Accounting and Informatics. Last year I got interested in Web technology, I saw that you could do a lot with it. Theres a big future in making web applications. This is why Ive chosen the specialisation Web technology in my last year. I always liked adventures; it started with the scouts, which I attended from my 7 years. Thats why I did my internship at the Centre for Applied Research in Educational Technology at the University of Cambridge. I learned a lot in CARET2, not only how it happens in the business world, but how important colleagues are and the way they help and support you to reach your target. I also learned how people can miss you, friends, family and my girlfriend. If you want to know more about me, you can find more background information by going on my website (L1)3. If you want to ask questions on what I did or other things, dont hesitate to contact me through my website. I will be happy to answer your questions.

nMCT: New Media and Communication Technologies CARET: Centre for Applied Research in Educational Technology 3 http://www.klaasdm.be/
1 2
Chapter:Foreword
Klaas De Meester
Bundle of projects
2010/2011
1.2 Caret
CARET, the Centre for Applied Research in Educational Technology is an innovation unit that focuses on learning and research technologies. They work together with the University of Cambridge and have a wide variety of projects currently running from developing a learning platform (Sakai4) to Collection Space (A Collections Management Systems to cover every activity and process which a museum undertakes upon the objects in its care). Its an origination that is committed to the principles of open source software and the development of robust applications. For more information you can always visit their webpage(l2)5.

4 5
Sakai: Open Source Collaboration and learning environment http://www.caret.cam.ac.uk/page/home
Chapter:Foreword
II
Klaas De Meester
Bundle of projects
2010/2011
1.3 Usage of this document

This document describes what Ive done during the 3 months internship in CARET. It will also help the people who will work on the projects I started. It explains what they will need to install on their Macs, and how they can use it. I also explain which function the programs have. While reading you will find references. The explanation of the references is placed in the footnote of the page. References to a link are defined as an L with a number between brackets. E.g. (l#).
Chapter:Foreword
III
Klaas De Meester
Bundle of projects
2010/2011
1.4 Special thanks

- To Bert Pareyn who assisted me throughout my internship. - To Jill Vandendriesche for making this international internship at CARET possible. - To Dieter Depreester, Olivier Janssens and Bert Pareyn for reading and correcting my reports and the project documentation. - To Bert Pareyn for finding us accommodation to live. - To the CARET OPS team for providing us with Macs and all the technical help we needed. - To Stephanie Sanders for being our contact person. -My parents, family and friends who supported me. -Everyone at caret to make our stay very enjoyable.
Chapter:Foreword
IV
Klaas De Meester
Bundle of projects
2010/2011
2 Glossary
- Ajax: a group of interrelated web development methods used on the client-side to create interactive web applications. -API: Application Programming Interface, is a particular set of rules and specifications that software programs can follow to communicate with each other. In Pigeon we used XML and JSON - CARET: Centre for Applied Research in Educational Technology -CSV: Comma Separated Values -DIV: A generic container for blocks of content, such as images and paragraphs of text. -DOM: Document Object Model - Dropbox : Is a file hosting service, which uses cloud computing to enable users to store and share files and folders with others across the Internet using file synchronization. -HTTP: Hypertext Transfer Protocol - Humancomputer interaction (HCI): The study of interaction between people (users) and computers. It is often regarded as the intersection of computer science, behavioral sciences, design and several other fields. - Interface: The way people can control the application - JavaScript: Programming language based on ECMAScript - JSON: JavaScript Object Nation, a lightweight data-interchange format
Chapter:Glossary
VI
Klaas De Meester -Mac OS X:
Bundle of projects
2010/2011
A series of Unix-based operating systems and graphical user interfaces developed by Apple - nMCT: New Media and Communication Technologies - OAuth (Open Authentication): Is an open standard for authentication. It allows users to share their private resources (e.g. photos, videos, contact lists) stored on one site with another site without having to hand out their credentials, typically username and password. -PHP: Hypertext Preprocessor - Sakai: Open Source Collaboration and learning environment -Shibboleth: Is a project that has created an architecture on open-source implementation for federated identity based authentication and authorization infrastructure based onSecurity Assertion Markup Language - Swf: is a file format for multimedia, vector graphics and ActionScript in the Adobe Flash environment - SQLITE: An embedded relational database managment system - Viewport: A rectangular viewing region in computer graphics, or a term used for optical components -XML: Extensible Markup Language
Chapter:Glossary
VII
Klaas De Meester
Bundle of projects
2010/2011
3 Index
Table of Contents
1 Foreword .......................................................................................................... I 1.1 Who am I? .................................................................................................................................................... I 1.2 Caret ............................................................................................................................................................. II 1.3 Usage of this document ...................................................................................................................... III 1.4 Special thanks ......................................................................................................................................... IV 2 Glossary .......................................................................................................... VI 3 Index ............................................................................................................. VIII Pigeon .................................................................................................................... II 4 Pigeon Introduction .......................................................................................... 3 4.1 What is Pigeon ......................................................................................................................................... 3 4.2 Pigeon in action ....................................................................................................................................... 3 4.3 Who will use Pigeon .............................................................................................................................. 3 4.4 How does Pigeon work? ...................................................................................................................... 4 4.4.1 Architecture ........................................................................................................................................... 4 4.4.1.1 Front end ................................................................................................................................................... 4 4.4.1.1.1 JavaScript ...................................................................................................................................... 4 4.4.1.2 Back end .................................................................................................................................................... 4 4.5 Setting up for Development ............................................................................................................... 5 4.5.1 First glance of Titanium ................................................................................................................... 5 4.6 Lets get started ........................................................................................................................................ 7 5 Pigeon ............................................................................................................. 10 5.1 The Back end .......................................................................................................................................... 11 5.1.1 Getting the data ................................................................................................................................ 11 5.1.1.1 JsonDataRetriever.js .......................................................................................................................... 12 5.1.1.1.1 Communication with the TimeTable API ................................................................... 12 5.1.1.1.2 Parsing the Timetable JSON ............................................................................................. 13 5.1.1.2 DataAccess.js ........................................................................................................................................ 15 5.1.1.2.1 Generating the database .................................................................................................... 15 5.1.1.2.2 Adding the retrieved data to the database ............................................................... 16 5.2 The Timetable part .............................................................................................................................. 19 5.2.1 How to set up the Calendar .......................................................................................................... 19 5.2.1.1 Setting up days and months ........................................................................................................... 19 5.2.2 How to set up the Courses list ..................................................................................................... 23 5.2.3 Integration of Google maps ......................................................................................................... 28 5.2.4 Getting files from the server on the Ipad ............................................................................... 30 5.2.4.1 How to set up the PDF list .............................................................................................................. 31 5.2.4.2 Downloading the PDF and save it locally ................................................................................. 32 5.3 The Folder part ..................................................................................................................................... 34 5.3.1 The courses list .................................................................................................................................. 34 5.3.2 Open a PDF .......................................................................................................................................... 36 5.3.3 Adding notes to it ............................................................................................................................. 41 Chapter:Index VIII
Klaas De Meester
Bundle of projects
2010/2011
5.3.4 Making a new text note ................................................................................................................. 43 5.3.5 Making a new draw note .............................................................................................................. 46
5.3.4.1 How does it work? ............................................................................................................................. 44
5.3.3.1 drawnotes .............................................................................................................................................. 41 5.3.3.2 Textnotes ............................................................................................................................................... 42
Image Library ........................................................................................................ 57 6 Image library Introduction ............................................................................... 58 6.1 What is an image library ................................................................................................................... 58 6.2 Image library in action ....................................................................................................................... 58 6.3 How does the Image library work? .............................................................................................. 59 6.3.1 Before starting .................................................................................................................................. 59 6.3.2 Architecture ........................................................................................................................................ 59 6.3.3 The tag table view ........................................................................................................................... 60 6.3.4 The image view part ....................................................................................................................... 63 6.3.5 Adding/editing images .................................................................................................................. 66 Poster generator ................................................................................................... 68 7 Poster generator Introduction ......................................................................... 69 7.1 What is the poster generator .......................................................................................................... 69 7.1.1 Before starting .................................................................................................................................. 69 7.1.2 Field Information ............................................................................................................................. 70 7.1.3 Image-uploader ................................................................................................................................ 71 7.1.4 Image drag feature ......................................................................................................................... 73 7.1.5 Sponsor selector ................................................................................................................................ 75 Funky game .......................................................................................................... 77 8 Funky donkey .................................................................................................. 78 8.1 What is Funky donkey ........................................................................................................................ 78 8.2 Funky donkey in action ..................................................................................................................... 78 Appendix .............................................................................................................. 80 9 Appendix ......................................................................................................... 81 9.1 JSON ............................................................................................................................................................ 81 9.2 SQLITE ...................................................................................................................................................... 82 9.3 Pigeon software .................................................................................................................................... 84 9.3.1 Titanium .............................................................................................................................................. 84 9.3.2 Aptana Studio .................................................................................................................................... 85 9.3.3 Xcode ..................................................................................................................................................... 88 9.4 Pigeon hardware needed .................................................................................................................. 89 9.4.1 Ipad ........................................................................................................................................................ 89 9.4.2 Mac ......................................................................................................................................................... 89 10 Conclusion ..................................................................................................... 90 11 Weekly report ............................................................................................... 91 Project fiche ........................................................................................................ 133 11.1 Pigeon .................................................................................................................................................. 134 11.2 Poster generator ............................................................................................................................. 135 11.3 Image library .................................................................................................................................... 136 11.4 Funky donkey ................................................................................................................................... 137 Chapter:Index IX
Pigeon
Klaas De Meester
Pigeon
2010/2011
4 Pigeon Introduction
4.1 What is Pigeon
Its a timetable application on the Ipad that contains information about courses in departments. It allows students to see where they should be going for their next course. It also allows the user to make notes for each course they have. The design is built up in 2 parts. The first part is the Timetable. This is displayed at the start of the application and contains the information of the courses. The second part is the Folder part, this contains the information about notes and drafts.
4.2 Pigeon in action
4.3 Who will use Pigeon

Professors and students at Cambridge University will use Pigeon. But I think other universities will also use it in the future.
Chapter: Pigeon introduction
Klaas De Meester
Pigeon
2010/2011
4.4 How does Pigeon work?

4.4.1 Architecture GET
Front end
JavaScript 4.4.1.1 Front end
Back end
JSON (XML) SQLITE JavaScript
The front end of the application is what you see, the user interface6. E.g. buttons, text areas,.... In pigeon I used JavaScript7 to make the user interface. 4.4.1.1.1 JavaScript Here you can see the standard code for making a button in Titanium
var button = Titanium.UI.createButton({ title: 'Hello' });
4.4.1.2 Back end The back end is the application engine, things you dont see as user. E.g. in our application I had to use JSON8 to handle the XML9 data I received from the server. The data I retrieved is pushed in a SQLITE10 database.

Interface: The way people can control the application JavaScript: Programming language based on ECMAScript 8 JSON: JavaScript Object Nation, a lightweight data-interchange format 9 XML: Extensible Markup Language 10 SQLITE: an embedded relational database managment system
6 7
Klaas De Meester
Pigeon
2010/2011
4.5 Setting up for Development

Everything that will be explained in the following chapters will be done in OSX. Before starting developing, the first thing the user needs to do is creating an account on the Appcelerator (L3)11 website. 4.5.1 First glance of Titanium
When Titanium is started, youll see this screen. On the left you see the project youre working on and on top the 3 menus: -Dashboard: it contains links to the Appcelerator site with more information on how to work with Titanium.
11 http://www.appcelerator.com/
Klaas De Meester
Pigeon
2010/2011
-Edit: You can edit the information from the project as shown in screenshot.
-Test & Packages: Here you can choose where you want to run the application. you can choose between the emulator and the Ipad.
Klaas De Meester
Pigeon
2010/2011
4.6 Lets get started

Running Titanium Developer. If you already have an account on Appcelerator you can login with it. Otherwise simply fill in the fields and Titanium will create an account and log in.
Click the new project button, and fill out the project details.
Klaas De Meester
Pigeon
2010/2011
Titanium Developer has now created a blank project. You cant use Titanium Developer itself to modify the application files, youll need to start Aptana studio and import the project. When you go to the directory of his project, you will see these files.
The built folder is a folder that Titanium generates. It contains all the information of the application. The resources folder is the folder you need. Here Ill add folders, which will contain the JavaScript files for the application. The project consists of multiple files by default. The file app.js is the backbone of the application. All the coding is done in this file and other files are linked to this file.
Klaas De Meester
Pigeon
2010/2011
When you start the project for the first time, you will see the following default application:
The default application consists of two tabs on the bottom, and a navigation bar on the top. The white area is a window. Each tab is held by a tab group. When the user clicks on tab 2, he will see the hierarchy. Each tab is associated with its own window.
Klaas De Meester
Pigeon
2010/2011
5 Pigeon
- - - - - -
From now on, Ill work with the project Pigeon that I already made. I will explain each part of the application. This is a list of topics I will discuss: Retrieve information from the server with HTTP requests Setting up the database Filling up the database Working with views and adding elements on them Getting PDF files on the Ipad and work with them Working with xCode for the paint part
Chapter: Pigeon
10
Klaas De Meester
Pigeon
2010/2011
5.1 The Back end

5.1.1 Getting the data I made a new folder data in the resources folder and I added 2 JavaScript files in it,JsonDataRetriever.js and DataAccess.js. I also made a folder models, it contains the JavaScript files with the getters. Here is an example from s_days.js
function S_days(s_id,day,start,end,lesson){ var s_id, day,start,end, lesson; this.getS_id = function(){ return s_id; }; this.getDay = function(){ return day; }; this.getStart = function(){ return start; }; this.getEnd = function(){ return end; }; this.getLesson = function(){ return lesson; }; }
Here you can see that Im retrieving all the data I need (this.getS_id, day, this.getStart, this.getEnd, this.getLesson). Im sending them back with the return statement.
Chapter: Pigeon
11
Klaas De Meester 5.1.1.1 JsonDataRetriever.js
Pigeon
2010/2011
It contains the code to retrieve the XML data from the server. Before you start coding, you need to include the files needed for retrieving the data. This is very easy with Titanium.
Titanium.include("data/DataAccess.js"); Titanium.include("model/series.js"); Titanium.include("model/s_days.js"); Titanium.include("model/s_events.js"); Titanium.include("model/pdf.js");
I have to make an HTTP request12 in order to get the data from the Timetable API13. The method type is going to be GET and I will use this URL:
https://mercury.caret.cam.ac.uk/students/dataCRUDL.php?oper=read&s_facdept=NST&part=pa rt1a&s_year=2010%20-%202011&s_term=Michaelmas
I ask the Timetable API for the data from the courses and also the format I would like to receive our response in. 5.1.1.1.1 Communication with the TimeTable API Now I need a createHTTPClient() method, this is provided by the Titanium API. Im going to use this to make the HTTP request to the Timetabe API
function loadSeriesTable(){ // Empty array "seriesData" for our tableview var seriesData = []; // Create our HTTP Client and name it "loader" var loader = Titanium.Network.createHTTPClient(); }

12 13
HTTP: Hypertext Transfer Protocol API: Application Programming Interface, is a particular set of rules and specifications that software programs can follow to communicate with each other. In Pigeon we used XML and JSON
Chapter: Pigeon
12
Klaas De Meester
Pigeon
2010/2011
I need 3 methods for our HTTP client.

// Sets the HTTP request method, and the URL to get data from loader.open("GET","https://mercury.caret.cam.ac.uk/students/dataCRUDL.php?oper=read&s_ facdept=NST&part=part1a&s_year=2010%20-%202011&s_term=Michaelmas"); // Runs the function when the data is ready for us to process loader.onload = function(){ //here we add what to do after the data is received // Send the HTTP request loader.send();
The loader.open() requires two arguments separated by a comma. When you take a closer look you will see that the first argument is the method of the HTTP request, which is the GET value. The second argument is the URL to the API. The loader.onload() is activated when the request is completed. This is where I will parse the JSON I receive and put it in the SQLITE database. This will be explained in the DataAcces.js part. The loader.send() method sends the request. 5.1.1.1.2 Parsing the Timetable JSON Now I will parse the JSON I have received. First I check the JSON which I received through the eval() function. It will be stored as a String in the variable seriesData. I wrote this code in the beginning of my internship, I already mentioned its better to use the Crockford's script
loader.onload = function(){ //here we add what to do after the data is received //Evaluate the JSON seriesData = eval('(' + this.responseText + ')'); }
Chapter: Pigeon
13
Klaas De Meester
Pigeon
2010/2011
Now I have the data in the variable, I would like to loop over all the keys inside the variable and get the keys id, title, s_part ,. for each course.
seriesData = eval('(' + this.responseText + ')'); for (var i = 0; i < seriesData.length; i++) { var series = new Series(); series.id = seriesData[i].id; series.title = seriesData[i].title; series.s_part = seriesData[i].s_part; series.locationNotes =seriesData[i].locationNotes; series.termDates_id = seriesData[i].termDates_id; series.s_notes = seriesData[i].s_notes; series.s_createdBy = seriesData[i].s_createdBy; series.s_facdept = seriesData[i].s_facdept; series.s_location = seriesData[i].s_location; series.s_year = seriesData[i].s_year; series.s_term = seriesData[i].s_term; series.additionalinformation = seriesData[i].additionalinformation; }
I did the same to retrieve the other information. Now I need to send the information to the DataAcces.js file. There am I going to put the information in a SQLITE database. I made a function DaList() in DataAccess.js which I access with
var da = new DALists(); da.initDatabase();
Every time the application starts, it will check if there is any new data is online. If new data is available, I will add it to the Database.
da.insertSeriesList(series.id, series.title, series.s_part, series.locationNotes, series.termDates_id, series.s_notes, series.s_createdBy, series.s_facdept, series.s_location, series.s_year, series.s_term, series.additionalinformation);
Chapter: Pigeon
14
Klaas De Meester 5.1.1.2 DataAccess.js 5.1.1.2.1 Generating the database
Pigeon
2010/2011
It contains the code to set up the database. First Ill look if the database already exists, and if all the tables exist.
function DALists(){ this.initDatabase = function(){ Titanium.API.info("initdatabase"); try { var sql = 'CREATE TABLE IF NOT EXISTS series (S_id INTEGER PRIMARY KEY AUTOINCREMENT,Id,Title varchar(255),S_part varchar(255),LocationNotes varchar(255),TermDates_id int, S_notes varchar(255), S_createdBy varchar(255), S_faqdept varchar(255), S_location varchar(255), S_year varchar(255),S_term varchar(255), Additionalinformation varchar(255)) '; var sql2 = 'CREATE TABLE IF NOT EXISTS days (D_id INTEGER PRIMARY KEY AUTOINCREMENT,Sid INTEGER, Day varchar(255), Start string, End string, Lesson varchar(255) )'; var sql3 = 'CREATE TABLE IF NOT EXISTS sevents (S_id INTEGER PRIMARY KEY AUTOINCREMENT,Sid INTEGER, Etitle varchar(255), Eorganizer string, EaggregatedTimes string, Enote varchar(255) )'; var sql4 = 'CREATE TABLE IF NOT EXISTS notes (N_id INTEGER PRIMARY KEY AUTOINCREMENT,Sid INTEGER, Name varchar(255), Date date, Type varchar(255))'; var sql5 = 'CREATE TABLE IF NOT EXISTS pdf (P_id INTEGER PRIMARY KEY AUTOINCREMENT,Sid INTEGER, Name varchar(255), Bool boolean)'; var db = Titanium.Database.open("TimeTableList"); db.execute(sql); db.execute(sql2); db.execute(sql3); db.execute(sql4); db.execute(sql5); db.close(); } catch (ex) { Titanium.API.info("initdatabase NOT OK"); Titanium.API.info(ex); } Titanium.API.info("initdatabase OK"); };
Here you can see that a check is done to see if the tables exist before they are being added to the Timetable SQLITE database.
Chapter: Pigeon
15
Klaas De Meester
Pigeon
2010/2011
Some error handling is implemented too. This will catch errors and display them in the console
try { } catch (ex) { Titanium.API.info("initdatabase NOT OK"); Titanium.API.info(ex); } Titanium.API.info("initdatabase OK"); };
info() is used in titanium to show messages in the console, its very neat. Titanium doesnt have a debugger. To find errors you have to do some tracing. This can be done by displaying info in the console. 5.1.1.2.2 Adding the retrieved data to the database
this.insertSeriesList = function(listId, listTitle, lists_Part, listLocationNotes, listTermDates_id, listS_notes, listS_createdBy, listS_facdept, listS_location, listS_year, listS_term, listAdditionalinformation){ var db = Titanium.Database.open("TimeTableList"); var rows = db.execute('SELECT COUNT(*) FROM series WHERE Id = ?;', listId).field(0); if (rows == 0) { db.execute('INSERT INTO series (Id,Title,S_part,LocationNotes,TermDates_id, S_notes, S_createdBy, S_faqdept, S_location, S_year,S_term, Additionalinformation) VALUES(?,?,?,?,?,?,?,?,?,?,?,?)', listId, listTitle, lists_Part, listLocationNotes, listTermDates_id, listS_notes, listS_createdBy, listS_facdept, listS_location, listS_year, listS_term, listAdditionalinformation); }; db.close(); };
Here I get the data from the data layer. Before I add the data in the database I check if the data isnt already in the database by doing a select count. When all the data is added to the database, I close the connection to it with close().
Chapter: Pigeon
16
Klaas De Meester An example from the courses table:
Pigeon
2010/2011
Chapter: Pigeon
17
Klaas De Meester
Pigeon
2010/2011
Before I start explaining these two parts, I just wanted to show how I put everything from the design in one folder.
For every component in the application, I made a new JavaScript file. If you work like this, you wont lose time by searching where you created components. It will save a lot of time.
Chapter: Pigeon
18
Klaas De Meester
Pigeon
2010/2011
5.2 The Timetable part

5.2.1 How to set up the Calendar If you work on an Ipad you need to keep in mind youre working on a touch screen. I made the mistake by making the calendar in HTML/CSS/JavaScript. The calendar part was finished and my colleague wanted to test it. He mentioned if you press on a date, the Ipad tries to copy the text. I had to remake the calendar. Luckily I could reuse the JavaScript part. 5.2.1.1 Setting up days and months First of all I have to show the days and months. So people can scroll through it and select a day from which they want to see more information. As I already mentioned before, always work in views. So you can add elements like buttons, text areas, labels, in it. This is an example of how to create a view and add a label to it
var dayPreview = Ti.UI.createView({height:55, width: 35, top: 0, left: -35, backgroundImage: "../images/day_preview.png", opacity: 0}); var dayPreviewText = Ti.UI.createLabel({ text: "16", width: 34, height: 16, textAlign: 'center', left: 0, top: 10, font:{fontSize:16,fontWeight:'bold'}, color: "#262c31", shadowColor: '#fff', shadowOffset: { x: 0, y: 1 }, }); dayPreview.add(dayPreviewText);
Now Im going to create arrays which contain the information about the months and days.
Chapter: Pigeon
19
Klaas De Meester
Pigeon
2010/2011
function monthName(monthNumber) { var name = ""; switch(monthNumber){ case 1: name = "January"; break; case 2: name = "February"; break; case 3: name = "March"; break; case 4: name = "April"; break; case 5: name = "May"; break; case 6: name = "June"; break; case 7: name = "July"; break; case 8: name = "August"; break; case 9: name = "September"; break; case 10: name = "October"; break; case 11: name = "November"; break; case 12: name = "December"; break; } return name; }
function dayName(dayNumber) { var name = ""; switch(dayNumber){ case 1: name = "Monday"; break; case 2: name = "Tuesday"; break; case 3: name = "Wednesday"; break; case 4: name = "Thursday"; break; case 5: name = "Friday"; break; case 6: name = "Saturday"; break; case 0: name = "Sunday"; break; } return name; }
This code is required for the next part. I will need it to show the days and months when people are scrolling through the calendar. As you see in the screenshot from the Timetable part, the calendar is nicely ordered and you can scroll through every month. I did this by making a function showDays().
Chapter: Pigeon
20
Klaas De Meester
Pigeon
2010/2011
This view is made for adding the days to it.

function showDays(){ var daysBox = Ti.UI.createView({height:180, width: 245, top: 175, left: animateFrom, opacity: 0}); calendarWin.add(daysBox); var a = Titanium.UI.createAnimation(); a.left = 35; a.duration = 250; a.opacity = 1; var ypos = 0;
Here Im going to look for the days of the month, and Ill add them on the view I made.
for(i=1;i<daysInMonth(currentMonth - 1,currentYear) + 1;i++){ var day = Ti.UI.createButton({ title: i, width:35, height: 30, top: ypos, font:{fontSize:12,fontWeight:'regular'}, backgroundImage:'none', backgroundSelectedImage:'../images/day_hover_background.png', left: (new Date(currentYear,currentMonth - 1,i).getDay() * 35) }); if(selected == false){ if (i == c) { day.backgroundImage = "../images/selected_day.png"; day.backgroundSelectedImage = 'none'; selectedYear = currentYear; selectedMonth = currentMonth; selectedDay = i; selected = true; } }else{ if(i == selectedDay && currentMonth == selectedMonth && currentYear == selectedYear){ day.backgroundImage = "../images/selected_day.png"; }; };
day.addEventListener('click', function(e) { Titanium.API.info(e.source.title + " " + monthName(currentMonth) + " " + currentYear); selectedYear = currentYear; selectedMonth = currentMonth; selectedDay = e.source.title; for (i=0;i<daysArray.length;i++){ (daysArray[i]).backgroundImage = 'none'; }; e.source.backgroundImage = "../images/selected_day.png"; datePicked(); });
Chapter: Pigeon
21
Klaas De Meester
Pigeon
2010/2011
As you can see, Ill need to add event listeners to the days. Or I wont know when a user selected something.
day.addEventListener('touchstart',function(e){ dayPreview.left = e.source.left + 35; dayPreview.top = e.source.top + 175 - 55; dayPreviewText.text = e.source.title; dayPreview.zIndex = e.source.zIndex + 1; dayPreview.opacity = 1; }); day.addEventListener('touchend',function(e){ dayPreview.opacity = 0; dayPreview.left = -35 }); daysBox.add(day); daysArray.push(day); if (new Date(currentYear, currentMonth -1, i).getDay() == 6) { ypos += 30; }; }; currentCalendar = daysBox; currentCalendar.animate(a);
Every time a user clicks on a day, the course list gets updated with the courses of that day. The question is, how can the course list know which day of the month is selected. This is very easily done. I used a fire event, which is built in Titanium. FireEvent is useful for sending data between js files and windows. You need to do something like this to fire an event:
function datePicked(){ var month; var day; if(selectedMonth <10){ month = "0" + selectedMonth; }else{ month = selectedMonth; }; if(selectedDay <10){ day = "0" + selectedDay; }else{ day = selectedDay; }; var pickedDate = dayName(new Date(selectedYear,selectedMonth 1,selectedDay).getDay()); var today = false; var zero = ""; if(selectedDay <10){ zero = "0"; }; if((zero + selectedDay + " / " + selectedMonth + " / " + selectedYear) == (c + " / " + currentMonth + " / " + currentYear)){ today = true; };
Ti.App.fireEvent('datePicked', {date:pickedDate, isToday:today,}); };
Chapter: Pigeon
22
Klaas De Meester And now to receive the data:
Pigeon
2010/2011
Ti.App.addEventListener('datePicked', function(data){ today = data.isToday; selectedDate = (data.date); LoadList(selectedDate); });
Here you can see that I receive the selected day. I send the day to Loadlist(), it will show the courses of the day. 5.2.2 How to set up the Courses list First of all, Ill have to get the data from the database. This is the first this is done in the function Loadlist().
nextVisible = false; rowData = []; lists = da.getLists(day);
Two arrays are made, one that will contain the data of the rows and one with the data Ill get back from our database.
this.getLists = function(day){ var db = Titanium.Database.open("TimeTableList"); var rows = db.execute('SELECT * FROM days WHERE Day = ? ORDER BY Start;', day); var result = []; while (rows.isValidRow()) { var item = new S_days(rows.fieldByName('Sid'), rows.fieldByName('Day'), rows.fieldByName('Start'), rows.fieldByName('End'), rows.fieldByName('Lesson')); result.push(item); rows.next(); } rows.close(); return result; };
The data is now added in the list array.
Chapter: Pigeon
23
Klaas De Meester
Pigeon
2010/2011
Then Ill get the data out of the list array, create a new row and labels and add them to the table.
function LoadList(day){ nextVisible = false; rowData = []; lists = da.getLists(day); for (var i = 0; i < lists.length; i++) { var S_days = lists[i]; courseTable.opacity = 1; var listRow = Titanium.UI.createTableViewRow({ height: 65, hasChild: false, backgroundImage: '../images/course_item.png', selectedBackgroundImage: '../images/course_item_hover.png', listId: S_days.getS_id(), listStart: S_days.getStart(), listEnd: S_days.getEnd(), listWhen: "", color: '#fff', borderColor: '#000', }); };
This is how you create the table view. It will contain the labels with information.
Chapter: Pigeon
24
Klaas De Meester
Pigeon
2010/2011
//List title var title = Ti.UI.createLabel({ color: '#323639', font: { fontSize: 20, fontWeight: 'bold' }, shadowColor: '#fff', shadowOffset: { x: 0, y: 2 }, top: 13, left: 10, height: 24, width: 250, text: S_days.getLesson() }); var go = Ti.UI.createLabel({ color: '#323639', font: { fontSize: 14, fontWeight: 'light' }, top: 40, left: 10, width: 100, height: 14, text: S_days.getStart(), }); listRow.add(title, go, leave); rowData.push(listRow); };courseTable.setData(rowData); };
Now that I added the labels, it should look like this:
Chapter: Pigeon
25
Klaas De Meester
Pigeon
2010/2011
We wanted more. We also wanted to show which lesson the students have at the moment and what was coming up next. This was done by adding the next lines of code in loadlist().
var isStarted = false; var isBusy = false; if ((S_days.getStart()).substring(0, 2) <= setDate.getHours()){ if((S_days.getStart()).substring(0, 2) == setDate.getHours()){ if((S_days.getStart()).substring(3, 5) <= setDate.getMinutes()){ isStarted = true; }else{ isStarted = false; }; }else{ isStarted = true; }; } if ((S_days.getEnd()).substring(0, 2) >= setDate.getHours()){ if((S_days.getEnd()).substring(0, 2) == setDate.getHours()){ if((S_days.getEnd()).substring(3, 5) > setDate.getMinutes()){ isBusy = true; }else{ isBusy = false; }; }else{ isBusy = true; }; }; if(isStarted && isBusy && today == true){ var nowRibbon = Ti.UI.createImageView({ top: 5, right: 0, height: 45, width: 45, image: "../images/now_ribbon.png" });
Chapter: Pigeon
26
Klaas De Meester
Pigeon
2010/2011
I check the date and hour and if a student has a course at the moment, a ribbon is shown on the course they have now and a ribbon on the next course. This is the end result.
Chapter: Pigeon
27
Klaas De Meester 5.2.3 Integration of Google maps
Pigeon
2010/2011
As you can see I also added geo location to our application. This way people can see where they need to go for the lesson. The first thing you need to do is make a view. It will contain Google maps API.
var detailMap = Titanium.UI.createView({ top:120, left: 0, right: 0, height: 280 });
Now Ill make a custom annotation that will show where they need to go. An annotation is created with the Ti.Map.createAnnotation function, and can be customized by changing pin image, color, and popup contents.

var annotation = Titanium.Map.createAnnotation({ latitude: 52.2015992, longitude: 0.1164893, title: "CARET", subtitle: 'Centre for Applied Research in Educational Technologies', animate: true, image: "../images/pin.png" });
Now Ill add the region, and add the google maps API at the detailMap view.
var cambridge = { latitude: 52.2015992, longitude: 0.1164893, latitudeDelta: 0.010, longitudeDelta: 0.018 };
Chapter: Pigeon
28
Klaas De Meester
Pigeon
2010/2011
var smallMap = Titanium.Map.createView({ mapType: Titanium.Map.STANDARD_TYPE, region: cambridge, animate: true, regionFit: true, userLocation: false, touchEnabled: false, height: "100%", width: "100%", annotations: [annotation] });
The region attribute defines the center of viewport14 using latitude and longitude values and its size as delta of latitude and longitude (a latitude degree is about 111 Km, a longitude degree depends on the distance from equator.). This is what you get:

14 viewport: a rectangular viewing region in computer graphics, or a term used for optical
components
Chapter: Pigeon
29
Klaas De Meester
Pigeon
2010/2011
5.2.4 Getting files from the server on the Ipad When a user clicks on a course, details will be shown for that course. It will also contain a list of PDFs. The first thing I did was fire an event with data from the course list to the PDF list. I also added an event listener on the PDF list. Every time a user clicks on a course it will show the right PDFs in the list.
Ti.App.addEventListener('courseClicked', function(data){ classHour.text = data.courseStart + " - " + data.courseEnd; classTitle.text = (da.getCourseDetails((data.courseId).toString()))[0].name; window.title = (da.getCourseDetails((data.courseId).toString()))[0].name; if(data.courseWhen == ribbon.opacity ribbon.image = }else(data.courseWhen ribbon.opacity ribbon.image = }; "now"){ = 1; "../images/now_ribbon_large.png"; == "next"){ = 1; "../images/next_ribbon_large.png";
When a PDF isnt saved locally, the icon will be blue, else the icon will be green. When the icon is blue and you click on it, it will download the PDF and save it on the Ipad. If the icon is green and you click on it, it will open the PDF.
Chapter: Pigeon
30
Klaas De Meester 5.2.4.1 How to set up the PDF list
Pigeon
2010/2011
First of all, Ill get the data from the database. This is the first thing which is done in the function refreshData().
rowData = []; lists = da.getPdfLists(data.courseId); var tableHeight= 70;
I make two arrays, one that will contain the data of the rows and one with the data Ill get back from our database.
this.getPdfLists = function(id){ var db = Titanium.Database.open("TimeTableList"); var rows = db.execute('SELECT * FROM pdf WHERE Sid = ?;', id); var result = []; while (rows.isValidRow()) { var item = new Pdf(rows.fieldByName('Sid'), rows.fieldByName('Name'), rows.fieldByName('Bool')); result.push(item); rows.next(); }return result; };
The data is now added in the list array.

for (var i = 0; i < lists.length; i++) { var Pdf = lists[i]; var downloadImage = "../images/download_false.png"; if((Pdf.getBool()) == "true"){ downloadImage = "../images/download_true.png"; }; var listRow = Titanium.UI.createTableViewRow({ title: Pdf.getName(), height: 55, listBool: Pdf.getBool(), listId: Pdf.getS_id(), color: '#21282c', borderColor: '#000', leftImage: "../images/small_download.png", rightImage: downloadImage }); };
Then Ill get the data out of the list array, create a new row and labels and add them to the table. Now I add an event listener on the table view, when people click I can see on which PDF they clicked.
tableview.addEventListener('click', pdfClicked);
Chapter: Pigeon
31
Klaas De Meester
Pigeon
2010/2011
5.2.4.2 Downloading the PDF and save it locally Now Ill catch the event. First I check if the PDF is already saved locally. If it isnt, I will downloaded it and save it.
function pdfClicked(e){ if (e.row.listBool == 'false') { tableview.removeEventListener('click', pdfClicked); var foldername = e.row.listId; var filename = e.row.title; var ind = Titanium.UI.createProgressBar({ width: 150, height: 20, min: 0, max: 1, style: Titanium.UI.iPhone.ProgressBarStyle.PLAIN, top: 15, });
As you can see, a check is done before the downloading, to see if its false (false is not saved yet) before I start downloading it. Then I create a progress bar so people can see something is happening.
c.ondatastream = function(e){ ind.value = e.progress; Ti.API.info('ONDATASTREAM1 - PROGRESS: ' + e.progress); };
Now Ill create a HTTPClient, like I did with retrieving the XML data for filling up the database.
ind.value = 0; c = Titanium.Network.createHTTPClient(); c.setTimeout(10000);
When thats done, it will try to start downloading the PDF.

c.onload = function(){ var d = new Date(); var Pdate = d.getDate() + '-' + (d.getMonth() + 1) + '-' + d.getFullYear(); ind.hide(); da.updatePdfList(filename); da.insertNotesList(foldername, filename, Pdate, ' refreshPDF(detailData); Ti.App.fireEvent('updateNotesList'); tableview.addEventListener('click', pdfClicked); };
When its downloaded I add the information in the database. I also update the note list.
this.insertNotesList = function(listId, listName, listDate, listType){ var db = Titanium.Database.open("TimeTableList"); var rows = db.execute('SELECT COUNT(*) FROM notes WHERE Name = ?;', listName).field(0); if (rows == 0) { db.execute('INSERT INTO notes (Sid,Name,Date,Type) VALUES(?,?,?,?);', listId, listName, listDate, listType); }; db.close(); };
Chapter: Pigeon
32
Klaas De Meester
Pigeon
2010/2011
Now Im going to save the downloaded PDF in the right directory on the Ipad. If the folder directory doesnt exist, I need to create it first.
var pdfFolder = Titanium.Filesystem.getFile(parent + '/files/'); if (!pdfFolder.exists()) { pdfFolder.createDirectory(); } var dfo = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/' + filename + '/thumbnail'); if (!dfo.exists()) { dfo.createDirectory(); } c.open('GET', 'http://klaasdm.be/cambridge/' + filename); var new_pdf = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/' + filename, filename); if (!new_pdf.exists()) { c.file = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/' + filename, filename); } c.send();
This is how it looks on the Ipad when I download Chemistry1.pdf.
I also added an error handling on the HTTPClient. When it isnt possible to download the PDF it will warn the user and close the connection to the server.
c.onerror = function(e){ Ti.API.info('XHR Error ' + e.error); };
Chapter: Pigeon
33
Klaas De Meester
Pigeon
2010/2011
5.3 The Folder part

5.3.1 The courses list When you click on the folders button, you see a list of all the courses. It also shows how many PDFs and notes each folder contains. For example the Maths folder contains 4 files
Chapter: Pigeon
34
Klaas De Meester
Pigeon
2010/2011
This is how it looks inside the Maths folder, as you can see there are two PDF files, one draw note and one text note. You also have a back button, for going back to the notes list. With the edit button you can delete files.
When students dont have notes or PDFs for a course, they will see this:
First Im going to explain how I opened the PDF files and how I added notes to it.
Chapter: Pigeon
35
Klaas De Meester
Pigeon
2010/2011
5.3.2 Open a PDF This is what the students see when they open a PDF. As you can see, the PDF view is made in two parts. The one that shows the PDF and one on the bottom that shows all the notes you made in the PDF.
When people click on a file in the notes list, I first check which type of file it is. I clicked on Maths1.pdf, so it will get in the switch case PDF and fire it to the pdfview with the data needed to open the right pdf.
Chapter: Pigeon
36
Klaas De Meester
Pigeon
2010/2011
tableview.addEventListener('click', function(e){ Ti.App.fireEvent('fileOpened', { //id: e.row.listId, filetype: e.row.listType, name: e.row.listTitle }); switch(e.row.listType){ case "PDF": Ti.App.fireEvent('pdfView', { id: e.row.listId, filetype: e.row.listType, name: e.row.listTitle }); break; case "DRAWNEWNOTE": Ti.App.fireEvent('newDrawView', { foldername: e.row.listId, foldernamer: e.row.listTitle, imagename: e.row.listTitle, isOpened: true, isExisting: true, picturename: parent + '/files/' + e.row.listId + '/' + e.row.listTitle }); break; case "TEXTNOTE": Ti.App.fireEvent('textView', { id: e.row.listId, name: e.row.listTitle, textname: parent + '/files/' + e.row.listId + '/' + e.row.listTitle }); break; }; });
In pdf_view.js Ill add an eventlistener that will listen when he needs to open the PDF. I also retrieve the send data I need to open the right PDF.
Ti.App.addEventListener('pdfView', function(e){ var foldername = e.id; var filetype = e.filetype; var filenamer = e.name;
When thats done Ill add a list of notes the student already made. I also add all the components, needed to take notes.
for (var t = 0; t < thumbsArray.length; t++) { scrollViewer.remove(thumbsArray[t]); }; thumbsArray = []; var btnDrawNote = Titanium.UI.createButton({ title: 'take note', height: 40, width: 200, top: 70, left: 50 });
Chapter: Pigeon
37
Klaas De Meester
Pigeon
2010/2011
Here I go to the path of the PDF and Ill add it to the webview.
var f = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/' + filenamer, filenamer); wv.setUrl(f.nativePath);
Ill fill the scroller with thumbnails of the notes students already made.
Ti.App.addEventListener('Scroll', function(e){ scroller(); }); function scroller() if (filetype == 'PDF') { filetype = 'DRAWNOTE'; }; lists = da.getImageLists(foldername, filetype); var j = -1; for (var i = 0; i < lists.length; i++) { var Notes = lists[i]; var temp = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/' + filenamer + '/thumbnail/' + Notes.getName()); if (temp.exists()) { j++; var stickerImg = Titanium.UI.createImageView({ image: parent + '/files/' + foldername + '/' + filenamer + '/thumbnail/' + Notes.getName(), width: 'auto', height: 80, left: j * 90, stick_name: Notes.getName(), }); stickerImg.addEventListener('click', add_stickers); thumbsArray.push(stickerImg); scrollViewer.add(stickerImg); }
Here I added an event listener on each picture, when you click on a note in the scrollist it will open in a new window. People can see which notes they made and edit them.
function add_stickers(e){ var dfo = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/' + filenamer + '/temp'); var fid = dfo.getDirectoryListing(); if (fid != null) { fid = fid.splice(1, fid.length - 1); for (var j = 0; j < fid.length; j++) { var file = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/' + filenamer + '/temp/' + fid[j]); file.deleteFile(); } } }; };
Chapter: Pigeon
38
Klaas De Meester
Pigeon
2010/2011
This is what people will see, after doing this.
Chapter: Pigeon
39
Klaas De Meester
Pigeon
2010/2011
A note part is added. When people press on the take a note button I take a screenshot from the web view. I save the picture in a special directory I made. When thats done I fire it to the note view and set the picture as background of the paint view.
btnDrawNote.addEventListener('click', function(){ var dfo = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/' + filenamer + '/temp'); var fid = dfo.getDirectoryListing(); if (fid != null) { fid = fid.splice(1, fid.length - 1); Ti.API.info(fid); for (var j = 0; j < fid.length; j++) { var file = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/' + filenamer + '/temp/' + fid[j]); file.deleteFile(); } } var f = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/' + filenamer + '/temp/', filename); f.write(theMap); Ti.App.fireEvent('noteView', { foldername: foldername, foldernamer: filenamer, isOpened: true, isExisting: true, imagename: filename, picturename: parent + '/files/' + foldername + '/' + filenamer + '/temp/' + filename }); Ti.App.fireEvent('fileOpened',{ filetype: "PDFNOTE" }); }); scroller(); });
Chapter: Pigeon
40
Klaas De Meester 5.3.3 Adding notes to it 5.3.3.1 drawnotes
Pigeon
2010/2011
I will explain this in the making a new draw note part. When I make a new drawing, Im doing the same like adding drawn notes in a PDF. The only difference is that I put the screenshot of the PDF as background in the painter.
Chapter: Pigeon
41
Klaas De Meester 5.3.3.2 Textnotes
Pigeon
2010/2011
I will explain this in the making a new text note part. If a user wants to add text to the PDF, Im doing the same as just making a text note. The only difference is that text is saved as image and not as text.
Chapter: Pigeon
42
Klaas De Meester 5.3.4 Making a new text note
Pigeon
2010/2011
I first check which file type it is, like I did with the PDF. I wont come in the PDF case now but in the TEXTNOTE case.
case "TEXTNOTE": Ti.App.fireEvent('textView', { id: e.row.listId, name: e.row.listTitle, textname: parent + '/files/' + e.row.listId + '/' + e.row.listTitle }); break;
When a user clicks the button, he will see this:
Chapter: Pigeon
43
Klaas De Meester
Pigeon
2010/2011
Changes are automatically saved. You dont need to press any buttons. The buttons you see on top are for deleting the text file and for emailing them.
5.3.4.1 How does it work? First of all Im going to make the components I need for sending the email, typing the text and deleting the text. Here you can see Im making the email dialog, I need this for adding the text when people want to send the note in an email.
var emailDialog = Titanium.UI.createEmailDialog({ subject: "My Note", messageBody: '' }); var textBackground = Titanium.UI.createImageView({ left: 0, top: 0, width: 768, height: 1024, image: "../images/text_background.png", opacity: 0.5 });
Chapter: Pigeon
44
Klaas De Meester Now Im making a text area.
Pigeon
2010/2011
var textArea = Titanium.UI.createTextArea({ value: "", left: 75, right: 0, top: 15, bottom: 15, color: '#1e2327', backgroundColor: 'transparent', textAlign: 'left', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, suppressReturn: false });
Here Im going to make the delete button, which you can see on the right in top. I also added a delete event listener, when people click the delete button a check is done to see if the file exists before trying to delete it
var deleteButton = Titanium.UI.createButton({ backgroundImage: "../images/delete_button.png", backgroundSelectedImage: "../images/delete_button_hover.png", width: 39, height: 30, right: 90 }); deleteButton.addEventListener('click', function() { var f = Titanium.Filesystem.getFile(deleteDir); if (f.exists()) { da.deleteNote(deleteName); showDeleted(deleteName); Ti.App.fireEvent('updateNotesList', { }); } });
Here I make the other components, which Ill add to the navigation bar on top.
var sendButton = Titanium.UI.createButton({ backgroundImage: "../images/send_button.png", backgroundSelectedImage: "../images/send_button_hover.png", }); sendButton.addEventListener('click', function() { emailDialog.open(); }); var textNoteButton = Titanium.UI.createButton({ backgroundImage: "../images/note_button.png", backgroundSelectedImage: "../images/note_button_hover.png", }); textNoteButton.addEventListener('click', function() { noteDialog.show({ view: textNoteButton, }); });
Now Ill add all the components to the bar on top.

right_text_nav.add(deleteButton, sendButton, textNoteButton)
Chapter: Pigeon 45
Klaas De Meester 5.3.5 Making a new draw note
Pigeon
2010/2011
I first check which file type it is, like I did with the PDF. I wont come in the PDF case now but in the DRAWNEWNOTE case.
case "DRAWNEWNOTE": Ti.App.fireEvent('newDrawView', { foldername: e.row.listId, foldernamer: e.row.listTitle, imagename: e.row.listTitle, isOpened: true, isExisting: true, picturename: parent + '/files/' + e.row.listId + '/' + e.row.listTitle }); break;
When a user clicks the button, he will see this:
Chapter: Pigeon
46
Klaas De Meester
Pigeon
2010/2011
Changes are automatically saved. You dont need to press any buttons. The buttons you see on top are for deleting the text file and for emailing them.
Titanium doesnt come with a module to draw things. I needed to add an extra module for it. You have a lot of extra modules for titanium, for example a Facebook module, zbar module,. Heres (l4)15 a guide on how you make a module. I didnt make a module I just expanded it. You can find the standard ti.paint module here (l5)16.
After downloading the module, I needed to add the ti.paint folder in /Library/Application Support/Titanium/Modules/iphone/. Now I need to add in the tiapp.xml from your project the following lines:
<modules> <module version="1.0">ti.paint</module> </modules>

15 http://assets.appcelerator.com.s3.amazonaws.com/docs/Module_Developers_Guide_iOS.pdf 16 https://github.com/appcelerator/titanium_modules
Chapter: Pigeon
47
Klaas De Meester
Pigeon
2010/2011
The tipaint module was made for the Iphone by default, when you want to draw something it draws 20 px above your finger. This is fixed by adding the following lines of code to TiPaintView.m of the module:
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [super touchesBegan:touches withEvent:event]; UITouch *touch = [touches anyObject]; lastPoint = [touch locationInView:[self imageView]]; lastPoint.y -= 20; }
As you can see, I added lastPoint.y -= 20; in de code, for fixing the problem. We also wanted to add a highlight feature in our application, but tipaint didnt support that. I had to add the following. Instead of drawing the opacity (which is still there) it now sets the opacity of the view you paint on. The new argument is: lineOpacity, I added this in TiPaintView.m. Here is an example:
Titanium.Painter = require('ti.paint'); var painter; painter = Titanium.Painter.createView({ strokeWidth: 10, strokeColor: '#2a81df', strokeOpacity: 1, // you can also remove this it defaults to 1 lineOpacity: 1 // this is where the view get's it opacity value ranges from 0.0 - 1.0 });
And I also added this:

// in the init function I added lineOpacity = 1; //this sets the default value // in (UIImageView)imageView I added drawImage.alpha = lineOpacity; // this essentially grabs the value of linOpacity and sets it's alpha // Added a new call - (void)setLineOpacity_:(id)alpha2 { lineOpacity = [TiUtils floatValue:alpha2]; }
In TiPainView.h at the interface, I added this:

// I added this in the @interface CGFloat lineOpacity;
We have everything we need to work on the drawing now.
Chapter: Pigeon
48
Klaas De Meester
Pigeon
2010/2011
First you need to create the components you need. Here Im going to make the delete button that you can see on the right in top. I also added a delete event listener, when people click the delete button I first check if the file exists before trying to delete it
var deleteButton = Titanium.UI.createButton({ backgroundImage: "../images/delete_button.png", backgroundSelectedImage: "../images/delete_button_hover.png", width: 39, height: 30, right: 90 }); deleteButton.addEventListener('click', function(){ Ti.API.info('Clicked delete button!'); var f = Titanium.Filesystem.getFile(deleteDir); if (f.exists()) { da.deleteNote(deleteName); showDeleted(deleteName); } });
I make the other components, which Ill add to the navigation bar on top. Here I add all the components to the bar on top.
right_nav.add(noteButton, sendButton, deleteButton)
Ill add an event listener that will listen when he needs to open a new draw view. I also retrieve the send data I need to save the draw on the right place.
Ti.App.addEventListener('newDrawView', function(e){ firstData = 0; picturename = e.picturename; imagename = e.imagename; foldername = e.foldername; Opacity = e.lineOpacity; deleter = e.deleter;
When people turn the Ipad, the orientation change. So I need to look if the Ipad is turned horizontal or vertical.
if (Titanium.UI.orientation == Titanium.UI.PORTRAIT || Titanium.UI.orientation == Titanium.UI.UPSIDE_PORTRAIT) { grip.visible = false; } else if (Titanium.UI.orientation == Titanium.UI.LANDSCAPE_LEFT || Titanium.UI.orientation == Titanium.UI.LANDSCAPE_RIGHT) { grip.visible = true; } else { grip.visible = false; };
Chapter: Pigeon
49
Klaas De Meester
Pigeon
2010/2011
Here I make the folder structure. The drawings need to be saved on the right place.
var fileFolder = Titanium.Filesystem.getFile(parent + '/files/'); if (!fileFolder.exists()) { fileFolder.createDirectory(); } var thumbnail = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/thumbnail'); if (!thumbnail.exists()) { thumbnail.createDirectory(); } var thumbnail = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/temp'); if (!thumbnail.exists()) { thumbnail.createDirectory(); }
This is a very important line you need to add! The application needs to know it needs to use the ti.paint module
Titanium.Painter = require('ti.paint');
Now Im going to add the paint components that you can see on the bottom.
1 2 3 4 5 1) The draw button 2) The erase button 3) The text note button 4) The color chooser button 5) The highlight button 6) The size button 7) The rollback button 8) The erase button 6 7 8
Chapter: Pigeon
50
Klaas De Meester
Pigeon
2010/2011
First I make a toolbar view, this I need to add all the components on
var toolBar = Titanium.UI.createView({ width: "100%", height: 70, bottom: 0, left: 0 }); var toolBarBackground = Titanium.UI.createImageView({ width: 768, height: 70, top: 0, left: 0, image: "../images/drawing_toolbar.png" }); var toolBarCenter = Titanium.UI.createView({ width: "210", height: 70, bottom: 0, left: 270 });
Here I make the image chooser component.

var colorImage = Titanium.UI.createImageView({ width: 16, height: 16, top: 29, left: 15, image: "../images/color_black.png" });
I added some colors in it that people can choose from.

var colorDialog = Titanium.UI.createOptionDialog({ options: ['Black', 'Red', 'Blue', 'Yellow'], title: 'Select a color' });
Chapter: Pigeon
51
Klaas De Meester
Here I look which color the user choose.
Pigeon
2010/2011
colorDialog.addEventListener('click', function(e){ switch (e.index) { case 0: Ti.API.info("Black"); colorImage.image = "../images/color_black.png"; penColor = "#000" break; case 1: Ti.API.info("Red"); colorImage.image = "../images/color_red.png"; penColor = "#d81c1c" break; case 2: Ti.API.info("Blue"); colorImage.image = "../images/color_blue.png"; penColor = "#2999da" break; case 3: Ti.API.info("Yellow"); colorImage.image = "../images/color_yellow.png"; penColor = "#fff722" break; }; if (penButton.enabled == false) { painter.strokeColor = penColor; }; });
This is how I created the highlight button.

var transparentButton = Titanium.UI.createButton({ width: 45, height: 45, left: 50, top: 15, backgroundImage: "../images/transparent_button.png", backgroundSelectedImage: "../images/transparent_button_active.png" }); transparentButton.addEventListener('click', function(){ Ti.API.info("???? " + Opacity); if (Opacity == 0.2) { transparentButton.backgroundImage = "../images/transparent_button.png"; Ti.App.fireEvent('newDrawView', { foldername: foldername, imagename: imagename, lineOpacity: 1, deleter: false, isTransparent: true, picturename: parent + '/files/' + foldername + '/' + imagename }); }
Chapter: Pigeon
52
Klaas De Meester
Pigeon
2010/2011
When the user draws with the highlight tool, it should look like this now:
Now Im going to create the pen and eraser button

var penButton = Titanium.UI.createButton({ backgroundImage: "../images/pen_button.png", backgroundDisabledImage: "../images/pen_button_active.png", backgroundSelectedImage: "../images/pen_button_active.png", enabled: false }); penButton.addEventListener('click', function(e){ penButton.enabled = false; eraserButton.enabled = true; textButton.enabled = true; painter.strokeColor = penColor; draw = true; text = false; painter.lineOpacity = 1; }); var eraserButton = Titanium.UI.createButton({ backgroundImage: "../images/eraser_button.png", backgroundDisabledImage: "../images/eraser_button_active.png", backgroundSelectedImage: "../images/eraser_button_active.png", }); eraserButton.addEventListener('click', function(e){ Ti.API.info("CLICKED THE ERASER"); penButton.enabled = true; eraserButton.enabled = false; textButton.enabled = true; painter.strokeColor = "#fff"; });
Now the user can erase things you drawn wrong:
Chapter: Pigeon
53
Klaas De Meester
Pigeon
2010/2011
We also wanted to add text in the notes. This I added the same way like making new text notes.
var textButton = Titanium.UI.createButton({ backgroundImage: "../images/text_button.png", backgroundDisabledImage: "../images/text_button_active.png", backgroundSelectedImage: "../images/text_button_active.png", enabled: true }); textButton.addEventListener('click', function(e){ penButton.enabled = true; eraserButton.enabled = true; textButton.enabled = false; draw = false; text = true; painter.strokeColor = 'transparent'; });
The undo button is when the user wants to go back to an earlier version of his note. Every time the user touches the screen an image of the note is saved in a temp folder. When the user presses the button, it will set the last saved image as background and delete the image.
var undoButton = Titanium.UI.createButton({ width: 45, height: 45, right: 65, top: 15, backgroundImage: "../images/undo_button.png", backgroundSelectedImage: "../images/undo_button_hover.png" }); undoButton.addEventListener('click', function(){ var dfo = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/temp'); var fid = dfo.getDirectoryListing(); fid = fid.splice(1, fid.length - 1); var lengte = fid.length - 1; Ti.API.info(lengte); if (lengte != -1) { var lengte2 = lengte - 1; painter.clear(); painter.setBackgroundImage(parent + '/files/' + foldername + '/temp/' + fid[lengte2]); var file = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/temp/' + fid[lengte]); file.deleteFile(); } save(); });
Chapter: Pigeon
54
Klaas De Meester
Pigeon
2010/2011
With the clear button I delete all the temp images and put a white image as background.
var clearButton = Titanium.UI.createButton({ backgroundImage: "../images/revert_button.png", backgroundSelectedImage: "../images/revert_button_hover.png" }); clearButton.addEventListener('click', function(){ painter.clear(); var dfo = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/temp'); var fid = dfo.getDirectoryListing(); fid = fid.splice(1, fid.length - 1); var lengte = fid.length - 1; Ti.API.info(lengte); if (lengte != 0) { var lengte2 = lengte - 1; //painter.setBackgroundImage(parent + '/back.png'); painter.setBackgroundImage(parent + '/files/' + foldername + '/temp/' + fid[0]); } save(); saveTemp(); });
Before going to the save part I just wanted to show you the pen slider. With the pen slider the user can choose the thickness of the line he wants to draw.
var penSlider = Titanium.UI.createSlider({ leftTrackImage: '../images/slider_full.png', rightTrackImage: '../images/slider_empty.png', thumbImage: '../images/slider_handle.png', highlightedThumbImage: '../images/slider_handle.png' }); penSlider.addEventListener('change', function(e){ painter.strokeWidth = e.value; });
Chapter: Pigeon 55
Klaas De Meester
Pigeon
2010/2011
The saving part consists in 2 parts. The first part is save() the second part is saveTemp(). SaveTemp(): Every time the user touches the screen I take a picture of it and save it as a new image in a temp folder. Save(): Every time the user touches the screen I take a picture of it and save it as an image in the folder of the course. With every new note made, I save it the first time as a new image. The second time he touches the screen I overwrite the image. I did this because I didnt want to use a button to save the notes.
function save(){ Ti.App.fireEvent('changeOpenName', { name: imagename }); var theMap = painter.toImage(); //var thumbnail = painter.toImage(); var thumbnail = theMap.imageAsThumbnail(100); var d = new Date(); deleteDir = parent + '/files/' + foldername + '/'+ imagename; deleteName = imagename; var ft = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/thumbnail', imagename); ft.write(thumbnail); var f = Titanium.Filesystem.getFile(parent + '/files/' + foldername, imagename); f.write(theMap); if (firstData == 0) { firstData = 1; var Pdate = d.getDate() + '-' + (d.getMonth() + 1) + '-' + d.getFullYear(); Titanium.API.info(Pdate); da.insertNotesList(foldername, imagename, Pdate, 'DRAWNEWNOTE'); Ti.App.fireEvent('Scroll', {}); Ti.App.fireEvent('updateNotesList'); }; }; function saveTemp(){ var dfo = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/temp'); var fid = dfo.getDirectoryListing(); if (fid != null) { fid = fid.splice(1, fid.length - 1); var lengte = fid.length - 1; var theMap = painter.toImage(); var d = new Date(); var filename = d.getTime() + ".png"; var f = Titanium.Filesystem.getFile(parent + '/files/' + foldername + '/temp', filename); f.write(theMap); if (lengte != -1) { painter.setBackgroundimage(parent + '/files/' + foldername + '/temp/' + fid[lengte]); } } }
Chapter: Pigeon
56
Image Library

57
Klaas De Meester
Image library
2010/2011
6 Image library Introduction

6.1 What is an image library
Its a web-based application that allows users to manage their pictures in WordPress. Users can also add/edit images. The user can add information and associate tags, or a series of words to their submission. Once tagged, the user can search images, using tags to find the image they want. This is the true power of tagging. It creates another vector for searching and organizing relevant content that is dynamic.
6.2 Image library in action
Chapter: Image library
58
Klaas De Meester
Image library
2010/2011
6.3 How does the Image library work?

6.3.1 Before starting I made use of TrimPath(l6)17 to make the design of this application. With TrimPath you can generate html, based on a template, this is done via JavaScript. It s a lightweight open source component that lets you have template- based programming while running in a web browser. The engine is written entirely in standard JavaScript. In this application I had to use a CSV18 file to store all the data in. CSV stands for Comma Separated Values, sometimes also called Comma Delimited. A CSV file is a specially formatted plain text file. It stores spreadsheet or basic database-style information in a very simple format. It has one record on each line, and each field within that record separated by a comma. E.g.: Year;Make;Model; 2011,Audi,R8 20010,Nissan, Z370 2008,Audi,A4 6.3.2 Architecture HTML
Request Send PHP19
JavaScript
Ajax20

17 TrimPath: http://trimpath.com/ 18 CSV: Comma Separated Values 19 PHP: Hypertext Preprocessor 20 Ajax: a group of interrelated web development methods used on the client-side to create
interactive web applications.
59
Klaas De Meester
Image library
2010/2011
When a user goes to the application, it will do an AJAX request to an external PHP file. It will first retrieve all the data from the CSV file and put it in an array.
$csv = new parseCSV(); $csv -> sort_by = 'tags'; $csv -> auto('_books.csv'); foreach($csv->data as $value) { $myArray = explode(',', $value['tags']); foreach($myArray as $value2) { $id++; $arr[$id][] = $value['rating']; $arr[$id][] = $value['title']; $arr[$id][] = $value['author']; $arr[$id][] = $value['type']; $arr[$id][] = $value['asin']; $arr[$id][] = $value2; $arr[$id][] = $value['image']; } }
The PHP script will return the information that the application asked for. In this application it will return a list of all the tags and Images. 6.3.3 The tag table view The tags will be added in a table. I added a search feature, so people can search for tags when the list is too long. A table consists out of two parts: - The header: This is the top of the table, usually used to add a title to the list. - The body: Contains all the information under the header. This is the request Im doing in the JavaScript file, when the document is ready. Im asking via an Ajax request the PHP file for all the tags the user already used before, via the tag_value request.
function tagContent() { $.ajax({ url: "php/dataretriever.php", type: "GET", data: { "tag_value": "tags" }, // This executes when the PHP service finished sending data to the client side success: function(data_from_php, textStatus, jqXHR) { var str_array = data_from_php.tag_value; data = str_array; // The one line processing call... var result = TrimPath.processDOMTemplate("tag_value_jst", data); // Voila! That's it -- the result variable now holds // Setting an innerHTML with the result is a common last step... dummie = str_array.length data2 = "There are " + (str_array.length - "1") + " results" $('#tags_holder').html(result); $('#tag_count').html(data2); searchTags(); }, error: function(jqXHR, textStatus, errorThrown) { //alert("There was some error with the PHP service: " + textStatus);} });
60
Klaas De Meester
Image library
2010/2011
The PHP file will handle the request tag_value and send back the data:
if($tag_value == "tags") { $tag_array["tag_value"]; while($element = current($arr2)) { $tag_array["tag_value"][] = key($arr2); next($arr2); } $data_to_send = $tag_array; echo json_encode($data_to_send); }
The JavaScript file will get the data back. Now I will make use of the TrimPath for generating the html with the array I got back.
<textarea id="tag_value_jst" style="display:none;"> <form action="#"></div><div id="search_holder"><input type="text" name="search" value="" size="15" id="id_search" placeholder="search tag" /><div id="icon"></div></div> <span class="loading">Loading...</span></form> <table id="matrix" cellpadding="0" cellspacing="0"><tbody><tr id="noresults"><td colspan="6">No Results</td></tr> {for t in data} {if t != ""} <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" ><td> <a href="#" onClick="return false" onmousedown=javascript:imageContent("${t}");>${t}</a></br></t> </tr> {/if} {/for} </tbody> </table> </textarea>
In this application the header is used for searching tags in the body. This is very easily done by adding this in the JavaScript file.
function searchTags() { $("#id_search").quicksearch("table tbody tr", { noResults: '#noresults', loader: 'span.loading' }); }
61
Klaas De Meester
Image library
2010/2011
Each time a user types a letter in the search box I will update the table tbody with the tag the user is searching for. E.g. when I search for the word tag, I will get this:
If there is no tag matching the tag the user is searching for, I will show this:
62
Klaas De Meester 6.3.4 The image view part
Image library
2010/2011
When a user clicks a tag, it will show all the images with that tag. I used the same code as I did for showing all the images when the application starts up, the only difference is that I filter the images linked to the clicked tag. The application uses infinite scroll. I only load 15 images. When a user scrolls down I will load another 15 images underneath the previous, till all the images are shown. It works the same way like twitter does, when you scroll down it loads more tweets. Im working with following setup: a header (with info) and the container for the images. The thumbnails are grouped in sets of 5 rows. Each thumbnail contains a link, referencing to the image information First I made a call to the PHP script to retrieve a list of images with that tag (same way I did to get the tags): The call:
$.ajax({ url: "php/dataretriever.php", type: "GET", data: { "infinite_value": "infinite" },
Getting the data and sending it back:

$infinite_value = $_REQUEST['infinite_value']; header("Content-type: application/json"); header("Cache-Control: no-cache, must-revalidate"); header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); if($infinite_value != "") { foreach($csv4->data as $value4) { $id3++; if($alltitlear[$id3] != ""){ $imageArray["infinite_value"]['imname'][] = $allimagear[$id3]; $imageArray["infinite_value"]['titles'][] = $alltitlear[$id3]; } } $data_to_send = $imageArray; echo json_encode($data_to_send); }
63
Klaas De Meester
Image library
2010/2011
The next the thing to do is, looking when the scroll bar is near the bottom of the page.
In order to determine weather the scroll bar is near the bottom of the page, I need three variables: 1) "contentHeight" the height of the initial gallery 2) "pageHeight" the height of the visible page in the browser 3) "scrollPosition" the position of the scroll bar measured from the top - contentHeight pageHeight - scrollPosition
64
Klaas De Meester
Image library
2010/2011
Each time the user scrolls, I will check the distance from the scroll to the bottom of the page. If the scroller is 100px from the bottom, I will add the next 15 images underneath the previous.
function scroll(){ if(navigator.appName == "Microsoft Internet Explorer") scrollPosition = document.documentElement.scrollTop; else scrollPosition = window.pageYOffset; if((contentHeight - pageHeight - scrollPosition) < 640){ n = n3; n2 = n3 + 15; $.ajax({ url: "php/dataretriever.php", type: "GET", data: { "infinite_value": "infinite" }, success: function(data_from_php, textStatus, jqXHR) { var str_array = data_from_php.infinite_value; var imageshowArray = []; for(var i = n; i < n2; i++) { if(str_array['imname'].length > i || i < n){ n3++; imageshowArray.push({ image: str_array['imname'][i], title: str_array['titles'][i] }) } } var result = TrimPath.processDOMTemplate("images_value_jst", { "imageshowArray":imageshowArray }); dummie = str_array['imname'].length; var content = $('#images_holder').html(); $('#images_holder').html(content + result); $('#imagesCount').html(imageCount); $("a.single_image").fancybox(); contentHeight += 750; }, error: function(jqXHR, textStatus, errorThrown) { //alert("There was some error with the PHP service: " +
textStatus);
} });
} }
65
Klaas De Meester 6.3.5 Adding/editing images
Image library
2010/2011
On the left hand side of the screen, you see the information screen of an image. People will see this when they click on an image. When a user clicks on the edit info button, an edit screen will open. The screen opens the same way like when you press on the thumb in the information screen. The only difference is that a use a different plugin. For the edit screen I use jqModal(l7)21 and for the image I use fancybox(l8)22, for showing the image full screen.
The edit screen uses the same code as the new image screen. The only difference is that in de edit screen an extra action is done. I need to get the data from the CVS file. This is very easily done. Its just same way like I did to retrieve the images from a clicked tag. But now Im not using the tag as filter to get the data, Im using the image name. This is a closer look on the edit screen:

21 jqModal: http://dev.iceburg.net/jquery/jqModal/ 22 FancyBox: http://fancybox.net/
66
Klaas De Meester
Image library
2010/2011
As you can see users can upload images, this is done with Uploadify(l9)23. When the image is uploaded they will get a preview from it. The user can also add some extra information to the images. There also had to be a feature that allowed the user to add tags to the image. When they add a wrong tag, or they want to delete it, the user just has to press the X next to the tag:
After clicking Add:
Deleting miss added tags:
After clicking edit info, everything gets saved and the screen is getting updated with the edited information.

23 http://www.uploadify.com/
67
Poster generator
Klaas De Meester
Poster generator
2010/2011
7 Poster generator Introduction

7.1 What is the poster generator
It allows professors to generate a poster for conferences they will give. This is how the application has to work. They first have to choose a template, and then they have to add some information on what they will talk about. Theres also an option to add some images on the posters. After entering all this information, a poster had to be generated. 7.1.1 Before starting This was a project that Maarten already worked a week on. I had to add the following features: - - - - - I had to add field information. When a user clicks a field, it had to show a box with some explanation on what they could write. I had to add an upload feature, so people could upload images. There had to be field validation, applying certain rules to data within a field. There had to be a feature which allowed the user to drag images within a DIV A feature that allowed the user to select Sponsors from a list.
Chapter: Poster generator
69
Klaas De Meester 7.1.2 Field Information
Poster generator
2010/2011
I added this with jQuery tooltip. A tooltip is, when a user clicks or hovers on an element, it will show more information about that element. I just had to give a title with each input field. When a user clicks in the input field, it will be showed as a tooltip.
<div> <label for="subtitleFormInput"> Subtitle </label> <input id="subtitleFormInput" title="enter a subtitle" name="subtitleFormInput" type="text" placeholder="Subtitle"/><span id="subtitleFormInputInfo"> </span> </div>
I also had to give a style to the tooltip. This is done in the CSS file.
.tooltip { background-color:#000; border:1px solid #fff; padding:10px 15px; width:200px; display:none; color:#fff; text-align:left; font-size:12px; /* outline radius for mozilla/firefox only */ -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; }
This is how it looks:
70
Klaas De Meester 7.1.3 Image-uploader
Poster generator
2010/2011
Maarten had already implemented an Image uploader, but the problem was, when you added 2 instances from the image up loader on one page, the image up loader got corrupted. I spend many hours on searching for a solution. Also Ozkar searched on it, but we didnt find a good solution. I tested many different plugins, but there werent many plugins that could handle 2 instances on one page. After searching a while I found Uploadify, which could handle 2 or more instances. Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM24 element on a page. Uploadify is easily implemented. You just need to download the latest version of it on the their website (l10)25. When the files are saved, it just needs to be extracted in the root of the site. When thats done, this has to be added in the on ready function of the javaScript file:
$('#file_upload').uploadify({ 'uploader' : '/uploadify/uploadify.swf', 'script' : '/uploadify/uploadify.php', 'cancelImg' : '/uploadify/cancel.png', 'folder' : '/uploads', 'auto' : true }); });
In the HTML file, you need to add the following:

<input id="file_upload" name="file_upload" type="file" />

24 DOM: Document Object Model. 25 http://www.uploadify.com/
71
Klaas De Meester
Poster generator
2010/2011
This is for adding one instance. If you want to add 2 or more instanced, you need to give a unique id to it. I did it this way: JavaScript:
$('#file_upload2').uploadify({
Html:
<input id="file_upload2" name="file_upload" type="file" />
In the PHP file I renamed the name of the image with a unique name, so images wouldnt be overwritten. As you can see, the name consists of a timestamp. Its the time when the image is uploaded. I also added some random chars
function RandomString($length=35) { $randstr=''; srand((double)microtime()*1000000); $chars = array ( 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v ','w','x','y','z','1','2','3','4','5','6','7','8','9','0'); for ($rand = 0; $rand <= $length; $rand++) { $random = rand(0, count($chars) -1); $randstr .= $chars[$random]; } return $randstr; } $randomteil = RandomString(8); $timestamp = time(); $name = $timestamp.$randomteil;
I had to get the unique names from the images back to the js file. Normally this is done fairly easy with a return statement. But the problem was, the data first had to pass an swf file. After searching I found a solution for it. When the image is successfully uploaded, it will send test data to the swf file. I just had to change the test data with the names of the uploaded images. Now I got the new name back, as shown in the screenshot:
72
Klaas De Meester 7.1.4 Image drag feature
Poster generator
2010/2011
There also had to be a feature that allowed the user to drag images within a DIV. I searched the Internet and I found a drag and drop feature on the jQuery site. I read the documentation and saw it was possible to drag objects within a div. I started to implement the plugin in the application. But when I wanted to test the plugin I saw it didnt drag images that were bigger than the width and height of a div. After reading the documentation and searching on Google, I found a good plugin to fix it. jQdraggable, I just had to add the plugin. And link every image at the plugin. The html file:
<div id="leftBlock1"> <div id="image1"><img class="uploadedImage" src="uploads/led1.png"> <div class="imageName"><p>LED's used in the ferris wheel</p></div></div> <div id="summary"><p><p>The LED is a semiconductor light source. It is based on the generation of photons by a direct bandgap material. It is due to the energy released by the recombination between electrons and holes in a diode.</p></p><hr class="clear"><div id="quote"> </div></div> </div>
The JavaScript file:

$('#image1').drag();
Maarten also needed the coordinates of the image within the div. I added a test button, that call the function getPost().
<input type="button" value="Click Here" onClick="getPos();">
In the javaScript I run the function getPos(), it will retrieve the coordinates from the image.
function getPosition() { var newPos = $('#image1').css('background-position'); $('#image1').css('background-position',newPos ); alert(newPos); }
73
Klaas De Meester
Poster generator
2010/2011
This is how it looks:
74
Klaas De Meester 7.1.5 Sponsor selector
Poster generator
2010/2011
The last thing I had to do was to add a feature that showed images from sponsors that where used a lot. I had to retrieve every image from the sponsor folder and add the logos in a grid. The images had to be selectable, so users could select logos from the sponsors they wanted to add. I added the names of the selected logos in an array, so Maarten could add it in the database of his application. I made a PHP script that gets all the images from the sponsor folder and return it to the html file. There they will be shown in a class getSelected.
$location = "../uploads/logos/"; $folder = opendir($location); $pic_types = array("jpg", "jpeg", "gif", "png"); $index = array(); while ($file = readdir ($folder)) { if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types)) { array_push($index,$file); } } closedir($folder); asort($index); foreach($index as $files) { $info = getimagesize($files); echo "<li><img src=\"".$location."" .$files."\" alt=\"".substr($files,0,strrpos($files,"."))."\" width=\"".$info[0]."\" height=\"".$info[1]."\" /></li>\n"; } ?>
75
Klaas De Meester
Poster generator
2010/2011
To see which image the users have selected, I made a PHP script. The script will look which image is selected from the getSelected class. Every image thats selected will be pushed in the arrFocusedSelected Array.
$(document).ready(function() { var getSelected = $('#gallery li'); getSelected.click(function(){ $(this).toggleClass('sponsorImages') }); $('a').click(function(){ var getSelected = $('#gallery li.sponsorImages'); arrFocusedSelected = []; getSelected.each(function(){ arrFocusedSelected.push($(this).find('img').attr('src')); }); }); });
Here you can see it works:
76
Funky donkey
Klaas De Meester
Funky donkey
2010/2011
8 Funky donkey
8.1 What is Funky donkey
Its a flash based application. Ive worked 2 days on this. The game is a psychology experiment to see how people will react on test they have to do. The user has to choose a door. Behind each door are apples. The amount of apples shown behind the door are for the donkey. The donkey can get more apples but it can also loose apples. The donkey has to end with positive apples. By doing this test they can see how people will react, when they get positive apples.
8.2 Funky donkey in action

This is the start screen.
Chapter: Funky donkey
78
Klaas De Meester
Funky donkey
2010/2011
As you can see, the donkey has a positive total of 152 apples.
The user will see this when the donkey has a negative amount of apples.
Chapter: Funky donkey
79
Appendix
Klaas De Meester
Appendix
2010/2011
9 Appendix
9.1 JSON
JSON (l10)26 is a lightweight format that is used for data interchanging. It is also a subset of JavaScript's Object Notation (the way objects are built in JavaScript). JSON is built on two structures. - A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array. - An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence. When working with JSON and JavaScript, you may be tempted to use the eval() function to evaluate the result returned in the callback, but this is not suggested due to security reasons (malicious data can be sent from the server to the client and then evaled in the client script with harmful effects). Therefore, one must always try to use Crockford's (l11)27 script that checks for a valid JSON before evaluating it. It will recognize only JSON text, rejecting all scripts. An example of how a JSON schema could look like: The following example shows the JSON representation of an object that describes a course. The object has an integer field for id and string fields for title, s_part, locationNotes, s_location and s_term, and contains a list (an array) of s_days objects.
{ "id": "105", "title": "Scientific Computing", "s_part": "part1a", "locationNotes": "", "s_location": "Dungeon, Old Physical Chemistry ", "s_term": "Michaelmas", "s_days": { "Sunday": [ { "start": "12:00", "end": "13:00" } ] },
This was just a small example of how it could look like

26 27
Source: http://stackoverflow.com http://www.json.org/js.html
Chapter: Appendix
81
Klaas De Meester
Appendix
2010/2011
9.2 SQLITE
SQLITE is used as a database engine for low medium traffic websites and applications. The amount of traffic that SQLITE can handle depends on how the application uses its database. Its good for situations where you dont have access to a real database and still want to have the power of a relational db. You cant expect everyone to have installed MySQL 28. Simply said, SQLITE is a way to save data in a database. It makes no logical sense to have to manage an individual file for a Timetable. Especially when there is a large course schema to maintain. I worked very structured on implementing the database, and filling it with data. This is how I worked:
Here you can see 2 folders with files, needed to retrieve the data (JsonDataRetriever.js) and to handle the data. I used DataAccess.js for adding/ retrieving data from the SQLITE database and the models folder is the link between them.
Chapter: Appendix
82
Klaas De Meester
Appendix
2010/2011
This is how the SQLITE database looks when you open the sql file
Chapter: Appendix
83
Klaas De Meester
Appendix
2010/2011
9.3 Pigeon software

9.3.1 Titanium
Appcelerator Titanium is an open source mobile application development tool for Iphone and Android, which allows you to code apps in HTML, CSS and JavaScript. Its one of several phone web based application framework solutions allowing web developers to apply existing skills to create native applications for iPhone, BlackBerry and Android. Appcelerator Titanium is frequently compared to Adobe Air for developing desktop applications. Traditionally, proprietary tools and specialized skills are required to develop native software applications for each platform. I tested the platform for many weeks. I developed pigeon using JavaScript. Titanium makes the Ipad development process a whole lot easier. Im not the only one who likes to develop with it. There are 1.5 million active developers, 20.8K applications and 20M active users. This is positive, if you cant find something or when youre stuck on something you can always ask questions on the site of Appcelerator and Stackoverflow29. Getting the Ipad emulator installed correctly is very easy. Just go to the website from Appcelerator30, click download and install it. That's all.

29 http://www.stackoverflow.com/ 30 http://www.appcelerator.com/
Chapter: Pigeon
84
Klaas De Meester 9.3.2 Aptana Studio
Appendix
2010/2011
I'd definitely suggest Aptana studio as an IDE31 to use in conjunction with Titanium. Aptana Studio is a free open source cross platform compatible IDE. Aptana is based on the popular Eclipse, which is more used for PHP32 and Java, for example: the development of android applications. The default Aptana studio editor comes with full support for HTML33, CSS34 and JavaScript. When you want to use it to develop Ipad/Iphone applications and you want auto completion, youll need to download an extra library. Thats one of the things I like about using Aptana, the tags suggestion, tags explanation and the auto completion feature. When you type a tag, it will show a list of similar tags and give you an explanation of what each tag does. This is a very handy feature when you program with Titanium, you can see the properties of each object.

32 HPP: Hypertext preprocessor
31 IDE: Integrated development environment. IDE is a software application that provides
comprehensive facilities to computer programmers for software development.

33 HTML: Hypertext Markup Language 34 CSS: Cascading Style Sheets is a style sheet language use to describe the look and formatting of
document written in a Markup Language
Chapter: Pigeon
85
Klaas De Meester
Appendix
2010/2011
This is how to add the autocomplete library in Aptana: First download the timobile.js file (l12)35. Open Aptana studio, go to references > right click on default profile > add files
Select the timobile.js file and click open

35
http://jamesdlow.googlecode.com/svn/trunk/Eclipse/Aptana/Titanium/com2.appcelerat
or.titanium.mobile/support/timobile.js
Chapter: Pigeon
86
Klaas De Meester Now you should see this:
Appendix
2010/2011
Thats all, now you can test if it autocompletes.
Chapter: Pigeon
87
Klaas De Meester 9.3.3 Xcode
Appendix
2010/2011
Xcode is a suite of tools, developed by Apple, for developing software for Mac OS X36 and iOS. Xcode 4. The latest major version is available on the Mac App Store. The main application of the suite is IDE . The Xcode suite also includes most of Apple's developer documentation, and Interface builder, which is an application used to construct graphical user interfaces. Xcode consists of numerous pieces: - Xcode.app: the IDE is used for coding, the debugger and compiler for the applications. It works pretty well and will attempt to autocomplete the function names or class names. It will also point you when names/classes are written wrong. - Interface Builder.app: The UI used to craft the GUI for the application and tie the actions of GUI to the code and receive its outcomes. - Developer Tools Library: contains the source code documentation. Xcode is used to make modules in objective C, which you can add to a project in Titanium. By adding modules, you can expand the possibilities of the application. I used the paint and Bluetooth module in my project.

36 Mac OS X: A series of Unix-based operating systems and graphical user interfaces developed by
Apple
Chapter: Pigeon
88
Klaas De Meester
Appendix
2010/2011
9.4 Pigeon hardware needed

9.4.1 Ipad
The Ipad is a tablet computer designed and developed by apple. Primarily it is used for audio-visual media, games, .The Ipad runs on the same operating system as the IPod Touch and Iphone and can run its own applications as well as Iphone applications. 9.4.2 Mac
As I already mentioned, you can only make applications on a Mac. Before you start programming for the Ipad/Iphone, you better have a recent Mac. It will help him avoiding a lot of frustrations because every time you want to test the application the code needs to be generated before showing it in the emulator.
Chapter: Pigeon
89
Klaas De Meester
Appendix
2010/2011
10 Conclusion
After doing 4 projects in CARET I learned there are many ways to right your code. You can do it the fast way, or you can do it less fast and more efficient. If you do it the fast way, you will end up with bad code or code that isnt efficient. One of the key elements I learned in CARET is that the code should be well structured, efficient and readable. Also its very helpful when you add comments to your code, not only for yourself but also for the people who will work on the project after you. I also learned the difference between a web application and application you make for devices like the Ipad. When you make an Ipad application you need to keep in mind youre working with a touch screen and not with a mouse. I made this fault the first week when I worked on the Ipad application. Its also important to challenge yourself and put the bar high when developing. Never choose the easy way, you wont learn anything from it. Neither do you have to choose the impossible way. And dont be ashamed when some parts are not possible to realize, its not a shame to try another approach. I had to put the bar quite high. It was a big challenge but eventually I succeeded. In school you learn quite a lot about programming. You learn to program in many different languages. Here I learned that not only the way you program is important but also the user experience and the usability. Its not only the functionalities and the extra stuff that makes the application, the design is also very important. This was important for me, dont be happy when your application looks a bit like the design made by a designer. It needs looks 100% like the design. My stay at CARET has thought me a lot, things you dont learn at school. Like how to react when people say something about your work. Listen to people and understand what they want you to realize. I also learned how to be a better programmer, how to work in a group, to challenge myself, . If people would ask if I would do it again, I would say yes. I learned so many things, and I hope the people who will come after me will think the experience.
Chapter: Pigeon
90
11 Weekly report
91
Klaas De Meester
Weekly reports
2010/2011
Report Week 1: Monday 14 March Friday 18 March

Log
Day 1
- Introduction to Caret - Explanation of the first project we had to make - Brainstorming on how to make the application - Doing Research
Day2
- Roundup with Bert - Install the new software while doing some brainstorming - Doing research how we could make the application - Starting with programming the calendar
Day3
- Api is ready to make the backend - Calendar almost finished - starting with writing JSON to retrieve the information - Roundup with Bert
Day 4
- Finished the backend - Started programming the list view, which would show the lessons - Roundup with all the colleagues from Caret - Added geolocation and transitions to the application
Day 5
- Recoded the calendar, problems with the HTML/CSS calendar I made - Lunched with the colleagues - Cleaned the code, and put all the test applications together
Chapter: Weekly reports
92
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with an introduction to Caret and the colleagues, they told us what they expected from us. After that we got told what our first project was. We had to make an Ipad Timetable application, which the students of Cambridge would use for their courses. The Timetable application needed to contain information about courses in departments. this allows students to see where they could be going for their next course. They currently didnt have a finished product using the timetabling data. We had to come up with new ideas, ideas that where possible to develop in one week. The motto was surprise them!. We had to take in account that the device was a mobile device, its not a desktop, it had different HCI37 from a desktop. We had to make use of the local storage and we had to keep in mind that turning on networking devices (waking from sleep) impacts battery life in big way, as does activating other peripherals (camera , gps ,), battery life was one of the top priorities, without cutting functionality. The first problem was, I never programmed for an Ipad before, I only did android. So the first things I did, was doing some research. After searching I found a program which could help me to make the Application, Titanium from Appcelerator. You can use many languages to program with, one of them is JavaScript. It also has a good Ipad simulator, which you can use to test the applications on it. The second problem were, the features we wanted to add and the design we would use. So we had to brainstorm first, we had to come up with good ideas, which we had to show to Bert, so he could give the green light for making it. Started with programming the calendar, in html/CCS/JavaScript. Its not that difficult, I found enough information on the internet. The back-end was more of a challenge, because we had a deadline. I first had to study how the API looked like, before I could start. Luckily I found a fully functional twitter application on Github, which also uses JSON, I used this as an example to make the back-end. After doing that, I started implementing geolocation and a list view, which would show the courses and the hours of lessons the students had on that day. The list view was easy to make, but there were some error while displaying the data, after searching a while I found my fault, I closed a } too early.

37 Humancomputer
interaction (HCI) is the study of interaction between people (users) and computers. It is often regarded as the intersection of computer science, behavioral sciences, design and several other fields
93
Klaas De Meester
Weekly reports
2010/2011
I thought everything was working well, till Thomas tested the application on his Ipad, he found a bug in the calendar. When he pressed too long on a date the Ipad tried to copy the text of the date. We had to remake the calendar, but we could use the JavaScript code I used for my calendar. The program was almost finished, so I started cleaning the code. On Monday I want to test the application on bugs and fix them, so we can show a nice fully working project to our colleagues. I hope they will be impressed by the work weve done.
94
Klaas De Meester
Weekly reports
2010/2011
Report Week 2: Monday 21 March Friday 25 March

Log
Day 1
- Cleaned the code - Chris uploaded a new Api that we had to use for or application - New Api online we had to use - Rewrote backend
Day2
- Showed the application to the boss and colleagues - Heard we could work further on the Ipad application - Searched new extras
Day3
- Found a nice extra: draw notes by hand - Searched documentation how I could do this - Started a new test application - Started to write the paint application
Day 4
- Searched more information on the paint thing - Found a module which handled painting with your hands - Implemented the module in Titanium - Read the documentation - Configured the paint application
Day 5
- Added extras to the paint application - Implemented a PDF reader - configured the PDF reader
95
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with cleaning my code, there was a lot of non-used code in the files. I also added extra information to the code, so people would know what happened in which part. While doing this, I found some bugs that I needed to fix. The list view showed too much information. After fixing this, Bert said theres an Api online, which was more structured. So I started to recode the backend, theres more information which was useful in the application. While doing this, I found some errors in the JSON Data, which Chris fixed. Late in the evening the application was ready to be shown. The colleagues and the boss where very excited after we showed the application. We could work further on it. We needed to add an extra functionality, and also make other changes. We decided to the functionality to allow a student to write notes by drawing them. The first thing I did was searching information on drawing with hands. The problem was that there wasnt a lot information about it on the internet. I decided to try coding it myself, but it didnt work that good. After doing some research again, I found a module Ti.paint, which handles drawing with your fingers. After adding the module I started testing and tweaking the module, so everything would go smooth. The module didnt handle a go back function so I had to write it myself. After searching information on the web, I found a solution to implement this. When an user touches the screen, I take a screenshot from the view where hes drawing in, saving it in a temporary folder. When people press the go back button, going back to an earlier edit, I take the last saved image and put it as a background. When thats done, the last made screenshot will be deleted. When the user saves the file, the temporary folder will be deleted and a screenshot from the view will be saved in the folder with other notes from the course. Now I had to search how to open a PDF with the Ipad application, after searching a while I came to the conclusion that the only possible way to open an PDF with Titanium, is opening it in a web view. this meant I only could open the file. My last hope to get more information about the PDF implementation in Titanium, was asking it on Stackoverflow, you always get helped fast there. But they had the same conclusion as I had, you can only open it in a web view.
96
Klaas De Meester
Weekly reports
2010/2011
So I started the implementation of it, the first thing I did was download the file, and save it local on the Ipad. When this was done I wrote the functionality for opening a file and scroll through it. Next week I want to complete the drawing application, which will be a lot of work I think. Titanium doesnt allow me to do everything. Hopefully I can add this feature, the way I think it will work. When thats done, I want to merge the PDF application with the paint application, so users can add notes to a PDF in some way.
97
Klaas De Meester
Weekly reports
2010/2011
Report Week 3: Monday 28 March Friday 1 April

Log
Day 1
- Worked on the note application - had trouble with the note application - Searched for a solution for the problem
Day2
- Searched for a solution for a problem - Found the solution, started programming - Showed the application to the boss - Continued to work on the app, the boss was happy, but he showed an other Application he used on his Ipad
Day3
- Received an Ipad which I could use to test my application - Had trouble with running the application on the Ipad - Installed license on my Imac so I could install applications on my Ipad - Had problems again, the application didnt save files on Ipad - Searched the internet, asked on Stackoverflow - Meanwhile did some tests with Ipad
Day 4
- Got answer on Stackoverflow, started with fixing - Did another test, the application did work now - Started with implementing the PDF application and the paint application In one application
Day 5
- Finished the Note application - First I wrote the back-end, after that I finished the rest, for now
98
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with working on the note application, last week I made good progress, but I wanted to finish it. So I started with coding again, fixing the problems. There were several problems. The First one was that the app saved a white image with noting on it. I fixed this one first. The reason it saved white images was because I worked with 2 views and he took an image from the other one. After that I wanted to put the image on the view. Every time I did that, the program crashed. After searching the internet I didnt find anything about it. So I tried to put the image as background, luckily it worked. Otherwise all my work I did before, would be for nothing. The note application also needed a go back function, so I started to make it. I did it like this: A screenshot was taken every time the user touched the screen which I put in a temporary folder. When the user press go back to an earlier edit, I put the last saved image as background and deleted it. When the user pressed save I took a screenshot from the view and I only saved that image. I showed the application to the boss, he was quite impressed by the work I did. But he wanted more, so he showed on his Ipad an application he had. I had to put more extras in, like highlighting text, adding extra text, So I went to Bert, to ask how I should do it, he gave me some ideas, which I could use. Also he told me, it would be nice if there would be a scroll view under/next to the PDF with avatars from the notes the user took in the PDF. Later in the week I got my own Ipad from work to test the application on it. The problem here was, you needed a license to install apps on the Ipad, which Caret didnt have. Luckily Maarten, my other colleague had one. It took an hour before I could install the application on my Ipad. After installing and testing the app on the Ipad, I saw my application didnt save images or files on the Ipad. I searched the internet and I read that apple blocks this for security reasons. I posted my problem on Stackoverflow, and they helped me with the problem. Meanwhile I did some other tests with the application, to see if it ran smooth. Eventually this was fixed, I started to put everything together. I made a new application, first I implemented the PDF opening application, before I could test it with the note application. It went quiet good. Everything worked fine, even on the Ipad.
99
Klaas De Meester
Weekly reports
2010/2011
Next week I want to add the text highlighter and the functionality to add text in the notes. I also want to start with skinning. But I think Thomas wants to do this, because he designed it and hes very good in skinning. I also want the scrollviews and the transitions back in like the application we showed last week.
100
Klaas De Meester
Weekly reports
2010/2011
Report Week 4: Monday 4 April Friday 8 April

Log
Day 1
- Started looking how to highlight text in images - Didnt find any information about - Asked questions on Stackoverflow and Appcelerator - Bert asked on Skype for a screencast of our work
Day2
- Worked on the transactions - Saw they posted a reaction on my question - First had to continue working on the transactions, we wanted to show a nice beta application to Bert - Made screencast, and send it to Bert
Day3
- Tried to work with xCode, the only way to add the highlight feature - Searched information on it, really wanted to add this feature - Started to implement this, it worked after a while - Had problems with it
Day 4
- Started with implementing the text feature - Tried some ways to do it, and showed them to Thomas - Added the way Thomas said - Cleaned the code
Day 5
- Added a nice image opening window - Tested everything on the Ipad - Cleaned the code, so it would run smoother
101
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with working on the highlight. I really wanted to add this to the note application. I started by searching the Internet, but didnt find anything about it. I asked on Stackoverflow and Appcelerator if there was a way to do this, hoping they could help me. Meanwhile I kept searching, until Bert asked me to make a screencast of what I already made. I needed to do this, because Bert was in America for a meeting with people from all over the world to discuss about a project (Sakai) they are working on. I started to work on the transitions, I wanted to show a nice beta application to Bert. Meanwhile people on Stackoverflow reacted on my question. The only way to implement the highlight feature was writing xCode myself. No one ever did the highlighting before. I added this later this week, first I made everything ready for the screencast. I sent the screencast to Bert, and waited for a reaction. He send a mail with a reaction on the screencast, which I added on the last page, the red text is what Bert said, the black text is what Thomas and I respond to. While Thomas was skinning the application I started to add the highlight feature, after searching I got working, doing it like this:
// I added this in the @interface CGFloat lineOpacity;

// in the init function I added lineOpacity = 1; //this sets the default value // in (UIImageView)imageView I added drawImage.alpha = lineOpacity; // this essentially grabs the value of linOpacity and sets it's alpha // Added a new call - (void)setLineOpacity_:(id)alpha2 { lineOpacity = [TiUtils floatValue:alpha2]; }
I was really happy, so I did some tests. It worked smooth, but the problem was the opacity wasnt changed every time. I searched and I tried, but I didnt find what was going wrong. I didnt want to lose a lot of time. While thinking how I could fix this, I started with adding the text feature, so people could add text notes to the image. I made different possible ways to do this, and showed them to Thomas. He chose one, which I implemented.
102
Klaas De Meester
Weekly reports
2010/2011
There was also a need to edit the previous notes, so I added a nice imageview, which people could use to edit the notes they made. After that I tested the application on the Ipad. Everything was running smooth, but I wanted it to run faster. So I started cleaning the code. Next week I want to finish the application, I want to add extra transitions, test the application for bugs, fix the highlight feature . And maybe when I have some spare time, I will add extra features. But first I want to finish what is planned, Wednesday we have to show the application to Bert.
The mail from Bert

Hey guys, I wrote down some feedback on the iPad application. Please reply inline with your thoughts. - When booting the application my first impression was that the app had not loaded. The reason why is that a greyish screen is shown and no > information at all about what courses you need to do today. I'm aware you can access the menu by tapping on the screen but this just isn't obvious. Yes, its still empty. When the app is launching we want to show the course closest to the current time. Not sure yet what to show if there is no course on that day, showing a course of another day might be confusing. - Klaas: You're showing an sql structure but are you also documenting the changes you have made? If you are making changes and don't stick to the original structure I'd like to see some reasoning for that. Also, make sure you know why you're saving something like an int or long. This doesn't make a huge difference in small applications but it's just > something you should know from a database dev point of view. sql changes where necessary, for adding the notes and the pdfs to the database, because they aren't standard implemented (maybe in the future?). - Downloading a pdf seems to work great (the 'true' should probably be replaced so I'll ignore that for now). However, it seems like accessing a >PDF should be done in an easier way. Browsing to folders>Maths>Maths1.pdf is OK but people should be able to access the PDF from the initial screen (the one where you download the PDF). The graphics are not yet visible but what we want to do is giving feedback to the user to let him know if he can watch the pdf offline (when its already downloaded) or if he still needs to download the pdf. When a pdf is clicked (and completed with downloading) we will open the pdf automatically so the user dont need to look for it. - Being able to add some drawings to the PDF is great. Two weeks ago this looked really great, I'm thinking we should move it forward now (extending the editing kit with more possibilities is one option. More important: adding text). I don't know if there are any designs on this yet but I do know having this talk with Klaas two weeks ago (looking at how the history should be shown, how saved images should be shown, etc.). I don't think Thomas was involved in this conversation. Klaas, did you talk to Thomas about this and did he know that this area needs some design input?
103
Klaas De Meester
Weekly reports
2010/2011
For the moment are writing text notes and drawing two separated features. The different tools the drawing option are the convenient tools you would expect like pencil/eraser, color and size. We will be working on a text tool soon. The user can undo his last steps with a simple undo button. It only saves the last saved picture in the database, the temp folder gets deleted after saving. -All in all, I can see that the project is making progress. The design looks great and the implementation seems to be going ok as well. However, I am a bit concerned about the communication between you two. Are you guys having regular meetings to discuss the current progress? This shouldn't take long, maybe 10 minutes every other day, and will enable you to talk to each other about the functionality your trying to implement or the designs you would like to see implemented. -The reason I'm mentioning this is because I know from experience that MCT (I don't know about Devine though) is not really promoting teamwork for most of the projects. For the moment we are working next each other. If Thomas needs something or has changed something, he can just ask Klaas or immediately tell him what has been changed and the other way around too. When there is a problem we talk about it together. - It's looking good guys so keep up the good work. Thanks! Its fun to see the work of us both coming together. We are still very motivated and working hard to make this application awesome ;-) -Bert
104
Klaas De Meester
Weekly reports
2010/2011

Log
Day 1
- Started with adding transitions - Fixed known bugs in the application - Worked further on the transitions - Tried to let Github work with Titanium
Day 2
- New Mac book pro arrived - Installed all the applications I needed to work on with the project - Worked on with the application
Day 3
- Fixed the bug in the scrollview which showed the PDF notes people made - Brainstorm session with the colleagues from caret - Added an option, which people could use to draw notes without a PDF
Day 4
- Brainstormed with Thomas to add some extra features - Had an evaluation conversation with Bert about the work I did in the first month - Searched extra information on the Bluetooth feature we wanted to add
Day 5
- Searched information on the Bluetooth feature, also asked questions on Stackoverflow and Appcelerator - We had visitors, Olivier and Henry who did their internship in Caret last year - Worked on with the Bluetooth feature
105
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started by working on adding transitions in the application. When people pressed a button a menu opens nice and smoothly with a popup animation. It all needed to be done like the mac style, so people didn't have to search what they had to do for opening a menu. Before I did that, I tested some applications that made use of calendars and timetabling. I also fixed known bugs in the application. I tested the application for some time and made some notes what had to be fixed. Bugs when the application started for the first time after it was installed on the Ipad it didn't load all the information that was retrieved from the Internet. Some other bugs were, the application didn't close some threads, they kept running in the background. We also had some problems with the draw notes feature after adding the transitions. Bert sent us a mail, explaining us how to use Github, because Thomas lost some data he had written. GitHub is a web-based hosting service for software development projects. You need GIT for it, which you need to install. With Git you can upload your project on Github. It checks what has been changed before you upload it. You can work with more people on one project, you have always an up to date version of the project. It took some time to install it. I ordered a new mac book pro, because my old computer I brought with me was acting strange and the macs at work on were very slow. I installed all the programs we used to work on the Ipad application. It took some time. Meanwhile I made some notes on the work I already did. When all of this was done, I started working again on the application. I searched on how I would fix the problem with the scrollview which didn't show the right notes every time. It always worked well, till I added the transition. After searching a while I found the solution for my problem, I added an extra column to the database to add an extra check. There was a second brainstorm session with the colleagues; Caret had a new project they had to make for the university. Its nice, that we get involved in projects so we can learn how everything happens in real world. We also had to give our opinion and come up with ideas. After that I started working again on the application. I added an option; people could add notes, without having a PDF file. This was necessary, because people also wanted to add notes from the lessons, things the teacher tells on the side. Now that our goal was reached, I brainstormed with Thomas to add some other features. I wanted to add them, while Thomas was still busy with skinning. We decided to add a Bluetooth feature. Students could use this to send notes to each other when they dont have Internet. I started to search information on it. Bert was back from America, and he started with evaluating each one of us. He told me I did a good job in the first month. I delivered good work, and he was very happy. He also asked what I expected to do when the Ipad application was Chapter: Weekly reports 106
Klaas De Meester
Weekly reports
2010/2011
finished. I told him I wanted to do something with Ayrton in jquery mobile or Ruby. He would look what was possible. There was a nice surprise, we had visitors from Belgium. Olivier and Henry who did their internship in Caret last year. I showed them what we made, they were pleased. We also had a chat with him, we told them what we did and what we thought of it. It was a nice ending of the week. Next week I want to see, what is possible with Bluetooth for Ipad. If its possible to Implement it, I will do it. If its not possible, I will search something else to do.
107
Klaas De Meester
Weekly reports
2010/2011

Log
Day 1
- Searched information on the Bluetooth implementation - Found information on the Bluetooth implementation. Started implementing it - Extracted the module I found for editing it
Day 2
- Implemented the module in the Timetable application - Started testing the edited module - Problems with security from the Ipad, It wasnt possible doing it
Day 3
- Because the Bluetooth implementation wasnt possible, I tried to implement the functionality to add text to pdf again. - Searched the Internet for information - Found information on it, it was possible to do a JavaScript injection on the web view
Day 4
- Went to Kris, asking her if it was possible to edit the json data - Started coding - Stopped earlier
Day 5
-Bank holiday
108
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started by searching information on the Bluetooth implementation, I didnt find lot information on it. I only found a module that wasnt ready yet. But I gave it a try and I started by looking how the module worked. After I started editing the code, it took a long time before I got something. Im not used, to using Xcode. After some time I found out how I could do it. When I was done, I implemented the module in the Timetable application. I started testing it on the emulator from titanium, everything worked good. When I wanted to test it on the Ipad, it gave trouble. I could send messages to other devices on the emulator. But when I tried it on the Ipad itself, it wouldnt work. The Ipad searched for devices, and found them. When I tried to connect to a device there were some errors. I investigated these errors and found out that other people had the same problems. There wasnt a fix yet, so I had to wait. Meanwhile I had a chat with Bert, explaining my problem. He understood it, so I searched for something I could implement. I brainstormed, and searched the Internet. I found, that it was possible to get the position of the page from a PDF, using Eval38. So I thought, if I can get this information, maybe its possible to add text to a PDF. The only problem was, that I had to know how much pages the PDF has. I tried a lot of ideas and I thought a lot about on how I could this. I went to Kris, who does the databases for our application. I asked if it was possible to add new data to the database. Data that was necessary for implementing text in the PDF. She said it was possible. I had to mail her, telling her what needed to be changed. I first tried if it was possible to add the text via this way. If it isnt possible, she doesnt have to put time in this. I started coding. But I didnt have a lot of time because I could stop early; I had to get the train to London, spending the weekend with my girlfriend. Next week I want to work on the PDF implementation, when that is done I want it to show my work to Bert.
38 invoke JavaScript inside the context of the webview and optionally, return a result

109
Klaas De Meester
Weekly reports
2010/2011

Log
Day 1
-Bank holiday
Day 2
- Continued to work on the text implementation - Had some problems trying implementing it - Got some errors, which I tried to fix
Day 3
- Fixed the errors - Implemented the text feature in the Timetable application. - Tested the application again, searching for bugs
Day 4
- Changed saving notes with a button to auto saving - Did some new bug fixes - After some time, pictures got corrupted after overwriting it
Day 5
-Bank holiday
110
Klaas De Meester
Weekly reports
2010/2011
Summary
This week I worked on with the text implementation in a PDF. With the documentation I found on the Internet I started coding again. The UI element WebView is known, not only for viewing HTML documents but also for PDF files. Unfortunately, the WebKit engine doesnt support adding text. The idea was to get the x and y offset coordinates where the user clicked in the PDF document. On that place I wanted to add a text area. Students could use this to add text notes in the PDF. With a little effort I tried implementing it. When the PDF got opened for the first time in the WebView, I defined a variable for the page height and gave the number of pages from the PDF document: var pdfView = Titanium.UI.createWebView({ scalesPageToFit: true, url: 'document.pdf' }); pdfView.addEventListener('load', function(e)( var documentHeight = pdfView.evalJS('window.outerHeight'); var innerHeight = pdfView.evalJS('window.innerHeight'); var ratio = innerHeight/pdfView.height; pageHeight = parseInt(ratio * (documentHeight/numPages), 10); pdfView.evalJS("var currentPage = 1;"); pdfView.evalJS("window.onscroll = function() { yCoordinat = parseInt(window.pageYOffset) ; xCoordinat = parseInt(window.pageXOffset") ; }); }); I started doing some tests. When I clicked on the PDF I got the x and y offset coordinates. I could also add a text area, but I noticed a problem. While scrolling trough the PDF, the text area didnt move along with. I searched for the problem, but I didnt find it. I was disappointed, Id put my time in it and I really wanted to add this. Thomas asked me to implement the functionality to save notes without clicking a save button. I started changing the code. It was now possible to save notes without clicking a button. First I got some errors, I got the following message in my console ImageIO: <ERROR> JPEGCorrupt JPEG data: premature end of data segment . The picture got corrupted after overwriting it. After having searched quite some time I found the problem. Now everything was almost finished, I started doing user tests on the application. I searched for bugs and I also wanted to test the user experience. I didnt find any bugs anymore and everything was running smooth. Next week I want to talk to Bert on Skype, hes in Belgium for the moment. I tried to talk to him today, but he wasnt online. I want to talk to him about the application and what needs to happen next. Chapter: Weekly reports 111
Klaas De Meester
Weekly reports
2010/2011
Report Week 8: Monday 2 May Friday 6 May

Log
Day 1
-Bank holiday
Day 2
- Worked on the Ipad application while waiting till Bert came online - John, the boss talked with me about the Ipad application. I had to secure our application with a user login - Had a meeting with Kris. We talked about ideas, on how to add the user login - Talked with Bert on what I had to do
Day 3
- Searched information on security with Titanium. - Searched information on shibboleth. - Documented all the information I found on the Internet.
Day 4
- Kris came to me, telling me shibboleth wasnt an option anymore. - Searched information on OAuth authentication. - Tested applications that made use of OAuth authentication
Day 5
- Showed Kris on how OAuth worked with titanium. - Talked with Bert, so he was up to date on what I was doing. - Made a screencast of the application and send it to Bert.
112
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with working on the Ipad Timetable application. I did some tests on the Ipad and the Ipad 2, while waiting till Bert came online. I noticed there wasnt a huge difference in speed between the 2 devices. John talked to me about the Timetable application. He was happy with what we had now, but he wanted to see some extras in it. He showed me some applications he has on his Ipad. One of them was an application that made use of Dropbox39. He asked if it was possible to let 2 applications communicate with each other. To see If this was possible, I had to try to send information between the 2 applications. He also asked if it was possible to add a user login in the application. I talked with kris, I had to know what was possible for the user login. We talked about possible ways on how to add the user login. There were 2 possibilities for Caret, shibboleth40 or OAuth41. So I started searching information on it. Everything I found was well documented, so I could show Kris how we could do this. I had a conversation with Bert, on what I had to do. Bert was in Belgium for 2 weeks, but I wanted him to be up to date on the work I had to do. I explained everything and I also said I didnt find a lot information on shibboleth. I said that I first would search information on what was possible with Titanium. After searching information, I found a good site that explained how to add user functionality. It used Twitters OAuth authentication. So I started following each step to see on how it worked, and on how I could implement OAuth in the Timetable application. When I was finished I explained to Kris on how Titanium handled OAuth. She would talk with John and Dan on how Caret could use this. I heard it would take some time before I could continue to work on the user login. Meanwhile we made a screencast from our application and send it to Bert so he would stay up to date and give us feedback. I dont know what I will do next week, Bert will be back and he will tell me what I need to do.

39 Dropbox
is a file hosting service, which uses cloud computing to enable users to store and share files and folders with others across the Internet using file synchronization 40 Shibboleth is an project that has created an architecture on open-source implementation for federated identity based
41 OAuth (Open Authentication) is an open standard for authentication. It allows users to share their private resources
authentication and authorization infrastructure based onSecurity Assertion Markup Language
(e.g. photos, videos, contact lists) stored on one site with another site without having to hand out their credentials, typically username and password.
113
Klaas De Meester
Weekly reports
2010/2011

Log
Day 1
- Had a meeting with Bert, he watched the screencast, I just had to add some fixes to the Timetable application.
Day 2
- Heard I had to work with Maarten and Thomas on a new project. - Had a meeting with Ozkar, the project manager. He explained me what I had to do. - Searched information on jQuery and PHP, didnt work a lot with it before.
Day 3
- Started implementing the field validation and help tool. - Another meeting with Ozkar. I had to show the work I already did. - Problems with the image uploader Maarten made.
Day 4
- Looked at the code of the image up loader. - Tried to fix the bugs. When you wanted to add 2 instances of the image up loader in one page, the image up loader got corrupted.
Day 5
- I tried everything to fix it. Also Ozkar whos used to work with this didnt find a solution for it. - Talked with Bert about it, I decided to search a new plugin. - Started to test many up loaders, so I could see which one would be the best.
114
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with a meeting. Bert had watched the screencast, he was happy with the work we did. We only had to fix some little things, when that was done we got a new project. It was a project that Maarten already worked a week on. I had to work on an application which allows professors to generate a poster for conferences, they will give. This is how the application should work. They first have to choose a template, then they have to add some information on what they will talk about. Theres also an option to add some images on the posters. After entering all this information, a poster had to be generated. First I had to work on field validation, applying certain rules to data within a field. There had to be a limitation on the number of characters that could be entered. I used a jQuery plugin for it. jQuery is a Javascript library.
When that was done I implemented a help tool. When they clicked in a field, there had to be more information on what they had to write about in the textbox.
There also had to be an option for choosing a template with a preview from it. I also used jQuery for it. This is how I did it:
I had another meeting with Ozkar, where is showed the work I did. He was very happy with it. He said it looked cool. He also told me I had to fix the image up loader from Maarten. When you added 2 instances from the image up loader on one page, the image up loader got corrupted. I spend many hours on searching for solution. Also Ozkar searched on it, but we didnt find a good solution. After a little chat with Bert, I decided to search a new plugin. I tested many Chapter: Weekly reports 115
Klaas De Meester
Weekly reports
2010/2011
different plugins, but there werent many plugins that could handle 2 instances on one page. After searching a while I found Uploadify, which could handle 2 or more instances. Next week I want to implement Uploadify. I will also modify it, so it will show a preview from the image that is uploaded.
116
Klaas De Meester
Weekly reports
2010/2011
Heres a little preview from how the application looks, after working a week:
117
Klaas De Meester
Weekly reports
2010/2011

Log
Day 1
- Implemented Uploadify. - Problems with sending the data from the PHP file to the JS file. The data first had to pass a SWF42 file. - Bert searched with me on how I could fix it. - Went to Kris, she found out how I could fix it.
Day 2
- Had to implement a picture crop feature. - Did research on picture crop plugins. After quite a while I found a suiting one. - Had a meeting with Oszkar, where I showed the work we did. - John offered me a job at CARET
Day 3
- Searched on how to implement move a picture in a div43. - Searched the Internet on how I could fix this.
Day 4
- Started with fixing the drag feature. - Showed my work to Oszkar. - Oszkar told me what I had to do next.
Day 5
- Implemented a feature where I had to retrieve every image from a folder. I had to show the images in a datagrid, and make them selectable.

42 Swf: is a file format for multimedia, vector graphics and ActionScript in the Adobe Flash environment 43 DIV: A generic container for blocks of content, such as images and paragraphs of text.
118
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with implementing 2 instances of Uploadify. But there was a problem. In the PHP file I renamed the name of the image with a unique name, so images wouldnt be overwritten. I had to get the unique names from the images back to the js file. Normally this is done fairly easy with a return statement. But the problem was, the data first had to pass an swf file. I went to Bert, hes very good in flash. Together we searched for a solution, but we didnt find one. He suggested me to ask Kris on how I could fix this. Kris is very experienced in PHP. I explained the problem to Kriss. She took a look at my code and saw how I could fix the problem. She said test data was also sent to the swf file. I just had to change the test data with the names of the uploaded images. Now I got the new name back, as shown in the screenshot:
Maarten asked me if I could add an image crop feature. I searched and tested many plugins. I found a nice one, Jcrop. So I implemented it. When that was done, I had a meeting with Oszkar. I had to show the features I made. He was very happy with the things I made. The only thing he didnt like was the crop feature. He said people wouldnt like to do the extra work with the pictures after the upload. I had to search something else, which was easier for the user. I searched the Internet and I found a drag and drop feature on the jQuery site. I read the documentation and saw it was possible to drag objects within a div. I started to implement the plugin in the application. But when I wanted to test the plugin I saw it didnt drag images that were bigger than the width and height of a div. After reading the documentation and searching on Google, I found a way to fix it.
119
Klaas De Meester
Weekly reports
2010/2011
The last thing I had to do, was to add a feature that showed images from sponsors that where used a lot. I had to retrieve every image from the sponsor folder and add the logos in a grid.
The images had to be selectable, so users could select logos from the sponsors they wanted to add. I added the names of the selected logos in an array, so Maarten could add it in the Database of his application.
120
Klaas De Meester
Weekly reports
2010/2011

Log
Day 1
- Had to do html/css. - Had to test wordpress photo-album plugins for Bert.
Day 2
- Set up a local Wordpress site. - Tested some Wordpress photo-album plugins. - Showed my work to Bert.
Day 3
- Received a new Project. - Searched info on Ajax. - Started working on my project. - Implemented retrieve the data from a CSV file.
Day 4
- Added the feature when people press a tag, it showed all the pictures with that tag. - Added an edit button so people could edit the info for each image. - Added a feature that allowed the user to upload images, adding info with it.
Day 5
- Did some bug tests. - Showed my work to Bert and Oszkar.
121
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with doing some html/css. I received a template from Maarten. I had to make a html/css site from that template. It was a while ago, doing this. But after some searching it went pretty well.
After finishing this, I had to search some good Wordpress photo library plugins for Bert. Before searching the plugins, I had t set up a local Wordpress site so I could test the plugins on it. It had to be a lightweight plugin. I tested many plugins, but they all had too many features. I showed my work to Bert, he said I had to make a plugin myself. I had to make a Wordpress compatible photo library, with these features: - - - - - - - There had to be an upload feature, which could add info and tags to the image. It had to work with a CSV file for retrieving and adding data. All the tags had to be shown in a list. When a user clicked on a tag, it had to show all the images in thumbnail with that tag. When a user clicked on an image it had to be shown in the normal size. There had to be an edit button for each image so users could edit the image info. Everything had to be done in one page, without refreshing the page using Ajax.
122
Klaas De Meester
Weekly reports
2010/2011
I first started working on retrieving the data from the CSV file. I put all the data in an array, which I used to get all the tags from, to show it in a list. When that was done I made links from the tags. When people clicked a tag it showed all the images with that tag. I also added an edit button to each picture, so users could edit the info from each picture.
123
Klaas De Meester
Weekly reports
2010/2011
After some bug testing I added an upload feature, so users could upload images and add information to it. When that was done, the only thing I had to add was: when a user clicks on a thumbnail the image had to be shown in big size. This was very easily done, with sandybox jQuery plugin.
Next week I have to talk with Thomas about my application. He needs to design it and I will do the HTML/CSS part.
124
Klaas De Meester
Weekly reports
2010/2011
Report Week 12: Monday 30 May Friday 03 June

Log
Day 1
- Bank holiday
Day 2
- Did some bug testing. - Talked with Bert about the code I used. - Looked at the documentation of TrimPath. - Started rebuilding the code with TrimPath.
Day 3
- Completed the code with TrimPath. - Received the design from Thomas.
Day 4
- Started with the HTML/CSS part, building the interface from the application.
Day 5
- Did some finishing touches on the interface. - Showed my work to Bert. - Redid some pieces of the interface, it had to be pixel perfect. - Showed my work to Bert, Dan, and the boss. They were happy with the work I delivered.
125
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with some bug testing, I had to wait till Bert arrived at CARET so I could talk about the code I used. Bert told me, the best way to build the interface of the application was by using Trimpath. He said it wasnt difficult to use it. He already used it in Sakai. I read the documentation about TrimPath. With TrimPath you can generate html based on a template, this is done via JavaScript. It s a lightweight open source component that lets you have template- based programming while running in a web browser. The engine is written entirely in standard JavaScript. After searching and getting information from Bert, I found the best way to use it. It was very easy to implement it. When that was done, I could focus on the HTML/CSS part. When TrimPath was implemented I started implementing the design Thomas had made. I thought I was done, implementing the design Thomas made. When I showed my work to Bert, he said it wasnt pixel perfect enough. He made me a list of things that had to be changed. I changed everything he asked and showed my work again. It was ok now. Dan and John also took a look at my work. They said I did a nice job.
Next week I have to implement the design for adding new images to the application. I will also get more information on the application from the client.
126
Klaas De Meester
Weekly reports
2010/2011
Report Week 13: Monday 06 June Friday 10 June

Log
Day 1
- Searched for bugs and took notes while doing so. - Fixed a lot of bugs.
Day 2
- Added documentation to the code. - Received the design for adding and editing pictures - Searched a lightbox plugin. - Started implementing the plugin.
Day 3
- Implemented edit the picture screen. - Implemented add a new picture screen. - Fixed bugs using 2 instances of jqModal.
Day 4
- Implemented infinity scroll. - Finished my project. - Received a new project.
Day 5
- Searched documentation on ActionScript. - Thomas explained me what I had to do. - Started working on the donkey game.
127
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with searching for bugs in the application and taking notes while doing so. When that was done, I added documentation to the code. Thomas showed me the design I had to use for adding/editing pictures. I had to work with a lightbox. It looked like the fancybox I used before, for showing the images in fullscreen. After some searching I found jqModal, I started implementing the plugin. I first implemented adding a new picture screen. When I added the edit screen, jqModal gave errors. It couldnt handle 2 instances on one page. I had to rewrite the code before it could load 2 instances.
128
Klaas De Meester
Weekly reports
2010/2011
I showed my work to Bert, it was ok. The only thing I had to do now, was adding infinity scroll. I had to show e.g. 15 pictures on the screen. When people scrolled down the page, I had to load more pictures and add them underneath the other ones. It works the same way like twitter does, when you scroll down it loads more tweets.
After some searching and some tests, I didnt find what I needed, so I started to write the code myself. This project was finished for now. The new project I received was helping Thomas. I had to make a donkey game for a company that does tests with people, on how they think and react. After searching some information on actionScript, I started working on the game.
129
Klaas De Meester
Weekly reports
2010/2011
Next week Ill continue working on the Donkey game. When that is finished I will get another game I have to make.
130
Klaas De Meester
Weekly reports
2010/2011
Report Week 14: Monday 13 June Friday 17 June

Log
Day 1
- Searched information on ActionScript. - Started working on the donkey game.
Day 2
- Worked further on with the donkey game.
Day 3
- Added a design to the game. - Did some bug tests.
Day 4
- Documented the work I did.
Day 5
- Cleaned my desk - Social lunch with the colleagues, for the last time
131
Klaas De Meester
Weekly reports
2010/2011
Summary
This week started with working on the donkey game. The game is a psychology experiment to see how people will react on test they have to do. The user has to choose a door. Behind each door are apples. The amount of apples shown behind the door are for the donkey. The donkey can get more apples but it can also loose apples. The donkey has to end with positive apples. By doing this test they can see how people will react, when they get positive apples. It was a long time ago since I did ActionScript. After searching for a while and doing testing, it went pretty well. After I finished with the Funky donkey, I documented everything so people would know how I made it.
This was the last report, of the 14 weeks Ive been here. I learned a lot. I want to thank all the colleagues for the help and the trust they had in me.
132
Project fiche
133
Klaas De Meester
Project fiche
2010/2011
11.1 Pigeon
Project Medewerkers Bedrijf Begeleiders Coach ProjectOpgave iPad Timetabling Application Thomas Heylen, Klaas De Meester CARET Bert Paryn
De Preester Dieter
Create a Timetabling application for iPad. Timetable used: database containing information about courses in departments. This allows students to see where they should be going for their next course. We currently dont have nished product using the timetabling data. Your assignment is to come up with an idea and develop it as far as possible within one week. The motto is: surprise us! Its up to you to come up with the features of this software thinking about, and making use of, the iPad capabilities. The Application should make use of the fact the device is mobile, its not a desktop it has different HCI from a desktop (touch and angle... e.g. you can shake the device, tilt it, rotate it), and screen resolution is not a typical 1024x768 and up. Do a brainstorm session with your colleagues and eliminate bad ideas to keep a core of good realizable ones. The API is still under Construction and youll only be able to access it from tomorrow on.
Input
A web-service that provides user with timetables from university students. Output A working iPad application running on the device. Criteria om succes te mete Doing device tests, make sure that everything works
Chapter: Project fiche
134
Klaas De Meester
Project fiche
2010/2011
11.2 Poster generator

Project Medewerkers Bedrijf Begeleiders Coach ProjectOpgave Poster generator Maarten Bressinck, Thomas Heylen, Klaas De Meester CARET Bert Paryn
De Preester Dieter
This was a project that Maarten already worked a week on. I had to add the following features: - - - - - I had to add field information. When a user clicks a field, it had to show a box with explanation on what they could write. I had to add an upload feature, so people could upload images. There had to be field validation, applying certain rules to data within a field. There had to be a feature which allowed the user to drag images within a DIV A feature that allowed the user to select Sponsors from a list.
Input Get everything from the list Output Working elements Criteria om succes te mete Doing tests, make sure that everything works
135
Klaas De Meester
Project fiche
2010/2011
11.3 Image library

Project Medewerkers Bedrijf Begeleiders Coach ProjectOpgave Image library Klaas De Meester CARET Bert Paryn
De Preester Dieter
Making a Wordpress compatible photo library, with these features: - - - - - - - There had to be an upload feature, which could add info and tags to the image. It had to work with a CSV file for retrieving and adding data. All the tags had to be shown in a list. When a user clicked on a tag, it had to show all the images in thumbnail with that tag. When a user clicked on an image it had to be shown in the normal size. There had to be an edit button for each image so users could edit the image info. Everything had to be done in one page, without refreshing the page using Ajax.
Input
An web application the user can you use to manage images Output A working image library application Criteria om succes te mete Doing tests, make sure that everything works
136
Klaas De Meester
Project fiche
2010/2011
11.4 Funky donkey

Project Medewerkers Bedrijf Begeleiders Coach ProjectOpgave Funky donkey Thomas Heylen, Klaas De Meester CARET Bert Paryn
De Preester Dieter
Its a flash based application. Ive worked 2 days on this. The game is a psychology experiment to see how people will react on test they have to do. The user has to choose a door. Behind each door are apples. The amount of apples shown behind the door are for the donkey. The donkey can get more apples but it can also loose apples. The donkey has to end with positive apples. By doing this test they can see how people will react, when they get positive apples.
Input An flash application for psychology experements Output The Funky donkey game Criteria om succes te mete Doing tests, make sure that everything works
137

Projecdossier Klaas - De.meester 2010 2011

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Projecdossier Klaas - De.meester 2010 2011

Transféré par

Droits d'auteur :

Formats disponibles

Bundle

Sakai: Open Source Collaboration and learning environment http://www.caret.cam.ac.uk/page/home

1.3 Usage of this document

1.4 Special thanks

Klaas De Meester -Mac OS X:

4.2 Pigeon in action

4.3 Who will use Pigeon

Chapter: Pigeon introduction

4.4 How does Pigeon work?

Chapter: Pigeon introduction

4.5 Setting up for Development

Chapter: Pigeon introduction

Chapter: Pigeon introduction

4.6 Lets get started

Chapter: Pigeon introduction

Chapter: Pigeon introduction

Chapter: Pigeon introduction

5.1 The Back end

Klaas De Meester 5.1.1.1 JsonDataRetriever.js

I need 3 methods for our HTTP client.

Klaas De Meester 5.1.1.2 DataAccess.js 5.1.1.2.1 Generating the database

Klaas De Meester An example from the courses table:

5.2 The Timetable part

This view is made for adding the days to it.

Ti.App.fireEvent('datePicked', {date:pickedDate, isToday:today,}); };

Klaas De Meester And now to receive the data:

Ti.App.addEventListener('datePicked', function(data){ today = data.isToday; selectedDate = (data.date); LoadList(selectedDate); });

The data is now added in the list array.

Now that I added the labels, it should look like this:

Klaas De Meester 5.2.3 Integration of Google maps

Klaas De Meester 5.2.4.1 How to set up the PDF list

The data is now added in the list array.

When thats done, it will try to start downloading the PDF.

This is how it looks on the Ipad when I download Chemistry1.pdf.

5.3 The Folder part

This is what people will see, after doing this.

Klaas De Meester 5.3.3 Adding notes to it 5.3.3.1 drawnotes

Klaas De Meester 5.3.3.2 Textnotes

Klaas De Meester 5.3.4 Making a new text note

When a user clicks the button, he will see this:

Klaas De Meester Now Im making a text area.

Now Ill add all the components to the bar on top.

Klaas De Meester 5.3.5 Making a new draw note

When a user clicks the button, he will see this:

And I also added this:

In TiPainView.h at the interface, I added this:

We have everything we need to work on the drawing now.

Here I make the image chooser component.

I added some colors in it that people can choose from.

This is how I created the highlight button.

Now Im going to create the pen and eraser button

Now the user can erase things you drawn wrong:

6 Image library Introduction

6.2 Image library in action

Chapter: Image library

6.3 How does the Image library work?

Request Send PHP19

interactive web applications.

Chapter: Image library

Chapter: Image library

Chapter: Image library

Chapter: Image library