{"id":16321114,"url":"https://github.com/reteprelleum/mkr_sd_web","last_synced_at":"2026-04-20T19:02:40.252Z","repository":{"id":215171758,"uuid":"147998154","full_name":"RetepRelleum/MKR_SD_WEB","owner":"RetepRelleum","description":"MKR1000 Arduino SD Webserver","archived":false,"fork":false,"pushed_at":"2018-09-16T07:49:44.000Z","size":192,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-14T08:48:40.934Z","etag":null,"topics":["arduino","google-charts","javascript","mkr1000","sd-card","webserver"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RetepRelleum.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-09-09T06:08:42.000Z","updated_at":"2018-09-16T07:49:45.000Z","dependencies_parsed_at":"2024-01-03T00:44:54.009Z","dependency_job_id":"09a164ed-5044-47f0-8ec8-fc5106470682","html_url":"https://github.com/RetepRelleum/MKR_SD_WEB","commit_stats":null,"previous_names":["reteprelleum/mkr_sd_web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RetepRelleum/MKR_SD_WEB","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RetepRelleum%2FMKR_SD_WEB","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RetepRelleum%2FMKR_SD_WEB/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RetepRelleum%2FMKR_SD_WEB/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RetepRelleum%2FMKR_SD_WEB/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RetepRelleum","download_url":"https://codeload.github.com/RetepRelleum/MKR_SD_WEB/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RetepRelleum%2FMKR_SD_WEB/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32061251,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arduino","google-charts","javascript","mkr1000","sd-card","webserver"],"created_at":"2024-10-10T22:46:30.792Z","updated_at":"2026-04-20T19:02:40.232Z","avatar_url":"https://github.com/RetepRelleum.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webserver für Arduino\n\n## MKR1000 WIFI mit MKR SD Proto Shield\n\nEntweder man benutzt eine Cloude oder speichert die Daten lokal in einer SD Karte.\n\nDiese Projekt beinhaltet einen Webserver mit Zugriff auf das Web Directory der SD Karte.\n\n-   SD Root\n    -   PROPERTY.PRP \\\\\\\\ [File mit MIME-TYPE des Webserver](https://wiki.selfhtml.org/wiki/MIME-Type/%C3%9Cbersicht)\n    -   Web \\\\\\\\ Root Directory  des Webservers\n        -   LOG \\\\\\\\ Directory des logging tools\n            -   20180825.CSV \\\\\\\\ Erstellt täglich ein File mit 5 Minuten Werte\n        -   JS \\\\\\\\ Directory für Javascript Files\n        -   MKR \\\\\\\\ Directory mit speziellen Befehlen\n\nZusätzlich hat der Webserver noch folgenden Funktionen.\n\n-   \u003chttp://mkr/MKR/DIR(\u003e) liest alle File auf der SD Karte ab dem Directory WEB als CSV File\n    -   INDEX.HTM,IMG,IMG/OFF.SVG,IMG/OFF2.SVG,IMG/ON2.SVG,IMG/ON.SVG,IMG/OFF1.SVG,IMG/ON1.SVG,JS,JS/DO.JS,JS/DI.JS,JS/AI.JS,LOG,LOG/20180825.CSV,LOG/20180804.CSV,LOG/20180901.CSV,LOG/20180826.CSV,LOG/19700101.CSV,LOG/20180902.CSV,LOG/20180908.CSV,LOG/20180909.CSV,LOG/20180915.CSV,FAVICON.ICO,LOG.HTM,OS.HTM\n-   \u003chttp://mkr/MKR/GETDIO(pin\u003e) Liest den Status des Digitalen Pin  (0-14) des MKR100 als CSV File\n    -   1\n-   \u003chttp://mkr/MKR/GETDIO(\u003e) Liest den Status der Digitalen Pin  (0-14) des MKR100 als CSV File\n    -   0,1,0,0,1,1,0,1,0,0,0,1,1,1,1\n-   \u003chttp://mkr/MKR/SETDIO(pin,value\u003e) Setzt den Status des Digitalen Pins (0-14) des MKR100 mit value HIGH 1 or LOW 0 return 1 erfolgreich 0 nicht erfolgreich\n    \\-1\n-   \u003chttp://mkr/MKR/GETAIO(pin\u003e) Liest den Wert des Analogen Pin (0-6) des MKR100 als CSV File Werten von 0-1023\n    -   143\n-   \u003chttp://mkr/MKR/GETAIO(\u003e) Liest den Wert der Analogen Pins (0-6) des MKR100 als CSV File Werten von 0-1023\n    -   608,440,507,182,421,316,240\n-   \u003chttp://mkr/MKR/GETDATA(pin\u003e) Liest 512 Werte inkl. Zeit in Mikrosekunden des Analogen Pin (0-6) des MKR100 als CSV File Werten von 0-1023\n    -   0,466\n    -   422,440\n    -   844,360\n    -   1266,377\n    -   ...\n\nDas Arduino Projekt besteht aus dem Komponenten:\n\n## WebServer\n\nDer Webserver stellt die Webserverfunktionalität zur Verfügung. Inkl. der oben erwähnten MKR Funktionalität welche in der Klasse MKRRequest definiert wurden.\nUm den Webserver starten zu können benenne das File arduino_secrets_.h in arduino_secrets.h um und ergänze die WIFI Zugangsdaten.\n\n## Recorder\n\nDer Recorder speichert alle 15 Minuten die Analogwerte in File YYYYMMDD.CSV\n\n## HTML\n\nFür die Darstellung auf einer Webseite stehen die Javascript Klassen **DI,DO,AI** zur Verfügung. Sie sind folgendermassen in das HTML File einzubinden:\n\n```javascript\n\u003cscript type=\"text/javascript\" src=\"js/DO.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"js/DI.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"js/AI.js\"\u003e\u003c/script\u003e\n```\n\nund müssen folgendermassen initialisiert werden:\n\n```javascript\n\u003cscript\u003e\nfunction interval() {\n    aISetValue();\n    dISetValue();\n    dOSetValue();\n}\n\nfunction onLoad() {\n    new DO(document.getElementById(String(\"do1\" )), 1,\"img/on.svg\", \"img/off.svg\", \"50\");\n    new DI(document.getElementById(String(\"di1\" )), 1 \"img/on2.svg\", \"img/off2.svg\", \"50\");\n    new AI(document.getElementById(String(\"ai1\" )), 1, 10000, 50);\n    setInterval(interval, 2000);\n}\n \u003c/script\u003e\n```\n```html\n\u003cdiv id=\"do1\"\u003e\u003c/div\u003e\n\u003cdiv id=\"di1\"\u003e\u003c/div\u003e\n\u003cdiv id=\"ai1\"\u003e\u003c/div\u003e\n```\nund sieht dann folgendermassen aus\n\n\u003cimg src=\"./web/img/off.svg\"\u003e oder \u003cimg src=\"./web/img/on.svg\"\u003e\n\n\u003cimg src=\"./web/img/on2.svg\" width=100 height=100\u003e oder \u003cimg src=\"./web/img/off2.svg\" width=100 height=100\u003e\n\n\u003cimg src=\"./web/img/dummi.svg\" width=100 height=100\u003e\n\n## Google Charts\nEs ist möglich mittels Google Chart die geloggten Daten darzustellen.\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n    google.charts.load('current', {'packages': ['corechart', 'calendar']});\n    google.charts.setOnLoadCallback(drawChartLine);\n    google.charts.setOnLoadCallback(drawChartData);\n    google.charts.setOnLoadCallback(drawChartDD);\n    var datum = new Date();\n    var dat = \"LOG/\" + datum.getFullYear() + ((datum.getMonth() \u003c 9) ? \"0\" : \"\") + (datum.getMonth() + 1) + ((datum.getDate() \u003c 10) ? \"0\" : \"\") + (datum.getDate()) + \".CSV\";\n    function fx_z(p1, p2) {\n        switch (p2) {\n            case 0:\n                return (p1 / 0.5);\n                break;\n            case 1:\n                return (p1 / 2.5);\n                break;\n            case 2:\n                return (p1 / 0.5);\n                break;\n            case 3:\n                return (p1 / 2.5);\n                break;\n            case 4:\n                return (p1 / 0.5);\n                break;\n            case 5:\n                return (p1 / 2.5);\n                break;\n            case 6:\n                return (p1 / 0.5);\n                break;\n            default:\n                return p1;\n        }\n    }\n\n    function drawChartDD() {\n        $.get('MKR/GETDATA(2)', function (csvString) {\n            var data = new google.visualization.DataTable();\n            data.addColumn('number', \"zeit\");\n            data.addColumn('number', \"data\");\n            var arr1 = csvString.split('\\n');\n            data.addRows(arr1.length);\n            arr1.forEach(function (item1, index) {\n                var arr = item1.split(\",\");\n                data.setCell(index, 0, arr[0]);\n                data.setCell(index, 1, arr[1]);\n            });\n            var options = {\n                curveType: 'function',\n                legend: {position: 'bottom'},\n                vAxis: {title: 'Wert'},\n                hAxis: {title: 'Zeit'}\n            };\n            var chart = new google.visualization.LineChart(document.getElementById('dd_chart'));\n            chart.draw(data, options);\n        });\n    }\n    function drawChartLine() {\n        $.get(dat, function (csvString) {\n            var data = new google.visualization.DataTable();\n            data.addColumn('datetime', 'Datum');\n            data.addColumn('number', \"0\");\n            data.addColumn('number', \"1\");\n            data.addColumn('number', \"2\");\n            data.addColumn('number', \"3\");\n            data.addColumn('number', \"4\");\n            data.addColumn('number', \"5\");\n            data.addColumn('number', \"6\");\n            var array = csvString.split(\"\\n\");\n            data.addRows(array.length);\n            for (i = 0; i \u003c array.length; i++) {\n                var row = array[i].split(\",\");\n                var da = new Date();\n                da = new Date(row[0]);\n                data.setCell(i, 0, da);\n                for (x = 1; x \u003c row.length; x++) {\n                    data.setCell(i, x, fx_z(row[x], x - 1));\n                }\n            }\n\n            var options = {\n                title: 'Ueberschrift'.concat(\" \").concat(datum.getDate()).concat(\".\").concat(datum.getMonth() + 1).concat(\".\").concat(datum.getFullYear()),\n                curveType: 'function',\n                legend: {position: 'bottom'},\n                vAxis: {title: 'Wert'},\n                hAxis: {title: 'Datum'}\n            };\n            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));\n            chart.draw(data, options);\n        });\n    }\n\n    function drawChartData() {\n        $.get('MKR/DIR()', function (csvString) {\n            var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));\n            var array2 = [\"\"];\n            var datArray = [\n                [new Date(), 1]\n            ];\n            var dataTable = new google.visualization.DataTable();\n            dataTable.addColumn({\n                type: 'date',\n                id: 'Date'\n            });\n            dataTable.addColumn({\n                type: 'number',\n                id: 'Day'\n            });\n            datArray[0] = [new Date(), 1];\n            dataTable.addRows(datArray);\n            var options = {\n                title: \"Daten vorhanden\",\n                height: 350\n            };\n            google.visualization.events.addListener(chart, 'select', function () {\n                var selection = chart.getSelection();\n                if (selection.length) {\n                    var row = selection[0].row;\n                    if (row) {\n                        datum = new Date(selection[0].date);\n                        dat = \"LOG/\" + datum.getFullYear() + ((datum.getMonth() \u003c 9) ? \"0\" : \"\") + (datum.getMonth() + 1) + ((datum.getDate() \u003c 10) ? \"0\" : \"\") + (datum.getDate()) + \".CSV\";\n                        drawChartLine();\n                    }\n                }\n            });\n            csvString = csvString.substr(0, csvString.length - 2);\n            array2 = csvString.split(\",\");\n            lauf = 0;\n            for (i = 0; i \u003c array2.length; i++) {\n                try {\n                    if (array2[i].endsWith(\".CSV\")) {\n                        array2[i] = array2[i].replace(\"LOG/\", \"\");\n                        array2[i] = array2[i].replace(\"1\\r\\n\", \"\");\n                        var datums = new Date(array2[i].substr(0, 4), array2[i].substr(4, 2) - 1, array2[i].substr(6, 2));\n                        if (datums.getFullYear() \u003e 2016) {\n                            datArray[lauf] = [datums, ((i % 2) === 0) ? 1 : -1];\n                            lauf++;\n                        }\n                    }\n                } catch (err) {\n\n                }\n            }\n            dataTable.addRows(datArray);\n            chart.draw(dataTable, options);\n        });\n    }\n    \u003c/script\u003e\n\n    \u003ctable  style=\"width: 100%\"\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003cdiv id=\"curve_chart\"\u003e\u003c/div\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e \u003cdiv id=\"calendar_basic\"  \u003e\u003c/div\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e \u003cdiv id=\"dd_chart\"  \u003e\u003c/div\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n```\n\nmit folgendem Resultat\n\u003cimg src=\"./web/img/dummi2.png\"\u003e \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freteprelleum%2Fmkr_sd_web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freteprelleum%2Fmkr_sd_web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freteprelleum%2Fmkr_sd_web/lists"}