PDA

View Full Version : iPhone Style Desktop



SimonFlack
7 Jan 2011, 12:41 AM
After reading a thread regarding an iPhone style desktop I decided it would be a fun thing to have a go at why trying to learn a bit more about Plugins and CSS animations etc.

This is a long way from finished but I figured I would post it just incase it contains some elements others learning this stuff might be able to use.

My goal was to make use of existing elements like Carousel and Button and create plugins that styled and added the functionality i might need as well as learn a bit more about css animations etc.

I wanted to be able to simple give my desktop an array of buttons and have the control figure out how many carousel panels to create etc etc. As far as the buttons go my goal was to be able to simply specify an image and have the button handle adding shine and animation support.

As I mentioned this is a learning project and there are most likely heaps of wrong ways of doing things in it. But it was a fun couple of hours anyway.


http://www.youtube.com/watch?v=_PUiYXpovQM

The demo app looks like this. Its just a Carousel.


Ext.setup({
onReady: function() {
var main = new Ext.Carousel({

fullscreen: true,

name: 'thePanel',

cls: 'iPhoneDesktopBg',

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom'
}],

plugins: [new simfla.ux.plugins.iPhoneDesktop({buttons: demo.buttons})]
});

}

});

A button looks like this.


{
xtype: 'button',
plugins: [new simfla.ux.plugins.iPhoneDesktopButton({image: 'icon3.png'})]
}

Here are the plugins and css. I dont know if I will finish this or not. I was only playing around.

iPhoneDesktopButton

Ext.ns('simfla.ux.plugins');

simfla.ux.plugins.iPhoneDesktopButton = Ext.extend(Ext.util.Observable, {

iPhoneDesktopButtonCss: 'iPhoneDesktopButton',
iPhoneDesktopButtonRemoveCss: 'iPhoneDesktopButtonRemove',

init: function(cmp){
this.cmp = cmp;
cmp.on('render', this.initButton, this);
cmp.startEdit = this.startEdit;
cmp.endEdit = this.endEdit;
},

initButton: function() {
var me = this;

me.cmp.el.addCls(me.iPhoneDesktopButtonCss);

if (!me.imgEl && me.image) {
me.imgEl = me.cmp.el.createChild({
tag: 'img',
src: me.image
});
}
if (!me.imgShineEl) {
me.imgShineEl = me.cmp.el.createChild({
tag: 'img',
src: 'bg.png'
});
}

},

startEdit: function(cmp) {
if( cmp.el.dom.className.indexOf('shake') < 0)
{
cmp.el.addCls('shake');
}
if (!cmp.imgRemoveEl) {
cmp.imgRemoveEl = cmp.el.createChild({
tag: 'span',
cls: 'iPhoneDesktopButtonRemove'
});
}
},

endEdit: function(cmp) {
if( cmp.el.dom.className.indexOf('shake') >= 0)
{
cmp.el.removeCls('shake');
}
if (cmp.imgRemoveEl) {
cmp.imgRemoveEl.remove();
cmp.imgRemoveEl = undefined;
}
}
});

Ext.preg('iphonedesktopbutton', simfla.ux.plugins.iPhoneDesktopButton);

iPhoneDesktop

Ext.ns('simfla.ux.plugins');

simfla.ux.plugins.divide = function ( numerator, denominator ) {

var remainder = numerator % denominator;

var quotient = ( numerator - remainder ) / denominator;

return quotient

}


simfla.ux.plugins.iPhoneDesktop = Ext.extend(Ext.util.Observable, {

init: function(cmp){
this.cmp = cmp;
cmp.on('render', this.initDesktop, this);
},

initDesktop: function() {
var me = this, lastButton, firstButton;

me.cmp.mon(me.cmp.el, {
scope: me,
taphold : me.editDesktop,
doubletap : me.endEditDesktop
});

//Assume 4 x 4 layout
if (me.buttons){
var numberOfPanels = simfla.ux.plugins.divide(me.buttons.length,16) + 1;
for (var i = 1; i <= numberOfPanels; i++) {
//Create Main Panel
me.cmp.add({
xtype: 'panel',
padding: 10,
id: 'panel' + i.toString(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
id: 'panel' + i.toString() + 'R1',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
}
},{
xtype: 'panel',
id: 'panel' + i.toString() + 'R2',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
}
},{
xtype: 'panel',
id: 'panel' + i.toString() + 'R3',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
}
},{
xtype: 'panel',
id: 'panel' + i.toString() + 'R4',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
}
}]
});
//Add Buttons to Panel
lastButton = (i * 16) - 1;
firstButton = lastButton - 15;
for (var b = firstButton, row = 1, rb = 0; b <= lastButton; b++) {
var rowPanel = Ext.getCmp('panel' + i.toString() + 'R' + row.toString());
var currentbutton = me.buttons[b];

if (rowPanel) {
if(currentbutton) {
rowPanel.add({flex:1, items: [currentbutton]});
}else{
rowPanel.add({flex:1});
}
}

rb++;
if (rb > 3) {
rb = 0;
row ++;
}
}
}
}
},

