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