i want to try processing.js on an iOS application,
i have checked the projects on
http://procoding.audiocommander.de/ and
http://luckybite.com/iprocessing/
but none of them have an actual working example, so i went to create one...
SO... I have created a project and uploaded in
https://github.com/mako34/processing_iOS
my understanding is that all I need is just a wrapper for html5 canvas and js, for the
processing-1.4.1.js
to work??
my index.html works fine in a browser, not on the device!
my canvas works fine drawing a line on this test template
my js works fine on this test template
but doesnt work on the iphone actual web view,
So what is missing to make the sketch work?
thanks a lot!
here my index.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="jquery-1.6.2.min.js"></script>
<script defer src="script.js"></script>
<script src="processing-1.4.1.js"></script>
</head>
<body id="body">
<div id="container">
<div id="main" role="main">
jQuery Alert<br />
Objective-C Alert<br />
Take a picture<br />
</div><!-- #main -->
<canvas data-processing-sources="example.pde" style="border: 1px solid black;"></canvas>
<img id="testImage" src="iphonebattery.jpeg" />
<canvas id="myCanvas" width="320" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
</script>
</div><!-- #container -->
</body>
</html>
First off-- you don't want to have two canvas tags. I recommend checking out the actual ProcessingJS website for better implementation: http://processingjs.org/
I have some tutorials on setting up Processing to compile to iOS and preparing your iDevice:
http://ericmedine.com/processing-for-ios/
Hope this helps!
Related
I am having trouble getting flipbox to work. It displays, but I can't get the day/month/year to roll or move at all. It's frozen.
Same if I change the mode to timeflipbox, or durationflipbox -- they display when I click them but don't respond to any mouse or keyboard activity.
code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Single page template</title>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'>
<link rel='stylesheet' type='text/css' href='http://cdn.jtsage.com/datebox/latest/jqm-datebox.min.css'>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js'></script>
<script src='jqm-datebox.core.min.js'></script>
<script src='jqm-datebox.mode.flipbox.min.js'></script>
</head>
<body>
<div data-role='page'>
<div data-role='content'>
<input type="text" data-role="datebox" data-options='{"mode":"flipbox"}'>
</div>
</div><!-- /page -->
</body>
</html>
What's wrong with this code for the flipbox to be frozen? The only thing I can think of is that the js references are off, but I just downloaded them and I'm pretty sure they are current.
Any ideas?
figured it out... I just copied/pasted the css/js references from JT Sage's Datebox page source: http://dev.jtsage.com/jQM-DateBox/
I have created a simple application in Worklight 6.0 with jquery mobile 1.3.2.
This is an single page application with Header, Content and Footer. Necessary jquery mobile javascript and css files are included.
Given below is the html file from the application.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>DemoApp</title/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
<link rel="shortcut icon" href="images/favicon.png"/>
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
<link rel="stylesheet" href="css/DemoApp.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"/>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
<div data-role="header"><h1>Header</h1></div>
<div data-role="content">Content</div>
<div data-role="footer" data-position="fixed"><h1>Footer</h1></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/DemoApp.js"></script>
<script src="js/messages.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</body>
</html>
I have created the Windows Phone 8 Environment and built the worklight project. With the help of Microsoft Visual Studio Express 2012 for Windows Phone the application is launched in windows phone emulator.
When I scroll the screen I am getting the following response.
Please suggest a way to solve this issue.
If what you want is fixed header/footer with the content in between scrollable, then try:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h3>Header</h3>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h3>Footer</h3>
</div>
</div>
The tap-toggle setting is to disable hiding the header/footer on tap, but I haven't been able to get JQM fixed headers/footers to behave at all unless I disable it.
I've also found on Windows Phone 8, the footer will position itself too high. So I have to add the following to the CSS:
#media screen and (orientation: portrait) {
#-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
Can you show us the app CSS that you are using DemoApp.css. Try disabling the default css in it and running again.
The problem seems to be of the css having been told that the screen size is something bigger than the actual device size.
Regards,
Elvis
I have a header, in that i am trying to user a icon on the left side corner. I have used jquerymobile icons in that page. But i cant able to see the icon symbol, only empty icon i displayed. Find the attached screenshot for reference. below is the code from html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"> </script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header" data-theme="a">
<h1>Home</h1>
</div>
</div>
</body>
</html>
Just tried it in a fiddle and it seems to work OK for me. http://jsfiddle.net/LYCjv/
Might be worth downloading jQueryMobile hosting the files on your own server and referencing the css/js files locally, might be some issue with the CDN?
I am new to ios phonegap . I started to cordova based application.My code does not show header and footer in emulator but works fine in browser. My index.html code is something like this.
<!doctype html>
<html>
<head>
<title>JQM Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
</head>
<body >
<div data-role="page">
<div data-role="header" data-position="fixed" >
<h1>Header</h1>
</div>
<div data-role="content">
<p>Welcome</p>
...
</div>
<div data-role="footer" data-position="fixed" >
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Am i missing something?
My ios version is 5.1.I have also added URL in Cordova.plist,still not working.
You need to add the remote URL code.jquery.com to the whitelist. If you expect your app to be used offline it is best to include the JS files as part of your app and use the local copy.
To add the URL to the whitelist edit the Cordova.plist file in your project and add code.jquery.com under ExternalHosts.
What's the version of IOS did you try on?
It's well known and documented by JQM team, that old platforms like IOS 4.3 do not support fixed toolbars positioning out of the box. You'll need to polyfill.
Just look at their docs: http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed.html
Also don't forget to update *.plist as already mentioned in this topic.
I tried it on firefox, chrome, and mobile safari. When I add data-inset="true" to lists it will correctly round the corners of the list, but it does not add the 1em margin on either side as it should. I can't figure this out. It even does it on a simple boilerplate page with nothing in it but the list. eg:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<ul data-role="listview" data-theme="c" data-inset="true">
<li>first</li>
<li>second</li>
</ul>
</body>
</html>
does not show correctly. Thanks for any help.
Ok, I figured it out. To get this to work I just had to wrap the body contents in a <div> with data-role="content". Works fine now.