Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@poruruba

CordovaでUDPブロードキャストを受信する

Last updated at Posted at 2023-12-08

前回の投稿で、ESP32に接続したセンサ信号をUDPブロードキャストしました。

　ESP32で計測したセンサーデータをUDPブロードキャストする

今回は、CordovaでUDPブロードキャストを受信するプラグインを作成します。

image.png

アプリケーションは、ランダム画像を表示するクロックにします。

image.png

クロック表示画面には、ランダム画像提供サイトから取得される画像を背景画像として表示します。
もし、UDPブロードキャストで受信する光センサの値から周りが暗いと判断した場合、就寝中あるいは外出中とみなして、画像の表示をやめて、黒背景にします。
また、UDPブロードキャストで赤外線リモコン信号を受信した場合には、画像の取得元を変更して、別の画像に切り替えられるようにしました。

もろもろのソースコードは前回と同じ以下に置きました。

LineBeaconSensor

スマホアプリの構成

スマホアプリとしてCordovaを採用しました。
理由は、比較的簡単にAndroidとiOS両対応のネイティブアプリを実装できるのと、プラグインが豊富であるためです。
Android、iPhone、iPadで動作を確認しました。

以下のプラグインを使いました。

  • cordova-plugin-device
    AndroidとiOSどちらで動いているかを判別するために利用しています。（ただし、今回はOSごとに区別した処理はありません）

  • cordova-plugin-powermanagement
    スマホの画面を常に表示をOnにするために利用しています。

  • cordova-plugin-simpleudp
    UDPブロードキャストを受信するために利用しています。
    残念ながら、UDPを受信するのに都合の良いプラグインは見つからなかったため、自作しました。(後述)

UDP受信のためのCordovaプラグイン

以下に上げておきました。

cordova-plugin-simpleudp

プラグインの作成方法は以下を参考にします。

Cordovaアプリ開発の備忘録(プラグイン編)

Android実装

Android用のネイティブ部はこんな感じです。

src\android\jp\or\sample\plugin\SimpleUdp\Main.java
package jp.or.sample.plugin.SimpleUdp;

import android.app.Activity;
import android.content.Intent;
import android.util.Log;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaWebView;
import org.apache.cordova.PluginResult;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.net.DatagramPacket;
import java.net.DatagramSocket;
import java.net.InetAddress;

import java.util.HashMap;

public class Main extends CordovaPlugin {
	public static String TAG = "SimpleUdp.Main";
	private Activity activity;
	private static final int DEFAULT_RECEIVE_BUFFER_SIZE = 1024;
	private HashMap<Integer, DatagramSocket> sockets = new HashMap<>();

	@Override
	public void initialize(CordovaInterface cordova, CordovaWebView webView)
	{
		Log.d(TAG, "[Plugin] initialize called");
		super.initialize(cordova, webView);

		activity = cordova.getActivity();
	}

	@Override
	public void onResume(boolean multitasking)
	{
		Log.d(TAG, "[Plugin] onResume called");
		super.onResume(multitasking);
	}

	@Override
	public void onPause(boolean multitasking)
	{
		Log.d(TAG, "[Plugin] onPause called");
		super.onPause(multitasking);
	}

	@Override
	public void onNewIntent(Intent intent)
	{
		Log.d(TAG, "[Plugin] onNewIntent called");
		super.onNewIntent(intent);
	}

