Week13 Final back-end check & Tradeshow

In this week, we start prepare our Tradeshow, there are some unimportant issues that may influence user experience during the tradeshow, so I need to fix them before tradeshow.

The first issue is that sometimes when we search trove images during the “add dream image” stage, the image didn’t display somehow, but there is an error returned, I’m sure that there nothing wrong with the image URL, so one explanation is we can’t get the Trove image, because the image does not exist in the source anymore, but trove still reference that URL.

 

Error message

We can get the image, but there are some solutions that allow us to avoid this issue, so I add few codes into the “updateURL” function, when the image URL(image_path) is undefined, then add an image name(XXX.jpg) to the database as the image path, then when view the orb, it will display a picture (use same name with XXX.jpg) that reminds us the image not exist anymore.   

check if it's undefined

Another issue is that there are some basic mete data for each images, such as author, date, etc. but not all of images have these data, in order to make sure there are no extra information hide within Trove data, so I add “&Include= all” to the trove API, and the result show us there is no extra data within the Trove data.  

Finally, there is a problem for the show orb function, because another team member doing the front end, and he didn’t fully understand our back end structures, so when he tries to display images, some error occurred, the issue is that we can’t display the orb image normally, so I help him to check the code, and I found out that he was using wrong ordered array to get the image data from database, then I fix it by simply adjust the array value position.

wrong array order

Tradeshow

In this week, we present our final product during the contact sessions. It’s very successful and I’m very enjoy present our works. We set up two laptops, one for user test and another one for play the introduction video, there also four posters to provide visitors with a clear understanding of our application.

Tradeshow setup

In the “dream” team, we were being responsible and all team members were working really hard for this project, I also learned a lot form them and lecture. 

Week12 Finishing back end

In this week, I start finishing last part of back end which is get some additional information from Trove and add them into data base. The additional information is about some mete data of art work images, include contributor, issued date, title and Trove URL (link to the Trove website, rather than source of the image). All these data are come from Trove though Trove API.

In order to transfer additional data to the database, I create four columns for each image, called contributor, issued, title and troveUrl, I also crate eight new variables to store these values which from the Trove data. Then I added same code to the refresh functions, because after each refresh, the image should change by follow the image ID.

Additional information

new variables for each additional data 

However, there is a problem that I can’t get additional information after click refresh button to change images, the problem occur is because the Trove data haven’t defined within refresh function, because it’s out of the getJSON function. So the solution is move two refresh functions into getJSON function, then the value can be defined and changed after click refresh button.

Move refresh functions into getJSON function

I noticed that not all of images have these mete data, for example some images don’t have contributor, this is one of the limitation of using Trove API, because we can only use the data that provided by Trove, otherwise we can’t do anything with it. So I change the database that allow contributor, issued, and title to be Null value. 

Week11 Digital Prototype test & bug fix

In this week contact session, we were testing our digital prototype. In order to test create dream, view dream and explore dreams function, we designed three tasks.

Task 1

Explore dreams. View at least 3 user-created dreams and 2 special dreams.

Task 2

Create a dream.

Task 3

Find the dream you most recently created within the dream library.

Result

There were seven users tested our digital prototype, and they provide some valuable feedback to our prototype. According my observation, there is a problem for all different part of application which is no enough instruction when users explore and create dream.  

Instructions we should add to interface:

Orb

Hover: click and drag orb to the chute

Chute

Hover: over chute – drag orb to this to view dream - Glow

Add button

Hover: Click to add dream

Text input:

Hover: glow

Placeholder text: Insert dream text here

Emotion input:

Hover: select emotional impact of dream

Search bar

Placeholder text: Type images associated with dream

Hover: search images to illustrate dream

Refresh:

Hover: click to refresh image

Instruction: Drag orb to chute to add dream

New dream

Hover: Your last dream <- text on hover

Bugs to fix:

There are some bugs that need to fix.

