WebGadget for App-Developers... (now at GitHub.org)
Posted: Sun Apr 28, 2013 9:16 am
Hi there,
this currently works on Mac OS only (tested with Mountain Lion, hope it will work on Lion or earlier, too - Feedback Appreciated
JS-Esprit (w.i.p., also the name) is a Wrapper, which adds PB-Functions to the integrated WebGadget. You may put some links in a certain format to call PB-functions, like PlaySound, and such. Currently doing more research, but functions are coming along quite nicely. Have a look
In a nutshell: Code your HTML-Pages, including JavaScript, CSS, jQuery, what you like. Add some calls to OS X-functions, e.g. playing sounds, which are served by PureBasic, either embedded or added by external libraries. The example will give you a first look, at what Development would be like. I will probably change the mycall: to reflect libraries, e.g. window:, sound:, etc.
Edit for 0.0.4: Changed the calling to JS_Caller(thelibrary,thefunction,thetarget,theorder) which would be e.g. JS_Caller('Test','Add2Values','add1','a=20&b=10'); from within HTML.
Download: http://pb.quadworks.de/JS-Esprit-0.0.4.app.zip
Feedback appreciated!
PureBasic will intercept mycall: to get the function, and parameters. This one will bring up an OS X MessageRequester (inside PureBasic, that is):
Current Features - many thanks to Shardik, Wilbert, WilliamL - http://www.purebasic.fr/english/viewtop ... 95#p386829
this currently works on Mac OS only (tested with Mountain Lion, hope it will work on Lion or earlier, too - Feedback Appreciated
JS-Esprit (w.i.p., also the name) is a Wrapper, which adds PB-Functions to the integrated WebGadget. You may put some links in a certain format to call PB-functions, like PlaySound, and such. Currently doing more research, but functions are coming along quite nicely. Have a look
In a nutshell: Code your HTML-Pages, including JavaScript, CSS, jQuery, what you like. Add some calls to OS X-functions, e.g. playing sounds, which are served by PureBasic, either embedded or added by external libraries. The example will give you a first look, at what Development would be like. I will probably change the mycall: to reflect libraries, e.g. window:, sound:, etc.
Edit for 0.0.4: Changed the calling to JS_Caller(thelibrary,thefunction,thetarget,theorder) which would be e.g. JS_Caller('Test','Add2Values','add1','a=20&b=10'); from within HTML.
Download: http://pb.quadworks.de/JS-Esprit-0.0.4.app.zip
Feedback appreciated!
Code: Select all
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
<META NAME="GetViewPort" CONTENT="10,10,400,400">
<META NAME="PreLoadLibraries" CONTENT="Sound">
<META NAME="BackGroundLoop." CONTENT="loop.ogg">
<link type="text/css" rel="stylesheet" href="css/uibase/jquery-ui.min.css" />
<script src='js/jquery-2.0.0.min.js'></script>
<script src='js/ui/jquery-ui.min.js'></script>
<style>
a:link,a:visited,a:active,a:hover {cursor:pointer;color:#000000;text-decoration:none;text-underline:none;}
div#hideprogressbar { position:fixed;top:0;left:0;right:0;bottom:0;visibility:hidden;opacity:0.8;background:-webkit-linear-gradient(-45deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);}
.ui-dialog {font-size: 80%;}
</style>
<script>
function getMetaContents(mn) { var m = document.getElementsByTagName('meta');for(var i in m) { if(m[i].name == mn) { return m[i].content; } } }
function getHTMLContents(name) { return document.getElementsByTagName('head')[0].innerHTML; }
function getURLOfContent(id) { return document.getElementById(id).src; }
function JS_Caller(thelibrary,thefunction,thetarget,theorder) { window.location=thelibrary + ':' + thefunction + "?" + theorder + '&target=' + thetarget; }
function getImageData(id) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById(id);
ctx.drawImage(img,0,0);
var imageData = ctx.getImageData(0,0,img.width,img.height);
return imageData;
}
</script>
</head>
<body>
<h3>Tests</h3>
<div id="check">What does Simon Say?</div><br>
<a id="add1" onmouseup="JS_Caller('Test','Add2Values','add1','a=20&b=10');">20*10</a><br>
<a id="add2" onmouseup="JS_Caller('Test','Add2Values','add2','a=100&b=50');">100*50</a><br>
<a id="checker" onmouseup="JS_Caller('Test','SimonSays','check','Answer=Giddy up, hands in the air!');">Simon Says!</a><br>
<h3>Links, Mail, etc.</h3>
<a id="wechsel" href="http://www.purebasic.com">PureBasic-Home</a><br>
<a id="mail" href="mailto:test@domain.com">Send Mail</a><br>
<h3>Sound</h3>
<a onmouseup="JS_Caller('Sound','PlayFile','','File=click.wav');" "Play external Sound (wav)">Play click.wav</a><br>
<a onmouseup="JS_Caller('Sound','PlayFile','','File=click.mp3');" "Play external Sound (mp3)">Play click.mp3</a><br>
<a onmouseup="JS_Caller('Sound','PlayFile','','File=click.ogg');" "Play external Sound (ogg)">Play click.ogg</a><br>
<!-- <a href="Sound:PlaySound?Type=URL&File=http://pb.quadworks.de/click.mp3" "Play Internet Sound (mp3)">Play click.mp3 (from Internet)</a><br>-->
See more under Internal->Sound
<h3>Image</h3>
<img id="spaceimage" src=""><br>
<a onmouseup="JS_Caller('Image','LoadImage','spaceimage','File=space-icon.jpg');" "Load Image">Load Image</a><br>
<a onmouseup="JS_Caller('Image','CallImageLib','spaceimage','file=spaceimage');" "Create Image from Library">Create Image from Library</a><br>
</body>
</html>Code: Select all
<a href='mycall:ShowAlert?Title=Title&Message=Jo, show me the way to HTML!&Icon=Note' title="Javascript-Alert with Note-Icon">Show Alert with Note-Icon</a>Code: Select all
; 0.0.4
; - new internal library (Window, Requester, Systemsounds)
; - load libraries when a function is needed (can be preloaded, when needed)
; - downloads of (zipped) Libraries are processed automatically, when Library is missing
; - CTRL-Q to Quit
; - added quite of few Apple-Icons to OK-Requester
; - added Apple-system-sounds
; - added Background-Sound/Musik, looped
; - Added jQuery/jQuery.ui
; - Added "internal" jQuery-UI-Example - thanks to Shardik
; 0.0.3
; - renamed mycall: to
; - window (everything regarding windows)
; - sound (sound, and music)
; - system (system-calls, alerts, etc)
; - test (funny things, for testing)
; - setWindowAlpha, DoResizeWindow (animated), fadeWindow (optional to.f) (window-library)
; - setAppIcon,setAppBadge,ProgressIndicator (system)
; - Message-Requester (custom Image, uses CoreImage)
; - ProgressIndicator has optional an Fullscreen-Mode with TimeOut of 20 seconds (can be set)
; - uses CoreAudio (all formats of OS X), PB (for ogg and flac)
; - added error-checking for Plugin-System - if not functional, it will be ignored
; - added meta to header: <META NAME="Library" CONTENT="Sound,SQLite"> to load Libraries
; <META NAME="WindowSize" CONTENT="10,10,400,400"> to load Set Window-Size (x,y,w,h)
; - fetch info from header, see above
; - new HTML5-Example: jQuery-UI, thanks to Shardik - http://www.purebasic.fr/german/viewtopic.php?f=11&t=25816&start=60
; - Logfiles: in contents/logs, creates ZIPs of current Logfile every 128kb
; - Load Libraries on start from HTML
; - Set myViewPort-Size on start from HTML
; - Image-Library-Test, returns path to created image
Version 0.0.2
- fullscreen-support on Mountain Lion (from WebView)
- Message-Requester (from WebView, including 4 Icons)
- Set red dot (from WebView)
- Live-Window-Resize
- added 3 HTML5-Examples
Version 0.0.1
- gave this a "name": JS-Esprit (JavaScript-Esprit) - don't take the name for real
- Plugin-System, currently only for Sound-Support (uses PB-Functions to play wav, ogg, flac) to play Default-sounds, and sounds loaded from hard disk - the WebGadget is not used to play the Sound or Music
- moved index.html to its own directory (have a look at the .app-bundle, contents/resources)