	@Override
	public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException
	{
		Log.d(TAG, "[Plugin] execute called");
		if( action.equals("receiving") ){
			try {
				final CallbackContext callback = callbackContext;
				final int localRecvPort = args.getInt(0);
				
				if( sockets.containsKey(localRecvPort) ){
					DatagramSocket t = sockets.get(localRecvPort);
					t.close();
					sockets.remove(localRecvPort);
				}
				final DatagramSocket udpReceive = new DatagramSocket(localRecvPort);
				sockets.put(localRecvPort, udpReceive);
				
				cordova.getThreadPool().execute(new Runnable() {
					@Override
					public void run() {
						try {
							while(true){
								byte[] buff = new byte[DEFAULT_RECEIVE_BUFFER_SIZE];
								DatagramPacket packet = new DatagramPacket(buff, buff.length);
								udpReceive.setSoTimeout(0);
								udpReceive.receive(packet);
								Log.d(TAG, "received");
							
								JSONObject message = new JSONObject();
								int len = packet.getLength();
								String payload = new String(buff, 0, len);
								message.put("payload", payload);
								byte[] address = packet.getAddress().getAddress();
								message.put("ipaddress", (((long)(address[0] & 0x00ff)) << 24) | (((long)(address[1] & 0x00ff)) << 16) | (((long)(address[2] & 0x00ff)) << 8) | (((long)(address[3] & 0x00ff)) << 0) );
								message.put("port", packet.getPort());
								
								final PluginResult result = new PluginResult(PluginResult.Status.OK, message);
								result.setKeepCallback(true);
								callback.sendPluginResult(result);
							}
						} catch (Exception ex) {
							callbackContext.error(ex.getMessage());
							if( udpReceive != null )
								udpReceive.close();
						}
					}
				});
			
			
			}catch(Exception ex){
				Log.d(TAG, ex.getMessage());
				callbackContext.error("Invalid arg0(int)");
				return false;
			}


		}else
		if( action.equals("send") ){
			try{
				String message = args.getString(0);
				String host = args.getString(1);
				int port = args.getInt(2);

				cordova.getThreadPool().execute(new Runnable() {
					@Override
					public void run() {
						try {
							DatagramSocket udpSend = new DatagramSocket();
							byte[] buff = message.getBytes();
							InetAddress inetAddress = InetAddress.getByName(host);
							DatagramPacket packet = new DatagramPacket(buff, buff.length, inetAddress, port);
							udpSend.send(packet);
							Log.d(TAG, "sended");
							udpSend.close();
							
							callbackContext.success();
						} catch (Exception ex) {
							callbackContext.error(ex.getMessage());
						}
					}
				});
				callbackContext.success();
			}catch(Exception ex){
				Log.d(TAG, ex.getMessage());
				callbackContext.error("Invalid arg0(String), arg1(String), arg2(int)");
				return false;
			}
		}else {
			String message = "Unknown action : (" + action + ") " + args.getString(0);
			Log.d(TAG, message);
			callbackContext.error(message);
			return false;
		}

		return true;
	}
}

iOS実装

iOSではこんな感じに実装しました。

（一点はまったのは、UDPパケットの1回目の受信は問題なかったのですが、2回目の受信でエラーが発生していました。理由はわかりませんが、試行錯誤して、 newConnection.forceCancel() を呼ぶようにしたらエラーが発生しなくなりました。）

src\ios\SimpleUdpPlugin.swift
import Foundation
import Network

@objc(SimpleUdpPlugin)
class SimpleUdpPlugin : CDVPlugin
{
    var sockets:[UInt16:NWListener] = [:]
    
	override
    func pluginInitialize() {
    }
    
    @objc(receiving:)
    func receiving(command: CDVInvokedUrlCommand){
        // port
        NSLog("receiving called")
        guard let port = command.arguments[0] as? UInt16 else {
            let pluginResult:CDVPluginResult = CDVPluginResult(status:CDVCommandStatus_ERROR, messageAs: "Parameter invalid")
            self.commandDelegate.send(pluginResult, callbackId: command.callbackId)
            return
        }

        do {
            if let listener = self.sockets[port] {
                listener.cancel()
            }
            let localPort = NWEndpoint.Port(rawValue: port)
            let listener = try NWListener(using: .udp, on: localPort!)
            listener.stateUpdateHandler = { state in
                switch state {
                case .ready:
                    print("listener ready")
                case .failed(let error):
                    print("listener2 error：　\(error)")
                    let pluginResult:CDVPluginResult = CDVPluginResult(status:CDVCommandStatus_ERROR, messageAs: "listener failed")
                    self.commandDelegate.send(pluginResult, callbackId: command.callbackId)
                    listener.cancel()
                default:
                    break
                }
            }
            
            listener.newConnectionHandler = { newConnection in
                newConnection.start(queue: .global())
                newConnection.receiveMessage { (data, context, isComplete, error ) in
                    if let data = data {
                        if let receivedString = String(data: data, encoding: .utf8){
                            print("receive message:　\(receivedString)")
                            newConnection.forceCancel()

                            let pluginResult = CDVPluginResult(status: CDVCommandStatus_OK, messageAs: ["payload": receivedString])
                            pluginResult?.keepCallback = true
                            self.commandDelegate.send(pluginResult, callbackId: command.callbackId)
                        }else if let error = error {
                            print("receive error: \(error)")
                        }
                    }
                }
            }
            listener.start(queue: .global())
            self.sockets[port] = listener
        }catch{
            let pluginResult:CDVPluginResult = CDVPluginResult(status:CDVCommandStatus_ERROR, messageAs: "unknown")
            self.commandDelegate.send(pluginResult, callbackId: command.callbackId)
        }

    }

