Birds of a Feather Meeting 2016 - SC16sc16.supercomputing.org/sc-archive/bof/bof_files/bof117s2.pdf · Electron technology • Framework to build cross platform desktop apps with

www.sagecommons.orgSAGEBOF2016

BirdsofaFeatherMeeting2016


LaboratoryforAdvancedVisualization&ApplicationsUniversityofHawaiʻiatMānoaJasonLeigh,DylanKobayashi

ElectronicVisualizationLaboratoryUniversityofIllinoisatChicago

MaxineBrown,LucRenambot,LanceLong,ArthurNishimoto,KrishnaBharadwaj,

JillianAurisano,AndrewBurks

Laboratory for Advanced Visualization & ApplicationsUniversity of Hawaiʻi at Mānoa


Funding• BeganwithNSFITR(OptIPuter)grantin2002.• SupportedwithNSFSTCIgrant2009-2013.• NewsupportwithNSFSI2-SSIgrant2013-2018.• AcademyforCreativeMedia,UniversityofHawaiisystem

UniversityofHawaiʻiSystem


WhatisSAGE2?ScalableAmplifiedGroupEnvironment

• Middlewaretoaccess,display,andsharehigh-resolutiondigitalmediaononeormorescalableresolutiontiled-displaywalls

• Useswebtechnologies(rewriteofSAGE:ScalableAdaptiveGraphicsEnvironment)• Pushlaptopscreensordigitalmediaontoawall• Multi-userinteraction

Laboratory for Advanced Visualization & ApplicationsUniversity of Hawaiʻi at Mānoa


SAGE2UserCommunity201667Sites:35International+32National


SAGE2UserCommunity201667Sites:35International+32National

AUSTRALIA• RMIT,(VX)Lab• UniversityoftheSunshineCoast (3)• UniversitySouthernQueenslandBRAZIL• BahiaSchoolMedicine&PublicHealth• CatholicUniversityofSalvador(UCSal)• FederalUniversityParaíba,LAViD• FederalUniv.ofRioGrandedoSul,PRAV• MackenzieUniversity,LabCine• NationalInstituteofSpaceResearch• RNP,RiodeJaneiro(2)• UniversityofCampinas,Cinema• UniversityofSaoPaulo,LARC• UniversityofSaoPaulo,LASSU(2)CANADA• Ciena ResearchLabs• SimonFraserUniversity,IRMACSCZECHREPUBLIC• CESNET&CzechTechnicalUniv,SAGElab• CESNET,MobileSAGE• MasarykUniversity,CyberExercise&ResearchPlatformProject

• MasarykUniv.,LabAdv.Ntwking Tech(2)ITALYandSWITZERLAND• UniversityUrbino andETHZürich

JAPAN• NTTNetworkInnovationLabs,Yokosuka• OsakaUniv.,CyberMediaCenterKOREA• Gwangju InstituteofScience&Tech.NETHERLANDS• AirFrance-KLM, CIOGroupTechOffice• SURFsara,Sci VisGroup,Collaboratorium• UniversityofAmsterdam,SNENEWZEALAND• REANNZSOUTHAFRICA• UniversityofCapeTown,InformaticsandVisualisation Laboratory

TAIWAN• NationalCenterforHigh-performanceComputing

UNITEDKINGDOM• ImperialCollegeLondon,DataScienceInstitute

UNITED STATES• AdlerPlanetarium• ArgonneNationalLaboratory,ALCF• CatherineCookSchool• DigitalManufacturingandDesignInnovationInstitute(DMDII)

UNITED STATES• JacksonStateUniversity,ECE• NASAMarshallSpaceFlightCenter,SPoRT• NorthwesternUniversity,iCAIR• StanfordUniversity, HIVE• Univ ofCalifornia,SanDiego,Calit2-QI,VROOM

• Univ ofHawaiʻi atHilo,‘Imiloa Astronomy• Univ ofHawaiʻi atHilo,ComputerScience• Univ ofHawaiʻi atMānoa, C-MORE• Univ ofHawaiʻI Mānoa,HIGP• Univ ofHawaiʻi atMānoa,InformationTechnologyCenter

• Univ ofHawaiʻI Mānoa,i-LAB• Univ ofHawaiʻi atMānoa,LAVA(3)• Univ ofHawaiʻI atWestOahu,AcademyforCreativeMedia

