About monorail widget (Merged threads) - Page 3

KAN · 10-20-2008, 05:48 PM

You actually can make a quartz widget... I love to see where you're going with that Quartz Composing though DVkid07...

DVkid07 · 10-20-2008, 06:43 PM

Quote:

Originally Posted by KAN

You actually can make a quartz widget... I love to see where you're going with that Quartz Composing though DVkid07...

Thanks. Quartz Composer is a ton of fun! And actually has real world uses aside from making pretty screen savers (and monorail models). The presets in Dashcode for Quartz Composer are an awesome starting point that have already let me get some of the work towards a standalone widget done.

Sadly, it looks like my widget might be 10.5 only. I tried for 10.4 compatability, but it looks like the stop-watch patch (used in the controller for the doors) and mouse patch have both changed significantly between versions. Might have to do some development on one of the older machines in my office that haven't made the Leopard leap yet.

Currently, I've got it set so that clicking on either the front or rear cab causes the trains doors to slide open letting you see inside. Clicking again causes them to slide shut.

The next bit of interactivity I'm working on now is the ability to change the trains color by clicking and dragging on the body of the train like a color wheel. I'm also thinking that clicking on one of the internal cars will jump to a preset color. For example, clicking on the first car would switch the color to red, the second car would switch the color to blue, and the third would switch the color to orange.

Another idea I had was to show the full interior of the car (artwork not done just yet) when the doors were open and you click on the interior.

Some of this might not make sense as I'm wrapping up a long day of work, but hopefully I'll be able to show ya'll what I mean with a demo app soon.

DisneyImagineering · 10-20-2008, 06:55 PM

Very nice!!!

Looks like your making great progress. Keep up the good work

DisneyImagineering · 10-20-2008, 11:20 PM

They finally approved it!! Here's the link to the widget on apple downloads: Apple - Downloads - Dashboard Widgets - Mark VII Monorail Widget

KAN · 10-21-2008, 12:07 AM

Oooooohh!!

DVkid07 · 10-21-2008, 09:52 AM

Nice work guys!

Nautilus · 10-22-2008, 11:38 AM

Hey, Thanks for loading that onto Apple!

KAN · 10-22-2008, 04:55 PM

Wow this project has come a long away!!!!

In it's first stages, nothing more than an idea, now it is published on Apple.com.

Very special thanks to Nautilus and DisneyImagineering for helping me make it happen!!!

Nautilus · 10-22-2008, 07:01 PM

Who would of thunk it, right?

KAN · 10-22-2008, 10:22 PM

Quote:

Originally Posted by DisneyImagineering

Cool idea, but that would require rewriting the ENTIRE code. Also, Quartz is famous for having problems when integrated into dashboard. Just my opinion though :)

I suppose I could try to rewrite the coding to convert it to quartz...

I could then republish it as "...1.1" Maybe if DisneyImagineering and DVkid would e-mail me there names, I would put a "special thanks to:..." on the back.

Here is the scripting:

CSS:

body {
margin: 0px;
}

#the_image {
width: 1024px;
height: 75px;
-khtml-margin-top-collapse: separate;
-khtml-margin-bottom-collapse: separate;
margin-top: 0px;
margin-left: 0px;
}

#selector {
margin-right: 0px;
width: 120px;
-khtml-margin-top-collapse: separate;
-khtml-margin-bottom-collapse: separate;
margin-top: 0px;
margin-left: 632px;
min-height: 18px;
height: auto;
}

#donebutton {
height: 23px;
width: 56px;
left: 883px;
top: 47px;
}

#div {
position: absolute;
margin-top: 0px;
top: 33px;
left: 65px;
right: 369px;
width: auto;
bottom: -6px;
height: auto;
}

#back {
margin-left: 0px;
margin-right: 470px;
width: auto;
min-height: 230px;
height: auto;
}

#font {
-khtml-margin-top-collapse: separate;
-khtml-margin-bottom-collapse: separate;
}

#front {
-khtml-margin-top-collapse: separate;
-khtml-margin-bottom-collapse: separate;
width: 1025px;
height: 77px;
}

#img {
width: 1025px;
height: 74px;
position: absolute;
right: auto;
bottom: auto;
margin-top: 0px;
top: 0px;
left: 0px;
}

HTML:

