Custom Component: Add react-fullscreen support

PowerShell Universal Universal Dashboard
1

Hi @psDevUK,

I saw this request and immediately was thinking about you, dont know why :wink:

Maybe you “need” another project for your rapidly fast growing collection.

PS: Props for all your projects!

1 Like
2

Hey Augustin!

Yeah thanks for having mentioned that! :smiley:
Indeed I’ve also seen that @psDevUK is very active on this matter and has already created some great additional components… Of course it would be very cool from you if you had some time for integrating that as well… :smiley:

Thanks,
Don

2 Likes
3

Hello @DonUD I can have a look at this, I personally didn’t know this existed…but yeah will have a butchers to see what is out there…I will do a new post shortly, but I really do encourage others to take the plunge and have a go at doing their own custom component :smiley:

4

Thanks @augustin.ziegler I published my 15th component today to the market-place and gallery. I will see what I can cook-up but running out of time as starting something new and super important very soon.
However I have written 15 blogs on each component I built recently with a complete break-down of the build process…I am hoping this will encourage others to get building :smile:

1 Like
5

Save your time and energy for the important stuff :slight_smile: wish you all the best for your new journey

6

Do you mean this? I might have time to build and blog this tonight…

7

Another library was mentioned at github, but I guess if its doing the same its fine :slight_smile:

1 Like
8

I got side-tracked doing some more CSS work on the most recent component…but the good news is I got a demo version of this full screen working…the bad news is I need to go to bed :rofl: hopefully post a demo when I wake up :grin:

1 Like
9

Hey Adam! :smiley:

Thanks a lot for your efforts mate! Really appreciate it! Yeah you’re absolutely right… I really need to have a closer look on how to do that… Will do it examing your blog posts which seem really detailed! :smiley:

Regarding your question, I’m not sure that the other project you mentioned does the same… In fact the one I’ve posted on the issue tracker does really put an image (content) into “real fullscreen”… like a video in youtube for example…
So I don’t know on which one you’re working on right now…

In anycase I’m really excited to have a look at your progess on it but please… TAKE YOUR TIME!!
It’s absolutely not urgent… and as always family comes first… :wink:

Have a very good weekend!

Kind regards
Don

1 Like
10

Hi @DonUD

Yeah the first package I was looking at wasn’t a full, full screen. @augustin.ziegler kindly posted the link to the package which really is full screen like a youtube video. However the building was not going to plan, so I searched for a codesandbox example. With the example I found I was then able to put a button which then made the screen go full-size covering the whole screen area, and the esc/close button also worked.
So today the mission is to make the content this full screen can display to be dynamic content that is provided.
From looking at the examples it gets quite a bit more complex coding-wise the more full screen windows you want open. As I am not a react developer, I will probably build it so you just get the one full screen window. Just hoping I can pass the -Content parameter as ascriptblock and get it all working :grin:

11

Hey @psDevUK

Super, that sounds very promising! :smiley:
I’m not quite sure to understand what you mean by “more full screen windows you want open”. Indeed I think it should only be one and not multiple… So of course if the content of that first opened full-screen window can be dynamic, which means that we could for example define in the dashboard a sequence of content to show and then use a shortcut or the arrow keys or a click (like on powerpoint as an example), this would obviously make it very professional! :smiley:

But as said, you certainly don’t have to spend more time on this than you’ve planned… so don’t worry… maybe I can then use this project as a base to learn and contribute to it as well… :wink:

Thanks again for your much appreciated help! :smiley:

Best,
Don

12

I believe the multiple full-screens then act as like a slide, as in power-point slide to next screen…
Okay so I modified a few bits to get custom props on the button to size it and set the color, however I was finding I could only pass text. I looked at the README on the node packge for Universal-Dashboard and saw there is something to render child components

render (function)

This function is used to render other Universal Dashboard components. This might be handy if you support child components for your component.

const MyComponent = props => {
    return props.children.map(x => props.render(x))
}

export withComponentFeatures(MyComponent);

However I cannot get that snippet to work, or do not see an automatic RENDER parameter show…so I am a bit stuck…atm…this is the component JSX file so far…I just need to render child components where I wrote in capitals

import React, { useCallback } from 'react';
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import { withComponentFeatures } from 'universal-dashboard';
import { GoScreenFull } from "react-icons/go";
import { GoScreenNormal } from "react-icons/go";
const UDFullScreen = props => {
  const handle = useFullScreenHandle();
  return (
    <div key={props.id} className="UDFullScreen">
      <button onClick={handle.enter} style={{ ['background-color']: props.buttonColor, ['border-radius']: "8px" }}>
        <GoScreenFull style={{height: props.heightFull, width: props.widthFull}}/>
      </button>
      <FullScreen handle={handle}>
          {handle.active && (
            <button onClick={handle.exit} style={{ ['background-color']: props.buttonScolor, ['border-radius']: "8px" }}>
              <GoScreenNormal style={{height: props.heightNormal, width: props.widthNormal}}/>
            </button>
          )}
       
SOMETHING NEEDS TO GO IN HERE TO BIND THE UD COMPONENTS YOU WANT DISPLAYING

      </FullScreen>
    </div>
  );
}

