Fix layers list styles, enable auto-save

src/components/App.vue

@@ -38,16 +38,15 @@ const flipperPreviewBtnText = computed(() => (flipper.value ? 'Disconnect' : 'Li
 const showCopyCode = computed(() => updates.value && session.state.layers.length > 0);
 
 const flipper: ShallowRef<FlipperRPC> = ref(null);
-let isChanged = ref(false);
 
 watch(
  updates,
  debounce(() => {
  if (flipper.value) {
  sendFlipperImage();
  }
- isChanged.value = true;
- }, 500)
+ saveLayers();
+ }, 1000)
 );
 
 // methods
@@ -133,12 +132,6 @@ function sendFlipperImage() {
  flipper.value.sendImage(virtualScreen.canvasContext.getImageData(0, 0, 128, 64));
 }
 
-function saveChanges() {
- saveLayers();
- isChanged.value = false;
- logEvent('button_save');
-}
-
 onMounted(() => {
  postParentMessage('mounted', {});
 });
@@ -184,13 +177,6 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
  >
  {{ flipperPreviewBtnText }}
  </FuiButton>
- <FuiButton
- v-if="!session.state.isPublic && isChanged"
- @click="saveChanges"
- title="Save changes for selected library"
- >
- Save
- </FuiButton>
  </div>
  <FuiTools v-if="!session.state.isPublic"></FuiTools>
  </div>
@@ -251,13 +237,13 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
 
  display: grid;
  grid-template-columns: 180px 4fr 240px;
- grid-template-rows: auto auto auto;
+ grid-template-rows: 80px auto 450px;
  grid-column-gap: 16px;
  grid-row-gap: 8px;
 }
 
 .fui-editor__left {
- grid-area: 1 / 1 / 6 / 2;
+ grid-area: 1 / 1 / 5 / 2;
 }
 .fui-editor__top {
  grid-area: 1 / 2 / 2 / 4;

src/components/fui/FuiCanvas.vue

@@ -11,6 +11,7 @@ const session = useSession();
 const {editor, virtualScreen, state} = session;
 const {display, scale, lock} = toRefs(state);
 const {activeTool} = toRefs(editor.state);
+
 onMounted(() => {
  virtualScreen.setCanvas(screen.value);
  editor.setContainer(container.value as HTMLElement);

src/components/fui/FuiLayers.vue

@@ -67,4 +67,13 @@ function getLayerListItem(layer: UnwrapRef<AbstractLayer>) {
  </VueDraggable>
  </div>
 </template>
-<style lang="css"></style>
+<style lang="css" scoped>
+
+.layers__list {
+ font-size: 24px;
+ overflow: hidden;
+ margin: 0 16px 16px 0;
+ padding: 0 0 8px 0;
+ overflow-y: auto;
+}
+</style>

src/editor/editor.ts

@@ -113,7 +113,7 @@ export class Editor {
  if (this.session.state.isPublic) {
  return;
  }
- if (event.target === document.body && Object.values(Keys).indexOf(event.code as Keys) != -1) {
+ if (Object.values(Keys).indexOf(event.code as Keys) != -1) {
  event.preventDefault();
  this.onKeyDown(Keys[event.code], event);
  }

styles.css

@@ -34,11 +34,6 @@ body {
 }
 
 
-
-.fui-editor__left {
- /* width: 178px; */
-}
-
 #lopaka_app {
  display: flex;
 }
@@ -69,15 +64,6 @@ body {
  margin: 0 8px 8px 0;
 }
 
-.layers__list {
- font-size: 24px;
- overflow: hidden;
- margin: 0 16px 16px 0;
- padding: 0;
- max-height: 100vh;
- overflow-y: auto;
-}
-
 .layer {
  display: flex;
  align-items: center;

tests/source_u8g2_esp-idf_wrapped.c

@@ -0,0 +1,36 @@
+static const uint8_t image_paint_0_bits[] = {0x04,0x0e,0x1f};
+static const uint8_t image_paint_1_bits[] = {0x1f,0x0e,0x04};
+static const uint8_t image_paint_2_bits[] = {0x01,0x03,0x07,0x03,0x01};
+u8g2_ClearBuffer(&u8g2); 
+u8g2_SetBitmapMode(&u8g2, 1);
+u8g2_SetFontMode(&u8g2, 1);
+void draw(void) {
+ u8g2_DrawXBM(&u8g2, 72, 0, 5, 3, image_paint_0_bits);
+ u8g2_DrawXBM(&u8g2, 15, 0, 5, 3, image_paint_0_bits);
+ u8g2_SetFont(&u8g2, u8g2_font_profont22_tr);
+ u8g2_DrawStr(&u8g2, 36, 34, "All-in-one");
+ u8g2_DrawStr(&u8g2, 35, 50, " embedded");
+ u8g2_DrawStr(&u8g2, 19, 66, "graphics tool");
+ u8g2_SetFont(&u8g2, u8g2_font_5x8_tr);
+ u8g2_DrawStr(&u8g2, 1, 11, "Platforms");
+ u8g2_DrawStr(&u8g2, 59, 11, "Screens");
+ u8g2_DrawStr(&u8g2, 0, 83, "Code");
+ u8g2_DrawStr(&u8g2, 40, 83, "Convert");
+ u8g2_DrawXBM(&u8g2, 4, 93, 5, 3, image_paint_1_bits);
+ u8g2_DrawXBM(&u8g2, 40, 93, 5, 3, image_paint_1_bits);
+ u8g2_DrawStr(&u8g2, 0, 90, "preview");
+ u8g2_DrawStr(&u8g2, 40, 90, "images");
+ u8g2_SetFont(&u8g2, u8g2_font_4x6_tr);
+ u8g2_DrawStr(&u8g2, 166, 31, "Fonts");
+ u8g2_DrawXBM(&u8g2, 188, 26, 3, 5, image_paint_2_bits);
+ u8g2_DrawStr(&u8g2, 91, 87, "U8G2");
+ u8g2_DrawFrame(&u8g2, 87, 79, 23, 11);
+ u8g2_DrawStr(&u8g2, 116, 87, "ADAFRUIT");
+ u8g2_DrawStr(&u8g2, 156, 87, "FLIPPER");
+ u8g2_DrawFrame(&u8g2, 113, 79, 37, 11);
+ u8g2_DrawFrame(&u8g2, 153, 79, 33, 11);
+ u8g2_DrawXBM(&u8g2, 116, 0, 5, 3, image_paint_0_bits);
+ u8g2_SetFont(&u8g2, u8g2_font_5x8_tr);
+ u8g2_DrawStr(&u8g2, 107, 11, "Scale");
+}
+u8g2_SendBuffer(&u8g2);