Comments (6)
Yes, it is possible but it is undocumented for two reasons, the main one being that Pebble.js is missing a resource unload/eviction policy. The other is the handling of large remote images which will either require packet segmenting or using the png format natively. I've replied to the forum thread with slightly more information.
I hope to eventually work out these issues.
from pebblejs.
It would be nice, maybe, to be able to use data-url images as well.
from pebblejs.
data-url is an interesting idea, I'll keep that in mind.
There was some progress on this ticket with e1ace40. That merge allows images larger than 2K to load. I may improve this to have a progress bar since it's not exactly the best user experience. It's also still lacking an onload callback for knowing when the image is done loading.
Be sure to add the suffix #width:144
when loading remote images that are not resized for the pebble as noted in the forum post. Using a smaller width is even better. When this ticket is fully implemented I'll be sure to update the documentation on that.
from pebblejs.
Ok I'll do a test to display my home connected camera on my Pebble.
First, I prepared image for Pebble with GD and PHP :
if ($this->isPebble) {
header("Content-type: image/png");
$size = getimagesizefromstring($img);
imagefilter($image, IMG_FILTER_GRAYSCALE);
imagefilter($image, IMG_FILTER_CONTRAST, -255);
$width = $size[0];
$height = $size[1];
$coeff = ((144*100)/$width)/100;
$newWidth = $width*$coeff;
$newHeight = $height*$coeff;
$resizeImage = @imagecreatetruecolor(intval($newWidth), intval($newHeight));
imagecopyresized($resizeImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
ob_start ();
imagepng ($resizeImage);
$img = ob_get_contents ();
ob_end_clean ();
}
This will resize picture and transform image to greyscale.
Then I used code you described above :
var camUrl = baseUrl + 'method=getCamera&pebble=true#width:144';
if (camImage != null) {
cameraContainer.remove(camImage);
}
console.log(camUrl);
var camImage = new UI.Image({
position: new Vector2(0, 0),
size: new Vector2(144, 168),
image: camUrl
});
console.log('Adding image !');
cameraContainer.add(camImage);
cameraContainer.show();
And it works great !
Anyway, the watchapp crashes sometimes after displaying image.
Thanks for the work !
from pebblejs.
That's great to hear, and you're welcome! It actually has dithering built in too. It's much more impressive with that turned on. Use #width:144,dither
to both set the width and turn on dithering.
Ah, it must be running out of memory somehow. Thanks for reporting the crash. It already flushes the resource cache when changing windows. Perhaps I should also add reference counting to flush particular images in a long standing window. I'll look into this further.
For anyone else fiddling, it currently only supports PNG's using the wonderful library at https://github.com/devongovett/png.js/. I'll be adding JPEG and GIF support after all the kinks in remote loading are ironed out.
from pebblejs.
I managed the image removal with an event, and the app crash less often.
cameraContainer.on('hide', function(e) {
console.log('Removing camera image');
camImage.remove();
});
For me the issue can be closed. Thank you it works like a charm.
from pebblejs.
Related Issues (20)
- [Bug] Run time error when show UI.card() HOT 4
- [Bug] Error when building with the SDK 3.10 HOT 1
- [Feature Request] Disconnected message as a customisable image, like the startup screen
- [Bug] Card goes fullscreen when going back from Menu
- need a cloudpebble update HOT 3
- Bug in OGPebble 3.11.1 HOT 3
- Accel 'tap' event not very sensitive HOT 4
- Number conversion to string - Menus HOT 2
- App crashed when move from a Window to Menu HOT 17
- [Bug] Menu Screen Dotted Line HOT 3
- [Bug] Scrolling issue on Aplite HOT 6
- Circle.radius accessor is undefined HOT 1
- Modifications while Voice window is the top window cause a crash HOT 1
- Cloud Pebble Unable to Upload Images (PNG)
- Settings.config callback crashes when passed option containing encoded percent sign HOT 2
- Pebble.js compilation fails for Pebble 2 / Diorid HOT 2
- Application crash on pebble HOT 10
- Porting Pebble.js to Canvas (rocky.js)
- Wakeup not discarding itself or cancelling
- .
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pebblejs.