Updating the value of variable in a java script to html - javascript

I am using canvas 3d to draw a 3d graph.So i am using java script for rotation and keypress event and so on. It works fine also.But i want to print the angle by which i have rotated the surface. I do have variable in java script which stores this value.
Now my question is how can i print the value of variable in a html body so that when i rotate the surface of canvas the value keeps on updating? If i can't do that atleast tell me the method by which i can display the value on some button click or any event.
Thank you

Write a update function like this:
function update(){
document.querySelector("#log").innerHTML = angle;
}
and call that function every time you modify your value (the click event of course is only for demonstration purposes):
document.querySelector("#square").addEventListener("click",function(){
this.style["-webkit-transform"] = "rotate("+(angle+=10)+"deg)";
update();
});
see the Demo.

You can use the function setInterval(function, time), it call a function repeated times, with time milliseconds between the execution.
setInterval(function() {
[Code That Update Your Value]
}, 100);

Or perhaps, you could install Firebug and use console.log(), console.debug() without adding new elements. I think that would be useful for other projects as well. Documentation link

Related

Why DOM didn't update by setAttribute when using Aframe v0.5.0?

I'm going to set the aframe-v0.5.0 <a-box> position and color, and it renders correct in the browser, but when I use box.getAtrribute("position"), it returns "undefined", then I found <a-box> positon attribute is empty string showing in the DOM(same situation for scale/rotation):
<a-box width="1" geometry="" height="1" depth="1" color="#0cf" material="" position="" rotation="" scale="" visible=""></a-box>
So I switch back to aframe-v0.2.0, and everything works fine!
Can't get any answer from google, is it something changed in aframe-v0.5.0?
Here's my code below, and aframe.js is put in the <head>, my script is put in the <body>.
var body = document.body;
var scene = document.createElement("a-scene");
var camera = document.createElement("a-entity");
camera.setAttribute("camera", "userHeight: 1.6");
camera.setAttribute("look-controls", "");
camera.setAttribute("wasd-controls", "");
var box = document.createElement("a-box");
box.setAttribute("width", 1);
box.setAttribute("height", 1);
box.setAttribute("depth", 1);
box.setAttribute("color", "#0cf");
box.setAttribute("position", "0 0 -5");
scene.appendChild(camera);
scene.appendChild(box);
body.appendChild(scene);
console.log( box.getAttribute("position") ) //"undefined"
example here:
http://minicg.com/demo/aframe050_test/
https://aframe.io/docs/0.5.0/introduction/faq.html#why-is-the-html-not-updating-when-i-check-the-browser-inspector
If you open up your browser’s developer tools, you’ll see that the HTML attribute values are empty.
To improve performance, A-Frame does not update the HTML to save on stringification operations. Use the debug component or .flushToDOM methods if you need to sync to the DOM.
im not sure if I'm correct, but in my opinion You try to read the attribute before it's properly placed on the scene. When i added a 2s setTimeout() before the getAttribute() call, it works fine:
https://codepen.io/gftruj/pen/JJoENb
But waiting 2 seconds before reading attributes is outrageous !!!
Yep, that's why i'd recommend putting your code inside a registered component. You can add any js code in the init() function, and You should be sure everything is properly loaded. For example create manually a <a-scene myCode> element, and put your code in
AFRAME.registerComponent('myCode', {
init: function () {
//whatever you want, remember that the scope here is not the window,
//but the element using this component ( now it'd be the a-scene)
}
});

How to clear these intervals?

I'm creating my own JSFiddle-like webapp and I want to implement elements resizing, but keep document height unchanged, so I have to recalculate elements dimensions on each resize.
I have this script:
var a = setInterval(setHeight, 1);
var b = setInterval(formsWidth, 1);
iframe.onResizeStart = a;
html.onResizeStart = b;
iframe.onResizeStop = clearInterval(a);
html.onResizeStop = clearInterval(b);
Iframe is an element where user codes are rendered and HTML is one of my three textareas. I want this script to recalculate textareas heights on iframe resize and recalculate their widths on changing width of one of them.
I managed to make this work, but I couldn't stop intervals and I need help with it.
The above code doesn't work now at all, probably because of calling a variable onResizeStart.
I'd be grateful if someone could help me.
I prefer not to use jQuery.
It doesn't work because you're calling clearInterval() almost immediately after calling setInterval(), so the intervals are never getting a chance to execute. You'll need to store away a and b and then call clearInterval() on them at a later time, after the resizing is all done.
EDIT: Looking at this more closely, just wrap each call to clearInterval() in a function. That way clearInterval won't get executed immediately, but rather when the onResizeStop event is fired.
iframe.onResizeStop = function() { clearInterval(a); };

Javascript: Changing "document.body.onresize" does not take hold without "console.log"

