Responsive map made of multiple image files - javascript

I'm pretty much a total noob when it comes to responsive web design and I'm attempting to produce a responsive web app with an interactive map.
The map is made up of seven separate image files - one for each region. The map has to be split in to separate images so that I can change the transparency of each image (and therefore, the regions color intensity) depending on data taken from the database.
I want the map to be centered but I also want each region's individual image (that makes up the map) to retain its position.
The best analogy I can think of is a jigsaw where the pieces maintain their correct position to complete the jigsaw's image even when the browser is resized.
What is the easiest way for this to be achieved?
Bare in mind that I still need to be able to control the transparency of each regions image.
Any help or suggestions would be greatly appreciated as I do not know where to start! Sorry if my description is poor - feel free to probe.
Cheers,
Will

I ended up using an SVG made in illustrator which worked perfectly. Embedded it inline as apposed to having an SVG file in the directory.

Related

How to manipulate a set of images collectively along the screen in Three js

I have been trying to recreate https://anatoletouvron.fr/ portfolio and cannot recreate the convex and concave type of distortion of the images when we scroll fast on the site. Does anyone have any pointers? I tried applying all the shaders I extracted from the site.
I got the post-processing part to work but not the images. When I apply shaders to them all images get manipulated at the same time and not in relation to their position on the screen. How do I go about achieving this? The site seems to be built in OGL. I am trying to recreate the same in Three.js. Any sort of pointers can help, Three.js noob here.

Leaflet for using custom NOT geo-maps

I just started getting familiar with the Leaflet library. I need to figure out how to load large amounts of abstract data into a Leaflet. Not a geo-map.
Let it be a "map" that displays a million digits of Pi in color. It is not so important what it displays. It is important that I have a page that loads some array of bytes in chunks and shows it as colored pixels. Ideally, you need 10x10 chunks. The user goes to the page with the map and sees, for example, 100 chunks, i.e. 10x10 chunks of 10x10 pixels, which represent the PI number. Using the mouse, the user moves left-right and the application requests the pixels not yet loaded from the backend.
Can Leaflet's capabilities solve similar problems? Or plugins written
for Leaflet?
In theory, it seems to me that this is possible. But in practice, all guides and documentation are for working with geo-maps or raster large images.
Your question is a little generic, but I think what you're talking about is making your own GridLayer. This is leaflet's underlying class for creating a tiled grid of any HTML element you can think of. Whether its a <div> with text in it, or a <canvas>, or whatever you like. I'm not sure what exactly you mean by "a page that loads some array of bytes in chunks and shows it as colored pixels", but that sounds like something that can be done by writing to a canvas using putImageData, and then applied to a GridLayer.
I recommend reading the tutorial on extending leaflet - extending layers. Once you understand this, you'll see that leaflet is built to render zoomable, pannable grids of whatever you want. The links that Ivan Sanchez left are great examples of the crazy stuff you can do with GridLayers (formly called L.TileLayer.Canvas in older leaflet versions)

JavaScript sprite sheet use with normal and retina screens

I'm looking for some advice. I've created a space invaders game which gets the spaceship and aliens from one sprite sheet. I work on a 5k retina screen and all looks well.
The issue is when I go onto a non-retina screen the ship/aliens sprite locations look wrong with the alien starting half way through. So an alien shows on screen as half of one alien and half of the other.
I'm putting this down to a retina issue and looking how to resolve it. The sprite image is been called through image() constructor and using on load. I then use drawImage to set the position on the sprite sheet to select the correct position on each alien. So no CSS used.
Do I need two sprite sheets one retina and one non-retina or are they some code that JavaScript will check what kind of screen is been used?
Is code needed or is this explanation good enough?
Edit
I have seen that I have made an error my browser on the non-retina screen was zoomed in at 110% this has caused the issue. So looks like it's with zooming the browser that the issue appears.
There are a number of ways you could approach this:
Create two separate sprite sheets and use media queries to apply the correct styles based on device resolution media queries. This is labor intensive, so I would recommend a tool to build the sheet and generate the CSS automatically like https://github.com/sprity/sprity
Use a single Retina sprite sheet, like you are currently doing. I suspect the issue you are having is due to some CSS, which we would need to see to debug.
Use an SVG sprite https://css-tricks.com/svg-sprites-use-better-icon-fonts/
Use inline SVG, which eliminates a network request.
Happy to provide more details about any of the above approaches.
You can try spritify tool https://www.npmjs.com/package/spritify
There is demo app that show how to use it https://github.com/shadiabuhilal/spritify-example

