SimpleCap (9) ボタンに色をつけてみる

ボタンは控えめな（渋い？）白と灰色をベースとした色調にしている。


だが、特にウィンドウキャプチャでは使っていると視認性が悪い。そこで色をつけてみた。


ちょっと安っぽい感じもするが、視認性は上がった。当面これで使ってみる。

タイマーダイアログ（その５）

数字でカウントダウンを表示してみる。TimerView からTimerController を参照するようにし、１秒毎に再描画させる。

描画コード。
TimerWindowView.m

- (void)drawRect:(NSRect)rect
{
　　　　：
　　　　：
 int count = [_controller lastCount];
 NSPoint p;
 
 NSMutableAttributedString* str =
  [[NSMutableAttributedString alloc]
   initWithString:[NSString stringWithFormat:@"%d", count]];
 [str addAttribute:NSFontAttributeName value:[NSFont fontWithName:@"Arial" size:72]
    range:NSMakeRange(0, 1)];
 [str addAttribute:NSForegroundColorAttributeName value:[NSColor whiteColor]
    range:NSMakeRange(0, 1)];
 NSSize str_size = [str size];
 p.x = (wb.size.width - str_size.width) /2;
 p.y = (wb.size.height - str_size.height) /2 - COUNT_STR_OFFSET;

 [[NSColor  whiteColor] set];

 [NSGraphicsContext saveGraphicsState];
 [_shadow set];
 [str drawAtPoint:p];
 [NSGraphicsContext restoreGraphicsState];

Arialフォント 72pt で数字を描く。描画位置はウィンドウの（おおまか）中心にくるように計算してある。

するとこんな感じになる。


- - - -
まずは最低限のものができた。次は現在別々になっている開始・一時停止ボタンをまとめてみよう。

タイマーダイアログ（その４）

アイコンを作図し、以前開発したThinButtonBarクラスを使ってボタン表示した。


TimerController に表示のコントロールもまかせる。
TimerController.m

- (id)init
{
 self = [super init];
 if (self) {
  _interval = 1.0;
  _times = 0;
  _timer = nil;
  [self reset];
  
  _window = [[TimerWindow alloc] init];
  _view = [[TimerWindowView alloc] initWithFrame:[_window frame]];
  [_window setContentView:_view];
  [_window setCollectionBehavior:NSWindowCollectionBehaviorCanJoinAllSpaces];
  [_window makeKeyAndOrderFront:self];
  
  _button_bar = [[ThinButtonBar alloc] initWithFrame:NSZeroRect];
  
  [_button_bar addButtonWithImageResource:@"icon_start_timer"
        alterImageResource:@"icon_start_timer2"
           tag:TAG_START_TIMER
          tooltip:NSLocalizedString(@"StartTimer", @"")];
  
  [_button_bar addButtonWithImageResource:@"icon_pause_timer"
        alterImageResource:@"icon_pause_timer2"
           tag:TAG_PAUSE_TIMER
          tooltip:NSLocalizedString(@"PauseTimer", @"")];
  
  [_button_bar addButtonWithImageResource:@"icon_cancel"
        alterImageResource:@"icon_cancel2"
           tag:TAG_CANCEL_TIMER
          tooltip:NSLocalizedString(@"CancelTimer", @"")];
  
  [_view addSubview:_button_bar];
  [_button_bar setDelegate:self];
  [_button_bar setPosition:SC_BUTTON_POSITION_CENTER];
  [_button_bar setButtonBarWithFrame:[_view frame]];
  [_button_bar show];
 }
 return self;
}

ソース：TimerDialog-03.zip
- - - -
後はカウント値の表示か。

タイマーダイアログ（その３）

機能の実装から入る。インターフェイスは次のようにしよう。



TimerControllerは「停止」「実行中」「一時停止」に３種類の状態を持つ。状態遷移と各メソッドは次のように対応づけられる。


ソースは取り立てて難しいことはやっていないので割愛する。

動作確認の為に簡単な GUIを付けてみた。


よさそうだ。

ソース：TimerDialog-02.zip

- - - -
機能の実装ができた。後はこれを同表現するかだ。次回からデザインを入れていく。

タイマーダイアログ（その２）

角を丸くしてみた。それだけ。


- - - -
タイマーダイアログのクラス構成は次のようになる。機能の実装をまず優先して、見た目はその後変えていく事にしよう。

タイマーダイアログ（その1）

SimpleCap ではタイマーが重要な役割を果たす。範囲選択やスクリーン全体、メニューキャプチャ、そして今後予定しているアプリケーションキャプチャなど様々な場面でタイマーを利用する。今まではカウントダウンなどの視覚効果をきちんと実装してこなかった。各機能の実装が進んできたのでここらで共通に使えるタイマーのユーザインターフェイスを用意する事にする。これを「タイマーダイアログ」と呼ぶことにする。イメージとしてはダイアログの形態を取り、カウントダウン表示のほか、一時停止や秒数調整など簡単な操作が行えるようなものを考えている。表示は HUDのような半透明を考えている。ただしこれまで SimpleCapは白を基調としてきたのでこれを踏襲する。

今回はまず手始めにカスタムウィンドウ（ダイアログ）を作る。

カスタムの NSWindow と NSView を用意する。

TimerWindow.m

- (id)init
{
 NSRect rect = NSMakeRect(100, 100, 400, 250);
 
 self = [super initWithContentRect:rect
       styleMask:NSTexturedBackgroundWindowMask
         backing:NSBackingStoreBuffered
        defer:NO];
 if (self) {
  [self setReleasedWhenClosed:YES];
  [self setDisplaysWhenScreenProfileChanges:YES];
  [self setBackgroundColor:[NSColor clearColor]];
  [self setOpaque:NO];
  [self setHasShadow:NO];
  [self setIgnoresMouseEvents:NO];
 }
 
 return self;
}

NSTexturedBackgroundWindowMask を使うとウィンドウのどの部分でもドラッグして移動できるようになる。

まずは黒地と白枠を描く。
TimerWindowView.m

- (void)drawRect:(NSRect)rect {
    // Drawing code here.
 [[NSColor colorWithDeviceRed:0.0 green:0.0 blue:0.0 alpha:0.3] set];
 NSRectFill(rect);
 [[NSColor whiteColor] set];
 NSFrameRectWithWidth(rect, 5);
 [[NSColor lightGrayColor] set];
 NSFrameRectWithWidth(rect, 0.5);
}

これらを AppController で生成し紐づける。
AppController.m

- (void)awakeFromNib
{
 _window = [[TimerWindow alloc] init];
 _view = [[TimerWindowView alloc] initWithFrame:[_window frame]];
 [_window setContentView:_view];
 [_window setCollectionBehavior:NSWindowCollectionBehaviorCanJoinAllSpaces];
 [_window makeKeyAndOrderFront:self];
}

さて実行してみる。ドラッグして移動もできる。いい感じだ。


ソース：TimerDialog-01.zip

- - - -
次回は枠を丸く（RoundRect）にしてみる。

SimpleCap (8) ウィンドウキャプチャ改良

メニューが一段落したのでウィンドウキャプチャの改良にとりかかる。従来はマウスカーソルを動かすと、その下のウィンドウが白くなり、クリックするとキャプチャが取れていた。これはこれでシンプルなのが良かったが今後もう少し機能追加する上では物足りない。そこでユーザインターフェイスの統一も兼ねて範囲選択同様に右上にボタンを追加し、これを使ってキャプチャさせることにした。

こんな感じ。ウィンドウをクリックすると右上にボタンが現れる。その上で、ファイル保存、又はペーストボードコピーができるようになっている。


背後に隠れているウィンドウをクリックすると、隠れた部分が半透明で表示されるようにした。


今のところはタイマー機能は持たせていないが使い道がありそうなら今後追加する。