PiXY
Multi
Screen
Browser

PiXY is a Browser Engine that renders web pages as an in-memory bitmap. In PiXY the web page dimensions are not limited by screen resolution. The Browser uses a serial connection to deliver a cropped image of the rendered page to a device.

A.
B.
C.

With up to 30 Bluetooth devices the Browser supports screen resolutions of 17,760 x 7,200 or 14,800 x 8,640.

PiXY is looking to develop a multi-screen system with Raspberry Pi/microcontroller screens and Android Browser host, delivering a cost-effective, marketable solution for display of timing tables or stock quotes.


Elements
Source

Quick Start

Bluetooth Server

PiXY server runs as a Node.JS process on host computer. It renders web page view and handles Bluetooth communication with Android device.

Installation is available as an NPM module for Linux systems (Windows support planned):

npm install pixy-browser

Unlimited screen dimensions and crop

Sample Node.JS script to create a virtual screen with dimensions of 1440x1050 pixels. Rendered view of a webpage is shared on two devices. According to crop settings in the sample, device A displays top part of the page and device B the right one.

const {PixyBrowser} = require('pixy-browser')

new PixyBrowser({
  url: 'http://visualdatasynthesis.com/demo/index.html',
  devices: [
    {
      top: 50,
      left: 100,     // crop of device A
      bottom: 710,   // top side of rendered view
      right: 1440
    },
    {
      top: 0,
      left: 685,     // crop of device B
      bottom: 1050,  // right side of rendered view
      right: 1220
    }
  ],
  height:1050,       // window.screen.height
  width:1400         // window.screen.width
})
index.html
<HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <IMG src="./demo/1400x1050.json" height="1400" width="1050"></IMG>
  </BODY>
</HTML>

Android APK

Get PiXY app for Android from Google PlayStore

PiXY Browser Android App

Cropped views

Use Android App to select Bluetooth connection and device crop then press START. Example of cropped view on two Android devices:

Device A

Top part of page

Top
50
Left
100
Bottom
1050
Right
1440
Android device 1 display
Device B

Right part of page

Top
0
Left
685
Bottom
1050
Right
1220
Device B display

PiXY in client Browser

var callback = function(){alert('PiXY loaded')},
    container = document.getElementById('id'),
    url = 'http://visualdatasynthesis.com.com/static.html'

var pixy = new PixyBrowser({
    callback: callback,       // callback function
    container: container,     // container DOM element
    url: url,                 // webpage URL
    type: "matrix|canvas",    // use canvas for pages with
                              // high screen resolution
    height: 240,              // height in pixels
    width: 360                // width in pixels
})
                                  
// when width and height are omitted PiXY renders
// the webpage in client Browser as plain HTML
// with container element as root of HTML tree

// Zoom method:
var zoom = 1.5
pixy.zoom( zoom )             // floating point number

PiXY supports basic HTML mark-up. Refer to example 1 and example 2 for information and come back to this site for frequent updates.

External publication: High Scalability

Last update: May 2020



Get it on Google Play

Download APK


© sergei.sheinin@gmail.com