Skip to content
Permalink
Browse files

Merge pull request #265 from koenbok/feature/customDevice

Fix local image path when using a custom device
  • Loading branch information
koenbok committed Dec 17, 2015
2 parents b4583d4 + a33b96b commit 920106e14502da27ad85ed1527808a1eaf569b2f
@@ -3,7 +3,7 @@
"sharedPrototype" : 1,
"deviceOrientation" : 0,
"contentScale" : 1,
"deviceType" : "fullscreen",
"deviceType" : "ipad-mini-silver",
"updateDelay" : 0.3,
"deviceScale" : -1,
"delay" : 0.3
@@ -279,19 +279,22 @@ class exports.DeviceComponent extends BaseClass
if _.startsWith(name, "http://") or _.startsWith(name, "https://")
return name

# If this device is added by the user we use the name as it is
if @_deviceType not in BuiltInDevices
return name

# We want to get these image from our public resources server
resourceUrl = "//resources.framerjs.com/static/DeviceResources"

# If we're running Framer Studio and have local files, we'd like to use those
if Utils.isFramerStudio() and window.FramerStudioInfo
resourceUrl = window.FramerStudioInfo.deviceImagesUrl

# If not, we want to get these image from our public resources server
else
resourceUrl = "//resources.framerjs.com/static/DeviceResources"
resourceUrl = window.FramerStudioInfo.deviceImagesUrl

# We'd like to use jp2 if possible, or check if we don't for this specific device
if Utils.isJP2Supported() and @_device.deviceImageJP2 isnt false
if Utils.isJP2Supported() and @_device.deviceImageJP2 is true
return "#{resourceUrl}/#{name.replace(".png", ".jp2")}"
else
return "#{resourceUrl}/#{name}"

return "#{resourceUrl}/#{name}"

###########################################################################
# DEVICE ZOOM
@@ -823,5 +826,6 @@ Devices =
"applewatchedition-42-gold-sportband-white": _.clone(AppleWatch42Device)



exports.DeviceComponent.Devices = Devices

BuiltInDevices = _.keys(Devices)
@@ -19,5 +19,6 @@ require "./tests/ContextTest"
require "./tests/ScrollComponentTest"
require "./tests/VersionTest"
require "./tests/ColorTest"
require "./tests/DeviceComponentTest"

mocha.run()
@@ -0,0 +1,89 @@
describe "DeviceComponent", ->

it "should default to iphone 5s spacegray", ->

comp = new DeviceComponent()
comp.deviceType.should.equal "iphone-5s-spacegray"

it "should use images on server for built in devices when not in Studio", ->

comp = new DeviceComponent()
localUrl = "resources.framerjs.com/static/DeviceResources/"
imageUrl = comp._deviceImageUrl(comp._deviceImageName())

result = imageUrl.indexOf(localUrl)

result.should.not.equal -1

it "should use the deviceImage string as is for custom devices when not in Studio", ->

comp = new DeviceComponent()

DeviceComponent.Devices["test"] =
"deviceType": "phone"
"screenWidth": 720
"screenHeight": 1000
"deviceImage": "images/framer-icon.png"
"deviceImageWidth": 800
"deviceImageHeight": 1203

# Set custom device
comp.deviceType = "test"

comp.deviceType.should.equal "test"
comp._deviceImageUrl(comp._deviceImageName()).should.eql "images/framer-icon.png"

it "should use the local file url when run in Studio with built in device", ->

# stub isFramerStudio helper
_originalIsFramerStudio = Utils.isFramerStudio
Utils.isFramerStudio = ->
return true
Utils.isFramerStudio().should.be.true

# example url
localFileUrl = "file:///Users/name/Library/Developer/Xcode/DerivedData/Framer_Studio/Build/Products/Debug/Framer%20Studio.app/Contents/Resources/DeviceImages/"

window.FramerStudioInfo = new Object()
window.FramerStudioInfo.deviceImagesUrl = localFileUrl

window.FramerStudioInfo.deviceImagesUrl.should.equal(localFileUrl)

comp = new DeviceComponent()
imageUrl = comp._deviceImageUrl(comp._deviceImageName())

result = imageUrl.indexOf(localFileUrl)
result.should.not.equal -1

# reset stubs
Utils.isFramerStudio = _originalIsFramerStudio

it "should use deviceImageName when a custom device is used in Studio", ->

# stub isFramerStudio helper
_originalIsFramerStudio = Utils.isFramerStudio
Utils.isFramerStudio = ->
return true
Utils.isFramerStudio().should.be.true

comp = new DeviceComponent()

DeviceComponent.Devices["test"] =
"deviceType": "phone"
"screenWidth": 720
"screenHeight": 1000
"deviceImage": "images/framer-icon.png"
"deviceImageWidth": 800
"deviceImageHeight": 1203

# Set custom device
comp.deviceType = "test"

comp.deviceType.should.equal "test"

imageUrl = comp._deviceImageUrl(comp._deviceImageName())

imageUrl.should.equal "images/framer-icon.png"

# reset stubs
Utils.isFramerStudio = _originalIsFramerStudio

0 comments on commit 920106e

Please sign in to comment.