Use heatshrink/imageconverter from webtools - see https://github.com/espruino/BangleApps/pull/2299

pull/2303/head
Gordon Williams 2022-11-21 12:16:27 +00:00
parent 22db965863
commit bf6e0ed5ca
10 changed files with 161 additions and 161 deletions

View File

@ -170,10 +170,10 @@
</div> </div>
</footer> </footer>
<script src="https://www.puck-js.com/puck.js"></script> <script src="webtools/puck.js"></script>
<script src="webtools/heatshrink.js"></script>
<script src="core/lib/marked.min.js"></script> <script src="core/lib/marked.min.js"></script>
<script src="core/lib/espruinotools.js"></script> <script src="core/lib/espruinotools.js"></script>
<script src="core/lib/heatshrink.js"></script>
<script src="core/js/utils.js"></script> <script src="core/js/utils.js"></script>
<script src="loader.js"></script> <script src="loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> <!-- for backup.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> <!-- for backup.js -->

View File

@ -4,8 +4,8 @@
</head> </head>
<body> <body>
<script src="../../core/lib/heatshrink.js"></script> <script src="../../webtools/heatshrink.js"></script>
<script src="../../core/lib/imageconverter.js"></script> <script src="../../webtools/imageconverter.js"></script>
<script src="../../core/lib/customize.js"></script> <script src="../../core/lib/customize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.js"></script>
@ -32,7 +32,7 @@
<p>Select watchface folder:</br><input type="file" id="fileLoader" name="files[]" multiple directory="" webkitdirectory="" moxdirectory="" /></p> <p>Select watchface folder:</br><input type="file" id="fileLoader" name="files[]" multiple directory="" webkitdirectory="" moxdirectory="" /></p>
<p><b>or</b></p> <p><b>or</b></p>
<p>Select watchface zip file: </br><input type="file" id="zipLoader" name="zip"/></p><br/> <p>Select watchface zip file: </br><input type="file" id="zipLoader" name="zip"/></p><br/>
<button id="btnUpload" class="btn btn-primary">Upload to watch</button></br> <button id="btnUpload" class="btn btn-primary">Upload to watch</button></br>
<button id="btnSave" class="btn btn-secondary">Save resources file</button></br> <button id="btnSave" class="btn btn-secondary">Save resources file</button></br>
<button id="btnSaveFace" class="btn btn-secondary">Save face file</button></br> <button id="btnSaveFace" class="btn btn-secondary">Save face file</button></br>
@ -43,7 +43,7 @@
<a href="simpleanalog.zip">simpleanalog.zip</a></br> <a href="simpleanalog.zip">simpleanalog.zip</a></br>
</p> </p>
<script> <script>
var result = ""; var result = "";
var resultJson = {}; var resultJson = {};
var infoJson; var infoJson;
@ -55,15 +55,15 @@
var expectedFiles = 0; var expectedFiles = 0;
var rootZip = new JSZip(); var rootZip = new JSZip();
var resourcesZip = rootZip.folder("resources"); var resourcesZip = rootZip.folder("resources");
function isNativeFormat(){ function isNativeFormat(){
return document.getElementById("useNative").checked; return document.getElementById("useNative").checked;
} }
function addDebug(){ function addDebug(){
return document.getElementById("debugprints").checked; return document.getElementById("debugprints").checked;
} }
function convertAmazfitTime(time){ function convertAmazfitTime(time){
var result = {}; var result = {};
if (time.Hours){ if (time.Hours){
@ -88,7 +88,7 @@
} }
return result; return result;
} }
function convertAmazfitDate(date){ function convertAmazfitDate(date){
var result = {}; var result = {};
if (date.MonthAndDay.Separate.Day) result.Day = convertAmazfitNumber(date.MonthAndDay.Separate.Day, "Day"); if (date.MonthAndDay.Separate.Day) result.Day = convertAmazfitNumber(date.MonthAndDay.Separate.Day, "Day");
@ -98,11 +98,11 @@
} }
return result; return result;
} }
var filesToMove={}; var filesToMove={};
var zipChangePromise = Promise.resolve(); var zipChangePromise = Promise.resolve();
function performFileChanges(){ function performFileChanges(){
var promise = Promise.resolve(); var promise = Promise.resolve();
//rename all files to just numbers without leading zeroes //rename all files to just numbers without leading zeroes
@ -111,7 +111,7 @@
var tmp = resultJson[c]; var tmp = resultJson[c];
delete resultJson[c]; delete resultJson[c];
resultJson[Number(c)] = tmp; resultJson[Number(c)] = tmp;
async function modZip(c){ async function modZip(c){
console.log("Async modification of ", c) console.log("Async modification of ", c)
var fileRegex = new RegExp(c + ".*"); var fileRegex = new RegExp(c + ".*");
@ -120,27 +120,27 @@
console.log("Filedata is", fileData); console.log("Filedata is", fileData);
var extension = resourcesZip.file(fileRegex)[0].name.match(/\.[^.]*$/); var extension = resourcesZip.file(fileRegex)[0].name.match(/\.[^.]*$/);
var newName = Number(c) + extension; var newName = Number(c) + extension;
console.log("Renaming to", newName); console.log("Renaming to", newName);
resourcesZip.remove(c + extension); resourcesZip.remove(c + extension);
resourcesZip.file(newName, fileData); resourcesZip.file(newName, fileData);
} }
promise = promise.then(modZip(c)); promise = promise.then(modZip(c));
} }
console.log("File moves:", filesToMove); console.log("File moves:", filesToMove);
for (var c in filesToMove){ for (var c in filesToMove){
var tmp = resultJson[c]; var tmp = resultJson[c];
console.log("Handle filemove", c, filesToMove[c], tmp); console.log("Handle filemove", c, filesToMove[c], tmp);
var element = resultJson; var element = resultJson;
var path = filesToMove[c]; var path = filesToMove[c];
async function modZip(c){ async function modZip(c){
console.log("Async modification of ", c) console.log("Async modification of ", c)
var fileRegex = new RegExp(c + ".*"); var fileRegex = new RegExp(c + ".*");
@ -149,13 +149,13 @@
console.log("Filedata is", fileData); console.log("Filedata is", fileData);
var extension = resourcesZip.file(fileRegex)[0].name.match(/\.[^.]*$/); var extension = resourcesZip.file(fileRegex)[0].name.match(/\.[^.]*$/);
var newName = Number(c) + extension; var newName = Number(c) + extension;
console.log("Copying to", newName); console.log("Copying to", newName);
resourcesZip.file(filesToMove[c].join("/") + extension, fileData); resourcesZip.file(filesToMove[c].join("/") + extension, fileData);
} }
promise = promise.then(modZip(c)); promise = promise.then(modZip(c));
for (var i = 0; i< path.length; i++){ for (var i = 0; i< path.length; i++){
if (!element[path[i]]) element[path[i]] = {}; if (!element[path[i]]) element[path[i]] = {};
if (i == path.length - 1){ if (i == path.length - 1){
@ -164,15 +164,15 @@
element = element[path[i]]; element = element[path[i]];
} }
} }
} }
promise.then(()=>{ promise.then(()=>{
document.getElementById('btnUpload').disabled = true; document.getElementById('btnUpload').disabled = true;
}); });
console.log("After moves", resultJson); console.log("After moves", resultJson);
return promise; return promise;
}; };
function convertAmazfitMultistate(multistate, value, minValue, maxValue){ function convertAmazfitMultistate(multistate, value, minValue, maxValue){
var result = { var result = {
MultiState: { MultiState: {
@ -188,18 +188,18 @@
if (multistate.ImageIndexOff) filesToMove[multistate.ImageIndexOff] = ["status", value, "off"]; if (multistate.ImageIndexOff) filesToMove[multistate.ImageIndexOff] = ["status", value, "off"];
return result; return result;
} }
function convertAmazfitStatus(status){ function convertAmazfitStatus(status){
var result = {}; var result = {};
if (status.Alarm) result.Alarm = convertAmazfitMultistate(status.Alarm,"Alarm"); if (status.Alarm) result.Alarm = convertAmazfitMultistate(status.Alarm,"Alarm");
if (status.Bluetooth) result.Bluetooth = convertAmazfitMultistate(status.Bluetooth,"Bluetooth"); if (status.Bluetooth) result.Bluetooth = convertAmazfitMultistate(status.Bluetooth,"Bluetooth");
if (status.DoNotDisturb) result.DoNotDisturb = convertAmazfitMultistate(status.DoNotDisturb,"Notifications"); if (status.DoNotDisturb) result.DoNotDisturb = convertAmazfitMultistate(status.DoNotDisturb,"Notifications");
if (status.Lock) result.Lock = convertAmazfitMultistate(status.Lock,"Lock"); if (status.Lock) result.Lock = convertAmazfitMultistate(status.Lock,"Lock");
return result; return result;
} }
function convertAmazfitNumber(element, value, minValue, maxValue){ function convertAmazfitNumber(element, value, minValue, maxValue){
var number = {}; var number = {};
var result = { var result = {
@ -233,10 +233,10 @@
if (maxValue !== undefined) number.MinValue = minValue; if (maxValue !== undefined) number.MinValue = minValue;
return result; return result;
} }
function moveWeatherIcons(icon){ function moveWeatherIcons(icon){
filesToMove[icon.ImageIndex + 0] = ["weather", "fallback"]; filesToMove[icon.ImageIndex + 0] = ["weather", "fallback"];
// Light clouds // Light clouds
filesToMove[icon.ImageIndex + 1] = ["weather", 801]; filesToMove[icon.ImageIndex + 1] = ["weather", 801];
// Cloudy, possible rain // Cloudy, possible rain
@ -282,7 +282,7 @@
// Very heavy shower // Very heavy shower
filesToMove[icon.ImageIndex + 22] = ["weather", 531]; filesToMove[icon.ImageIndex + 22] = ["weather", 531];
} }
function convertAmazfitTemperature(temp){ function convertAmazfitTemperature(temp){
var result = {}; var result = {};
result = convertAmazfitNumber(temp.Number, "WeatherTemperature"); result = convertAmazfitNumber(temp.Number, "WeatherTemperature");
@ -294,17 +294,17 @@
} }
return result; return result;
} }
function convertAmazfitWeather(weather){ function convertAmazfitWeather(weather){
var result = {}; var result = {};
if (weather.Temperature && weather.Temperature.Current){ if (weather.Temperature && weather.Temperature.Current){
if (!result.Temperature) result.Temperature = {}; if (!result.Temperature) result.Temperature = {};
result.Temperature.Current = convertAmazfitTemperature(weather.Temperature.Current); result.Temperature.Current = convertAmazfitTemperature(weather.Temperature.Current);
} }
if (weather.Temperature && weather.Temperature.Today){ if (weather.Temperature && weather.Temperature.Today){
if (!result.Temperature) result.Temperature = {}; if (!result.Temperature) result.Temperature = {};
if (weather.Temperature.Today.Separate){ if (weather.Temperature.Today.Separate){
if (weather.Temperature.Today.Separate.Day){ if (weather.Temperature.Today.Separate.Day){
result.Temperature.Day = convertAmazfitTemperature(weather.Temperature.Today.Separate.Day); result.Temperature.Day = convertAmazfitTemperature(weather.Temperature.Today.Separate.Day);
@ -327,10 +327,10 @@
} }
return result; return result;
} }
function convertAmazfitActivity(activity){ function convertAmazfitActivity(activity){
var result = {}; var result = {};
if (activity.Steps){ if (activity.Steps){
result.Steps = convertAmazfitNumber(activity.Steps, "Steps"); result.Steps = convertAmazfitNumber(activity.Steps, "Steps");
} }
@ -339,7 +339,7 @@
} }
return result; return result;
} }
function convertAmazfitScale(scale, value, minValue, maxValue){ function convertAmazfitScale(scale, value, minValue, maxValue){
var result = {}; var result = {};
result.Scale = { result.Scale = {
@ -356,10 +356,10 @@
Y: c.Y Y: c.Y
}); });
} }
return result; return result;
} }
function convertAmazfitStepsProgress(steps){ function convertAmazfitStepsProgress(steps){
var result = {}; var result = {};
if (steps.GoalImage){ if (steps.GoalImage){
@ -378,7 +378,7 @@
} }
return result; return result;
} }
function convertAmazfitBattery(battery){ function convertAmazfitBattery(battery){
var result = {}; var result = {};
if (battery.Scale){ if (battery.Scale){
@ -389,7 +389,7 @@
} }
return result; return result;
} }
function convertAmazfitImage(image){ function convertAmazfitImage(image){
var result = { var result = {
Image: { Image: {
@ -401,11 +401,11 @@
}; };
return result; return result;
} }
function convertAmazfitColor(color){ function convertAmazfitColor(color){
return "#" + color.substring(2); return "#" + color.substring(2);
} }
function convertAmazfitHand(hand, rotationValue, minRotationValue, maxRotationValue){ function convertAmazfitHand(hand, rotationValue, minRotationValue, maxRotationValue){
var result = { var result = {
Filled: !hand.OnlyBorder, Filled: !hand.OnlyBorder,
@ -418,18 +418,18 @@
MaxRotationValue: maxRotationValue, MaxRotationValue: maxRotationValue,
MinRotationValue: minRotationValue MinRotationValue: minRotationValue
}; };
result.Vertices = [] result.Vertices = []
for (var c of hand.Shape){ for (var c of hand.Shape){
result.Vertices.push(c); result.Vertices.push(c);
} }
return { Poly: result }; return { Poly: result };
} }
function convertAmazfitAnalog(analog, face){ function convertAmazfitAnalog(analog, face){
var result = { var result = {
}; };
if (analog.Hours){ if (analog.Hours){
result.Hours = {}; result.Hours = {};
result.Hours.Hand = convertAmazfitHand(analog.Hours, "Hour12Analog", 0, 12); result.Hours.Hand = convertAmazfitHand(analog.Hours, "Hour12Analog", 0, 12);
@ -464,14 +464,14 @@
} }
return result; return result;
} }
function restructureAmazfitFormat(dataString){ function restructureAmazfitFormat(dataString){
console.log("Amazfit data:", dataString); console.log("Amazfit data:", dataString);
var json = JSON.parse(dataString); var json = JSON.parse(dataString);
faceJson = json; faceJson = json;
var result = {}; var result = {};
result.Properties = {}; result.Properties = {};
@ -479,8 +479,8 @@
result.Properties.Redraw.Unlocked = 60000; result.Properties.Redraw.Unlocked = 60000;
result.Properties.Redraw.Locked = 60000; result.Properties.Redraw.Locked = 60000;
result.Properties.Redraw.Clear = true; result.Properties.Redraw.Clear = true;
if (json.Background){ if (json.Background){
result.Background = json.Background; result.Background = json.Background;
result.Background.Image.ImagePath = []; result.Background.Image.ImagePath = [];
@ -491,32 +491,32 @@
result.Time = convertAmazfitTime(json.Time); result.Time = convertAmazfitTime(json.Time);
if (json.AnalogDialFace) result.Time.Plane = 1; if (json.AnalogDialFace) result.Time.Plane = 1;
} }
if (json.Date){ if (json.Date){
result.Date = convertAmazfitDate(json.Date); result.Date = convertAmazfitDate(json.Date);
if (json.AnalogDialFace) result.Date.Plane = 1; if (json.AnalogDialFace) result.Date.Plane = 1;
} }
if (json.Status){ if (json.Status){
result.Status = convertAmazfitStatus(json.Status); result.Status = convertAmazfitStatus(json.Status);
if (json.AnalogDialFace) result.Status.Plane = 1; if (json.AnalogDialFace) result.Status.Plane = 1;
} }
if (json.Weather){ if (json.Weather){
result.Weather = convertAmazfitWeather(json.Weather); result.Weather = convertAmazfitWeather(json.Weather);
if (json.AnalogDialFace) result.Weather.Plane = 1; if (json.AnalogDialFace) result.Weather.Plane = 1;
} }
if (json.Activity){ if (json.Activity){
result.Activity = convertAmazfitActivity(json.Activity); result.Activity = convertAmazfitActivity(json.Activity);
if (json.AnalogDialFace) result.Activity.Plane = 1; if (json.AnalogDialFace) result.Activity.Plane = 1;
} }
if (json.StepsProgress){ if (json.StepsProgress){
result.StepsProgress = convertAmazfitStepsProgress(json.StepsProgress); result.StepsProgress = convertAmazfitStepsProgress(json.StepsProgress);
if (json.AnalogDialFace) result.StepsProgress.Plane = 1; if (json.AnalogDialFace) result.StepsProgress.Plane = 1;
} }
if (json.Battery){ if (json.Battery){
result.Battery = convertAmazfitBattery(json.Battery); result.Battery = convertAmazfitBattery(json.Battery);
if (json.AnalogDialFace) result.Battery.Plane = 1; if (json.AnalogDialFace) result.Battery.Plane = 1;
@ -529,7 +529,7 @@
return result; return result;
} }
function parseFaceJson(jsonString){ function parseFaceJson(jsonString){
if (isNativeFormat()){ if (isNativeFormat()){
return JSON.parse(jsonString); return JSON.parse(jsonString);
@ -537,7 +537,7 @@
return restructureAmazfitFormat(jsonString); return restructureAmazfitFormat(jsonString);
} }
} }
function combineProperty(name, source, target){ function combineProperty(name, source, target){
if (source[name] && target[name]){ if (source[name] && target[name]){
if (Array.isArray(target[name])){ if (Array.isArray(target[name])){
@ -556,7 +556,7 @@
if (typeof element == "string" || typeof element == "number") return []; if (typeof element == "string" || typeof element == "number") return [];
for (var c in element){ for (var c in element){
var next = element[c]; var next = element[c];
combineProperty("X",element,next); combineProperty("X",element,next);
combineProperty("Y",element,next); combineProperty("Y",element,next);
combineProperty("Width",element,next); combineProperty("Width",element,next);
@ -571,7 +571,7 @@
combineProperty("MaxRotationValue",element,next); combineProperty("MaxRotationValue",element,next);
if (typeof element.Plane == "number") next.Plane = element.Plane; if (typeof element.Plane == "number") next.Plane = element.Plane;
next.Layer = element.Layer ? (element.Layer) : "" + c; next.Layer = element.Layer ? (element.Layer) : "" + c;
if (["MultiState","Image","CodedImage","Number","Circle","Poly","Rect","Scale"].includes(c)){ if (["MultiState","Image","CodedImage","Number","Circle","Poly","Rect","Scale"].includes(c)){
result.push({type:c, value: next}); result.push({type:c, value: next});
} else { } else {
@ -580,12 +580,12 @@
} }
return result; return result;
} }
function convertToCode(elements, properties, wrapInTimeouts, forceUseOrigPlane){ function convertToCode(elements, properties, wrapInTimeouts, forceUseOrigPlane){
var code = "(function (wr, wf) {\n"; var code = "(function (wr, wf) {\n";
code += "var lc;\n"; code += "var lc;\n";
code += "var p = Promise.resolve();\n"; code += "var p = Promise.resolve();\n";
//get mapped by layer //get mapped by layer
var counter = 0; var counter = 0;
var planes = {}; var planes = {};
@ -606,20 +606,20 @@
} }
if (!planeNumbers.includes(0)) planeNumbers.push(0); if (!planeNumbers.includes(0)) planeNumbers.push(0);
planeNumbers.sort().reverse(); planeNumbers.sort().reverse();
console.log("Found planes", planes, "with numbers", planeNumbers) console.log("Found planes", planes, "with numbers", planeNumbers)
code += "p0 = g;\n"; code += "p0 = g;\n";
for (var planeIndex = 0; planeIndex < planeNumbers.length; planeIndex++){ for (var planeIndex = 0; planeIndex < planeNumbers.length; planeIndex++){
var layers = planes[planeNumbers[planeIndex]]; var layers = planes[planeNumbers[planeIndex]];
var plane = planeNumbers[planeIndex]; var plane = planeNumbers[planeIndex];
var lastSetColor; var lastSetColor;
var lastSetBgColor; var lastSetBgColor;
if (plane != 0) code += "if (!p" + plane + ") p" + plane + " = Graphics.createArrayBuffer(g.getWidth(),g.getHeight(),4,{msb:true});\n"; if (plane != 0) code += "if (!p" + plane + ") p" + plane + " = Graphics.createArrayBuffer(g.getWidth(),g.getHeight(),4,{msb:true});\n";
if (properties.Redraw && properties.Redraw.Clear){ if (properties.Redraw && properties.Redraw.Clear){
if (wrapInTimeouts && (plane != 0 || forceUseOrigPlane)){ if (wrapInTimeouts && (plane != 0 || forceUseOrigPlane)){
code += "p = p.then(()=>delay(0)).then(()=>{\n"; code += "p = p.then(()=>delay(0)).then(()=>{\n";
@ -632,29 +632,29 @@
code += 'endPerfLog("initialDraw_g.clear");'+ "\n"; code += 'endPerfLog("initialDraw_g.clear");'+ "\n";
code += "});\n"; code += "});\n";
} }
var previousPlane = plane + 1; var previousPlane = plane + 1;
if (previousPlane < planeNumbers.length){ if (previousPlane < planeNumbers.length){
code += "p = p.then(()=>{\n"; code += "p = p.then(()=>{\n";
if (addDebug()) code += 'print("Copying of plane ' + previousPlane + ' to display");'+"\n"; if (addDebug()) code += 'print("Copying of plane ' + previousPlane + ' to display");'+"\n";
//code += "g.drawImage(p" + i + ".asImage());"; //code += "g.drawImage(p" + i + ".asImage());";
code += "p0.drawImage({width: p" + previousPlane + ".getWidth(), height: p" + previousPlane + ".getHeight(), bpp: p" + previousPlane + ".getBPP(), buffer: p" + previousPlane + ".buffer, palette: palette});\n"; code += "p0.drawImage({width: p" + previousPlane + ".getWidth(), height: p" + previousPlane + ".getHeight(), bpp: p" + previousPlane + ".getBPP(), buffer: p" + previousPlane + ".buffer, palette: palette});\n";
code += "});\n"; code += "});\n";
} }
console.log("Got layers", layers); console.log("Got layers", layers);
for (var layername in layers){ for (var layername in layers){
var layerElements = layers[layername]; var layerElements = layers[layername];
console.log("Layer elements", layername, layerElements); console.log("Layer elements", layername, layerElements);
//code for whole layer //code for whole layer
if (addDebug()) code += 'print("Starting layer ' + layername + '");' + "\n"; if (addDebug()) code += 'print("Starting layer ' + layername + '");' + "\n";
var checkForLayerChange = false; var checkForLayerChange = false;
var checkcode = ""; var checkcode = "";
if (!(properties.Redraw && properties.Redraw.Clear)){ if (!(properties.Redraw && properties.Redraw.Clear)){
checkcode = 'firstDraw'; checkcode = 'firstDraw';
for (var i = 0; i< layerElements.length; i++){ for (var i = 0; i< layerElements.length; i++){
@ -672,30 +672,30 @@
} }
} }
} }
//code for elements //code for elements
for (var i = 0; i< layerElements.length; i++){ for (var i = 0; i< layerElements.length; i++){
var elementIndex = layerElements[i].index; var elementIndex = layerElements[i].index;
var c = elements[elementIndex]; var c = elements[elementIndex];
console.log("convert to code", c); console.log("convert to code", c);
var condition = ""; var condition = "";
if (checkcode.length > 0 && checkForLayerChange){ if (checkcode.length > 0 && checkForLayerChange){
if (condition.length > 0) condition += " && "; if (condition.length > 0) condition += " && ";
condition = '(' + checkcode + ')'; condition = '(' + checkcode + ')';
} }
if (c.value.HideOn && c.value.HideOn.includes("Lock")){ if (c.value.HideOn && c.value.HideOn.includes("Lock")){
if (condition.length > 0) condition += " && "; if (condition.length > 0) condition += " && ";
condition = '!Bangle.isLocked()'; condition = '!Bangle.isLocked()';
} }
if (c.value.Type == "Once"){ if (c.value.Type == "Once"){
if (condition.length > 0) condition += " && "; if (condition.length > 0) condition += " && ";
condition += "firstDraw"; condition += "firstDraw";
} }
var planeName = "p" + plane; var planeName = "p" + plane;
var colorsetting = ""; var colorsetting = "";
if (c.value.ForegroundColor && lastSetColor != c.value.ForegroundColor){ if (c.value.ForegroundColor && lastSetColor != c.value.ForegroundColor){
@ -712,14 +712,14 @@
else else
colorsetting += planeName + ".setBgColor(\"" + c.value.BackgroundColor + "\");\n"; colorsetting += planeName + ".setBgColor(\"" + c.value.BackgroundColor + "\");\n";
} }
if (addDebug()) code += 'print("Element condition is ' + condition + '");' + "\n"; if (addDebug()) code += 'print("Element condition is ' + condition + '");' + "\n";
code += (condition.length > 0 ? "if (" + condition + "){\n" : ""); code += (condition.length > 0 ? "if (" + condition + "){\n" : "");
if (wrapInTimeouts && (plane != 0 || forceUseOrigPlane)){ if (wrapInTimeouts && (plane != 0 || forceUseOrigPlane)){
code += "p = p.then(()=>delay(0)).then(()=>{\n"; code += "p = p.then(()=>delay(0)).then(()=>{\n";
} else { } else {
code += "p = p.then(()=>{\n"; code += "p = p.then(()=>{\n";
} }
code += "" + colorsetting; code += "" + colorsetting;
if (addDebug()) code += 'print("Drawing element ' + elementIndex + ' with type ' + c.type + ' on plane ' + planeName + '");' + "\n"; if (addDebug()) code += 'print("Drawing element ' + elementIndex + ' with type ' + c.type + ' on plane ' + planeName + '");' + "\n";
code += "draw" + c.type + "(" + planeName + ", wr, wf.Collapsed[" + elementIndex + "].value);\n"; code += "draw" + c.type + "(" + planeName + ", wr, wf.Collapsed[" + elementIndex + "].value);\n";
@ -729,11 +729,11 @@
} }
} }
console.log("Current plane is", plane); console.log("Current plane is", plane);
} }
code += "return p;})"; code += "return p;})";
console.log("Code:", code); console.log("Code:", code);
return code return code
@ -742,14 +742,14 @@
function postProcess(){ function postProcess(){
moveData(resultJson); moveData(resultJson);
console.log("Created data file", resourceDataString, resourceDataOffset, resultJson); console.log("Created data file", resourceDataString, resourceDataOffset, resultJson);
var properties = faceJson.Properties; var properties = faceJson.Properties;
faceJson = { Properties: properties, Collapsed: collapseTree(faceJson,{X:0,Y:0})}; faceJson = { Properties: properties, Collapsed: collapseTree(faceJson,{X:0,Y:0})};
console.log("After collapsing", faceJson); console.log("After collapsing", faceJson);
precompiledJs = convertToCode(faceJson.Collapsed, properties, document.getElementById('timeoutwrap').checked, document.getElementById('forceOrigPlane').checked); precompiledJs = convertToCode(faceJson.Collapsed, properties, document.getElementById('timeoutwrap').checked, document.getElementById('forceOrigPlane').checked);
console.log("After precompiling", precompiledJs); console.log("After precompiling", precompiledJs);
} }
function convertJsToJson(imgstr){ function convertJsToJson(imgstr){
var E = {}; var E = {};
E.toArrayBuffer = (s)=>s; E.toArrayBuffer = (s)=>s;
@ -768,7 +768,7 @@
function imageLoaded() { function imageLoaded() {
var options = {}; var options = {};
options.diffusion = infoJson.diffusion ? infoJson.diffusion : "none"; options.diffusion = infoJson.diffusion ? infoJson.diffusion : "none";
options.compression = false; options.compression = false;
options.alphaToColor = false; options.alphaToColor = false;
@ -779,12 +779,12 @@
options.contrast = 0; options.contrast = 0;
options.mode = infoJson.color ? infoJson.color : "1bit"; options.mode = infoJson.color ? infoJson.color : "1bit";
options.output = "object"; options.output = "object";
console.log("Loaded image has path", this.path); console.log("Loaded image has path", this.path);
var jsonPath = this.path.split("/"); var jsonPath = this.path.split("/");
var forcedTransparentColorMatch = jsonPath[jsonPath.length-1].match(/.*\.t([^.]+)\..*/) var forcedTransparentColorMatch = jsonPath[jsonPath.length-1].match(/.*\.t([^.]+)\..*/)
var forcedTransparentColor; var forcedTransparentColor;
if (jsonPath[jsonPath.length-1].includes(".t.")){ if (jsonPath[jsonPath.length-1].includes(".t.")){
options.transparent = true; options.transparent = true;
@ -792,13 +792,13 @@
options.transparent = false; options.transparent = false;
forcedTransparentColor = forcedTransparentColorMatch[1]; forcedTransparentColor = forcedTransparentColorMatch[1];
} }
console.log("image has transparency", options.transparent); console.log("image has transparency", options.transparent);
console.log("image has forced transparent color", forcedTransparentColor); console.log("image has forced transparent color", forcedTransparentColor);
jsonPath[jsonPath.length-1] = jsonPath[jsonPath.length-1].replace(/([^.]*)\..*/, "$1"); jsonPath[jsonPath.length-1] = jsonPath[jsonPath.length-1].replace(/([^.]*)\..*/, "$1");
console.log("Loaded image has json path", jsonPath); console.log("Loaded image has json path", jsonPath);
var canvas = document.getElementById("canvas") var canvas = document.getElementById("canvas")
canvas.width = this.width*2; canvas.width = this.width*2;
canvas.height = this.height; canvas.height = this.height;
@ -819,7 +819,7 @@
imgstr = imageconverter.RGBAtoString(rgba, options); imgstr = imageconverter.RGBAtoString(rgba, options);
var outputImageData = new ImageData(options.rgbaOut, options.width, options.height); var outputImageData = new ImageData(options.rgbaOut, options.width, options.height);
ctx.putImageData(outputImageData,this.width,0); ctx.putImageData(outputImageData,this.width,0);
imgstr = convertJsToJson(imgstr); imgstr = convertJsToJson(imgstr);
// checkerboard for transparency on original image // checkerboard for transparency on original image
@ -827,9 +827,9 @@
imageconverter.RGBAtoCheckerboard(imageData.data, {width:this.width,height:this.height}); imageconverter.RGBAtoCheckerboard(imageData.data, {width:this.width,height:this.height});
ctx.putImageData(imageData,0,0); ctx.putImageData(imageData,0,0);
var currentElement = resultJson; var currentElement = resultJson;
for (var i = 0; i < jsonPath.length; i++){ for (var i = 0; i < jsonPath.length; i++){
if (i == jsonPath.length - 1){ if (i == jsonPath.length - 1){
var resultingObject = JSON.parse(imgstr); var resultingObject = JSON.parse(imgstr);
@ -841,18 +841,18 @@
currentElement = currentElement[jsonPath[i]]; currentElement = currentElement[jsonPath[i]];
} }
} }
handledFiles++; handledFiles++;
console.log("Expected:", expectedFiles, " handled:", handledFiles); console.log("Expected:", expectedFiles, " handled:", handledFiles);
if (handledFiles == expectedFiles){ if (handledFiles == expectedFiles){
if (!isNativeFormat()) { if (!isNativeFormat()) {
performFileChanges().then(()=>{ performFileChanges().then(()=>{
postProcess(); postProcess();
rootZip.file("face.json", JSON.stringify(faceJson, null, 2)); rootZip.file("face.json", JSON.stringify(faceJson, null, 2));
rootZip.file("info.json", JSON.stringify(infoJson, null, 2)); rootZip.file("info.json", JSON.stringify(infoJson, null, 2));
document.getElementById('btnSave').disabled = false; document.getElementById('btnSave').disabled = false;
document.getElementById('btnSaveFace').disabled = false; document.getElementById('btnSaveFace').disabled = false;
document.getElementById('btnSaveZip').disabled = false; document.getElementById('btnSaveZip').disabled = false;
@ -860,21 +860,21 @@
}); });
} else { } else {
postProcess(); postProcess();
document.getElementById('btnSave').disabled = false; document.getElementById('btnSave').disabled = false;
document.getElementById('btnSaveFace').disabled = false; document.getElementById('btnSaveFace').disabled = false;
document.getElementById('btnUpload').disabled = false; document.getElementById('btnUpload').disabled = false;
} }
} }
} }
function handleWatchFace(infoFile, faceFile, resourceFiles){ function handleWatchFace(infoFile, faceFile, resourceFiles){
if (isNativeFormat()){ if (isNativeFormat()){
var reader = new FileReader(); var reader = new FileReader();
reader.path = infoFile.webkitRelativePath; reader.path = infoFile.webkitRelativePath;
reader.onload = function(event) { reader.onload = function(event) {
infoJson = JSON.parse(reader.result); infoJson = JSON.parse(reader.result);
handleFaceJson(faceFile, resourceFiles); handleFaceJson(faceFile, resourceFiles);
}; };
reader.readAsText(infoFile); reader.readAsText(infoFile);
@ -883,18 +883,18 @@
handleFaceJson(faceFile, resourceFiles); handleFaceJson(faceFile, resourceFiles);
} }
} }
function handleFaceJson(faceFile, resourceFiles){ function handleFaceJson(faceFile, resourceFiles){
var reader = new FileReader(); var reader = new FileReader();
reader.path = faceFile.webkitRelativePath; reader.path = faceFile.webkitRelativePath;
reader.onload = function(event) { reader.onload = function(event) {
faceJson = parseFaceJson(reader.result); faceJson = parseFaceJson(reader.result);
handleResourceFiles(resourceFiles); handleResourceFiles(resourceFiles);
}; };
reader.readAsText(faceFile); reader.readAsText(faceFile);
} }
function handleResourceFiles(files){ function handleResourceFiles(files){
for (var current of files){ for (var current of files){
console.log('Handle resource file ', current); console.log('Handle resource file ', current);
@ -913,29 +913,29 @@
img.path = this.path; img.path = this.path;
img.onload = imageLoaded; img.onload = imageLoaded;
img.src = event.target.result; img.src = event.target.result;
}; };
reader.readAsDataURL(current); reader.readAsDataURL(current);
} }
} }
function handleFileSelect(event) { function handleFileSelect(event) {
handledFiles = 0; handledFiles = 0;
expectedFiles = undefined; expectedFiles = undefined;
document.getElementById('btnSave').disabled = true; document.getElementById('btnSave').disabled = true;
document.getElementById('btnSaveZip').disabled = true; document.getElementById('btnSaveZip').disabled = true;
document.getElementById('btnSaveFace').disabled = true; document.getElementById('btnSaveFace').disabled = true;
document.getElementById('btnUpload').disabled = true; document.getElementById('btnUpload').disabled = true;
console.log("File select event", event); console.log("File select event", event);
if (event.target.files.length == 0) return; if (event.target.files.length == 0) return;
result = ""; result = "";
resultJson= {}; resultJson= {};
var resourceFiles = []; var resourceFiles = [];
var faceFile; var faceFile;
var infoFile; var infoFile;
for (var current of event.target.files){ for (var current of event.target.files){
console.log('Handle file ', current); console.log('Handle file ', current);
if (isNativeFormat()){ if (isNativeFormat()){
@ -970,10 +970,10 @@
} }
} }
handleWatchFace(infoFile, faceFile, resourceFiles); handleWatchFace(infoFile, faceFile, resourceFiles);
}; };
document.getElementById('fileLoader').addEventListener('change', handleFileSelect, false); document.getElementById('fileLoader').addEventListener('change', handleFileSelect, false);
function moveData(json){ function moveData(json){
console.log("MoveData for", json); console.log("MoveData for", json);
for (var k in json){ for (var k in json){
@ -997,20 +997,20 @@
} }
} }
} }
document.getElementById("timeoutwrap").addEventListener("click", function() { document.getElementById("timeoutwrap").addEventListener("click", function() {
document.getElementById("forceOrigPlane").disabled = !document.getElementById("timeoutwrap").checked; document.getElementById("forceOrigPlane").disabled = !document.getElementById("timeoutwrap").checked;
}); });
document.getElementById("btnSave").addEventListener("click", function() { document.getElementById("btnSave").addEventListener("click", function() {
var h = document.createElement('a'); var h = document.createElement('a');
h.href = 'data:text/json;charset=utf-8,' + encodeURI(JSON.stringify(resultJson)); h.href = 'data:text/json;charset=utf-8,' + encodeURI(JSON.stringify(resultJson));
h.target = '_blank'; h.target = '_blank';
h.download = "imageclock.resources.json"; h.download = "imageclock.resources.json";
h.click(); h.click();
}); });
document.getElementById("btnUpload").addEventListener("click", function() { document.getElementById("btnUpload").addEventListener("click", function() {
var appDef = { var appDef = {
id : "imageclock", id : "imageclock",
storage:[ storage:[
@ -1025,10 +1025,10 @@
appDef.storage.push({name:"imageclock.draw.js", content: precompiledJs.length > 0 ? precompiledJs : "//empty"}); appDef.storage.push({name:"imageclock.draw.js", content: precompiledJs.length > 0 ? precompiledJs : "//empty"});
appDef.storage.push({name:"imageclock.face.json", content: JSON.stringify(faceJson)}); appDef.storage.push({name:"imageclock.face.json", content: JSON.stringify(faceJson)});
console.log("Uploading app:", appDef); console.log("Uploading app:", appDef);
sendCustomizedApp(appDef); sendCustomizedApp(appDef);
}); });
function handleZipSelect(evt) { function handleZipSelect(evt) {
@ -1040,18 +1040,18 @@
document.getElementById('btnSaveZip').disabled = true; document.getElementById('btnSaveZip').disabled = true;
document.getElementById('btnUpload').disabled = true; document.getElementById('btnUpload').disabled = true;
JSZip.loadAsync(f).then(function(zip) { JSZip.loadAsync(f).then(function(zip) {
console.log("Zip loaded", zip); console.log("Zip loaded", zip);
result = ""; result = "";
resultJson= {}; resultJson= {};
var resourceFiles = []; var resourceFiles = [];
var promise = zip.file("face.json").async("string").then((data)=>{ var promise = zip.file("face.json").async("string").then((data)=>{
console.log("face.json data", data); console.log("face.json data", data);
faceJson = parseFaceJson(data); faceJson = parseFaceJson(data);
}); });
if (isNativeFormat()){ if (isNativeFormat()){
promise = promise.then(zip.file("info.json").async("string").then((data)=>{ promise = promise.then(zip.file("info.json").async("string").then((data)=>{
console.log("info.json data", data); console.log("info.json data", data);
@ -1062,12 +1062,12 @@
"color": "3bit", "color": "3bit",
"transparent": true "transparent": true
}; };
} }
zip.folder("resources").forEach(function (relativePath, file){ zip.folder("resources").forEach(function (relativePath, file){
console.log("iterating over", relativePath); console.log("iterating over", relativePath);
if (!file.dir){ if (!file.dir){
expectedFiles++; expectedFiles++;
promise = promise.then(file.async("blob").then(function (blob) { promise = promise.then(file.async("blob").then(function (blob) {
@ -1079,14 +1079,14 @@
img.path = this.path; img.path = this.path;
img.onload = imageLoaded; img.onload = imageLoaded;
img.src = event.target.result; img.src = event.target.result;
}; };
reader.readAsDataURL(blob); reader.readAsDataURL(blob);
})); }));
} }
}); });
}, function (e) { }, function (e) {
console.log("Error reading " + f.name + ": " + e.message); console.log("Error reading " + f.name + ": " + e.message);
}); });
@ -1095,11 +1095,11 @@
console.log("Zip select event", evt); console.log("Zip select event", evt);
var files = evt.target.files; var files = evt.target.files;
if (files.length > 1){ if (files.length > 1){
alert("Only one file allowed"); alert("Only one file allowed");
} }
handleFile(files[0]); handleFile(files[0]);
} }
@ -1113,22 +1113,22 @@
}); });
} }
document.getElementById("btnSaveFace").addEventListener("click", function() { document.getElementById("btnSaveFace").addEventListener("click", function() {
var h = document.createElement('a'); var h = document.createElement('a');
h.href = 'data:text/json;charset=utf-8,' + encodeURI(JSON.stringify(faceJson)); h.href = 'data:text/json;charset=utf-8,' + encodeURI(JSON.stringify(faceJson));
h.target = '_blank'; h.target = '_blank';
h.download = "face.json"; h.download = "face.json";
h.click(); h.click();
}); });
document.getElementById('zipLoader').addEventListener('change', handleZipSelect, false); document.getElementById('zipLoader').addEventListener('change', handleZipSelect, false);
document.getElementById('btnSaveZip').addEventListener('click', handleZipExport, false); document.getElementById('btnSaveZip').addEventListener('click', handleZipExport, false);
document.getElementById('btnSave').disabled = true; document.getElementById('btnSave').disabled = true;
document.getElementById('btnSaveFace').disabled = true; document.getElementById('btnSaveFace').disabled = true;
document.getElementById('btnSaveZip').disabled = true; document.getElementById('btnSaveZip').disabled = true;
document.getElementById('btnUpload').disabled = true; document.getElementById('btnUpload').disabled = true;
</script> </script>
</body> </body>

View File

@ -10,7 +10,7 @@
</div> </div>
<script src="../../core/lib/customize.js"></script> <script src="../../core/lib/customize.js"></script>
<script src="../../core/lib/imageconverter.js"></script> <script src="../../webtools/imageconverter.js"></script>
<script> <script>
var faces = []; var faces = [];

View File

@ -39,8 +39,8 @@
<script src="../../core/lib/customize.js"></script> <script src="../../core/lib/customize.js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="../../core/lib/heatshrink.js"></script> <script src="../../webtools/heatshrink.js"></script>
<script src="../../core/lib/imageconverter.js"></script> <script src="../../webtools/imageconverter.js"></script>
<script src="https://unpkg.com/leaflet-geosearch@3.6.0/dist/bundle.min.js"></script> <script src="https://unpkg.com/leaflet-geosearch@3.6.0/dist/bundle.min.js"></script>
<script> <script>

View File

@ -43,8 +43,8 @@
<script src="../../core/lib/customize.js"></script> <script src="../../core/lib/customize.js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="../../core/lib/heatshrink.js"></script> <script src="../../webtools/heatshrink.js"></script>
<script src="../../core/lib/imageconverter.js"></script> <script src="../../webtools/imageconverter.js"></script>
<script src="https://unpkg.com/leaflet-geosearch@3.6.0/dist/bundle.min.js"></script> <script src="https://unpkg.com/leaflet-geosearch@3.6.0/dist/bundle.min.js"></script>
<script> <script>

View File

@ -106,8 +106,8 @@
<script src="../../core/lib/customize.js"></script> <script src="../../core/lib/customize.js"></script>
<script src="../../core/lib/qrcode.min.js"></script><!-- https://davidshimjs.github.io/qrcodejs/ --> <script src="../../core/lib/qrcode.min.js"></script><!-- https://davidshimjs.github.io/qrcodejs/ -->
<script src="../../core/lib/heatshrink.js"></script> <script src="../../webtools/heatshrink.js"></script>
<script src="../../core/lib/imageconverter.js"></script> <script src="../../webtools/imageconverter.js"></script>
<script src="./qr-scanner.umd.min.js"></script><!-- https://github.com/nimiq/qr-scanner --> <script src="./qr-scanner.umd.min.js"></script><!-- https://github.com/nimiq/qr-scanner -->
<script> <script>
var targetSize = 200; var targetSize = 200;

View File

@ -114,7 +114,7 @@ function evaluateFile(file) {
var hsStart = 'require("heatshrink").decompress(atob("'; var hsStart = 'require("heatshrink").decompress(atob("';
var hsEnd = '"))'; var hsEnd = '"))';
if (file.content.startsWith(hsStart) && file.content.endsWith(hsEnd)) { if (file.content.startsWith(hsStart) && file.content.endsWith(hsEnd)) {
var heatshrink = require(ROOTDIR+"/core/lib/heatshrink.js"); var heatshrink = require(ROOTDIR+"/webtools/heatshrink.js");
var b64 = file.content.slice(hsStart.length, -hsEnd.length); var b64 = file.content.slice(hsStart.length, -hsEnd.length);
var decompressed = heatshrink.decompress(atob(b64)); var decompressed = heatshrink.decompress(atob(b64));
file.content = ""; file.content = "";

View File

@ -3,7 +3,7 @@
*/ */
var fs = require("fs"); var fs = require("fs");
var heatshrink = require("../core/lib/heatshrink"); var heatshrink = require("../webtools/heatshrink");
var acorn; var acorn;
try { try {
acorn = require("acorn"); acorn = require("acorn");

2
core

@ -1 +1 @@
Subproject commit aae64595cf0b42e9c72003921ffd2e0bde5e8f88 Subproject commit 052b072fb745934cceff568c743717330b7e5b32

View File

@ -186,9 +186,9 @@
</footer> </footer>
<script src="webtools/puck.js"></script> <script src="webtools/puck.js"></script>
<script src="webtools/heatshrink.js"></script>
<script src="core/lib/marked.min.js"></script> <script src="core/lib/marked.min.js"></script>
<script src="core/lib/espruinotools.js"></script> <script src="core/lib/espruinotools.js"></script>
<script src="core/lib/heatshrink.js"></script>
<script src="core/js/utils.js"></script> <script src="core/js/utils.js"></script>
<script src="loader.js"></script> <script src="loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> <!-- for backup.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> <!-- for backup.js -->