    @objc(send:)
    func send(command: CDVInvokedUrlCommand)
    {
        // message, host, port
        NSLog("send called")
        guard let message = command.arguments[0] as? String, let host = command.arguments[1] as? String, let port = command.arguments[2] as? UInt16 else {
            NSLog("Parameter invalid")
            let pluginResult:CDVPluginResult = CDVPluginResult(status:CDVCommandStatus_ERROR, messageAs: "Parameter invalid")
            self.commandDelegate.send(pluginResult, callbackId:command.callbackId)
            return
        }
                    
        let sendPort = NWEndpoint.Port(rawValue: port)
        let sendHost = NWEndpoint.Host(host)
        let connection = NWConnection(host: sendHost, port: sendPort!, using: .udp)
        connection.start(queue: .global())
        if let messageData = message.data(using: .utf8){
            connection.send(content: messageData, completion: .contentProcessed{ error in
                if let error = error {
                    print("send error: \(error)")
                    let pluginResult:CDVPluginResult = CDVPluginResult(status:CDVCommandStatus_ERROR, messageAs: "send falied")
                    self.commandDelegate.send(pluginResult, callbackId: command.callbackId)
                }else{
                    print("send success")
                    let pluginResult = CDVPluginResult(status: CDVCommandStatus_OK, messageAs: "OK")
                    self.commandDelegate.send(pluginResult, callbackId: command.callbackId)
                }
                connection.cancel()
            })
        }
    }
 }

あとは、Javascriptで以下のように呼び出せば、受信パケットを処理できます。
以下は、AndroidとiOSどちらも同じコードです。

Cordova\WallPaperClock\www\js\start.js
            simpleudp.receiving(UDP_PORT, packet =>{
                console.log(packet);
・・・
            });

UDP受信パケット

UDPパケットはこんな感じです。

{"type":"sensor","brightness":4095}
{"type":"button","isPressed":1,"wasPressed":1}
{"type":"ir","decode_type":3,"value_high":0,"value_low":50167935}

ランダム画像の取得

以下のサイトにお世話になりました。

これらランダム画像の取得URLは、以下のページを参考にさせていただきました。

クライアントソースコード

Cordovaアプリのクライアントソースコードは、Javascriptです。

Cordova\WallPaperClock\www\js\start.js
'use strict';

//const vConsole = new VConsole();
//const remoteConsole = new RemoteConsole("http://[remote server]/logio-post");
//window.datgui = new dat.GUI();

const CLOCK_UPDATE_INTERVAL = 20000;
const BRIGHTNESS_THRESHOLD = 4000;
const UDP_PORT = 12346;

const IMAGE_URL_BASE_LIST = [
    "https://unsplash.it/g/",
    "https://picsum.photos/",
    "https://p-hold.com/",
];