• Univ ofIllinoisatChicago,ACM/LUGStudentChapters

• Univ ofIllinoisatChicago,Communications• Univ ofIllinoisatChicago,EVL(5)• Univ ofIllinoisatChicago,Eng MakerSpace• Univ ofIllinoisatChicago,Ophthalmology• Univ ofIllinoisatChicago,Pathology(2)• Univ ofIllinoisatUrbana-Champaign,NCSA• Univ ofMaryland,BaltimoreCounty,π²ImmersiveHybridRealityLab


SAGE2UserSites 2016ExamplesInternational

BRAZIL,BahiaSchoolMedicine&PublicHealth

BRAZIL,CatholicUniversityofSalvador(UCSal)

CANADA, Ciena ResearchLabs

JAPAN, OsakaUniversity,CyberMediaCenter

NETHERLANDS, AirFrance-KLM,CIOGroupTechOffice

SOUTH AFRICA,Univ.CapeTown,InformaticsandVisualisationLaboratory


SAGE2UserSites 2016ExamplesNational

USA,AdlerPlanetarium USA,ArgonneNationalLab,ALCF USA,StanfordUniversity,HIVE

USA,UniversityofHawaiʻi atHilo,‘Imiloa Astronomy

USA,UniversityofHawaiʻi atMānoa,InformationTechnologyCenter

USA,UniversityofMaryland,BaltimoreCounty,π²ImmersiveHybridRealityLab


SAGE2GlobalCommunity2015-16• sagecommons.org• ~4,000pageviewspermonth

• 7,000users• USA,Russia,Brazil,China,Australia,Japan,Canada,Czech,…


SAGE2UserCommunity2016

• FromNovember2015– v1.0.0-Koolau:1,949binarydownloads– Notcountingsourcesdownload

• 36registereddevelopers– https://bitbucket.org/sage2/sage2– +12outside‘followers’

• 238forummembers– https://groups.google.com/forum/#!forum/sage2– ~50postspermonth (upto120lastSeptember)


UseCases


DistributedDataVisualizationClass• Classbetween‘Imiloa AstronomyCenteratUniversityof

Hawaiʻi atHiloandLAVAatUniversityofHawaiʻi atMānoa• FacultyfromMarineScience,ComputerScience,andArtand

CreativeMedia


KamehamehaSchool:NativeHawaiianpre-collegeschool


NASA-fundedSIMPLEProjectSub-iceInvestigationofMarineandPlanetary-analogEcosystems

SIMPLEisacollaborationofGeorgiaTech,UniversityofIllinoisatChicago,LouisianaStateUniversity,UniversityofTexas,StoneAerospace,MossLandingMarineLaboratoryandtheUniversityofNebraska,Lincoln.http://schmidt.eas.gatech.edu/simple/


NetSage

http://www.netsage.global https://youtu.be/Bip-5t-KSLU


CESNETSketchfab ModelViewerandGigapixel Viewer

Sketchfab Viewer

DeepViewer+LeapMotionController

JiriKubistaSvenUbik


EmperoratUCSD/Calit2

• Emperorisaninteractivetoolfortheanalysis,visualizationandunderstandingofhighthroughputmicrobialecologydatasets.

• WithSAGE2wecancollaborativelyinterrogate,andinteractwiththecomplexitycharacteristicofmodernmicrobiomestudies.

• Emperorusedtovisualizebeta-diversityplotsthatsuccinctlysummarizethecommunitystructurepresentinsamplescollectedformicrobiomestudies.

YoshikiVazquez-Baeza


SC16Ciena/Northwestern/EVLDemoDemoPrototypedatGLIF2016,Miami,inSeptember

DemoatGLIF2016.Photo:RodneyWilson

• AremoteSAGE2serverissetupatUniversityofIllinoisatChicago(UIC)• ASAGE2displaymonitorissetupatSC16• ASAGE2browserisusedtoaccessanddisplayCiena’s BluePlanetweb-based

networkmonitoringchartsfromaserveratNorthwesternUniversity,videostreamsfromUIC,andPDFsandvideosfromalocallaptop.

VisitCiena Booth#2523

Probe ReturnsØ Cumulative data flowsØ Link PerformanceØ LatencyØ Other (SNMP gets)

GENI BM

Monitored links BP Server

CENI, Ottawa

