Hello friends. Lately we have seen a lot of vendors coming out with new OS, but what is really going to change is HTML5. Mozilla has done a groundbreaking work for creating an HTML5-based OS where any can submit app based on HTML5. HTML5 is something new which is changing the internet landscape and in time it will challenge Android and Apple operating systems since HTML5 is not clumsy and makes app development as easy as a cool breeze.
So what I have done is a written custom API specifically for Upcoming Mozilla Firefox OS. It works great in the Firefox Simulator and also as a standalone browser. You can couple it up if you want to test on a browser+Firefox OS simulator. This is a set of API specifically developed to complement the works done by Mozilla.
This Browser Simulator API helps users automatically set up a viewport("DIV" OR "CANVAS") check media support.
Automatically create Audio/Video Element with precision position and exposes API call to controls all aspect of the application. This API helps users create Viewport/Audio/Video Support, Video Playback, Camera/Mic Control with just a call to few function and modular control over all aspect of the elements created with through error checking. (Kindly use logs to check whats happening).
Please refer to the Mozilla Developers network on how to use Firefox OS and get some introduction towards HTML5
This code has a modular approach and relies a lot on prototyping provided in JavaScript, which is used to add functionalities/Features in this API.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js" >
</script>
</head>
<body>
<script>
var t = new initApp("div","siddDiv","siddClass",true);
t.applyDimension();
t.testDraw();
t.initVideo("siddVideo","siddVideoClass",360,480,true);
t.initLive(true,true,false,true);
</script>
</body>
</html>
If you loop at the code above its loop self explanatory.
But let's take a loop at how to work with this API. All users/dev who would like to use this code have to run from a <SCRIPT> inside a body. The main function here is initApp() which takes four parameters such as :
- What kind of element to use
- Element ID
- Style classes to be applied
- This parameters is used to display the simulator in a browser. If it is true
Then a default viewport would be created simulating the FireFox OS simulator.
In either case the output will always be shown in an actual FireFox OS Simulator.
In the case it is False then the display will not be output on a browser (but can still be seen in a Firefox Simulator). Please refer to Logs data to understand whats happening in each steps.
The second function, applyDimension(), applies width/height depending on the current Device type (if the Mozilla Firefox OS simulator comes with a bigger screen/size then this will adapt and init the screen automatically). However, a default value is used to make the 360x460 browser display. This could be changed by calling mozDev.maxWidth / mozDev.maxHeight.
The third function, testDraw(), checks if the current viewport (depending on eleType such as "canvas") supports 2D drawing. The results would be output on console and also on viewport with debug info.
The fourth function initVideo() adds video capability to the viewport. It has parameters such as
VideoID The ID of the video
videoClass : the stylesheet to be applied to this video width/height: the dimension to be applied. It cannot be greater than the screen size or else default values will get applied.
- It tells the video control whether or not to show (true or false)
The fifth function is initLive() which helps get a stream from the camera/mic and output to userSpace such as videoPlayer (canvas display is under development);
Points
Please note that all references are added to the variables mozDev. You can use the "." dot to access sub variables under it. All references and states are assigned to under mozDev from userMEdia, canvas context. It contains isDeviceReady or ScreenReady which helps determining the current state of the browser or simulator. Please explore. If you have any queries then please provide your valuable feedback as this is still under development. This set of API was working fine on Chrome/Mozilla Firefox/Firefox Simulator.
Event management work is still under development, but you can still add your own events while accessing mozDev.{ .... }. Events can be attached to it. mozDev is just a collection of references of all the elements added with their properties and capabilities.
Note: Please do define CSS classes as it is required to pass a css class for elements. You can link the classes using <link /> in a separate file. It could help control the visual attributes. For in-built CSS controls is also under development (do provide your feedback on it).
This Sets OF API enables users to set up html5 core exciting features by just calling few function.
For any error please report back. Use the manifest.webapp to load this into the Mozilla Firefox OS simulator. All done, enjoy! Stay posted for updates as this is still under development and might contain bugs. Please report any you find.
Submit an article or tip