editDesktop: function() {
var me = this;
if (me.buttons) {
for(var i = 0; i < me.buttons.length; i++){
me.buttons[i].plugins[0].cmp.startEdit(me.buttons[i].plugins[0].cmp);
}
}
},

endEditDesktop: function() {
var me = this;
if (me.buttons) {
for(var i = 0; i < me.buttons.length; i++){
me.buttons[i].plugins[0].cmp.endEdit(me.buttons[i].plugins[0].cmp);
}
}
}

});

Ext.preg('iphonedesktop', simfla.ux.plugins.iPhoneDesktop);

CSS

.iPhoneDesktopButton{
width: 50px;
height: 50px;
position:relative;
margin-bottom:30px;
margin-left:auto;
margin-right:auto;
}

.iPhoneDesktopButton img {
position:absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
border-radius: 7px;
}

.iPhoneDesktopButtonRemove{
background-image: url('../remove.png');
position:absolute;
right: 0px;
top: 0px;
width: 23px;
height: 23px;
}

.iPhoneDesktopBg{
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #2373a5), color-stop(70%, #ffffff), color-stop(100%, #174870));
}



@-webkit-keyframes pulse {
from {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.2);
opacity: 1.0;
}
to {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
}


.pulse {
-webkit-animation-name: pulse;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes shake {
from {
-webkit-transform: rotate(3deg);
opacity: 1.0;
}
50% {
-webkit-transform: rotate(-3deg);
opacity: 1.0;
}
to {
-webkit-transform: rotate(3deg);
opacity: 1.0;
}
}


.shake {
-webkit-animation-name: shake;
-webkit-animation-duration: 0.2s;
-webkit-animation-iteration-count: infinite;
}


Working Demo: https://github.com/SimFla/iPhoneDesktop

tomalex0
7 Jan 2011, 3:14 AM
Hi,

Thats a cool implementation , demo looks nice.

Which version u were working.

It could have been nice if you could bundle the working demo and attach here.

Thanks for sharing :)

StuartAshworth
7 Jan 2011, 3:52 AM
Very cool effect, nice work!

SimonFlack
7 Jan 2011, 4:02 AM
Working Demo: https://github.com/SimFla/iPhoneDesktop

tomalex0
7 Jan 2011, 4:11 AM
Thanks, works fine :)

Osifer
7 Jan 2011, 6:46 AM
It's perfect, I'm gonna shoot this to my programmer so he can use this to make our app. Thanks for sharing.

rproudman
20 Jan 2011, 5:13 PM
Simon, that looks great.

It came in handy for the start of iBuddz's mobile version which you can see at:

http://www.ibuddz.com/mobile/login.html

You have to have an account set up on the desktop version at: http://www.ibuddz.com where once approved, you can then use either desktop or mobile.

All modules work in the desktop but the mobile displays 14 module icons right now, but only 2 (well 1 1/2 are working correctly). Artist Browser is the 1 (to play playlists created in the desktop version) and Radio Browser is the 1/2 (as it does all but plays the actual station right now).

But again, the mobile layout you did is great and works well.

Thx.

Russ

SimonFlack
21 Jan 2011, 1:55 AM
Awsome! Glad it worked for you... I have registered and will check it out as soon as I get the email.

Simon

kgilb
16 Feb 2011, 11:23 AM
This looks great! Any way to get the button text to show up under the icons?

SimonFlack
16 Feb 2011, 12:50 PM
Thanks.

I have not figured that out yet. The text is positioned under the button but it is being clipped by the bounds of the button.

If you come up with a solution please send it to me.

aeiz
18 Feb 2011, 3:19 PM
This is awesome. Thanks for this! I'm also trying to see if I can find a way to get the text to show below the icon.

aeiz
18 Feb 2011, 4:18 PM
I added the following to the iPhoneDesktopButton.css file and it kinda works:


.iPhoneDesktopButton span{
margin-top: 55px;
width: 0px;
overflow: visible;
font-size: 11px;
font-weight: 800;
color: #ccc;
text-align: center;
text-indent: -7px;
}

I'm sure someone who is better at CSS could do a better job. This works for my buttons which are 60x60 px. It might need to be tweaked a bit for your own button size.

SimonFlack
19 Feb 2011, 1:47 AM
Great! I'll play around with this on monday.

headkit
30 May 2011, 6:02 AM
*subscribe*

SimonFlack
30 May 2011, 7:28 AM
Version 2 supports icon text

http://www.sencha.com/forum/showthread.php?124882-iPhoneDesktop-Version-2