<html>
<head>
<script type="text/javascript" src="./scripts.js" charset="utf-8"></script>
<script type="text/javascript" src="flip.js" charset="utf-8"></script>
<script type="text/javascript" src="Fader.js" charset="utf-8"></script>
<script type="text/javascript" src="Parts/utilities.js" charset="utf-8"></script>
<script type="text/javascript" src="Parts/setup.js" charset="utf-8"></script>
<script type="text/javascript" src="Parts/Text.js" charset="utf-8"></script>
<style type="text/css">
@import "Applecopy.css";
#flip { background-image: url("file:///System/Library/WidgetResources/ibutton/white_i.png"); visibility: visible; position: absolute; z-index: 8000; top: 34px; left: 960px; width: 13px; height: 13px }
#fliprollie { background-image: url("file:///System/Library/WidgetResources/ibutton/black_rollie.png"); visibility: visible; position: absolute; z-index: 7999; top: 34px; left: 960px; width: 13px; height: 13px }
#form { visibility: visible; position: absolute; top: 52px; left: 100px; width: 0; height: 53px }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="Monorail.css">
</head>
<body onload="showModel(model);loaded()">
<div id="front" onmousemove="flipper.fadeIn();" onmouseout="flipper.fadeOut();">
<div align="center">
<img id="the_image" src="Images/default.png" alt="model missing">
<div class="flip" id="fliprollie"></div>
<div class="flip" id="flip" onclick="showBackside(event);" onmouseover="document.getElementById("fliprol lie").style.display="block";" onmouseout="document.getElementById("fliproll ie").style.display="none";"></div>
</div>
</div>
<div id="back">
<img src="Images/Black.png" id="img"><div id="form">
<div align="right">
<form name="pref_form" action="" method="get">
<div align="left">
<select id="selector" name="selector" width="65">
<option selected="" value="Red">Monorail Red</option>
<option value="Blue">Monorail Blue</option>
<option value="Orange">Monorail Orange</option>
</select></div>
</form>
</div>
</div>
<img id="doneButton" src="Images/done.png" onmouseup="savePrefs();" onmousedown="document.getElementById("doneBut ton").src = "Images/done_pressed.png";" onmouseout="document.getElementById("doneButt on").src = "Images/done.png";">
<div id="div">
<font style="color: #CFCFCF;" id="font">
© Produced by Kyle Nahas and Sam Towler <br>
Images created by Sam Towler <br>
*** This widget is strictly for entertainment purposes only. This widget is not affiliated with the Walt Disney Co. (®) in any way. ***</font></div></div>
</body>
</html>

JavaScript

// scripts.js

// Globals

var model = getModel(); // holds the image to display

function showVersion() {
document.getElementById('infospan').innerHTML = "version 0.1";
}

function getModel() { // get refresh-timer from prefs
var value = 'Default';

if(window.widget) {
var value = widget.preferenceForKey('model');
}

return value;
}

function showModel(model) {
if(! model)
model = 'Default';

document.getElementById('the_image').src = "./Images/" + model + ".png";
}

function adjustPrefs() {
var selector = document.forms[0].selector;

for(i = 0; i < selector.childNodes.length; i++) {
if(selector.options[i].value == model) {
selector.options[i].selected = true;
break;
}
}
}

function savePrefs() {
var selector = document.forms[0].selector;
var mymodel = selector.options[selector.selectedIndex].value;
mymodel = mymodel ? mymodel : 'Default';

if(window.widget) {
widget.setPreferenceForKey(mymodel, 'model');
}

showModel(mymodel);
hidePrefs();
}

function showPrefs() {
var front = document.getElementById("front");
var back = document.getElementById("back");

adjustPrefs();
showVersion();

if(window.widget)
widget.prepareForTransition("ToBack");

front.style.display = "none";
back.style.display = "block";

if(window.widget)
setTimeout("widget.performTransition();", 0);
}

function hidePrefs() {
var front = document.getElementById("front");
var back = document.getElementById("back");

if(window.widget)
widget.prepareForTransition("ToFront");

front.style.display = "block";
back.style.display = "none";

if(window.widget)
setTimeout("widget.performTransition();", 0);
}

function mouseEnter() {
var image = document.getElementById("showprefs");
image.style.display = "block";
}

function mouseExit() {
var image = document.getElementById("showprefs");
image.style.display = "none";
}

