This week’s todo list looked like this;

  • mon: drafts popover, clarify response dispatch
  • tue: pages, layers popovers
  • wed: cache images on draft create
  • thu: render panel images on draft create
  • fri: in-picklet navigation (at least prev/next)

Important wins for the week include reworking draft handling into a popover and dialog, and making local copies of layer images for a draft. This makes for a slower process to create a draft of a picklet (watching progress indicator reporting each file copied from dropbox to picklet.net), but I like that it has some overhead – not something to be done casually.

Layers popover with drag handles for reordering

The popovers are working really well – using jQuery sortable to reorder the lists of panels and layers.

A discovery, when I started to look into it, that app engine’s images API only supports rotation in multiples of 90 degrees. This makes it unsuitable for generating thumbnail and preview renders of picklet panels. I had hoped to do this for making the player experience smoother, but it’s kind of an optimisation and I’ve put it aside for now.

Late in the week I got around to refactoring the way the picklet content is represented in JSON in the javascript framework. It is represented as an object something like this;

{ "panels": [
  {
    "name": "panel_01",
    "preview": "/images/12345/preview.png",
    "thumbnail": "/images/12346/thumb.png",
    "layers": [
      {
        "index": 0,
        "name": "asdf",
        "image": "images/12347/head.png",
        "top": 77,
        "left": 160,
        "width": 76,
        "height": 76,
        "origin_x": 38,
        "origin_x_rel": 50,
        "origin_y": 38,
        "origin_y_rel": 50,
        "rotation": "0deg",
        "transform": "",
        "visible": true,
      }, {
        // etc.
      }
    ]
  }, {
    "name": "panel_02",
    "preview": "",
    "thumbnail": "",
    "layers": [
      "0": {
        // etc.
      }
    ]
  }]
}

An array of ‘panels’ each of which has an array of ‘layers’ which are the individual PNG files. I had some half-baked version of this up until now – based on getting the persistence working before I went on holidays a couple of months back.

picklet player navigation

I didn’t get around to implementing the picklet player panel navigation controls but I did make this mockup of where I’m heading with the player. It’s basically the layout of an e-book reader; slider to move quickly through different panels, links back to Library, to table of contents, facility for bookmarking a panel.

All I really need from this layout at the moment is the 25% left and right areas as previous/next touchable areas for moving to the adjacent panels.

I’m hoping to tidy up the json refactor and popover styling this weekend, then next week I’m into making the player work more smoothly and putting it into an iOS native Picklets app.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>