var vue_options = {
    el: "#top",
    mixins: [mixins_bootstrap],
    data: {
        datetime_now: new Date().getTime(),
        is_dark_prev: false,
        is_dark: false,
        base_url_index: 0,
    },
    computed: {
    },
    methods: {
        toDateString: function(tim){
            const d = new Date(tim);
            const weekStr = ["日", "月", "火", "水", "木", "金", "土"];
            return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日(${weekStr[d.getDay()]})`; 
        },
        toTimeString: function(tim){
            const to2d = (d) => {
                return ("00" + d).slice(-2);
            };
            const d = new Date(tim);
            return `${to2d(d.getHours())}:${to2d(d.getMinutes())}`; 
        },
        background_view_update: function(){
            if( !this.is_dark ){
              document.body.style.backgroundImage = 'url(' + this.background_url + ')';
            }else{
              document.body.style.backgroundImage = "none";
            }
        },
        background_image_change: async function(){
            console.log("background_change called");
            var width = document.documentElement.clientWidth;
            var height = document.documentElement.clientHeight;
            var base_url = IMAGE_URL_BASE_LIST[this.base_url_index];
            this.background_url = `${base_url}/${width}/${height}?p=${new Date().getTime()}`;
            console.log("url: " + this.background_url);
            this.background_view_update();
        },
        background_check_dark: function(is_dark_now){
            if( (this.is_dark == is_dark_now) || (is_dark_now && !this.is_dark_prev)){
              this.is_dark_prev = is_dark_now;
              return;
            }
            
            this.is_dark = is_dark_now;
            this.is_dark_perv = this.is_dark;
            this.background_view_update();
        },
        background_switch_base: async function(){
            this.base_url_index = ++this.base_url_index % IMAGE_URL_BASE_LIST.length;
            this.background_image_change();
        },
                  
        onDeviceReady: async function(){
            console.log("os: " + device.platform);

            window.powermanagement.acquire();

            simpleudp.receiving(UDP_PORT, packet =>{
                console.log(packet);
                var payload = JSON.parse(packet.payload);
                if( payload.type == 'sensor'){
                    this.background_check_dark(payload.brightness > BRIGHTNESS_THRESHOLD);
                }else
                if( payload.type == "ir" ){
                    this.background_switch_base();
                }
            });
        },
    },
    created: function(){
    },
    mounted: function(){
        proc_load();

        console.log("width: " + document.documentElement.clientWidth + " height: " + document.documentElement.clientHeight);
        
        this.background_image_change();

        setInterval(() =>{
            this.datetime_now = new Date().getTime();
        }, CLOCK_UPDATE_INTERVAL);
    }
};
vue_add_data(vue_options, { progress_title: '' }); // for progress-dialog
vue_add_global_components(components_bootstrap);
vue_add_global_components(components_utils);

/* add additional components */
  
window.vue = new Vue( vue_options );

HTMLです。

Cordova\WallPaperClock\www\index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src * 'unsafe-inline'; media-src *; img-src * data: content: blob:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="css/start.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spinkit/2.0.1/spinkit.min.css" />
  <script src="js/methods_bootstrap.js"></script>
  <script src="js/components_bootstrap.js"></script>
  <script src="js/components_utils.js"></script>
  <script src="js/vue_utils.js"></script>
  <script src="js/gql_utils.js"></script>

  <script src="js/remoteconsole.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vconsole/dist/vconsole.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>

  <link rel="stylesheet" href="css/wallpaper.css">

  <title>Template</title>
</head>
<body class="background">
<!--
    <div id="loader-background">
      <div class="sk-plane sk-center"></div>
    </div>
-->
    <div id="top" class="container-fluid">
      <div v-bind:class="{ 'top-text-leftbottom': !is_dark, 'top-text-center': is_dark }" v-on:click="background_switch_base">
        <div>
          <span class="time_style">{{toTimeString(datetime_now)}}</span><br>
          <span class="date_style">{{toDateString(datetime_now)}}</span><br>
        </div>
      </div>
  
        <!-- for progress-dialog -->
        <progress-dialog v-bind:title="progress_title"></progress-dialog>
    </div>

    <script src="js/start.js"></script>

    <script src="cordova.js"></script>
    <script src="js/index.js"></script>
</body>

文字の大きさを変えたい場合は、以下のCSSを編集してください。

Cordova\WallPaperClock\www\css\wallpaper.css
.background {
  width: 100%;
  height: 100vh;
  background-color: #000000;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.top-text-center {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-text-leftbottom {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-end;
}

.top-text-leftbottom * .time_style {
  color: white;
  font-size: 150px;
}
.top-text-leftbottom * .date_style {
  color: white;
  font-size: 50px;
}

.top-text-center .time_style {
  color: white;
  font-size: 200px;
}
.top-text-center .date_style {
  color: white;
  font-size: 80px;
}

コンパイル・インストール方法

cordovaがインストールされている前提です。

以下からプロジェクト一式(ZIP)をダウンロードし、ZIPを展開します。

> cd LineBeaconSensor-main\Cordova\WallPaperClock
> npm install
> cordova platform add android または ios

もしiosの場合は、XcodeでSigningやOSバージョンを指定してください。
スマホをPCまたはMacに接続します。

> cordova build android または ios
> cordova run android または ios

参考
　Cordovaアプリ開発の備忘録

以上

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?