Awesome-panel.org change log

Hi @Jhsmit

You can do pretty much what you want :slight_smile: But how depends on what.

The core is really the toggleFullScreen js function. It maximizes the parent of the clicked element. You can change this function to maximize any element you would like.

<span class="fullscreen-button" onclick="toggleFullScreen(this)">
          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18"><path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"></path></svg>
        </span>
function isFullScreen(){
    return document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement;
}
function exitFullScreen(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
        }
}
function requestFullScreen(element){
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}
function toggleFullScreen(caller){
    if (
      isFullScreen()
    ) {
      exitFullScreen();
      caller.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18"><path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/></svg>'
    } else {
        requestFullScreen(caller.parentElement);
        caller.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18"><path d="M3 12.5h2.5V15H7v-4H3v1.5zm2.5-7H3V7h4V3H5.5v2.5zM11 15h1.5v-2.5H15V11h-4v4zm1.5-9.5V3H11v4h4V5.5h-2.5z"/></svg>'
    }
  }
function addFullScreenToggle(){
    const elements=document.getElementsByClassName("fullscreen-button")
    for (let element of elements){
    element.setAttribute("onclick", "toggleFullScreen(this)")
    }
}

The above was inspired by https://stackoverflow.com/questions/7130397/how-do-i-make-a-div-full-screen.

1 Like

Added icons to Light/ Dark theme switch

Streaming Dashboard example added

I wanted to test out if Panel could be used to create a nice looking, streaming dashboard. I think it turned out great.

Check it out at https://awesome-panel.org/streaming-dashboard

And feel free to like or retweet my tweet https://twitter.com/MarcSkovMadsen/status/1340739745756921857?s=20

3 Likes

This is unbelievable Marc, great work, it looks very slick!

Added Volume Profile App

This app showcases how to use Panel and HoloViews to create advanced interactive tools for exploring Price and Volume data in traded markets.

Check it out https://awesome-panel.org/volume-profile-analysis.

You can find a video here https://twitter.com/MarcSkovMadsen/status/1355837413646606336?s=20

1 Like

Added Caching Example app

Caching is a powerful technique for speeding up your analytics apps. Iโ€™ve added an example using DiskCache which I have found to be a powerful and simple solution to use.

Check out the app https://awesome-panel.org/caching-example

You can find a video here https://twitter.com/MarcSkovMadsen/status/1355838430521995265?s=20

3 Likes

Updated Awesome-Panel Home

Check out awesome-panel.org

2 Likes

Thanks for this! I think it would be easier to understand if your caching example app were three separate scripts, one for each caching method. That way, people can copy / paste the code and immediately start working with it; right now things seem intertwined, e.g. hard for people to take a quick glance and figure what lines are for caching method 1, 2, or 3.

1 Like

That brings up a question I had: is there a simple way to create a copy of the relevant code files
to incorporate in some project?
What I have been doing is a bit messyโ€ฆ