Firstly, in the select images page, after click search button, and then click any refresh button will cause a bug which is can’t display another image anymore. The console.log show us that it’s seems like can’t get the image number from above.

when click first refresh button

when click second refresh button

The image number missing

In order to fix this problem, I move the variable definitions to the top as a global variable, because my team try to separate front end code from back end part, then they did some changes in the JavaScript, they didn’t notice about the code structure.   

Variables

Another problem is that when we first open the website, we can see all orbs (120 orbs) in one moment, because we hide all orbs when website do the initialization, but it’s take some time to hide all orbs, so that why we can see all these orbs.

In order to fix this problem, I’m thinking we can hide all orbs when initialize front end, such as adding a script into front end which can change the opacity of orbs. Then display orbs which from database by using JS in the back end, then the initialization in the front end will faster than back end.

Add script into the front end to hide orbs

Display orbs in the back end rather than hide orbs in the back end

However, I found another efficient way to do this, because if we add script in the front end, it still slower to read and it’s not appropriate, so we can just hide orbs by using CSS, change opacity directly in CSS is faster than any other solutions. 

Directly hide orbs in CSS

Week10 Dreamtime orbs

In this week, we decide to add one new feature which is “Easter Egg”, the purpose is to display some special dream orbs that tell some stories of history or historical person, so users can explore and be inspired by the dreams of historical content. Also we have some target users who appreciate artwork may use Dreamer as a portal to explore artwork in an atypical context. This group of users will likely want to see more information about the artwork. It is expected that the content provided within the application will have artistic value to this group of users.

We found some art work from Trove which is called “dreamtime”. In Australian Aboriginal art, a Dreaming is a totemistic design or artwork, which can be owned by a tribal group or individual.

A Dreaming is a story owned by different tribes and their members that explains the creation of life, people and animals. A Dreaming story (e.g. Kangaroo Dreaming, or Shark Dreaming, or Honey Ant Dreaming) is passed on protectively as it is owned and is a form of intellectual property. In the modern context, an Aborigine cannot relate, or paint someone else's dreaming or creation story without prior permission of the Dreaming's owner. Someone's dreaming story must be respected, as the individual holds the knowledge to that Dreaming story. Certain behavioural constraints are associated with dreaming ownership; for instance, if a Dreaming is painted without authorisation, such action can meet with accusations of "stealing" someone else's Dreaming. Dreaming represents many Aboriginal concepts of "time out of time,” or "everywhen,” when the land was inhabited by ancestral figures, often of heroic proportions or with supernatural abilities.  The term "Dreaming" is based on the root of the term altjira (alcheringa) used by the Aranda people, although it has since been pointed out that the rendition is based on a mistranslation. Anthropologist William Edward Hanley Stanner introduced the derived term of "Dreamtime" in the 1970s.

Dreamtime is commonly used as a term for the animist creation narrative of indigenous Australians for a personal, or group, creation and for what may be understood as the "timeless time" of formative creation and perpetual creating. In addition, the term applies to places and localities on indigenous Australian traditional land (and throughout nontraditional Australia) where the uncreated creation spirits and totemic ancestors, or genii loci, reside. In Dreamtime an individual's entire ancestry exists as one, culminating in the idea that all worldly knowledge is accumulated through one's ancestors. Dreamtime laid down the patterns of life for the Aboriginal people. [1][2]

In order to add more extra orbs for exploration, we decide to add some dreamtime story with images to the database and generate seven static orbs to the front end. Because seven orbs are not very large extend in database, so we just download the images and stories [3] , then add the data into database , also give them ID from 1 to 7, then in the back end, we know the first seven orbs are the “dreamtime” orbs, then we can change the front end to make these orbs different from other orbs which created by users.   

Seven "dreamtime" orbs

1. https://en.wikipedia.org/wiki/Dreamtime

2. https://en.wikipedia.org/wiki/Dreaming_(Australian_Aboriginal_art)

