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.
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:
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.
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.