obniz Developer's Community Forum

goose

ずいぶん前から気になっていたのですが、
ログイン後にフォーラムに入ると表示崩れが発生します。
ごまかしながら使用していたのですが、
気になる部分が見つかったのでご連絡します。

ブラウザ開発ツールのコンソールログに表示される以下のメッセージが影響しているのかもと思いました。

Refused to apply style from 'https://forum.obniz.com/assets/client-simplex.css?v=ot1dh2fdbbg' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

コンソールログ.PNG

以下のスタイルシートが見つからないからなのですかね？
/assets/client-simplex.css

ちなみにログイン前のスタイルシートは以下の模様でこちらは存在するようでした。
/assets/client-cerulean.css

goose

以下のツイートを参考に
M5StickCのブロックプログラミングを試してみたのですが、
期待通りに動きませんでした。
https://twitter.com/obniz_jp/status/1266300964480225287

もしかすると、動作条件として
旧OSから新OSへ移行が必要になりますでしょうか？
https://blog.obniz.io/news/m5stickc-os-migration/

goose

一行抜けてました。

const m5 = require('m5stickcjs');
var obniz = new m5("XXXX-XXXX");
obniz.onconnect = async function () {
    lcd = obniz.m5display;
    await lcd.onWait();
    lcd.setRotation(1);

    let white = lcd.color16(255, 255, 255);
    let blue = lcd.color16(255, 0, 0);  // 本来は (0,0,255)

    lcd.fillScreen(blue);
    lcd.drawString(10, 20, "Hello World", white, white, 2);
};

goose

無事、画面表示が出来ました。

以下、Node.js コードの備忘メモ

const m5 = require('m5stickcjs');
var obniz = new m5("XXXX-XXXX");
obniz.onconnect = async function () {
    lcd = obniz.m5display;
    lcd.setRotation(1);

    let white = lcd.color16(255, 255, 255);
    let blue = lcd.color16(255, 0, 0);  // 本来は (0,0,255)

    lcd.fillScreen(blue);
    lcd.drawString(10, 20, "Hello World", white, white, 2);
};

goose

早速のご回答ありがとうございます。

（１）液晶画面が真っ黒なままの件の解消方法
ディスプレイの使用自体はこちらのようにプログラムを書くことで使うことができますのでお試しください。
https://github.com/obniz/m5stickcjs/blob/develop/examples/html/display/3d-cubes/index.html

承知しました。
こちらの情報をもとに試してみます。

（２）obnizデバイス登録の方法
すみません、現在、登録する方法はありません。

そうなのですね。承知しました。
https://obniz.io/ja/pricing
上記サイトの「ライセンス比較表（一覧）」の「Hobby Lite」の「利用できる機能」に
「デバイス管理（OTAなど）」と表記がありましたので、登録できるものと理解してしまいました。

（３）obnizIDの正式な確認方法
シリアルから確認いただいた方法で、obnizIDを確認いただければと思います。

承知しました。

今後ともよろしくお願いいたします。

goose

具体的なご説明ありがとうございました。

動作条件につき承知しました。

今後ともよろしくお願いいたします。

goose

M5StickC [ obnizOS + HobbyLite ] を購入させていただき、
早速試しているのですが、使い方で不明な点があるため教えて下さい。

尚、M5Stackを含めこの機種を触るのは初めてですが、
有識者のみなさまのTwitter情報を頼りにＬチカまでは成功しています。

▽動作確認経緯
（※いろいろ試行錯誤したので本当の順番ではないのと、記憶漏れがあるかもしれません）

付属のUSBタイプCケーブルでPCと接続
M5StickC 本体横にある電源スイッチを長押しして起動するも液晶画面は真っ黒のまま
（最初は、ここで起動していないと思い込んでしまい初期不良を疑っていたりしました）
ネットワーク設定を実施
Windwos のデバイスマネージャーから使用ポートを確認
ArduinoIDE のシリアルモニタ経由で Obniz ID を確認
obnizデバイス登録を試みたが「3.確認」で「ディスプレイに表示されている英数字」が確認できないため中断
開発者コンソールのリポジトリにてＬチカプログラムを作成し実行

▽質問事項
（１）液晶画面が真っ黒なままの件の解消方法
（２）obnizデバイス登録の方法
（３）obnizIDの正式な確認方法

以上、よろしくお願いいたします。

goose

Androidスマホにてブロックプログラミングをしています。

カメラを使用したいのですが、「Cannot start camera on your device.」というメッセージが表示され使用できないようです。
「Xperia SO-02G（Andriod Version 6.0.1）」という古い機種なので、
対応していない可能性があると思っているのですが、
動作保証されているスペック制限等はありますでしょうか？
スマホ側でのカメラアプリの権限設定は許可している状態です。

尚、他にカメラ付きのモバイルやPCを持っていないため、
別の機器での動作確認はできていません。

コンソールログの表示内容は以下の通りです。

