Return to site

Pizza DIY: A Collocation Interface Design

This project was done by January 16, 2015, as the final project of the course Interactive Interface

Design & Development. Using CSS + HTML5 + Javascript.

This was a team work, with two partners from Industry Design College designed the page, and I was the programmer to make it true. We aimed to find a UI mode of collocation on cell phones. We compared many different modes, and finally chose my idea of using a round menu. We all agreed that this idea would make users feel more interesting, and our user experience test proved it. It feels really good to using your techniques to make more fun. During the process I applied the object-oriented concepts – the ‘ring’ is a class and can be used on different themes besides pizza DIY through just replacing the icons.

Code Sample:

 

//JavaScripts

    // icon click function
    iconClick: function(index, total) {
        this.changeColor(index, FR.MenuRound.currentIcon);
        var base = FR.MenuRound.currentIcon - index;

        if (!base) {
            FR.MenuRound.showIndexList(index);
            return;
        }
        var isNext;
        // judge the direction of rotation
        if (base > 0) isNext = base >= total / 2 ? true : false;
        else isNext = base >= -total / 2 ? true : false;

        var n = 1;
        if (isNext) {
            while (1) {
                var obj = (FR.MenuRound.currentIcon + (n++)) % total;
                FR.MenuRound.animQueen.push(obj);
                if (obj == index) break;
            }
        } else {
            while (1) {
                var obj = (FR.MenuRound.currentIcon == 0 ? total : FR.MenuRound.currentIcon) - (n++) % total;
                obj = obj < 0 ? total + obj : obj;
                FR.MenuRound.animQueen.push(obj);
                if (obj == index) break;
            }
        }
        // if the waiting list is empty, call the rotate function
        if (FR.MenuRound.animQueen.length == Math.abs(n - 1)) {
            FR.MenuRound.rollRotate();
        }
        // try to use the setTimeOut function but failed
//        setTimeOut("FR.MenuRound.showIndexList("+index+")",5000);
//        setTimeout("alert('5seconds!')",5000);

        FR.MenuRound.showIndexList(index);
        
    },
    
    changeColor: function(index, preIndex) {
        var indexSrc = document.getElementById('fr_icon_'+index).src;
        var preIndexSrc = document.getElementById('fr_icon_'+preIndex).src;
        if((index == preIndex) && (indexSrc == FR.MenuRound.itemsSelect[index].icon)) return;
        if(index == preIndex) {document.getElementById('fr_icon_'+index).src = FR.MenuRound.itemsSelect[index].icon;return;}
        if(preIndexSrc == FR.MenuRound.items[preIndex].icon) {
            document.getElementById('fr_icon_'+index).src = FR.MenuRound.itemsSelect[index].icon;
            return;
        }
        document.getElementById('fr_icon_'+index).src = FR.MenuRound.itemsSelect[index].icon;
        document.getElementById('fr_icon_'+preIndex).src = FR.MenuRound.items[preIndex].icon;
    },
    
    /*
     * to show the effect of the UI design, make specific treatment. 
     * So this function doesn't contain much techques.
     */
    showIndexList: function(index){    
        if(index == -1){
            document.getElementById('panelBg').style.visibility = "hidden";
            for(var i = 0; i < 3; i++) {
                    document.getElementById('meat_'+i).style.visibility = "hidden";
            }
            for(var i = 0; i < 4; i++){
                    document.getElementById('vegetables_'+i).style.visibility = "hidden";
            }
        }        
        else if(index == 0) {
            document.getElementById('panelBg').style.visibility = "visible";            
            for(var i = 0; i < 3; i++)
                document.getElementById('meat_'+i).style.visibility = "visible";
            for(var i = 0; i < 4; i++){
                if(getComputedStyle(document.getElementById('vegetables_'+i)).visibility == "visible"){
                    document.getElementById('vegetables_'+i).style.visibility = "hidden";
                }
            }
            
        }
        else if(index == 1) {
            document.getElementById('panelBg').style.visibility = "visible";
            for(var i = 0; i < 3; i++) {
                document.getElementById('meat_'+i).style.visibility = "hidden";
            }
            for(var i = 0; i < 4; i++)
                document.getElementById('vegetables_'+i).style.visibility = "visible";
        }
        else {
            document.getElementById('panelBg').style.visibility = "hidden";
            for(var i = 0; i < 3; i++) {
                    document.getElementById('meat_'+i).style.visibility = "hidden";
            }
            for(var i = 0; i < 4; i++){
                    document.getElementById('vegetables_'+i).style.visibility = "hidden";
            }                
        }            
    },
    
    iconClick2: function(index, listIndex){
        
        var da = new Array(2);
        var ta = new Array(2);
        var aa = this.a;
        var randPic = document.createElement('div');
        randPic.id = listIndex + '_' + index;
        randPic.style.position = 'relative';
        for(var i = 0; i < 2; i++)       
          {
             da[i] = Math.random();            
            ta[i] = Math.random() * 2 * Math.PI - Math.PI;
            
            var img = new Image();
            if(listIndex == 0)    img.src = FR.MenuRound.items0[index].icon;
            else if(listIndex == 1) img.src = FR.MenuRound.items1[index].icon;
            img.style.position = 'absolute';
            img.style.left = 1.6 * aa + 0.9 * aa * da[i] * Math.cos(ta[i]) + 'px';
            img.style.top = 1.6 * aa + 0.9 * aa * da[i] * Math.sin(ta[i]) + 'px';
            img.style.width = 20 + 'px';
            img.style.height = 20 + 'px';
            img.style.zIndex = 15;
            $(img).rotate(ta[i] * 0.5 / Math.PI * 360);
            randPic.appendChild(img);
          }
        document.getElementById(this.id).appendChild(randPic);
    },
    
    // the rotate function
    rollRotate: function() {
        this.stepA = this.angle / this.steps;
        this.steps = parseInt(this.time / this.speed);
        this.counter = 1;
        var sA = 6;
        var tA = this.angle;
        
        var quantity = this.items.length;
        var a = this.a;
        var b = this.b;
        var iconWidth = this.iconWidth;
        var iconHeight = this.iconHeight;
        /*
        * judge the direction of rotation
        * or it may get wrong when continuously clicking
        */
        var isNext = (this.currentIcon + 1) % quantity == this.animQueen[0] ? true : false;
        FR.MenuRound.fr_interval = setInterval(function() {
            if (FR.MenuRound.counter > FR.MenuRound.steps) {
                clearInterval(FR.MenuRound.fr_interval);
                FR.MenuRound.currentIcon = FR.MenuRound.animQueen.shift();

                for(var i = 0; i < 6; i++) 
                {
                    if(isNext)
                    {
                        FR.MenuRound.iconA[i] = FR.MenuRound.iconA[i] + tA;
                    }
                    else FR.MenuRound.iconA[i] = FR.MenuRound.iconA[i] - tA;

                }
                if (FR.MenuRound.animQueen.length != 0) FR.MenuRound.rollRotate();
                return;
            }
            for (var j = 0; j != quantity; j++) {
                var i = j;
                
                var icon = document.getElementById('fr_icon_' + (FR.MenuRound.currentIcon + i) % quantity);

                var x = y = 0;
                if(isNext)
                {
                    FR.MenuRound.iconA[i] = FR.MenuRound.iconA[i] - sA;

                }
                else
                {
                    FR.MenuRound.iconA[i] = FR.MenuRound.iconA[i] + sA;

                }
                x = a + a * Math.cos(FR.MenuRound.iconA[i] / 360 * 2 * Math.PI);
                y = b + b * Math.sin(FR.MenuRound.iconA[i] / 360 * 2 * Math.PI);

                FR.MenuRound.setZoomLevel(icon, x, y);
                FR.MenuRound.setRotation(icon, FR.MenuRound.iconA[i]);
                // animation ends
                if (FR.MenuRound.counter == FR.MenuRound.steps) {
                    icon.rawX = x;
                    icon.rawY = y;                    
                }
            }
            FR.MenuRound.counter++;

        }, this.speed);

    },
    
    // set the picture's rotation itself
    setRotation: function(icon, theta) {
        $(icon).rotate(theta + 90);
    },

 

 

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly