Skip to content

Instantly share code, notes, and snippets.

@silverkorn

silverkorn/flstudio-dynamic-wallpaper.html

Last active January 27, 2021 16:03
Show Gist options
  • Save silverkorn/a53d8b51e9c28dea9712467a87437515 to your computer and use it in GitHub Desktop.
Save silverkorn/a53d8b51e9c28dea9712467a87437515 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. silverkorn revised this gist Jan 27, 2021. No changes.
  2. silverkorn revised this gist Apr 19, 2020. No changes.
  3. silverkorn revised this gist Apr 19, 2020. 1 changed file with 55 additions and 41 deletions.
    96 changes: 55 additions & 41 deletions flstudio-dynamic-wallpaper.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,41 +1,53 @@
    <html>
    <head>
    <script type="text/javascript">
    <script type="text/javascript">
    var searchTerms = "forest city night japan"; // <- Insert your image style preference
    var pexelsAPIToken = ""; // <- Insert your Pexel API token here
    var url =
    var pexelsAPIToken = ""; // <- Insert your Pexel API token here
    var url =
    "https://api.pexels.com/v1/search?query=" + searchTerms.replace(/\s+/g, '+') +
    "&min_width=" + window.innerWidth + "&min_height=" + window.innerHeight + "&per_page=1&page="
    ;
    "&min_width=" + window.innerWidth + "&min_height=" + window.innerHeight + "&per_page=1&page=";
    </script>
    <style>
    body {
    margin: 0;
    text-align: center;
    height: 100%;
    width: 100%;
    }
    .parent {
    height: 0;
    #padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    }
    body {
    margin: 0;
    text-align: center;
    height: 100%;
    width: 100%;
    }

    .child {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    }
    img {
    position: relative;
    top: 0; left: 0;
    width: 100%; height: 100%;
    }
    .card-overlay { background-color: #000000;}
    .card-overlay img { opacity: 0.625; }

    .parent {
    height: 0;
    #padding-bottom: 56.25%;
    /* 16:9 */
    position: relative;
    }

    .child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    .card-overlay {
    background-color: #000000;
    }

    .card-overlay img {
    opacity: 0.625;
    }
    </style>
    </head>

    <body scroll="no" onLoad="initPexels();" style="background-color:#202020;">
    <div class="parent">
    <div class="child">
    @@ -44,12 +56,12 @@
    </div>
    </div>
    </div>

    <script type="text/javascript">
    document.getElementById('image').addEventListener("dblclick", function(){
    document.getElementById('image').addEventListener("dblclick", function () {
    initPexels();
    });
    document.getElementById('image').addEventListener('contextmenu', function(ev) {
    document.getElementById('image').addEventListener('contextmenu', function (ev) {
    ev.preventDefault();
    if (document.getElementById('image').style.opacity <= 0.125) {
    document.getElementById('image').style.opacity = 1;
    @@ -67,39 +79,41 @@
    setRandomImageFromPexels(pexelsResults.total_results);
    }
    }

    function initPexels() {
    var client = new XMLHttpRequest();
    client.onload = initPexelsHandler;
    client.open(
    "GET",
    "GET",
    url + "1"
    );
    client.setRequestHeader("Authorization", pexelsAPIToken);
    client.send();
    }

    function setRandomImageFromPexelsHandler() {
    if (this.status == 200 && this.responseText != null) {
    var pexelsResults = JSON.parse(this.responseText);
    document.getElementById('image').src =
    pexelsResults.photos[0].src.original +
    "?auto=compress&cs=tinysrgb&fit=crop&h=" + window.innerHeight + "&w=" + window.innerWidth
    ;
    }else{
    setTimeout(function(){
    document.getElementById('image').src =
    pexelsResults.photos[0].src.original +
    "?auto=compress&cs=tinysrgb&fit=crop&h=" + window.innerHeight + "&w=" + window.innerWidth;
    } else {
    setTimeout(function () {
    setImageFromPexels();
    }, 3000);
    }
    }

    function setRandomImageFromPexels(totalResults) {
    var client = new XMLHttpRequest();
    client.onload = setRandomImageFromPexelsHandler;
    client.open(
    "GET",
    "GET",
    url + (Math.floor(Math.random() * Math.floor(totalResults) + 1))
    );
    client.setRequestHeader("Authorization", pexelsAPIToken);
    client.send();
    }
    </script>
    </body>
    </html>
    </html>
  4. silverkorn created this gist Apr 19, 2020.
    105 changes: 105 additions & 0 deletions flstudio-dynamic-wallpaper.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    <html>
    <head>
    <script type="text/javascript">
    var searchTerms = "forest city night japan"; // <- Insert your image style preference
    var pexelsAPIToken = ""; // <- Insert your Pexel API token here
    var url =
    "https://api.pexels.com/v1/search?query=" + searchTerms.replace(/\s+/g, '+') +
    "&min_width=" + window.innerWidth + "&min_height=" + window.innerHeight + "&per_page=1&page="
    ;
    </script>
    <style>
    body {
    margin: 0;
    text-align: center;
    height: 100%;
    width: 100%;
    }
    .parent {
    height: 0;
    #padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    }

    .child {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    }
    img {
    position: relative;
    top: 0; left: 0;
    width: 100%; height: 100%;
    }
    .card-overlay { background-color: #000000;}
    .card-overlay img { opacity: 0.625; }

    </style>
    </head>
    <body scroll="no" onLoad="initPexels();" style="background-color:#202020;">
    <div class="parent">
    <div class="child">
    <div class="card-overlay">
    <img id="image" src="" />
    </div>
    </div>
    </div>

    <script type="text/javascript">
    document.getElementById('image').addEventListener("dblclick", function(){
    initPexels();
    });
    document.getElementById('image').addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    if (document.getElementById('image').style.opacity <= 0.125) {
    document.getElementById('image').style.opacity = 1;
    } else {
    document.getElementById('image').style.opacity = document.getElementById('image').style.opacity - 0.125;
    }
    }, false);
    </script>

    <script type="text/javascript">
    // Pexels API
    function initPexelsHandler() {
    if (this.status == 200 && this.responseText != null) {
    var pexelsResults = JSON.parse(this.responseText);
    setRandomImageFromPexels(pexelsResults.total_results);
    }
    }
    function initPexels() {
    var client = new XMLHttpRequest();
    client.onload = initPexelsHandler;
    client.open(
    "GET",
    url + "1"
    );
    client.setRequestHeader("Authorization", pexelsAPIToken);
    client.send();
    }
    function setRandomImageFromPexelsHandler() {
    if (this.status == 200 && this.responseText != null) {
    var pexelsResults = JSON.parse(this.responseText);
    document.getElementById('image').src =
    pexelsResults.photos[0].src.original +
    "?auto=compress&cs=tinysrgb&fit=crop&h=" + window.innerHeight + "&w=" + window.innerWidth
    ;
    }else{
    setTimeout(function(){
    setImageFromPexels();
    }, 3000);
    }
    }
    function setRandomImageFromPexels(totalResults) {
    var client = new XMLHttpRequest();
    client.onload = setRandomImageFromPexelsHandler;
    client.open(
    "GET",
    url + (Math.floor(Math.random() * Math.floor(totalResults) + 1))
    );
    client.setRequestHeader("Authorization", pexelsAPIToken);
    client.send();
    }
    </script>
    </body>
    </html>