WebAssembly C++ Class Binding

개발 이야기/WEB 2020. 5. 18. 15:06

C++ 작성한 클래스를 사용해보자~!

 

1. 코드작성

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//bind_test.h
 
#ifndef __BIND_TEST_H__
#define __BIND_TEST_H__
class BindTest
{
public:
    BindTest();
    BindTest(int number);
    virtual ~BindTest();
 
private:
    int mNumber;
    int mPropertyNumber;
 
public:
    void Increase();
    int GetNumber();
    void SetPropertyNumber(int pNumber){ mPropertyNumber = pNumber; }
    int GetPropertyNumber() const { return mPropertyNumber; }
};
#endif
 
cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//bind_test.cpp
 
#include <iostream>
#include <emscripten/bind.h>
#include "bind_test.h"
 
using namespace emscripten;
 
BindTest::BindTest()
{
    mNumber = 0;
    mPropertyNumber = 0;
}
 
BindTest::BindTest(int number)
    : mNumber(number)
{
}
 
BindTest::~BindTest()
{
}
 
void BindTest::Increase()
{
    mNumber++;
}
 
int BindTest::GetNumber()
{
    return mNumber;
}
 
EMSCRIPTEN_BINDINGS(b_bind_test)
{
    class_<BindTest>("BindTest")
    .constructor<>()
    .constructor<int>()
    .function("Increase"&BindTest::Increase)
    .function("GetNumber"&BindTest::GetNumber)
    .property("mProperyNumber"&BindTest::GetPropertyNumber, &BindTest::SetPropertyNumber)
    ;
}
 
cs

 

getter 상용할 때, const 명시할 것.

int GetPropertyNumber() const { return mPropertyNumber; }

 

2. 컴파일

 

1
2
emcc bind_test.cpp -o bind_test.js -s WASM=1 --bind
 
cs

 

기존 예제와는 다르게 뒤에 --bind 추가

 

3. index.html 작성

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Wasm Test Page</title>
</head>
<body>
<button id="btn" onclick="OnClickBtn();">click here!</button>
<script>
function OnClickBtn()
{
    var bind = new Module.BindTest();
    
    console.log('[bind_test] get number = ' + bind.GetNumber());
    bind.Increase();
    console.log('[bind_test] get number = ' + bind.GetNumber());
    bind.Increase();
    bind.Increase();
    console.log('[bind_test] get number = ' + bind.GetNumber());
    console.log('[bind_test] direct value of mNumber = ' + bind.mNumber);
    
    bind.mPropertyNumber = 0;
    console.log('[bind_test] mPropertyNumber = ' + bind.mPropertyNumber);
    bind.mPropertyNumber = 5;
    console.log('[bind_test] mPropertyNumber = ' + bind.mPropertyNumber);
    bind.mPropertyNumber = 7;
    console.log('[bind_test] mPropertyNumber = ' + bind.mPropertyNumber);
    
    var bind2 = new Module.BindTest(99);
    console.log('[bind_test] get number = ' + bind2.GetNumber());
}
</script>
<script type='text/javascript' src='./js/bind_test.js'></script>
</body>
</html>
cs

 

4. 결과확인

 

 

'개발 이야기 > WEB' 카테고리의 다른 글

WebAssembly + C struct(구조체)  (0) 2020.05.15
Eclipse Web Project + WebAssembly Sample  (0) 2020.05.12

WebAssembly + C struct(구조체)

개발 이야기/WEB 2020. 5. 15. 17:32

구조체를 가져와서 출력해보는 예제.

 

1. 소스 코드 작성

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//struct_test.c
 
#include <stdio.h>
#include <emscripten/emscripten.h>
#include <stdlib.h>
 
typedef struct st_study
{
        int value_1;
        int value_2;
} study;
 
EMSCRIPTEN_KEEPALIVE
study* init_struct(int value_1st, int value_2nd)
{
        study* stStudy = (study*)malloc(sizeof(study));
 
        stStudy->value_1 = value_1st;
        stStudy->value_2 = value_2nd;
 
        return stStudy;
}
 
cs

 

2. 컴파일

 

1
emcc struct_test.c -o struct_test.js -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap','getValue']
cs

 

