[FREE] CanvasLayers - a layer editor for Canvas

[Passos_0213]

CanvasLayers Extension Guide for MIT App Inventor

Overview

CanvasLayers is a custom extension for MIT App Inventor that enhances the functionality of the standard Canvas component. This guide will explain how to integrate and utilize CanvasLayers in your MIT App Inventor projects.

MEDIA

• There are many blocks and I couldn't demonstrate them all
  

Files

• AIX:
  • V1: com.bosonshiggs.canvaslayers.aix (60.9 KB)
  • V2: com.bosonshiggs.canvaslayers.aix (63.3 KB)
• AIA:
  • V1: CanvasLayers.aia (64.9 KB)
  • V2: CanvasLayers.aia (84.8 KB)

Key Features

The CanvasLayers extension offers a variety of methods to manipulate layers on a Canvas, such as adding, removing, and editing layers, as well as drawing and clearing content.

Methods

Certainly, here's a detailed explanation of all blocks in the CanvasLayers:

Simple Function

1. SetCanvas(Canvas canvas): Assigns a canvas component for drawing.

2. SetAnchorComponent(ArrangementComponent, Number, Number, Number, Number, Number): Sets up a view component to anchor the layer picker with custom settings.

3. AddLayer(Text, boolean, Number): Adds a new layer to the canvas with an option for alpha channel support.

4. RemoveLayer(): Removes the active layer from the canvas and activates the layer below it.

5. ClearCanvas(): Clears the active layer.

6. SetActiveLayer(Text): Sets the specified layer as the active layer for drawing.

7. DrawPixelOnActiveLayer(Number, Number, Number, Number): Draws a square pixel on the active layer.

8. DrawPointOnActiveLayer(Number, Number, Number, Number): Draws a point on the active layer.

9. DrawLineOnActiveLayer(Number, Number, Number, Number, Number, Number): Draws a line on the active layer.

10. DrawWithShinyBrushOnActiveLayer(Number, Number, Number, Number, Number, Number): Draws with a shiny brush on the active layer.

11. DrawGrid(Number, Number): Draws a removable square grid on a special top layer.

12. RemoveGrid(): Removes the grid layer.

13. Undo(): Undoes the last action on the active layer.

14. Redo(): Redoes the last undone action on the active layer.

15. GetLayerInfo(): Returns information about the layers as a YailList.

16. RenameLayer(Text, Text): Renames a specified layer.

17. Erase(Number, Number, Number): Erases on the active layer.

18. FloodFill(Number, Number, Number, Number): Fills an area on the active layer with a specified color.

19. FloodFillScanline(Number, Number, Number, Number): Fills an area on the active layer with a specified color using the Scanline FloodFill algorithm.

20. GetTotalMemoryUsed(): Returns the total memory used by the extension in Kbytes.

21. AddImageToActiveLayer(@Asset Text): Loads an image from a path and adds it to the active layer.

22. MoveLayerDown(Text): Moves the specified layer down in the order.

23. MoveLayerUp(Text): Moves the specified layer up in the order.

24. ShowLayerPickerWithDelay(): Shows the layer picker after making the anchor component visible.

25. ShowAlertDialog(Text, Text, Number, boolean, boolean): Shows an alert dialog with custom settings.

26. ShowLayerSelectionDialog(Text, Number, Number, Number, boolean, boolean, Text): Shows a dialog with two dropdown menus for layer selection.

27. ShowTextInputDialog(Text, Text, Number, Number, Number, Text, Text, boolean, boolean, boolean, Text): Shows a dialog with a text input.

28. RoundCorners(ArrangementComponent, Number, Number, Number, Number, Number, Number, boolean, boolean): Rounds the corners of a visual component and adjusts colors.

29. RoundCornersMetallic(ArrangementComponent, Number, Number, Number, Number, boolean, boolean): Applies a metallic effect to the corners of a visual component.

30. ZoomInActiveLayer(Number): Zooms in the active layer.

31. ZoomOutActiveLayer(Number): Zooms out the active layer.

32. ZoomInAtPoint(Number, Number, Number): Zooms in the active layer at a specific point.

33. ZoomOutAtPoint(Number, Number, Number): Zooms out the active layer at a specific point.

34. SetCanvasMonitoring(Canvas): Sets up canvas monitoring.

35. ExportLayerToPNG(Text, Text): Exports a specified layer to a PNG file.

36. AdjustBrightness(Text, Number): Adjusts the brightness of the specified layer.

37. CreateLayerFromImage(Text, @Asset Text): Creates a new layer from an existing image.

38. SaveLayersToSeparatePDFPages(Text): Saves each layer as a separate page in a PDF file.

39. SaveAllLayersToOnePDFPage(Text): Saves all layers into a single page of a PDF file.

40. ConvertToPixelArt(): Converts the active layer to pixel art.

41. ResizeLayer(Text, Number, Number): Resizes a specific layer.

42. ConvertLayerToGrayscale(Text): Converts a layer to grayscale.