3. https://www.didjshop.com/stories/index.php

Week9 display orb functions

In this week，we start working on the display aspect. The original idea is display orbs on the home page by using different color based on the emotion, also when user point to the orb, then will display preview image on the orb.

For display orbs function, there are two steps. Firstly, we have to use PHP to get the data from database, the function includes connect database and get the data by using SQL.

 

database connection & SQL

Secondly, we use JavaScript to display these orbs on the homepage, and we want place orbs into shelves randomly. So we designed a process method for this function. We create a random number generator, then store each orb into an array (taken_orbs[ ]) with a unique random number ID. Because we initially display every orb within each shelve, then we want to display the same number of orbs with database, so we create another array include all orbs ID（orbs_to_hide[ ]）, match random number ID and orbs ID, hide the orb which not include in the first array (taken_orbs[ ]). In order to hide the orbs, we using jQuery to manipulate orb CSS opacity to 0.          

store orb data into array & assign unique random number to each orb

Create orbs_to_hide array & compare two arrays

hide the orbs

The next step is display orbs with different emotion by using different color, so we get each orb emotion (stored in database when create a new orb), then we use JavaScript function to compare the emotion, If the stored emotion is same with the function emotion, then use jQuery to change the CSS color.  

compare emotions

In order to display preview image when user point to the orb, we use jQuery to detect user action and then add image URL to the orb.   

 

display image when "hover"

Moreover, we discussed about the search function and login function, the result is that we don’t need these functions, because we can create a “my orb” page to display several recent created orbs, and make the latest created orb to be a special orb, then user can know which one is his orb.

  

we also want to make the latest created orb display in different way, so we use another PHP to access database and use SQL language to get the maximum orb id (which is the latest orb ID), then use JavaScript and jQuery to display that orb in special way. 

display latest orb in different way

Week8 Flow & Back-end functions

In this week, I start build the back end functions, include “add a dream” function and “View a dream” function. For “add a dream” interactions, there are six steps, 1. User clicks icon and go to the “add a dream” page (build into the front end) 2. User types out dream story and selects the emotion. 3. User click “next” button go to the next page 4. User types keyword associated with dream for images. 5. Trove adds two images related to the keyword 6. Users can change images by clicking the refresh button 7. User drags the orb to the chute to save dream to the database.

For the front end aspect, all icons and buttons were created by using HTML and CSS. For the back end aspect, there actually are three steps, 1. connect to Trove and get images from Trove 2. Manipulate (refresh function) Trove images and other data (story, orb ID, emotion), 3. store data to the database.

Firstly, I follow the Trove API Technical Guide to build Trove connection by using JavaScript. I create several variables to get user input values (keyword) and API key, then create a search query same with the Trove API Technical Guide: http://api.trove.nla.gov.au/result?key=<INSERT KEY>&zone=<ZONE NAME>&q=<YOUR SEARCH TERMS> [1]. Then I use “getJSON”method to get the JSON information we need to display the images.

Search from Trove

 

getJSON method & Random number generator

When I extend the JASON data, I found that each image contains two different URLs, one URL link type is “fulltext” and another one is “thumbnail”. The different of these two URL is that we can directly use “thumbnail”URL to display image content, but the image quality is very low, but we can’t directly use “fulltext” URL without get permission from other website, such as Flickr. In order to get the high quality images, I was inspired by one Trove example which is “Images & Trove” [2], it’s show us how to reformat and access high quality images from each website ("flickr.com", "nla.gov.au", "artsearch.nga.gov.au", "recordsearch.naa.gov.au", "images.slsa.sa.gov.au").  

 

Reformat URL

Access Flickr by using Flickr key

Secondly, the original idea is that display two images and user can refresh each image. I create two variables that contain random number, because image URL stored in an array, so using these random numbers, then we can display two random images after user search from Trove, and two images URL will store into two variables, they will become the image path and stored into database. Then if user click refresh button, then generate a new random number and display the correspond image from array, also update two image path variables.  But there is a potential problem which is generate two same random numbers, but we don’t want to show users two same images at same time. So I added one function to prevent this issue, the function triggered if two random number is same, then it will change one random number to avoid duplication.

