I am trying to make a display that takes an input number and displays that number centered vertically on a strip along with the numbers above and below it, appropriately spaced. That much works - my problem is with getting it to bottom out at zero. I don't want to have negative numbers or even tick marks below zero.
You can see the file in question here: http://www.fastswf.com/r58wGg0
In that file, the left is what the final version will look like (masked - giving the illusion that it is moving infinitely) and the right is unmasked, showing the actual movement of the movieclip and text boxes. The input number is based on mouse position so slowly move your mouse around to see the action.
And here is my code.
var labelSpacing = 500;
var tickSpacing = 18;
function updatePosition(currentValue){
tape.y = ((currentValue/100)%5)*tickSpacing;
current.y = (((currentValue/100)%5)*tickSpacing)+170.85;
plus1.y = (((currentValue/100)%5)*tickSpacing)+82.85;
minus1.y = (((currentValue/100)%5)*tickSpacing)+259.9;
current.text = (Math.floor(currentValue/labelSpacing)*labelSpacing).toString();
plus1.text = (Math.floor(currentValue/labelSpacing)*labelSpacing+labelSpacing).toString();
minus1.text = (Math.floor(currentValue/labelSpacing)*labelSpacing-labelSpacing).toString();
}
Is there a way to modify this so that it changes its behaviour near zero so that it displays correctly?
Hmm, normally such indicators do allow displaying values below zero. But, for your purpose, you can use a limited currentValue to use in your calculations, but preserve the old value in case you need to display something else based on actual currentValue too.
function updatePosition(currentValue:Number):void {
var cappedValue:Number=currentValue;
cappedValue=Math.max(cappedValue,1.0*labelSpacing);
// experiment with this constant ^^^ to achieve desired result in production
tape.y = ((cappedValue/100)%5)*tickSpacing;
// and use cappedValue in place of currentValue in calculations
// rest of code
}
Related
This question already has answers here:
Get element with a randomized class name
(2 answers)
Closed 4 years ago.
In an attempt to make web scraping with a headless browser more resilient to site changes, I'd like to combine technical properties of the elements with their visual characteristics.
E.g. when looking for a search bar, I'd like to look for a "big (>50% width), visible (:visible) text input field (<input type="text">) in the upper half of the screen/rendered page." Then, when looking for the submit button, I'd like to find a button located near the aforementioned search bar.
Is there any way to set up this kind of search criterion?
AFAICS, CSS selectors and XPath can only search by predefined parameters (tag, id, class, attributes), not by calculated ones.
The best idea I currently have is to search by predefined parameters, then filter the result further by getting size, position and such for each result and comparing them to the desired ranges. This is rather slow oftentimes since I have to use expressions like *[text()="visible text"] to not rely on technical details that are subject to change without notice.
Here are a few examples of ways to find your wanted element. All below examples are based on the assumption that you have an element that looks a little like this (can be different type and css elsewhere, but basically that you have an element somewhere with some styling and some attribute).
<div mycustomattribute="login" style="width:calc(5cm - 3cm)"></div>
Note that the below examples aren't necessarily all I the ways I can give you, it's just the ones I could think of on the fly, if your problem isn't resolved using these I can probably think of one or two more ways to solve your problem.
Selecting using a custom attribute
You can set any attribute you want on any element you want. For example, if you want <div mycustomattribute="hello"> and then querySelect that, it's totally valid.
var test = document.querySelect("div[mycustomattribute=login]")
The above script will select only the div that has an attribute name with the value login. I think you already know of this method but figured I'd mention it because it's by far the easiest, least hacky way of finding a specific element, if you can set an attribute on your element that is.
Select using position
Lets say you want to select the nearest element that is 50 px to the right of the element you selected.
var base = document.querySelect("div[name=login]")
// Get Y coordinate of base element
var y = base.getBoundingClientRect().top;
// Get X coordinate of base element on its right side, since we're gonna look to the right of it
var x = base.getBoundingClientRect().right;
// Find the element that is 50 pixels to the right of our base element
var element = document.elementFromPoint(x + 50, y);
Select using CSS values
This is more tricky but certainly possible. You are correct in that you can't just run querySelector to find an element based on a CSS value (calculated or otherwise), but you can run the calculation yourself to get the value your desired element should have and then just loop through them to get the one you want.
So, for example:
var divs = document.querySelectorAll('div');
var element = null;
for (i = 0; i < divs.length; ++i) {
/* We assume you know the result of the calculated value, either because it's
a static result (e.g. `5cm - 3cm`), or because you rerun the calculation in
javascript to find out what its result is.
Note that you can use whatever style you want here to find the div, like
"visible" or "display" or whatever you want, just set up the proper if
statements.
*/
if(div.style.width = "2cm") {
element = div;
break;
}
}
References
This is a little side note but try to use mozilla instead of w3schools, mozilla is way better for references. I was hesitant too at first to make the jump to mozillas documentation but it really is way better once you learn how to use it.
https://developer.mozilla.org/en-US/docs/Web/API/Document
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint
https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
I am trying to create a time line using http://visjs.org/timeline_examples.html
I want the time line to have fixed height (which I can set using height attribute in options). But As I zoom in/out the timeline, It is displaying the points one below another. This feature is affecting the height of the graph.
Can anyone help me how to make the points overlap?! so that I can have the height of the groups constant?
Actual behavior
In the options for your timeline you can specify stack: false e.g.
var options = {
stack: false
};
var timeline = new vis.Timeline(container, dataset, options);
This will cause the time line items to overlap rather than stack up on top of each other. You can see this in action here:
http://visjs.org/examples/timeline/other/groupsPerformance.html
I have an annoying problem with Matlab coding: I have created a uitable which store values and I have implemented a function for highlight the number in cells in particular conditions. This has been done giving an html command, the problem is that after the setting of new colour the number from a "double" becomes a "cell" and updating the data in the table it highlights correctly the value, but aligns all the numbers to the left; instead I would like to keep them constantly on the right. I tried everything without positive results; I think is enough to add the alignment command in the html syntax, but somebody can give me some suggestion?
This is the part of the code:
tab = findobj('Tag',tab_name);
valrow = cellstr(num2str(tab.Data(index,1))); %number in the cell has to be highligthed
color = [1 1 0.4]; %yellow
clr = dec2hex(round(color*255),2)'; clr = ['#';clr(:)]';
valrow = strcat(...
['<html><body bgcolor="' clr '"text="#010101; font-weight: width=100px">'],...
valrow); %html code for highlight the number
fulltab = cellstr(num2str(tab.Data(:,1))); %transform all the data in the table from double to cell
fulltab(index,1) = valrow; % switch the old value in the tab with the same value highligthed
set(tab,'Data',[fulltab]);
As I said previously, this code works but put all the data in the table from right usual alignment to the left.
I had the same problem... then I realized the width was set at 100% not the actual cell width. Once I made the correction the text was aligned within the width setting.
CellVal = strcat('',MaxOver,'');
I write page, which shows sellers of used items. There is many short info elements on the map with price, state of item and period of availability of seller. I want to reduce free space of info windows so more of them can fit the screen. I try new functionality in 6.5.0 of wicket-stuff gmap3 - "panels inside info windows", but no luck - picture shows result of css:
border : 1px solid black ;
margin : 0;
padding : 0;
How can i minimize free space of info winfo window and fit it to content?
P.S. It will be best if i can make clickable group of digits with pointer. But info window not clickable, so there is markers. Idea - user first make brood choice based on main properties displayed in info windows, then click his choice and complete info displayed somewhere else on the page.
P.P.S. Hmm, i have one more idea now - i don't need digit with state. I just can paint info in different colors(green = "like new", blue="used hard, but works", red = "garbage") :).
Quick and dirty
var infowindow = new google.maps.InfoWindow({
content: '<div id="iw_content">3434 4 18-9</div>'
});
google.maps.event.addListener(infowindow,'domready',function(){
var el = document.getElementById('iw_content');
//* Get and set a class for the main content containers container
el = el.parentNode.parentNode;
el.setAttribute('class','iw_content_container_container');
//* Get and set a class for the div containing the close window image
closeEl = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
closeEl.setAttribute('class','closeInfoWindow');
//* Get and set a class for the div containing the close and main content
el = el.parentNode;
el.setAttribute('class','closeInfoWindowContainer');
//* Get and hide the troublesome background
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = "none";
//* Get and hide the top image of the arrow
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = 'none';
//* Get and hide the shadow (hiding commented out for now as not strictly requested)
el = el.parentNode.parentNode;
el = (el.previousElementSibling)?el.previousElementSibling.previousElementSibling:el.previousSibling.previousSibling;
//el.style.display = 'none';
});
That might work for you to put some hooks in the code which you can then address with css
#iw_content{background:#fff}
.iw_content_container_container{height:auto!important;text-align:center}
.closeInfoWindow {top:22px!important;right:22px!important}
.closeInfoWindowContainer{position:absolute;top:52px;height:auto!important}
You may want to mess about with the .closeInfoWindowContainer top value as this is dependant on the amount of text. Basically tested with just that one line of yours.
I tried actually removing widths and heights in the code itself (so adding/changing within the javascript) but Maps have an annoying habbit of putting them back in again depending on state and position of cursor when loading.
...
Info Windows are clickable. They are just a normal div element in the page and can be treated as such. I have made the various values in your example hyperlinks to show this.
Sorry it isn't wicketstuff but I thought I should still post a solution.
I'm trying to position an image on top of another image based upon the make-up of the smaller image. The smaller image is a cut-out of a larger image and I need it to be positioned exactly on the larger image to make it look like a single image, but allow for separate filters and alphas to be applied. As the images are not simple rectangles or circles, but complex satellite images, I cannot simply redraw them in code. I have quite a few images and therefore do not feel like manually finding the position of each image every and hard setting them manually in actionscript. Is there any way for me to sample a small 5-10 sq. pixel area against the larger image and set the x and y values of the smaller image if a perfect match is found? All the images are in an array and iterating through them has already been set, I just need a way to sample and match pixels. My first guess was to loop the images pixel by pixel right and down, covering the whole bitmap and moving to the next child in the array once a match was found, leaving the matched child where it was when the perfect match was found.
I hope I understood your question correctly.
There may be an option that uses copypixels to achieve what you want. You can use the bitmapdata.rect value to determine the size of the sample you want, and loop through the bigger bitmap using thet rectangle and a moving point. Let's see if I can code this out...
function findBitmapInBitmap(tinyimg:BitmapData, largeimg:BitmapData):Point {
var rect:Rectangle = tinyimg.rect;
var xbound:uint = largeimg.rect.width;
var ybound:uint = largeimg.rect.height;
var imgtest:BitmapData = new BitmapData(tinyimg.rect.width, tinyimg.rect.height);
for (var ypos:uint = 0, y <= ybound, y++) {
for (var xpos:uint = 0, x <= xbound, x++) {
imgtest.copyPixels(largeimg, rect, new Point(xpos, ypos);
if (imgtest.compare(tinyimg) == 0) return new Point(xpos, ypos);
}
}
return new Point(-1,-1); // Dummy value, indicating no match.
}
Something along those lines should work - I'm sure there's room for code elegance and possible optimization. However, it seems like something like this method would be very slow, since you'd have to check each pixel for a match.
There is a better way. Split your big image into layers, and use the blitting technique to composite them at runtime. In your case, you could create a ground texture without satellites, and then create the satellites separately, and use the copyPixels method to place them whereever you want. Google "blitting in as3" to find some good tutorials. I'm currently working on a game project that uses this technique and it's a very good method.
Good luck!
Edit: Forgot to code in a default return statement. Using this method, you'd have to return an invalid point (like (-1,-1)) and check for it outside the function. Alternatively, you could just copy your small bitmap to the big one within the function, which would be much more logical, but I don't know your requirements.
You need to find pixel sequence in the big image. BitmapData.getPixel gives you pixel value. So get first pixel from small image, find it in big image, then continue comparing until you find full match. If you have trouble to code that, feel free to ask.
For the actual comparison, there's BitmapData.compare which returns the number 0 if the BitmapData objects are equivalent.