├── .github └── FUNDING.yml ├── .gitignore ├── README.md ├── app.js ├── assets.zip ├── fonts ├── haxrcorp-4089.otf ├── haxrcorp_4089_cyrillic_altgr.eot ├── haxrcorp_4089_cyrillic_altgr.svg ├── haxrcorp_4089_cyrillic_altgr.ttf ├── haxrcorp_4089_cyrillic_altgr.woff └── helvb08.ttf ├── fui-screenshot.png ├── img ├── 125_10px.png ├── ActiveConnection_50x64.png ├── Alert_9x8.png ├── ArrowC_1_36x36.png ├── ArrowDownEmpty_14x15.png ├── ArrowDownFilled_14x15.png ├── ArrowUpEmpty_14x15.png ├── ArrowUpFilled_14x15.png ├── Attention_5x8.png ├── Auth_62x31.png ├── BLE_Pairing_128x64.png ├── Background_128x11.png ├── BatteryBody_52x28.png ├── Battery_16x16.png ├── Battery_26x8.png ├── Ble_connected_15x15.png ├── Ble_disconnected_15x15.png ├── Bluetooth_Connected_16x8.png ├── Bluetooth_Idle_5x8.png ├── ButtonCenter_7x7.png ├── ButtonDown_7x4.png ├── ButtonLeftSmall_3x5.png ├── ButtonLeft_4x7.png ├── ButtonRightSmall_3x5.png ├── ButtonRight_4x7.png ├── ButtonUp_7x4.png ├── Button_18x18.png ├── Certification1_103x56.png ├── Certification2_98x33.png ├── Charging-lightning_9x10.png ├── Charging-lightning_mask_9x10.png ├── Circles_47x47.png ├── Clock_18x18.png ├── Connect_me_62x31.png ├── Connected_62x31.png ├── CoolHi_25x27.png ├── CoolHi_hvr_25x27.png ├── CoolLo_25x27.png ├── CoolLo_hvr_25x27.png ├── Cry_dolph_55x52.png ├── DFU_128x50.png ├── Dehumidify_25x27.png ├── Dehumidify_hvr_25x27.png ├── Detailed_chip_17x13.png ├── DolphinCommon_56x48.png ├── DolphinMafia_115x62.png ├── DolphinNice_96x59.png ├── DolphinReadingSuccess_59x63.png ├── DolphinWait_61x59.png ├── DoorLeft_70x55.png ├── DoorRight_70x55.png ├── Down_25x27.png ├── Down_hvr_25x27.png ├── Drive_112x35.png ├── Error_18x18.png ├── Error_62x31.png ├── EviSmile1_18x21.png ├── EviSmile2_18x21.png ├── EviWaiting1_18x21.png ├── EviWaiting2_18x21.png ├── FaceCharging_29x14.png ├── FaceConfused_29x14.png ├── FaceNopower_29x14.png ├── FaceNormal_29x14.png ├── GameMode_11x8.png ├── Health_16x16.png ├── HeatHi_25x27.png ├── HeatHi_hvr_25x27.png ├── HeatLo_25x27.png ├── HeatLo_hvr_25x27.png ├── Hidden_window_9x8.png ├── InfraredArrowDown_4x8.png ├── InfraredArrowUp_4x8.png ├── InfraredLearnShort_128x31.png ├── KeyBackspaceSelected_16x9.png ├── KeyBackspace_16x9.png ├── KeySaveSelected_24x11.png ├── KeySave_24x11.png ├── Keychain_39x36.png ├── Left_mouse_icon_9x9.png ├── Lock_7x8.png ├── Lock_8x8.png ├── MHz_25x11.png ├── Medium-chip-22x21.png ├── Modern_reader_18x34.png ├── Move_flipper_26x39.png ├── Mute_25x27.png ├── Mute_hvr_25x27.png ├── NFC_manual_60x50.png ├── Nfc_10px.png ├── Off_25x27.png ├── Off_hvr_25x27.png ├── Ok_btn_9x9.png ├── Ok_btn_pressed_13x13.png ├── Percent_10x14.png ├── Pin_arrow_down_7x9.png ├── Pin_arrow_left_9x7.png ├── Pin_arrow_right_9x7.png ├── Pin_arrow_up_7x9.png ├── Pin_attention_dpad_29x29.png ├── Pin_back_arrow_10x8.png ├── Pin_back_full_40x8.png ├── Pin_pointer_5x3.png ├── Pin_star_7x7.png ├── Power_25x27.png ├── Power_hvr_25x27.png ├── Pressed_Button_13x13.png ├── Quest_7x8.png ├── RFIDBigChip_37x36.png ├── RFIDDolphinReceive_97x61.png ├── RFIDDolphinSend_97x61.png ├── RFIDDolphinSuccess_108x57.png ├── Reader_detect_43x40.png ├── Release_arrow_18x15.png ├── Restoring_38x32.png ├── Right_mouse_icon_9x9.png ├── SDQuestion_35x43.png ├── SDcardFail_11x8.png ├── SDcardMounted_11x8.png ├── Scanning_123x52.png ├── SmallArrowDown_3x5.png ├── SmallArrowDown_4x7.png ├── SmallArrowUp_3x5.png ├── SmallArrowUp_4x7.png ├── Smile_18x18.png ├── Space_65x18.png ├── Tap_reader_36x38.png ├── Temperature_16x16.png ├── Unlock_7x8.png ├── Unplug_bg_bottom_128x10.png ├── Unplug_bg_top_128x14.png ├── Up_25x27.png ├── Up_hvr_25x27.png ├── Updating_32x40.png ├── UsbTree_48x22.png ├── Vol_down_25x27.png ├── Vol_down_hvr_25x27.png ├── Vol_up_25x27.png ├── Vol_up_hvr_25x27.png ├── Voldwn_6x6.png ├── Voltage_16x16.png ├── Volup_8x6.png ├── WarningDolphin_45x42.png ├── Warning_30x23.png ├── back_10px.png ├── badusb_10px.png ├── dir_10px.png ├── iButtonDolphinVerySuccess_108x52.png ├── iButtonKey_49x44.png ├── ibutt_10px.png ├── ir_10px.png ├── loading_10px.png ├── music_10px.png ├── passport_bad1_46x49.png ├── passport_bad2_46x49.png ├── passport_bad3_46x49.png ├── passport_bottom_128x18.png ├── passport_happy1_46x49.png ├── passport_happy2_46x49.png ├── passport_happy3_46x49.png ├── passport_left_6x46.png ├── passport_okay1_46x49.png ├── passport_okay2_46x49.png ├── passport_okay3_46x49.png ├── sub1_10px.png ├── u2f_10px.png ├── unknown_10px.png └── update_10px.png ├── index.html ├── js ├── components.js ├── const.js ├── templates.js └── utils.js └── styles.css /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: sbrin 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | editor.html 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![License: CC BY-NC-ND 4.0](https://licensebuttons.net/l/by-nc-nd/4.0/80x15.png)](https://creativecommons.org/licenses/by-nc-nd/4.0/) 2 | 3 | # FUI Editor - Flipper Zero user interface editor (check description below) 4 | 5 | *** 6 | 7 | ## ___This project is deprecated. Please follow the new, better and improved:___ 8 | 9 | # *[Lopaka - Embedded graphics builder for U8g2 and Flipper Zero](https://github.com/sbrin/lopaka)* 10 | 11 | *** 12 | 13 | The GUI editor/generator for [Flipper Zero](https://flipperzero.one/). 14 | 15 | Draw any graphics and use generated code in your Flipper application! 16 | 17 | * drag and drop icons 18 | * remove, edit elements 19 | * generate and copy the code 20 | * you have to place icons images to your app assets directory ([download default icons set](assets.zip)) 21 | 22 | ## How to run locally 23 | 24 | Use any HTTP server, i.e: 25 | 26 | ``` 27 | yarn global add http-server 28 | http-server 29 | ``` 30 | 31 | Then go to `http://127.0.0.1:8080/` 32 | 33 | ### Disclaimer 34 | 35 | It is a reeeeeally simple Vue.JS application. Use it with care. 36 | 37 | The main concept I follow is: there should be **no build stage**, which is typically a step in the software development process that involves compiling code and creating executables, for applications. 38 | 39 | Instead, the idea being proposed is that applications should be designed to be easy to start, or run, in any environment, without the need for a build stage. 40 | 41 | This means that the application should be able to run on any device or operating system without the need for additional setup or configuration. 42 | 43 | The goal of this approach is to make it easier for users to start using the application, and to reduce the complexity of the development process. 44 | 45 | - No mobile devices support 46 | 47 | - No tests (so far) 48 | 49 | - No typings 50 | 51 | - No build 52 | 53 | #### Custom icons 54 | 55 | Drag and drop PNG and use it in your UI prototype. 56 | 57 | Requirements: 58 | * Maximum size 128×64px 59 | * Black and white 60 | * PNG 61 | * Without shades or alpha channel. 62 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | let CTX; 2 | 3 | Vue.createApp({ 4 | template: fuiEditorTmpl, 5 | data() { 6 | return { 7 | layerIndex: 1, 8 | fuiImages: {}, 9 | customImages: [], 10 | codePreview: "", 11 | screenElements: [], 12 | screenCurrentElement: null, 13 | mouseClick_x: 0, 14 | mouseClick_y: 0, 15 | mouseClick_dx: 0, 16 | mouseClick_dy: 0, 17 | oX: 0, 18 | oY: 0, 19 | activeTool: "frame", 20 | mainTab: "icons", 21 | isDrawing: false, 22 | isMoving: false, 23 | defaultFont: "FontPrimary", 24 | isInverted: false, 25 | }; 26 | }, 27 | computed: { 28 | canvasClassNames() { 29 | return { 30 | 'fui-canvas_select': this.activeTool === 'select', 31 | 'fui-canvas_moving': this.isMoving, 32 | } 33 | }, 34 | isEmpty() { 35 | return this.screenElements.length === 0 36 | } 37 | }, 38 | methods: { 39 | setMainTab(tab) { 40 | this.mainTab = tab; 41 | }, 42 | prepareImages(e) { 43 | this.fuiImages = e; 44 | }, 45 | setActiveTool(tool) { 46 | this.activeTool = tool; 47 | }, 48 | setCurrentItem(item) { 49 | this.screenCurrentElement = item; 50 | }, 51 | removeLayer(index) { 52 | this.screenCurrentElement = undefined; 53 | this.screenElements = this.screenElements.filter( 54 | (item) => item.index !== index 55 | ); 56 | this.redrawCanvas(); 57 | }, 58 | addImageToCanvas(name, x = 32, y = 16) { 59 | this.screenElements.push({ 60 | type: "icon", 61 | custom: this.fuiImages[name].custom, 62 | x: x, 63 | y: y, 64 | width: this.fuiImages[name].width, 65 | height: this.fuiImages[name].height, 66 | name: name, 67 | index: this.layerIndex, 68 | }); 69 | this.screenCurrentElement = this.screenElements.find(item => item.index === this.layerIndex); 70 | this.layerIndex += 1; 71 | this.redrawCanvas(); 72 | this.activeTool = "select"; 73 | }, 74 | async canvasOnDrop(e) { 75 | e.preventDefault(); 76 | e.stopPropagation(); 77 | const [offsetSrcImgX, offsetSrcImgY] = e.dataTransfer.getData("offset") 78 | ? e.dataTransfer.getData("offset").split(",") 79 | : [0, 0]; 80 | const offsetTargetX = scaleDown(e.offsetX - offsetSrcImgX); 81 | const offsetTargetY = scaleDown(e.offsetY - offsetSrcImgY); 82 | let name = e.dataTransfer.getData("name"); 83 | 84 | if (!name) { 85 | const file = e.dataTransfer.files[0]; 86 | name = file.name.substr(0, file.name.lastIndexOf('.')) || file.name; // remove file extension 87 | const fileResult = await readFileAsync(file); 88 | const image = await loadImageAsync(fileResult); 89 | if (!this.fuiImages[name]) { 90 | this.fuiImages[name] = { 91 | width: image.width, 92 | height: image.height, 93 | element: image, 94 | custom: true, 95 | }; 96 | this.customImages = [...this.customImages, { 97 | name: name, 98 | width: image.width, 99 | height: image.height, 100 | element: image, 101 | src: image.src, 102 | custom: true, 103 | }]; 104 | } 105 | } 106 | this.addImageToCanvas(name, offsetTargetX, offsetTargetY); 107 | }, 108 | canvasMouseDown(e) { 109 | e.preventDefault(); 110 | if (e.button !== 0) { 111 | return; 112 | } 113 | const [x, y] = [e.offsetX, e.offsetY]; 114 | this.mouseClick_x = x - (x % 4); 115 | this.mouseClick_y = y - (y % 4); 116 | this.screenCurrentElement = undefined; 117 | this.isDrawing = true; 118 | 119 | if (["frame", "box", "dot", "circle", "disc"].includes(this.activeTool)) { 120 | this.screenCurrentElement = { 121 | type: this.activeTool, 122 | x: scaleDown(x), 123 | y: scaleDown(y), 124 | width: 1, 125 | height: 1, 126 | radius: 0, 127 | index: this.layerIndex 128 | }; 129 | this.layerIndex += 1; 130 | this.screenElements.push(this.screenCurrentElement); 131 | } else if (this.activeTool === "line") { 132 | this.screenCurrentElement = { 133 | type: this.activeTool, 134 | x: scaleDown(x), 135 | y: scaleDown(y), 136 | x2: scaleDown(x), 137 | y2: scaleDown(y), 138 | width: 0, 139 | height: 0, 140 | index: this.layerIndex 141 | }; 142 | this.layerIndex += 1; 143 | this.screenElements.push(this.screenCurrentElement); 144 | } else if (this.activeTool === "str") { 145 | this.screenCurrentElement = { 146 | type: this.activeTool, 147 | x: scaleDown(x), 148 | y: scaleDown(y), 149 | yy: scaleDown(y) - textContainerHeight[this.defaultFont], 150 | index: this.layerIndex, 151 | text: "Text string", 152 | width: getTextWidth("Text string", this.defaultFont), 153 | height: textContainerHeight[this.defaultFont], 154 | font: this.defaultFont, 155 | }; 156 | this.layerIndex += 1; 157 | this.screenElements.push(this.screenCurrentElement); 158 | } else { 159 | // Moving otherwise 160 | const current = getElementByOffset(this.screenElements, x, y); 161 | if (current) { 162 | this.isMoving = true; 163 | this.screenCurrentElement = current; 164 | const currentX = scaleUp(this.screenCurrentElement.x); 165 | const currentY = scaleUp(this.screenCurrentElement.y); 166 | this.mouseClick_dx = this.mouseClick_x - currentX; 167 | this.mouseClick_dy = this.mouseClick_y - currentY; 168 | } 169 | } 170 | }, 171 | canvasMouseMove(e) { 172 | e.preventDefault(); 173 | if (!this.screenCurrentElement || !this.isDrawing) { 174 | return; 175 | } 176 | let x = 177 | this.mouseClick_x > canvasBoundX ? canvasBoundX : this.mouseClick_x; 178 | let y = 179 | this.mouseClick_y > canvasBoundY ? canvasBoundY : this.mouseClick_y; 180 | const offsetX = scaleDown(e.offsetX); 181 | const offsetY = scaleDown(e.offsetY); 182 | if (["line", "frame", "box", "circle", "disc"].includes(this.activeTool)) { 183 | if ( 184 | e.offsetX >= 0 && 185 | e.offsetY >= 0 && 186 | e.offsetX < canvasBoundX && 187 | e.offsetY < canvasBoundY 188 | ) { 189 | if (this.activeTool === "frame") { 190 | x = x >= canvasBoundX - 4 ? canvasBoundX - 4 : x; 191 | y = y >= canvasBoundY - 4 ? canvasBoundY - 4 : y; 192 | } 193 | this.screenCurrentElement.x = scaleDown(x); 194 | this.screenCurrentElement.y = scaleDown(y); 195 | 196 | if (["line"].includes(this.activeTool)) { 197 | this.screenCurrentElement.x2 = offsetX; 198 | this.screenCurrentElement.y2 = offsetY; 199 | } 200 | if (["frame", "box"].includes(this.activeTool)) { 201 | const width = e.offsetX - this.mouseClick_x; 202 | const height = e.offsetY - this.mouseClick_y; 203 | this.screenCurrentElement.width = scaleSize(width); 204 | this.screenCurrentElement.height = scaleSize(height); 205 | } 206 | if (["circle", "disc"].includes(this.activeTool)) { 207 | let width = e.offsetX - this.mouseClick_x; 208 | let height = e.offsetY - this.mouseClick_y; 209 | 210 | const absWidth = Math.abs(width); 211 | const absHeight = Math.abs(height); 212 | 213 | let diameter = absWidth > absHeight ? absWidth : absHeight; 214 | if (width < 0) { 215 | this.screenCurrentElement.x = scaleDown(this.mouseClick_x - diameter); 216 | } 217 | if (height < 0) { 218 | this.screenCurrentElement.y = scaleDown(this.mouseClick_y - diameter); 219 | } 220 | 221 | this.screenCurrentElement.width = scaleSize(diameter); 222 | this.screenCurrentElement.height = scaleSize(diameter); 223 | this.screenCurrentElement.radius = scaleSize(Math.abs(diameter) / 2); 224 | } 225 | } 226 | } else if (this.activeTool === "dot") { 227 | this.screenCurrentElement.x = offsetX; 228 | this.screenCurrentElement.y = offsetY; 229 | } else { 230 | x = e.offsetX - this.mouseClick_dx; 231 | y = e.offsetY - this.mouseClick_dy; 232 | if (["str"].includes(this.screenCurrentElement.type)) { 233 | this.screenCurrentElement.yy = scaleDown(y) - textContainerHeight[this.screenCurrentElement.font]; 234 | } 235 | if (["line"].includes(this.screenCurrentElement.type)) { 236 | const { 237 | x: x1, 238 | y: y1, 239 | x2, 240 | y2 241 | } = this.screenCurrentElement; 242 | const width = Math.abs(x2 - x1); 243 | const height = Math.abs(y2 - y1); 244 | if (x2 > x1) { 245 | this.screenCurrentElement.x2 = scaleDown(x) + width; 246 | } else { 247 | this.screenCurrentElement.x2 = scaleDown(x) - width; 248 | } 249 | if (y2 > y1) { 250 | this.screenCurrentElement.y2 = scaleDown(y) + height; 251 | } else { 252 | this.screenCurrentElement.y2 = scaleDown(y) - height; 253 | } 254 | } 255 | this.screenCurrentElement.x = scaleDown(x); 256 | this.screenCurrentElement.y = scaleDown(y); 257 | } 258 | this.redrawCanvas(); 259 | }, 260 | canvasMouseLeave(e) { 261 | e.preventDefault(); 262 | if (this.activeTool === "select") { 263 | this.isDrawing = false; 264 | this.stopDrawing(e); 265 | } 266 | this.isMoving = false; 267 | }, 268 | canvasMouseUp(e) { 269 | if (this.isDrawing) { 270 | e.preventDefault(); 271 | this.stopDrawing(e); 272 | this.redrawCanvas(); 273 | } 274 | this.isMoving = false; 275 | this.isDrawing = false; 276 | }, 277 | stopDrawing() { 278 | if (this.screenCurrentElement) { 279 | if (["frame", "box"].includes(this.activeTool)) { 280 | if (this.screenCurrentElement.width < 0) { 281 | this.screenCurrentElement.width = Math.abs( 282 | this.screenCurrentElement.width 283 | ); 284 | this.screenCurrentElement.x -= this.screenCurrentElement.width; 285 | } 286 | if (this.screenCurrentElement.height < 0) { 287 | this.screenCurrentElement.height = Math.abs( 288 | this.screenCurrentElement.height 289 | ); 290 | this.screenCurrentElement.y -= this.screenCurrentElement.height; 291 | } 292 | } 293 | } 294 | }, 295 | redrawCanvas() { 296 | CTX.save(); 297 | CTX.clearRect(0, 0, canvasWidth, canvasHeight); 298 | for (let i = 0; i < this.screenElements.length; i++) { 299 | const imgData = CTX.getImageData( 300 | 0, 301 | 0, 302 | canvasWidth, 303 | canvasHeight 304 | ); 305 | const { 306 | name, 307 | x, 308 | y, 309 | x2, 310 | y2, 311 | width, 312 | height, 313 | radius, 314 | type, 315 | text, 316 | font 317 | } = this.screenElements[i]; 318 | if (type === "frame") { 319 | CTX.strokeRect(x + 0.5, y + 0.5, width, height); 320 | } else if (type === "box") { 321 | CTX.fillRect(x, y, width, height); 322 | } else if (type === "dot") { 323 | CTX.fillRect(x, y, 1, 1); 324 | } else if (type === "icon") { 325 | CTX.drawImage(this.fuiImages[name].element, x, y); 326 | } else if (type === "line") { 327 | bline(imgData, x, y, x2, y2); 328 | CTX.putImageData(imgData, 0, 0); 329 | } else if (type === "circle") { 330 | drawCircle(imgData, x + radius, y + radius, radius); 331 | CTX.putImageData(imgData, 0, 0); 332 | } else if (type === "disc") { 333 | drawDisc(imgData, x + radius, y + radius, radius); 334 | CTX.putImageData(imgData, 0, 0); 335 | } else if (type === "str") { 336 | if (font === "FontBigNumbers") { 337 | drawBigNumbers(imgData, x, y - 16, text); 338 | CTX.putImageData(imgData, 0, 0); 339 | } else { 340 | const fontSize = fontSizes[font]; 341 | CTX.font = `${fontSize}px ${font}`; 342 | CTX.fillText(text, x, y); 343 | } 344 | } 345 | } 346 | const newImgData = maskBlack(CTX, this.isInverted); 347 | CTX.putImageData(newImgData, 0, 0); 348 | CTX.restore(); 349 | this.codePreview = generateCode(this.screenElements, this.isInverted); 350 | }, 351 | resetScreen() { 352 | this.screenElements = []; 353 | this.redrawCanvas(); 354 | this.codePreview = ""; 355 | this.screenCurrentElement = undefined; 356 | }, 357 | copyCode() { 358 | navigator.clipboard.writeText(this.codePreview); 359 | }, 360 | cleanCustomIcons() { 361 | this.customImages = []; 362 | this.screenElements = this.screenElements.filter(item => !item.custom); 363 | this.redrawCanvas(); 364 | if (this.screenCurrentElement && this.screenCurrentElement.custom) { 365 | this.screenCurrentElement = undefined; 366 | } 367 | }, 368 | toggleInvert() { 369 | this.isInverted = !this.isInverted; 370 | } 371 | }, 372 | mounted() { 373 | CTX = this.$refs.screen.getContext("2d"); 374 | CTX.strokeWidth = 1; 375 | CTX.textRendering = "optimizeSpeed"; 376 | 377 | document.addEventListener("mouseup", this.canvasMouseUp); 378 | } 379 | }) 380 | .component("fui-layers", fuiLayersComponent) 381 | .component("fui-button", fuiButtonComponent) 382 | .component("fui-icons", fuiIconsComponent) 383 | .component("fui-tools", fuiToolsComponent) 384 | .component("fui-inspector", fuiInspectorComponent) 385 | .component("fui-settings", fuiSettingsComponent) 386 | .component("fui-code", fuiCodeComponent) 387 | .component("fui-tabs", fuiTabsComponent) 388 | .component("fui-inspector-input", fuiInspectorInputComponent) 389 | .mount("#fuigen_app"); -------------------------------------------------------------------------------- /assets.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/assets.zip -------------------------------------------------------------------------------- /fonts/haxrcorp-4089.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/fonts/haxrcorp-4089.otf -------------------------------------------------------------------------------- /fonts/haxrcorp_4089_cyrillic_altgr.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/fonts/haxrcorp_4089_cyrillic_altgr.eot -------------------------------------------------------------------------------- /fonts/haxrcorp_4089_cyrillic_altgr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20110222 at Mon Mar 7 13:04:07 2011 6 | By www-data 7 | Copyright sahwar 2010 8 | "HaxrCorp 4089 Cyrillic AltGr" is based on "PIXELA CYR" by "sanyapolecat" (http://fontstruct.fontshop.com/fontstructors/sanyapolecat), which is based on "HaxrCorp 4089" by "sahwar" (http://fontstruct.fontshop.com/fontstructors/sahwar) 9 | 10 | 11 | 12 | 27 | 28 | 30 | 32 | 34 | 36 | 38 | 41 | 43 | 45 | 47 | 49 | 51 | 53 | 55 | 57 | 59 | 61 | 63 | 65 | 67 | 69 | 71 | 73 | 75 | 77 | 79 | 81 | 83 | 85 | 87 | 89 | 91 | 93 | 95 | 97 | 99 | 101 | 103 | 105 | 107 | 109 | 111 | 113 | 115 | 117 | 119 | 121 | 123 | 125 | 127 | 129 | 131 | 133 | 135 | 137 | 139 | 141 | 143 | 145 | 147 | 149 | 151 | 153 | 155 | 157 | 159 | 161 | 163 | 165 | 167 | 169 | 171 | 173 | 175 | 177 | 179 | 181 | 183 | 185 | 187 | 189 | 191 | 193 | 195 | 197 | 199 | 201 | 203 | 205 | 207 | 209 | 211 | 213 | 215 | 217 | 219 | 221 | 223 | 225 | 227 | 229 | 231 | 233 | 235 | 236 | 237 | -------------------------------------------------------------------------------- /fonts/haxrcorp_4089_cyrillic_altgr.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/fonts/haxrcorp_4089_cyrillic_altgr.ttf -------------------------------------------------------------------------------- /fonts/haxrcorp_4089_cyrillic_altgr.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/fonts/haxrcorp_4089_cyrillic_altgr.woff -------------------------------------------------------------------------------- /fonts/helvb08.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/fonts/helvb08.ttf -------------------------------------------------------------------------------- /fui-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/fui-screenshot.png -------------------------------------------------------------------------------- /img/125_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/125_10px.png -------------------------------------------------------------------------------- /img/ActiveConnection_50x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ActiveConnection_50x64.png -------------------------------------------------------------------------------- /img/Alert_9x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Alert_9x8.png -------------------------------------------------------------------------------- /img/ArrowC_1_36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ArrowC_1_36x36.png -------------------------------------------------------------------------------- /img/ArrowDownEmpty_14x15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ArrowDownEmpty_14x15.png -------------------------------------------------------------------------------- /img/ArrowDownFilled_14x15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ArrowDownFilled_14x15.png -------------------------------------------------------------------------------- /img/ArrowUpEmpty_14x15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ArrowUpEmpty_14x15.png -------------------------------------------------------------------------------- /img/ArrowUpFilled_14x15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ArrowUpFilled_14x15.png -------------------------------------------------------------------------------- /img/Attention_5x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Attention_5x8.png -------------------------------------------------------------------------------- /img/Auth_62x31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Auth_62x31.png -------------------------------------------------------------------------------- /img/BLE_Pairing_128x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/BLE_Pairing_128x64.png -------------------------------------------------------------------------------- /img/Background_128x11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Background_128x11.png -------------------------------------------------------------------------------- /img/BatteryBody_52x28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/BatteryBody_52x28.png -------------------------------------------------------------------------------- /img/Battery_16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Battery_16x16.png -------------------------------------------------------------------------------- /img/Battery_26x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Battery_26x8.png -------------------------------------------------------------------------------- /img/Ble_connected_15x15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Ble_connected_15x15.png -------------------------------------------------------------------------------- /img/Ble_disconnected_15x15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Ble_disconnected_15x15.png -------------------------------------------------------------------------------- /img/Bluetooth_Connected_16x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Bluetooth_Connected_16x8.png -------------------------------------------------------------------------------- /img/Bluetooth_Idle_5x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Bluetooth_Idle_5x8.png -------------------------------------------------------------------------------- /img/ButtonCenter_7x7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ButtonCenter_7x7.png -------------------------------------------------------------------------------- /img/ButtonDown_7x4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ButtonDown_7x4.png -------------------------------------------------------------------------------- /img/ButtonLeftSmall_3x5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ButtonLeftSmall_3x5.png -------------------------------------------------------------------------------- /img/ButtonLeft_4x7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ButtonLeft_4x7.png -------------------------------------------------------------------------------- /img/ButtonRightSmall_3x5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ButtonRightSmall_3x5.png -------------------------------------------------------------------------------- /img/ButtonRight_4x7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ButtonRight_4x7.png -------------------------------------------------------------------------------- /img/ButtonUp_7x4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ButtonUp_7x4.png -------------------------------------------------------------------------------- /img/Button_18x18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Button_18x18.png -------------------------------------------------------------------------------- /img/Certification1_103x56.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Certification1_103x56.png -------------------------------------------------------------------------------- /img/Certification2_98x33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Certification2_98x33.png -------------------------------------------------------------------------------- /img/Charging-lightning_9x10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Charging-lightning_9x10.png -------------------------------------------------------------------------------- /img/Charging-lightning_mask_9x10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Charging-lightning_mask_9x10.png -------------------------------------------------------------------------------- /img/Circles_47x47.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Circles_47x47.png -------------------------------------------------------------------------------- /img/Clock_18x18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Clock_18x18.png -------------------------------------------------------------------------------- /img/Connect_me_62x31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Connect_me_62x31.png -------------------------------------------------------------------------------- /img/Connected_62x31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Connected_62x31.png -------------------------------------------------------------------------------- /img/CoolHi_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/CoolHi_25x27.png -------------------------------------------------------------------------------- /img/CoolHi_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/CoolHi_hvr_25x27.png -------------------------------------------------------------------------------- /img/CoolLo_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/CoolLo_25x27.png -------------------------------------------------------------------------------- /img/CoolLo_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/CoolLo_hvr_25x27.png -------------------------------------------------------------------------------- /img/Cry_dolph_55x52.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Cry_dolph_55x52.png -------------------------------------------------------------------------------- /img/DFU_128x50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/DFU_128x50.png -------------------------------------------------------------------------------- /img/Dehumidify_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Dehumidify_25x27.png -------------------------------------------------------------------------------- /img/Dehumidify_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Dehumidify_hvr_25x27.png -------------------------------------------------------------------------------- /img/Detailed_chip_17x13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Detailed_chip_17x13.png -------------------------------------------------------------------------------- /img/DolphinCommon_56x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/DolphinCommon_56x48.png -------------------------------------------------------------------------------- /img/DolphinMafia_115x62.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/DolphinMafia_115x62.png -------------------------------------------------------------------------------- /img/DolphinNice_96x59.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/DolphinNice_96x59.png -------------------------------------------------------------------------------- /img/DolphinReadingSuccess_59x63.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/DolphinReadingSuccess_59x63.png -------------------------------------------------------------------------------- /img/DolphinWait_61x59.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/DolphinWait_61x59.png -------------------------------------------------------------------------------- /img/DoorLeft_70x55.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/DoorLeft_70x55.png -------------------------------------------------------------------------------- /img/DoorRight_70x55.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/DoorRight_70x55.png -------------------------------------------------------------------------------- /img/Down_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Down_25x27.png -------------------------------------------------------------------------------- /img/Down_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Down_hvr_25x27.png -------------------------------------------------------------------------------- /img/Drive_112x35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Drive_112x35.png -------------------------------------------------------------------------------- /img/Error_18x18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Error_18x18.png -------------------------------------------------------------------------------- /img/Error_62x31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Error_62x31.png -------------------------------------------------------------------------------- /img/EviSmile1_18x21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/EviSmile1_18x21.png -------------------------------------------------------------------------------- /img/EviSmile2_18x21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/EviSmile2_18x21.png -------------------------------------------------------------------------------- /img/EviWaiting1_18x21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/EviWaiting1_18x21.png -------------------------------------------------------------------------------- /img/EviWaiting2_18x21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/EviWaiting2_18x21.png -------------------------------------------------------------------------------- /img/FaceCharging_29x14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/FaceCharging_29x14.png -------------------------------------------------------------------------------- /img/FaceConfused_29x14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/FaceConfused_29x14.png -------------------------------------------------------------------------------- /img/FaceNopower_29x14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/FaceNopower_29x14.png -------------------------------------------------------------------------------- /img/FaceNormal_29x14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/FaceNormal_29x14.png -------------------------------------------------------------------------------- /img/GameMode_11x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/GameMode_11x8.png -------------------------------------------------------------------------------- /img/Health_16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Health_16x16.png -------------------------------------------------------------------------------- /img/HeatHi_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/HeatHi_25x27.png -------------------------------------------------------------------------------- /img/HeatHi_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/HeatHi_hvr_25x27.png -------------------------------------------------------------------------------- /img/HeatLo_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/HeatLo_25x27.png -------------------------------------------------------------------------------- /img/HeatLo_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/HeatLo_hvr_25x27.png -------------------------------------------------------------------------------- /img/Hidden_window_9x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Hidden_window_9x8.png -------------------------------------------------------------------------------- /img/InfraredArrowDown_4x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/InfraredArrowDown_4x8.png -------------------------------------------------------------------------------- /img/InfraredArrowUp_4x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/InfraredArrowUp_4x8.png -------------------------------------------------------------------------------- /img/InfraredLearnShort_128x31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/InfraredLearnShort_128x31.png -------------------------------------------------------------------------------- /img/KeyBackspaceSelected_16x9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/KeyBackspaceSelected_16x9.png -------------------------------------------------------------------------------- /img/KeyBackspace_16x9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/KeyBackspace_16x9.png -------------------------------------------------------------------------------- /img/KeySaveSelected_24x11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/KeySaveSelected_24x11.png -------------------------------------------------------------------------------- /img/KeySave_24x11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/KeySave_24x11.png -------------------------------------------------------------------------------- /img/Keychain_39x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Keychain_39x36.png -------------------------------------------------------------------------------- /img/Left_mouse_icon_9x9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Left_mouse_icon_9x9.png -------------------------------------------------------------------------------- /img/Lock_7x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Lock_7x8.png -------------------------------------------------------------------------------- /img/Lock_8x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Lock_8x8.png -------------------------------------------------------------------------------- /img/MHz_25x11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/MHz_25x11.png -------------------------------------------------------------------------------- /img/Medium-chip-22x21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Medium-chip-22x21.png -------------------------------------------------------------------------------- /img/Modern_reader_18x34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Modern_reader_18x34.png -------------------------------------------------------------------------------- /img/Move_flipper_26x39.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Move_flipper_26x39.png -------------------------------------------------------------------------------- /img/Mute_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Mute_25x27.png -------------------------------------------------------------------------------- /img/Mute_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Mute_hvr_25x27.png -------------------------------------------------------------------------------- /img/NFC_manual_60x50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/NFC_manual_60x50.png -------------------------------------------------------------------------------- /img/Nfc_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Nfc_10px.png -------------------------------------------------------------------------------- /img/Off_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Off_25x27.png -------------------------------------------------------------------------------- /img/Off_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Off_hvr_25x27.png -------------------------------------------------------------------------------- /img/Ok_btn_9x9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Ok_btn_9x9.png -------------------------------------------------------------------------------- /img/Ok_btn_pressed_13x13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Ok_btn_pressed_13x13.png -------------------------------------------------------------------------------- /img/Percent_10x14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Percent_10x14.png -------------------------------------------------------------------------------- /img/Pin_arrow_down_7x9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Pin_arrow_down_7x9.png -------------------------------------------------------------------------------- /img/Pin_arrow_left_9x7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Pin_arrow_left_9x7.png -------------------------------------------------------------------------------- /img/Pin_arrow_right_9x7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Pin_arrow_right_9x7.png -------------------------------------------------------------------------------- /img/Pin_arrow_up_7x9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Pin_arrow_up_7x9.png -------------------------------------------------------------------------------- /img/Pin_attention_dpad_29x29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Pin_attention_dpad_29x29.png -------------------------------------------------------------------------------- /img/Pin_back_arrow_10x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Pin_back_arrow_10x8.png -------------------------------------------------------------------------------- /img/Pin_back_full_40x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Pin_back_full_40x8.png -------------------------------------------------------------------------------- /img/Pin_pointer_5x3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Pin_pointer_5x3.png -------------------------------------------------------------------------------- /img/Pin_star_7x7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Pin_star_7x7.png -------------------------------------------------------------------------------- /img/Power_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Power_25x27.png -------------------------------------------------------------------------------- /img/Power_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Power_hvr_25x27.png -------------------------------------------------------------------------------- /img/Pressed_Button_13x13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Pressed_Button_13x13.png -------------------------------------------------------------------------------- /img/Quest_7x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Quest_7x8.png -------------------------------------------------------------------------------- /img/RFIDBigChip_37x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/RFIDBigChip_37x36.png -------------------------------------------------------------------------------- /img/RFIDDolphinReceive_97x61.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/RFIDDolphinReceive_97x61.png -------------------------------------------------------------------------------- /img/RFIDDolphinSend_97x61.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/RFIDDolphinSend_97x61.png -------------------------------------------------------------------------------- /img/RFIDDolphinSuccess_108x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/RFIDDolphinSuccess_108x57.png -------------------------------------------------------------------------------- /img/Reader_detect_43x40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Reader_detect_43x40.png -------------------------------------------------------------------------------- /img/Release_arrow_18x15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Release_arrow_18x15.png -------------------------------------------------------------------------------- /img/Restoring_38x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Restoring_38x32.png -------------------------------------------------------------------------------- /img/Right_mouse_icon_9x9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Right_mouse_icon_9x9.png -------------------------------------------------------------------------------- /img/SDQuestion_35x43.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/SDQuestion_35x43.png -------------------------------------------------------------------------------- /img/SDcardFail_11x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/SDcardFail_11x8.png -------------------------------------------------------------------------------- /img/SDcardMounted_11x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/SDcardMounted_11x8.png -------------------------------------------------------------------------------- /img/Scanning_123x52.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Scanning_123x52.png -------------------------------------------------------------------------------- /img/SmallArrowDown_3x5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/SmallArrowDown_3x5.png -------------------------------------------------------------------------------- /img/SmallArrowDown_4x7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/SmallArrowDown_4x7.png -------------------------------------------------------------------------------- /img/SmallArrowUp_3x5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/SmallArrowUp_3x5.png -------------------------------------------------------------------------------- /img/SmallArrowUp_4x7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/SmallArrowUp_4x7.png -------------------------------------------------------------------------------- /img/Smile_18x18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Smile_18x18.png -------------------------------------------------------------------------------- /img/Space_65x18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Space_65x18.png -------------------------------------------------------------------------------- /img/Tap_reader_36x38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Tap_reader_36x38.png -------------------------------------------------------------------------------- /img/Temperature_16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Temperature_16x16.png -------------------------------------------------------------------------------- /img/Unlock_7x8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Unlock_7x8.png -------------------------------------------------------------------------------- /img/Unplug_bg_bottom_128x10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Unplug_bg_bottom_128x10.png -------------------------------------------------------------------------------- /img/Unplug_bg_top_128x14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Unplug_bg_top_128x14.png -------------------------------------------------------------------------------- /img/Up_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Up_25x27.png -------------------------------------------------------------------------------- /img/Up_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Up_hvr_25x27.png -------------------------------------------------------------------------------- /img/Updating_32x40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Updating_32x40.png -------------------------------------------------------------------------------- /img/UsbTree_48x22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/UsbTree_48x22.png -------------------------------------------------------------------------------- /img/Vol_down_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Vol_down_25x27.png -------------------------------------------------------------------------------- /img/Vol_down_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Vol_down_hvr_25x27.png -------------------------------------------------------------------------------- /img/Vol_up_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Vol_up_25x27.png -------------------------------------------------------------------------------- /img/Vol_up_hvr_25x27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Vol_up_hvr_25x27.png -------------------------------------------------------------------------------- /img/Voldwn_6x6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Voldwn_6x6.png -------------------------------------------------------------------------------- /img/Voltage_16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Voltage_16x16.png -------------------------------------------------------------------------------- /img/Volup_8x6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Volup_8x6.png -------------------------------------------------------------------------------- /img/WarningDolphin_45x42.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/WarningDolphin_45x42.png -------------------------------------------------------------------------------- /img/Warning_30x23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/Warning_30x23.png -------------------------------------------------------------------------------- /img/back_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/back_10px.png -------------------------------------------------------------------------------- /img/badusb_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/badusb_10px.png -------------------------------------------------------------------------------- /img/dir_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/dir_10px.png -------------------------------------------------------------------------------- /img/iButtonDolphinVerySuccess_108x52.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/iButtonDolphinVerySuccess_108x52.png -------------------------------------------------------------------------------- /img/iButtonKey_49x44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/iButtonKey_49x44.png -------------------------------------------------------------------------------- /img/ibutt_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ibutt_10px.png -------------------------------------------------------------------------------- /img/ir_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/ir_10px.png -------------------------------------------------------------------------------- /img/loading_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/loading_10px.png -------------------------------------------------------------------------------- /img/music_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/music_10px.png -------------------------------------------------------------------------------- /img/passport_bad1_46x49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_bad1_46x49.png -------------------------------------------------------------------------------- /img/passport_bad2_46x49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_bad2_46x49.png -------------------------------------------------------------------------------- /img/passport_bad3_46x49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_bad3_46x49.png -------------------------------------------------------------------------------- /img/passport_bottom_128x18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_bottom_128x18.png -------------------------------------------------------------------------------- /img/passport_happy1_46x49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_happy1_46x49.png -------------------------------------------------------------------------------- /img/passport_happy2_46x49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_happy2_46x49.png -------------------------------------------------------------------------------- /img/passport_happy3_46x49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_happy3_46x49.png -------------------------------------------------------------------------------- /img/passport_left_6x46.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_left_6x46.png -------------------------------------------------------------------------------- /img/passport_okay1_46x49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_okay1_46x49.png -------------------------------------------------------------------------------- /img/passport_okay2_46x49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_okay2_46x49.png -------------------------------------------------------------------------------- /img/passport_okay3_46x49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/passport_okay3_46x49.png -------------------------------------------------------------------------------- /img/sub1_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/sub1_10px.png -------------------------------------------------------------------------------- /img/u2f_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/u2f_10px.png -------------------------------------------------------------------------------- /img/unknown_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/unknown_10px.png -------------------------------------------------------------------------------- /img/update_10px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbrin/flipper-ui-editor/7f10b04f77bb5977c256e836277ad5698150e763/img/update_10px.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Static Template 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /js/components.js: -------------------------------------------------------------------------------- 1 | 2 | const fuiLayersComponent = { 3 | template: fuiLayersTmpl, 4 | props: { 5 | screenElements: Array, 6 | screenCurrentElement: Object, 7 | }, 8 | methods: { 9 | setCurrentItem(item) { 10 | this.$emit("setCurrentItem", item); 11 | }, 12 | removeLayer(index) { 13 | this.$emit("removeLayer", index); 14 | }, 15 | getLayerListItem(element) { 16 | if (element.type === "str") { 17 | return `${element.text || "Empty str"}`; 18 | } 19 | if (element.type === "icon") { 20 | return `${element.name}`; 21 | } 22 | return `${element.type}`; 23 | }, 24 | } 25 | } 26 | 27 | const fuiButtonComponent = { 28 | template: fuiButtonTmpl, 29 | props: { 30 | title: String, 31 | active: Boolean 32 | } 33 | } 34 | 35 | const fuiIconsComponent = { 36 | template: fuiIconsTmpl, 37 | data() { 38 | return { 39 | imagesSrc: [], 40 | }; 41 | }, 42 | props: { 43 | customImages: Array, 44 | }, 45 | watch: { 46 | customImages: function () { 47 | this.prepareImages(); 48 | } 49 | }, 50 | methods: { 51 | cleanCustom() { 52 | this.$emit("cleanCustomIcons"); 53 | }, 54 | iconClick(e) { 55 | this.$emit("iconClicked", e.target.dataset.name); 56 | }, 57 | iconDragStart(e) { 58 | e.dataTransfer.setData("name", e.srcElement.dataset.name); 59 | e.dataTransfer.setData("offset", `${e.offsetX}, ${e.offsetY}`); 60 | }, 61 | prepareImages() { 62 | const fuiImages = {}; 63 | const imagesArr = []; 64 | Object.entries(ICONS_SRC).forEach((item) => { 65 | const [name, file] = item; 66 | const matchedSizeArr = name.match(/_([0-9]+)x([0-9]+)/i) ? name.match(/_([0-9]+)x([0-9]+)/i) : [0, 10, 10]; 67 | const [, width, height] = matchedSizeArr.map((num) => parseInt(num, 10)); 68 | const image = new Image(width, height); 69 | const src = `img/${file}`; 70 | image.src = src; 71 | image.crossOrigin = "Anonymous"; 72 | fuiImages[name] = { 73 | element: image, 74 | width: width, 75 | height: height 76 | }; 77 | imagesArr.push({ 78 | src: src, 79 | name: name, 80 | element: image, 81 | width: width, 82 | height: height 83 | }); 84 | }); 85 | this.customImages.forEach(icon => { 86 | fuiImages[icon.name] = { 87 | element: icon.element, 88 | width: icon.width, 89 | height: icon.height, 90 | custom: icon.custom, 91 | }; 92 | }); 93 | imagesArr.sort((a, b) => a.width * a.height - b.width * b.height); 94 | this.imagesSrc = imagesArr; 95 | this.$emit("prepareImages", fuiImages); 96 | } 97 | }, 98 | created() { 99 | }, 100 | mounted() { 101 | this.prepareImages(); 102 | } 103 | } 104 | 105 | const fuiToolsComponent = { 106 | template: fuiToolsTmpl, 107 | props: { 108 | callback: Function, 109 | activeTool: String 110 | }, 111 | data() { 112 | return { 113 | toolsList: ["frame", "box", "line", "dot", "circle", "disc"] 114 | }; 115 | } 116 | } 117 | 118 | const fuiInspectorComponent = { 119 | template: fuiInspectorTmpl, 120 | props: { 121 | elem: Object 122 | }, 123 | data() { 124 | return {}; 125 | }, 126 | methods: { 127 | redrawCanvas() { 128 | this.$emit("redrawCanvas"); 129 | }, 130 | isHWVisible(elem) { 131 | // return true; 132 | return !["line", "str", "dot", "icon", "circle", "disc"].includes(elem.type); 133 | }, 134 | isRadiusVisible(elem) { 135 | return ["circle", "disc"].includes(elem.type); 136 | } 137 | } 138 | } 139 | 140 | const fuiSettingsComponent = { 141 | template: fuiSettingsTmpl, 142 | props: { 143 | isInverted: Boolean, 144 | }, 145 | data() { 146 | return {}; 147 | }, 148 | computed: { 149 | settingsClassNames() { 150 | return { 151 | "button_active": this.isInverted, 152 | }; 153 | }, 154 | }, 155 | methods: { 156 | toggleInvert() { 157 | this.$emit("toggleInvert"); 158 | this.$emit("redrawCanvas"); 159 | }, 160 | } 161 | } 162 | 163 | const fuiCodeComponent = { 164 | template: ` 165 |
166 | 
{{ content }}
167 |
168 | `, 169 | props: { 170 | content: String 171 | }, 172 | } 173 | 174 | const fuiTabsComponent = { 175 | template: ` 176 |
177 |
{{ tab }}
179 |
180 | `, 181 | props: { 182 | activeTab: String 183 | }, 184 | data() { 185 | return { 186 | tabs: ["icons", "code"], 187 | }; 188 | }, 189 | methods: { 190 | setActiveTab(tab) { 191 | this.$emit("setActiveTab", tab); 192 | } 193 | } 194 | } 195 | 196 | const fuiInspectorInputComponent = { 197 | template: ` 198 | {{ element[field] }} 199 | 202 | 203 | `, 204 | props: { 205 | element: Object, 206 | type: String, 207 | field: String, 208 | defaultFont: String, 209 | }, 210 | data() { 211 | return { 212 | fontsList: ["FontPrimary", "FontSecondary", "FontBigNumbers"], 213 | }; 214 | }, 215 | computed: { 216 | charsRegex() { 217 | return this.element.font === "FontBigNumbers" ? numberFontsRegex : standardFontsRegex; 218 | } 219 | }, 220 | methods: { 221 | onInput(e) { 222 | const result = ["text"].includes(this.type) ? 223 | e.target.value.replace(this.charsRegex, '') : 224 | parseInt(e.target.value.replace(/[^0-9]/g, '')); 225 | e.target.value = result; 226 | this.element[this.field] = result; 227 | if (["text"].includes(this.field)) { 228 | this.updateTextWidth(); 229 | } 230 | this.$emit('redrawCanvas'); 231 | }, 232 | onSelect(e) { 233 | this.element[this.field] = e.target.value; 234 | if (["font"].includes(this.field)) { 235 | this.element.text = this.element.text.replace(this.charsRegex, '').trim(); 236 | this.updateTextWidth(); 237 | } 238 | this.$emit('redrawCanvas'); 239 | }, 240 | updateTextWidth() { 241 | // recalculate text draggable area size 242 | this.element.width = getTextWidth(this.element.text, this.element.font); 243 | this.element.height = textContainerHeight[this.element.font]; 244 | } 245 | } 246 | } -------------------------------------------------------------------------------- /js/const.js: -------------------------------------------------------------------------------- 1 | 2 | const canvasWidth = 128; 3 | const canvasHeight = 64; 4 | const canvasBoundX = canvasWidth * 4; 5 | const canvasBoundY = canvasHeight * 4; 6 | 7 | const standardFontsRegex = /[^0-9a-zA-Z\s\!\"\.\#\$\%\&\'\(\)\*\+\,\-\.\/]/g; 8 | const numberFontsRegex = /[^0-9\s\,\.\/\-\*\+\:]/g; 9 | 10 | const fontSizes = { 11 | FontPrimary: "10", 12 | FontSecondary: "16", 13 | }; 14 | 15 | const textContainerHeight = { 16 | "FontPrimary": 10, 17 | "FontSecondary": 8, 18 | "FontBigNumbers": 16, 19 | } 20 | 21 | const textCharWidth = { 22 | "FontPrimary": 5, 23 | "FontSecondary": 4, 24 | "FontBigNumbers": 11, 25 | } 26 | 27 | const ICONS_SRC = { 28 | "125_10px": "125_10px.png", 29 | "ActiveConnection_50x64": "ActiveConnection_50x64.png", 30 | "Alert_9x8": "Alert_9x8.png", 31 | "ArrowC_1_36x36": "ArrowC_1_36x36.png", 32 | "ArrowDownEmpty_14x15": "ArrowDownEmpty_14x15.png", 33 | "ArrowDownFilled_14x15": "ArrowDownFilled_14x15.png", 34 | "ArrowUpEmpty_14x15": "ArrowUpEmpty_14x15.png", 35 | "ArrowUpFilled_14x15": "ArrowUpFilled_14x15.png", 36 | "Attention_5x8": "Attention_5x8.png", 37 | "Auth_62x31": "Auth_62x31.png", 38 | "back_10px": "back_10px.png", 39 | "Background_128x11": "Background_128x11.png", 40 | "badusb_10px": "badusb_10px.png", 41 | "Battery_16x16": "Battery_16x16.png", 42 | "Battery_26x8": "Battery_26x8.png", 43 | "BatteryBody_52x28": "BatteryBody_52x28.png", 44 | "Ble_connected_15x15": "Ble_connected_15x15.png", 45 | "Ble_disconnected_15x15": "Ble_disconnected_15x15.png", 46 | "BLE_Pairing_128x64": "BLE_Pairing_128x64.png", 47 | "Bluetooth_Connected_16x8": "Bluetooth_Connected_16x8.png", 48 | "Bluetooth_Idle_5x8": "Bluetooth_Idle_5x8.png", 49 | "Button_18x18": "Button_18x18.png", 50 | "ButtonCenter_7x7": "ButtonCenter_7x7.png", 51 | "ButtonDown_7x4": "ButtonDown_7x4.png", 52 | "ButtonLeft_4x7": "ButtonLeft_4x7.png", 53 | "ButtonLeftSmall_3x5": "ButtonLeftSmall_3x5.png", 54 | "ButtonRight_4x7": "ButtonRight_4x7.png", 55 | "ButtonRightSmall_3x5": "ButtonRightSmall_3x5.png", 56 | "ButtonUp_7x4": "ButtonUp_7x4.png", 57 | "Certification1_103x56": "Certification1_103x56.png", 58 | "Certification2_98x33": "Certification2_98x33.png", 59 | "Charging-lightning_9x10": "Charging-lightning_9x10.png", 60 | "Charging-lightning_mask_9x10": "Charging-lightning_mask_9x10.png", 61 | "Circles_47x47": "Circles_47x47.png", 62 | "Clock_18x18": "Clock_18x18.png", 63 | "Connect_me_62x31": "Connect_me_62x31.png", 64 | "Connected_62x31": "Connected_62x31.png", 65 | "CoolHi_25x27": "CoolHi_25x27.png", 66 | "CoolHi_hvr_25x27": "CoolHi_hvr_25x27.png", 67 | "CoolLo_25x27": "CoolLo_25x27.png", 68 | "CoolLo_hvr_25x27": "CoolLo_hvr_25x27.png", 69 | "Cry_dolph_55x52": "Cry_dolph_55x52.png", 70 | "Dehumidify_25x27": "Dehumidify_25x27.png", 71 | "Dehumidify_hvr_25x27": "Dehumidify_hvr_25x27.png", 72 | "Detailed_chip_17x13": "Detailed_chip_17x13.png", 73 | "DFU_128x50": "DFU_128x50.png", 74 | "dir_10px": "dir_10px.png", 75 | "DolphinCommon_56x48": "DolphinCommon_56x48.png", 76 | "DolphinMafia_115x62": "DolphinMafia_115x62.png", 77 | "DolphinNice_96x59": "DolphinNice_96x59.png", 78 | "DolphinReadingSuccess_59x63": "DolphinReadingSuccess_59x63.png", 79 | "DolphinWait_61x59": "DolphinWait_61x59.png", 80 | "DoorLeft_70x55": "DoorLeft_70x55.png", 81 | "DoorRight_70x55": "DoorRight_70x55.png", 82 | "Down_25x27": "Down_25x27.png", 83 | "Down_hvr_25x27": "Down_hvr_25x27.png", 84 | "Drive_112x35": "Drive_112x35.png", 85 | "Error_18x18": "Error_18x18.png", 86 | "Error_62x31": "Error_62x31.png", 87 | "EviSmile1_18x21": "EviSmile1_18x21.png", 88 | "EviSmile2_18x21": "EviSmile2_18x21.png", 89 | "EviWaiting1_18x21": "EviWaiting1_18x21.png", 90 | "EviWaiting2_18x21": "EviWaiting2_18x21.png", 91 | "FaceCharging_29x14": "FaceCharging_29x14.png", 92 | "FaceConfused_29x14": "FaceConfused_29x14.png", 93 | "FaceNopower_29x14": "FaceNopower_29x14.png", 94 | "FaceNormal_29x14": "FaceNormal_29x14.png", 95 | "GameMode_11x8": "GameMode_11x8.png", 96 | "Health_16x16": "Health_16x16.png", 97 | "HeatHi_25x27": "HeatHi_25x27.png", 98 | "HeatHi_hvr_25x27": "HeatHi_hvr_25x27.png", 99 | "HeatLo_25x27": "HeatLo_25x27.png", 100 | "HeatLo_hvr_25x27": "HeatLo_hvr_25x27.png", 101 | "Hidden_window_9x8": "Hidden_window_9x8.png", 102 | "ibutt_10px": "ibutt_10px.png", 103 | "iButtonDolphinVerySuccess_108x52": "iButtonDolphinVerySuccess_108x52.png", 104 | "iButtonKey_49x44": "iButtonKey_49x44.png", 105 | "InfraredArrowDown_4x8": "InfraredArrowDown_4x8.png", 106 | "InfraredArrowUp_4x8": "InfraredArrowUp_4x8.png", 107 | "InfraredLearnShort_128x31": "InfraredLearnShort_128x31.png", 108 | "ir_10px": "ir_10px.png", 109 | "KeyBackspace_16x9": "KeyBackspace_16x9.png", 110 | "KeyBackspaceSelected_16x9": "KeyBackspaceSelected_16x9.png", 111 | "Keychain_39x36": "Keychain_39x36.png", 112 | "KeySave_24x11": "KeySave_24x11.png", 113 | "KeySaveSelected_24x11": "KeySaveSelected_24x11.png", 114 | "Left_mouse_icon_9x9": "Left_mouse_icon_9x9.png", 115 | "loading_10px": "loading_10px.png", 116 | "Lock_7x8": "Lock_7x8.png", 117 | "Lock_8x8": "Lock_8x8.png", 118 | "Medium-chip-22x21": "Medium-chip-22x21.png", 119 | "MHz_25x11": "MHz_25x11.png", 120 | "Modern_reader_18x34": "Modern_reader_18x34.png", 121 | "Move_flipper_26x39": "Move_flipper_26x39.png", 122 | "music_10px": "music_10px.png", 123 | "Mute_25x27": "Mute_25x27.png", 124 | "Mute_hvr_25x27": "Mute_hvr_25x27.png", 125 | "Nfc_10px": "Nfc_10px.png", 126 | "NFC_manual_60x50": "NFC_manual_60x50.png", 127 | "Off_25x27": "Off_25x27.png", 128 | "Off_hvr_25x27": "Off_hvr_25x27.png", 129 | "Ok_btn_9x9": "Ok_btn_9x9.png", 130 | "Ok_btn_pressed_13x13": "Ok_btn_pressed_13x13.png", 131 | "passport_bad1_46x49": "passport_bad1_46x49.png", 132 | "passport_bad2_46x49": "passport_bad2_46x49.png", 133 | "passport_bad3_46x49": "passport_bad3_46x49.png", 134 | "passport_bottom_128x18": "passport_bottom_128x18.png", 135 | "passport_happy1_46x49": "passport_happy1_46x49.png", 136 | "passport_happy2_46x49": "passport_happy2_46x49.png", 137 | "passport_happy3_46x49": "passport_happy3_46x49.png", 138 | "passport_left_6x46": "passport_left_6x46.png", 139 | "passport_okay1_46x49": "passport_okay1_46x49.png", 140 | "passport_okay2_46x49": "passport_okay2_46x49.png", 141 | "passport_okay3_46x49": "passport_okay3_46x49.png", 142 | "Percent_10x14": "Percent_10x14.png", 143 | "Pin_arrow_down_7x9": "Pin_arrow_down_7x9.png", 144 | "Pin_arrow_left_9x7": "Pin_arrow_left_9x7.png", 145 | "Pin_arrow_right_9x7": "Pin_arrow_right_9x7.png", 146 | "Pin_arrow_up_7x9": "Pin_arrow_up_7x9.png", 147 | "Pin_attention_dpad_29x29": "Pin_attention_dpad_29x29.png", 148 | "Pin_back_arrow_10x8": "Pin_back_arrow_10x8.png", 149 | "Pin_back_full_40x8": "Pin_back_full_40x8.png", 150 | "Pin_pointer_5x3": "Pin_pointer_5x3.png", 151 | "Pin_star_7x7": "Pin_star_7x7.png", 152 | "Power_25x27": "Power_25x27.png", 153 | "Power_hvr_25x27": "Power_hvr_25x27.png", 154 | "Pressed_Button_13x13": "Pressed_Button_13x13.png", 155 | "Quest_7x8": "Quest_7x8.png", 156 | "Reader_detect_43x40": "Reader_detect_43x40.png", 157 | "Release_arrow_18x15": "Release_arrow_18x15.png", 158 | "Restoring_38x32": "Restoring_38x32.png", 159 | "RFIDBigChip_37x36": "RFIDBigChip_37x36.png", 160 | "RFIDDolphinReceive_97x61": "RFIDDolphinReceive_97x61.png", 161 | "RFIDDolphinSend_97x61": "RFIDDolphinSend_97x61.png", 162 | "RFIDDolphinSuccess_108x57": "RFIDDolphinSuccess_108x57.png", 163 | "Right_mouse_icon_9x9": "Right_mouse_icon_9x9.png", 164 | "Scanning_123x52": "Scanning_123x52.png", 165 | "SDcardFail_11x8": "SDcardFail_11x8.png", 166 | "SDcardMounted_11x8": "SDcardMounted_11x8.png", 167 | "SDQuestion_35x43": "SDQuestion_35x43.png", 168 | "SmallArrowDown_3x5": "SmallArrowDown_3x5.png", 169 | "SmallArrowDown_4x7": "SmallArrowDown_4x7.png", 170 | "SmallArrowUp_3x5": "SmallArrowUp_3x5.png", 171 | "SmallArrowUp_4x7": "SmallArrowUp_4x7.png", 172 | "Smile_18x18": "Smile_18x18.png", 173 | "Space_65x18": "Space_65x18.png", 174 | "sub1_10px": "sub1_10px.png", 175 | "Tap_reader_36x38": "Tap_reader_36x38.png", 176 | "Temperature_16x16": "Temperature_16x16.png", 177 | "u2f_10px": "u2f_10px.png", 178 | "unknown_10px": "unknown_10px.png", 179 | "Unlock_7x8": "Unlock_7x8.png", 180 | "Unplug_bg_bottom_128x10": "Unplug_bg_bottom_128x10.png", 181 | "Unplug_bg_top_128x14": "Unplug_bg_top_128x14.png", 182 | "Up_25x27": "Up_25x27.png", 183 | "Up_hvr_25x27": "Up_hvr_25x27.png", 184 | "update_10px": "update_10px.png", 185 | "Updating_32x40": "Updating_32x40.png", 186 | "UsbTree_48x22": "UsbTree_48x22.png", 187 | "Vol_down_25x27": "Vol_down_25x27.png", 188 | "Vol_down_hvr_25x27": "Vol_down_hvr_25x27.png", 189 | "Vol_up_25x27": "Vol_up_25x27.png", 190 | "Vol_up_hvr_25x27": "Vol_up_hvr_25x27.png", 191 | "Voldwn_6x6": "Voldwn_6x6.png", 192 | "Voltage_16x16": "Voltage_16x16.png", 193 | "Volup_8x6": "Volup_8x6.png", 194 | "Warning_30x23": "Warning_30x23.png", 195 | "WarningDolphin_45x42": "WarningDolphin_45x42.png", 196 | }; 197 | 198 | // 10x20 199 | const fontGlyphs = { 200 | " ": [ 201 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 202 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 203 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 204 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 205 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 206 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 207 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 208 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 209 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 210 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 211 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 212 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 213 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 214 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 215 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 216 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 217 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 218 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 219 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 220 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 221 | ], 222 | "1": [ 223 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 224 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 225 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 226 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 227 | 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 228 | 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 229 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 230 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 231 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 232 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 233 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 234 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 235 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 236 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 237 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 238 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 239 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 240 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 241 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 242 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 243 | ], 244 | "2": [ 245 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 246 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 247 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 248 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 249 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 250 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 251 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 252 | 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 253 | 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 254 | 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 255 | 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 256 | 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 257 | 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 258 | 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 259 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 260 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 261 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 262 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 263 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 264 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 265 | ], 266 | "3": [ 267 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 268 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 269 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 270 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 271 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 272 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 273 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 274 | 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 275 | 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 276 | 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 277 | 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 278 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 279 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 280 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 281 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 282 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 283 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 284 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 285 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 286 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 287 | ], 288 | "4": [ 289 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 290 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 291 | 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 292 | 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 293 | 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 294 | 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 295 | 0, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 296 | 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 297 | 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 298 | 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 299 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 300 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 301 | 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 302 | 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 303 | 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 304 | 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 305 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 306 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 307 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 308 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 309 | ], 310 | "5": [ 311 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 312 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 313 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 314 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 315 | 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 316 | 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 317 | 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 318 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 319 | 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 320 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 321 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 322 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 323 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 324 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 325 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 326 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 327 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 328 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 329 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 330 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 331 | ], 332 | "6": [ 333 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 334 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 335 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 336 | 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 337 | 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 338 | 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 339 | 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 340 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 341 | 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 342 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 343 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 344 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 345 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 346 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 347 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 348 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 349 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 350 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 351 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 352 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 353 | ], 354 | "7": [ 355 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 356 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 357 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 358 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 359 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 360 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 361 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 362 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 363 | 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 364 | 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 365 | 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 366 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 367 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 368 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 369 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 370 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 371 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 372 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 373 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 374 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 375 | ], 376 | "8": [ 377 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 378 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 379 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 380 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 381 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 382 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 383 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 384 | 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 385 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 386 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 387 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 388 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 389 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 390 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 391 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 392 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 393 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 394 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 395 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 396 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 397 | ], 398 | "9": [ 399 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 400 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 401 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 402 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 403 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 404 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 405 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 406 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 407 | 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 408 | 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 409 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 410 | 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 411 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 412 | 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 413 | 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 414 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 415 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 416 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 417 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 418 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 419 | ], 420 | "0": [ 421 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 422 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 423 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 424 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 425 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 426 | 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 427 | 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 428 | 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 429 | 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0, 0, 430 | 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 431 | 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 432 | 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 433 | 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 434 | 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 435 | 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 436 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 437 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 438 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 439 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 440 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 441 | ], 442 | "*": [ 443 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 444 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 445 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 446 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 447 | 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 448 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 449 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 450 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 451 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 452 | 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 453 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 454 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 455 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 456 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 457 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 458 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 459 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 460 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 461 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 462 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 463 | ], 464 | "+": [ 465 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 466 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 467 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 468 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 469 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 470 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 471 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 472 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 473 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 474 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 475 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 476 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 477 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 478 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 479 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 480 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 481 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 482 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 483 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 484 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 485 | ], 486 | "-": [ 487 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 488 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 489 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 490 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 491 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 492 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 493 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 494 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 495 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 496 | 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 497 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 498 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 499 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 500 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 501 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 502 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 503 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 504 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 505 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 506 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 507 | ], 508 | ":": [ 509 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 510 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 511 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 512 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 513 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 514 | 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 515 | 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 516 | 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 517 | 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 518 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 519 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 520 | 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 521 | 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 522 | 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 523 | 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 524 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 525 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 526 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 527 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 528 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 529 | ], 530 | "/": [ 531 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 532 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 533 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 534 | 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 535 | 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 536 | 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 537 | 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 538 | 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 539 | 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 540 | 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 541 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 542 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 543 | 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 544 | 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 545 | 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 546 | 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 547 | 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 548 | 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 549 | 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 550 | 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 551 | ], 552 | ".": [ 553 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 554 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 555 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 556 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 557 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 558 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 559 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 560 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 561 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 563 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 564 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 565 | 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 566 | 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 567 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 568 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 569 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 570 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 571 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 572 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 573 | ], 574 | ",": [ 575 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 576 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 577 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 578 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 580 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 581 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 582 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 583 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 584 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 585 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 586 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 587 | 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 588 | 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 589 | 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 590 | 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 591 | 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 592 | 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 593 | 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 594 | 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 595 | ], 596 | } -------------------------------------------------------------------------------- /js/templates.js: -------------------------------------------------------------------------------- 1 | const fuiEditorTmpl = ` 2 |
3 |
4 | 10 |
11 |
12 |
13 | 16 |
17 | 18 | 19 | 21 | 22 |
23 | 24 | 25 |
26 |
27 |
28 | 29 | 30 |
31 |
32 | `; 33 | 34 | const fuiLayersTmpl = ` 35 |
36 |

Layers

37 | 45 |
46 | ` 47 | 48 | const fuiToolsTmpl = ` 49 |
50 | 52 | 53 | 54 | 55 | 56 |
57 | `; 58 | 59 | const fuiIconsTmpl = ` 60 |
61 |
62 |
Custom
63 |
×
64 |
65 | 68 |
Default
69 | 72 |
73 | ` 74 | const fuiButtonTmpl = ` 75 | 78 | ` 79 | const fuiInspectorTmpl = ` 80 |
81 |
{{elem.name || elem.type}}
82 |
83 |
x: 84 | 85 |
86 |
x2: 88 |
89 |
w: 91 |
92 |
r: 94 |
95 |
96 |
97 |
y: 98 | 99 |
100 |
y2: 102 |
103 |
h: 105 |
106 |
107 |
108 |
109 | 110 | 111 |
112 |
113 |
114 |
115 | 116 | 117 |
118 |
119 |
120 | `; 121 | const fuiSettingsTmpl = ` 122 |
123 |
124 |
126 |
`; -------------------------------------------------------------------------------- /js/utils.js: -------------------------------------------------------------------------------- 1 | function bline(imgData, x0, y0, x1, y1) { 2 | const resultArr = []; 3 | const dx = Math.abs(x1 - x0), 4 | sx = x0 < x1 ? 1 : -1; 5 | const dy = Math.abs(y1 - y0), 6 | sy = y0 < y1 ? 1 : -1; 7 | let err = (dx > dy ? dx : -dy) / 2; 8 | while (true) { 9 | if (x0 >= 0 && x0 < canvasWidth && y0 >= 0 && y0 < canvasHeight) { 10 | resultArr.push([x0, y0]); 11 | } 12 | if (x0 === x1 && y0 === y1) break; 13 | var e2 = err; 14 | if (e2 > -dx) { 15 | err -= dy; 16 | x0 += sx; 17 | } 18 | if (e2 < dy) { 19 | err += dx; 20 | y0 += sy; 21 | } 22 | } 23 | for (let i = 0; i < resultArr.length; i++) { 24 | const [x, y] = resultArr[i]; 25 | const n = (y * canvasWidth + x) * 4; 26 | 27 | imgData.data[n] = 0; 28 | imgData.data[n + 1] = 0; 29 | imgData.data[n + 2] = 0; 30 | imgData.data[n + 3] = 255; 31 | } 32 | } 33 | 34 | function drawCircle(imgData, centerX, centerY, radius) { 35 | const resultArr = []; 36 | let x = 0; 37 | let y = radius; 38 | let d = 3 - 2 * radius; 39 | 40 | while (x <= y) { 41 | const points = [ 42 | [centerX + x, centerY + y], 43 | [centerX - x, centerY + y], 44 | [centerX + x, centerY - y], 45 | [centerX - x, centerY - y], 46 | [centerX + y, centerY + x], 47 | [centerX - y, centerY + x], 48 | [centerX + y, centerY - x], 49 | [centerX - y, centerY - x], 50 | ]; 51 | 52 | points.forEach(([x, y]) => { 53 | if (x >= 0 && x < canvasWidth && y >= 0 && y < canvasHeight) { 54 | resultArr.push([x, y]); 55 | } 56 | }); 57 | 58 | if (d < 0) { 59 | d = d + 4 * x + 6; 60 | } else { 61 | d = d + 4 * (x - y) + 10; 62 | y--; 63 | } 64 | x++; 65 | } 66 | 67 | for (let i = 0; i < resultArr.length; i++) { 68 | const [x, y] = resultArr[i]; 69 | const n = (y * canvasWidth + x) * 4; 70 | 71 | imgData.data[n] = 0; 72 | imgData.data[n + 1] = 0; 73 | imgData.data[n + 2] = 0; 74 | imgData.data[n + 3] = 255; 75 | } 76 | } 77 | 78 | function drawDisc(imgData, centerX, centerY, radius) { 79 | const resultArr = []; 80 | let x = 0; 81 | let y = radius; 82 | let d = 3 - 2 * radius; 83 | 84 | while (x <= y) { 85 | for (let i = -x; i <= x; i++) { 86 | resultArr.push([centerX + i, centerY + y]); 87 | resultArr.push([centerX + i, centerY - y]); 88 | } 89 | 90 | for (let i = -y; i <= y; i++) { 91 | resultArr.push([centerX + i, centerY + x]); 92 | resultArr.push([centerX + i, centerY - x]); 93 | } 94 | 95 | if (d < 0) { 96 | d = d + 4 * x + 6; 97 | } else { 98 | d = d + 4 * (x - y) + 10; 99 | y--; 100 | } 101 | x++; 102 | } 103 | 104 | for (let i = 0; i < resultArr.length; i++) { 105 | const [x, y] = resultArr[i]; 106 | if (x >= 0 && x < canvasWidth && y >= 0 && y < canvasHeight) { 107 | const n = (y * canvasWidth + x) * 4; 108 | imgData.data[n] = 0; 109 | imgData.data[n + 1] = 0; 110 | imgData.data[n + 2] = 0; 111 | imgData.data[n + 3] = 255; 112 | } 113 | } 114 | } 115 | 116 | function maskBlack(CTX, isInverted) { 117 | const imgData = CTX.getImageData( 118 | 0, 119 | 0, 120 | canvasWidth, 121 | canvasHeight 122 | ) 123 | for (var i = 0; i < imgData.data.length; i += 4) { 124 | // for (var i = 0; i < 1000; i += 4) { 125 | if (isInverted) { 126 | if ( 127 | // If alpha is 0 128 | imgData.data[i + 3] < 255 || 129 | // Or if color is not black 130 | imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2] > 75 131 | ) { 132 | // Make it black 133 | imgData.data[i] = 0; 134 | imgData.data[i + 1] = 0; 135 | imgData.data[i + 2] = 0; 136 | imgData.data[i + 3] = 255; // alpha 137 | } else { 138 | imgData.data[i] = 0; 139 | imgData.data[i + 1] = 0; 140 | imgData.data[i + 2] = 0; 141 | imgData.data[i + 3] = 0; 142 | } 143 | } else { 144 | if (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2] >= 3) { 145 | imgData.data[i + 3] = 0; // alpha 146 | } 147 | } 148 | } 149 | return imgData; 150 | } 151 | 152 | function readFileAsync(file) { 153 | return new Promise((resolve, reject) => { 154 | let reader = new FileReader(); 155 | 156 | reader.onload = () => { 157 | resolve(reader.result); 158 | }; 159 | reader.onerror = reject; 160 | reader.readAsDataURL(file); 161 | }); 162 | } 163 | 164 | function scaleUp(i) { 165 | return 4 * i; 166 | } 167 | 168 | function scaleDown(i) { 169 | return Math.round(i / 4); 170 | } 171 | 172 | function scaleSize(i) { 173 | return i > 0 ? Math.round(i / 4) : Math.floor(i / 4); 174 | } 175 | 176 | function getElementByOffset(uiArr, x, y) { 177 | for (let i = uiArr.length - 1; i >= 0; i--) { 178 | const element = uiArr[i]; 179 | const scaledX1 = scaleUp(element.x); 180 | const scaledY1 = scaleUp(element.yy ? element.yy : element.y); 181 | const scaledX2 = scaleUp(element.x + element.width); 182 | const scaledY2 = scaleUp(element.yy ? element.yy + element.height : element.y + element.height); 183 | if (element.type === "line") { 184 | const isVertical = element.y === element.y2; 185 | const isHorisontal = element.y === element.y2; 186 | const scaledX1 = scaleUp(element.x); 187 | const scaledY1 = scaleUp(element.y); 188 | const scaledX2 = scaleUp(element.x2); 189 | const scaledY2 = scaleUp(element.y2); 190 | if (scaledX2 > scaledX1) { 191 | const isXInside = x >= scaledX1 - 4 && x <= scaledX2 + 4; 192 | if (scaledY2 > scaledY1) { 193 | if (isXInside && y >= scaledY1 - 4 && y <= scaledY2 + 4) { 194 | return element; 195 | }; 196 | } else { 197 | if (isXInside && y <= scaledY1 + 4 && y >= scaledY2 - 4) { 198 | return element; 199 | } 200 | } 201 | } else { 202 | const isXInside = x <= scaledX1 + 4 && x >= scaledX2 - 4; 203 | if (scaledY2 > scaledY1) { 204 | if (isXInside && y >= scaledY1 - 4 && y <= scaledY2 + 4) { 205 | return element; 206 | } 207 | } else { 208 | if (isXInside && y <= scaledY1 + 4 && y >= scaledY2 - 4) { 209 | return element; 210 | } 211 | } 212 | } 213 | } else if (scaledX1 <= x && x < scaledX2 && scaledY1 <= y && y < scaledY2) { 214 | return element; 215 | } 216 | } 217 | } 218 | function loadImageAsync(src) { 219 | return new Promise((resolve, reject) => { 220 | let img = new Image(); 221 | img.onload = () => resolve(img); 222 | img.onerror = reject; 223 | img.src = src; 224 | }) 225 | } 226 | 227 | function getCode(element, isDeclared) { 228 | const func = `canvas_draw_${element.type}`; 229 | switch (element.type) { 230 | case "icon": 231 | let result = element.custom && !isDeclared ? `extern const Icon I_${element.name};\n` : ``; 232 | result += `${func}(canvas, ${element.x}, ${element.y}, &I_${element.name})`; 233 | return result; 234 | case "box": 235 | return `${func}(canvas, ${element.x}, ${element.y}, ${element.width}, ${element.height})`; 236 | case "dot": 237 | return `${func}(canvas, ${element.x}, ${element.y})`; 238 | case "frame": 239 | return `${func}(canvas, ${element.x}, ${element.y}, ${element.width + 1 240 | }, ${element.height + 1})`; 241 | case "line": 242 | return `${func}(canvas, ${element.x}, ${element.y}, ${element.x2}, ${element.y2})`; 243 | case "circle": 244 | case "disc": 245 | return `${func}(canvas, ${element.x + element.radius}, ${element.y + element.radius}, ${element.radius})`; 246 | case "str": 247 | return `canvas_set_font(canvas, ${element.font}); 248 | ${func}(canvas, ${element.x}, ${element.y}, "${element.text}")`; 249 | } 250 | }; 251 | 252 | function generateCode(uiArr, isInverted) { 253 | let lines = ""; 254 | const declaredIcons = []; 255 | if (isInverted) { 256 | lines = `canvas_draw_box(canvas, 0, 0, 127, 63); 257 | canvas_set_color(canvas, ColorWhite); 258 | 259 | `; 260 | } 261 | for (let i = 0; i < uiArr.length; i++) { 262 | const element = uiArr[i]; 263 | const isDeclared = declaredIcons.indexOf(element.name) >= 0; 264 | if (!isDeclared) { 265 | declaredIcons.push(element.name); 266 | } 267 | lines = `${lines}${getCode(element, isDeclared)}; 268 | 269 | `; 270 | } 271 | return lines; 272 | }; 273 | 274 | function drawBigNumbers(imgData, x, y, text) { 275 | const charWidth = 12; 276 | const charHeight = 20; 277 | 278 | for (let i = 0; i < text.length; i++) { 279 | const char = text[i]; 280 | const glyph = fontGlyphs[char]; 281 | 282 | if (glyph) { 283 | for (let row = 0; row < charHeight; row++) { 284 | for (let col = 0; col < charWidth; col++) { 285 | const glyphIndex = row * charWidth + col; 286 | const imgDataIndex = ((y + row) * imgData.width + (x + col)) * 4; 287 | 288 | if (glyph[glyphIndex] && 289 | x + col >= 0 && x + col < canvasWidth && y + row >= 0 && y + row < canvasHeight 290 | ) { 291 | imgData.data[imgDataIndex] = 0; // R 292 | imgData.data[imgDataIndex + 1] = 0; // G 293 | imgData.data[imgDataIndex + 2] = 0; // B 294 | imgData.data[imgDataIndex + 3] = 255; // A 295 | } 296 | } 297 | } 298 | x += charWidth; 299 | } 300 | } 301 | }; 302 | 303 | function getTextWidth(text, font) { 304 | return textCharWidth[font] * text.length; 305 | } 306 | 307 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "FontPrimary"; 3 | src: url("fonts/helvb08.ttf"); 4 | font-weight: normal; 5 | font-style: normal; 6 | } 7 | 8 | @font-face { 9 | font-family: "FontSecondary"; 10 | src: url("fonts/haxrcorp_4089_cyrillic_altgr.ttf"); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | :root { 16 | --primary-color: #FF8200; 17 | --secondary-color: #441f07; 18 | --bg-color: #1c0e02; 19 | --border-color: #955b2f; 20 | --border-dark-color: #5f2f0d; 21 | --danger-color: #eb4e27; 22 | --input-font-size: 18px; 23 | } 24 | 25 | h1, h2, h3 { 26 | font-family: "FontPrimary"; 27 | font-weight: normal; 28 | } 29 | 30 | body { 31 | margin: 0; 32 | padding: 0; 33 | color: var(--primary-color); 34 | font-family: "FontSecondary"; 35 | text-transform: uppercase; 36 | } 37 | 38 | canvas { 39 | cursor: crosshair; 40 | width: 512px; 41 | height: 256px; 42 | image-rendering: pixelated; 43 | background: #ed791b; 44 | text-rendering: "geometricPrecision"; 45 | font-smooth: never; 46 | -webkit-font-smoothing : none; 47 | } 48 | 49 | .fui-editor { 50 | width: 900px; 51 | background: var(--bg-color); 52 | padding: 16px; 53 | display: flex; 54 | flex-direction: row; 55 | position: relative; 56 | box-sizing: border-box; 57 | } 58 | 59 | .fui-editor__left { 60 | width: 178px; 61 | } 62 | 63 | .fui-editor__center { 64 | width: 534px; 65 | } 66 | 67 | .fui-editor__right { 68 | width: 178px; 69 | margin-left: 16px; 70 | } 71 | 72 | .canvas-wrapper { 73 | border: 3px solid var(--border-color); 74 | border-radius: 10px; 75 | background: var(--primary-color); 76 | padding: 8px; 77 | display: inline-block; 78 | font-size: 0; 79 | } 80 | 81 | .fui-canvas_select { 82 | cursor: grab; 83 | } 84 | 85 | .fui-canvas_moving { 86 | cursor: grabbing; 87 | } 88 | 89 | .inspector-wrapper { 90 | background: var(--secondary-color); 91 | border: 2px solid var(--border-dark-color); 92 | border-radius: 10px; 93 | width: 100%; 94 | } 95 | 96 | .inspector__title { 97 | overflow: hidden; 98 | width: 150px; 99 | } 100 | 101 | .inspector__row { 102 | display: flex; 103 | align-items: center; 104 | margin-bottom: 8px; 105 | font-size: var(--input-font-size); 106 | } 107 | 108 | .inspector__row > *:first-child { 109 | margin-right: 8px; 110 | } 111 | 112 | .inspector__select { 113 | background: var(--secondary-color); 114 | border: none; 115 | padding: 2px 0px 2px 4px; 116 | color: var(--primary-color); 117 | } 118 | 119 | .inspector__input { 120 | background: var(--secondary-color); 121 | color: var(--primary-color); 122 | border: none; 123 | padding: 2px 0px 2px 4px; 124 | width: 36px; 125 | outline: none; 126 | } 127 | 128 | .inspector__input[type=text] { 129 | width: 112px; 130 | } 131 | 132 | .title { 133 | margin: 0 0 8px 0; 134 | font-size: 16px; 135 | font-family: "FontPrimary"; 136 | font-weight: normal; 137 | } 138 | 139 | .tools { 140 | margin: 8px 0 8px 0; 141 | display: flex; 142 | flex-wrap: wrap; 143 | } 144 | 145 | .button { 146 | background: var(--secondary-color); 147 | border: 2px solid var(--primary-color); 148 | border-radius: 6px; 149 | color: var(--primary-color); 150 | height: 32px; 151 | vertical-align: middle; 152 | text-transform: uppercase; 153 | font-family: "FontSecondary"; 154 | font-size: 32px; 155 | padding: 0 12px 4px 12px; 156 | cursor: pointer; 157 | } 158 | 159 | .button:hover, 160 | .button_active { 161 | background-color: var(--primary-color); 162 | color: var(--secondary-color); 163 | } 164 | 165 | .button_danger { 166 | color: var(--danger-color); 167 | border-color: var(--danger-color); 168 | } 169 | 170 | .button_danger:hover { 171 | background-color: var(--danger-color); 172 | } 173 | 174 | .tools__btn { 175 | margin: 0 8px 8px 0; 176 | } 177 | 178 | .layers__list { 179 | font-size: 24px; 180 | overflow: hidden; 181 | margin: 0 16px 16px 0; 182 | padding: 0; 183 | } 184 | 185 | .layer { 186 | display: flex; 187 | align-items: center; 188 | cursor: pointer; 189 | height: 24px; 190 | margin: 4px 0; 191 | justify-content: space-between; 192 | } 193 | 194 | .layer:hover .layer__remove { 195 | display: block; 196 | } 197 | 198 | .layer__name { 199 | max-width: 108px; 200 | overflow: hidden; 201 | white-space: nowrap; 202 | } 203 | 204 | .layer_selected .layer__name:before { 205 | display: inline-block; 206 | content: ""; 207 | background: #cddc39; 208 | transform: translateY(-4px); 209 | width: 4px; 210 | height: 4px; 211 | margin-right: 4px; 212 | } 213 | 214 | .layer__remove { 215 | display: none; 216 | color: var(--danger-color); 217 | margin: 0 8px; 218 | } 219 | 220 | .fui-code { 221 | background: var(--primary-color); 222 | border: 2px solid var(--border-dark-color); 223 | border-radius: 0 10px 10px 10px; 224 | border-top: 0; 225 | margin: 0 0 8px 0; 226 | padding: 16px; 227 | height: 256px; 228 | color: var(--secondary-color); 229 | text-transform: none; 230 | overflow-y: auto; 231 | } 232 | 233 | .fui-code pre { 234 | margin: 0; 235 | } 236 | 237 | .fui-icons { 238 | display: flex; 239 | flex-direction: row; 240 | flex-wrap: wrap; 241 | align-items: center; 242 | overflow-y: auto; 243 | background: var(--primary-color); 244 | border: 2px solid var(--border-dark-color); 245 | border-radius: 0 10px 10px 10px; 246 | border-top: 0; 247 | margin: 0 0 8px 0; 248 | padding: 16px; 249 | height: 256px; 250 | color: var(--secondary-color); 251 | } 252 | 253 | .fui-icons img { 254 | cursor: pointer; 255 | image-rendering: pixelated; 256 | display: block; 257 | margin: 8px; 258 | mix-blend-mode: darken; 259 | border: 1px solid var(--border-color); 260 | } 261 | 262 | .fui-icons__header { 263 | font-size: 24px; 264 | display: flex; 265 | align-items: center; 266 | height: 24px; 267 | width: 100%; 268 | } 269 | .fui-icons__header:hover .fui-icons__remove-custom { 270 | display: block; 271 | } 272 | 273 | .fui-icons__remove-custom { 274 | display: none; 275 | cursor: pointer; 276 | color: var(--danger-color); 277 | margin: 0 8px; 278 | } 279 | 280 | .fui-tabs { 281 | display: flex; 282 | } 283 | 284 | .fui-tab { 285 | background: var(--secondary-color); 286 | border: 2px solid var(--border-dark-color); 287 | border-bottom: 0; 288 | border-radius: 6px 6px 0 0; 289 | color: var(--primary-color); 290 | height: 24px; 291 | vertical-align: middle; 292 | text-transform: uppercase; 293 | font-family: "FontSecondary"; 294 | font-size: 32px; 295 | padding: 0 12px 4px 12px; 296 | margin: 0 8px 0 0; 297 | cursor: pointer; 298 | } 299 | 300 | .fui-tab:hover, 301 | .fui-tab_active { 302 | background-color: var(--primary-color); 303 | color: var(--secondary-color); 304 | } 305 | 306 | .buttons-bottom { 307 | height: 32px; 308 | display: flex; 309 | justify-content: space-between; 310 | } 311 | 312 | .fui-settings { 313 | margin-top: 8px; 314 | } 315 | 316 | .fui-settings__input { 317 | font-size: 24px; 318 | } 319 | 320 | .fui-settings__checkbox { 321 | width: 16px; 322 | } --------------------------------------------------------------------------------