// by Apple
/*
var flipShown = false;
var animation = { duration:0, starttime:0, to:1.0, now:0.0, from:0.0, firstElement:null, timer:null };

function mousemove (event)
{
if (!flipShown)
{
if (animation.timer != null)
{
clearInterval (animation.timer);
animation.timer = null;
}

var starttime = (new Date).getTime() - 13;

animation.duration = 500;
animation.starttime = starttime;
animation.firstElement = document.getElementById ('showprefs');
animation.timer = setInterval ("animate();", 13);
animation.from = animation.now;
animation.to = 1.0;
animate();
flipShown = true;
}
}

function mouseexit (event)
{
if (flipShown)
{
// fade in the info button
if (animation.timer != null)
{
clearInterval (animation.timer);
animation.timer = null;
}

var starttime = (new Date).getTime() - 13;

animation.duration = 500;
animation.starttime = starttime;
animation.firstElement = document.getElementById ('flip');
animation.timer = setInterval ("animate();", 13);
animation.from = animation.now;
animation.to = 0.0;
animate();
flipShown = false;
}
}

function animate()
{
var T;
var ease;
var time = (new Date).getTime();

T = limit_3(time-animation.starttime, 0, animation.duration);

if (T >= animation.duration)
{
clearInterval (animation.timer);
animation.timer = null;
animation.now = animation.to;
}
else
{
ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
animation.now = computeNextFloat (animation.from, animation.to, ease);
}

animation.firstElement.style.opacity = animation.now;
}

function limit_3 (a, b, c)
{
return a < b ? b : (a > c ? c : a);
}

function computeNextFloat (from, to, ease)
{
return from + (to - from) * ease;
}

*/

-----------------------------------------

Maybe we could come together and try to figure out a way of adding quartz without messing the scripting up...

DVkid07 · 10-22-2008, 10:59 PM

Hey KAN,
The main difference from placing an image to placing a Quartz composition is using an <embed> tag. Haven't yet tried it myself, but the JS to send the mouse location and clicks to the composition should be pretty easy.

Still haven't finished the interior graphics or the color-wheel control, but I reckon I can throw it up as an app in a little while to let you see what I've got so far.

I've also re-worked the images that provide the base, as I needed a whited-out version I could recolor for the gradient background so it may or may not fit into your current widget. I know I stole the dimensions from Nautilus' images but I can't remember if I changed them at all. Here's a copy of my current flattened PNG for comparison. And yes, I know my windows aren't as pretty as the previous ones, but I was concerned with the pixel-exact door and window overlays at this stage.

I don't want to spend too much time trying to get the widget controls passed (I'm sure thats possible as the demo shows it done) and would rather work out the Quartz kinks for now.

Don't be surprised if an app shows up at 2 am for testing

KAN · 10-22-2008, 11:22 PM

Quote:

Originally Posted by DVkid07

Hey KAN,
The main difference from placing an image to placing a Quartz composition is using an <embed> tag. Haven't yet tried it myself, but the JS to send the mouse location and clicks to the composition should be pretty easy.

Still haven't finished the interior graphics or the color-wheel control, but I reckon I can throw it up as an app in a little while to let you see what I've got so far.

I've also re-worked the images that provide the base, as I needed a whited-out version I could recolor for the gradient background so it may or may not fit into your current widget. I know I stole the dimensions from Nautilus' images but I can't remember if I changed them at all. Here's a copy of my current flattened PNG for comparison. And yes, I know my windows aren't as pretty as the previous ones, but I was concerned with the pixel-exact door and window overlays at this stage.

I don't want to spend too much time trying to get the widget controls passed (I'm sure thats possible as the demo shows it done) and would rather work out the Quartz kinks for now.

Don't be surprised if an app shows up at 2 am for testing

The main thing I'm concerned about is if you can save the quartz into something this can recognize:

HTML Code:

<select id="selector" name="selector" width="65">
<option selected="" value="Red">Monorail Red</option>
<option value="Blue">Monorail Blue</option>
<option value="Orange">Monorail Orange</option>

I have images saved as "default" (another copy of red), "Red", "Blue", and "Orange". the selector recognizes the selection and replaces "default" with red, blue, or orange. I wonder if we could layer it somehow, so I do not have to stay up 3 nights in a row, trying to figure out how to code it. What is the output of Quartz?

I'll try to figure out a way to make it work...

DisneyImagineering · 10-22-2008, 11:22 PM