CENI, Hanover

GENI BM

iCAIR

SAGE2 Server

UICStarLight, ChicagoMREN

CENI, Chicago


What’sNew


SAGE2V2

WrigleyAvailableNow!


Electrontechnology• Frameworktobuildcrossplatform

desktopappswithwebtechnologies,usingJavaScript,HTML,andCSS

• Combining Chromium and Node.jsinto asingleruntimeandappscanbepackagedforMac,Windows,andLinux

• UsestherenderinglibraryfromChromium

• maintainedbyGitHub,opensource


Electroncapabilities

• Webview– Cancreateindependentwebwindowseasily– Viewscanbecontrolledbyparentprocess

• IndependentofChromeinstallation– PackagedintheSAGE2installer– NoneedforChromeonthedisplaymachines

• Easiertocontrol–Windowpositionandsize– Security


WhattheTransitiontoElectronEnabled


AppStore

• Placefordeveloperstoshareapplications

• apps.sagecommons.org• LoginwithGoogle– Opentoall

• Zipanddrag-drop– Manageyourapps

• Monetization?


AppStore

• Easytouseforend-users• Searchbox

– Keywords– Tutorials/Samples

• Clicktodownload– Getazipfile

• Dropthezipontoyour UI• Applicationinstalledandusableimmediately


ScreenPartition

• Moveandresizegroupsofapplications,likegiantposterboards


ExtendedLauncher• Windowsbinaryhelper– Tohelpwithinitialsetupandeditingofconfiguration

– StartsElectron fordisplayclientandaudiomanager


ApplicationInterface

• UIright-clickcontextmenu– appinteractionwithoutstartingthepointer

• Basickeycontrols– ArrowsforPDF– ‘p’playmovie

• Downloadthecontentdirectlyfromthewall


AutomaticUIScaling

• ResizingoftheUIwidgetsbasedonscreensize,resolutionanduserdistance– Basic• Screendiagonaldistance,aspectratio,andresolution

– Advanced• Screenwidth/height,borderthickness,andresolution

• LeveragesscreensizeandresolutiontooptimizeUIspaceandreadabilityrelativetotypicaluserdistancefromscreen


Mouse/Keyboardevents

• SAGE2pointertomouseeventconversion• ReducerequirementofconvertingwebpagetoSAGE2app– Useexistingeventhandlers

• AutomatictranslationfromSAGE2tothewebbrowser

• WorkswellforD3.js


NewApplications

• CSVviewer• ChemViewer• PDFviewer• Doodleandquicknotes


Documentation

• Installation• SAGE2UIwalkthrough• SAGE2API• Screencastandhow-tovideos– Youtube channel– https://www.youtube.com/channel/UCQs-iwHHGqg3xNHR6dDDi3A/


Upgrade

• Downloadandunpack– howtoupgrade• V1.0toV2.0• copytheSSL/HTTPSkeys

–Windowsnon-cluster• DefaultstoElectronfordisplay• Chrome:legacymode(withoutwebview)

– Linux&Mac• Instructions• Dockerimage


BetaFeatures• Movieplayer– Synchronizedgroupofmovies

• Services– Imageprocessing

• Pyramidalprocessingandhosting– Videoprocessing

• MP4:4K,HD,720p• Container– Docker– SAGE2serverondemand

• Jupyterintegration• ParaSAGE• Linkedvisualizations


Future• Inter-applicationcommunication– Groupbehavior

• Play/pauseseveralmovies– Interapplicationmessaging

• Sharedvariables– Parent-childrelationship

• Hierarchyandmultipleviews• SDNcommunication– Discovery,allocation,reservationofnetworkresourcesforcollaboration

• Portablesessions– Sharingsessionsbetweensites– Uploadable totheappstore


Fromthecommunity

• Shareyourapplicationviatheappstore• Shareyourusecases andlessonslearned• SharepicturesofyourSAGE2displays


ComeseeWrigleyonShowfloor

NCSABooth25012x65”4KOLED

Displays

AlsoattheCienaboothandonSCInetdisplays


Ciena booth:blueplanetNetworkmonitoring

SCInet Analyticsdisplays

Documents

Birds of a Feather Meeting 2016 - SC16sc16.supercomputing.org/sc-archive/bof/bof_files/bof117s2.pdf · Electron technology • Framework to build cross platform desktop apps with