投稿者: mirrorboy

某試作の開発にどうしても長押しボタンが必要だったのですが、MaxのUIには長押しに対応したtoggleのUIオブジェクト（長押しでON / OFF を切り替え）が無いようだったので、jsuiで実装してみました。

ポイント

• jsオブジェクトに標準でついてくるTaskクラスのrepeat間隔(ms単位）の指定とコールバック関数を用いることで、長押しの判定を行う
• 背景透過で描画するために、MGraphicsクラスで描画
• MGraphicsクラスは、Quartz や Flash の Graphics に近いAPIなので取っ付きやすい
• MGraphics Reference を見ながらpaintの部分を書き換えれば、見た目を変更可能
• Sketchクラスを用いた描画では背景透過は非対応 → Forum

jsui – javascript

[javascript]

"use_strict";

outlets = 1;
setoutletassist(0,’"OFF":0,"OFF_DOWN":1,"ON":2,"ON_DOWN":3′);

//mgraphics initialize
mgraphics.init( );
mgraphics.relative_coords = 1;
mgraphics.autofill = 0;

//Color
var offColor = [220/256,220/256,220/256,1.0];
var downColor = [0.7,0.7,0.7,1];
var onColor = [.99, .99, .99, 1.];

//State
var state = "OFF";
var states = {"OFF":0,"OFF_DOWN":1,"ON":2,"ON_DOWN":3};
var isSelected = false;

//Task
var tsk = new Task(longPressedHandler,this);
tsk.interval = 1000;

function longPressedHandler()
{
if(arguments.callee.task.iterations > 1)
{
arguments.callee.task.cancel();
isSelected = (isSelected) ? false : true ;
out();
}
}
longPressedHandler.local = 1;

function paint(){

if(states[state] == states["OFF"]){

mgraphics.set_source_rgba(offColor);

}else if(states[state] == states["ON"]){

mgraphics.set_source_rgba(onColor);

}else{
mgraphics.set_source_rgba(downColor);
}

with(mgraphics){

ellipse(-1.0,1.0,2,2);
fill()
stroke();
}
}
paint.local = 1;

function out(){

outlet(0,states[state]);
}
out.local = 1;

//Mouse Event
function onclick(x,y,but,cmd,shift,capslock,option,ctrl)
{
ondrag(x,y,but,cmd,shift,capslock,option,ctrl);
}
onclick.local = 1; //private

function ondrag(x,y,but,cmd,shift,capslock,option,ctrl)
{
if(but == 1){

if(isSelected == true){
state = "ON_DOWN";
}else{
state = "OFF_DOWN";
}

tsk.repeat(2);

}else{

if(isSelected == true){

state = "ON";
}else{
state = "OFF";
}

tsk.cancel();
}

mgraphics.redraw()
out();
}
ondrag.local = 1; //private

[/javascript]

wordpressにコード貼るとインデントや改行が総崩れするのどうにかしたい！WEB系のコーディングをしたことない独学javascriptすぎるので、もうちょっとお作法を勉強したい。あとWordpressレイアウトもう少しまともにしたいんだけど、どうしたらいいものか

[javascript]

"use_strict"

autowatch = 1;
inlets = 1;
autowatch = 1;

var _preValue = null;

function msg_int(value){

msg_float(value);
}

function msg_float(value){

if(_preValue != null){

var outValue = value – _preValue;
outlet(0,outValue);
}

_preValue = value;

}

function clear(){

_preValue = null;
}

[/javascript]

どんどん入力される値と値の差分を取得できます。たとえば速度を計算したりする時に有効です。clearで区切れるのもポイントです。