diff --git a/apps/icons/ChangeLog b/apps/icons/ChangeLog new file mode 100644 index 000000000..73fce0974 --- /dev/null +++ b/apps/icons/ChangeLog @@ -0,0 +1 @@ +0.01: New library diff --git a/apps/icons/README.md b/apps/icons/README.md new file mode 100644 index 000000000..3eb420b62 --- /dev/null +++ b/apps/icons/README.md @@ -0,0 +1,21 @@ +# Icons Library + +This library contains a set of icons that might be useful in your application, as well as a chooser for those icons: + +```JS +// get a list of available icons +require("icons").getIconNames() + +// draw an icon +g.drawImage(require("icons").getIcon("light"),0,0); + +// Allow the user to request an icon +require("icons").showIconChooser().then(function(iconName) { + console.log("User chose "+iconName); +}, function() { + console.log("User Cancelled"); +}); +``` + +To ensure the app loader auto-installs this module along with your app, just add the line +```"dependencies" : { "messageicons":"module" },``` to your `metadata.json` file. \ No newline at end of file diff --git a/apps/icons/app.png b/apps/icons/app.png new file mode 100644 index 000000000..1afe0b05b Binary files /dev/null and b/apps/icons/app.png differ diff --git a/apps/icons/gen/bike.png b/apps/icons/gen/bike.png new file mode 100644 index 000000000..65c3d6eaa Binary files /dev/null and b/apps/icons/gen/bike.png differ diff --git a/apps/icons/gen/car.png b/apps/icons/gen/car.png new file mode 100644 index 000000000..4e28abea5 Binary files /dev/null and b/apps/icons/gen/car.png differ diff --git a/apps/icons/gen/close.png b/apps/icons/gen/close.png new file mode 100644 index 000000000..472c74cf7 Binary files /dev/null and b/apps/icons/gen/close.png differ diff --git a/apps/icons/gen/down.png b/apps/icons/gen/down.png new file mode 100644 index 000000000..05b04e617 Binary files /dev/null and b/apps/icons/gen/down.png differ diff --git a/apps/icons/gen/fan.png b/apps/icons/gen/fan.png new file mode 100644 index 000000000..bff383de5 Binary files /dev/null and b/apps/icons/gen/fan.png differ diff --git a/apps/icons/gen/generate.js b/apps/icons/gen/generate.js new file mode 100755 index 000000000..387826903 --- /dev/null +++ b/apps/icons/gen/generate.js @@ -0,0 +1,92 @@ +#!/usr/bin/node + +// Creates lib.js from icons +// npm install png-js + +// Icons from https://fonts.google.com/icons + +var imageconverter = require("../../../webtools/imageconverter.js").imageconverter; +var icons = JSON.parse(require("fs").readFileSync(__dirname+"/icon_names.json")); +const imgOptions = { + mode : "1bit", + inverted : true, + transparent : true, + output: "raw" +}; +var PNG = require('png-js'); +var IMAGE_BYTES = 76; + +var iconTests = []; + +var promises = []; + +icons.forEach((icon,iconIndex) => { + // create image + console.log("Loading "+icon.name); + var fn = __dirname+"/"+icon.name+".png"; + console.log(fn); + var png = new PNG(require("fs").readFileSync(fn)); + if (png.width!=24 || png.height!=24) { + console.warn(icon.name+" should be 24x24px"); + } + + promises.push(new Promise(r => { + png.decode(function (pixels) { + var rgba = new Uint8Array(pixels); + var isTransparent = false; + for (var i=0;i { + iconData.set(Array.prototype.slice.call(Buffer.from(icon.img,"binary")), idx*IMAGE_BYTES) + }); + + console.log("Saving images"); + require("fs").writeFileSync(__dirname+"/../icons.img", Buffer.from(iconData,"binary")); + + console.log("Saving library"); + require("fs").writeFileSync(__dirname+"/../lib.js", ` +// Auto-generated by apps/icons/gen/generate.js + +/// Get an icon based on a name from getIconNames that can be drawn with g.drawImage +exports.getIcon = function(name) { + let match = ${JSON.stringify(","+icons.map(icon=>icon.name+"|"+icon.index).join(",")+",")}.match(new RegExp(\`,\${name.toLowerCase()}\\\\|(\\\\d+)\`)) + return require("Storage").read("icons.img", (match===null)?0:match[1]*${IMAGE_BYTES}, ${IMAGE_BYTES}); +}; + +/// Get a list of available icon names +exports.getIconNames = function() { + return ${JSON.stringify(icons.map(i=>i.name))}; +}; + +/// Show a menu to allow an icon to be chosen - its name is returned +exports.showIconChooser = function() { + return new Promise((resolve,reject) => { + var menu = { "" : { title : /*LANG*/"Icons", back : ()=>{E.showMenu();reject();}}} + exports.getIconNames().forEach(name => { + menu[\`\\0\${exports.getIcon(name)} \${name}\`] = ()=>{E.showMenu();resolve(name);}; + }); + E.showMenu(menu); + }); +}; + `); +}); diff --git a/apps/icons/gen/home.png b/apps/icons/gen/home.png new file mode 100644 index 000000000..3125c0749 Binary files /dev/null and b/apps/icons/gen/home.png differ diff --git a/apps/icons/gen/icon_names.json b/apps/icons/gen/icon_names.json new file mode 100644 index 000000000..d0b3f540c --- /dev/null +++ b/apps/icons/gen/icon_names.json @@ -0,0 +1,16 @@ +[ + {"name":"home"}, + {"name":"bike"}, + {"name":"car"}, + {"name":"fan"}, + {"name":"light"}, + {"name":"plug"}, + {"name":"rocket"}, + {"name":"switch"}, + {"name":"sync"}, + {"name":"up"}, + {"name":"down"}, + {"name":"left"}, + {"name":"right"}, + {"name":"close"} +] diff --git a/apps/icons/gen/left.png b/apps/icons/gen/left.png new file mode 100644 index 000000000..d602f1076 Binary files /dev/null and b/apps/icons/gen/left.png differ diff --git a/apps/icons/gen/light.png b/apps/icons/gen/light.png new file mode 100644 index 000000000..15b255dc7 Binary files /dev/null and b/apps/icons/gen/light.png differ diff --git a/apps/icons/gen/plug.png b/apps/icons/gen/plug.png new file mode 100644 index 000000000..0b4be69af Binary files /dev/null and b/apps/icons/gen/plug.png differ diff --git a/apps/icons/gen/right.png b/apps/icons/gen/right.png new file mode 100644 index 000000000..069e91437 Binary files /dev/null and b/apps/icons/gen/right.png differ diff --git a/apps/icons/gen/rocket.png b/apps/icons/gen/rocket.png new file mode 100644 index 000000000..414f67182 Binary files /dev/null and b/apps/icons/gen/rocket.png differ diff --git a/apps/icons/gen/switch.png b/apps/icons/gen/switch.png new file mode 100644 index 000000000..9d6f8a74b Binary files /dev/null and b/apps/icons/gen/switch.png differ diff --git a/apps/icons/gen/sync.png b/apps/icons/gen/sync.png new file mode 100644 index 000000000..7966646b4 Binary files /dev/null and b/apps/icons/gen/sync.png differ diff --git a/apps/icons/gen/up.png b/apps/icons/gen/up.png new file mode 100644 index 000000000..e6955fe84 Binary files /dev/null and b/apps/icons/gen/up.png differ diff --git a/apps/icons/icons.img b/apps/icons/icons.img new file mode 100644 index 000000000..9bc112c97 Binary files /dev/null and b/apps/icons/icons.img differ diff --git a/apps/icons/lib.js b/apps/icons/lib.js new file mode 100644 index 000000000..7889654f1 --- /dev/null +++ b/apps/icons/lib.js @@ -0,0 +1,25 @@ + +// Auto-generated by apps/icons/gen/generate.js + +/// Get an icon based on a name from getIconNames that can be drawn with g.drawImage +exports.getIcon = function(name) { + let match = ",home|0,bike|1,car|2,fan|3,light|4,plug|5,rocket|6,switch|7,sync|8,up|9,down|10,left|11,right|12,close|13,".match(new RegExp(`,${name.toLowerCase()}\\|(\\d+)`)) + return require("Storage").read("icons.img", (match===null)?0:match[1]*76, 76); +}; + +/// Get a list of available icon names +exports.getIconNames = function() { + return ["home","bike","car","fan","light","plug","rocket","switch","sync","up","down","left","right","close"]; +}; + +/// Show a menu to allow an icon to be chosen - its name is returned +exports.showIconChooser = function() { + return new Promise((resolve,reject) => { + var menu = { "" : { title : /*LANG*/"Icons", back : ()=>{E.showMenu();reject();}}} + exports.getIconNames().forEach(name => { + menu[`\0${exports.getIcon(name)} ${name}`] = ()=>{E.showMenu();resolve(name);}; + }); + E.showMenu(menu); + }); +}; + \ No newline at end of file diff --git a/apps/icons/metadata.json b/apps/icons/metadata.json new file mode 100644 index 000000000..77b24d98c --- /dev/null +++ b/apps/icons/metadata.json @@ -0,0 +1,17 @@ +{ + "id": "icons", + "name": "Icons", + "version": "0.01", + "description": "Library containing useful icons for apps", + "icon": "app.png", + "type": "module", + "tags": "tool,system", + "supports": ["BANGLEJS","BANGLEJS2"], + "provides_modules" : ["icons"], + "default": true, + "readme": "README.md", + "storage": [ + {"name":"icons","url":"lib.js"}, + {"name":"icons.img","url":"icons.img"} + ] +}