I'm writing a website with a canvas in it. The website has a script that runs successfully on every refresh except for a line at the end. When the script ends with:
document.body.onresize = function() {viewport.resizeCanvas()}
"document.body.onresize" is unchanged. (I double-checked in Chrome's javascript console: Entering "document.body.onresize" returns "undefined".)
However, when the script ends with:
document.body.onresize = function() {viewport.resizeCanvas()}
console.log(document.body.onresize)
"document.body.onresize" does change. The function works exactly as it should.
I can't explain why these two functionally identical pieces of code have different results. Can anyone help?
Edit: As far as I can tell, "document.body" is referring to the correct "document.body". When I call console.log(document.body) just before I assign document.body.onresize, the correct HTML is printed.
Edit 2: A solution (sort of)
When I substituted "window" for "document" the viewport's "resizeCanvas" function was called without fail every time I resized the window.
Why does "window" work while "document" only works if you call "console.log" first? Not a clue.
Resize events: no go
Most browsers don't support resize events on anything other than the window object. According to this page, only Opera supported detecting resizing documents. You can use the test page to quickly test it in multiple browsers. Another source that mentions a resize event on the body element specifically also notes that it doesn't work. If we look at these bug reports for Internet Explorer, we find out that having a resize event fire on arbitrary elements was an Internet Explorer-only feature, since removed.
Object.observe: maybe in the future
A more general method of figuring out changes to properties has been proposed and will most likely be implemented cross-browser: Object.observe(). You can observe any property for changes and run a function when that happens. This way, you can observe the element and when any property changes, such as clientWidth or clientHeight, you will get notified. It currently works only in Chrome with the experimental Javascript flag turned on. Plus, it is buggy. I could only get Chrome to notify me about properties that were changed inside Javascript, not properties that were changed by the browser. Experimental stuff; may or may not work in the future.
Current solution
Currently, you will have to do dirty checking: assign the value of the property that you want to watch to a variable and then check whether it has changed every 100 ms. For example, if you have the following HTML on a page:
<span id="editableSpan" contentEditable>Change me!</span>
And this script:
window.onload = function() {
function watch(obj, prop, func) {
var oldVal = null;
setInterval(function() {
var newVal = obj[prop];
if(oldVal != newVal) {
var oldValArg = oldVal;
oldVal = newVal;
func(newVal, oldValArg);
}
}, 100);
}
var span = document.querySelector('#editableSpan');
// add a watch on the offsetWidth property of the span element
watch(span, "offsetWidth", function(newVal, oldVal) {
console.log("width changed", oldVal, newVal);
});
}
This works similarly to Object.observe and for example the watch function in the AngularJS framework. It's not perfect, because with many such checks you will have a lot of code running every 100 ms. Additionally any action will be delayed 100 ms. You could possibly improve on this by using requestAnimationFrame instead of setInterval. That way, an update will be noticed whenever the browser redraws your webpage.
What you can do is that if you know for certain what particular action triggers a resize on your element that doesn't resize the full window you can trigger a resize event so your browser recalculate all of the divs (if by the case the browser is not triggering the event correctly).
With Jquery:
$(window).trigger('resize');
In the other hand, if you have an action that resizes an element you can always hold from that action to handle other following logic.
<script>
function body_OnResize() {
alert('resize');
}
</script>
<body onresize="body_OnResize()"></body>

Flash CC Canvas HTML5 Element adding interactivity in Timeline

I've been trying to solve this for several time, but I'm now pointless with this situation. I'm creating a HTML5 canvas project in Flash CC, I'm kinda new in JS (not difficult BTW), the point is, I have around 10 keyframes inside my main timeline, and some classic buttons, all I need to do is to navigate inside every frame when a button is pressed (pretty easy uh!) the trouble is, the first frame works perfectly, but from 2 to the others, I can't be able to use buttons, interactivity is being programmed as follows:
var self = this;
this.stop();
this.btn4.addEventListener("click", clickUno);
function clickUno() {
self.gotoAndPlay(1);
}
Any help will be really appreciated, I just don't know why 1st frame works great, but others doesn't!
I had similar issues with canvas with flash.
I needed to created completed new buttons on every instance you need a button to get code to work. (ODD I know.)
Button code.
this.getinsideIt.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_9.bind(this));
function fl_ClickToGoToAndPlayFromFrame_9()
{
this.Mygreatmovie.gotoAndPlay(350);
}
As I understand, you need a button, clicking on which proceeds your animation 1 frame at a time. Correct?
You should make use of the currentFrame and totalFrames properties of the main stage for this. Query the current frame and move on to next!
var self = this;
this.stop();
if(!this.btn4.hasEventListener("click", clickUno))
this.btn4.addEventListener("click", clickUno);
function clickUno(e) {
var curr = self.currentFrame;
var total = self.totalFrames;
self.gotoAndStop((curr + 1)%total);
}

Setting GIF loop count and publishing stop event using JavaScript

Is it possible to set the loop count of a GIF image using JavaScript and then publish an event when it stops playing?
For example something like:
//html code
<img src="myImage.gif" id="img1"/>
//Javascript code
var image = document.getElementById('img1');
//Image must stop playing after 3 loops
image.setLoopCount = 3;
here is how i would suggest doing it:
extract frames form gif file (you can do it online using for instace -> http://imgops.com/)
use javascript to change pictures, simulating animation (that way you can keep track of how many loops you have done)
Here is a jsFiddle link http://jsfiddle.net/qustosh/n5zWH/9/
I used jQuery. I did three loops and i threw a callback function at the end.
For a design side solution, you can set the GIF image to only loop a certain number of times with Photoshop. Then just use window.setTimeout(callback, milliseconds) to trigger your custom event.
You can calculate the time out from the interval used to display each frame of the animation.

Categories

Resources