iOS Widget, das die Anzahl an Klopapier Packungen in deiner nächsten dm Drogerie anzeigt (für die scriptable.app)

tvoc-eco2-device-widget.js

// dm Klopapier Widget
//
// Copyright (C) 2020 by marco79 <marco79cgn@gmail.com>
//
// Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER
// IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE
// OF THIS SOFTWARE.
//
// Toilet paper icon made by boettges

/*
Copyright 2020 by Mauro Riva (LeMaRiva Tech lemariva.com)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

forked from https://gist.github.com/marco79cgn/23ce08fd8711ee893a3be12d4543f2d2
*/


var domainName = "https://apis.lemariva.com/";
var deviceId = '';

if (args.widgetParameter && Array.isArray(args.widgetParameter))  {
    deviceId = args.widgetParameter.join(' ');
} else if (args.widgetParameter && typeof args.widgetParameter === 'string') {
    deviceId = args.widgetParameter;
}

const widget = new ListWidget();

await createWidget();

// used for debugging if script runs inside the app
if (!config.runsInWidget) {
    await widget.presentSmall();
}
Script.setWidget(widget);
Script.complete();

// build the content of the widget
async function createWidget() {
    const deviceData = await fetchDeviceData(domainName, deviceId);
    const timeStamp = new Date(1970, 0, 1);
    timeStamp.setSeconds(deviceData.epoch);

    widget.addSpacer(4);
    const logoImg = await getImage('lemariva-logo.png');

    colorText = new Color("#00000");
    colorWarning = new Color("#F7B500");
    colorDanger = new Color("#FF6565");
    colorOk = new Color("#6DD400");

    fontSmall = Font.mediumRoundedSystemFont(10);
    fontMedium = Font.mediumRoundedSystemFont(15);
    fontBig = Font.mediumRoundedSystemFont(20);

    widget.setPadding(5, 5, 5, 5);
    const logoRow = widget.addStack();
    logoRow.layoutHorizontally();

    const logoImageStack = logoRow.addStack();
    logoImageStack.cornerRadius = 8;
    const wimg = logoImageStack.addImage(logoImg);
    wimg.imageSize = new Size(40, 40);
    wimg.rightAlignImage();
    widget.addSpacer(2);

    let logoSpace = logoRow.addSpacer(10);
    let columnDevice = logoRow.addStack();

    const deviceTitle = columnDevice.addText(deviceData.device_id);
    deviceTitle.font = fontSmall;
    deviceTitle.textColor = colorText;

    let row1 = widget.addStack();
    row1.layoutHorizontally();
    row1.topAlignContent();

    let columnTVOC = row1.addStack();
    columnTVOC.layoutVertically();

    const tvocText = columnTVOC.addText("TVOC");
    tvocText.font = fontMedium;

    const tvocPPM = columnTVOC.addText(deviceData.tvoc.toString());
    tvocPPM.font = fontBig;

    const tvocDef = columnTVOC.addText("ppm");
    tvocDef.font = fontSmall;

    if (deviceData.tvoc > 1000) {
        tvocPPM.textColor = colorDanger;
    } else if (deviceData.tvoc > 1000) {
            tvocPPM.textColor = colorWarning;
    } else {
        tvocPPM.textColor = colorOk;
    }
    row1.addSpacer(40);

    let columnECO2 = row1.addStack();
    columnECO2.layoutVertically();

    const eco2Text = columnECO2.addText("eCO2");
    eco2Text.font = fontMedium;
    const eco2PPM = columnECO2.addText(deviceData.eco2.toString());
    eco2PPM.font = fontBig;
    const eco2Def = columnECO2.addText("ppm");
    eco2Def.font = fontSmall;

    widget.addSpacer(2);
    let row2 = widget.addStack();
    const timeText = row2.addText('last update: ' + timeStamp.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) + ' hs.');
    timeText.font = fontSmall;
    row2.addSpacer(2);

    widget.addSpacer(2);

    let row3 = widget.addStack();
    row3.layoutHorizontally();
    row3.cornerRadius = 5;
    row3.setPadding(5,5,5,5);

    let textButton;

    if (deviceData.tvoc > 1000) {
        textButton = row3.addText("Bad Air Quality! Ventilate! ");
        row3.backgroundColor = colorDanger;
    } else if (deviceData.tvoc > 600) {
        textButton = row3.addText("Moderate Air Quality!");
        row3.backgroundColor = colorWarning;
    } else {
        textButton = row3.addText("Good Air Quality!");
        row3.backgroundColor = colorOk;
    }
    
    textButton.font = fontSmall;
    textButton.textColor = colorText;
}

// fetches the amount of toilet paper packages
async function fetchDeviceData(domainName, deviceId) {
    const url = domainName + '/dev?deviceId=' + encodeURI(deviceId);
    req = new Request(url);
    return await req.loadJSON();
}


// get images from local filestore or download them once
async function getImage(image) {
    let fm = FileManager.local();
    let dir = fm.documentsDirectory();
    let path = fm.joinPath(dir, image);
    if (fm.fileExists(path)) {
        return fm.readImage(path);
    } else {
        // download once
        let imageUrl;
        switch (image) {
            case 'lemariva-logo.png':
                imageUrl = "https://lemariva.com/storage/app/media/icon.png";
                break;
            default:
                console.log(`Sorry, couldn't find ${image}.`);
        }
        let iconImage = await loadImage(imageUrl);
        fm.writeImage(path, iconImage);
        return iconImage;
    }
}

// helper function to download an image from a given url
async function loadImage(imgUrl) {
    const req = new Request(imgUrl);
    return await req.loadImage();
}

iOS Widget

You can find more information on how to use the files in the following tutorials:

• M5Stack: Fresh air checker helps you to stay safe from #COVID-19
• Nginx: Docker, Flask and Let's Encrypt (SSL)
• M5Stack: Widgets on your Smartphone help to stay safe from #COVID-19
• iOS Scriptable Widget

Installation Instructions

1. Copy the source code from above (click on "raw" at the top right);
2. Open the Scriptable app;
3. Click on the + symbol at the top right and paste the copied script;
4. Change the line var domainName = "https://apis.lemariva.com/" to match your domain.
5. Click on the title of the script at the top and give it a name (e.g. CO2 Measuring Device);
6. Save the script by clicking on "Done" in the top left;
7. Go to your iOS home screen and long press somewhere to get into "wiggle mode" (which can also be used to arrange the app icons);
8. Press the + symbol at the top left, then scroll down to "Scriptable" (list is alphabetical), choose the first widget size (small) and press Add widget at the bottom;
9. Press on the widget to edit its settings (optionally long press if the wiggle mode has already been exited)
10. Under "Script" select the one created above (CO2 Measuring Device) (see Fig. 1)
11. Scroll down and enter the determined device_id as "Parameter", e.g. m5stack-atom-office (see Fig. 2)

Fig. 1: Setting Scriptable Widget	Fig. 2: Running Scriptable Widget

Acknowledge

forked from: marco79cgn/dm-toilet-paper.js. Thanks!