OTOY Forums

Hi All,

This is a simple example on how to use bitmaps in Lua (for something more complex see the live texture painting example). It creates 2 bitmaps. The top bitmap is used for free-drawing by hooking up a mouse listener. On a mouse down event we colour the pixel. The bottom bitmap just loads a picture with an opacity of 0.5. When a bitmap loads a picture, it's always resized to fit the picture. Keep this in mind when you're creating sprites for your script.

Here's the code:

Code: Select all

function mouseCallback(bitmap, event, x, y, dx, dy)
    print(bitmap, event, x, y, dx, dy)
    -- clear all when the mouse enters or leaves the bitmap
    if event == octane.gui.eventType.MOUSE_ENTER or event == octane.gui.eventType.MOUSE_EXIT then
        bitmap:updateProperties{ backgroundColour = { 255, 255, 255, 255 } }
    -- draw a pixel when the mouse goes down or is dragged
    elseif event == octane.gui.eventType.MOUSE_DOWN or event == octane.gui.eventType.MOUSE_DRAG then
        local thickness = 5
        for i=x, x+thickness do
            for j=y, y+thickness do
                bitmap:setPixel(i, j, { 255, 0, 0, 255} )
            end
        end
    end
end

-- plain vanilla bitmap
local bitmap = octane.gui.create
{
    type          = octane.gui.componentType.BITMAP,
    width         = 500,
    height        = 500,
    opacity       = 0.5,
    mouseCallback = mouseCallback,
}

-- picture bitmap
local picmap = octane.gui.create
{
    type    = octane.gui.componentType.BITMAP,
    image   = octane.image.load("/home/thomas/Pictures/script_menu.png"),
    opacity = 0.5,
}


-- arrange the bitmaps in a group
local group = octane.gui.create
{
    type     = octane.gui.componentType.GROUP,
    rows     = 2,
    cols     = 1,
    children = { bitmap, picmap },
    border   = false,
    inset    = { 5 },
    padding  = { 5 },
}


local window = octane.gui.create
{
    type     = octane.gui.componentType.WINDOW,
    children = { group },
    width    = group:getProperties().width,
    height   = group:getProperties().height,
    text     = "Bitmap Example",
}

-- draw something in the bitmap
for i=1,100 do
    for j=1,100 do
        bitmap:setPixel(i, j, { 0, 255, 0, 255 } )
    end
end

window:showWindow()


Here's a screenshot of my drawing skills:



cheers,
Thomas

This no longer works in 1.5 there is no support for line 31

Code: Select all

octane.image.create

Fixed it in the post, octane.image.create got replaced by octane.image.load and the bitmap's imageId property was changed to image.

Some other examples might still be broken in this forum. Luckily with the 1.5 release the API is stable and we won't just break it.

cheers,
Thomas

How can I control the size of the bitmap that's loaded. The image command seem to set the loaded bitmap to the image size, but if I wanted to set a thumbnail or 200x200 so the images would be side by side. Adding width=200 height=200 doesn't work, will have to use a different method to resize the image first.

In the sample below I used smaller images, but would like to control the size to be even smaller

Code: Select all

-- picture bitmap
local picmap = octane.gui.create
{
    type    = octane.gui.componentType.BITMAP,
    image   = octane.image.load("/home/thomas/Pictures/script_menu.png"),
    opacity = 0.5,

Tugpsx wrote:How can I control the size of the bitmap that's loaded. The image command seem to set the loaded bitmap to the image size, but if I wanted to set a thumbnail or 200x200 so the images would be side by side. Adding width=200 height=200 doesn't work, will have to use a different method to resize the image first.

In the sample below I used smaller images, but would like to control the size to be even smaller

Code: Select all

-- picture bitmap
local picmap = octane.gui.create
{
    type    = octane.gui.componentType.BITMAP,
    image   = octane.image.load("/home/thomas/Pictures/script_menu.png"),
    opacity = 0.5,

AnimatedTexture.JPG

It doesn't scale the image, the bitmap takes the dimensions of the image.

cheers,
Thomas