Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there any way to make partial window app? #161

Closed
growdai1y opened this issue Jul 8, 2021 · 14 comments
Closed

Is there any way to make partial window app? #161

growdai1y opened this issue Jul 8, 2021 · 14 comments

Comments

@growdai1y
Copy link

It'd be better to look at the image below to understand what partial window apps are.

ui

Volume and channel indicators can be called "partial window apps" in tizen tv.
(or can be called full screen apps with full transparency. I'm fine with either ways.)
It'd be great if I can implement apps like above with flutter-tizen.

@xuelian-bai
Copy link

I think it's possible to set the window size to be as small as current volume app on Tizen TV, composition and key handler will be done by e20. But, for these kind of apps, what's the benefit can you get by using flutter? I mean the UX seems simple, but the logic is complicated.

@swift-kim
Copy link
Member

swift-kim commented Jul 9, 2021

Currently only "rectangular" non-transparent apps can be created with flutter-tizen, even with the recent patch made to the engine.

By the way how can you manage the focus when multiple apps are displayed in one screen? When does an app get a focus or lose it?

@xuelian-bai
Copy link

transparency is not a problem, it could be supported.
Focus management is done by e20, e20 will check location of window and set focus to coresponding window.
For volume app, there is a daemon service, it will handle volume key and display the coresponding icon, most common scenario is, it display an icon on top of tv-viewer, and tv-viewer is actually displaying video on video plane, it's not a complicated scenario for e20.

@growdai1y
Copy link
Author

@xuelian-bai I'm maintaining legacy code written in c w/ Efl which is really horrible. I'd like to re-implement them with flutter if possible. So I'm just trying to give it a shot.

Could you please give me some example code?

@xuelian-bai
Copy link

right now, you can first setup flutter-tizen environment https://github.com/flutter-tizen/flutter-tizen/blob/master/doc/get-started.md, when you run flutter-tizen create you will get a example code, you can create your widget based on it. right now, you can work on full screen first.

@xuelian-bai
Copy link

https://github.com/flutter/samples these are official samples

@swift-kim
Copy link
Member

swift-kim commented Jul 9, 2021

It seems not possible to display an app on top of another app. When I open a full screen app (A) and try to open a partial app (B) on TV emulator, the app A is closed and only the app B is displayed:

image

If this is just what you want for now, you can try by applying this PR which hasn't been merged yet.

  1. Go to the flutter-tizen installation directory and fetch the PR. For example,

    git config --global alias.pr '!f() { git fetch -fu ${2:-$(git remote |grep ^upstream || echo origin)} refs/pull/$1/head:pr/$1 && git checkout pr/$1; }; f'
    git pr 159
  2. Remove or invalidate existing engine artifacts (if exist).

    rm flutter/bin/cache/tizen-sdk.stamp
  3. Download the build output of Add FlutterDesktopWindowProperties to the public API engine#133 directly from the CI server.

    AZURE_BUILD_ID=373 flutter-tizen precache --tizen
  4. Change the app's tizen/App.cs file as follows:

    ...
    
    protected override void OnCreate()
    {
        WindowOffsetX = 0;
        WindowOffsetY = 300;
        WindowWidth = 320;
        WindowHeight = 480;
        IsWindowTransparent = true;
        IsWindowFocusable = false;
    
        base.OnCreate();
    
        GeneratedPluginRegistrant.RegisterPlugins(this);
    }
    
    ...
  5. Run the app.

@xuelian-bai
Copy link

normally two apps will act just like you said, but as I know, tv-viewer is a special app on tv.

@growdai1y
Copy link
Author

@xuelian-bai
I've experienced in android app development with flutter already. I just wanted to keep the same experience and fun on tizen tv.
And now I'm maintaining tvviewer app and trying to make a chance to apply flutter. Which I guess make other people see some benefits on using flutter.

And tvviewer is not a special app. It is as same as other apps. There is nothing special about it.
BTW, It is wonderful that you knew tvviewer.

How could I implement the replica of tvviewer with flutter?
Especially, channel and volume indicators.

1st obstacle is partial window app.

@xuelian-bai
Copy link

for partial window app,

  1. as @swift-kim mentioned, he has a patch Add support for FlutterDesktopWindowProperties #159 for creating small window, when it merged, you can create a small window
  2. To make it as a partial window, we still need to set window transparency and background transparency inside flutter-tizen engine, we will support it soon.

@swift-kim
Copy link
Member

swift-kim commented Jul 12, 2021

I made a patch (flutter-tizen/engine#139) as suggested by @xuelian-bai.

image

In order to create an app which has a transparent background,

  1. Apply Is there any way to make partial window app? #161 (comment) with AZURE_BUILD_ID=389,
  2. Change your app's main.dart as follows:

    ...
    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        ...

Note that the partial window app still gets the main focus while it's running. I tried to set ecore_wl2_window_type_set to something else than ECORE_WL2_WINDOW_TYPE_TOPLEVEL but it didn't help.

@xuelian-bai
Copy link

xuelian-bai commented Jul 12, 2021

elm_win_prop_focus_skip_set(Evas_Object *obj, Eina_Bool skip) can be set to skip focus for the window, but seems that we can't use it...
Try this one ecore_wl2_window_focus_skip_set()

@swift-kim
Copy link
Member

@xuelian-bai It worked and I created a property focusable in flutter-tizen/engine#139. Please take a look.

@justwrite99 Is this actually what you need?

@growdai1y
Copy link
Author

@swift-kim Thank you for your efforts. I guess this is it!! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants