2017年2月15日水曜日

Dart x WebDriver Capture webpage

クローラーを作る。
ただ、最近だJavaScriptが動的にデータを読み込むパターンがあるので、
WebDriverを利用して、実際にウェブブラウザーを利用する必要がある。

Dartで試してみた。

Install

brew install selenium-server-standalone
brew install chromedriver

Run

1. Run chromedriver
> chromedriver

2. Write code and capture


import 'package:webdriver/core.dart' as wcore;
import 'package:webdriver/io.dart' as wio;
import 'dart:async';
import 'dart:io' as io;


main() async {
  var uri = Uri.parse('http://127.0.0.1:9515');
  wcore.WebDriver driver = await wio.createDriver(uri: uri);
  await driver.get('http://firefirestyle.net');
  await new Future.delayed(new Duration(seconds: 2));
  wcore.WebElement elm = await driver.activeElement;
  print("${await elm.text}");
  io.File f = new io.File("./out.jpg");
  await f.writeAsBytes(await driver.captureScreenshotAsList());
}
http://firefirestyle.net/




参考

http://qiita.com/isyumi_net/items/49a7e60fed6b39377e6a

2017年2月14日火曜日

Dart x WebGL Spring Mesh

XX-CAKE!(https://www21.atwiki.jp/xxcake/)の影響を受けて、Spring機能付きのMeshを作ってみた。

https://firefirestyle.github.io/nonno/v0_0_1/index.html


とりあえず、バネ機能付のMeshを生成する部分までのコードを書いてみた。
https://github.com/kyorohiro/nonno

実際に書いて動かしてみると、これをぷるんぷるん動画作成に利用するのは、
発想がすごいよなぁ。

真似したくなる。
応用も利くし。
便利


作り込むか決めてない。
Spring Mesh の計算はGPGPU にで書けないか試してみたくはある。

PS
今の所、Dartiumのgl.readPixcel()が不調なので、
WebGLをTextureを利用して、GPGPU化する場合は、
dart2jsを通して、Chromeで確認する必要がある。

まぁ、Dart Dev Compiler  待ちですね。




2017年2月8日水曜日

Dart x AngularDart x GAE x Go で ウェブページを作ってみた

AngularDart x GAE x Go  で ウェブページを作ってみました

https://firefirestyle.net/



Twitterでログインして、投稿ができます。タグ検索をサポートしています。
機能不足ですが、今週中くらいには、現在の提供している
機能で未実装の部分は実装する予定。

ただ、投稿サイトの機能は、外して、http://k07.me の方のみにするかも

フォロー機能、タイムライン機能、メッセージ機能は
k07meには、今年の前半中には
実装する予定です。

ノウハウはあるので

Source
https://github.com/firefirestyle/engine-v01-app
https://github.com/firefirestyle/engine-v01

2017年2月2日木曜日

お金が尽きた (My money has run out)



日雇いのプログラマーになりたい人が、
ココにいますよ〜〜
(* ̄0 ̄*)ノ

A person who wants to be a day-haired programmer,
I am here here ~ ~
(* ̄0 ̄*)ノ

今なら、言値で働きますよ〜
If it is now, I will work with your asking price ~

たぶん
maybe

2017年1月30日月曜日

Dart x WebBluetooth x BLE Peripheral Simulator x Eddystone 's memo (1)

WebBluetoothについて、BLEの学習も兼ねて、アレコレ遊んでみます。
Dartを利用します。

型があるので、保管機能を利用することができます。Crt+Space するだけで、何ができるのかが判断できて便利です。

欠点としては、Dartium のWebBluetoothへの対応が微妙なの事です。dart:jsで変換しないと、動作確認ができません。しかし、Dart DDC対応が完了すれば、この問題もなくなります。なので、今だけの問題といえるでしょう。



# Batteryサービスから、残量を取得してみる

とりあえず、Web Bluetooth x Dart で、HelloWorldをしてみる。

BLE Peripheral Simulator(https://github.com/WebBluetoothCG/ble-test-peripheral-android) は、Web Bluetooth の通信の実験相手をしてくれます。
とっても便利です。
ソースも公開されていますから、中身を見ながら、理解を深める事ができます。

BLE Peripheral Simulator の Batteryサービスから、バッテリー残量を取得して見ましょう。
※ BLE Peripheral Simulator は、GooglePlay からダウンロードできます。
https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral
※ chrome://flags よりWeb Bluetoothを有効にしてください。

===

Source
https://github.com/firefirestyle/ebook_webbluetooth_with_dart/tree/master/memo/test/hello

import 'package:angular2/core.dart';
import 'dart:html' as html;
import 'bt.dart' as b;
import 'dart:typed_data';


@Component(selector: 'my-app',
    template: """
    <h1>Hello {{name}}</h1>
    <div>
    <div *ngFor='let v of logs'>{{v}}</div>
    </div>
    <button (click)='onClick()'>Click</button>
    """
)
class AppComponent {
  var name = 'Angular';
  List<String> logs = [];

  log(String l) {
    print(l);
    logs.add(l);
  }

  onClick() async {
    b.Bluetooth bluetooth = b.getBluetooth();
    b.BluetoothDevice device = await bluetooth.requestDevice({ "filters": [{ "services": ['battery_service']}]});
    log("name : ${device.name}");
    log("id : ${device.id}");

    b.BluetoothRemoteGATTServer server = await device.gatt.connect();
    log("server.connected : ${server.connected}");

    b.BluetoothRemoteGATTService service = await server.getPrimaryService('battery_service');
    log("service.isPrimary : ${service.isPrimary}");
    log("service.uuid : ${service.uuid}");

    b.BluetoothRemoteGATTCharacteristic chara = await service.getCharacteristic('battery_level');
    log("service.uuid : ${chara.uuid}");

    ByteData buffer = await chara.readValue();
    log("service.value : ${buffer}");
    log("service.value : ${buffer.lengthInBytes}");
    log("service.value : ${buffer.buffer.asUint8List()}");
  }
}

===

参考

Web Bluetooth Draft Community Group Report, 27 January 2017


Implementation Status


LeScanは、これから
https://github.com/WebBluetoothCG/web-bluetooth/pull/239
https://webbluetoothcg.github.io/web-bluetooth/scanning.html



PS

個人的に、ネタを集めて、WebBluetoothについて、まとめる予定
たぶん以下で



2017年1月29日日曜日

AngularDart で Pinterestっぽい、Layout を試して見た。

Angular Dart で Pinterestっぽい、Design を試して見ました。
https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/tiny-dynamicblock



隙間なく、四角形を詰めていくデモです。

コンストラクターで ElementRef を取得できる事がわかれば
簡単に書けますね!!

コード

main.dart

import 'package:angular2/platform/browser.dart';
import 'package:angular2/core.dart';
import 'dart:async';
import 'dart:html' as html;
import 'dynablock.dart' as dyna;
import 'dart:math';

main() {
  bootstrap(AppComponent);
}

class DynamicItemParam {
  int w;
  int h;

  DynamicItemParam() {
    Random rnd = new Random();
    w = rnd.nextInt(100) + 50;
    h = rnd.nextInt(200) + 100;
  }
}

@Component(
  selector: 'dynamicitem',
  template: """
  xxx
  """,
)
class DynamicItem implements OnInit {
  @Input()
  DynamicComponent parent;

  @Input()
  int width = 100;

  @Input()
  int height = 200;

  final ElementRef element;

  DynamicItem(this.element) {
    (element.nativeElement as html.Element).style.width = "${width}px";
    (element.nativeElement as html.Element).style.height = "${height}px";
    (element.nativeElement as html.Element).style.color = "#FF00";
    (element.nativeElement as html.Element).style.padding = "0px";
    (element.nativeElement as html.Element).style.margin = "0px";
    (element.nativeElement as html.Element).style.backgroundColor = 'yellow';
    (element.nativeElement as html.Element).style.display = 'inline-block';
    (element.nativeElement as html.Element).style.border =
    "medium solid #333333";
  }

  ngOnInit() {
    print("xx1 ${element.nativeElement}");
    (element.nativeElement as html.Element).style.width = "${width}px";
    (element.nativeElement as html.Element).style.height = "${height}px";
    if (parent != null) {
      parent.append(this);
    }
  }
}


@Component(
  selector: 'markdown-component',
  directives: const [DynamicItem],
  template: """
  <div #markdowncontent>
    <dynamicitem  *ngFor='let c of contents' [parent]='own' [width]='c.w' [height]='c.h' ></dynamicitem>
  </div>
  """,
)
class DynamicComponent implements OnInit {
  @Input()
  List<DynamicItemParam> contents;
  List<DynamicItem> items = [];

  html.Element _contentElement;
  dyna.DynaBlockCore dynaCore = new dyna.DynaBlockCore();


  final ElementRef element;
  DynamicComponent own;

  DynamicComponent(this.element) {
    var elm = element.nativeElement;
    elm.style.position = "absolute";
    own = this;
  }

  @ViewChild('markdowncontent')
  set main(ElementRef elementRef) {
    _contentElement = elementRef.nativeElement;
    print("${elementRef} ${elementRef.nativeElement}");
    _contentElement.onChange.listen((e) {
      print("-a");
    });
  }

  append(DynamicItem ap) {
    print("XXS");
    var elm = ap.element.nativeElement;
    int margineW = 10;
    int margineH = 10;
    dyna.FreeSpaceInfo info = dynaCore.addBlock(
        ap.width + margineW, ap.height + margineH);
    elm.style.position = "absolute";
    elm.style.left = "${info.xs}px";
    elm.style.top = "${info.y}px";
  }

  ngOnInit() {
  }
}

@Component(
    selector: 'my-app',
    directives: const [DynamicComponent],
    template: """
    <markdown-component [contents]='contents'></markdown-component>
  """
)
class AppComponent implements OnInit {
  List<DynamicItemParam> contents = [
    new DynamicItemParam(),
    new DynamicItemParam(),
    new DynamicItemParam(),
    new DynamicItemParam(),
  ];

  ngOnInit() async {
    for (int i = 0; i < 10; i++) {
      contents.add(new DynamicItemParam());
      await new Future.delayed(new Duration(milliseconds: 500));
    }
  }
}


四角形を埋め尽くすアルゴ

https://github.com/firefirestyle/ebook_windstyle_markdown/blob/master/angular/tiny-dynamicblock/app/web/dynablock.dart


2017年1月28日土曜日