3. index.html 작성

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Wasm Test Page</title>
</head>
<body>
<button id="btn" onclick="OnClickBtn();">click here!</button>
<script>
function OnClickBtn()
{
    const study = Module.ccall('init_struct',
            'number',
            ['number''number'],
            [510]);
    
    var value_1 = Module.getValue(study, 'i32');
    var value_2 = Module.getValue(study + 4'i32');
    
    console.log('[study] value_1 = ' + value_1 + ' value_2 = ' + value_2);
}
</script>
<script type='text/javascript' src='./js/struct_test.js'></script>
</body>
</html>
 
cs

 

- return type : 'number' 는 pointer 도 포함.

- getValue(ptr, type [, noSafe]) 

  ptr -> study 구조체 변수는 4바이트 2개. 처음 value_1 가 4바이트형 자료형이기 때문에 + 4.

  type -> 'i32' 4바이트 변수 자료형

  

4. 결과 확인

 

웹어셈 관련 글을 작성하고 있지만, 이게 100%는 아니다.

그냥 참고만 하시길...

'개발 이야기 > WEB' 카테고리의 다른 글

WebAssembly C++ Class Binding  (0) 2020.05.18
Eclipse Web Project + WebAssembly Sample  (0) 2020.05.12

Eclipse Web Project + WebAssembly Sample

개발 이야기/WEB 2020. 5. 12. 15:05

웹 서버에 WebAssembly로 작성한 함수 불러오는 간단한 예제.

용어 설명은 생략.

 

1. 간단한 샘플 코드 작성

 

sample.c 라고 가정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#include <stdio.h>
#include <emscripten/emscripten.h>
 
EMSCRIPTEN_KEEPALIVE
int square(int n)
{
    return n * n;
}
 
EMSCRIPTEN_KEEPALIVE
int add(int a, int b)
{
    return a + b;
}
 
cs

 

2. emscripten 설치(우분투 18.04.4 LTS 환경에서 진행)

 

1
2
3
4
5
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
cs

 

3. 컴파일

 

emsdk 경로에 [1번 과정]에서 작성한 sample.c 복사하고 진행함.

 

1
emcc sample.c -o sample.js -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap']
cs

 

4. Eclipse 에서 Dynamic Web Project 생성

 

5. [3번 과정]에서 생성된 sample.js / sample.wasm 파일을 js 라는 디렉토리에 복사

6. index.html 작성

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Wasm Test Page</title>
</head>
<body>
<button id="btn" onclick="OnClickBtn();">click here!</button>
<script>
function OnClickBtn()
{
    //////////
    var square_ccal_result = Module.ccall('square',
            'number',
            ['number'],
            [4]);
    
    console.log('[square] ccall result = ' + square_ccal_result);
    //////////
    
    //////////
    var suqare = Module.cwrap('square',
            'number',
            ['number']);
    
    var suqare_cwrap_result = suqare(5);
    
    console.log('[square] cwrap result = ' + suqare_cwrap_result);
    //////////
    
    //////////
    var add_ccal_result = Module.ccall('add',
            'number',
            ['number''number'],
            [23]);
    console.log('[add] ccall result = ' + add_ccal_result);
    //////////
    
    //////////
    var add = Module.cwrap('add',
            'number',
            ['number''number']);
    
    var add_cwrap_result = add(79);
    console.log('[add] cwrap result = ' + add_cwrap_result);
    //////////
}
 
</script>
<script type='text/javascript' src='./js/sample.js'></script>
</body>
</html>
 
cs

 

7. 결과

 

'개발 이야기 > WEB' 카테고리의 다른 글

WebAssembly C++ Class Binding  (0) 2020.05.18
WebAssembly + C struct(구조체)  (0) 2020.05.15

Window 10 에서 Ubuntu 우분투 설치하기(WSL - Windows Subsystem for Linux)

개발 이야기/LINUX 2019. 9. 18. 10:38

1. 제어판 -> 프로그램 -> 프로그램 및 기능 메뉴 이동

2. Windows 기능 켜기/끄기 선택

3. Linux용 Windows 하위 시스템 체크박스에 체크 후 확인

 

