Troubles with inserting pens

Comments

15 comments

  • Avatar
    Darius Aleksas
    What do you want for background; what is the look you are going for? I mean you are not going to have white bubbles on white background, right? Apparently there is some certain plan.
    0
    Comment actions Permalink
  • Avatar
    Darius Aleksas
    If you want image for a background, it is quite easy to do. Line #23 in JS window: this.canvas.style.background = 'rgb(56, 115, 152)';

    Replace 'rgb(56, 115, 152)' with 'url(link to image file)'
    0
    Comment actions Permalink
  • Avatar
    Bihler IT
    what i wanted to do is use my background but add those bubbles like the confetti html one.
    0
    Comment actions Permalink
  • Avatar
    Darius Aleksas
    If your background is image, then the method above works fine... I tested.

    Also I was able to make default background transparent and see the bubbles against underlying background color. For that I assigned different color to <body> in CSS. Then in JS, at the same line #23 to rgb color I added transparency "0" as such: 'rgb(56, 115, 152, 0)'. When you say bubbles disappear, do you mean you are seeing just white?... If your background is white, then you not gonna see white-colored bubbles against it.
    0
    Comment actions Permalink
  • Avatar
    Bihler IT
    even in rise vision it does not display for me, I'm not the best at HTML so it could just be my coding but I'm unsure.
    0
    Comment actions Permalink
  • Avatar
    Bihler IT
    I wanted to put the bubbles on this as an effect
    0
    Comment actions Permalink
  • Avatar
    Darius Aleksas
    It works well: http://preview.risevision.com/?type=presentation&id=77d77cb9-a231-419f-85a3-7ca8335d0480&sho...

    I am pretty sure you are messing up the links pointing to CSS and JS files. Get those right or include CSS with JS codes in HTML widget.
    0
    Comment actions Permalink
  • Avatar
    Bihler IT
    I am not that great with HTML how could I do that?
    0
    Comment actions Permalink
  • Avatar
    Darius Aleksas
    I think you are trying to jump too far ahead of yourself. You should really try diving into this after you went thru these: https://www.w3schools.com/html/,  https://www.w3schools.com/css/https://www.w3schools.com/js/.

    Anyway, download that pen. Start new presentation>add placeholder>add HTML Widget to that placeholder. Now, your HTML widget is your INDEX file. Go to that folder with files you just downloaded and find index file in there>copy the content and paste it into HTML Widget. Now in the widget look for <link> at the top that points to LOCAL CSS file (the one that does NOT start with http://) and delete it. After <head> brackets start and close <style> brackets. Then, find CSS file from the downloaded content, open it, copy everything in there and paste that into HTML Widget BETWEEN <style> brackets. After that scroll to the bottom of HTML Widget and find <script>. Clean it up, so you just have <script> followed by </script> Find index.js file you downloaded>open it>copy all and paste it between <script> brackets in HTML Widget.

    What we just id is placed all the content needed to render bubbles into a single index.html file, so there is no more need for it to follow the links. I believe this is where you messed up. I believe you did not upload any of those necessary files and did not link them properly in the index file.

    Now, if you did OK, you should see blue placeholder and bubbles. If so, open the widget again, scroll down to <script> and find the line #23... only it is no more line #23, but you gonna need to compare the code in pen and you widget code and find that line: this.canvas.style.background = 'rgb(56, 115, 152)'; it is at the beginning. make it look like that: this.canvas.style.background = 'rgb(56, 115, 152, 0)'; This will remove the blue background and you will be able to see that pretty underlying image.
    0
    Comment actions Permalink
  • Avatar
    Bihler IT
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    </head>

    <body style="width:1920px;height:1080px; margin: 0; overflow: hidden;" >
    <div  id="ph0" placeholder="true" style="width:1933px;height:1094px;left:-4px;top:-3px;z-index:0;position:absolute;"></div>
    </body>

    <!-- Warning - Editing the Presentation Data Object incorrectly may result in the Presentation not functioning correctly -->
    <script language="javascript">
    <!--
    var presentationData = {
    "presentationData": {
    "id": "",
    "hidePointer": true,
    "donePlaceholder": "",
    "placeholders": [
    {
    "id": "ph0",
    "type": "playlist",
    "timeDefined": false,
    "visibility": true,
    "transition": "none",
    "items": [
    {
    "name": "HTML Widget",
    "duration": 10,
    "type": "widget",
    "objectReference": "c187c76a-c85b-4bd9-91fa-6f2748c8189c",
    "objectData": "http://s3.amazonaws.com/widget-html/0.1.0/dist/widget.html";,
    "additionalParams": "{\"html\":\"<!DOCTYPE html>\\r\\n<html>\\r\\n<head>\\r\\n<style>\\r\\nbody {\\r\\n  margin: 0;\\r\\n  overflow: hidden;\\r\\n}\\r\\n</style>\\r\\n<meta charset=\\\"UTF-8\\\">\\r\\n<title>Bubbles</title>\\r\\n<link rel=\\\"stylesheet\\\" href=\\\"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css\\\">>\\r\\n</head... fun with particles. \\r\\nAgain everything made in TypeScript (and translated to pure JavaScript). \\r\\nCodePen - we need TypeScript support!\\r\\n\\r\\n@Amay 2015\\r\\n*/\\r\\nvar Bubbles = (function () {\\r\\n    function Bubbles() {\\r\\n        this.canvas = document.createElement('canvas');\\r\\n        this.ctx = this.canvas.getContext('2d');\\r\\n        this.particles = [];\\r\\n      \\tthis.counter = 0;\\r\\n    } \\r\\n    Bubbles.prototype.init = function () {\\r\\n        this.createElement();\\r\\n        this.loop();\\r\\n    };\\r\\n    Bubbles.prototype.createElement = function () {\\r\\n        var scale = 1;\\r\\n        this.canvas.width = window.innerWidth;\\r\\n        this.canvas.height = window.innerHeight;\\r\\n        this.canvas.style.background = 'rgb(56, 115, 152)';\\r\\n        this.canvas.style.width = '100%';\\r\\n        this.ctx.transform(scale, 0, 0, -scale, this.canvas.width / 2, this.canvas.height / 2);\\r\\n        document.body.appendChild(this.canvas);\\r\\n      \\tfor(var i = 0; i < 400; i++) {\\r\\n          \\tthis.createParticle();\\r\\n        }\\r\\n    };\\r\\n    Bubbles.prototype.createParticle = function () {\\r\\n        this.particles.push({\\r\\n            color: Math.random() > 0.5 ? \\\"rgba(255, 255, 255, 0.9)\\\" : \\\"rgba(255, 255, 255, 0.4)\\\",\\r\\n            radius: Math.random() * 16,\\r\\n            x: (Math.random() - 0.5) * 25,\\r\\n            y: - this.canvas.height / 2,\\r\\n            xVel: (Math.random() - 0.5) * 2,\\r\\n            yVel: (Math.random() + 0.5)\\r\\n        });\\r\\n    };\\r\\n    Bubbles.prototype.disappearParticle = function (p) {\\r\\n        if (p.radius < 0.5) {\\r\\n            this.resetParticle(p);\\r\\n        }\\r\\n        p.radius *= 0.994;\\r\\n    };\\r\\n    Bubbles.prototype.resetParticle = function (p) {\\r\\n        p.radius = Math.random() * 16;\\r\\n        p.x = (Math.random() - 0.5) * 25;\\r\\n        p.y = - this.canvas.height / 2;\\r\\n    };\\r\\n    Bubbles.prototype.moveParticle = function (p) {\\r\\n        p.x += p.xVel;\\r\\n        p.y += p.yVel;\\r\\n    };\\r\\n    Bubbles.prototype.draw = function (p) {\\r\\n        this.ctx.beginPath();\\r\\n        this.ctx.fillStyle = p.color;\\r\\n        this.ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\\r\\n      \\tthis.ctx.fill();\\r\\n    };\\r\\n    Bubbles.prototype.loop = function () {\\r\\n        var _this = this;\\r\\n      \\tif (this.counter < this.particles.length) {\\r\\n      \\t\\t\\tthis.counter ++;\\r\\n        }\\r\\n        this.ctx.clearRect(-this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height);\\r\\n        for (var i = 0; i < this.counter; i++) {\\r\\n            this.moveParticle(this.particles[i]);\\r\\n            this.disappearParticle(this.particles[i]);\\r\\n            this.draw(this.particles[i]);\\r\\n        }\\r\\n        requestAnimationFrame(function () { return _this.loop(); });\\r\\n    };\\r\\n    return Bubbles;\\r\\n})();\\r\\nwindow.onload = function () {\\r\\n\\t\\tvar particles = new Bubbles();\\r\\n\\t\\tparticles.init();\\r\\n};</script>\\r\\n<canvas width=\\\"1600\\\" height=\\\"1067\\\" style=\\\"background: rgb(56, 115, 152) none repeat scroll 0% 0%; width: 100%;\\\"></canvas></body></html>\\r\\n\"}",
    "timeDefined": false
    }
    ],
    "distributeToAll": true
    }
    ]
    }
    };
    //-->
    </script>
    <!-- No scripts after this point -->
    </html>
    0
    Comment actions Permalink
  • Avatar
    Bihler IT
    that is what I just did but all i have is a blue background and i tried your instructions twice any idea on what i messed up on?
    0
    Comment actions Permalink
  • Avatar
    Bihler IT
    If you enter that into your html for the whole presentation you should be able to view it
    0
    Comment actions Permalink
  • Avatar
    Darius Aleksas
    What's your email Robert?
    0
    Comment actions Permalink
  • Avatar
    Bihler IT
    BBauman@bihler.com
    0
    Comment actions Permalink

Please sign in to leave a comment.