Unicode viewer

Code Sharing
1

Here is a Unicode viewer. You can use this if you want to get some Unicode characters in your code. I used it to get the skull. The blue section is for the normal ASCII characters. The 3 yellow sections are used for the Unicode characters. Slide the red lines in each section/sections you want to view. Tap above the red line to increase the value by 1, tap below the red line to decrease the value by 1. For Unicode characters, all 3 yellow sections need to be used. High order value on the left, low order value on the right. By increasing/decreasing the low order value, you can view all the characters in that set. I haven’t determined how the 3 values get combined to create the Unicode values that are found in the Unicode tables. @Simeon, do you know why this works and how the values get combined.

EDIT: See a couple of posts below for my compact version of a Unicode viewer.


-- Unicode viewer
-- by dave1707

displayMode(FULLSCREEN)
supportedOrientations(PORTRAIT_ANY)

function setup()
    a=0
    b=0
    c=0
    skull=string.char(226)..string.char(152)..string.char(160)
end

function draw()
    background(40, 40, 50)
    fill(193, 193, 193, 255)
    text(skull,600,820)
    
    fontSize(60)
    fill(249, 28, 13, 255)
    text("Unicode Viewer",200,950)
    fontSize(30)
    text("by dave1707",300,900)
    
    fontSize(30)
    textMode(CORNER)
    fill(255)
    fontSize(25)
    text(a,30,850)
    text(b,105,850)
    text(c,180,850)
    
    rect(25,60,50,768)
    rect(100,60,50,768)
    rect(175,60,50,768)
    
    fill(0,0,255)
    text("Normal Ascii range 32 - 126 (left)",300,800)
    rect(25,160,50,280)
    
    fill(255, 234, 0, 255)
    text("Unicode range 224 - 239 (left)",300,740)
    text("Unicode range 128 - 191 (middle)",300,700)
    text("Unicode range 128 - 191 (right)",300,660)
    rect(25,734,50,46)
    rect(100,446,50,192)
    rect(175,446,50,192)
    
    fill(255,0,0)
    rect(25,a*3+60,50,4)
    rect(100,b*3+60,50,4)
    rect(175,c*3+60,50,4)
    
    fontSize(140)
    if a<127 then
        str=string.char(a)
    else
        str=string.char(a)..string.char(b)..string.char(c)
    end
    text(str,430,400)
end

function touched(t)
    -- left slider
    if t.x>25 and t.x<75 then
        if t.state==MOVING then
            a=math.floor(t.y/3-20)
        elseif t.state==BEGAN then
            if t.y>a*3+40 then
                a=a+1
            else
                a=a-1
            end
        end
        if a<0 then
            a=0
        elseif a>255 then
            a=255
        end
    end  
     
    -- middle slider
    if t.x>100 and t.x<150 then
        if t.state==MOVING then
            b=math.floor(t.y/3-20)
        elseif t.state==BEGAN then
            if t.y>b*3+40 then
                b=b+1
            else
                b=b-1
            end
        end
        if b<0 then
            b=0
        elseif b>255 then
            b=255
        end
    end 
     
    -- right slider  
    if t.x>175 and t.x<225 then
        if t.state==MOVING then
            c=math.floor(t.y/3-20)
        elseif t.state==BEGAN then
            if t.y>c*3+40 then
                c=c+1
            else
                c=c-1
            end
        end
        if c<0 then
            c=0
        elseif c>255 then
            c=255
        end
    end 
end
2

Hello @Jmv38 and @Dave1707. I’ve also shared my own experiments with viewing Unicode, here. (Posting it as a new discussion allows me to keep track of my various coding experiments more easily.)

3

.@mpilgrem i built my code on top of one of you august 2012 post. i thought i had put a credit to you in my code, but looks like i forgot. Sorry for that!

4

Thanks @Jmv38 for sharing your code. After looking at the table below, I can now see why the 3 values for my Unicode viewer had to be in the range of 224-239, 128-191, and 128-191. I wasn’t sure why they had to be that. Also, since I was only using 3 values, there are a lot more codes that I’m not showing. I kind of wrote my viewer without really knowing what was going on with Unicode. The table explains it all to me now.

