Develop Reference

Canvas re-drawing gets stucked (performance-problem) [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I'm about to create a GUI for my Raspi-Project. There is Nodejs running on the Raspi3 which runs a NodeJs-Server and a then it gets requested with Chromium in kiosk-mode.
One page of this GUI needs to visualize the states of 48x potentiometers, 12x buttons, 8x faders. The NodeJs-Server sends data (which was modified by user) via websocket to the client, which redraws the whole canvas. Works fine so far for a few elements:
works fine but with a slight delay if you look closer
Now the problem is, that whith the growing number of elements that need to be drawn, the performance drops down to unacceptable dalay-times.
works, but with a way too big dalay, as more elements are drawn
and those are not even the half of stuff that needs to be drawn.
I am confused now, because I read about how fast canvas is, before I decided to go that way, and if I deactivate all canvas-drawings and simply console.log() the data that comes in via websocket, it is fast like in realtime.
so what am I doning wrong? maybe there it would be better not to draw the whole canvas on every value-change but animate the canvas? maybe someone has experience on this?
Here is the code.. when you look into assets/js/menu.class.js, this is the file which generates the canvas. the function createControllerGUI(options) is called every via websocket, every time a value changes.

Canvas is quick, but still cpu intensive. Also speed changes with the platform a bit.
Your function does all the drawing operation each change. Those operations have strokes, fills, center aligned text and something more ( i did not look all in details ).
There are some ways in which you can optimize the drawing operations.
partial redrawing
maybe the most effective.
Keep track of where a widget is, keep track of what data changed from message to message and draw only the differences.
Use clearRect on the area occupied by the widget and redraw it. Do not touch the other pixels.
Unless an octopus is using the hardware, you will have 2 or 3 widget changing per frame at maximum.
stroke all at once.
Instead of stroking on a per widget basis, you can trace all the paths you need at once, using a moveTo to the new position when changing widget, and using a single stroke operation at the end of the loop.
caching
If you have some rotatory controls for example, you can draw them once on a small separate canvas, and use that canvas as a source image to be drawn at a different angle if you need to represent a rotated control.
DrawImage is often optimized with hardware operations while the single fill and stroke may not.
There are probably other ways, and you can look at high level libraries that can do this for you, exposing a widget logic instead of the low level drawing operations.

How to add HTML content above the current position without a page jump [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
TL;DR: How can you add HTML content before the currently viewed content so that the page does not jump?
Longer explanation:
We have to render large manuals with sometimes hundreds of chapters in HTML. The manuals can be several MBs so loading it all at once would take to long. We can load chapters on demand.
The problem is that the HTML is responsive and the chapters have different lengths. Some have just a few sentences, some are several pages long. This means that we don't know the height of the content. The height does actually change whenever the user resizes the browser, changes the orientation or simply the font size.
The typical lazy list libraries cannot be used since they require a fixed height for each cell which is not the case here.
We would have to render a chapter outside the DOM, calculate its height and add it to the container diff.
Whenever the window size changes, all sizes would have to be recalculated.
The naive approach would be to just load a few chapters before and after the current chapter. Then poll the scroll position every second or so and check if we have to load more chapters.
The problem is that when the user scrolls up and content is added above the current position, the page jumps and the viewer gets lost.
Is there a way to deal with this problem without having to create custom scroll handlers?
Is this even a thing? Or can modern browsers easily handle 5000 page HTML documents?

What you want is an infinitely scrolling table, where table cells that scroll off the page are recycled and reused with different content.
Using a model-view approach (or a similar model), you can queue and dequeue reusable cells that lazy load data from your data source (e.g. in this case chapters).
The inherent benefit to doing this, is you no longer need to concern yourself with the visual adding, removing, and positioning of each chapter on the screen (and, worse, rendering them—400 chapters’ worth of text would be really choppy). Instead, you manage your data one one place, and present it inside the same, reused visual elements.
The tricky part is getting the table cells to work with variable heights.
Image source and some more reading: http://hrily.co/blog/2017/05/20/rendering-large-html-tables.html
Also Google around for more infinite scrolling tutorials.

Most appropriate layout for (Computer) Network Diagram [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm trying to develop a HTML/JS based "(computer) network diagram". By this I mean boxes linking to other boxes, and more importantly, boxes contained inside the bounds of other boxes.
Simplified Use Case - to explain the layout requirements
The use case is VPC (huge box) with AZ inside (2 or 3 big boxes stacked next to each other), and subnets inside each of those (boxes stacked on top of each other), and EC2s inside that (lots of small boxes next to each other).
While I've tried a number of methods (see below) I haven't found a suitable layout for my diagram and am wondering if my needs are so unique that I need to roll my own.
What I want help with...
I'm wondering if I'm missing something obvious in my research (in terms of options for a HTML5/JS solution)
Am I taking the right approach looking for a framework or are these requirements too special?
Should I consider writing my own layout (or does someone have a good idea for a good layout to start with)
Is there a framework that does visual grouping well (e.g draw a big box that contains smaller boxes, maybe a few levels deep)
My Research:
Webcola (can use with d3) http://marvl.infotech.monash.edu/webcola/
D3 http://d3js.org/
JointJS http://www.jointjs.com/demos/devs
Webcola
I originally tried Webcola as the following example seemed the most promising:
http://marvl.infotech.monash.edu/webcola/examples/smallgroups.html
I found the documentation to be lacking, a few of the links are dead, and when trying to combine the "Layout with hierarchical grouping" with "Alignment constraints with guidelines" the page failed to load.
D3.js
This appears to have lots of documentation, although I couldn't find a single example that came close to what I wanted to build.
https://github.com/mbostock/d3/wiki/Pack-Layout
Pack Layout seems the closest, with nesting used to represent the hierarchy.
The problem with this method is the size of each node is not uniform (I can just set them all to 1) and the example uses circles (this appears to be a hard rule with this layout, I think).
JointJS
http://www.jointjs.com/demos/devs
This appears to have a nice example with what appears to be a group and inputs/outputs (although the node can escape the bounds of its parent which isn't ideal.

If I did undersand your problem well, it can be done with HTML/CSS only :
the VPC div (container) is in position relative the and float left
position relative too inside an again float left with clear left if
you want to create another line
Beware of the width of the div

Any easier way to work with web animation? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm a beginner in web animations(canvas and svg). I have seen some work and examples in Chrome Experiments and am really excited to dive in. However, whenever I'm trying to do anything remotely decent or following any tutorial that seems a little bit interesting, the sheer amount javascript that has to be put in is proving to be a huge turn off.
For example, if I want to do any simple svg animation, I have to manually place the co-ordinates to achieve the effects. If there were any GUI tool to work with SVG or Canvas that would produce the initial movements(i.e. If I want to move an object from A to B, I'd like to do it by hand rather than counting the pixels) then the subsequent tweaking would be a lot easier. Are there any tools that help you achieve the effects? If not, what's the standard way to draw and animate svg graphics/canvas animation today?

Hype, Sencha Animator , Adobe Edge Animate are tool you might want to use if your purpose is to do animation with web technologies.
The problem with the link you provided is many of the exemples involve quite a lot of programming. It's not like Flash where you could do crazy stuffs with little programming knowledge. So you are not going to do crazy stuffs with any of the program I cited. By the way flash now exports to web techs so you might want to look into that.
You will have to write some javascript to make a decent animation with Canvas or SVG, as most of the previous software work with the DOM.
But you can cheat, a lot of agencies now use video (from After Effect) for animation directy, and you can manipulate video through canvas, do compositing etc ... the problem will be the size in that case.

creating an HTML5 piano roll editor [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am creating a piano roll like interface, one like you might find in a DAW such as ableton, that looks something like this http://www.abletonlife.com/wp-content/uploads/2010/04/midi-track-big.jpg . The grid represents a canvas to draw in notes to be played, the red squares being the notes to play. You double click on an empty space to create a new note, and you can drag the edges to change the length of the note.
I am new to web dev so I am having a bit of trouble seeing what the right architecture for this might be. With my limited knowledge, the following are the architectures I can think of.
1) Rows of horizontal flex-boxes.
display: box;
box-orient: horizontal;
box-flex: 1;
Something like this, http://jsfiddle.net/ZgzNw/.
Pros:
When resizing the browser window, the browser will automatically
handle resizing of the notes and therefore the grid. Resizing of divs/notes also handled easily for zooming in and out and changing quantization values.
All notes in all positions already exist, when double clicking to "create" a new note, all you have to do is change the css for that note (to be red) etc.
Cons:
Since there is a div for every space in the grid, even empty spaces where there is no note to be played, there will be a lot of divs. Can the browser handle thousands of divs? As an extreme example if there is a 32nd note quantization, a song of 200BPM would have 50 measures per minute, take a 10 minutes song, that would be 500 measures. Going back to the jsfiddle example above and setting measures=500 and quant=32, I get the following error in the Chrome Developer tools console after a few seconds "Uncaught RangeError: Maximum call stack size exceeded". This is when creating the divs in that bit of javascript, If I lower the number to around 300 it is able to create the divs, but things become laggy.
2) Create the grid using divs of width=1px for the vertical lines of the grid. Create new note divs on the fly, position them manually (with position: float?) based on the position of the mouse click.
Pros:
Only have a divs for actual note that are on, so don't have the con of method 1) being an issue
Cons:
Have to manually compute everything, Where to place newly created note, zooming in/out means repositioning vertical markers for grids, and calculating new sizes for note divs. This was mostly handled automatically in the method 1.
I'm sure there are a lot more architectures and pros/cons to the two methods I describe, but I've never created any web applications and the extent of my web-dev experience is the tutorials I've done over the last 2 weeks to teach myself.
My question I guess is what is the best architecture for creating this piano roll interface I am describing? Specifically the UI representation, not the backing model.

I would create a simple model (probably just a multi-dimensional array) to contain the representation of the score, where each array item represented a note at a point in time. From the model, you can then draw/redraw accordingly. You could also perform operations like time shifts, quantizing, thinning, etc. by modifying the arrays.
Can the browser handle thousands of divs?
A few thousand, yes, maybe more--maybe even a lot more--but results will greatly vary by browser, by computer, even by the way they are positioned (floats tend to be slower than absolute positioning, for example, because the browser has more to calculate).
Instead, I would research using a canvas and draw/redraw based on your underlying model. You can detect events on the whole canvas, and depending on coordinates, easily map the event to the note(s) to which it corresponds.
KineticJS has some cool examples using a canvas

I would use a background image to represent tracks and measures, and one div for each note. It is not necessary to keep all notes as div’s in the browser, it would work better only to have the div’s for the visible up to 10 measures.
Imho, this should be done fixed-width, and there should not be any resizing of the piano roll at all. So you can use calculation of pixels. I don’t think this will work without making use of Javascript heavily.