4. Microsoft Store 에서 검색란에 'ubuntu' 입력하면 위 그림처럼 관련 앱들이 나열된다. Windows에서 Linux 실행하기를 선택.

 

5. Ubuntu 앱 선택

 

6. 앱 설치

 

7. 설치가 완료되면, 실행 버튼 선택.(필자는 업무 상의 이유로 최신 버전이 아닌, 16.04를 설치함)

 

8. 실행하면 콘솔이 열리고 몇 분 동안 설치 과정이 진행된다.

 

9. 사용자 이름 및 비밀번호를 설정하면 끝!

Android FFmpeg 빌드

개발 이야기/Android 2019. 1. 30. 16:28

구축환경

- android ndk r16b

- ffmpeg 4.0.3


이 블로그를 작성하는 2019년 2월 20일 날짜의 ffmpeg 의 최신버전은 4.1 이다.

그러나... 빌드 오류를... 못잡았다.... ㅜㅜ

나중에 최신버전으로 빌드 하면, 업데이트 하는 것으로...



1. NDK 설치



2. FFmpeg 다운로드 및 설정


1) https://www.ffmpeg.org/download.html 에서 다운로드를 받은 후에 압축을 푼다.

버전은 4.0.3 으로 다운받았다.

깔끔한 환경 설정을 위해 $(Android SDK path)/ndk-bundle/sources/ 경로를 추천한다.




2) 압축을 푼 다음, $(Android SDK path)/ndk-bundle/sources/ffmpeg-4.0.3/ 경로로 이동하여 configure 파일을 텍스트 편집이 가능한 툴로 열어서 아래와 같이 수정 한다.


1
2
3
4
5
6
7
8
9
10
11
//해당 부분을
SLIBNAME_WITH_MAJOR='$(SLIBNAME).$(LIBMAJOR)'
LIB_INSTALL_EXTRA_CMD='$$(RANLIB) "$(LIBDIR)/$(LIBNAME)"'
SLIB_INSTALL_NAME='$(SLIBNAME_WITH_VERSION)'
SLIB_INSTALL_LINKS='$(SLIBNAME_WITH_MAJOR) $(SLIBNAME)'
 
//아래와 같이 변경한다.
SLIBNAME_WITH_MAJOR='$(SLIBPREF)$(FULLNAME)-$(LIBMAJOR)$(SLIBSUF)'
LIB_INSTALL_EXTRA_CMD='$$(RANLIB) "$(LIBDIR)/$(LIBNAME)"'
SLIB_INSTALL_NAME='$(SLIBNAME_WITH_MAJOR)'
SLIB_INSTALL_LINKS='$(SLIBNAME)'
cs


3) $(Android SDK path)/ndk-bundle/sources/ 경로에 build_android.sh 파일을 생성하고

아래와 같이 작성한다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#!/bin/bash
 
export NDK=c:/Users/choijaeyong/AppData/Local/Android/sdk/ndk-bundle
export SYSROOT=$NDK/platforms/android-28/arch-arm
export TOOLCHAIN=$NDK/toolchains/arm-linux-androideabi-4.9/prebuilt/windows-x86_64
CPU=armv7-a
 
ISYSROOT=$NDK/sysroot
ASM=$ISYSROOT/usr/include/arm-linux-androideabi
 
export CUR=`cygpath -m $(pwd)`
export PREFIX=$CUR/android/$CPU
 
function build_android
{
./android_configure \
    --target-os=linux \
    --prefix=$PREFIX \
    --enable-cross-compile \
    --enable-shared \
    --disable-static \
    --disable-doc \
    --disable-ffmpeg \
    --disable-ffplay \
    --disable-ffprobe \
    --disable-avdevice \
    --disable-doc \
    --disable-symver \
    --cross-prefix=$TOOLCHAIN/bin/arm-linux-androideabi- \
    --arch=arm \
    --sysroot=$SYSROOT \
    --extra-cflags="-I$ASM -isysroot $ISYSROOT -D__ANDROID_API__=28 -U_FILE_OFFSET_BITS -Os -fPIC -DANDROID -Wno-deprecated -mfloat-abi=softfp -marm" \
    --extra-ldflags="$ADDI_LDFLAGS" \
    $ADDITIONAL_CONFIGURE_FLAG
    
make clean 
make -j16
make install
}
 
