UMPC Web Browser

Browser the web with your finger with this web browser adapted to the format of an UMPC.

The UMPC (Ultra-Mobile PC) is a portable device running a standard version of Windows.

The UMPC Web Browser makes it easy to browse the web with a finger (or with a nail with some models of UMPC such as the Samsung Q1).

Touch the blue box always visible in the bottom right of your screen. Maintains your finger on the screen and move it to the left. Release your finger when you are over the desired icon.

Edit the file home.htm to add your own links and compile the application with MioFactory to create your own custom version of the UMPC Web Browser.

You can try this application with any version of Windows, but the application is optimized for a small screen (7").

Try umpc_webbrowser.exe

You can download and try the application.
This application is a prototype and some features may not work as expected on your computer.

File	umpc_webbrowser.exe
Size	551 Kb
Platform	Windows 98, ME, NT4, 2000, XP, Vista

Download Source Code

The full source code is provided as a Mio Archive File.
With MioFactory, you can open this archive file, edit the source code and test the result.

File	umpc_webbrowser.mioa
Size	67 Kb
Format	MioFactory Archive File

MioScript Source Code

MioScript is a scripting language aimed to create any kind of applications.
A free version of MioFactory is available to compile MioScript applications.

main.k

event.load
 extern.close("{APP_NAME}") // Only one instance allowed
 app.init("{APP_ID}", "{APP_NAME}", "{APP_VERSION}", "{APP_BUILD}", "{CREATE_LOG}")

 &home = "http://lab.mioplanet.com/lab_apps/umpc_webBrowser/home.htm"
 &home = path.rsc("home.htm")

 &monitor_touch = 0
 &width = 800//screen.monitor.width(&monitor_touch)
 &height = 400//screen.monitor.height(&monitor_touch)

 window.main.pos.now(screen.monitor.left(&monitor_touch),screen.monitor.top(&monitor_touch),&width,&height)
 window.main.canGoOut(true)
 window.main.movable(false)
 window.main.stayOnTop(false)

 // Web Browser
 &br = browser.createEx(main,&home,0,0,&width,&height)
 browser.&br.silent(true)
 browser.&br.newWindow(false)
 browser.&br.scrollbar.visible(false)

 &webPage_width = &width
 &webPage_height = &height

 // Mouse Info
 &last_id_under_mouse = null
 &last_mx = -1
 &last_my = -1
 &id_under_mouse = null

 touch.init()

 doEvent.checkWebPageSize()
event.end

function.close
 browser.&br.navigate("about:blank")
 window.main.visible(false)
 app.close()
function.end

event.terminate
 window.main.visible(false)
event.end

event.browser:beforeNavigate
 browser.&br.top(0)
event.end

// -------------------------- Adjusts the page height

event.checkWebPageSize
 &exScript="window.setTimeout("str.comma("document.location='mio:get_width_height='+document.getElementsByTagName('body').item(0).scrollWidth+'^^'+document.getElementsByTagName('body').item(0).scrollHeight")",100)"
 browser.&br.execScript(&exScript)
 doEvent.checkWebPageSize(100)
event.end

function.public:get_width_height(&size[])
 &page_width = &size[0]
 &page_height = &size[1]
 &browser_vsize = num.compute(&page_height)
 &browser_vsize = ?(&browser_vsize < &height*3, &height*3, &browser_vsize)
 &browser_vsize = ?(&browser_vsize > 10000, 10000, &browser_vsize)
 browser.&br.height(&browser_vsize)
function.end

touch.k

-//event.mouse:click
 browser.&br.top(browser.&wbr.top() + (240 - mouse.main.y()/2)/10)
 browser.&br.height(3000)
event.end

function.touch:init
 &interface_opacity = 100
 &scroll_width = 80
 &scroll_height = 140

 // Keyboard Window
 //&wKeyboard = window.create(true, KEYBOARD, false, true, false, false, false)

 //Buttons
 &wButtons = window.create(true, null, false, true, false, false, false)
 window.&wButtons.pos.now(50000,50000,0,0) // Out of screen
 &iButtons = draw.mem.createFromFile(path.rsc("buttons.bmp"))
 &iButtons_sel = draw.mem.createFromFile(path.rsc("buttons_sel.bmp"))
 &buttons_width = draw.&iButtons.width()
 &buttons_height = draw.&iButtons.height()
 window.&wButtons.shape.from.&iButtons(0,0,&buttons_width,&buttons_height,0,0,num.rgb(255,0,0))
 draw.&wButtons.copyFrom.&iButtons(0,0,&buttons_width,&buttons_height,0,0,null,null, null, true, num.rgb(255,0,0))
 draw.&wButtons.paint()
 window.&wButtons.stayOnTop(true)

 // Cursor Background
 &wCursor_back = window.create(true, null, false, true, false, false, false)
 window.&wCursor_back.pos.now(50000,50000,0,0) // Out of screen
 &iCursor_back = draw.mem.createFromFile(path.rsc("cursor_back.bmp"))
 &cursor_back_width = draw.&iCursor_back.width()
 &cursor_back_height = draw.&iCursor_back.height()
 window.&wCursor_back.shape.from.&iCursor_back(0,0,&cursor_back_width,&cursor_back_height,0,0,num.rgb(255,0,0))
 draw.&wCursor_back.copyFrom.&iCursor_back(0,0,&cursor_back_width,&cursor_back_height,0,0,null,null,null, true, num.rgb(255,0,0))
 draw.&wCursor_back.paint()
 window.&wCursor_back.stayOnTop(true)

 // Cursor
 &wCursor = window.create(true, null, false, true, false, false, false)
 window.&wCursor.pos.now(50000,50000,0,0) // Out of screen
 &iCursor = draw.mem.createFromFile(path.rsc("cursor.bmp"))
 &cursor_width = draw.&iCursor.width()
 &cursor_height = draw.&iCursor.height()
 window.&wCursor.shape.from.&iCursor(0,0,&cursor_width,&cursor_height,0,0,num.rgb(255,0,0))
 draw.&wCursor.copyFrom.&iCursor(0,0,&cursor_width,&cursor_height)
 draw.&wCursor.paint()
 window.&wCursor.stayOnTop(true)

 doEvent.mouseScanner()
function.end

// -------------------------------- MOUSE

event.mouseScanner
 if(keyboard.keyState(1) = true || keyboard.keyState(2) = true)

 // SCROLL
 &mx = mouse.&wCursor_back.x()
 &my = mouse.&wCursor_back.y()
 &id_under_mouse = get_objectAtPos(&mx, &my)

 // ----------- SCROLL --------------

 // Finger move on scroll bar
 if(&id_under_mouse = "SCROLL" && &is_scrolling = true)
 &h_dif = (&vscroll_start - &my) / 2
 &h_dif = &h_dif * num.abs(&h_dif * &h_dif)
 &new_top = num.compute((browser.&br.top() * 100 + &h_dif) / 100)
 &new_top = ?(&new_top < 0-&webPage_height-&height, 0-&webPage_height-&height, &new_top)
 &new_top = ?(&new_top > 0, 0, &new_top)
 browser.&br.top(&new_top)
 var.dec(alpha_buttons, 2, 0, 0)
 if.end

 // Finger touch the scroll bar
 if(&id_under_mouse <> &last_id_under_mouse && &id_under_mouse = "SCROLL")
 &alpha_scroll = 100
 &alpha_buttons = 100
 &is_scrolling = true
 &vscroll_start = &my
 if.end

 // Button
 if(&id_under_mouse = "BUTTONS")
 &is_scrolling = false
 &alpha_buttons = 100

 if(&last_mx <> &mx)
 &button = num.compute(mouse.&wButtons.x() / (draw.&iButtons.width() / 5))
 draw.&wButtons.copyFrom.&iButtons(0,0,&buttons_width,&buttons_height)
 draw.&wButtons.copyFrom.&iButtons_sel(&button*(draw.&iButtons.width() / 5),0,(draw.&iButtons.width() / 5),&buttons_height,&button*(draw.&iButtons.width() / 5),0)
 draw.&wButtons.paint()
 window.&wButtons.shape.from.&wButtons(0,0,&buttons_width,&buttons_height,0,0,num.rgb(255,0,0))
 if.end
 if.else
 if(&button <> null)
 draw.&wButtons.copyFrom.&iButtons(0,0,&buttons_width,&buttons_height)
 draw.&wButtons.paint()
 window.&wButtons.shape.from.&wButtons(0,0,&buttons_width,&buttons_height,0,0,num.rgb(255,0,0))
 if.end
 if.end

 &last_mx = &mx
 &last_my = &my
 &last_id_under_mouse = &id_under_mouse
 if.else
 if(&id_under_mouse = "BUTTONS")
 &button = num.compute(mouse.&wButtons.x() / (draw.&iButtons.width() / 5))
 if(&button = 0)
 public:close()
 if.end
 if(&button = 1)
 browser.&br.refresh()
 if.end
 if(&button = 2)
 browser.&br.goBack()
 if.end
 if(&button = 3)
 browser.&br.goForward()
 if.end
 if(&button = 4)
 browser.&br.navigate(&home)
 if.end
 if.end


 &id_under_mouse = null
 &last_id_under_mouse = null
 &is_scrolling = false

 var.dec(alpha_scroll, 1, 0, 0)
 var.dec(alpha_buttons, 2, 0, 0)
 if.end

 &main_x = window.main.left()
 &main_y = window.main.top()

 window.&wButtons.transparency(num.rgb(0,255,0), &alpha_buttons * 180 / 100)
 window.&wButtons.pos.now(&main_x + &width - &cursor_back_width - 20 - &buttons_width, window.main.top() + &height - 10 - &cursor_height/2 - &cursor_back_height/2, &buttons_width, &buttons_height)

 window.&wCursor_back.transparency(num.rgb(0,255,0), &alpha_scroll * 60 / 100)
 window.&wCursor_back.pos.now(&main_x + &width - &cursor_back_width - 10, &main_y + &height - &cursor_back_height - 10, &cursor_back_width, &cursor_back_height)

 // Cursor
 if(&is_scrolling = true)
 &vspos = mouse.&wCursor_back.y() - &vscroll_start
 &vspos = ?(&vspos < 5 - &cursor_back_height/2 + &cursor_height/2, 5 - &cursor_back_height/2 + &cursor_height/2, &vspos)
 &vspos = ?(&vspos > &cursor_back_height/2 - &cursor_height/2 - 3, &cursor_back_height/2 - &cursor_height/2 - 3, &vspos)
 if.else
 &vspos = 0
 if.end

 window.&wCursor.transparency(num.rgb(0,255,0), (&alpha_scroll * 30) / 100 + 80)
 window.&wCursor.pos.now(window.main.left()+ &width - &cursor_back_width/2 - &cursor_width/2 - 10, window.main.top() + &height - 10 - &cursor_height/2 - &cursor_back_height/2 + &vspos, &cursor_width, &cursor_height)

 window.&wButtons.stayOnTOp(true)
 window.&wCursor_back.stayOnTOp(true)
 window.&wCursor.bringToFront()

 doEvent.mouseScanner(20)
event.end

function.get_objectAtPos(&get_mx, &get_my)
 &get_id_under_mouse = ""
 if(mouse.&wCursor_back.isOverWindow() = true || mouse.&wCursor.isOverWindow() = true)
 &get_id_under_mouse = "SCROLL"
 if.end
 if(mouse.&wButtons.isOverWindow() = true)
 &get_id_under_mouse = "BUTTONS"
 if.end
 return(&get_id_under_mouse)
function.end

HTML and JavaScript Source Code

home.htm

<HTML>
<HEAD>
 <style>
 .default {FONT-SIZE: 12px; FONT-FAMILY: Verdana;}
 .title {FONT-SIZE: 14px; FONT-FAMILY: Verdana;}
 a:link { font-family:Verdana; text-decoration:none; font-size: 14px; color: #FFFFFF;}
 a:visited { font-family:Verdana; text-decoration:none; font-size: 14px; color: #FFFFFF;}
 a:hover { font-family:Verdana; text-decoration:underline; font-size: 14px; color: #FFFFFF;}
 .weblink { background-color:#222222; font-family:Verdana; font-size: 24px; color: #FFFFFF; border:1px solid #44AAFF; width:300; height:60}
 .weblink_click { font-family:Verdana; font-size: 24px; color: #FFFFFF; background-color:#880000; border:1px solid #FF8800; width:300; height:60}
 </style>
 <META HTTP-EQUIV="MSThemeCompatible" CONTENT="yes">
</HEAD>

<BODY onselectstart="return false" leftmargin=10 topmargin=10 style="background-color:#000000;">

<script for="btlink" event="onmousedown">
 this.className = "weblink_click"
</script>

<script for="btlink" event="onclick">
 document.location = this.url
</script>

<CENTER>
 
 Mioplanet
 
 Mioplanet Lab
 
Mioplanet Docs
 
 MioMusik
 
 Engadget
 
 AutoBlog
 
<CNN
 
 Robots-Dreams
 
</CENTER>

</BODY>
</HTML>

In the same topic

Finger Driven Applications

We experiment various applications to be used with a touch screen: home and business applications, single and multi-touch screens.

Finger Draw

Draw with your finger (capacitive touch screen recommended).