lookin great! Sadly, I am not the most familiar with quartz. Mainly I work in Dashcode. If you need help in coding the widget itself, email me at walt_disney_imagineering@yahoo.com

DVkid07 · 10-22-2008, 11:56 PM

Well that went quicker than I expected. Dashcode is more straightforward than I was expecting.

http://files.stevensokulski.com/qmonorail/qMonorail.zip

That's the file (in a zip cause uploading the .wdgt package messes everything up).

What it does:

The train color rotates through the rainbow once about every thirty seconds. This is to demonstrate the gradient changing feature and a better control for this is being worked on.
The doors to the monorail open and close when you click on the leading or trailing cab.

What it doesn't do (yet):

The interior of the train isn't done yet, so when the doors open you see your desktop or any widgets behind it.
Allow you to drag it. This is a big uh-oh, but should be an easy fix once I spend more than a couple minutes in Dashcode.
Allow you to control color. I'm working on the best interface I can for this, but my dream of sliding the virtual color wheel along the side of the train will likely have to wait a few weeks. In the meantime, I'll come up with something similar. If you've got an idea, feel free to shout it out.

What it might do in the future:

Sit on a beam. The beam's support pillars would move as if to show the train moving across your Dashboard.
Have a background. This could depict the stations and scenery moving past behind the train. (This would be an expansion of the beam idea above.)
Make noise. I kind of enjoy the idea of incorporating Jack Wagner's iconic "Please Stand Clear of The Doors." Any thoughts on the prospect of this thing making noise, let me know.

DVkid07 · 10-23-2008, 12:00 AM

KAN: I can either patch values to the drop-down on the backside via JS or allow control via the front panel. I'm quite fond of the idea of this thing being a "desktop toy" that the user can fiddle with almost entirely from the font. That said, the controls have to make sense. And a drop-down with the names of the colors is a very elegant and user-friendly answer.

WDI: I didn't spend much time looking at how the grabber is supposed to work, but if you know of a good explanation of that concept please pass it along. I have a feeling my widget's issue is with the Quartz composition capturing the mouse activity, but I'm sure there's an answer.

10-20-2008, 05:48 PM	#31
KAN Professional Pumpkin Head Join Date: Mar 2008 Location: 33º48'35.38"N, 117º55'8.28"W Posts: 1,010	Re: About monorail widget (Merged threads) You actually can make a quartz widget... I love to see where you're going with that Quartz Composing though DVkid07... __________________ Uncover Discovery Square today!

10-20-2008, 06:55 PM	#33
DisneyImagineering Imagineer Join Date: Feb 2008 Posts: 36	Re: About monorail widget (Merged threads) Very nice!!! Looks like your making great progress. Keep up the good work

10-20-2008, 11:20 PM	#34
DisneyImagineering Imagineer Join Date: Feb 2008 Posts: 36	Re: About monorail widget (Merged threads) They finally approved it!! Here's the link to the widget on apple downloads: Apple - Downloads - Dashboard Widgets - Mark VII Monorail Widget

10-21-2008, 12:07 AM	#35
KAN Professional Pumpkin Head Join Date: Mar 2008 Location: 33º48'35.38"N, 117º55'8.28"W Posts: 1,010	Re: About monorail widget (Merged threads) Oooooohh!! __________________ Uncover Discovery Square today!

10-21-2008, 09:52 AM	#36
DVkid07 Junior Member Join Date: Jan 2005 Posts: 213	Re: About monorail widget (Merged threads) Nice work guys! __________________ Disney College Program, Spring 2008 Disney College Program Recruiter, Current

10-22-2008, 11:38 AM	#37
Nautilus Not an Annual pAssholder Join Date: Jun 2006 Location: 4 miles from DL Posts: 2,121	Re: About monorail widget (Merged threads) Hey, Thanks for loading that onto Apple! __________________ So much for moving ahead.... "Save [insert attraction/show]" " Bring back [insert dead attraction/show]".

10-22-2008, 04:55 PM	#38
KAN Professional Pumpkin Head Join Date: Mar 2008 Location: 33º48'35.38"N, 117º55'8.28"W Posts: 1,010	Re: About monorail widget (Merged threads) Wow this project has come a long away!!!! In it's first stages, nothing more than an idea, now it is published on Apple.com. Very special thanks to Nautilus and DisneyImagineering for helping me make it happen!!! __________________ Uncover Discovery Square today!

