TS: Question accessing DEVICE_ORIENTATION

ionescu77 commented 3 years ago

Hello,

I have managed to implement the methods presented in the TypeScript sample, thank you so much.

https://github.com/Samsung/tizen-common-web/blob/4ac6fdacbc9bb100cc37225f99bb3a442a8450c6/samples/typescript/src/main.ts#L14

However I cannot seem to write the proper callback for DEVICE_ORIENTATION :( 🥇 :

import { productinfo, appcommon } from 'tizen-tv-webapis';
import { systeminfo } from 'tizen-common-web';

export const runOnBrowser = false;

const { setScreenSaver, AppCommonScreenSaverState } = appcommon;
const { getCapability, getPropertyValue } = systeminfo;

ngOnInit() {
      // WORKS:
      setScreenSaver(AppCommonScreenSaverState.SCREEN_SAVER_OFF, () => {
          this.updateInformation(
              'screensaver',
              `Screen Orientation, parameter value is ${AppCommonScreenSaverState.SCREEN_SAVER_OFF}`
          );
      });

      // DOES NOT WORK:
      getPropertyValue('DEVICE_ORIENTATION', (deviceOrientation) => {
        this.updateInformation(
          'orientation',
          `ScreenSaver has turned off, parameter value is ${deviceOrientation.status}`
        );
      });

  updateInformation(id: string, content: string) {
      const valueElement = document.getElementById(id);
      if (!valueElement) {
          return;
      }
      valueElement.innerHTML = content;
      console.log(content);
  }

}

Can you provide some more samples or help for more advanced API usage?

Thank you!

ionescu77 commented 3 years ago

HTML

I am using the html div from the index.html sample in the TypeScript folder of this repo:

https://github.com/Samsung/tizen-common-web/blob/4ac6fdacbc9bb100cc37225f99bb3a442a8450c6/samples/typescript/index.html#L28

            <div class="information-wrapper">
                <span class="information-title">DEVICE_ORIENTATION</span>
                <span class="information-value" id="orientation"></span>
            </div>

SejoongDeJang commented 3 years ago

@ionescu77 Hi I'm sejoong. I test your code in my TV device(Tizen version 6.0), it works well. Can you share your device information and the version of the npm package?

SejoongDeJang commented 3 years ago

$ npm list --depth=0
sample-typescript@2.0.0 D:\workspace\tsfy\tizen-common-web\samples\typescript
+-- @tizentv/wits@2.5.0
+-- @types/node@12.12.47
+-- @types/tizen-common-web@2.0.0
+-- @types/tizen-tv-webapis@2.0.0
+-- concurrently@5.2.0
+-- glob@7.1.6
+-- prettier@1.19.1
+-- tizen-common-web@2.0.1 -> D:\workspace\tsfy\tizen-common-web
+-- tizen-tv-webapis@2.0.0
+-- ts-loader@6.2.2
+-- typescript@3.9.5
+-- webpack@4.43.0
`-- webpack-cli@3.3.11

In my case, the package version are '@types/tizen-common-web@2.0.0and 'tizen-common-web@2.0.1.

prozanne commented 3 years ago

And also please check if you've already run build webpack before launching your application. "npm run webpack"

ionescu77 commented 3 years ago

Hello, thank you:

@prozanne Yup I run the webpack, build the wgt and then install and start it on the emulator.

@SejoongDeJang

Here is my npm (is a bit more extensive because I am using this in angular)

npm list --depth=0
mm-tizen-angular@0.0.0 /Users/razvansky/myProjects/mm-tizen-angular
├── __ngcc_entry_points__.json@ extraneous
├── @angular-devkit/build-angular@0.1102.8
├── @angular/animations@11.2.9
├── @angular/cli@11.2.8
├── @angular/common@11.2.9
├── @angular/compiler-cli@11.2.9
├── @angular/compiler@11.2.9
├── @angular/core@11.2.9
├── @angular/forms@11.2.9
├── @angular/platform-browser-dynamic@11.2.9
├── @angular/platform-browser@11.2.9
├── @angular/router@11.2.9
├── @types/jasmine@3.6.9
├── @types/node@12.20.7
├── @types/tizen-common-web@2.0.0
├── @types/tizen-tv-webapis@2.0.0
├── @types/video.js@7.3.15
├── animejs@3.2.1
├── child_process@1.0.2
├── codelyzer@6.0.1
├── gulp-clean-css@4.3.0
├── gulp-clean@0.4.0
├── gulp-rename@2.0.0
├── gulp-replace@1.0.0
├── gulp-run@1.7.1
├── gulp-template@5.0.0
├── gulp@4.0.2
├── jasmine-core@3.6.0
├── jasmine-spec-reporter@5.0.2
├── karma-chrome-launcher@3.1.0
├── karma-coverage@2.0.3
├── karma-jasmine-html-reporter@1.5.4
├── karma-jasmine@4.0.1
├── karma@6.1.2
├── merge-stream@2.0.0
├── protractor@7.0.0
├── readable-stream@3.6.0
├── rxjs@6.6.7
├── tizen-common-web@2.0.1
├── tizen-tv-webapis@2.0.0
├── ts-node@8.3.0
├── tslib@2.2.0
├── tslint@6.1.3
├── typescript@4.1.5
├── video.js@7.11.8
├── yargs@15.4.1
└── zone.js@0.11.4

It seems it is more like a problem accessing variables in TypeScript call-backs.

Can you actually see the deviceOrientation.status in the html?

Really some more complex examples for FileSystem API or Alarm API for TypeScript would be so great :(

SejoongDeJang commented 3 years ago

Hi @ionescu77

getPropertyValue( 'DEVICE_ORIENTATION',  (deviceOrientation: SystemInfoDeviceOrientation) => {
        console.log(deviceOrientation);
        updateInformation('orientation', `${deviceOrientation.status}`
        );
    }
);

Here is my working code. Compare to your code, I figure out you don't declare type of the callback.

So I guess your problem is occurred because of the callback. And the key is the SystemInfoPropertyType, which is the first parameter of SystemInfoPropertySuccessCallback, is a intersection type.

export interface SystemInfoPropertySuccessCallback {
    (property: SystemInfoPropertyType): void;
}

export type SystemInfoPropertyType = SystemInfoBattery & SystemInfoCpu & SystemInfoStorage & SystemInfoStorageUnit & SystemInfoDisplay & SystemInfoPanel & SystemInfoDeviceOrientation & SystemInfoBuild & SystemInfoLocale & SystemInfoNetwork & SystemInfoWifiNetwork & SystemInfoEthernetNetwork & SystemInfoCellularNetwork & SystemInfoNetProxyNetwork & SystemInfoPeripheral & SystemInfoMemory & SystemInfoVideoSource ;

And I want to know what is the 'complex example'? Tell me the exactly API name, then we follow up your developing.

ionescu77 commented 3 years ago

Hello @SejoongDeJang

Orientation Callback ⤴️ - works

I managed to get the callback to work! Nice observation indeed, about the callback. Thank you.

          tizen.systeminfo.getPropertyValue('DEVICE_ORIENTATION', (e: any) => this.ngZone.run(() => {
            this.updateInformation(
              'orientation',
              e.status
            );
            console.log('Dev orientation: ', e.status);
            // this will update the global devOrientation variable
            this.devOrientation = e.status;
        }));

By complex example is tizen.download. I do not manage to get it working in my Angular 11 project.

I think this also has to do with nagular/typescript, because I have difficulties translating the js examples from ther Tizen Documentation :(.

"Complex" Example for TypeScript Download API

Example Download API - js

For example this looks pretty straight forward:

javascript (found on the devforum, and similar to the official Tizen API download documentation examples:


var contentdownload = function () {
var url = 'https://dwdvhqfdmesuz.cloudfront.net/5bb5b552ab41a237a95db866/5bb5b618ab41a237a95db86b.jpeg';

var download_api_capability = tizen.systeminfo.getCapability("http://tizen.org/feature/download");
var wifi_capability = tizen.systeminfo.getCapability("http://tizen.org/feature/network.wifi");

var listener = {
    onprogress: function(id, receivedSize, totalSize) {
        console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
    },
    onpaused: function(id) {
        console.log('Paused with id: ' + id);
    },
    oncanceled: function(id) {
        console.log('Canceled with id: ' + id);
    },
    oncompleted: function(id, path) {
        console.log('Completed with id: ' + id + ', path: ' + path);
    },
    onfailed: function(id, error) {
        console.log('Failed with id: ' + id + ', error: ' , error); // returning error
    }
};

var downloadRequest = new tizen.DownloadRequest(url, "Downloads"); var downloadId = tizen.download.start(downloadRequest, listener); }


### Convert to Typescript - no succes

No succes in implementing the listener and start the download request

```ts

downloadFile() {
    var url = 'http://192.168.0.34:7979/media/poster_sample.png';

    const download_api_capability = tizen.systeminfo.getCapability("http://tizen.org/feature/download");

    var listener = {
        onprogress: function(id, receivedSize, totalSize) {
            console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
            this.updateInformation("downloads", "download id: "+ id + ", " + receivedSize + "/" + totalSize);
        },
        onpaused: function(id) {
            console.log('Paused with id: ' + id);
        },
        oncanceled: function(id) {
            console.log('Canceled with id: ' + id);
        },
        oncompleted: function(id, path) {
            console.log('Completed with id: ' + id + ', path: ' + path);
            this.updateInformation("downloads","Completed id: " + id + ", path: " + path);
        },
        onfailed: function(id, error) {
            console.log('Failed with id: ' + id + ', error: ' , error); // returning error
            this.updateInformation("downloads","Failed witg id: " + id + ", error: " + error);
        }
     };

    var downloadRequest = new tizen.DownloadRequest(url, "downloads");
    var downloadId = tizen.download.start(downloadRequest, listener);
}

I have tried different combinations. Including:

var downloadId = tizen.download.start(downloadRequest, () => listener);

for which I get:

Argument of type '() => { onprogress: (id: any, receivedSize: any, totalSize: any) => void; onpaused: (id: any) => void; oncanceled: (id: any) => void; oncompleted: (id: any, path: any) => void; onfailed: (id: any, error: any) => void; }' is not assignable to parameter of type 'DownloadCallback'. Type '() => { onprogress: (id: any, receivedSize: any, totalSize: any) => void; onpaused: (id: any) => void; oncanceled: (id: any) => void; oncompleted: (id: any, path: any) => void; onfailed: (id: any, error: any) => void; }' is missing the following properties from type 'DownloadCallback': oncanceled, oncompleted, onfailed, onpaused, onprogressts(2345)

Obviously I am missing again some guidance about TypeScript implementation :(

Thank you,

Raz

PS I managed to trigger the download by leaving out the listener, however I cannot monitor the download progress :(

SejoongDeJang commented 3 years ago

@ionescu77 Here is my download request code.

try {
    // Checks whether Download API is supported on a device.
    var download_api_capability = systeminfo.getCapability(
        'http://tizen.org/feature/download'
    );
    if (download_api_capability === false) {
        console.log('Download API is not supported on this device');
    }
    console.log(`start download test`);

    var listener = {
        onprogress: function(
            id: number,
            receivedSize: number,
            totalSize: number
        ) {
            console.log(
                'Received with id: ' +
                    id +
                    ', ' +
                    receivedSize +
                    '/' +
                    totalSize
            );
        },
        onpaused: function(id: number) {
            console.log('Paused with id: ' + id);
        },
        oncanceled: function(id: number) {
            console.log('Canceled with id: ' + id);
        },
        oncompleted: function(id: number, path: string) {
            console.log('Completed with id: ' + id + ', path: ' + path);
        },
        onfailed: function(id: number, error: WebAPIError) {
            console.log(
                'Failed with id: ' + id + ', error name: ' + error.name
            );
        }
    };

    // Starts downloading the file from the Web with the corresponding callbacks.
    var downloadRequest = new DownloadRequest(
        'http://download.tizen.org/tools/README.txt',
        'documents'
    );
    var downloadId = download.start(downloadRequest, listener);
    console.log('downloadId :', downloadId);
} catch (error) {}

I wonder what is your editor. I think your question is related with syntax error of the typescripts. So I suggest set up vs code with this article, then you can easily inspect the syntax error.

And we discuss about uploading our typescript TC. It include whole usage of APIs.

ionescu77 commented 3 years ago

Thank you for comming back to me.

I have an angular 11 project where I tried to implement as TypeScript, I am using Visual Studio Code with the Tizen extension.

I will give it a try.

I will find time and setup a public repo for the future to help others, too.

ionescu77 commented 3 years ago

Hello @SejoongDeJang , the code which work for me in angular 11

    var listener = {
        onprogress: (id, receivedSize, totalSize) => {
            console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
            this.updateInformation("downloads", "download id: "+ id + ", " + receivedSize + "/" + totalSize);
        },
        onpaused: (id) => {
            console.log('Paused with id: ' + id);
        },
        oncanceled: (id) => {
            console.log('Canceled with id: ' + id);
        },
        oncompleted: (id, path) => {
            console.log('Completed with id: ' + id + ', path: ' + path);
            this.updateInformation("downloads","Completed id: " + id + ", path: " + path);
        },
        onfailed: (id, error) => {
            console.log('Failed with id: ' + id + ', error: ' , error); // returning error
            this.updateInformation("downloads","Failed with id: " + id + ", error: " + error);
        }
     };

  // some other code, then

             var downloadRequest = new DownloadRequest(url,"downloads");
             var downloadId = download.start(downloadRequest, listener);

It is pretty similar, please note the "arrow functions", () => {} maybe Angular needs them to pass the correct context, or event!?

Thank you for your help.

Best regards,

Raz

Samsung / tizen-common-web