westerndogの小屋

諸事情でYウィジェットを作ることになりそうなので、製作過程のメモを作ることにしました。

準備

1. Yウィジェットエンジンをダウンロードしてインストール。
2. 次に、ウィジェットコンバータをダウンロード。ウィジェットコンバータは、コマンドラインツールとウィジェットバージョンがあるが、コマンドラインバージョンはVistaでうまく動かないので、ウィジェットバージョンを使うことにする。
3. ウィジェットクリエイションチュートリアルに従い、CPUポータルを解凍し、ソース(XML)が見られた状態になったことを確認。

HelloWorld

<?xml version="1.0" encoding="UTF-8"?>
<widget minimumVersion="4.5">
//デバッグモードの設定
  <settings> 
    <setting name="debug" value="on"/>
  </settings>
//ウィンドウの生成
  <window title="mainWindow" name="mainWindow" height="100" width="100" >
//テキストの生成
    <text data="Hello World!" size="16" anchorStyle="topLeft"/>
  </window>
</widget>

1. helloWorld.konファイル(UTF-8、改行LF)を作成。
2. helloworldフォルダの中にContentsフォルダをつくり、Contentsフォルダの中にhelloWorld.konを入れて、helloworldフォルダをウィジェットコンバータウィジェットにドラッグアンドドロップ。
3. 変換する形式flat-fileを選び、変換するとhelloworld.widgetができるので、ProgramFilesのウィジェットエンジンのWidgetsフォルダにコピー。ダブルクリックしてインストールすると、ウィジェット一覧にhelloworldが現れ実行可能になる。

時計

<?xml version="1.0" encoding="UTF-8"?>
<widget minimumVersion="4.0">
<window title="TestClock">
<name>mainWindow</name>
<width>500</width>
<height>50</height>
<shadow>0</shadow>
<alignment>left</alignment>
<visible>0</visible>
<onFirstDisplay>
mainWindow.hOffset = screen.availWidth / 2 + screen.availLeft - 250;
mainWindow.vOffset = screen.availHeight / 2 + screen.availTop - 25;
</onFirstDisplay>

<image src="Images/bg.png">
<name>body</name>
<hOffset>0</hOffset>
<vOffset>0</vOffset>
</image>

<text name="window" data="時間" alignment=right hOffset=488 vOffset=36 size=28 color="#ffffff" />
</window>

<timer name="Ticker" interval="1" ticking="true">
<onTimerFired>
doCalc();
</onTimerFired>
</timer>

<action trigger="onLoad">
<![CDATA[
function doCalc(){
var now = new Date();

var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var day = now.getDay();

if ( day == 0 ) { day = "日" }
if ( day == 1 ) { day = "月" }
if ( day == 2 ) { day = "火" }
if ( day == 3 ) { day = "水" }
if ( day == 4 ) { day = "木" }
if ( day == 5 ) { day = "金" }
if ( day == 6 ) { day = "土" }

if ( month < 10 ) { month = "0" + month }
if ( date < 10 ) { date = "0" + date }
if ( hour < 10 ) { hour = "0" + hour }
if ( min < 10 ) { min = "0" + min }
if ( sec < 10 ) { sec = "0" + sec }

window.text = year + "年" + month + "月" + date + "日(" + day + ")　"+ hour + "時" + min + "分" + sec + "秒";
}
]]>
</action>
</widget>

1. TestClock.konファイル(UTF-8、改行LF)を作成。
2. TestClockフォルダの中にContentsフォルダをつくり、Contentsフォルダの中にTestClock.konを入れて、TestClockフォルダの中にImagesフォルダをつくり、bg.png(横500px縦50px)に入れる。
3. 通常通り変換。

memo

<?xml version="1.0" encoding="UTF-8"?>
<widget minimumVersion="4.0">
<window title="Graph">
<name>mainWindow</name>
<width>500</width>
<height>500</height>
<shadow>0</shadow>
<alignment>left</alignment>
<visible>0</visible>
<onFirstDisplay>
mainWindow.hOffset = screen.availWidth / 2 + screen.availLeft - 250;
mainWindow.vOffset = screen.availHeight / 2 + screen.availTop - 250;
</onFirstDisplay>

<image src="Images/bg.png">
<name>body</name>
<hOffset>0</hOffset>
<vOffset>0</vOffset>
</image>