After user click refresh button & prevent duplicate function

Display two images

Update URL after user click refresh

Thirdly, in order to store orb information, we were using PHP to connect to the database, then use SQL to manipulate the orb data, such as update and insert. There are two steps for store dream content, 1. Generate a orbID, the first orbID is 0, the second orbID will be the above orbID plus one, and so on, the function is that getting the max orbID in the database, and adding one in order to create the next orb ID for this new orb, then we can make sure there is no duplication (primary key). 2. Insert orbID, Story, Emotion, image1URL and image2URL to the database, but the imageURL is NULL value, because the story and emotion come from different web page, so we want to add orb first, then update the image URL after user finish the selection. 3. Update two orb image path. 

connect to the database

Generate unique orb ID

Insert a new orb into database

Update two image path URL

For this week back end coding， we have considered the flow in web. We keep the maximize efficiency for every functions, because back end has logic complexity, if the function too complex and take more times to finish the job, the performance issues can negatively impact the user's experience. We improve many times for each function, so that they can get the result efficiently.  

We also set clear goals for each function, because every function has a significant purpose, if the goals not clear, it’s may cost overwrite or errors. For example, when we built the random number generator, we only considered matches two numbers with loaded image array, so we create two generators for each image, then we got duplication issue, so actually the goal of this generator is to generate two different numbers, which need a function to avoid the duplication.

References :

[1] Trove API Technical Guide

Source: http://help.nla.gov.au/trove/building-with-trove/api-technical-guide

[2]Getting High Quality Images

Source: http://deco1800.uqcloud.net/examples/troveImage.php

Week7 MVC & Database design

In this week lecture, we were discussed about various of patterns, these patterns are useful when generate repeatable solutions to commonly occurring problems in software design. There is a very important pattern which is model-view-controller is highly related for our concept back end design.

Models represent knowledge, a model could be a single object, or it could be some structure of objects, so the model for our concept is the database structure, which include adding and retrieving items from DB, processing data from/to the DB and only connect to the controller. The view is a representation of the model, in our case, it’s the client side or front end, which include HTML and CSS, also the browser. The view also speaks only with the controller. A controller is the link between a user and the system, it can processes GET/POST/PUT/DESTROY requests (by using PHP) and handle all other server-side logic. The processes steps are 1. takes information from user 2. processes information and talks to the database if needed 3. Receives information from database 4. Speaks to view to explain presentation to the viewer (how display data to the screen).

Our concept back end is similar with model-view-controller pattern. When user want to view a dream, after he click the dream icon, then a request sends to the controller, PHP will access the database, then process the request and get the data, controller then send the data to the font end, the dream detail shows on the screen with an appropriate format and layout.

 

MVC

For our concept database design, firstly, I create a relational schema to define each table and their relationships. According to our original concept, there are three tables, the first table is “orb”, it includes two attributes which are orb ID and dream description, another table is “image”, also include two attributes which are image ID and image URL, the third table is “emotion”, it consists of emotions and emotion ID. There are two relationships, the first relation is: an orb must have two images, an image may be used by many orbs. The second relation is: each orb must have one emotion, and each emotion may belong to many orb.  

Relational Schema

Tables in phpmyadmin 

For the data type, I set all IDs as INT type, because they are numbers, so integer is a better choice.  I also set other attributes as VARCHAR type, because VARCHAR represent character string.

Primary keys: orb ID, image ID, motion ID

Foreign key: Table “Orb” (image ID) --à Table “image” (image ID)  , this may change after relational Mapping, because it’s M:N relationship

           Table  “Orb”(Eid) --à Table “emotion” (Eid)

Emotion table structure

Image table structure

Orb table structure

Relationships