OK, we’re ready to go. Start your VM and open Aptana Studio (don’t know how? see previously)
In File->New->Web Project->Basic Web Template add the name ‘Lithophane’
On the Lithophane project, create a CSS and a JS folder (right click->New->Folder) under CSS create main.css and under JS, main.js (right click->New->File). Double click on Index.html and you’re ready to start programming.
The files main.css and main.js will contain our style sheet and JavaScript respectively, index.html is the main web page. First, we need to include these files into our HTML page so that we can reference the definitions within them.
Now to check it all works. Replace the default HTML (in Index.html) which probably looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>New Web Project</title>
</head>
<body>
<h1>New Web Project Page</h1>
</body>
</html>
With this:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Lithophane Generator</title> <link rel="stylesheet" href="css/main.css"> <!--our style sheet--> </head> <script src="js/main.js"></script> <!--our Java Script--> <body onload="initPage();"> <!--call function when page loaded--> <h1 id="pageheading">Lithophane Generator</h1> </body> </html>
Add the following to the main.css file
body {
color : #008; // change colour of body section
}
And the following to the main.js file
function initPage() { // called on page load
// find heading in document and change the displayed text
var headingText=document.getElementById('pageheading');
headingText.innerHTML="2D->3D Lithophane Generator™";
}
Save all the files, select the tab containing index.html and click the green run icon 
to see that you have everything setup correctly.
The browser should start and the web page should look like this:
The title text has been changed by the JavaScript and the colour has been set to blue by the CSS. So everything is working 🙂
Time to start some real programming!
Hi,
I try to run this
https://3dp.rocks/lithophane/
on mobile devices but it doesn’t work.
how can I fix this issue?
Thank You.
This application currently only runs in a desktop browser, The next version will run on mobiles, I’ll send you an email when it’s available.
Thank you MakeAlot
I await your news and compliments for your work!
Hi Nicola,
I have temporarily added a button so that you can take a picture on a mobile device, the site is not optimised for mobile use, but you can at least get a photo converted to an STL.
Hope that helps for now.
This resource is freakin’ awesome, and I use it a lot… How can I help make sure this site stays up and available (for free) when there are no ad’s to click (THANK YOU) etc., yet I know I consume bandwidth and server resources!?
On a similar note, I know this is open source, have you ever considered packing it up and writing a blog on how to ‘run’ this on a home server? Maybe wrapped up with an apache server (similar to how I can simply take SVN Server and install and run an svn server off of my local machine?)