I added code to force the sprite size in proportion to the Canvas size, using pixel math.
I had to add colors to make the sprite more visible in contrast to the Canvas.
I am seeing bugs galore in AI2:
Canvas hops out of its Arrangement after a Canvas Save File
Sprite can't be dragged past edges, in spite of turning on the Canvas flag allowing edge escape.
The canvas image being saved is 535x535 pixels (not 200x200)
The canvas can receive a larger image and fit it to the canvas size, but an imageSprite with height and width set to automatic will return the 535x535 image.
There is also a bug with the canvas that moves it around, which also causes some confusion.
If you set the imageSprite height and width to 200x200, then the imageSprite will be the same size as the canvas, and will display as such.
What you cannot do is then move the imageSprite by 100x/100y, because it fills the canvas, and cannot go outside its bounds.
What you can do (not withstanding the implications of the aforementioned canvas bug), is have a fixed width and height arrangement (e.g. 200x200), centred both ways, and place a canvas of larger dimensions inside it (e.g. 800x800), then you can position an imageSprite of 200x200 outside of the "view" or anywhere in the view (the arrangement)
On my system the image is 400x400pixel, not 535x535. Apparently, this is system dependent and I don't quite understand how it is calculated. Why is it not the size of the canvas (which is fixed to 200x200)?
Resizing all the time is not really an option for me, because it will probably blur the edges (I will try though). To start with, a 100x100 filled black square on the top left corner of a 200x200 white canvas will not be saved in a 535x535 image as a black square on a white background with side length that is exactly half the length of the image, since half of 535 is not a whole number. Some interpolation will need to be used (which would be unnecessary if the size of the canvas would be kept).
Thanks for all your help, I will explore the different options. It will be slow though, because I will only have time to do this in the evenings.
In short: I would like to move the content of the canvas up or down by a fixed amount of pixels when a button is pressed.
A more detailed description:
I am drawing a pattern on the canvas, which includes rows of squares. The squares have fixed height. When the user presses a button, these rows needs to be shifted up or down by one row (and a new row needs to appear on the screen). The pattern is given by two lists. One list contains lists of 0,1 sequences, which describe the patterns in each row. The other list shows the order in which the rows of this pattern row list need to be displayed. I also include periodicity in the display, since the length of these lists are not the same as the length and width of the canvas (so I loop around).
At the moment I do a double loop (for the x and y direction) and call drawPoint several times to draw the squares individually. This is quite slow.
I was hoping that with a shift of the canvas image I can get rid of the double loop and draw only the new line.
you need to improve your drawPattern function, which use drawPoint pixel by pixel, that's too slow, you need to change to use DrawLine to draw small square.
You can move imageSprite out of canvas by using extension in post #40.
what about the part you move out of the canvas? just discard them?
save canvas then set it as background image, will make the image more and more blur.
Maybe try to set background image with Base64, using this extension.
I will try, but the problem is not in which format the image is stored. I can store it as a png, which is a lossless compression. The problem is that the background image is not stored at the resolution of the canvas, so in the storing process itself data is lost.
Since all your pattern is drawn by DrawPoint, you can save all the point location (x,y), to a list. When redraw, loop on this list, draw the point at (x+offsetX, y+offsetY), save this new location also.
Also add the new drawn point to this list.
I switched to a global variable for input, to enable Do It testing.
I don't know what I was thinking, adding that size parameter. The matrix and the WebViewer dimensions were all I needed, given that I wanted to fill the WebViewer from the matrix.
To generate the rectangles in the pattern, I needed to pass the total dimensions, and the matrix. Again, I lost track of what the size was supposed to mean.
This is where I loop over the matrix, by row and column index, generating individual colored rectangles in the proper positions in the SVG region. Each rectangle has to know where it should appear, its dimensions, and its color (style).
This is where the text for an SVG rectangle is built up, piece by piece.
This code translates matrix values (0/1) into SVG colors. A slight optimization is done at global init time, translating AI2 color blocks into SVG CSS colors.
Thank you very much for this, it is very helpful.
I attach where I am at now using your nice idea of displaying svg.
I did some modificatin to your code as follows:
To start, I removed the unused global variables. I got rid of the pattern loading, since there is nothing to load from memory in this trial version.
I separated the table generator (since it is needed to be done once, and I also separated the rectangle svg generation. This way it does not have to be regenerated every time it is displayed, it simply needs to be shifted when the buttons are pressed. This way most of the svg generation can be done during pattern loading and during display only a translation wrapper needs to be put around it.
Instead of matching the block sizes to the window, I use a fix size. This way only a small part of the screen is filled, I will do a periodic fill at some point. This periodic repetition was part of my original calculation, but it is removed now.
The part where I don't understand what is happaning is when I try to display the shifted rectangles. I call SVG from drawpatternUp with setting shiftY to gridsize multiplied by the stepcounter.
I was hoping that this will do a shift by one row, but insted it shifts by more. I don't understand why. I need to learn more about svg to understand what is going on. I cahged your svg setup from width="widthPX" height="heightPX" to viewbox="0 0 widthPX heightPX", because the original width/height did not work, but this is even worth. Now the svg does not even fill the view.
All in all, thanks for your help. I just wanted to send you where I am now to show that following your ideas I am getting there.
It would be easier if canvas had a "translate" option (like svg) that could be applied to a predefined object, but I could not find any.
Here is my newest version where the pattern is repeating to fill the screen.
Still a bit slow for my taste, but much better then where I started from.
For now I am OK with this, but I will learn how to write a dedicated extension to scroll the canvas. movePatternTrial_SVG(1).aia (216.0 KB)
