Import the pebble dev site into devsite/

devsite/source/_posts/2015-05-13-tips-and-tricks-transparent-images.md

@@ -0,0 +1,107 @@
+---
+# Copyright 2025 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+title: Tips and Tricks - Transparent Images
+author: chrislewis
+tags:
+   - Beautiful Code
+---
+
+Ever wondered how to draw transparent images in a Pebble app? This post will
+walk you through the process.
+
+In this post, we'll be using a sample image with a transparency component, shown
+below:
+
+<a href="{{ site.asset_path }}/images/blog/tips-transparency-globe.png" download>
+<img src="{{ site.asset_path }}/images/blog/tips-transparency-globe.png">
+</a>
+
+
+
+When adding your project resource, ensure you set its ‘type’ correctly. On
+CloudPebble, this is done when uploading the resource and choosing the 'PNG'
+type. In the SDK, this is done with the `png` `type` in the project's
+`appinfo.json`.
+
+```js
+"media": [
+  {
+    "type": "png",
+    "name": "GLOBE",
+    "file": "globe.png"
+  }
+]
+```
+
+This will create a resource ID to use in code:
+
+```text
+RESOURCE_ID_GLOBE
+```
+
+Simply create a ``GBitmap`` with this resource and draw the image with
+``GCompOpSet`` as the compositing mode:
+
+```c
+static GBitmap *s_bitmap;
+static Layer *s_canvas_layer;
+```
+
+```c
+static void window_load(Window *window) {
+  Layer *window_layer = window_get_root_layer(window);
+
+  // Create GBitmap
+  s_bitmap = gbitmap_create_with_resource(RESOURCE_ID_GLOBE);
+
+  // Create canvas Layer
+  s_canvas_layer = layer_create(layer_get_bounds(window_layer));
+  layer_set_update_proc(s_canvas_layer, layer_update_proc);
+  layer_add_child(window_layer, s_canvas_layer);
+}
+```
+
+```c
+static void layer_update_proc(Layer *layer, GContext *ctx) {
+  // Draw the image with the correct compositing mode
+  graphics_context_set_compositing_mode(ctx, GCompOpSet);
+  graphics_draw_bitmap_in_rect(ctx, s_bitmap, gbitmap_get_bounds(s_bitmap));
+}
+```
+
+When drawing on a ``TextLayer`` underneath `s_canvas_layer`, the result looks
+like this:
+
+![result-aplite >{pebble-screenshot,pebble-screenshot--steel-black}](/images/blog/tips-result-aplite.png)
+
+
+See a full demo of this technique on the
+[pebble-examples GitHub repo]({{site.links.examples_org}}/feature-image-transparent).
+
+Job done! Any transparent pixels in the original image will be drawn as clear,
+leaving the color beneath unaffected.
+
+Read the [Image Resources](/guides/app-resources/) guide to learn more
+about transparent PNGs.
+
+
+## Conclusion
+
+So there you have it. Using these examples you can easily implement transparency
+on all Pebble platforms. To learn more, read the ``GCompOp`` documentation or
+the
+[`pebble-examples/feature-image-transparent`]({{site.links.examples_org}}/feature-image-transparent)
+SDK example.