3d printed iPhone stencil for protyping

I got my Printrbot simple about 6 months ago, and love it. Ever since I have got it I have been trying to figure out something cool to make. Last week I saw an ad for an iPhone stencil made out of metal, and thought is was pretty sweet http://www.uistencils.com/products/iphone-stencil-kit. I thought to myself hey I have a 3d printer, I can make things like this! I download things from thingiverse all the time how hard could it be! Well it wasn’t easy and I’m sure there are better ways of doing this. If you enjoy this awesomeness please follow me on twitter and leave a comment bellow! I’m always looking for friends online, and love to talk about mobile dev  and other cool stuff, so follow me already!

Download the .STL file:
(I suffered so you don’t have to)
iphone.stl

Create an iPhone stencil

First thing I did was download a picture of an iPhone 5s and open it in photoshop.
Screen Shot 2014-08-14 at 4.21.57 PMNext remove everything we don’t need in the image and save it as a png.
Screen Shot 2014-08-14 at 4.19.25 PM

Next I used a program called sketch up where can be downloaded here: http://www.sketchup.com/ . Open your png in sketch up and trace the entire image using the line and arch tools. This is the really lame part and takes forever. Once the image is outlined use the push/pull tool to give the selection thickness. Once you have something you like export it as an stl file and you are ready to print!

Screen Shot 2014-08-14 at 4.34.15 PMFinally open you .stl file in your perfered 3d printing program. I use Repetier with my Printerbot simple. Send the print job to your printer and that it! Unless you are terrible at configuring your printer and it takes like 20 print attempts to figure out why your printer isn’t doing what you want and you really start to wonder why you even bought the dang machine in the first place.

Screen Shot 2014-08-14 at 4.34.54 PM

So I couldn’t get my printer to work like I wanted to and modified the object to be only a couple of layers. It turned out pretty good. My PrintrBot simple only has a 100 mm x 100 mm x 100 mmx print area so the stencil isn’t actually to size but I am always writing my app ideas down in a note book I have and I actually like the smaller size to save space.

 

Sencha Touch container tap events!

Sencha Touch is awesome, but sometimes can be frustrating. Some components just don’t have the events that you need. For example you can’t add a tap listener for a container inside of your controller’s config. I know you can add a listener on the component in the view, but I hate doing this because it moves controller logic in your view.

How do you get a container to listen for a tap event?

Since the component doesn’t have a tap listener we can add one to the components element object! Attaching a listener to the component’s element object gives you access to pretty much any event you will need. In this demo I’m going to use the tap event.

The view with the container component

Ext.define("MainView", {
    extend: 'Ext.Container',
    xtype: "main",
    name: "MainView",
    config: {
        layout: {
            type: 'fit',
            align: 'center',
            pack: 'center'
        },
        items: [
           {
            xtype: 'container',
            items: [{
                xtype: 'container',
                name:'clickableContainer',
                html: 'Hello there click me!'
            }, {
                xtype: 'container',
                html: 'Not clickable'
            }]
        }]
    }
});

The controller

Ext.define('MainController', {
	extend: 'Ext.app.Controller',
	config: {
		
	    control: {
	        MainView:{
		    initialize:'init'
		},
            },
	    refs: {
		MainView:"container[name=clickableContainer]",
	    }
	},
	init:function () {
          var containerView = Ext.ComponentQuery.query('container[name=clickableContainer]')[0];
	  var containerViewEl = containerView.element;
          containerViewEl.on('tap', 
            function( event, node, options, eOpts ){
         	alert('clicked the container');
    	    }
          );
	}
});

First thing we do is set up an init method, which is where we get a reference to the container view. Once we have the container view we can get the component’s element and use the on method to set up a listener (you could substitute the onBefore or onAfter method here), and just like that we have a container with a tap event!

Hello And Welcome

Sledge Dev is a web and mobile development studio that specializes in custom development solutions. Our goal is to build awesome apps, that a lot of people use. We will try to post at least one article a day whether its just a quick note about something cool we learned or a full tutorial on building a mobile app. We are very excited to get started and hope you guys stop by every day to check in on us and see what we are working. We send out newsletters every couple of months, and if you are interested in signing up please fill out the form in the side bar.