組込みとともに -24ページ目

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 22 | 23 | 24 | 25 | 26 | 最初次のページへ >>

Googleガジェットアニメーション追加

昨日に引き続きGoogleデスクトップガジェットを弄ってます。

アニメーションも簡単に出来ます。

試しに２つの付箋を交代で表示します。

main.xml

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

<view height="150" width="250" onopen="View_onOpen()">
<img height="150" name="task1" width="254" x="0" y="2" src="background-PostIt.png"
/>
<img height="150" name="task2" width="254" x="0" y="2" src="background-PostIt-red.png"
/>
<label enabled="true" height="48" name="task_remain1" width="201" x="22"
y="44" onclick="onTextClick();" color="#0000FF" size="22"
trimming="character" valign="middle" wordwrap="true">あと３日！
</label>
<label enabled="true" height="48" name="task_remain2" width="201" x="274"
y="44" onclick="onTextClick();" color="#FF0000" size="22"
trimming="character" valign="middle" wordwrap="true">あと１日！
</label>
<label height="23" name="task_project1" width="137" x="22" y="99" size="12"
valign="bottom">○○プロジェクト
</label>
<label height="23" name="task_project2" width="137" x="274" y="99"
size="12" valign="bottom">□□プロジェクト
</label>
<label height="16" name="task_endday1" width="63" x="158" y="106" align="right"
>7月31日
</label>
<label height="16" name="task_endday2" width="63" x="412" y="106" align="right"
>7月29日
</label>
<label height="23" name="task_task1" width="160" x="13" y="19" size="12"
trimming="character" underline="true" wordwrap="true">△△機能設計-あいうえおかきくけこさしすせそ
</label>
<label height="23" name="task_task2" width="160" x="267" y="19" size="12"
trimming="character" underline="true" wordwrap="true">○○機能コーディング-あいうえおかきくけこさしすせそ
</label>
<img height="20" name="img1" width="20" x="220" y="120" src="Arrow-Right.png"
/>
<img height="20" name="img2" width="20" x="10" y="121" src="Arrow-leftt.png"
/>
<label height="16" name="task_person1" width="40" x="175" y="20" align="right"
>山崎
</label>
<label height="16" name="task_person2" width="40" x="429" y="20" align="right"
>佐川
</label>
<script src="main.js" />
</view>
----------------------------

切り替えように２つづつ定義しています

main.js

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

function onTextClick() {
view.alert(HELLO_WORLD);
}

/**
* How long the fade effect should last (in milliseconds)
*/
var FADE_DURATION = 3000;
/**
* Interval (in milliseconds) between fades
*/
var FADE_INTERVAL = 6000;

/**
* view "onopen" handler
*/
function View_onOpen() {
// Must call initial fade effect ourselves.
// "view.setInterval" does not perform an initial call.
fadeImages();
// Create run forever timer
view.setInterval(fadeImages, FADE_INTERVAL);
}

/**
* Global variable used by "fadeImages",
* to keep track of which image will be faded in
*/
var isPuppyTurn = true;

/**
* Fade the next image in and the previous image out
*/
function fadeImages() {
var outImage;
var inImage;

// Determine which image is out and which image is in
if (isPuppyTurn) {
outImage = task1;
inImage = task2;
outText_remain = task_remain1;
inText_remain = task_remain2;
outText_project = task_project1;
inText_project = task_project2;
outText_endday = task_endday1;
inText_endday = task_endday2;
outText_task = task_task1;
inText_task = task_task2;
outText_person = task_person1;
inText_person = task_person2;
} else {
outImage = task2;
inImage = task1;
outText_remain = task_remain2;
inText_remain = task_remain1;
outText_project = task_project2;
inText_project = task_project1;
outText_endday = task_endday2;
inText_endday = task_endday1;
outText_task = task_task2;
inText_task = task_task1;
outText_person = task_person2;
inText_person = task_person1;
}

// Anonymous closures for the callbacks

view.beginAnimation(function() { setElementOpacity1(outImage,outText_remain,outText_project,outText_endday,outText_task,outText_person); }, // callback
0, // start value, 255 = full opacity
outImage.Width, // end value, 0 = no opacity or "hidden"
FADE_DURATION); // duration in milliseconds

view.beginAnimation(function() { setElementOpacity2(inImage,inText_remain,inText_project,inText_endday,inText_task,inText_person); }, // callback
inImage.Width, // start value 0 = no opacity or "hidden"
0, // end value, 255 = full opacity
FADE_DURATION); // duration in milliseconds

// Setup the next turn
isPuppyTurn = !isPuppyTurn;
}