10-22-2008, 07:01 PM	#39
Nautilus Not an Annual pAssholder Join Date: Jun 2006 Location: 4 miles from DL Posts: 2,121	Re: About monorail widget (Merged threads) Who would of thunk it, right? __________________ So much for moving ahead.... "Save [insert attraction/show]" " Bring back [insert dead attraction/show]".

10-22-2008, 10:59 PM	#41
DVkid07 Junior Member Join Date: Jan 2005 Posts: 213	Re: About monorail widget (Merged threads) Hey KAN, The main difference from placing an image to placing a Quartz composition is using an <embed> tag. Haven't yet tried it myself, but the JS to send the mouse location and clicks to the composition should be pretty easy. Still haven't finished the interior graphics or the color-wheel control, but I reckon I can throw it up as an app in a little while to let you see what I've got so far. I've also re-worked the images that provide the base, as I needed a whited-out version I could recolor for the gradient background so it may or may not fit into your current widget. I know I stole the dimensions from Nautilus' images but I can't remember if I changed them at all. Here's a copy of my current flattened PNG for comparison. And yes, I know my windows aren't as pretty as the previous ones, but I was concerned with the pixel-exact door and window overlays at this stage. I don't want to spend too much time trying to get the widget controls passed (I'm sure thats possible as the demo shows it done) and would rather work out the Quartz kinks for now. Don't be surprised if an app shows up at 2 am for testing __________________ Disney College Program, Spring 2008 Disney College Program Recruiter, Current

10-22-2008, 11:22 PM	#43
DisneyImagineering Imagineer Join Date: Feb 2008 Posts: 36	Re: About monorail widget (Merged threads) lookin great! Sadly, I am not the most familiar with quartz. Mainly I work in Dashcode. If you need help in coding the widget itself, email me at walt_disney_imagineering@yahoo.com

10-22-2008, 11:56 PM	#44
DVkid07 Junior Member Join Date: Jan 2005 Posts: 213	Re: About monorail widget (Merged threads) Well that went quicker than I expected. Dashcode is more straightforward than I was expecting. http://files.stevensokulski.com/qmonorail/qMonorail.zip That's the file (in a zip cause uploading the .wdgt package messes everything up). What it does: The train color rotates through the rainbow once about every thirty seconds. This is to demonstrate the gradient changing feature and a better control for this is being worked on. The doors to the monorail open and close when you click on the leading or trailing cab. What it doesn't do (yet): The interior of the train isn't done yet, so when the doors open you see your desktop or any widgets behind it. Allow you to drag it. This is a big uh-oh, but should be an easy fix once I spend more than a couple minutes in Dashcode. Allow you to control color. I'm working on the best interface I can for this, but my dream of sliding the virtual color wheel along the side of the train will likely have to wait a few weeks. In the meantime, I'll come up with something similar. If you've got an idea, feel free to shout it out. What it might do in the future: Sit on a beam. The beam's support pillars would move as if to show the train moving across your Dashboard. Have a background. This could depict the stations and scenery moving past behind the train. (This would be an expansion of the beam idea above.) Make noise. I kind of enjoy the idea of incorporating Jack Wagner's iconic "Please Stand Clear of The Doors." Any thoughts on the prospect of this thing making noise, let me know. __________________ Disney College Program, Spring 2008 Disney College Program Recruiter, Current

10-23-2008, 12:00 AM	#45
DVkid07 Junior Member Join Date: Jan 2005 Posts: 213	Re: About monorail widget (Merged threads) KAN: I can either patch values to the drop-down on the backside via JS or allow control via the front panel. I'm quite fond of the idea of this thing being a "desktop toy" that the user can fiddle with almost entirely from the font. That said, the controls have to make sense. And a drop-down with the names of the colors is a very elegant and user-friendly answer. WDI: I didn't spend much time looking at how the grabber is supposed to work, but if you know of a good explanation of that concept please pass it along. I have a feeling my widget's issue is with the Quartz composition capturing the mouse activity, but I'm sure there's an answer. __________________ Disney College Program, Spring 2008 Disney College Program Recruiter, Current

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
V (Merged Threads)	SummerInFL	TV	9	05-23-2009 07:17 AM
What do you want to see with HM? (Merged threads)	lazyboy97O	Walt Disney World Resort	32	05-10-2006 08:26 AM