+
+ {{ .Err }}
@@ -53,8 +53,8 @@ const err = document.getElementById("errors"); switch (data.type) { - case "webp": - img.src = "data:image/webp;base64," + data.message; + case "img": + img.src = "data:image/" + data.img_type + ";base64," + data.message; err.innerHTML = ""; break; case "error": diff --git a/server/browser/push.go b/server/browser/push.go index 5b65aae07f..406abcb8e2 100644 --- a/server/browser/push.go +++ b/server/browser/push.go @@ -53,12 +53,12 @@ func (b *Browser) pushHandler(w http.ResponseWriter, r *http.Request) { } } - webp, err := b.loader.LoadApplet(config) + img, err := b.loader.LoadApplet(config) payload, err := json.Marshal( TidbytPushJSON{ DeviceID: deviceID, - Image: webp, + Image: img, InstallationID: installationID, Background: background, }, diff --git a/server/fanout/client.go b/server/fanout/client.go index e0b9cda0f0..82048e3441 100644 --- a/server/fanout/client.go +++ b/server/fanout/client.go @@ -52,7 +52,7 @@ func (f *Fanout) NewClient(conn *websocket.Conn) *Client { return c } -// Send is used to send a webp message to the client. +// Send is used to send an image message to the client. func (c *Client) Send(event WebsocketEvent) { c.send <- event } @@ -82,7 +82,7 @@ func (c *Client) reader() { } } -// writer writes webp events over the socket when it recieves messages via +// writer writes image events over the socket when it recieves messages via // Send(). It also sends pings to ensure the connection stays alive. func (c *Client) writer() { ticker := time.NewTicker(pingPeriod) diff --git a/server/fanout/event.go b/server/fanout/event.go index 19302674f8..ea8807f57b 100644 --- a/server/fanout/event.go +++ b/server/fanout/event.go @@ -1,24 +1,27 @@ package fanout const ( - // EventTypeWebP is used to signal what type of message we are sending over + // EventTypeImage is used to signal what type of message we are sending over // the socket. - EventTypeWebP = "webp" + EventTypeImage = "img" // EventTypeSchema is used to signal that the schema for a given app has // changed. EventTypeSchema = "schema" // EventTypeErr is used to signal there was an error encountered rendering - // the WebP image. + // the image. EventTypeErr = "error" ) // WebsocketEvent is a structure used to send messages over the socket. type WebsocketEvent struct { - // Message is the contents of the message. This is a webp, base64 encoded. + // Message is the contents of the message. This is a webp or gif, base64 encoded. Message string `json:"message"` + // ImageType indicates whether the Message is webp or gif image. + ImageType string `json:"img_type"` + // Type is the type of message we are sending over the socket. Type string `json:"type"` } diff --git a/server/loader/loader.go b/server/loader/loader.go index 4f04f68983..cee8a911b9 100644 --- a/server/loader/loader.go +++ b/server/loader/loader.go @@ -30,12 +30,14 @@ type Loader struct { maxDuration int initialLoad chan bool timeout int + renderGif bool } type Update struct { - WebP string - Schema string - Err error + Image string + ImageType string + Schema string + Err error } // NewLoader instantiates a new loader structure. The loader will read off of @@ -49,6 +51,7 @@ func NewLoader( updatesChan chan Update, maxDuration int, timeout int, + renderGif bool, ) (*Loader, error) { l := &Loader{ fs: fs, @@ -62,6 +65,7 @@ func NewLoader( maxDuration: maxDuration, initialLoad: make(chan bool), timeout: timeout, + renderGif: renderGif, } cache := runtime.NewInMemoryCache() @@ -95,12 +99,16 @@ func (l *Loader) Run() error { case <-l.requestedChanges: up := Update{} - webp, err := l.loadApplet(config) + img, err := l.loadApplet(config) if err != nil { log.Printf("error loading applet: %v", err) up.Err = err } else { - up.WebP = webp + up.Image = img + up.ImageType = "webp" + if l.renderGif { + up.ImageType = "gif" + } } l.updatesChan <- up @@ -109,12 +117,16 @@ func (l *Loader) Run() error { log.Println("detected updates, reloading") up := Update{} - webp, err := l.loadApplet(config) + img, err := l.loadApplet(config) if err != nil { log.Printf("error loading applet: %v", err) up.Err = err } else { - up.WebP = webp + up.Image = img + up.ImageType = "webp" + if l.renderGif { + up.ImageType = "gif" + } up.Schema = string(l.applet.SchemaJSON) } @@ -134,7 +146,7 @@ func (l *Loader) LoadApplet(config map[string]string) (string, error) { l.configChanges <- config l.requestedChanges <- true result := <-l.resultsChan - return result.WebP, result.Err + return result.Image, result.Err } func (l *Loader) GetSchema() []byte { @@ -182,12 +194,17 @@ func (l *Loader) loadApplet(config map[string]string) (string, error) { if screens.ShowFullAnimation { maxDuration = 0 } - webp, err := screens.EncodeWebP(maxDuration) + + var img []byte + if l.renderGif { + img, err = screens.EncodeGIF(maxDuration) + } else { + img, err = screens.EncodeWebP(maxDuration) + } if err != nil { return "", fmt.Errorf("error rendering: %w", err) } - - return base64.StdEncoding.EncodeToString(webp), nil + return base64.StdEncoding.EncodeToString(img), nil } func (l *Loader) markInitialLoadComplete() { diff --git a/server/server.go b/server/server.go index 6ff5459674..d125dda425 100644 --- a/server/server.go +++ b/server/server.go @@ -23,7 +23,7 @@ type Server struct { } // NewServer creates a new server initialized with the applet. -func NewServer(host string, port int, watch bool, path string, maxDuration int, timeout int) (*Server, error) { +func NewServer(host string, port int, watch bool, path string, maxDuration int, timeout int, serveGif bool) (*Server, error) { fileChanges := make(chan bool, 100) // check if path exists, and whether it is a directory or a file @@ -47,13 +47,13 @@ func NewServer(host string, port int, watch bool, path string, maxDuration int, } updatesChan := make(chan loader.Update, 100) - l, err := loader.NewLoader(fs, watch, fileChanges, updatesChan, maxDuration, timeout) + l, err := loader.NewLoader(fs, watch, fileChanges, updatesChan, maxDuration, timeout, serveGif) if err != nil { return nil, err } addr := fmt.Sprintf("%s:%d", host, port) - b, err := browser.NewBrowser(addr, filepath.Base(path), watch, updatesChan, l) + b, err := browser.NewBrowser(addr, filepath.Base(path), watch, updatesChan, l, serveGif) if err != nil { return nil, err } diff --git a/src/features/config/ConfigManager.jsx b/src/features/config/ConfigManager.jsx index 6b4facfff6..87439da5d1 100644 --- a/src/features/config/ConfigManager.jsx +++ b/src/features/config/ConfigManager.jsx @@ -33,7 +33,7 @@ export default function ConfigManager() { formData.set(id, item.value); }); - if (!loading || !('webp' in preview)) { + if (!loading || !('img' in preview)) { updatePreviews(formData, params); } }, [config]); diff --git a/src/features/controls/Controls.jsx b/src/features/controls/Controls.jsx index 9613a5586c..8a9a0749e4 100644 --- a/src/features/controls/Controls.jsx +++ b/src/features/controls/Controls.jsx @@ -12,7 +12,7 @@ export default function Controls() { const dispatch = useDispatch(); let imageType = 'webp'; - if (PIXLET_WASM) { + if (PIXLET_WASM || preview.value.img_type === "gif") { imageType = 'gif'; } @@ -21,7 +21,7 @@ export default function Controls() { const element = document.createElement("a"); // convert base64 to raw binary data held in a string - let byteCharacters = atob(preview.value.webp); + let byteCharacters = atob(preview.value.img); // create an ArrayBuffer with a size in bytes let arrayBuffer = new ArrayBuffer(byteCharacters.length); diff --git a/src/features/preview/Preview.jsx b/src/features/preview/Preview.jsx index b12a6f8422..2c44ac5b30 100644 --- a/src/features/preview/Preview.jsx +++ b/src/features/preview/Preview.jsx @@ -60,16 +60,16 @@ export default function Preview() { const preview = useSelector(state => state.preview); let displayType = 'data:image/webp;base64,'; - if (PIXLET_WASM) { + if (PIXLET_WASM || preview.value.img_type === "gif") { displayType = 'data:image/gif;base64,'; } - let webp = 'UklGRhoAAABXRUJQVlA4TA4AAAAvP8AHAAcQEf0PRET/Aw=='; - if (preview.value.webp) { - webp = preview.value.webp; + let img = 'UklGRhoAAABXRUJQVlA4TA4AAAAvP8AHAAcQEf0PRET/Aw=='; + if (preview.value.img) { + img = preview.value.img; } - let content =