Custom Screens

Here’s all you need to know about creating custom screen

An AutoCast custom screen is composed of 2 parts:

  • an .html file with the actual screen
  • an .autocastscreen file with a description of the screen. This is what you actually import into AutoCast.

Creating the screen

  • If you’re not confortable creating web pages yourself, get Google Web Designer . This will make it easy to create pages.
  • Create a Dropbox account if you haven’t done so already
  • Create the html page and make sure to give every element on the page a unique ID. These IDs will be later used so that you can easily assign values to the elements with AutoCast
  • Important note: if you used Google Web Designer to build the html file, open it in a text editor and remove the following code:
  • body {
    background-color: transparent;
    -webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -webkit-transform-style: preserve-3d;
    }
  • If you don’t do the step above, videos won’t show up on the page.
  • Place the html file in any folder inside your main Dropbox folder. I recommend that you create a special AutoCast folder so that you can find it easily
  • Share the html page by right-clicking it and choosing “Share Dropbox Link”. A dropbox link should now be on your clipboard. Keep this link somewhere handy.
  • An AutoCast custom screen needs a file with the .autocastscreen extension with the description of the screen. Create one here.
  • After you’re done creating it, copy->paste the contents of the .autocastscreen file on that page to a file called “anythingyouwant.autocastscreen” on your dropbox folder. replace “anythingyouwant” with anything you want 🙂
  • Finally right-click the .autocastscreen file and select “Share Dropbox Link”. Navigate to that link on your Android device and let AutoCast import it

Your custom screen can now be used in the AutoCast Tasker action! 🙂

Screen Functions

If you want to make a more advanced screen you can program it using javascript.

A good place to test out javascript functionality is jsbin.com. There you can simply write a very small webpage and some javascript functionality and you get the results in real time, which allows for very fast prototyping and testing.

These are all the AutoCast functions that you can call from inside your custom screen:

  • sendAutoCastMessage(values): sends an AutoCast message to any connected devices. React to these messages with the “AutoCast Message” Tasker event.
    • values: any “flat” javascript object like {“key”:”value”}; “deep” objects like {“key”:{“inner”:”value”}} are not supported
  • sayText(text): stops any currently playing audio or video and says the supplied text out loud
    • text: any string upto 100 characters; anything over 100 characters will be truncated
  • playYouTubeVideo(videoElementId, url, start): plays a YouTube video over an existing html video element. Attempts to find out where the video element is located on the page and overlays a YouTube iframe over it
    • videoElementId: any video element on the page where the YouTube video should play on
    • url: YouTube video URL to play
    • start: start position in seconds from which the video should start playing
  • setHttpFileSource(url, senderIp, senderPort): transforms an Android file url into an http file url with the provided IP Address and port.
  • controlAutoCastMedia(elementId, command, seek, volume): allows you to control the currently playing media
    • elementId: html page element to control. null to control the currently playing element.
    • command: can be one of these values: “pause”, “play”, “toggleplaypause”, “stop”, “volume”, “seek”, “skip”
    • seek: only available when using the “seek” command. Value in seconds to where the media should seek
    • volume: only available when using the “volume” command. Value can range 0-100
  • loadAutoCastMedia(mediaElement, url, onEndedFunc): loads audio or video on a media element on the screen
    • mediaElement: jquery selector result. For example, something like $(“#audio”) is a selector for the element with the id “audio”
    • url: media location
    • onEndedFunc: callback function  that will be called when the media ends playing.
  •  setDateTime(elementId): sets the current date and time on the page element with the given id
  •  setDate(elementId): sets the current date on the page element with the given id
  •  setTime(elementId): sets the current  time on the page element with the given id

 

These are all the AutoCast functions that you can define on your page and that will be called by AutoCast at the appropriate times

  • handleAutoCastCommand(command): called when the “Free Form Data” field is set in the “AutoCast” Tasker action.
    • command: can be a simple string; if the AutoApps Command System is used, it will be a javascript object with the “acpar” and “accomm” properties; if a valid stringified javascript object is used, it will be available here as an object
  • handleAutoCastSet(element, value): called when an html element’s value is set on the custom screen. These correspond to the “Screen Elements” fields in the “AutoCast” Tasker action
    • element: dom element whose value is being set
    • value: value that is being set on the element
  • handleAutoCastSetValues(values): called when “Screen Values” are set in the “AutoCast” Tasker action.
    • values: javascript object that can different properties depending on the screen; when you define the screen, you choose which properties appear here in the “values” array of the .autocastscreen file
  • handleAutoCastAllElementsSet(): called after all the “Screen Elements” are set.
  • handleAutoCastNotification(notificationFields): called when a notification is set on the screen
    • notificationFields: javascript object with the following properties: icon, title, text, timeout
  • handleSayText(text): called whenever text is spoken out loud on the screen
    • whatever text was spoken
  • handleAutoCastMediaError(url): called whenever an audio or video file couldn’t be loaded
    • url: location of the file
  • handleAutoCastID3Tags(tags): called whenever an mp3 file is loaded and ID3 tag info could be loaded from it
    • tags: javascript object with the following properties: picture, artist, title, album
  • handleAutoCastMediaPlaying(): called when some media starts playing
  • handleAutoCastScreenSet(): called when a the screen that is cast with AutoCast changes