/**
* To be called by "view.beginAnimation".
* "event.value" holds the interpolated value between
* "view.beginAnimation"'s start value and end value parameters.
* @param {view.BasicElement}
*/
function setElementOpacity1(element,remain,project,endday,task,person) {
element.x = element.Width -event.value;
remain.x = element.Width -event.value + 22;
project.x = element.Width -event.value + 22;
endday.x = element.Width -event.value + 158;
task.x = element.Width -event.value + 13;
person.x = element.Width -event.value + 175;
//element.opacity = event.value;
}

function setElementOpacity2(element,remain,project,endday,task,person) {
element.x = event.value - element.Width;
remain.x = event.value - element.Width +22;
project.x = event.value - element.Width +22;
endday.x = event.value - element.Width +158;
task.x = event.value - element.Width +13;
person.x = event.value - element.Width +175;
//element.opacity = event.value;
}

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

関数名は透明化アニメーションのそのままにしてますのでちょっとおかしいですが今回はこのまま

この程度のコードでアニメーションできるなんて、すごいですね！

実際にガジェットを動かした様子です↓↓（動画じゃないのでわかりづらいですが（汗

ここから先はちょっと大変そうなんで暫く間があくかも

金子龍三著『先端技術者のためのトラブルシューティング技術』日科技連

サブタイトル『組込みシステムの品質問題をこの一冊で原因究明』

ちょっとおこがましいタイトル，サブタイトルですが、それなりに良本です。
チェックリストが散りばめられてますが、このチェックリストだけでもそれなりの価値はあると思います。

本題のトラブルシューティング技術は１０年以上のキャリアを持つ方なら経験的に解っていることなので、何を今更と思うかもしれませんが暗黙知を形式知化するのに役立ちますので、問題発生時に行動する前に一度深呼吸してからこの本を読み返すと良いかも知れません。

ページ単価１０円以上と割高感はありますがチェックリスト目当てなら有りかもしれません。実用的にはチェックリストを見やすい形で整理すると使いやすいかもしれません。

プロジェクト管理ガジェット（プロトタイプ）

試しにプロトタイプを作成しました。

このデモアプリの『HelloWorld』をベースに文字を変えただけの状態です。

図の準備に1時間程度かかりましたがガジェット作成時間は１０分ほどでした。

フォントは手書き感を出したかったので手書き風フォントを使ってみたりしましたが、Designerでは手書きフォントが表示されますがガジェットで起動すると標準フォントに置き換わってしまうようであきらめました。

ちょっとインパクト弱いですねー。

面白みにかけますねー。

期限を『残り１時間』とか『あと３日』あおる感じにした方がよいかなー。

あまりプレッシャーを与えるのも良くないですけどね。もうちょっと考えた方がよいですね。

とりあえず折角なので試しにやってみると・・・

目的からするとこちらの方が良いかも知れません。

ただ、これだと期限の近いもしか気にしないという状況にもなりかねないので注意は必要ですね。

とりあえずこれでいってみようかな。

ちなみにサイドバーに入れるとこんな（↑）感じです。

それほど悪くないかな＾＾；

ソースXMLは次のようになっています。

main.xml

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

<view height="150" width="250">
<img x="0" y="2" src="background-PostIt.png"/>
<label enabled="true" height="48" width="201" x="22" y="44" onclick="onTextClick();"
color="#FF0000" size="22" trimming="character" valign="middle"
wordwrap="true">あと３日！
</label>
<label height="23" name="label1" width="137" x="22" y="99" size="12"
valign="bottom">○○プロジェクト
</label>
<label height="16" name="label2" width="63" x="158" y="106" align="right"
>7月31日
</label>
<label height="23" name="label3" width="160" x="13" y="19" size="12"
trimming="character" underline="true" wordwrap="true">△△機能設計-あいうえおかきくけこさしすせそ
</label>
<img height="20" name="img1" width="20" x="220" y="120" src="Arrow-Right.png"
/>
<img height="20" name="img2" width="20" x="10" y="121" src="Arrow-leftt.png"
/>
<label height="16" name="label4" width="40" x="175" y="20" align="right"
>山崎
</label>
<script src="main.js" />
</view>
--------------------------