Forum

Anchor help.

25 January 2017 23:23
Hey guys,

First off, I love Blend4web. Easily my new favorite web dev platform. Its what I've always wanted.

That being said, I have an anchor question. I'm not seeing any info on the html element id aspect of the custom option. Am I to simply style and ID a div and it will be pulled into the anchor or is it something more than that, I need to do?

Also have I glossed over the means to mark the anchor as open initially or is that not possible? Java isn't something I'm extremely skilled at but I'm learning.
26 January 2017 15:08
Hi,
Ianscott888 has a good tutorial on Youtube which I followed for my custom anchors. I can't access Youtube at work, but if you search for Anchor Blend4Web it will the second results.

Also, look how this is constructed: https://www.blend4web.com/apps/code_snippets/code_snippets.html?scene=custom_anchors

Here is workflow.
First part:
I add an Empty object to my scene. In the Object panel, make sure you check Enable Anchor and choose Custom Element and in the HTML section give it a name. (See attached)

The second part:
Copy custom_anchors.js from blend4web_ce\apps_dev\code_snippets\scripts to your project folder.
You'll need these JS files as well:
b4w.min.js
anchors.js
uranium.js

And if you are using the webplayer:
webplayer.js
webplayer.css
uranium.js.mem

Third part:
Export your Blender to JSON.
Create a HTML fil, loading all the JS files:

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
#canvas_cont {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>
<meta property="og:image" content="images/icon.png">
<link href="webplayer.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/icon2.png" />
<link href="webplayer.css" rel="stylesheet" type="text/css" />
<link rel="image_src" href="images/icon.png">
<script src="b4w.min.js"></script>
<script src="custom_anchors.js"></script>

</head>

<body>
<div id="canvas_cont">
</div>


</body>
</html>


Back in custom.anchors.js modify the Anchor names to whatever you called the Empty object in the step one (my case I called it annotations1)

And that should cover everything.

But the video is very well done, so I suggest watch that as well.

Hope this helps.
29 January 2017 01:08
Thank you, I sure will. I've been cramming Java basics for the past 3 days to get better at this. I'll look for the vid before the end of the weekend. You quick tut seems pretty detailed though. Thanx again.
19 March 2018 20:54
Hey Anyone,

I can't seem to get the custom anchors to work. I've watched ianscott888 video many times over. Just can't figure out what's wrong. I've attached a pic of what's inside myAnchors folder (which is just inside my b4w_ce folder) to verify that I'm at least on the correct path.

I'm on a Mac and have latest software.

Thanks in advance.
24 March 2018 17:59
I can't seem to get the custom anchors to work.
What have you tried? Just try to define what steps you've passed. The attached picture says nothing because we don't know what content each file has.
If you will describe what doesn't work and attach your project sources I would correct it and list your errors with description.
Alexander (Blend4Web Team)
twitter
28 March 2018 05:11
Reply to post of user Alexander Romanov
What have you tried? Just try to define what steps you've passed. The attached picture says nothing because we don't know what content each file has.
If you will describe what doesn't work and attach your project sources I would correct it and list your errors with description.

Alexander, thanks for the response.

1) create a new folder named, any_anchor, and put on same level as the blend4web_ce folder.
2) open Blender, engage the SDK Index, engage code snippets, engage Custom Anchors, engage View Code.
3) copy and paste, the html code into BBedit code editor, from the custom_anchors snippets, and save as custom_anchors.html to the any_anchor folder.
4) copy and paste the adjoining javascript code, from the same custom_anchors snippets, and save as custom_anchors.js to the any_anchor folder.
5) get the blender scene through the following sequence of folders, blend4web_ce, blender, code_snippets, custom_anchors and double click custom_anchors.blend (anchor scene appears)
6) in blender, export anchor scene with blend4web json to the any_anchor folder.
7) get the common library files through the following sequence, blend4web_ce, deploy, apps, common. Copy the files b4w.min.js, uranium.js and uranium.js.mem
8) go back to the any_anchor folder, and paste the three files from the common folder
9) double click the file, custom_anchors.html and a black screen with digits in the upper corner should appear. (For me it does not)
I get a blank white screen with no digits in the corner. I try the next step with the blend4web localhost 6687, nothing but a blank white screen. I tried the same with my local host, same result.

I did make the following adjustments:
• changed my text editor to BBedit (much easier to use than TextEdit)
• installed XAMPP which gives the ability to local host (only their test page worked, nothing else)
• tried using different browsers (Firefox and Safari)
• looked at community board's but can't find the same problem.

Joshea
29 March 2018 00:03
And could you attach sources with your attempts?
Alexander (Blend4Web Team)
twitter
31 March 2018 04:00
Reply to post of user Alexander Romanov
And could you attach sources with your attempts?


Reply to post of user Alexander Romanov
And could you attach sources with your attempts?

Attached are the source files.

And I went back and did an older domino tutorial, using the project manager, the localhost:6687 still worked. So that's not the problem.

Joshea

I only uploaded 5 files, the other two are uranium.js and uraniun.js.mem
02 April 2018 12:13
I suppose you are using Blend4Web 17.12, but ianscott888 in his video uses older version. Since 17.12 we've updated sources of most examples to use ES-6 modules.
If you are using import/export keyword, then you should include your script in html specifying a type "module":
<script type="module" src="custom_anchors.js"></script>


Do not forget to look at the browser console (F12). The error description is the starting point for resolving of any issue.
Alexander (Blend4Web Team)
twitter
 
Please register or log in to leave a reply.