-- Unicode code point to UTF-8 format string of bytes
--
-- Bit Last point Byte 1   Byte 2   Byte 3   Byte 4   Byte 5   Byte 6
-- 7   U+007F     0xxxxxxx
-- 11  U+07FF     110xxxxx 10xxxxxx
-- 16  U+FFFF     1110xxxx 10xxxxxx 10xxxxxx
-- 21  U+1FFFFF   11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
-- 26  U+3FFFFFF  111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
-- 31  U+7FFFFFFF 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
5

.@Dave1707 for this table you can credit @Andrew_Stacey. I think i know even less than you about unicode stuff… Just wanted to see and use all available built in icons.

6

Hi dave! I cant believe it: i’ve been working all this evening on a unicode character viewer and short list! We are working exactly on the same thing at the same moment. But my post will be ready tomorrow only.
I found an old @Mpilgrem code to start with, itself using a @Andrew_Stacey’s UnicodeToUTF8 converter… Both quite nice, btw.

7

Here is a more compact Unicode viewer based on my code above. Just change the parameter values to show the different sets.

EDIT: added offset value under each character.


-- Unicode viewer
-- by dave1707

supportedOrientations(LANDSCAPE_ANY)

function setup()
    parameter.integer("a",224,239,226)
    parameter.integer("b",128,191,152)
end

function draw()
    background(40, 40, 50)
    fontSize(30)
    text("Unicode viewer  ---  by dave1707",WIDTH/2,740)
    fill(225)
    offset=128
    for y=1,8 do
        for x=1,8 do            
            str=string.char(a)..string.char(b)..string.char(offset)
            fontSize(80)
            text(str,5+x*85,730-y*85)
            fontSize(12)
            text(offset,5+x*85,690-y*85)
            offset=offset+1
        end
    end
end
8

Hi @Dave1707! Here is my version: my idea is a bit different: i just want to get the list of unicode characters that can be useful for me. So i can browse the unicode characters (buttons and top row), select/deselect then (touch the chars) and save them in the ‘output’ tab in a string. (save button). Nowni can copy the output tab in another project.



--# Main
-- test char
-- build by JMV38, on top of others posts (see below)
displayMode(FULLSCREEN)

strOut = ""

function setup()
    t = 0
    base = 0
    ni,nj = 20,40
    h = 40
    i0,j0 = 100,70
    iOffset = -30
    yInfoBase = HEIGHT  -25
    yBase = HEIGHT  -75
    ni = math.floor((HEIGHT-2*i0)/h)
    nj = math.floor((WIDTH-2*j0)/h)
    init0()
    refreshChars = true
    charlist()
    x0,y0,r0 = WIDTH/2,50,25
    xL,yL,r0 = 25,100,25
    xR,yR,r0 = WIDTH-25,100,25
    tBase=0
    changeBase=0

    color1 = color(255, 0, 0, 255)
    color2 = color(0, 23, 255, 255)
    c = color1
    rColor = color1
    lColor = color1
    rectMode(RADIUS)
    img0 = image(h,h)
    setContext(img0)
        background(127, 127, 127, 255)
        fill(0, 0, 0, 255)
        rect(h/2,h/2,h/2-1,h/2-1)
    setContext()
    img1 = image(h,h)

    setContext(img1)
        background(127, 127, 127, 255)
        fill(24, 27, 161, 255)
        rect(h/2,h/2,h/2-1,h/2-1)
    setContext()

    spriteMode(CENTER)
end
function drawList()
    for i = 1,ni do
        for j = 1,nj do
            local k = 1 + (i-1)*nj + j-1
            if list[k] then sprite(img1, j0+j*h-h/2, i0+i*h  + iOffset) 
            else sprite(img0, j0+j*h-h/2, i0+i*h + iOffset)  end
        end 
    end