WebSite Design - Adding Shapes to a Board

I have run into a small problem on a project I am working on.
Basically I have a page on a website where a single image is displayed. Users can then add shapes over this image.
Sort of like having a board with sticky notes.
The way I was tackling this was by having an invisible grid overlaying the board so that any shape added will be placed inside a cell, but this is giving me issues as the shapes can sometimes be larger than the cell on the grid.
Are there any other libraries I could use which could give me the functionality of adding shapes over an image, with the possibility of saving that shapes position?
Thanks!
Hey this may help you achieve what you want http://fabricjs.com/ its a simple
Javascript HTML5 canvas library that allows images to be loaded over backgrounds

Combine Vector advantages with Bitmap in an HTML canvas element - how?

What I am trying to do is create a game that has an extreme amount of zoom-ability on a canvas element. I would like to make use of the advantage that vector graphics have insofar as being able to be programmatically created at runtime, with the high performance of bitmap images.
What I would like to do is programmatically create the first-frame image of a game "sprite"... this would be a vector image. After the first frame though, I do not want to keep wasting CPU cycles on drawing the image though.. i would like to cache it as a bitmap/high performance image for that zoom level.
Following this, if the user zooms in by >20%, I then redraw the image with a higher level of detail vector image. As above, this vector image would then be cached and optimized.
As you can see here, this would be a pretty basic space ship.. I would first render it programmatically as a vector and then.. raster it I guess? Goal is to avoid wasting CPU.
If the user zooms in...
A new vector image of the same shape would be drawn, albeit with a much higher level of detail. This is basically a Level Of Detail system. In this case as well, after the initial programmatic draw, I would "raster" the image for maximum performance.
Does anyone have ideas on what tools I would need to make this a reality inside of a HTML canvas? (The rest of the game will be running inside of the canvas element..)
Thank you very much for your thoughts.
**Edit: I wanted to add... perhaps the route of rendering an image via SVG (programmatically), then pushing that png file into the canvas using drawimage(), might provide some success? Something similar? Hmm...
Check out that article , but it seems there is no standard method to do what you want and it may fail in IE.
http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#svg_to_canvas
You should perhaps go with an all SVG game , or provide a maximum zooming rate to your game and use big images as sprite assets. it would not have been a problem using flash,but i guess you wont go with flash anyway.
Maybe there is a framework that can translate SVG into a "canvas drawing sequence" but i would not bet on high performances in that case.
I managed to answer my own question.
The way to do this is to first create an SVG file, and then convert it to a PNG file on the client using "canvg". The PNG can be created at different levels of details based on what you want, and in this way you could create a dynamic LOD system.
Flash does something similar automatically by cashing a bitmap image of the SVG file... it's called "pre-rendering". If the SVG isn't scaled or the alpha isn't changed, flash will just use the bitmap instead (much faster then continuously re-rendering the SVG file, in complex cases). Size (and thus detail) of the PNG output can be modified however you like, and so pre-rendering could be done based on events as well.
From this information, I have decided to implement the LOD system such that SVG is used whilst the user is actively zooming (scaling the target "sprite"), and then as the zoom slows down, compute a PNG pre-render. Also, at extremely high levels of zoom, I simply use the SVG, as it is much easier for the CPU to compute SVG's at high resolution, then bitmap images that cover most of the screen. (just take a look at some of the HTML5 icon tests that put lots of icons on the screen... the bigger the icons are, the slower it runs).
Thanks very much to everyone's comments here and I hope that my question/answer has helped someone.

Categories

Resources