export default withComponentFeatures(UDFullScreen)

If @adam could be so kind to explain that last little bit then this component is done

13

Hey @psDevUK

Thanks a lot so far! This looks really promising to me… OK hopefully @adam will find some time to help with the missing bits… :slight_smile:

I wish a very good weekend to everyone that will read this thread. :smiley:

Best,
Don

1 Like
14

So just to confirm if I replaced the CAPITAL text with {props.text} and added that to the PSM1 it works, as in I can type custom text, then expand the screen full screen, and have the option of pressing ESC or the normal screen button to put the screen back to normal size. So the component does work within Powershell Universal. However I know people will want to embed graphs or tables to then display full screen. I found the snippet of documentation that explains this as posted above, but I tried many different ways and cannot get it to embed other UD components into the full-screen…I am sure this doesn’t take a lot to do, as in the code required. But till this is figured out then it’s nice but only works with text at the moment.
I got a 3 hour drive to do shortly so might be able to look at it this evening again, or try to find the code behind an existing component which should then show me how to bind the child UD components into this component. :smile:

Update…

I just figured this out…Wahoo! Okay so I need to get ready for this journey, my wife tells me the hotel has wifi so will hope to write a blog and stick this module on the market-place later on this evening…Super Sunday
UDFullScreen

2 Likes
15

Hey @psDevUK

WOW!! :astonished: You did it finally!! So great!! THANK YOU VERY MUCH!! :partying_face:
Really hope your wife doesn’t get too mad on you because of all the efforts that you’ve put on this during your weekend… :sweat_smile:
In any case really looking forward to read your blog article once finished and then try this new module out once published! :grinning:

But please take your time!!

Thanks again and have a very good start in this new week,
Don

1 Like
16

Done a lot of driving…hence the delay to writing this reply. Started blogging everything last night, but after a long drive I was tapped-out. Had along drive home this evening too. Totally worth it for this new job as it’s a dream come true. Anyways back to the topic of discussion…

Well fellow dashboarders all the goodness is in my latest and greatest blog right here, so please have a read to find out all about how this came to be

1 Like
17

Hey @psDevUK :grinning:

Thanks a lot mate! You’ve really done a great job… and so quick… wow! :scream:
Also reading your entire blog post was a pleasure! I like your way to blog about things… :smile::ok_hand:

Couple questions though. But please just answer when you find some time. Not urgent at all… :wink:

I’ve just added the component to a new test dashboard and used your example on the blog.

  • I think you were using a parameter (-URL) that you later on removed and just left -Content to be more generic on any use case, right?
  • Is it possible to hide the Fullscreen button (in order to use only the Esc keyboard button to exit Fullscreen)?
  • As far as I can see there’s no way to have sort of a slideshow… Means where you can use your arrow keys to step over the next content, right? You’ll have to exit the UDFullscreen you’re in and enter the new one, am I correct?
  • Do you know if it is possible to also specify the “destination screen” you want the element to go full screen? Imagine you have multiple screens and not just one… maybe you would like the full screen to go to the big monitor on your wall instead of your main pc / laptop screen…
  • Right now everything that is inside the UDFullscreen Section will also show up in the dashboard directly. Is it somehow possible to define the UDFullscreen Button to not directly show up the content but only when you press the button itself? Imagine it being sort of a UDButton that triggers the fullscreen elements defined in it…

I know I have a lot of questions and I’m really sorry for that. :grin::see_no_evil:
And I don’t expect you to “solve” all these questions… but maybe I can try to contribute to the project if I just know if all of that would be feasable… Since I’m not a web developer I don’t know what the possibilities are…

Thanks again and wish you a very good day!

Kind regards
Don

18

So the demo dashboard I used is using another custom component new-udlinkpreview which has a URL parameter. As explained when I first took this on. When displaying multiple things in full screen to get like an arrow choice the code seemed to get a lot more advanced. Hence I said I would just do one full screen. I added custom css for the buttons but did not add the DISPLAY however have you tried setting normal screen button Color to transparent and the size to 0em this should then hide it. If not I can add that’s as a css prop and you could choose something like display none. I don’t think redirection will be possible as you need to embed the content between the full screen tags where I typed that CAPITAL sententence
I don’t know on other things you asked as not tested for that scenario. So would have to run some tests to find out

19

Alright! Thanks a lot for answering so quick. I’ll try myself as well a couple things and also will see if I can modify the component itself to see if I can manage to do it :sweat_smile:

I will then post my results and / or questions :grin:

1 Like
20

No worries. In the blog I included as much information as I could for how I built this including the main component file and the function to make it happen. You could maybe try embedding it in different div tags or add more css styling to achieve different results. As mentioned the code behind making multiple slides seemed a bit more complex and how to dynamic add more slides? Then you got to think about how to turn those into props to then call from the powershell function. For me I just wanted to provide a full screen as requested and be able to embed components in that. The other option of slides seemed to add to many hurdles for me to jump. Hence I went with the single full screen option. Please do have a go at tweaking this as it proves it does work in Powershell Universal. This package only needs a few dependencies. Look at the image zoom blog for a step by step guide to get building and what you need