I create time counter using Knob:
$(function($) {
$(".knob").knob({
'fgColor': '#b9e672',
'thickness': 0.3,
'width':150,
'data-min': 0,
'data-max': 30,
'readOnly': true
});
var initval = 30;
$({value: 0}).animate({value: initval},{
duration: 10000,
easing:'swing',
step: function()
{
$('.knob').val(this.value).trigger('change');
}
});
});
I want to display counter in milliseconds, like picture:
how to do this?
thanks,
You can use the step option to chose the step that you would update in your knob value.
There is also another useful thing you can do, that is set the draw function. The draw function determines what gets drawn in the label. By default, it matches the value, but you don't have to.
For instance, if you want to update the knob in milliseconds, but want to round the value to display only the full seconds in the label, you could do something like:
draw: function () { $(this.i).val(Math.round(this.cv)); }
where, accordingly to the comments on the jQuery-knob source, this.cv is the "change value ; not commited value", and this.i the "mixed HTMLInputElement or array of HTMLInputElement"
Related
I call my animated element as follows:
emdrSpawnElement = anime({
targets: '#alternate-main .el',
translateX: destination,
direction: 'alternate',
loop: true,
easing: selectedEasing,
duration: emdrSpawnElementSpeed,
autoPlay:false,
loopBegin: function (anim) { },
loopComplete: function (anim) {
if(trackingPassesActive == true)
{
totalPasses++;
if((totalPasses % 2) == 0)
{
passesDisplayed++;
document.getElementById("passes-count-2").innerText = passesDisplayed.toString();
console.log(passesDisplayed);
}
}
clearInterval(switchDirectionSoundPlayer);
switchDirectionSoundPlay();
}
});
My interface contains a slider to change the speed of the element. Every time the slider is moved, the code listed above calls again.
My problem: the loopComplete function is running as if every time I change the slider, a new anime element is created without deleting the old one. The result is the loopComplete function being called many times, increasing every time I change the slider.
My goal is to stop repeat calls to the loopComplete function. How can I remove the anime element every time I want to change its speed? I only want the loopComplete function to be calling for one anime element at a time. Much love to anyone who can share some wisdom on this subject.
I'm trying to use Ion.RangeSlider to make a slider where the color starts from the center and goes in the direction of the slider control until it hits the slider control. Right now, this is what I have:
Instead, I would like the color to go from the center of the slider to the slider control.
How can I make the RangeSlider work like that so that the color starts from the middle (as shown above)?
EDIT:
I looked at this question, but it deals with sliders with two controls instead one.
EDIT 1:
setup.js:
jQuery(document).ready(function($){
$(".slider").each(function() {
console.log($(this).attr("id"));
$(this).ionRangeSlider({
type: $(this).attr("data-slider_type"),
grid: $(this).attr("data-slider_grid"),
min: $(this).attr("data-slider_min"),
max: $(this).attr("data-slider_max"),
prefix: $(this).attr("data-slider_prefix")+" ",
postfix: " " + $(this).attr("data-slider_suffix"),
step: $(this).attr("data-slider_stepper"),
from: $(this).attr("data-slider_from")
});
$(this).on("change", function () {
var $this = $(this),
value = $this.prop("value").split(";");
});
});
});
Use: https://github.com/jordansoltman/ion.rangeSlider with has the additional boolean option: fixMiddle. For example:
$(".slider").ionRangeSlider({
fixMiddle: true,
...
});
Note: use ion.rangeSlider.js as ion.rangeSlider.min.js has not been updated.
I am using EaselJS and want to create a flashing color rectangle that will flash a certain number of times when a button is pressed, displaying random colors from an array. It should stop after 10 color flashes and then I want to extract the final color.
So far the relevant code I have is:
var colorArray = ["#FE7B62","#CB2DD3","#F1FD66","#004CE8","#FFD068", "#02A97E"];
square = new createjs.Shape();
square.graphics.beginFill("#000").drawRoundRect(850, 50, 100, 100, 20);
function pushButton(event) {
square.graphics.inject(animateColor);
}
function animateColor(event) {
this.fillStyle = colorArray[parseInt(Math.random()*6)];
}
This code successfully triggers the flashing of colors from my color array, but I am not sure what the best method of running the animation for a limited number of frames is. I tried pausing the ticker and restarting it on the onclick of the button but that failed. I also tried using a for loop in the pushButton function but that caused a "too much recursion error" in the browser. Here is my full file link https://github.com/RMehta95/sherman-land/blob/master/main.js.
I would suggest creating an event to trigger your action (xamountOfFrames). Here is a link to some information that might help
http://www.w3schools.com/tags/ref_eventattributes.asp
I ended up not using the inject function and instead redrawing the shape each time, creating a couple counter and timer variables to ensure that it looped through the proper amount of times.
function pushButton() {
if (timer === false) {
animate = setInterval(animateColor, 200);
timer = true;
}
}
function animateColor() {
square.graphics.clear();
displayColor = colorArray[Math.floor(Math.random()*colorArray.length)];
square.graphics.beginFill(displayColor).drawRoundRect(850, 50, 100, 100, 20);
counter++;
if (counter===15) {
clearInterval(animate);
counter=0;
movePlayer(displayColor);
timer = false;
return;
}
}
I am trying to build a ui slider similar to the one on this site: http://www.solarcity.com/
I want to be able to show the monthly value and then a yearly value next to it. ( I would assume multiplying the value of the monthly by 12 of course)
Once upon a time I had my slider working properly until I tried to multiply the monthly value by 12.
What did I do wrong?
(Sorry I am totally new to JavaScript)
Here is my Jsfiddle: http://jsfiddle.net/7qDyq/1/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<span class="slider-output" id="monthly_bill">0</span>/month or <span class="slider-output" id="yearly_bill">0</span>/year
<div id="bill_slider">
</div>
$(document).ready(function(){
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (monthly_bill * 12 )
$("#monthly_bill").text(tasks_time);
$("#monthly_bill").text(tasks_done);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function() {
update();
}
});
});
Eventually after I figure this out I am also wondering how to change the color of the slider and words after the slider hits a certain point. (If then statement?) Not sure how to implement...
Any help on this is greatly appreciated. Thanks!
Most of the issues in your original jsFiddle traced back to bad JS var names; here is how you would achieve the desired effect:
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (bill_slider * 12)
$("#monthly_bill").text(bill_slider);
$("#yearly_bill").text(yearly_bill);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function () {
update();
}
});
Working jsFiddle, forked from yours: http://jsfiddle.net/6Bprf/5/
If you update your question with a description & example of the color-coding you want to do, we can include that in our answers.
My problem is that when I am clicking on button, callfunction() method called and counter is incremented by 5, when I am again click counter incremented by 5 and displayed 10 on given location my problem is that when counter is incremented previous number is not erased and displayed incremented number on previous number. I want to remove previous number and display next incremented number. I have following code:
var count=0;
function callfunction()
{
context.fillText(count,200,200);
count = count+5;
//context.fillText("",200,200);
}
fillText with background colour, if it's monochromatic. Or preserve what was there before as image data, then paste it over later when you want to erase the text.
The only way i know is to clear the full canvas element using canvas.fillRect.
Please see this jsFiddle for an example.
count = 0;
function update(){
canvas.clearRect(0,0,canvas.width,canvas.height);
canvas.fillText(count,200,200);
//Draw anything else...
}
setInterval("update()",1000/60); //60 Frames per second
button.onclick = function(){ //Change button to your button element
count += 5;
}
This should work!
You can use clearRect() to just clear a portion of the canvas...
If you know the size of your text field, set clearRect() to a rectangle large enough to clear that text field:
var count=0;
function callfunction()
{
context.clearRect(200, 190, 50, 10); // clears a text field 50 x 10, above baseline
context.fillText(count,200,200);
count = count+5;
}
Try clearing the canvas first:
var count=0;
function callfunction()
{
context.clearRect ( 0 , 0 ,canvas.height , canvas.width );
context.fillText(count,200,200);
count = count+5;
//context.fillText("",200,200);
}