【DroidScript】 스마트 폰으로 스마트 폰 앱 만들기 ③ 스핀 버튼과 탐색 바

줄거리

DroidScript라는 앱을 사용하면 javascript 기반 기술로 스마트 폰 앱을 만들 수있는 것 같기 때문에 연습으로 "전자 레인지 와트 수로 가열 시간을 환산하는 앱"을 만든다.

마지막 시간까지의 습관

앱 화면 만들기에 착수.

전회는 화상 위로부터 2행째까지 작성. 타이틀 텍스트와 드로이드군을 설치, 드로이드군을 탭하면 스마트폰이 진동해 앱 설명이 팝업되도록 했다.

스마트폰으로 스마트폰 앱 만들기 ① Hello World!
스마트 폰으로 스마트 폰 앱 만들기 ② 배경 및 텍스트 추가

스핀 버튼(상하 버튼) 설치

txt = app.CreateText( "Your Microwave" ); 
txt.SetMargins( 0,0.02,0,0 ); 
txt.SetTextSize( 20 ); 
lay.AddChild( txt ); 

my = app.CreateSpinner( "730,700,680", 0.3 ); 
my.SetOnTouch( spin_my ); 
lay.AddChild( my ); 

txt = app.CreateText( "Label Microwave" ); 
txt.SetMargins( 0,0.02,0,0 ); 
txt.SetTextSize( 20 ); 
lay.AddChild( txt ); 

label = app.CreateSpinner( "500,1500", 0.3 ); 
label.SetOnTouch( spin_label ); 
lay.AddChild( label ); 

스핀 버튼은 2개. 자신의 레인지의 와트수와, 따뜻하게 하는 대상의 라벨에 기재된 와트수. 각각 스핀 버튼 앞에 텍스트와 마진을 삽입하고 있다.
app.CreateSpinner("選択肢,選択肢,・・・",幅); 에서 설정. 너비는 화면 너비를 1.0으로 설명합니다.

자신의 레인지는, 집에서 사용하고 있는 730W와, 직장의 700W, 가끔 사용하는 680W를 선택할 수 있도록 설정. 라벨의 와트수는 500W와 1500W를 준비했다.

각각, 스핀 버튼으로 와트수를 선택했을 때의 함수를 작성해 .SetOnTouch() 로 호출하고 있다. 호출되는 함수가 여기.

function spin_my( item ) 
{ 
  app.ShowPopup( "Set " + item + "W" ); 
  app.Vibrate( "0,30" ); 
} 

function spin_label( item ) 
{ 
  app.ShowPopup( "Set " + item + "W" ); 
  app.Vibrate( "0,30" ); 
} 

선택한 와트 수가 인수입니다. 예를 들어 700 를 선택하면 Set700W 로 팝업하고 app.Vibrate 로 약간 진동한다.

검색 바 설치

txt = app.CreateText( "Label heating time" ); 
txt.SetMargins( 0,0.02,0,0 ); 
txt.SetTextSize( 20 ); 
lay.AddChild( txt ); 

skb = app.CreateSeekBar( 0.8 ); 
skb.SetOnTouch( skb_OnTouch ); 
skb.SetRange( 600 ); 
skb.SetValue( 180 ); 
lay.AddChild( skb ); 

app.CreateSeekBar 에서 검색 바 만들기. 괄호 안에서 화면에 대한 너비를 설정합니다.
.SetRange 에서 시크 바의 최대치, .SetValue 로 초기치를 설정하고 있다. 여기서 설정하는 것은 전자 레인지의 가열 시간이므로 최대값을 600초, 초기값을 180초로 해 보았다.

시크 바를 조작했을 때에 불려 가는 함수가 이쪽.

function skb_OnTouch( value ) 
{ 
  value = Math.round( value / 5 ) * 5; 
  var min = Math.floor( value / 60 ); 
  var sec = Math.floor( value % 60 ); 
  sec = ( "0" + sec ).slice( -2 ); 

  var settime = min + ":" + sec; 
  app.ShowPopup( "Set Time = " + settime ); 
  app.Vibrate( "0,10" ); 
} 

0~600까지의 숫자를 그대로 표시시키는 것이 아니라 가열 시간처럼 가공해 보았다.

1초 단위로 세세하게 새길 필요는 없기 때문에 5초 단위로 숫자를 둥글게 하고, m:ss표시를 할 수 있도록 분과 초로 나누어, 10초 미만이라도 2자리수로 표시하도록 가공했다.

예) 186 → 3:05

다음 번

계산 실행 버튼을 만듭니다.
스마트 폰으로 스마트 폰 앱 만들기 ④ 실행 버튼

계속

시리즈

DroidScript 전자레인지 앱 만들기
스마트폰으로 스마트폰 앱 만들기 ① Hello World!
스마트 폰으로 스마트 폰 앱 만들기 ② 배경 및 텍스트 추가
스마트 폰으로 스마트 폰 앱 만들기 ③ 스핀 버튼과 탐색 바
스마트 폰으로 스마트 폰 앱 만들기 ④ 실행 버튼
스마트 폰으로 스마트 폰 앱 만들기 시리즈 요약

외전
【GAS】전자 레인지 와트수로 가열 시간을 환산하는 web 어플을 만들어 보았다