Touch PC: "Home UI" screencast | The Coffeehouse

jamie

This is more of a demo of using the pc as a home hub than the pc itself.
I tried a video this morning, but it was over a gig, and blurry.

This shows stuff you need at a fingertouch - like ... radio, maps, calendar, order pizza, weather, fireplace etc
Joby is going to love the kids page

edit::: would be great to be able to type [youtubevideo widescreen....
- click the video twice to open at youtube (to see bigger or fullscreen)

the UI is still here: www.jgrant.com/touch/index.html

*it is specifically made for full screen 1920 x 1200

** ill make it available as a zip if anyone wants (to cutomize the links to yourself. Ideally - someone would want to help make this configurable by log in / customize links..

last - anyone got a link to a good 3d flash pinball swf? Wink

Koogle
I'm a Terminator - Astalavista, Vis7a!

Expressionless

jamie

In reply to Koogle

#Jun 12th @ 1:13 PM

...is that good or bad? Wink

remember - this is suposed to be a "walk by / quick" eXPerience

?

edit: note the browser i ended up having to use... IE is just too sensitive to touching the screen - kept zooming in and out - cant disable...FF did it correct (plus i loaded extention FULL fullscreen

PaoloM
Hypermediocrity

In reply to jamie

#Jun 12th @ 1:14 PM

It's good Jamie.

I'm actually working (on my spare time) on something similar, only the plan is to use voice instead of touch for the main UI.

jamie

In reply to PaoloM

#Jun 12th @ 1:19 PM

cool - thanks

ps - there seems to be huge youtube outages in canada - not sure if its even showing up but if paolo saw it it must be youtube

(works...doesnt work...disappears on c9 .. youtube down... youtube up....

PaoloM
Hypermediocrity

In reply to jamie

#Jun 12th @ 1:27 PM

Yeah, youtube is now borked.

figuerres
???

In reply to jamie

#Jun 12th @ 1:27 PM

tonight i just might send you a bit of html -- we can make that button stack much nicer with some CSS....

and less stuff in the html file at the same time.

jamie

In reply to figuerres

#Jun 12th @ 1:36 PM

great... css... non visual code for images
no thanks ... but if youd like to write a login - customize links.... ok css Wink

edit: that sounded over the top... i just hate css

- i like master template that you can edit and see

"NEW! Frontpage CSS - same ease of use - output to real code - wysiwyg"
but... nooooo... we get expression...with no table drawing or inline preview

edit: id love to know if Expression webs numbers match Frontpage numbers (when it was sold)

SlackmasterK
I write my OWN blogging engines

Dammit youtube, embeds without a fullscreen link are pretty much useless. Except that they link to the video which has a fullscreen button. Sigh.

jamie

In reply to SlackmasterK

#Jun 12th @ 1:59 PM

its not the greatest quality... full screen at 1024x768 you can read most stuff (on that video)

jamie

In reply to jamie

#Jun 12th @ 2:01 PM

Couple of quick thoughts...

- Touch enters in a new era of interaction - and one that quite frankly does NOT work well will mouse style applications.
I would never want to use photoshop - and corel without a mouse - but when it comes to Touch - the way you view your computer is different.

for example - where on the net is this silly site/ui i made? its not...because all the tech giants dont work together - and are late to the game.

- with touch - amazing mouse things - are not so amazing. like mp3s are worse than cda cd music files. <borat>not!</b>)

Id like a chess game - to work with this. will i use the real cool 3d microsoft chess game? nope. not unless its online - and i can put it in an iframe.. - speaking of which - all of live.com takes over browser window... thats why calendar is bogus facebook one - because live/bing wants full control

*google is no better... if youve used their "office" everything opens in new windows to the point of madness (target=blank gone wild)

WHO out there will make a browser that will run applications like photoshop in an iframe? who will enable the world to make their own home UIs instead of trying to figure out ways to help the cable companies ream us all even further ($)

Finally - touch - as released in this version - only showcases how LAME non-touch apps are - and how lame - the entire experience is without basically - MAKING your own.

will anyone help us all do that?

last point - if i were MS - i would STOP hp from selling anymore of these pcs till i get a pen out - that is percice - that still works with windows and peoples apps

currently - this machine - (you gave me that i love) does nothing more than make a farce of everything you are doing (with no pen)

User UIs - charge!!! (errr.. no ...free!!!!)

The ultimate user mashup - between windows apps and the web. who will enable it? *whoever does will score a heck of a lot of good will

ok theres a rant.. true though to me

EDIT: - you could annouce the " Bing CrossBee" - bring back msn bee - he cross pollinates all sites and iframes with Bing apps. no target=top. no target=blank haha (..and NO ads)

SlackmasterK
I write my OWN blogging engines

In reply to jamie

#Jun 12th @ 2:01 PM

The HQ version is pretty decent. My point stands on the embeds.

Koogle
I'm a Terminator - Astalavista, Vis7a!

it blew my mind jamie.....nah it was the music ... was making me feel sleepy but it was so bad.. I just couldn't nod off ..

looks like it should belongs on the desktop really, oh thats bin done.

your photos page only goes to fakebook ? ..might want to look for some other css styles to use with stylish(ff addon) make some of those other sites fit in better with your all black ui. If you add flickr, I could donate you the best black flickr css, maybe.

I'm now thinking of something similar too, only I plan have it read my mind, while my eye movements provide gesturing control...and it will look like perfection with all the customization and control a user could have want. yes

figuerres
???

In reply to jamie

#Jun 12th @ 1:38 PM

Jamie:

ok forget the fact that i used the c* word and think about this, we can make the button stack's html markup go from the current size down to a fraction of the size. Slim down by about 75% in size.

same look, same function, less stuff to have to edit. easier to read when you do have to edit it.

anything wrong with that ? Smiley

jamie

In reply to figuerres

#Jun 12th @ 4:22 PM

ok Smiley

www.jgrant.com/touch/ui.zip

* please return it in a zipped file/folder that has a clear index to open in editor.

figuerres
???

In reply to jamie

#Jun 12th @ 4:39 PM

Jamie: Can you do a bit of graphic for me to work this out.

make 2 "button" images the normal and hover image w/o any text or icons.

then a set of the icons, png with transparent backgrounds.

I generaly use just a button and text but for this i will see how overlaying the icon works or does not work.

idealy we will only need to load the two images for the body of all the buttons.

then just the icon will be per-button.

the html for each button should then only have an img tag and an a-href tag

the css will do the swap of the background image w/o code by using the a:link a:hover and a:visited css style/behaviors

that removes all that javascript in the button stck for most of the buttons, the back button still gets it's script to do it's thing.

the rest i am leaving alone as i just want to "fix" one thing for you at this time Smiley

later we might think about doing the "Clock" with a bit of Silverlight and then go from there....

jamie

In reply to figuerres

#Jun 12th @ 6:59 PM

....assuming there could be ... 1000's of people making their own themes - 1% of which who would have heard of png files... lets just stick with jpgs for the "demo"

?

Dodo
I'm your creativity creator™ :)

In reply to figuerres

#Jun 12th @ 6:59 PM

Don't do the clock in Silverlight, it's very simple JS... you don't need to load a browser plugin for that (which the user might have to download) unless you want to enhance the functionality to an extend where it would make sense. If you're doing anything Silverlight, do the whole thing in it, some sites don't like to be framed, you know?

@Jamie: Every graphics program has known of PNGs, and designers making skins have heard of the alpha channel advantage for years...

CannotResolveSymbol
{insert caption here}

In reply to jamie

#Jun 12th @ 7:08 PM

You can't have JPEGs with transparent backgrounds... theming will be easier if you can separate the button backgrounds from the icons, and you can only do that if you use transparent PNGs (or GIFs, but you don't want to do that).

jamie

In reply to CannotResolveSymbol

#Jun 12th @ 7:13 PM

ok well - lets file that under tomorrow then: remake all images transparent

or re-do everything ... its just a demo?

id rather make a new ui and call the images the same thing

edit: no - pngs are garbage.. not fully supported yet

jpgs stay - on this 1 theme (good enough for tests)
*replace all .jpg / .png ..later

*if there's a log in - fine - pngs - but if its me lookin after it - jpgs

*man i sounded irish/scottish there!

Dodo
I'm your creativity creator™ :)

In reply to jamie

#Jun 12th @ 7:25 PM

jamie said:
edit: no - pngs are garbage.. not fully supported yet

Do you live in the 90s? PNGs (without alpha channel) are supported since the times of IE5... when did that come out? 1998. It's 2009 now, every current browser supports them (with alpha channel).

Hey, I even have a 16bit (Windows 3.11) image editing program on an old CD around here that supports PNGs (without alpha channel though).

figuerres
???

In reply to Dodo

#Jun 12th @ 7:10 PM

well it seems that the idea is to have a "rich" home-page ui that might not even come from a web server really.

so one time you download and cache that,m not a big hit. later you might do more with silverlight to do other animations and stuff.

yes the js clock is not huge... just an easy target to swap out ...

jamie

In reply to Dodo

#Jun 12th @ 7:43 PM

ie6 still requires a kludge and is more popular than you might think

(inserts link i read about about ie6 last week ..somewhere)

"magority of corporate accounts still use ie6 bla bla

Dodo
I'm your creativity creator™ :)

In reply to jamie

#Jun 12th @ 7:47 PM

A pretty simple one, if you ask me. Just for you to copy and paste.

Download JS File

Put this in your HTML file:

<script defer="defer" type="text/javascript" src="/scripts/ie6pngfix.js"></script>

Edit the location at need, or place the JS file in the scripts folder in the root of your domain. Done.

figuerres
???

In reply to jamie

#Jun 12th @ 7:08 PM

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="./Untitled_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="leftmenu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</body>
</html>

thats the basic menu - stack of buttons.

css: transforms the list into a menu:
#leftmenu ul {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
list-style-type: none;
}
#leftmenu ul li {
background-image: url('12.jpg');
line-height:86px;
height: 86px;
width: 288px;
margin: 0px;
padding: 0px;
}
#leftmenu ul li a:link {
color: white;
padding-left: 100px;
font-size: 30px;
line-height: 86px;
text-decoration: none;
display: block;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#leftmenu ul li a:visited {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding-left: 100px;
font-size: 30px;
line-height:86px;
text-decoration: none;
display: block;
}
#leftmenu ul li a:hover {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding-left: 100px;
font-size: 30px;
line-height:86px;
text-decoration: none;
background-image: url('12x.jpg');
display: block;
}
#leftmenu ul li a:active {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding-left: 100px;
font-size: 30px;
line-height:86px;
text-decoration: none;
display: block;
}

with the current graphic having text it does not look so good but this should give you the idea.