Hype Electron Integration


(Loves Hype) #1

What the heck is Electron?

URL: http://electron.atom.io/
Slack, Atom and many more use it see: http://electron.atom.io/apps/

What is this thread about?

This thread started initialy as a Feature Request from @MaxZieb but now got moved (pending: and pinned) to the Extension Category. In this Topic and it’s replies we will explorer the possibilities for an integration from Hype and Electron and furthermore provide examples and code tutorials. The ultimate goal (dream come true) would be to one day have Hype export native apps (Mac, Windows and Linux) ready for deployment. At least Hype should offer a comprehensive integrated workflow allowing the development of these native apps. For now boilerplates and tips & tricks on smoothening the development experience are aspired.

###Feedback and examples are welcome!


(Loves Hype) #2

BTW Atom would also benefit the built in editor (Autocomplete etc.)


(drewbullen) #3

You can already dump an existing Hype project directly into Electron 1.0. Not sure what further integration is required???

My initial experience with Electron was that the setup was relatively straight forward and most things worked seamlessly. Obviously, this is very exciting!. However after some testing I did notice a few Hype features that didn’t immediately translate - e.g. drag & drop events.


(Loves Hype) #4

##Hypetron

For anybody wanting to take a look at this amazing combination I put together a little demo. This shows what you can do using Electron in combination with Hype. Barely scratches the surface.

  1. Goto http://electron.atom.io/releases/ and download the latest standalone for your OS. Mine (being on Mac OS X) was at the time of writing this: electron-v1.2.0-darwin-x64.zip

  2. Download the attached file Hypetron.zip (615,3 KB) and drag the contained folder onto the launcher

Enjoy

PS: Obviously on would use the command line builder later on to create the apps but for demonstration purposes this does the job. I also included the Hype file if anybody wants to have a look at it.

PPS: In the “Open Dialog” you are supposed to pick a image file (jpeg, png, gif) :relieved:


(Loves Hype) #5

###Little Update
I added a test for frameless windows to the above example (ZIP-file above got replaced).

“A small step for Hype …”


(Loves Hype) #6

##VHS (Desktop-App)


Another quick experiment. I used Hype to create an app and apply a skin to the great VHS player from Jean-Christophe Naour (Cheers). I uploaded this in it’s raw stage for your enjoyment and further experimentation but still plan on integrating a second frameless window (scene) that acts as a remote. In the source you can see I put the stubs already in place.

  1. Goto http://electron.atom.io/releases/ and download the latest standalone for your OS. Mine (being on Mac OS X) was at the time of writing this: electron-v1.2.0-darwin-x64.zip

  2. Drop the folder inside the ZIP VHS.zip (469,0 KB) on the electron launcher

PS: As the remote won’t be done until I got my next free time slot use ⌘-R to skip a song (refresh).
PPS: And if you want to tuck it away while working just push it to all the way to the side of your screen.


(Loves Hype) #7

… just launched VHS as a iPhone App and now his server is down :slight_smile:
so the second demo will stay black until he fixes the problem of too many request.

VHS is back online! …and therefor happy watching HypeVHS, again!


(Loves Hype) #8

Now even easier…