Best way to display huge 2d array [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to display 1000x1000 array in some way. Array element would either be black or white, depending on boolean value. For this job I am thinking about either javascript or winforms, but before I jump into, I wanted to hear what could be drawbacks for these choices. I am much more familiar with javascript than winforms though. As for winforms, I tought that there could be too many GDI objects to handle. Any ideas, suggestions?

I'm not familiar with win-forms but the first idea that came to mind was just a plain old html table. It would be a lot of html though to have 1000 x 1000. Second thing that came to mind would be an SVG. You can manipulate an SVG with JavaScript as shown here http://tutorials.jenkov.com/svg/scripting.html. Theres also this post which shows how to create tables with SVG.You would probably want to generate the SVG before hand to save the application from doing a lot of work and then set the colors using a loop. You can even use photoshop and save as SVG and then open the file in an editor to get the SVG code.

Related

How to create images using JavaScript/Node.js? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
How can I create something like a profile card where I will modify some text and colors and then make it an image? I have no idea where to start.
The best thing to use in this case is SVG. You're combining data with a variety of elements and then putting them all together. SVG is much like HTML, but with a tighter focus on the image itself. You can combine raster elements, your data, and vector elements, to make the final image. From there you can either use this image directly or render it to a PNG.
I strongly recommend leaving it in SVG if at all possible, to preserve the text nature of a lot of this data. Not everyone can see the screen. If you burn text into a raster image, screen readers won't be able to read it.

Small tiles that get bigger when clicked [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to create a webpage with several small tiles that enlarge when clicked (And show more/different content, but that's not a part of this question).
This is what I have now: http://puu.sh/nX929.png
When I click on the first tile, it looks exactly like I want it to: http://puu.sh/nX9l9.png
But when I click the second tile it looks like this: http://puu.sh/nX95G.png (gap on the left)
That's not what I want, I want to other (small) tiles to float around it. To fill the empty space.
The source code (+ live example) can be found here (but I wouldn't mind doing it in a completely different way): https://www.crescendosassenheim.nl/Hugo/Training/
I don't even know what to Google, because I have absolutely no idea what kind of technique I can use to achieve what I want. Any suggestions?
http://masonry.desandro.com/methods.html Take a look at this I am sure this will help you, what you want is even displayed at the bottom of the page i am linking.
Download masonry in your computer link to it and follow the little guide in their website.

Use background image as page structure? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm working in a place that we have to use images as page structure, I would like to know how wrong it is, because in my eyes is very wrong and.. I can never make perfect the layout because of the difficulty to fix the correct content over the image.
Is there any right way to do this? Any course to teach me an easy way?
Example: http://bit.ly/1GILaQs
BG: http://bit.ly/1GILfDy
We need give support to IE8, so is more difficult.
Thanks
The goal should be to reduce that file size of that image because it is very large and takes a long time to load. And also to make the layout more flexible so that when you change something you don't have to open up an image editor and rearrange things.
I don't think it is possible to replicate what you have there exactly without using large images but what I would do is try and replace some elements with simpler more easily repeatable patterns. For example replacing the red background with a simpler symmetrical gradient and removing the shadows/folds from the white image. Then for the shampoo bottles you could use individual image tags and place them within your content.
Amanda, you can have a background image that can be repeated, the red part of the layout background. Then you can have a div with the white part.I believe that's the best you can have.
I don't believe there will be a magic way that will give you the layout flexibility you're looking for. You will have to work with Photoshop and adapt the content accordingly given the nature of the layout.
Code School offers some good courses, they have one about css that can help you on that: https://www.codeschool.com/courses/css-cross-country

Serializing HTML Canvas [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to create a service that allows real-time concurrent modification of canvases by more than 2 users. I have been exploring the literature behind the best ways of doing this and have not found a lot to go of off.
So far I have found methods which serialize the canvas using the canvas.toDataUrl(). The issue here is that it seems rather inefficient to redraw the entire canvas when only very few pixels have changed (that is, when another user modifies it).
I do not really know where to start with this particular project and would love some help with that.
No more than 40 users would be looking at the canvas at once.
Depends on what and how users are drawing.
If they can draw/manipulate only predefined set of primitives, like software block chart then you can send just list of JSON serialized data describing those primitives and their location.
If drawing is just a pixel bitmap like this http://intridea.github.io/sketch.js/ then you can do drawing into bitmap and broadcasting that bitmap serialized as PNG on mouseup or so.
To publish this to all users I would do something socket.io based. Node.js for example has a lot of samples of how to do socket.io based chats. Chat is conceptually pretty close to what you want to achieve.

Html 5 Canvas image Gallery [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to create a image gallery using Html 5 Canvas and when I hover a image, it must grow and change opacity. In addition to image selectable and draggable?
How can I do this? Any ideas?
Well sir, first try to code anything and then come to ask for assistance with particular problem. For now it looks like you have no clue about subject and not even tried. I can anwser a question like how to manipulate opacity in canvas, how to implement drag and drop, etc...
but NOT I need someone to implement my whole idea for me
I should also point out that Canvas isn't probably the best technology for this task (in the meaning of both performance and implementation difficulty).
If you insist, you will have to rewrite all functionality which is already easily accessible with DOM and libraries like jQuery.

Categories