Keyboard Half-Showing

SDK Get Help
1

I need a keyboard to open when "left" is pressed.
You can open it, but when you try an close it, it half-shows.
Code:

import "CoreLibs/keyboard"
import "CoreLibs/ui"

local ui<const> = playdate.ui
local gfx<const> = playdate.graphics


function loginUISetup()
	loginUIOn = 1
    gfx.setLineWidth(4)
    gfx.drawText("*wasteof.money*", 10, 5)
    gfx.drawText("*Username* ⬅️", 25, 45)
    gfx.drawRoundRect(25, 70, 350, 40, 5)
    gfx.drawText("*Password* ➡️", 25, 125)
    gfx.drawRoundRect(25, 150, 350, 40, 5)
    local wasteoflogo = gfx.image.new("images/wasteof-logo", 20, 20)
    wasteoflogo:draw(159, 10)
    gfx.drawRoundRect(25, 205, 170, 30, 5)
    gfx.drawRoundRect(205, 205, 170, 30, 5)
    gfx.fillRect(25, 205, 170, 30)
    gfx.fillRect(205, 205, 170, 30)
	playdate.graphics.setImageDrawMode(playdate.graphics.kDrawModeFillWhite)
	gfx.drawText("*Sign Up* Ⓐ", 75, 212)
    gfx.drawText('*Login* Ⓑ', 255, 212)
end

loginUISetup()


function playdate.update()
	if loginUIOn == 1 then
		if playdate.buttonIsPressed("left") then
			playdate.keyboard.show()
		end
	end
end

playdate-20220830-155217

3

I think the issue here is that you’re not clearing the contents of the screen anywhere, so it’s showing each frame of the keyboard sliding off the screen.

You could:

  • Add gfx.clear() at the start of update and redraw your UI each frame. (For efficiency, draw loginUISetup to its own image then image:draw(0, 0) in update after clearing the screen).
  • Use the SDK sprite system which will manage screen drawing and updating for you.
2 Likes
4

This works:

import "CoreLibs/keyboard"
import "CoreLibs/ui"

local ui <const> = playdate.ui
local gfx <const> = playdate.graphics

local ui_background = gfx.image.new(400, 240)

function loginUISetup()
    gfx.pushContext(ui_background)
    loginUIOn = 1
    gfx.setLineWidth(4)
    gfx.drawText("*wasteof.money*", 10, 5)
    gfx.drawText("*Username* ⬅️", 25, 45)
    gfx.drawRoundRect(25, 70, 350, 40, 5)
    gfx.drawText("*Password* ➡️", 25, 125)
    gfx.drawRoundRect(25, 150, 350, 40, 5)
    --local wasteoflogo = gfx.image.new("images/wasteof-logo", 20, 20)
    local wasteoflogo = gfx.image.new(20, 20, gfx.kColorBlack)
    wasteoflogo:draw(159, 10)
    gfx.drawRoundRect(25, 205, 170, 30, 5)
    gfx.drawRoundRect(205, 205, 170, 30, 5)
    gfx.fillRect(25, 205, 170, 30)
    gfx.fillRect(205, 205, 170, 30)
    playdate.graphics.setImageDrawMode(playdate.graphics.kDrawModeFillWhite)
    gfx.drawText("*Sign Up* Ⓐ", 75, 212)
    gfx.drawText('*Login* Ⓑ', 255, 212)
    gfx.popContext()
end

loginUISetup()

function playdate.update()
    gfx.clear()
    ui_background:draw(0, 0)

    if loginUIOn == 1 then
        if playdate.buttonIsPressed("left") then
            playdate.keyboard.show()
        end
    end
end