How to change default device type?

[chonigman]

I'm attempting to see if this setup can replace using the Framer app which I find really difficult to work with (buggy and terrible IDE). However, I'm having a lot of issues trying to create "canvas" style device type. Most of my prototypes need to look like a regular website (i.e. I want it to fill the browser window with no device image). For some reason, the placement of the layers is tied to the device screen, so if it's not perfectly lined up they are displayed off screen.

Thanks for this project, it seems like a much better development process.

[alexchantastic]

Hi @KingWalrus. Glad you're finding some use out of this project.

You should be able to use any of the Framer DeviceComponent properties to customize the canvas.

For example, if you wanted a 1280x720 canvas, you would set the following:

Framer.Device.customize
    screenWidth: 1280
    screenHeight: 720

You are correct in the layer positions are tied to the dimensions of the device canvas. So the following would create a layer that is positioned at 10px from the top and left side of the canvas:

layerA = new Layer
    x: 10
    y: 10
    width: 25
    height: 25
    opacity: 0.5
    backgroundColor: "white"

Let me know if this helps 😃 .

[chonigman]

Thanks for the reply. I was doing this, however, it seems that if a bookmark bar is open (at least in chrome) the canvas starts above the visible screen.

I am hoping to do remote testing with the prototype so I am trying to get it to display correctly even if the screen is a slightly different size. My desired behavior is that if the window is smaller than declared, or is resized, it will still treat the top left corner of the visible window as (0,0). This happens if I preview in browser from the Framer app, but I can't figure if there is a setting that enables this.

Thanks again.

To show you, this is a screenshot of the window when the bookmark bar is open (the square should be 10px down, but displays at top b/c of the bookmark bar).

[alexchantastic]

Hm... I'm not able to reproduce the issue you're seeing. If I hide/show the bookmarks bar or resize the browser viewport, the position of the layer remains constant relative to the canvas. Like this:

Perhaps there's something odd about how your layer(s) are defined? Would you be able to share your prototype with me so I can help you debug this?

[alexchantastic]

@chonigman this issue is decently old so I'm going to close it. Please let me know if there is anything else I can help you out with.