build_android
cs


3. Cygwin 설치 및 '2' 항목의 FFmpeg Build 하기



1) https://cygwin.com/install.html 에 가서 cygwin 을 설치한다.

(설치할 때, 추가 dos2unix 및 gcc-core 포함 시킨다.)



2) Cygwin Terminal 을 실행하여 아래와 같이 입력


1
2
3
4
5
cd /cygdrive/c/Users/choijaeyong/AppData/Local/Android/sdk/ndk-bundle/sources/ffmpeg-4.0.3
 
dos2unix android_build.sh
 
./android_build.sh
cs



4. 3번 과정까지 잘 따라왔으면, 빌드는 성공?

아쉽게도... 문제가 발생한다.




1) libavcodec 폴더에서 aaccoder.c 파일을 열어서

B0 -> b0 

변경




2) libavcodec 폴더에서 hevc_mvs.c 파일을 열어서

B0 -> b0

xB0 -> xb0

yB0 -> yb0

변경!



3) libavcodec 폴더에서 opus_pvq.c 파일을 열어서

B0 -> b0

변경!


5. 이제 정말 완료!!!





참고 사이트

1. https://xucanhui.com/2018/07/22/android-ndk-ffmpeg-compile/

2. https://www.jianshu.com/p/484db5ec733f




SMS Retriever API 사용 예제

개발 이야기/Android 2019. 1. 30. 13:56

android.permission.RECEIVE_SMS 권한 사용 금지


참고 링크 : https://developers.google.com/identity/sms-retriever/



1. dependencies 설정


1
2
3
dependencies {
    implementation 'com.google.android.gms:play-services-auth:16.0.1'
}
cs


2. 소스코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
private void initSmsRetrieverClient()
{
    SmsRetrieverClient mSmsClient = SmsRetriever.getClient(this);
    Task<Void> task = mSmsClient.startSmsRetriever();
    if(task != null){
        task.addOnSuccessListener(mGmsSuccessListener /*your callback method*/);
        task.addOnFailureListener(mGmsFailureListener /*your callback method*/);
    }
}
 
private OnSuccessListener mGmsSuccessListener = new OnSuccessListener()
{
    @Override
    public void onSuccess(Object o)
    {
        //AndroidManifest 에서 리시버를 추가하던지, 동적 리시버 추가
        //아래 filter 참고
        //IntentFilter filter = new IntentFilter(SmsRetriever.SMS_RETRIEVED_ACTION);
    }
};
 
private OnFailureListener mGmsFailureListener = new OnFailureListener()
{
    @Override
    public void onFailure(@NonNull Exception e)
    {
        
    }
};
 
 
cs



끝...


OnFailureListener 가 뜨는 경우가 있는데,

아마 단말에서 무슨 업데이트 하라는 팝업 같은게 나오는데, 그걸 확인 눌러야 한다.


BroadcastReceiver Wifi 상태 및 신호 세기 변화 감지

개발 이야기/Android 2017. 6. 20. 15:08

Wifi 상태값 및 신호 세기 변화를 감지하는 리시버를 알아보자.



우선... 리시버를 등록해야겠지요?


WifiManager.SUPPLICANT_STATE_CHANGED_ACTION : 상태 변화

WifiManager.RSSI_CHANGED_ACTION : 세기 변화


이렇게 두 가지 입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
private void initFilters()
{
    IntentFilter filter = new IntentFilter();
 
    filter.addAction(WifiManager.SUPPLICANT_STATE_CHANGED_ACTION);
    filter.addAction(WifiManager.RSSI_CHANGED_ACTION);
 
    registerReceiver(mFilterListener, filter);
}
 
private void unInitFilters()
{
    try{
        unregisterReceiver(mWifiScanFilterListener);
    }catch(IllegalArgumentException e){
 
    }
}
 
 
cs