09:49:22
1 2 precision highp float; 3 precision highp int; 4 varying vec2 resultUV; 5 const vec2 halfCR = vec2(0.5, 0.5); 6 7 struct ivec5 8 { 9 int x; 10 int y; 11 int z;
09:49:22
Fragment shader compilation failed.
09:49:22
%c 12 int w;
border:1px solid red; background-color:#e3d2d2; color:#a61717
09:49:22
13 int u; 14 }; 15 16 struct ivec6 17 { 18 int x; 19 int y; 20 int z; 21 int w; 22 int u; 23 int v; 24 }; 25 26 bool isNaN(float val) { 27 return (val < 1.0 || 0.0 < val || val == 0.0) ? false : true; 28 } 29 30 bool hasNaN(vec4 values) { 31 vec4 v1 = values * values; 32 vec4 v2 = values * values; 33 return any(notEqual(v1, v2)); 34 } 35 36 float getNaN(vec4 values) { 37 return dot(vec4(1), values); 38 } 39 40 int round(float value) { 41 return int(floor(value + 0.5)); 42 } 43 44 int imod(int x, int y) { 45 return x - y * (x / y); 46 } 47 48 //Based on the work of Dave Hoskins 49 //https://www.shadertoy.com/view/4djSRW 50 #define HASHSCALE1 443.8975 51 float random(float seed){ 52 vec2 p = resultUV * seed; 53 vec3 p3 = fract(vec3(p.xyx) * HASHSCALE1); 54 p3 += dot(p3, p3.yzx + 19.19); 55 return fract((p3.x + p3.y) * p3.z); 56 } 57 58 59 vec2 UVfrom1D(int texNumR, int texNumC, int index) { 60 int texR = index / texNumC; 61 int texC = index - texR * texNumC; 62 return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR); 63 } 64 vec2 packedUVfrom1D(int texNumR, int texNumC, int index) { 65 int texelIndex = index / 2; 66 int texR = texelIndex / texNumC; 67 int texC = texelIndex - texR * texNumC; 68 return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR); 69 } 70 71 72 vec2 UVfrom2D(int texNumR, int texNumC, int numC, int row, int col) { 73 int index = row * numC + col; 74 int texR = index / texNumC; 75 int texC = index - texR * texNumC; 76 return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR); 77 } 78 vec2 packedUVfrom2D(int texelsInLogicalRow, int texNumR, 79 int texNumC, int row, int col) { 80 int texelIndex = (row / 2) * texelsInLogicalRow + (col / 2); 81 int texR = texelIndex / texNumC; 82 int texC = texelIndex - texR * texNumC; 83 return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR); 84 } 85 86 87 vec2 UVfrom3D(int texNumR, int texNumC, int stride0, 88 int stride1, int row, int col, int depth) { 89 // Explicitly use integer operations as dot() only works on floats. 90 int index = row * stride0 + col * stride1 + depth; 91 int texR = index / texNumC; 92 int texC = index - texR * texNumC; 93 return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR); 94 } 95 vec2 packedUVfrom3D(int texNumR, int texNumC, 96 int texelsInBatch, int texelsInLogicalRow, int b, 97 int row, int col) { 98 int index = b * texelsInBatch + (row / 2) * texelsInLogicalRow + (col / 2); 99 int texR = index / texNumC; 100 int texC = index - texR * texNumC; 101 return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR); 102 } 103 104 105 vec2 UVfrom4D(int texNumR, int texNumC, int stride0, 106 int stride1, int stride2, int row, int col, int depth, 107 int depth2) { 108 // Explicitly use integer operations as dot() only works on floats. 109 int index = row * stride0 + col * stride1 + depth * stride2 + depth2; 110 int texR = index / texNumC; 111 int texC = index - texR * texNumC; 112 return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR); 113 } 114 vec2 packedUVfrom4D(int texNumR, int texNumC, int texelsInBatch2, 115 int texelsInBatch, int texelsInLogicalRow, int b2, int b, 116 int row, int col) { 117 int index = b2 * texelsInBatch2 + b * texelsInBatch + 118 (row / 2) * texelsInLogicalRow + (col / 2); 119 int texR = index / texNumC; 120 int texC = index - texR * texNumC; 121 return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR); 122 } 123 124 125 vec2 UVfrom5D(int texNumR, int texNumC, int stride0, 126 int stride1, int stride2, int stride3, int row, int col, int depth, 127 int depth2, int depth3) { 128 // Explicitly use integer operations as dot() only works on floats. 129 int index = row * stride0 + col * stride1 + 130 depth * stride2 + depth2 * stride3 + depth3; 131 int texR = index / texNumC; 132 int texC = index - texR * texNumC; 133 return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR); 134 } 135 136 137 vec2 UVfrom6D(int texNumR, int texNumC, int stride0, 138 int stride1, int stride2, int stride3, int stride4, 139 int row, int col, int depth, int depth2, int depth3, int depth4) { 140 // Explicitly use integer operations as dot() only works on floats. 141 int index = row * stride0 + col * stride1 + depth * stride2 + depth2 * 142 stride3 + depth3 * stride4 + depth4; 143 int texR = index / texNumC; 144 int texC = index - texR * texNumC; 145 return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR); 146 } 147 148 149 150 float sampleTexture(sampler2D textureSampler, vec2 uv) { 151 return texture2D(textureSampler, uv).r; 152 } 153 154 155 void setOutput(float val) { 156 gl_FragColor = vec4(val, 0, 0, 0); 157 } 158 159 uniform sampler2D source; 160 161 ivec4 getOutputCoords() { 162 ivec2 resTexRC = ivec2(resultUV.yx * 163 vec2(224, 672)); 164 int index = resTexRC.x * 672 + resTexRC.y; 165 int r = index / 150528; index -= r * 150528;int c = index / 672; index -= c * 672;int d = index / 3; int d2 = index - d * 3; 166 return ivec4(r, c, d, d2); 167 } 168 169 170 float getSourceFlat(int index) { 171 vec2 uv = UVfrom1D(224, 672, index); 172 return sampleTexture(source, uv); 173 } 174 175 176 float getSource(int row, int col, int depth) { 177 float texR = float(row); 178 float texC = dot(vec2(col, depth), vec2(3, 1)); 179 vec2 uv = (vec2(texC, texR) + halfCR) / 180 vec2(672.0, 224.0); 181 return sampleTexture(source, uv); 182 } 183 184 float getSource(int row, int col, int depth, int depth2) { 185 return getSource(col, depth, depth2); 186 } 187 188 float getSourceAtOutCoords() { 189 return sampleTexture(source, resultUV); 190 } 191 192 193 uniform ivec4 start; 194 195 void main() { 196 ivec4 sourceLoc = start + getOutputCoords(); 197 setOutput(getSource(sourceLoc.x, sourceLoc.y, sourceLoc.z, sourceLoc.w)); 198 } 199

