Canvas Background - Is it Possible?

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Canvas Background - Is it Possible?

Post by MorningLight »

Hi All,

I would like to add that background canvas in my project:
http://joanclaret.github.io/html5-canvas-animation/

If possible, in a GLOBAL mode (I mean, one set to entire website pages), but if doesn't, no problem at all.

I tried to put this within HTML tool and within PAGE HTML property - but I got no success at all.

Can anyone help me?

Thanks in advance.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Canvas Background - Is it Possible?

Post by Pablo »

If the code works in another page then it will also work in a WWB page.
If the code foes not work then either there is an error in the code or a conflict with other code on the page.

Related tutorial:
http://wysiwygwebbuilder.com/add_html.html
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Thanks Pablo, I will try your recommended solution.
I'll be back soon with some report.
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Pablo, I sent to your mailbox the link of a ZIP with the code I want to add in my pages.

I guess the problem can be related to the lack of a position set to "Before </HTML>".

I tried all positions within the PAGE HTML settings and I had no result...
I tried also put it into a <DIV> using the <HTML> control.

Basically I want to set this as my default background in all pages and even if I have to replicate it on all pages, no problems.

If you could help me to get a solution, I will appreciate a lot.

Thank you!
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Canvas Background - Is it Possible?

Post by Pablo »

I'm sorry but I cannot help you with third party code. For me it may also take several hours to figure out how this works.
However the problem is not related to WWB.

Tips:
Script links and definitions should go between the head tags.
Visible code should either be in an HTML object or between the body tags.
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

I understand Pablo.

I had done exactly what you recommend... but no success at all.
Anyway, thank you again to try a help.

Kindest regards,
David
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Canvas Background - Is it Possible?

Post by Pablo »

What did you exactly?
What is the error?
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Pablo,

I put the <STYLE> and <SCRIPT> tags into <HEAD> section.

Code: Select all

      
        <style>
        #canvas{
            width: 100vw;
			height: 100vh;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
			z-index: -1;
        }
        .canvas-wrapBG{
            position:relative;
			width: 100vw;
            height: 100vh;
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            z-index: -9999;
        }
       </style>
      
      
        <script src="three.min.js"></script>
        <script src="projector.min.js"></script>
        <script src="canvas-renderer.min.js"></script>
        <script src="3d-lines-animation.js"></script>
	<script src="jquery-3.2.1.slim.min.js"></script>
        <script src="color.js"></script>
I put the following in the <BODY> section:

Code: Select all

   
    <section class="canvas-wrapBG">
        <div id="canvas" class="gradient">
		</div>
    </section>
I set the PAGE PROPERTIES to BACKGROUND = Transparent.

When I make a PREVIEW, simply the page functions as a charm but without any color, effect and background.
Since all other codes run 100% (CSS3 and EVENTS) I can see that I'm not facing any "code error" or duplicate script.

I tried also to take off the call of JQUERY (since project has its own call) and the effect is the same...

And if I put the CANVAS code within a <HTML> control, I had no effect at all - same behaviour.

Thank you for asking.
User avatar
BaconFries
 
 
Posts: 5316
Joined: Thu Aug 16, 2007 7:32 pm

Re: Canvas Background - Is it Possible?

Post by BaconFries »

Just as Pablo I am not really offering any help but more of a question to you. What is the following jQuery?
<script src="jquery-3.2.1.slim.min.js"></script> this is not part of the original scripts in the download so why are you using? You should only use the scripts that you downloaded as adding others can break it as it may not be compatible with the other files. Remove this and only use the scripts/ files that came in the download.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Canvas Background - Is it Possible?

Post by Pablo »

Did you also publish the script files to the same folder as the page?

Note that you can view script errors in the debugger of your browser (F12)
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Hi Baconfries, thank you for help too.

The page does not execute the function as expected EVEN if I take off the JQuery.
I utilize here as default the "JQuery-3.2.1.min" and this one (Slim) was downloaded from the JQuery official page.

Anyway, even completely erasing this line of call, the behaviour is the same - no error in any other script/effect, but this specific one does not run.

Pablo, I did the test you recommend also. I loaded the scripts from basefolder (and they are there) and from the Threejs folder. I had put them also in the SCRIPTS folder I have here and changed the load instruction to reflect that new folder.

In time: I have CHARTJS scripts also loading 100%. The page plots these charts without any problem. Only the background is not functioning.

Pablo, I will test F12 and return in minutes...
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Ops!

Yes Pablo, you are right. I have here ERR_FILE_NOT_FOUND.

My steps here:

1- In SITE MANAGER I pressed right-button and create a FOLDER (threejs)
2- In this folder I had IMPORTED EXTERNAL FILES (the scripts)
3- I see here IN SITE MANAGER the folder and below it (within it), all scripts.
4- But, when I open the location of my project, I don't see that folder.

Anyway, I see all scripts in the "base-folder" of the project (the main foder).
Even changing the load instruction like these:

Code: Select all

        
        
        <script src="three.min.js"></script>
        <script src="projector.min.js"></script>
        <script src="canvas-renderer.min.js"></script>
        <script src="3d-lines-animation.js"></script>
        <script src="color.js"></script>

I continue to get "ERR_FILE_NOT_FOUND in F12 of Chrome...

NOTE: other scripts like CHARTJS are being loaded from its own folder and I see the same in SITE MANAGER ("scripts" folder).

Thank you BOTH to try help me!!
User avatar
BaconFries
 
 
Posts: 5316
Joined: Thu Aug 16, 2007 7:32 pm

Re: Canvas Background - Is it Possible?

Post by BaconFries »

Note then your issue may or will be jQuery conflicts. You mention that you are using Charts.js using jQuery I take it? if so then there will be conflicts as you can only have one version on the page at one time and both scripts will need the same version. This means is charts using for talking sake v2.2.0 then then the script you are using using needs the same.
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Hi Bacon,

CHARTJS is not using JQuery ...

I notice a curious thinkg here:

- I load the CHARTJS in this page normally in <HEAD> section. But Chrome reports FILE_NOT_FOUND.
- But ALL charts here are functioning normally and the load of this script is just performed once.

Anyway, the other scripts to background are not functioning as should and Chrome reports also FILE_NOT_FOUND, even I seeing them in the base-folder and adapting the LOAD of them to this.

Baconfries, would like to view the scripts I'm trying to add here?
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Hmmm.....

Now I'm seeing that the page is NOT LOADING really ANY script I had set in <HEAD>.

I found in some point there the following instrunction:

Code: Select all

/*
* <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
*/

So, due to MY FAULT the "Chart.min" was STILL BEING LOADED from Cloudflare - and I really do not want this.
I remarked this line (using <!-- -->) and all charts stopped functioning.

So, even I using:

Code: Select all

<script src="scripts/Chart.min.js"></script>
this script is not being loaded. Notice:

1- The folder exists in SITE MANAGER and I see the JS script within it.
2- The folder ALSO exists in my disk, below the base-folder of the project.

And I'm running the PAGE PREVIEW (Shift Preview), not entire "site preview".

So, why the script is not being loaded?

In time: I changed this line to only "src=Chart.min.js" (and the file also exists within the base-folder) and I had the same result: script was not loaded. But if I return the "Cloudflare" instrunction, the script loads normally....

Am I doing something wrong here?
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Guys,

I see now into AppData/Local/Temp/Preview that folder SCRIPTS is not being copied there in Preview mode - and because of this I cannot really see any Javascript defined by them.

Since this folder is NOT checked to "Don't Publish", shouldn't it being copied?

Now I understand why Chrome is pointing "ERR_FILE_NOT_FOUND" - they are really absent - but functions when the script is being pointed in Cloudflare,

Is this a bug??
User avatar
BaconFries
 
 
Posts: 5316
Joined: Thu Aug 16, 2007 7:32 pm

Re: Canvas Background - Is it Possible?

Post by BaconFries »

You have misunderstood me... It was not the main chart.js I was meaning but the jQuery file associated with it. As you can see it requires a understanding of scripts to able to use. Now I will try to help even though it outwith help offered.

Please make a 'New' blank page with only all the Chart files nothing else to start with test and see it it works. If it works then upload that page only for me to see this is so I can check all files used and try it with the script you wish to use and hopefully let you know.
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Thank you very much Bacon Fries.

My problem is not related to the script usage and conflicts at all.
The problem is really how to implement a special background I have here in a WB.

Anyway, I will send to you a page with:

- Several CHARTS functioning perfectly.
- Background functioning partially (only color, not the effects)

Could you please send me a valid e-mail to I provide a Google Drive link directly to you?
Or, if preferable, write to and I will return the Google Drive link.

Thanks again!
User avatar
BaconFries
 
 
Posts: 5316
Joined: Thu Aug 16, 2007 7:32 pm

Re: Canvas Background - Is it Possible?

Post by BaconFries »

I will contact you with my address but for now I will remove your so not to get spammed
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Great!
Thank you.
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Bacon,

I don't want to disturb you but your message didn't come in my email....
:roll:
User avatar
MorningLight
 
 
Posts: 132
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight »

Hi Guys, I had solved the problem!

The problem was related to DOM.
When I called DOM.GetElementByID() I got errors because the page was NOT entirely loaded in fact.
So, thinking about this I performed these steps:

1- I put the <STYLE> part of code into <PAGE HTML>, within <HEAD> section.

2- I created two different <HTML> controls on page.

3- In the first I put all scripts loading (except CHART, which continues in <PAGE HTML> section), setting it as "BEFORE </BODY>".

4- In the seconds <HTML> control, I put the <Section> and <Div> codes to draw the background and effect, setting it as "DO NOT USE <DIV>".

And voila!

Thank you for the efforts in help me.
Post Reply