Enyo Dashboard App

From WebOS101

Jump to: navigation, search

This is an example of a very simple app that consists of two pieces - a nowindow launcher that starts the app, and a simple dashboard, that implements a toggle switch that will switch your display lock timeout between whatever it's default setting is, and 24 hours (effectively, turning the display lock on and off).

Because of system security limitations, to make this app work, it must be named "com.palm".something, as only palm domain apps are able to access the display settings.

There may be some extra code here that is not necessarily useful or functional, and there may be bugs. This has not been tested extensively, but it does work for me.

appinfo.json:

   {
   "noDeprecatedStyles": true,
   "id": "com.palm.screenlocktoggle",
   "version": "0.1.0",
   "vendor": "Eric Blade",
   "type": "web",
   "main": "index.html",
   "title": "Screen Lock",
   "uiRevision": "2",
   "noWindow": true
   }

depends.js:

   enyo.depends("mypopup.js", "mypopup.css", "launch.js");

index.html:

   <!doctype html>
   <html>
   <head>
   <title>Popup</title>
   <script src="../../../../../enyo/1.0/framework/enyo.js" type="text/javascript"></script>
   </head>
   <body>
   <script type="text/javascript">
       enyo.create({kind: "Launcher"}); //.renderInto(document.body);
   </script>
   </body>
   </html>

launch.js:

   enyo.kind({
   name: "Launcher",
   kind: "Component",
   components: [
       { kind: "ApplicationEvents", onUnload: "cleanup" }
   ],
   create: function() {
       this.inherited(arguments);
       this.log();
       enyo.windows.openDashboard ("popup.html", "MyPopup", {}, {});
   },
   cleanup: function() {
       enyo.application.app.cleanup();
       this.log();
   },
   });

mypopup.css:

   body { color: white; background: transparent; }

mypopup.js:

   // TODO: Disable lock when docked
   enyo.kind({
   name: "MyPopup",
   kind: "HFlexBox",
   components: [
       { name: "setDisplayProperty", kind: "PalmService", service: "palm://com.palm.display/control/", method: "setProperty" },
       { name: "getDisplayProperties", kind: "PalmService", service: "palm://com.palm.display/control/", method: "getProperty", onSuccess: "gotDisplayProperties", onResponse: "gotDisplayProperties" },
       { w: "fill", content: "Disable Screen Lock: ", domStyles: {padding: "8px" } },
       { kind: "ToggleButton", onChange: "buttonToggle" },
   ],
   create: function()
   {
       this.log();
       this.inherited(arguments);
       this.$.getDisplayProperties.call( { properties: ['timeout'] } );
       enyo.application.app = this;
   },
   gotDisplayProperties: function(inSender, inResponse)
   {
       this.OriginalTimeout = inResponse.timeout;
       if(this.OriginalTimeout >= 86400)
           this.OriginalTimeout = 3000;
       this.log("display timeout=", this.OriginalTimeout);
   },
   buttonToggle: function(inSender, inState)
   {
       this.log("Toggled to state " + inState);
       this.setScreenLock(!inState);
   },
   setScreenLock: function(on)
   {
       this.log(on);
       if(on) {
           this.$.setDisplayProperty.call( { timeout: this.OriginalTimeout });
       } else {
           this.$.getDisplayProperties.call( { properties: ['timeout'] } );
           this.$.setDisplayProperty.call( { timeout: 86400 });
       }
   },
   cleanup: function()
   {
       this.$.setDisplayProperty.call( { timeout: this.OriginalTimeout } );
   }
   });

popup.html:

   <!doctype html>
   <html>
   <head>
   <title>Popup</title>
   <script src="../../../../../enyo/1.0/framework/enyo.js" type="text/javascript"></script>
   </head>
   <body>
   <script type="text/javascript">
       enyo.create({kind: "MyPopup"}).renderInto(document.body);
   </script>
   </body>
   </html>
Personal tools