goose

早速のご確認とご返信ありがとうございます。

現時点ではご紹介いただいた方法のみの旨、承知致しました。

他の方法のご検討を期待してお待ちしております！

今後とも、よろしくお願いいたします。

goose

以下のページを参照し
ObnizOS を ESP32-DevKitC へインストールを行い、
無事にＬチカテストまで成功しました。
https://obniz.io/ja/doc/obnizos/os_install

上記のようにセットアップ完了済の
ObnizOS がインストールされた ESP32 を
別のネットワーク上で動作させたいために
Wi-Fi接続情報(SSID,password)を変更したいのですが、
この設定変更手順がわかりません。

設定変更手順もしくは、
(obniz Boardのような)Wi-Fi設定のリセット手順を
教えていただけませんでしょうか。

goose

ご回答ありがとうございました。

質問①、質問②共に解決いたしました。

質問①の方は、
spi_frequency の値を変更することで、成功率が大幅にアップいたしました。

質問②の方は、
私の使っているカメラが記事の通り Mini-2MP-Plus でしたので、data.unshift(255); を追加することで無事に画像表示されました。

これで、ますます Obniz が楽しめそうです。
今後ともよろしくお願いいたします。

goose

パーツライブラリ内の ArduCAMMini の紹介ページに掲載されている
サンプルコードについて質問させていただきます。
https://obniz.io/ja/sdk/parts/ArduCAMMini/README.md

質問対象は、
｢ピンだけを指定して以下のように設定することが出来ます。｣
直下のサンプルコードとなります。

尚、Obnizとカメラの接続は、紹介画像の通りとしています。
(外部電源は使用せず、io11をvccへ接続しています)

■質問①
TestOpenボタンを押下すると以下のエラーが頻発します。
ーーーーー
Error: spi bus fail
Object{message:spi bus fail, url:https://unpkg.com/obniz@latest/obniz.js, line:19373, colmun:13}
ーーーーー
※10回に1回くらいは成功する感じですが法則性が見つかりません。
※電源投入後最初の1回は成功確率が高いかもしれません。
※エラーの時は瞬時にエラーが返ってきます。

こちらの症状を解決するためのアプローチを
教えていただけませんでしょうか？
原因が、
回路構成を含むハードウェア側なのか
ソフトウェア側なのかの
切り分け方法もわからない状態です。

■質問②
上記のエラーが発生せずに撮影に成功した場合は、
撮影画像がブラウザ上に表示されることを
期待しているのですが、表示されません。

上記赤丸部分を右クリックして
「画像だけを表示」を選択すると以下のように
画像が壊れている旨のメッセージが確認できます。

ソースコード上の

const data = await cam.takeWait('1024x768');

ここで、dataに期待通りに返ってきていないか、

const base64 = cam.arrayToBase64(data);

ここで、期待通りにエンコードされていないのでは？
と考えているのですが、
こちらも解決するためのアプローチを
教えていただけませんでしょうか？

以上、よろしくお願いいたします。

Posts made by goose