이제... 처리하는 부분을 볼까요?


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    private BroadcastReceiver mFilterListener = new BroadcastReceiver() {
 
        @Override
        public void onReceive(Context context, Intent intent) {
 
 
            switch (intent.getAction()){
 
                case WifiManager.SUPPLICANT_STATE_CHANGED_ACTION:
                    SupplicantState state = intent.getParcelableExtra(WifiManager.EXTRA_NEW_STATE);
                    Log.e(TAG, "SUPPLICANT_STATE_CHANGED_ACTION = " + state);                 
                    break;
 
                case WifiManager.RSSI_CHANGED_ACTION:
                    if(!SystemUtil.isEnableWiFi(mContext))
                        return;
 
                    WifiManager wifiMng = (WifiManager)mContext.getSystemService(Context.WIFI_SERVICE);
                    WifiInfo info = wifiMng.getConnectionInfo();
 
                    int nWifiRSSI = info.getRssi();
                    Log.e(TAG, "wifi power = " + nWifiRSSI);
                    break;
 
                default:
                    break;
            }
 
        }
    };
cs


SupplicantState 값이 COMPLETE 되더라도, 실제 완료된 건 아닌 것 같습니다.

저 로그가 찍히고 몇 초간의 오차가 생기더군요


nWifiRSSI 값이 -85 아래인 경우에 신호 세기가 너무 낮아 원활한 네트워크 환경이 아니라고 판단하면

될 것 같습니다.


더 깊게 들어가신다면,,, 열심히 구글링을,,,

전 간단한 예제 소개 정도로만!


해당 App이 실행하는 동안에 적용되는 밝기 조절

개발 이야기/Android 2017. 6. 20. 14:44
현재 실행하는 App 의 화면 밝기 조절 코드이다.
App이 종료되면, 이전 밝기 값으로 바뀐다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    public void setWindowBrightness(ContentResolver resolver, Window window){
 
        int bright = -1;
 
        try{
            bright = android.provider.Settings.System.getInt(resolver, Settings.System.SCREEN_BRIGHTNESS);
        }catch(Exception e){
 
        }
        
        /*
        BRIGHT_MINIMUM = 178.5f;
        bright는 0 ~ 255 사이의 값.
        이 예제의 경우 화면 밝기를 70% 이하인 경우를 가정.
        */
        if(bright > -1 && bright < BRIGHT_MINIMUM){
            WindowManager.LayoutParams lp = window.getAttributes();
            lp.screenBrightness = 0.7f; //70% 로 설정
            window.setAttributes(lp);
        }
    }
cs



간단하게 Activity 내에서 적용해보았다.


1
setWindowBrightness(getContentResolver(), getWindow());
cs

s

쉽다!

'개발 이야기 > Android' 카테고리의 다른 글

Android FFmpeg 빌드  (0) 2019.01.30
SMS Retriever API 사용 예제  (0) 2019.01.30
BroadcastReceiver Wifi 상태 및 신호 세기 변화 감지  (0) 2017.06.20

MainWindow NullReferenceException 문제 해결

개발 이야기/WPF 2016. 1. 13. 11:45

하위 레이아웃에서 최상위 윈도우의 크기가 필요할 경우가 있었다.

System.Windows.Application.Current.MainWindow 를 쓸 경우 NullReferenceException 발생 ㄷㄷ;


1
2
3
4
5
6
7
8
9
10
public MainWindow()
{
    this.Loaded += OnWindowLoad;
}
 
private void OnWindowLoad()
{
    Application.Current.MainWindow = this;
}
 
cs


저렇게 처리하면 NullReferenceException 문제 해결 완료!

윈도우 내 컨트롤을 다른 윈도우로 위치를 변경할 떄 주의할 점

개발 이야기/WPF 2016. 1. 13. 11:38

메인 윈도우 안에 어떤 컨트롤이 있다.

이 컨트롤을 다른 윈도우 창 내부에 위치시키도록 변경시키는 작업이 있었는데, 부모 자식 관계를 끊어줘야 한다고 한다.


이 방법이 맞는지는 모르겠지만,,,

1
2
3
4
5
6
7
8
Control control;
Window otherWindow;
 
Grid parent = (Grid)this;
parent.Children.Remove(control);
 
Grid child = (Grid)otherWindow.Content;
child.Children.Add(control);
cs

난 저렇게 했다.



'개발 이야기 > WPF' 카테고리의 다른 글

MainWindow NullReferenceException 문제 해결  (0) 2016.01.13