<text name="axis-x" data="時間" alignment=right hOffset=475 vOffset=495 size=15 color="#ffffff" />
<text name="axis-y1" data="実" alignment=right hOffset=20 vOffset=40 size=15 color="#ffffff" />
<text name="axis-y2" data="況" alignment=right hOffset=20 vOffset=55 size=15 color="#ffffff" />
<text name="axis-y3" data="速" alignment=right hOffset=20 vOffset=70 size=15 color="#ffffff" />
<text name="axis-y4" data="度" alignment=right hOffset=20 vOffset=85 size=15 color="#ffffff" />

<text name="NHK" data="0" alignment=right hOffset=475 vOffset=300 size=6 color="#000000" />
<text name="ETV" data="0" alignment=right hOffset=475 vOffset=325 size=6 color="#000000" />
<text name="TME" data="0" alignment=right hOffset=475 vOffset=350 size=6 color="#000000" />
<text name="TIME" data="0" alignment=left hOffset=25 vOffset=490 size=12 color="#ffffff" width="450" />

<canvas id="Axis" width="500" height="500" vOffset="0" hOffset="0"/>
<canvas id="Graph" width="500" height="500" vOffset="0" hOffset="0"/>
</window>

<timer name="Ticker" interval="1" ticking="true">
<onTimerFired>
doCalc();
</onTimerFired>
</timer>

<action trigger="onLoad">
include("main.js");
main();
</action>
</widget>

function main(){
var axis = document.getElementById("Axis").getContext("2d");

axis.save();
axis.beginPath();
axis.lineWidth=2.0;
axis.strokeStyle = "rgba( 255, 255, 255, 1.0 )";
axis.moveTo( 25, 25 );
axis.lineTo( 25, 475 );
axis.lineTo( 475, 475 );
axis.lineTo( 475, 25 );
axis.lineTo( 25, 25 );
axis.stroke();
axis.restore();
}

function doCalc(){
var nhkGraph = document.getElementById("Graph").getContext("2d");
var etvGraph = document.getElementById("Graph").getContext("2d");
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var nhkArray = NHK.text.split(",");
var etvArray = ETV.text.split(",");
var tmeArray = TME.text.split(",");
var timestr;

//nhkGraph.save();
nhkGraph.clearRect( 0, 0, 500, 500 );
nhkGraph.beginPath();
nhkGraph.lineWidth=2.0;
nhkGraph.strokeStyle = "rgba( 255, 0, 0, 1.0 )";
nhkGraph.moveTo( 475, 475 );
for( var i=0 ; i<nhkArray.length ; i++ ) {
nhkGraph.lineTo(25+(nhkArray.length - i - 1)*10 , 475 - nhkArray[i] );
}
nhkGraph.stroke();
//nhkGraph.restore();

//etvGraph.save();
//etvGraph.clearRect( 0, 0, 500, 500 );
etvGraph.beginPath();
etvGraph.lineWidth=2.0;
etvGraph.strokeStyle = "rgba( 255, 255, 0, 1.0 )";
etvGraph.moveTo( 475, 475 );
for( var i=0 ; i<etvArray.length ; i++ ) {
etvGraph.lineTo( 25+(etvArray.length - i - 1)*10 , 475 - etvArray[i] );
}
etvGraph.stroke();
//etvGraph.restore();

if(nhkArray.length >= 46){
nhkArray.shift();
}

if(etvArray.length >= 46){
etvArray.shift();
}

if(tmeArray.length >= 101){
tmeArray.shift();
}

        NHK.text = nhkArray.join(",") + "," + Math.floor( Math.random() * 30 + 200);
        ETV.text = etvArray.join(",") + "," + Math.floor( Math.random() * 30 + 200);
if(sec % 10 == 0){
//if(hour<10){hour = 0+""+hour;}
//if(min<10){min = 0+""+min;}
//if(sec<10){sec = 0+""+sec;}
        //TME.text = tmeArray.join(",") + ", " + hour + ":" + min + ":" + sec;
if(sec<10){sec = 0+""+sec;}
        TME.text = tmeArray.join(",") + "," + sec;
} else {
//画像に差し替える
        if(sec%2==0){TME.text = tmeArray.join(",") + ",__";}
else{TME.text = tmeArray.join(",") + ",_";}
}
for( var i=0 ; i<tmeArray.length ; i++ ) {
if(typeof tmeArray[i] == 'undefined'){
timestr = ""+ timestr;
}else{
timestr = tmeArray[i] +""+ timestr;
}
}
TIME.text = timestr;
}