Xcode 6.2: UIWebView content cut off inexplicably

Discussion in 'iOS Programming' started by moonman239, Mar 19, 2015.

  1. moonman239, Mar 19, 2015
    Last edited: Mar 19, 2015

    moonman239 macrumors 68000

    Joined:
    Mar 27, 2009
    #1
    I have an HTML file that shows a racecar going around a track. The file looks fine in Safari, but in my app all I see is a small window containing a fraction of the track, even though the UIWebView is supposedly covering the whole view.

    Here's the HTML code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content = "initial-scale = 1.0">
    <title>racecar</title>
    
    <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
    <script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
    <script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
    <script>
    (function (lib, img, cjs) {
    
    var p; // shortcut to reference prototypes
    
    // library properties:
    lib.properties = {
    width: 1024,
    height: 768,
    fps: 33,
    color: "#00CC00",
    manifest: []
    };
    
    
    
    // symbols:
    
    
    
    (lib.Symbol1 = function() {
    this.initialize();
    
    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#000000").ss(1,0,1).p("A3f7kMAu/AAAQGfAAEkElQElElAAGeIAAX5QAAGeklElQkkElmfAAMgu/AAAQmfAAklklQioiphHjQQg1iaAAiwIAA35QAAmeEkklQElklGfAAg");
    this.shape.setTransform(250.5,176.5);
    
    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f().s("#000000").ss(1,1,1).p("AqSwyIUlAAQGfAAEkElQElElAAGeIAACVQAAGeklEkQkkEmmfAAI0lAAQmfAAklkmQkkkkAAmeIAAiVQAAmeEkklQElklGfAAg");
    this.shape_1.setTransform(259,183.5);
    
    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f("#000000").s().p("A3fbkQmfAAklkkQioiphHjQQg1ibAAiwIAA34QAAmeEkklQElklGfAAMAu/AAAQGfAAEkElQElElAAGeIAAX4QAAGfklElQkkEkmfAAgA0BrHQkkElAAGfIAACTQAAGfEkElQElEkGfAAIUlAAQGfAAEkkkQElklAAmfIAAiTQAAmfklklQkkkkmfgBI0lAAQmfABklEkg");
    this.shape_2.setTransform(250.5,176.5);
    
    this.addChild(this.shape_2,this.shape_1,this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-1,-1,503,355);
    
    
    (lib.Car = function() {
    this.initialize();
    
    // 41
    this.text = new cjs.Text("41", "21px 'Times'", "#0066CC");
    this.text.lineHeight = 23;
    this.text.lineWidth = 24;
    this.text.setTransform(10.3,23.1);
    
    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#000000").ss(1,1,1).p("ACnAAQAABIgyA0QgxAzhEAAQhEAAgxgzQgxg0AAhIQAAhHAxg0QAxgzBEAAQBEAAAxAzQAyA0AABHg");
    this.shape.setTransform(21.3,38.8);
    
    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f().s("#000000").ss(1,0,1).p("AhLldICXAAQCIAAAACIIAAGrQAACIiIAAIiXAAQiIAAAAiIIAAmrQAAiICIAAg");
    this.shape_1.setTransform(21.2,35);
    
    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f("#FFFFFF").s().p("Ah1B8Qgxg0ABhIQgBhHAxg0QAygzBDAAQBFAAAwAzQAyA0AABHQAABIgyA0QgwAzhFAAQhDAAgygzg");
    this.shape_2.setTransform(21.3,38.8);
    
    this.shape_3 = new cjs.Shape();
    this.shape_3.graphics.f("carColor").s().p("AhLFeQiHgBgBiHIAAmrQABiHCHgBICXAAQCIABgBCHIAAGrQABCHiIABgAh0hVQgxAzAABHQAABJAxA0QAxAzBDAAQBFAAAxgzQAxg0AAhJQAAhHgxgzQgxgzhFAAQhDAAgxAzg");
    this.shape_3.setTransform(21.2,35);
    
    this.addChild(this.shape_3,this.shape_2,this.shape_1,this.shape,this.text);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-1,-1,44.4,72);
    
    
    // stage content:
    (lib.racecar = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});
    
    // Car
    this.instance = new lib.Car("synched",0);
    this.instance.setTransform(151.6,555.7,1.424,1.422,0,0,0,29.9,49.5);
    
    this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({regX:21.2,regY:35,rotation:1.5,x:137.3,y:502.5},0).wait(1).to({rotation:3.3,x:136.4,y:469.6},0).wait(1).to({rotation:5.5,x:136.7,y:436.5},0).wait(1).to({rotation:8,x:138.7,y:403.4},0).wait(1).to({rotation:11.2,x:142.4,y:370.1},0).wait(1).to({rotation:15.1,x:148.6,y:336.9},0).wait(1).to({rotation:20,x:157.6,y:304.2},0).wait(1).to({rotation:26.2,x:170.4,y:272.3},0).wait(1).to({rotation:34,x:187.6,y:242.1},0).wait(1).to({rotation:43.4,x:209.8,y:214.8},0).wait(1).to({rotation:54,x:237.2,y:191.9},0).wait(1).to({rotation:65,x:268.6,y:174.6},0).wait(1).to({rotation:75,x:302.4,y:163},0).wait(1).to({rotation:94.8,x:342,y:168.4},0).wait(1).to({rotation:95.4,x:382.4,y:168.7},0).wait(1).to({rotation:95.7,x:420.9,y:169.1},0).wait(1).to({rotation:95.9,x:459.5,y:169.5},0).wait(1).to({rotation:96,x:498.3,y:170.2},0).wait(1).to({rotation:96.2,x:537,y:170.8},0).wait(1).to({rotation:96.3,x:575.9,y:171.7},0).wait(1).to({rotation:96.5,x:615,y:172.6},0).wait(1).to({rotation:96.7,x:654.1,y:173.6},0).wait(1).to({rotation:97.2,x:693.5,y:175.1},0).wait(1).to({rotation:101,x:734.1,y:178.9},0).wait(1).to({rotation:104.8,x:768.6,y:182.5},0).wait(1).to({rotation:114.2,x:809.7,y:197.8},0).wait(1).to({rotation:121.5,x:846.6,y:217.1},0).wait(1).to({rotation:127.5,x:875.6,y:236.8},0).wait(1).to({rotation:127.7,x:914.3,y:261.5},0).wait(1).to({rotation:163,x:929.9,y:294},0).wait(1).to({rotation:175.1,x:938.1,y:346.8},0).wait(1).to({rotation:182.3,x:938.8,y:387.3},0).wait(1).to({rotation:190,x:936.2,y:392.5},0).wait(1).to({rotation:188.4,x:934.3,y:441},0).wait(1).to({rotation:188.7,x:931.6,y:485.4},0).wait(1).to({rotation:189.1,x:928.9,y:526.6},0).wait(1).to({rotation:189.6,x:925.7,y:567.9},0).wait(1).to({rotation:191,x:921.7,y:610.7},0).wait(1).to({rotation:204.7,x:907.3,y:651.3},0).wait(1).to({rotation:231,x:879.1,y:682.8},0).wait(1).to({rotation:246.9,x:843.6,y:702.6},0).wait(1).to({rotation:265.7,x:795.9,y:719.7},0).wait(1).to({rotation:273.3,x:755.3,y:722.8},0).wait(1).to({rotation:274.9,x:711,y:723.2},0).wait(1).to({rotation:275.5,x:668.4,y:723},0).wait(1).to({rotation:275.8,x:625.8,y:722.5},0).wait(1).to({rotation:275.9,x:583.2,y:722},0).wait(1).to({rotation:275.8,x:540.3,y:721.5},0).wait(1).to({rotation:275.3,x:497,y:721.3},0).wait(1).to({rotation:272.7,x:450.1,y:722.7},0).wait(1).to({rotation:274.6,x:420.2,y:724.5},0).wait(1).to({rotation:281.1,x:368.8,y:720.6},0).wait(1).to({rotation:293.6,x:324.7,y:708.1},0).wait(1).to({rotation:301.2,x:285.8,y:689.3},0).wait(1).to({rotation:306.2,x:246.6,y:666.1},0).wait(1).to({rotation:313.8,x:210.8,y:638.4},0).wait(1).to({rotation:320.6,x:179.6,y:606.2},0).wait(1).to({rotation:323.7,x:150,y:572.7},0).wait(1).to({rotation:329.9,x:123,y:536.5},0).wait(1));
    
    // Layer 3
    this.instance_1 = new lib.Symbol1();
    this.instance_1.setTransform(526,433.3,1.896,1.896,0,0,0,250.5,176.5);
    
    this.timeline.addTween(cjs.Tween.get(this.instance_1).wait(60));
    
    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(562,481.6,952,671.4);
    
    })(lib = lib||{}, images = images||{}, createjs = createjs||{});
    var lib, images, createjs;
    var canvas, stage, exportRoot;
    
    function init() {
    	canvas = document.getElementById("canvas");
    	exportRoot = new lib.racecar();
    
    	stage = new createjs.Stage(canvas);
    	stage.addChild(exportRoot);
    	stage.update();
    
    	createjs.Ticker.setFPS(lib.properties.fps);
    	createjs.Ticker.addEventListener("tick", stage);
    }
    </script>
    </head>
    
    <body onload="init();" style="background-color:#D4D4D4">
    	<canvas id="canvas" width="1024" height="768" style="background-color:#00CC00"></canvas>
    </body>
    </html>
    
    And here's my view controller's .m file:

    Code:
    @interface ViewController ()
    
    @end
    
    @implementation ViewController
    @synthesize webView = _webView;
    - (void)viewDidLoad {
        [super viewDidLoad];
        NSURL *url = [[NSBundle mainBundle] URLForResource:@"racecar" withExtension:@"html"];
        NSError *error;
        NSMutableString *html = [[NSString stringWithContentsOfURL:url encoding:NSUTF8StringEncoding error:&error] mutableCopy];
       // Inject the desired race car color value into the HTML file.
        [html replaceOccurrencesOfString:@"carColor" withString:@"#009999" options:NSCaseInsensitiveSearch range:NSMakeRange(0, [html length])];
        [_webView loadHTMLString:html baseURL:nil];
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        [self setWebView:nil];
    }
    
    -(void)webViewDidFinishLoad:(UIWebView *)webView
    {
    }
    @end
    
     
  2. moonman239 thread starter macrumors 68000

    Joined:
    Mar 27, 2009
    #2
    The UIWebView's size is set to 600x600, which is the full size of the storyboard. The app's supposed to be for iPad, but Xcode didn't give me an iPad-specific storyboard. Just one storyboard for a Universal app.
     

    Attached Files:

  3. moonman239 thread starter macrumors 68000

    Joined:
    Mar 27, 2009
    #3
    The problem is now somewhat. I have resized the storyboard to fit iPad settings and set the view to automatically resize itself to fit the superview. The problem now is that it's not adjusting its own width.
     
  4. ayresb macrumors newbie

    Joined:
    Mar 20, 2015
    #4
    Xcode 6.2: UIWebView content cut off inexplicably

    Add missing constraints ,using "Resolve auto layout issues" for the viewcontroller in Storyboard.
     

    Attached Files:

Share This Page