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.
 
Please register or log in to leave a reply.