end
function drawChar()
    for i = 1,ni do
        for j = 1,nj do
            local k = 1 + (i-1)*nj + j-1
            text(charTable[k], j0+j*h-h/2, i0+i*h + iOffset) 
        end 
    end
end
function drawBase()
        for j = 1,nj do
            if baseList[j] then sprite(img1, j0+j*h-h/2, yBase) 
            else sprite(img0, j0+j*h-h/2, yBase)  end
            text(baseChar[j], j0+j*h-h/2, yBase) 
        end 
end
function checkCharTouched(t)
    local j,i =  math.floor((t.x-j0)/h+1) , math.floor((t.y-i0-iOffset)/h+0.5) 
    if (i>0) and (i<=ni) and (j>0) and (j<=nj) then
        local k = 1 + (i-1)*nj + j-1
        if ElapsedTime < wait[k] then return end
        v =  list[k]
        v = not v
        list[k] = v
        wait[k] = ElapsedTime + 0.5
    end
end
function checkBaseTouched(t)
    if ElapsedTime < tBase then return end
    local j,y =  math.floor((t.x-j0)/h+1) , (t.y-yBase) 
    if math.abs(y)<h/2 and (j>0) and (j<=nj) then
        local k = 1 + j-1
        base =  baseValue[k]
        refreshChars = true
        tBase = ElapsedTime + 0.5
        for p = 1,nj do 
            if baseValue[p] == base 
            then baseList[p] = true 
            else baseList[p] = false 
            end
        end 
    end
end
function charlist()
    if not refreshChars then return end
    local new={}
    for i = 1,ni do
        for j = 1,nj do
        table.insert(new,unicode2UTF8(base*ni*nj+1+(i-1)*nj+(j-1))) 
        end 
    end
    refreshChars = false
    charTable = new
    init0()
end
function init0()
    list={}
    wait = {}
    baseList = {}
    baseChar = {}
    baseValue = {}
    collectgarbage()
    for i = 1,ni do
        for j = 1,nj do
        table.insert(list,false) 
        table.insert(wait,0) 
        end 
    end
        local dbase = ni*nj
        local base0 = base - math.floor(nj/2)
        local v,jbase
        if base0<0 then base0=0 end
        for j = 1,nj do 
            jbase = (j-1) + base0
            table.insert(baseValue,jbase) 
            table.insert(baseChar,unicode2UTF8( jbase*dbase +1 ) )
            v = false
            if jbase == base then v = true end
            table.insert(baseList,v) 
        end 

end

function save()
    c = color2
    t = ElapsedTime + 1
    local temp = {}
    local lines = {}
    local buf
    for i=1,#list do
        if list[i] then table.insert(temp,charTable[i])
        end        
        if #temp>=20 then
            buf = "strOut = strOut .. '" .. table.concat(temp,"") .. "'\\r"
            table.insert(lines,buf)
            temp = {}
        end
    end
    if #temp>0 then
            buf = "strOut = strOut .. '" .. table.concat(temp,"") .. "'\\r"
            table.insert(lines,buf)
            temp = {}
    end
    local tab = "output"
    strOut = readProjectTab(tab)
    strOut = strOut .. table.concat(lines,"")
    saveProjectTab(tab,strOut)

end
function checkBase()
    if ElapsedTime < tBase then return end
    if changeBase~=0 then
        base = base + changeBase
        if changeBase == 1 then rColor = color2 end
        if changeBase == -1 then lColor = color2 end
            refreshChars = true
            tBase = ElapsedTime + 0.5
    end
end
function touched(touch)
    if touch.state == BEGAN then

        if math.abs(touch.x-xL)<r0 and math.abs(touch.y-yL)<r0*2 then
            changeBase = -1
            lColor = color2
        end

        if math.abs(touch.x-xR)<r0 and math.abs(touch.y-yR)<r0*2 then
            changeBase = 1
            rColor = color2
        end

        if math.abs(touch.x-x0)<r0*2 and math.abs(touch.y-y0)<r0 
        then save() end
    end
    checkCharTouched(touch)
    checkBaseTouched(touch)
    if touch.state == ENDED or touch.state == CANCELLED then 
        changeBase = 0 
        rColor = color1
        lColor = color1
    end
