Share My Creation (UPDATE) B4XCheckList class (cross platform) - allows drag and drop of markers on an image.

B4XCheckList class (cross platform) - allows drag and drop of markers on an image.

General functionality - is to place a marker at a given point within an image with additional information.

Customization
- Background image - predefined or custom images
- Menu items - location, colors, size, icon and shape
- Markers - colors, size icon and shape
- Trash - location, color, size, icon and animation

Methods.
- Delete marker (drag and drop to trash)
- Clear all markers (auto animation)
- Screen preview
- Save marker data (JSON format)
- Save image with markers


1-gif.158008


File: CheckList.json

JSON:
[
    {
        "Comment": "",
        "x": 143,
        "y": 72,
        "Id": "2",
        "Name": "Sunken"
    },
    {
        "Comment": "",
        "x": 216,
        "y": 77,
        "Id": "3",
        "Name": "No Light"
    },
    {
        "Comment": "",
        "x": 190,
        "y": 145,
        "Id": "4",
        "Name": "Broken"
    },
    {
        "Comment": "",
        "x": 118,
        "y": 146,
        "Id": "1",
        "Name": "Scratched"
    },
    {
        "Comment": "",
        "x": 337,
        "y": 149,
        "Id": "4",
        "Name": "Broken"
    },
    {
        "Comment": "",
        "x": 235,
        "y": 63,
        "Id": "1",
        "Name": "Scratched"
    },
    {
        "Comment": "",
        "x": 309,
        "y": 69,
        "Id": "3",
        "Name": "No Light"
    }
]

File: CheckList.png

CheckList.png
 

Attachments

  • 1.gif
    1.gif
    413 KB · Views: 125
Last edited:

TILogistic

Expert
Licensed User
Longtime User
Options:
B4X:
    ' Image CheckList
    Dim xName As String = "Sedan 4-Door"
    Dim xImage As B4XBitmap = xui.LoadBitmap(File.DirAssets, "sedan.png")
    CheckList.SetBackground(xName, xImage)
    
    ' Trash Properties
    CheckList.TrashSize = 40
    CheckList.TrashPosition = CheckList.BOTTOM_RIGHT
    
    'Marker Properties
    CheckList.MarkerTypeShape = CheckList.TYPE_RECTANGLE
    CheckList.MarkerSizeShape = 18

    'Items Properties
    CheckList.MenuTypeShape = CheckList.TYPE_CIRCLE
    CheckList.MenuSizeShape = 25
    
'    CheckList.Menu(1, "Scratched", GetDarkColor, Null) 'Null Not image
    CheckList.Menu(1, "Scratched", GetDarkColor, GetIcon(Chr(0xE0C4)))
    CheckList.Menu(2, "Sunken",       GetDarkColor, GetIcon(Chr(0xE3F3)))
    CheckList.Menu(3, "No Light",  GetDarkColor, GetIcon(Chr(0xE3E4)))
    CheckList.Menu(4, "Broken",    GetDarkColor, GetIcon(Chr(0xE3AD)))

Result:
1.gif
 
Top