43. ApplyBlurToLayer(Text, Number): Applies a blur to the

layer.

44. ApplyBlurAtPoint(Text, Number, Number, Number, Number): Applies a blur at a specific point of the layer.

45. CombineLayers(Text, Text, @Options(LayerMergeType.class) Text): Combines two layers using the specified merge type.

46. StartSelection(Number, Number): Starts selection on the canvas.

47. UpdateSelection(Number, Number): Updates the selection on the canvas.

48. EndSelection(Text): Finalizes the selection on the canvas.

49. CutSelectedArea(): Cuts the selected area from the active layer and copies it to the clipboard.

50. CopySelectedArea(): Copies the selected area to the active canvas.

51. PasteCopiedArea(Number, Number): Pastes the copied area to a specified point on the active canvas.

52. StartLine(Number, Number, Number, Number): Starts a new line on the canvas.

53. DrawLine(): Draws the line on the active layer.

54. UpdateLine(Number, Number): Updates the line on the canvas with an end point.

55. StartArrow(Number, Number, Number, Number): Starts a new arrow on the canvas.

56. UpdateArrow(Number, Number): Updates the arrow on the canvas with a period.

57. DrawArrow(): Draws the arrow on the active layer.

58. GetActiveLayerName(): Returns the name of the active layer.

Property

1. CanvasWidth(Number): Sets or gets the width of the canvas.

2. CanvasHeight(Number): Sets or gets the height of the canvas.

3. OffsetX(Number): Sets or gets the X-coordinate offset.

4. OffsetY(Number): Sets or gets the Y-coordinate offset.

5. NumberOfLayers(): Gets the number of layers created.

Each of these functions and properties is designed to manipulate the canvas and its layers in specific ways, whether changing properties of the canvas, adding or modifying layers, or even interacting with UI and events. The properties typically include setters and getters for various attributes of the canvas, while the functions perform operations on the canvas layers.

Events

LayerSaved(Text filePath)

Triggered when a layer is saved.

• Parameters:
  • Text filePath: Path of the saved file.

ReportError(Text errorMessage)

Reports an error.

• Parameters:
  • Text errorMessage: Error message.

OnLayerSelected(Text layerName)

Triggered when a layer is selected.

• Parameters:
  • Text layerName: Name of the selected layer.

OnLayerLongPressed(Text layerName)

Triggered on a long press on a layer.

• Parameters:
  • Text layerName: Name of the long-pressed layer.

OnOutsidePicker()

Triggered when selected outside the selection area.

• Parameters:
  • None

TextEntered(Text text, Text type)

Triggered when text is entered in the input dialog.

• Parameters:
  • Text text: Text entered in ShowTextInputDialog
  • Text type: Optional text to differentiate different text entries

CanvasSizeChanged(Number width, int height)

Triggered when the Canvas size changes.

• Parameters:
  • width: New width
  • height:New height

LayersSelected(Text layer1, Text layer2, Text type)

Triggered when two layers are selected from the dialog.

• Parameters:
  • layer1: Layer 1 selected in Show Layer Selection Dialog().
  • layer2: Layer 2 selected in Show Layer Selection Dialog().
  • type: Optional text to differentiate different entries

AreaCopied()

Triggered when an area is successfully copied.

• Parameters:
  • None

AreaCut()

Triggered when an area is successfully cut.

• Parameters:
  • None

OnEndSelection(Text type)

Triggered when an area is successfully cut.

• Parameters:
  • type: Optional text to differentiate different entries

AIA FILE DEMO

It will be made available together with the AIX file after donations

• I showed in this example how to do the basics with the extension:
  • Create arrows
  • Select and copy areas
  • Add images
  • Select layer
  • To design
  • Add new layer
  • Remove active layer
  • Delete active layer content
  • Area filling

SUPPORT

AIX has been released completely free. Support and updates will be provided for a payment of $5.00.

• To donate, click here!

Conclusion

The CanvasLayers extension for MIT App Inventor provides powerful capabilities for layer-based drawing and manipulation, greatly enhancing the potential for creative and interactive app development.

[Kumaraswamy]

@Passos_0213

SetAnchorComponent(AndroidViewComponent, int, int, int, int, int):

It would be nicer if you present your blocks in a different way with images. An average user isnt aware of such technical things, AndroidViewComponent.

[Passos_0213]

Suggestion: It would be nice if the platform offered a security mechanism for AIA and AIX files.

[Passos_0213]

Is there anything else left for the post to be published?

[Taifun]

I think, we can publish it...
this is a nice to have...

@Kumaraswamy

It would be nicer if you present your blocks in a different way with images. An average user isnt aware of such technical things, AndroidViewComponent.

Taifun

[Passos_0213]

NEWS

AIX has been released completely free. Private support will be provided for a payment of $5.00.

[Passos_0213]

Wait for version 2!

[Kivanc_Mutlu]

hi,
Can you say to me your contack number ?
Thanks

[Passos_0213]

Telegram group Telegram: Contact @mitappinvnetorandbrothers