end
-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)
    drawList()
    drawChar()
    drawBase()
    if ElapsedTime>t then c = color1 end
    fill(c)

    rect(x0,y0,r0*2,r0)
    fill(lColor)
    rect(xL,yL,r0,r0*2)
    fill(rColor)
    rect(xR,yR,r0,r0*2)
    fill(255, 255, 255, 255)
    text("SAVE",x0,y0)
    text("<<",xL,yL)
    text(">>",xR,yR)
    -- This sets the line thickness
    --strokeWidth(5)
    noStroke()
    fontSize(20)
    font("AppleColorEmoji")
    -- Do your drawing here
    fill(253, 253, 253, 255)

    textWrapWidth(WIDTH*0.95)
    text(tostring(base*ni*nj+1).." - "..tostring((base+1)*ni*nj),WIDTH/2,yInfoBase)
    checkBase()
    charlist()
end
-- Unicode code point to UTF-8 format string of bytes
--
-- Bit Last point Byte 1   Byte 2   Byte 3   Byte 4   Byte 5   Byte 6
-- 7   U+007F     0xxxxxxx
-- 11  U+07FF     110xxxxx 10xxxxxx
-- 16  U+FFFF     1110xxxx 10xxxxxx 10xxxxxx
-- 21  U+1FFFFF   11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
-- 26  U+3FFFFFF  111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
-- 31  U+7FFFFFFF 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
--
-- However, largest integer in Codea's Lua is 0x7FFFFF (23 bit)
-- With acknowledgement also to Andrew Stacey's UTF-8 library
function unicode2UTF8(u)
    u = math.max(0, math.floor(u)) -- A positive integer
    local UTF8
    if u < 0x80 then          -- less than  8 bits
        UTF8 = string.char(u)
    elseif u < 0x800 then     -- less than 12 bits
        local b2 = u % 0x40 + 0x80
        local b1 = math.floor(u/0x40) + 0xC0
        UTF8 = string.char(b1, b2)
    elseif u < 0x10000 then   -- less than 16 bits
        local b3 = u % 0x40 + 0x80
        local b2 = math.floor(u/0x40) % 0x40 + 0x80
        local b1 = math.floor(u/0x1000) + 0xE0
        UTF8 = string.char(b1, b2, b3)
    elseif u < 0x200000 then  -- less than 22 bits
        local b4 = u % 0x40 + 0x80
        local b3 = math.floor(u/0x40) % 0x40 + 0x80
        local b2 = math.floor(u/0x1000) % 0x40 + 0x80
        local b1 = math.floor(u/0x40000) + 0xF0
        UTF8 = string.char(b1, b2, b3, b4)
    elseif u < 0x800000 then -- less than 24 bits
        local b5 = u % 0x40 + 0x80
        local b4 = math.floor(u/0x40) % 0x40 + 0x80
        local b3 = math.floor(u/0x1000) % 0x40 + 0x80
        local b2 = math.floor(u/0x40000) % 0x40 + 0x80
        local b1 = math.floor(u/0x1000000) + 0xF8
        UTF8 = string.char(b1, b2, b3, b4, b5)
    else
        print("Error: Code point too large for Codea's Lua.")
    end
    return UTF8
end

--# output
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????'
strOut = strOut .. '??????'
strOut = strOut .. '??'
strOut = strOut .. '????????????????????'
strOut = strOut .. '?????????????'
strOut = strOut .. '???????????'
strOut = strOut .. '??????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '?????????????????'
strOut = strOut .. '??'
strOut = strOut .. '???????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '??????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '???????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '????????????????????'
strOut = strOut .. '??????????????'
strOut = strOut .. '?'
strOut = strOut .. '?'
strOut = strOut .. '?'
9

The table has its origins in the underlying specifications for UTF-8. You may find the Wikipedia article here of interest.