I can feel that I am more efficient this week since I’ve managed to complete the emcee screen and almost done with the judging screen. For the judging screen, it is completely different with the emcee screen and it gave me more headache. Dr.Shawn made some changes in my codes for attendance screen. He asked me to learn and apply it to the other screen too. It was the auto refresh, apps theme, adding an icon to the drop-down button for select venue and select category and lastly displaying user’s email at the top of the screen.
I made two different refresh button for the screen which is manual refresh button and auto refresh. Auto refresh is used so that all the user will always have an updated screen for every 10 seconds and the user can manually hit the refresh button if they want to. Both refresh button has the same function which makes the screen updated. Displaying the user’s email is important so that user can know they are login to the correct screen and as an organizer of the competition we can
I am trying to make my app as good as possible for the music competition this year. Thus, Dr.Shawn and I always discussed how to make our interface more attractive but at the same time giving more information to the user.
my beloved slider
I think the most interesting part of the judging screen is the slider. The slider is used for the judges to give a score to the performer. For the judging screen, once the judges click select category of the competition, the screen will appear a list of performance in that category. Judges can only judge if the performer performance state is 2 (Done). The icon of gavel will appear if the performance state is 2 so that judges can know the performer that can be judged already. I’m using fullscreen dialog instead of normal dialog because there is a lot of information need to be there on the screen. I realized that my slider is a bit hard to use on the tablet because they are small and the score of the slider when it moved also small huhu and definitely not a user-friendly. I told Dr.Shawn about this and he said maybe I need to find out how to make it bigger by changing the CSS side. Next up, since this year competition performer can perform more than one song so that the slider need to appear according to the number of pieces of the performer so that the judges can score their performance. We go back with the things that I’ve done in the early month of my internships. I got scolded by Dr.Shawn since my javascript codes are not written in a proper structure. He always reminds me that javascript needs to be written in a structure so that it can make your life easy and understandable.
For splitting the piece name and having multiple sliders, I’m using watch method.
performance: function(n,o) {
this.pieces = n.name.split(';');
this.score = _.fill(Array(this.pieces.length),50);
console.debug("Performance: "+JSON.stringify(n));
},
Special things about my slider are it can change color according to the gold, silver and bronze score as an indicator for the judges to score the performance. Dr.Shawn asked me to use abstracted gsb function() for use elsewhere and not normal function with if-else. Gold => 85, Silver => 75 and bronze => 65
gsb: function(a) {
return (a >= 85) ? "amber" : (a >= 75) ? "blue-grey" : (a >= 65) ? "brown" : "primary";
},
The judging screen story will be continued in my next post since there are many things to share and I expected to complete the judging screen by next week and work on the head judges that will give me more headache.
0 Comments