Specifying Custom dimensions for a Shield UI Background image - javascript

I have a site where I am providing users some graphical information and I use the Shield UI JavaScript Chart. I am trying to take some more advanced use of the chartAreaBackgroundImage: property. I am actually in need of several things I couldn’t find anything in the manuals.
Is there a way to resize the picture by a certain factor e.g. to specify exact dimensions?
Is it possible to set transparency for the image used?

The images used as the chart background, set by the chartAreaBackgroundImage property have currently no more adjustable properties than the URL of the image itself.
Once rendered, the image fills the entire plot (or data) area of the chart.
In addition there is no transparency factor that can be adjusted as well, however you may adjust the images forehand and also use appropriate dimensions of the chart and data area, so that the desired visual effect is achieved.

Related

Google Charts line thickness(& Sharpness) differ

I just found that there are some difference in the line thickness (and sharpness) even tough their line thickness property has be set to the same. I have searched all over the Google Charts webpage. But I could find nothing. How to solve this kind of error ?
Check all the lines you find the difference. Some will blur and other will be sharp.
This isn't really specific to Google charts, its an artefact of Anti aliasing. In brief, the pixels in most computer displays are relatively large, which makes precise display difficult. Anti aliasing uses shading to make an image look like it was rendered with more pixels than are actually available, at the cost of being blurry. When you have some lines that match the real pixels, you will see the difference.
There doesn't seem to be an option to turn off antialiasing that I can see in the Google Charts documentation.
If you are exporting images (e.g. PNGs) you could export at a larger size and reduce the image back at a non-integral scale: that way all lines will be blurred roughly equally as no source pixel will exactly line up with a destination pixel.
If you are trying to display SVGs, you might be able to turn off antialiasing using CSS styles. (Maybe try this)

Get the displayed color of an area of the screen using javascript

I am looking to get the actual displayed color of an area of the screen using Javascript.
I have a system that allows people to restyle their content and they can use RGBA colors, what this means is that while I can very simply test what the background color of an article is (for example) that may not be its actual color because it may be slightly or fully transparent and thus the layer underneath may be showing through...
I have seen various questions on here that deal with getting pixel colors from an image using Javascript, so I am wondering if canvas could be used to achieve this in some way...
What I want is to hide the text in an article, create a (maybe canvas) 'screenshot' of what the article background looks like empty, and then iterate over the pixels in there to get an average color value.
Anyone any ideas on how to do that?
You need to get a screenshot of the page using canvas, which is not trivial:
Can you take a "screenshot" of the page using Canvas?
And then getting the colour would be trivial once you have the screenshot.

Hovering over different segments in a circle

I am currently trying to create a blue, circular, pie-chart-esque image for my website. The circle will be split into 6 different segments.
What I want to happen is that when the user hovers over a particular segment, this segment will turn orange, and some text will appear beside the circle corresponding to that segment.
I have found some resources online which achieve nearly the effect I need using CSS image maps. http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ However, these techniques split up an image using rectangles. If I were splitting up a circular object I would prefer to split up the area based on particular arcs.
I assume this is beyond the reach of pure HTML and CSS. I do not have a great deal of experience with web languages, although I have had passing experience with JQuery. What are the techniques I need to solve my problem and what technology would be best to implement it?
you can create image maps that are not rectangular, but use polygon shapes.
this useful tool http://www.image-maps.com/ will let you achieve what you are looking for, without having to write your own polygon mapping!
A few options:
HTML image map
It's simple to create an HTML image map that comes very close to the shape of each slice of the circle, but there are limitations to HTML images maps. For instance, you can't nest content inside each slice of the image map (as an easy way to implement a hover pop-up). If an HTML image map is adequate for you, it's the simplest solution.
CSS image map
To define circle-slice shapes, a CSS image map is impractical, unless you only need a very-rough approximation of the hotspots for each circle slice. But if you could live with that, you'd have a lot more flexibility as far as the functionality.
onmousemove
You could also get the mouse coordinates with an onmousemove event handler for the entire circle, and then do your own calculations to determine which circle slice the mouse is in. This allows you to accurately define the hotspots for each circle slice, and you'd have more flexibility than with an HTML image map. But the calculations may take a little work.
I have a solution for this using mainly HTML and CSS with a tiny bit of jQuery to handle the showing of the text by the side of the circle.
It does however use some CSS properties that are not very widely supported such as pointer-events
JSFiddle Demo

Google Map Algorithm (Ajax, Tiles, etc)

I'm working on an app that displays a large image just about the same way as Google Maps. As the user drags the map, more images are loaded so that when a new part of the map is visible, the corresponding images are already in place.
By the way, this is a Javascript project.
I'm thinking of representing each tile as a square div with the image loaded as a background image.
My question: how exactly can I calculate what divs are showing, and when the tiles are moved, how do I tell when a new row of divs have become visible?
Thanks!
About calculating what divs are showing: learn the algorithm for intersecting two rectangles (the stackoverflow question Algorithm to detect intersection of two rectangles? is a good starting point). With that, the divs that are showing are the ones whose intersection with the "view window" is non-empty.
About telling when a new row of divs have become visible: you will probably need a updateInterface() method anyway. Use this method to keep track of the divs showing, and when divs that weren't showing before enter the view window, fire a event handler of sorts.
About implementation: you should probably have the view window be itself a div with overflow: hidden and position: relative. Having a relative position attribute in CSS means that a child with absolute position top 0, left 0 will be at the top-left edge of the container (the view area, in your case).
About efficiency: depending on how fast your "determine which divs are showing" algorithm ends up being, you can try handling the intersection detection only when the user stops dragging, not on the mouse move. You should also preload the areas immediately around your current view window, so that if the user doesn't drag too far away, they will already be loaded.
Some further reference:
Tile5: Tiling Interfaces
gTile: Javascript tile based game engine
Experiments in rendering a Tiled Map in javascript/html…
There's no reason to implement this yourself, really, unless it's just a fun project. There are several open source libraries that handle online mapping.
To answer your question, you need to have an orthophoto-type image (an image aligned with the coordinate space) and then a mapping from pixel coordinates (i.e. the screen) to world coordinates. If it's not map images, just arbitrary large images then, again, you need to create a mapping between the pixel coordinates of the source image at various zoom levels and the view-port's coordinates.
If you read Google Map's SDK documentation you will see explanations of these terms. It's also a good idea to explore one of the aforementioned existing libraries, read its documentation and see how it's done.
But, again, if this is real work, don't implement it yourself. There's no reason to.

Creating a dynamic multi-layered image for the web

I have a multi-layered image in Photoshop that I would like to use on the web. The aim is to have a number of buttons to show/hide the various layers.
My initial thought was to export each layer as a transparent GIF PNG, stack the images using CSS and use Javascript to toggle the visibility of each layer.
Is there a better way to achieve this? I am particularly interested to hear of any software or Javascript libraries to simplify this process.
Many thanks.
Edit:
To clarify, the image in question is a map with various outlines and shaded areas to overlay, so I will only need basic control of layer opacity.
I would stack each layer into one large image. In your front-end code create a frame the size of the layer with your stacked image as the background.
Create the buttons and use jquery to trigger a background shift relative to the button that is pushed. It will appear the image is changing, but it is just shifting the background. This will save on consecutive image loads, making the UI appear quick and seamless.
You could try to use the ::before and ::after and -webkit-mask-image property to help you create you multi layered image.
Or just stack png with absolute position and your png needs to be in 24bit mod, by the way.

Categories