Skip to content
This repository has been archived by the owner on Mar 26, 2024. It is now read-only.

Tizen Support #104

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
21 changes: 18 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ ReactTV.render(<Clock/>, document.getElementById('root'))

- [About React-TV](#about-react-tv)
- [Understanding the Problem](#understanding-the-problem)
- [Setup for TV SKDs](#setup-for-tv-sdks)
- [Articles](#articles)
- [react-tv-cli](#react-tv-cli)
- [Developing for WebOS](#developing-for-webos)
Expand Down Expand Up @@ -72,6 +73,11 @@ These restrictions make super responsive 60fps experiences especially tricky. Th

In addition: Unify the build for multiple TV platforms.

### Setup for TV SKDs

- [Setup LG WebOS SDK](docs/setup-webos-environment.md)
- [Setup Samsung Tizen SDK](docs/setup-tizen-environment.md)

### Articles

Friendly list of tutorials and articles:
Expand Down Expand Up @@ -240,6 +246,16 @@ See [examples/navigation](examples/navigation) for more details about usage.
- http://webostv.developer.lge.com/develop/app-developer-guide/web-app-lifecycle/
- http://webostv.developer.lge.com/develop/js-services/calling-js-service/

### Tizen

- http://developer.samsung.com/tv/develop/tools/tizen-studio
- http://developer.samsung.com/tv/develop/getting-started/setting-up-sdk/installing-tv-sdk
- http://developer.samsung.com/tv/develop/getting-started/setting-up-sdk/creating-certificates
- http://developer.samsung.com/tv/develop/getting-started/creating-tv-applications
- http://developer.samsung.com/tv/design/design-principles
- http://developer.samsung.com/tv/develop/specifications/general-specifications
- http://developer.samsung.com/tv/develop/specifications/web-engine-specifications

#### Videos

##### Windows
Expand All @@ -252,7 +268,6 @@ See [examples/navigation](examples/navigation) for more details about usage.

### Essentials to beginner

- http://developer.samsung.com/tv/develop/getting-started/setup-sdk/installing-tv-sdk/
- http://developer.samsung.com/tv/develop/getting-started/using-sdk/tv-simulator
- http://developer.samsung.com/tv/develop/getting-started/essentials-for-beginner

Expand Down Expand Up @@ -289,7 +304,7 @@ Implement essential functionality needed for daily use by early adopters.
- [ ] Support render to Canvas instead DOM using `React.CanvasComponent`
- [x] `run-webos` support TV device as param
- [ ] Optmizate DOMRenderer for TV
- [ ] Start CLI for Tizen
- [x] Start CLI for Tizen
- [x] Develop helpers for WebOS debbug (e.g: Log System).
- [x] Support Cross Platform
- [x] Check executable bin path for Windows, OSX and Linux
Expand All @@ -307,7 +322,7 @@ Add additional features users expect from a Renderer. Then fix bugs and stabiliz
- [ ] Reactive Renderer
- [ ] Testing and stability

----------------------------------------------------
----------------------------------------------------

See ReactTV's [Changelog](https://github.com/raphamorim/react-tv/blob/master/CHANGELOG.md).

Expand Down
13 changes: 13 additions & 0 deletions docs/setup-tizen-environment.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Setup Tizen Environment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me comment on this. (May be this speech should be included later as a documentation section)

Tizen TV apps development process is ugly as I can have understood in the last few days. 😫
There're several TV Platforms and at the same time there several version of IDEs. And to start development process you should find the right combination between these ones.

Tizen Platform gets installed on the TVs since 2015 and has several versions according to this table:

  • Tizen 2.3 (for 2015 models)
  • Tizen 2.4 (for 2016 models)
  • Tizen 3.0 (for 2017)
  • Tizen 4.0 (ta-daam 🎉, drumsound 🥁 , for 2018 ones)

Tizen 4.0 TVs have not even been released yet and the list of available models will be ready at February 2018.

So for the time beeing the latest phisical device with installed Tizen Platform you can use for development has 3.0 version.

Now let's consider available IDEs for Tizen app development:

  • Tizen Studio 1.0
  • Tizen Studio 1.1
  • Tizen Studio 1.2
  • Tizen Studio 1.3
  • Tizen Studio 2.0
  • Tizen Studio 2.1
  • And the legacy Tizen SDK IDE (the latest available version is 2.4-rev8)

You can download all of the above from the download archive page.
You do not find these links on official Tizen/Samsung TV development related pages.

Now let's try to download the latest version of Tizen Studio. But there's a note below that says

Note Tizen Studio 2.x supports TV Extension 4.x or higher.

TV Extension is required by IDE to enable TV development. Without it you can create apps only for mobile phones and wearables. Extension version corresponds to Tizen Platform version.

OK. I have, for example, flagmanship Samsung TV device and cannot develop for it with the latest available IDE 🤦‍♂️

If you try to connect to your Samsung TV from Tizen Studio 2.0 with installed TV Extension 4.0 you will get an error indicating that the Platform Unknown.

So the only one workaround is to download the previous version of Tizen Studio that is 1.3.
Also you need to install TV Extension 3.1.2 as suggested here:

You may download the TV Extension 3.1.2, that should contain packages for 2.X & 3.X development.

Additionally, Rather than Tizen Studio 2.X, I would suggest you to download & Install Previous IDE (For example: Tizen SDK 2.4 Rev8 or Tizen Studio 1.2 )

But when you open Tizen Studio 1.3 it tries to update itself to 2.x version.
So you need to disable autoupdate and install TV Extension manually.
You can find instructions here. (See my comment on Andrew Witte's post)

Only after that you can start normal development for Samsung Tizen TVs and upload your app in the device.

Very VERY terrible experience.

P.S. Based on this I'd also suggest you to give up on your intent to support Samsung Orsay platform.
I'm in doubt that supporting older that 2014 year TV models will have any impact on users and will bring any benefits.
Samsung/Tizen doesn't have acceptable development tools for current devices and what happens with the earlier ones only God knows.
I'm afraid that tools/IDEs/SDKs might not be available any more.

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But when you open Tizen Studio 1.3 it tries to update itself to 2.x version.
So you need to disable autoupdate and install TV Extension manually.
You can find instructions here. (See my comment on Andrew Witte's post)

Thanks for the advice.

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to be a chaotic scenario @Blinnikov 😢

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately it is. 😞
Samsung/Tizen forums are full of angry people who are indignant about the unclear development process.
By the way It looks I found a way to run apps from Tizen Studio 2.x on old devices 2.3+.
I'll post on this in a while when I test all the scenarios.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've just posted an article on Medium describing the problem and the solution 🎉 :

Developing for “old” Samsung TVs in Tizen Studio 2.x

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't really need Tizen SDK to develop the applications.
We need it to:

  • Pack and Sign
  • Run to Device
  • Emulator

For the first two, we can do it without the Tizen SDK (ref: https://github.com/Samsung/vscode-extension-tizentv)
To Emulator we might be able to use only the contents from the "tv-extensions-X.X".

To Samsung Legacy SDK (Orsay?) we can use the stuff from cordova (https://github.com/Samsung/grunt-cordova-sectv/blob/master/tasks/packager/sectv-orsay.js)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dead It's a great solution for standard apps.

As a Samsung partner we are using web hosted apps. So, in this case, we need to replace a index.html with an url in confit.xml at <content src="" /> node. Unfortunately VSCode extension doesn't support this. 😢

Copy link

@fourscience fourscience Nov 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dead You need the sdb part still for the extension (tizen studio/sdk) and they include it there
but: sdb is "basically" an adb, which is open source so you can go with it ;)
so it could be done (and it's done here)

  • run your adb server with node, use socket and define the protocol
  • implement the device discovery (or just map the devices via hand)
  • implement the basic commands:
  OPEN: (localId, destination = DESTINATIONS.SHELL) => {
    //Buffer("OPEN").readUInt32LE(0); // 0x4e45504f
    return SDB.pack(
      Buffer.from("OPEN").readUInt32LE(0),
      localId,
      0,
      destination
    );
  },
   // and internal command definition:
   SHELL: args => `shell:${args}:`,
   // and and actual command on the device, it will give an OKAY then the results
   const cmd = SDB.COMMANDS.OPEN(0x42, SDB.DESTINATIONS.SHELL("0 vd_applist"));


pack it, then send it thought your server, it will respond, make sure to have the talk going on with the client as it should and voila, in order to support older ones, just de-ref the 1.4 bridge and check the commands

:) 👍
same goes for the emulator,
the packaging is easy as well, signing is in the same samsung like lazy level :)
they mention security all over the place and they still keep using legacy tech on their flagship devices


Alternative guides:

- [Developing for “old” Samsung TVs in Tizen Studio 2.x](https://medium.com/@ibazzva/developing-for-old-samsung-tvs-in-tizen-studio-2-x-5aa3f853db09)

[Install the Tizen Studio](http://developer.samsung.com/tv/develop/tools/tizen-studio)

[Install Tizen Studio 2.1](http://download.tizen.org/sdk/Installer/tizen-studio_2.1/)

[Install the TV SDK](http://developer.samsung.com/tv/develop/getting-started/setting-up-sdk/installing-tv-sdk/)

Using the Package Manager install the Web CLI, Native CLI and Baseline SDK packages under the Tizen SDK Tools
8 changes: 8 additions & 0 deletions docs/setup-webos-environment.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ Execute your Installer (If you're in Linux or Mac the Installer will ask for be

![Executing OSX Installer](resources/webos/1-executing-osx-installer.png)

For OSX: Note if you doesn’t have `/opt` folder, you must to create manual.

```bash
sudo mkdir /opt
```

You pop the SDK Installer, select "Agree" about LG Agreement and choose the destination folder for this installation to continue.

![WebOS Introduction](resources/webos/2-webos-introduction.png)
Expand All @@ -39,3 +45,5 @@ You'll install all packages.
After installation step, restart your machine.

![WebOS Complete](resources/webos/5-webos-complete.png)

SDK Installed!
7 changes: 7 additions & 0 deletions examples/clock-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,15 @@ yarn

To run it:

WebOS:
```shell
yarn start

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rename to start-webos for consistency

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

```

Tizen:
```shell
yarn start-tizen
```


![Screenshot](screenshot.png)
3 changes: 3 additions & 0 deletions examples/clock-app/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ class Clock extends React.Component {
if (Platform('webos'))
currentPlatform = 'LG WebOS'

if (Platform('tizen'))
currentPlatform = 'Samsung Tizen'

return (
<div class='container'>
<img src='https://i.imgur.com/9yhDR0Q.png'/>
Expand Down
8 changes: 7 additions & 1 deletion examples/navigation/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ yarn start-dev

To run it on TV WebOS:

WebOS:
```shell
yarn start
yarn start-webos
```

Tizen:
```shell
yarn start-tizen
```
4 changes: 3 additions & 1 deletion examples/navigation/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@
},
"scripts": {
"build": "webpack",
"build-prod": "NODE_ENV=production yarn build",
"build-prod": "cross-env NODE_ENV=production yarn build",
"react-tv-cli": "react-tv-cli",
"start": "yarn build-prod && react-tv-cli run-webos",

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rename to start-webos for consistency

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

"start-tizen": "yarn build && react-tv run-tizen",
"start-dev": "webpack-dev-server --progress --colors"
},
"dependencies": {
Expand All @@ -29,6 +30,7 @@
"babel-loader": "^6.2.1",
"babel-polyfill": "^6.26.0",
"babel-preset-react": "^6.3.13",
"cross-env": "^5.1.1",
"webpack": "^1.12.12",
"webpack-dev-server": "^1.12.1"
}
Expand Down
12 changes: 12 additions & 0 deletions packages/react-tv-cli/bootstrap/react-tv/tizen/config.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/Template01" version="0.2.1" viewmodes="maximized">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May be we need some random id generation here.
Low priority though.

<tizen:application id="{{TIZEN_PACKAGE}}.{{TIZEN_REACTTVAPP}}" package="{{TIZEN_PACKAGE}}" required_version="2.3"/>
<name>{{REACTTVAPP}}</name>
<icon src="icon.png"/>
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
<tizen:metadata key="http://samsung.com/tv/metadata/prelaunch.support" value="true"/>
<tizen:profile name="tv"/>
<tizen:setting background-support="disable" context-menu="enable" encryption="disable" hwkey-event="enable" install-location="auto" screen-orientation="landscape"/>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice if we could set the screen orientation dynamically :).

</widget>
10 changes: 9 additions & 1 deletion packages/react-tv-cli/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

const argv = process.argv;
const {help, version, createReactTVApp} = require('./shared');
const {WebOS} = require('./scripts');
const {WebOS, Tizen} = require('./scripts');

if (argv.length < 2) {
return help();
Expand Down Expand Up @@ -41,6 +41,14 @@ switch (command) {
WebOS.getKey(device);
break;

case 'run-tizen':
if (argv.length > 3) {
device = argv[3];
}

Tizen.run(process.cwd());
break;

case '--version':
version();
break;
Expand Down
3 changes: 2 additions & 1 deletion packages/react-tv-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
"chalk": "^2.1.0",
"fs-extra": "^4.0.3",
"node-replace": "^0.3.1",
"node-webos": "^0.3.0"
"node-webos": "^0.3.0",
"randomstring": "^1.1.5"
},
"repository": {
"type": "git",
Expand Down
5 changes: 5 additions & 0 deletions packages/react-tv-cli/scripts/tizen/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const run = require('./run');

module.exports = {
run,
};
177 changes: 177 additions & 0 deletions packages/react-tv-cli/scripts/tizen/run.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
const path = require('path');
const fs = require('fs-extra');
const chalk = require('chalk');
const execSync = require('child_process').execSync;

function defaultCLIEnv() {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please avoid hardcoded paths.
This works only for your environment. There's no user celio.latorraca on my Mac.
Moreover, I would suggest to remove this fallback function at all since we force users to have TIZEN_CLI env variable specified.

//return '/opt/tizen/tools/ide/bin';
return 'E:/Ferramentas/tizen/tools/ide/bin';
}

function getPackageId(root) {
const appinfo = path.resolve(root, 'react-tv/tizen/config.xml');
const content = fs.readFileSync(appinfo, {encoding: 'utf-8'});

const re = new RegExp(/tizen:application id="(.*?)"/);
const matches = content.match(re);

if (!matches) {
return null;
}

return matches[1];
}

function isReactTVTizenProject(root) {
const appinfo = path.resolve(root, 'react-tv/tizen/config.xml');
if (fs.existsSync(appinfo)) {
return true;
}
return false;
}

function run(root) {
let tizen_CLI_ENV = process.env.TIZEN_CLI || false;
if (!tizen_CLI_ENV) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not needed I think.
Throw an Error if TIZEN_CLI variable not specified.

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I need to think better about this approach. Because React-TV already tries to predict EnvPath on WebOS scenarios. I don't have assure if this is the best approach.

Another idea is allow to set configuration for binary paths on package.json

tizen_CLI_ENV = defaultCLIEnv();
}

process.env.PATH = `${tizen_CLI_ENV}:${process.env.PATH}`;

if (!isReactTVTizenProject(root)) {
const msg = `This project isn\'t a React-TV Tizen Project:
Just run "react-tv init"`;
return console.log(chalk.dim('[react-tv]'), msg);
}

const packageJson = require(path.resolve(root, 'package.json'));
const ReactTVConfig = packageJson['react-tv'];
if (!ReactTVConfig) {
return console.log(
chalk.dim('[react-tv]'),
'You should set react-tv properties on package.json'
);
}

if (!ReactTVConfig.files || !ReactTVConfig.files.length) {
return console.log(chalk.dim('[react-tv]'), 'You should add files');
}

// TODO: option to create/select profiles?
Copy link

@chittolina chittolina Nov 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The user could pass it by a CLI argument or he could be asked interactively here. What do you think? Btw I could help you out.

const securityProfiles = execSync(
`${tizen_CLI_ENV}/tizen security-profiles list`
)
.toString()
.trim()
.split('\n');
if (!securityProfiles) {
return console.log(
chalk.dim('[react-tv]'),
'No tizen security profiles found'
);
}

// Select the last profile
const selectedProfile = securityProfiles[securityProfiles.length - 1]
.split(' ', 1)[0]
.trim();

const tizenPath = path.resolve(root, 'react-tv/tizen');

process.on('exit', cleanup);
process.on('SIGINT', cleanup);
process.on('SIGUSR1', cleanup);
process.on('SIGUSR2', cleanup);
process.on('uncaughtException', cleanup);

function cleanup() {
fs.removeSync(`${tizenPath}/icon.png`);
ReactTVConfig.files.forEach(file => {
fs.removeSync(`${tizenPath}/${file}`);
});
}

try {
cleanup();
fs.copySync(`${root}/react-tv/icon-large.png`, `${tizenPath}/icon.png`);

ReactTVConfig.files.forEach(file => {
const filePath = path.resolve(root, file);
const toFile = path.resolve(tizenPath, file);
fs.ensureDirSync(path.dirname(toFile));
fs.copySync(`${filePath}`, `${toFile}`);
});
} catch (e) {
return console.log('FAIL TO MOUNT', e.toString());
}

console.log('');
console.log(chalk.dim('Setting up Emulator...'));

const vms = execSync(

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Who's interesting on running apps on emulators?
We need to support real devices.
This may be an additional config option (run on device/emulator).

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that would be an additional.
But not all developer have real devices to test.
BTW: Check #107, I think it will be a better approach.

`${tizen_CLI_ENV}/../../emulator/bin/em-cli list-vm`
).toString();

if (vms.indexOf('react-tv-tizen') < 0) {
execSync(
`${tizen_CLI_ENV}/../../emulator/bin/em-cli create -n react-tv-tizen -p tv-samsung-3.0-x86`
);
}

const runningVms = execSync(`${tizen_CLI_ENV}/../../sdb devices`).toString();

if (runningVms.indexOf('react-tv-tizen') < 0) {
console.log(chalk.dim('Running Emulator...'));
execSync(
`${tizen_CLI_ENV}/../../emulator/bin/em-cli launch -n react-tv-tizen`
);
console.log(chalk.yellow(' Tizen Emulator successful running'));
} else {
console.log(chalk.yellow(' already running.'));
}

console.log(chalk.dim('Packing...'));
execSync(
`cd ${tizenPath} && ${tizen_CLI_ENV}/tizen package -t wgt -s ${selectedProfile}`
);
console.log(chalk.yellow(` succefull pack from ${root}`));

console.log(chalk.dim('Running App...'));

let attemps = 0;
const task = setInterval(function() {
if (attemps > 15) {
console.log('FAILED TO UP Tizen emulator');
clearInterval(task);
}

try {
execSync(`${tizen_CLI_ENV}/../../sdb devices`).toString();

execSync(
`cd ${tizenPath} && ${tizen_CLI_ENV}/tizen install -n ${
packageJson.name
}.wgt -t react-tv-tizen`
);
} catch (error) {
if (error.stdout.toString().indexOf('install completed') < 0) {
attemps += 1;
return false;
}
}

clearInterval(task);

const packageId = getPackageId(root);

if (!packageId) {
return console.log('Invalid package id!');
}

execSync(
`cd ${tizenPath} && ${tizen_CLI_ENV}/tizen run -p ${packageId} -t react-tv-tizen`
);
}, 500);
}

module.exports = run;
Loading