Autojs 利用OpenCV识别棋子之天天象棋你马没了

news2024/9/22 13:24:16

本例子通过代码像你介绍利用OpenCV实现霍尔找圆的方法定位棋子位置
通过autojs脚本实现自动点击棋子 开源地址

https://github.com/Liberations/TtxqYourHorseIsGone/blob/master/main.js
AutoXJs
https://github.com/kkevsekk1/AutoX/releases
auto()
//安卓版本高于Android 9
if (device.sdkInt > 28) {
    //等待截屏权限申请并同意
    threads.start(function () {
        packageName('com.android.systemui').text('立即开始').waitFor()
        text('立即开始').click()
    });
}
//申请截屏权限
if (!requestScreenCapture()) {
    toast("请求截图失败")
    exit()
}
http.__okhttp__.setTimeout(40 * 1000)//低版本需要加这个
// 创建空的棋盘
// 创建空的棋盘
function createEmptyChessboard() {
    var temp = [];
    // 创建一个大小为 10x9 的二维数组,并用空字符串初始化
    for (var i = 0; i < 10; i++) {
        temp[i] = Array(9).fill("O");
    }

    return temp;
}


// 打印二维数组
function printChessboard(chessboard) {
    for (var i = 0; i < chessboard.length; i++) {
        var row = chessboard[i].join(" ");
        log(row);
    }
}


//复制一份新的数组
function copyArray(array) {
    var newArray = [];

    for (var i = 0; i < array.length; i++) {
        var innerArray = array[i];
        var newInnerArray = innerArray.slice(); // 复制内部数组
        newArray.push(newInnerArray);
    }

    return newArray;
}

//将[row,col] 转成字母
function coordinatesToAlgebraic(coordinates) {
    var row = coordinates[0]
    var col = coordinates[1]
    if (isRed) {
        row = 9 - row;
        col = col + 'a'.charCodeAt(0);
        return String.fromCharCode(col) + row.toString();
    } else {
        col = 8 - col + 'a'.charCodeAt(0);
        return String.fromCharCode(col) + row.toString();
    }


}


//将字母转成 [row,col]
function algebraicToCoordinates(algebraic) {
    var col = algebraic.charCodeAt(0) - 'a'.charCodeAt(0);
    var row = 9 - parseInt(algebraic.substring(1));
    if (isRed) {
        //b9 c7 (0,1) (2,2)
        return [row, col];
    } else {
        //b9 c7  (9,7) (7,6)
        row = 9 - row
        col = 8 - col
        return [row, col];
    }
}


//二维数组旋转180度
function rotateArray180(array) {
    var rotated = [];
    for (var i = array.length - 1; i >= 0; i--) {
        var row = array[i];
        var rotatedRow = row.slice().reverse();
        rotated.push(rotatedRow);
    }
    return rotated;
}

//大小写翻转
function transformString(str) {
    let transformedString = "";

    for (let i = 0; i < str.length; i++) {
        let char = str.charAt(i);
        if (char === char.toUpperCase()) {
            transformedString += char.toLowerCase();
        } else {
            transformedString += char.toUpperCase();
        }
    }

    return transformedString;
}



//释放图片资源
function releaseSouce() {
    // if (img != null) {
    //     img.recycle()
    //     img = null
    // }
    if (board_img != null) {
        board_img.recycle()
        img = null
    }
}


//通过row col去点击相应的坐标
function clickChess(row, col) {
    var clickStartX = (2 * col + 1) * chess_piece_radius + boardLeft;
    var clickStartY = (2 * row + 1) * chess_piece_radius + boardTop;
    //log("点击位置clickStartX " + clickStartX + " clickStartY " + clickStartY)
    click(clickStartX, clickStartY);
}




//所有的操作都用这个控制
//初始的象棋布局
var defaultChessBoard = [
    ['r', 'n', 'b', 'a', 'k', 'a', 'b', 'n', 'r'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['O', 'c', 'O', 'O', 'O', 'O', 'O', 'c', 'O'],
    ['p', 'O', 'p', 'O', 'p', 'O', 'p', 'O', 'p'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['P', 'O', 'P', 'O', 'P', 'O', 'P', 'O', 'P'],
    ['O', 'C', 'O', 'O', 'O', 'O', 'O', 'C', 'O'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['R', 'N', 'B', 'A', 'K', 'A', 'B', 'N', 'R']
]

//初始化圆的位置
var defaultCircleBoard = [
    ['B', 'B', 'B', 'B', 'B', 'B', 'B', 'B', 'B'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['O', 'B', 'O', 'O', 'O', 'O', 'O', 'B', 'O'],
    ['B', 'O', 'B', 'O', 'B', 'O', 'B', 'O', 'B'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['R', 'O', 'R', 'O', 'R', 'O', 'R', 'O', 'R'],
    ['O', 'R', 'O', 'O', 'O', 'O', 'O', 'R', 'O'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['R', 'R', 'R', 'R', 'R', 'R', 'R', 'R', 'R']
]

var defaultBlackCircleBoard = [
    ['R', 'R', 'R', 'R', 'R', 'R', 'R', 'R', 'R'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['O', 'R', 'O', 'O', 'O', 'O', 'O', 'R', 'O'],
    ['R', 'O', 'R', 'O', 'R', 'O', 'R', 'O', 'R'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['B', 'O', 'B', 'O', 'B', 'O', 'B', 'O', 'B'],
    ['O', 'B', 'O', 'O', 'O', 'O', 'O', 'B', 'O'],
    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
    ['B', 'B', 'B', 'B', 'B', 'B', 'B', 'B', 'B']
]

var isRed = null
var isSart = true
var isMyStep = false //标志是否我方下棋
var stepCount = 0 //累计步数
var fen = ""
var img = null //每次的截图
var board_img = null //裁剪出来的棋盘
var storage = storages.create("chessStorage");
var boardWidth = 1010 //棋 盘宽度
var boardHeight = 1140  //棋盘高度
var boardTop = 626 //棋盘上边距
var boardLeft = 34 //棋盘左边距
var speekOn = false //棋盘左边距
var chess_piece_radius = 0 //棋子半径
var chess_piece_width = 0 //棋子宽度
var moves = [] //当前移动的fen码
var chessBoard = null
var circleBoard = []
var intervalId = 0
var 开始 = images.read("开始.png")
var 关闭 = images.read("关闭.png")
var 确定 = images.read("确定.png")
var 叉叉 = images.read("叉叉.jpg")
var 对战助手 = images.read("对战助手.jpg")
var 确定退出 = images.read("确定退出.jpg")

//删除截图
var imgDir = "img";
files.removeDir(imgDir)
files.create(imgDir + "/")

function main() {
    initStart()
    isSart = true
    log('开始新的对局')
    while (isSart) {
        try {
            sleep(2000)
            findChess()
        } catch (e) {
            log("发生异常" + e)
        }
        //isSart = false
    }

}

function initStart() {
    chessBoard = copyArray(defaultChessBoard)
    circleBoard = copyArray(defaultCircleBoard)
    isRed = null
    isSart = true
    isMyStep = false //标志是否我方下棋
    stepCount = 0 //累计步数
    fen = ""
    moves = []
    lastMove = ""
    if (intervalId != 0) {
        clearInterval(intervalId)
        intervalId = 0
    }
}


function findChess() {
    img = images.captureScreen()
    if (!img) {
        toastLog('截图失败')
        return
    }
    var pos4 = images.findImage(img, 对战助手)
    if (pos4) {
        speek("发现对战助手按钮")
        click(pos4.x, pos4.y)
        //重新初始化
        initStart()
        return
    }
    //log("开始findChess")
    var pos = images.findImage(img, 关闭)
    if (pos) {
        speek("发现关闭对局结束")
        click(pos.x, pos.y)
        sleep(1000)
        click(device.width / 2, device.height / 2)
        //重新初始化
        initStart()
        return
    }

    var pos1 = images.findImage(img, 开始)
    if (pos1) {
        speek("发现开始按钮")
        click(pos1.x, pos1.y)
        //重新初始化
        initStart()
        return
    }

    var pos2 = images.findImage(img, 确定)
    if (pos2) {
        speek("发现确定按钮")
        click(pos2.x, pos2.y)
        //重新初始化
        initStart()
        return
    }

    var pos3 = images.findImage(img, 叉叉)
    if (pos3) {
        speek("发现叉叉按钮")
        click(pos3.x, pos3.y)
        //重新初始化
        initStart()
        return
    }

    chess_piece_width = boardWidth / 9
    chess_piece_radius = chess_piece_width / 2
    board_img = images.clip(img, boardLeft, boardTop, boardWidth, boardHeight)

    if (isRed == null) {
        var col = 4
        var row = 0
        var centerX = (2 * col + 1) * chess_piece_radius;
        var centerY = (2 * row + 1) * chess_piece_radius;
        var left = centerX - chess_piece_radius
        var top = centerY - chess_piece_radius
        let cutImg = images.clip(board_img, left, top, chess_piece_radius * 2, chess_piece_radius * 2)

        let containRed = images.findColor(cutImg, "#953c28", {
            threshold: 4
        })
        let containBlack = images.findColor(cutImg, "#3a3938", {
            threshold: 4
        })

        if (containRed) {
            circleBoard = null
            circleBoard = copyArray(defaultBlackCircleBoard)
            isRed = false
        } else if (containBlack) {
            circleBoard = null
            circleBoard = copyArray(defaultCircleBoard)
            isRed = true
        } else {
            log("没找到帅啥也没有")
        }
        speek("我方为" + (isRed ? "红方" : "黑方"))


    }

    var tempchessboard = createEmptyChessboard()
    var count = 0;
    // 找圆
    min_radius = chess_piece_width / 4
    max_radius = chess_piece_width / 3
    // 灰度化图片
    let gray = images.grayscale(board_img);
    // 找圆
    let arr = images.findCircles(gray, {
        dp: 1,
        minDst: 30,
        param1: 50,
        param2: 30,
        minRadius: parseInt(min_radius),
        maxRadius: parseInt(max_radius),
    });
    gray.recycle()
    for (let i = 0; i < arr.length; i++) {
        let circle = arr[i];
        let x = circle.x; // 圆心 x 坐标
        let y = circle.y; // 圆心 y 坐标
        let radius = circle.radius; // 圆的半径
        // 裁剪图像
        let row = parseInt(y / chess_piece_width)
        let col = parseInt(x / chess_piece_width)
        var left = x - radius;
        var top = y - radius;
        let cutImg = images.clip(board_img, left, top, radius * 2, radius * 2)
        let containRed = images.findColor(cutImg, "#953c28", {
            threshold: 4
        })
        let containBlack = images.findColor(cutImg, "#3a3938", {
            threshold: 4
        })
        if (containRed) {
            count++
            tempchessboard[row][col] = "R"
        } else if (containBlack) {
            count++
            tempchessboard[row][col] = "B"
        } else {
            tempchessboard[row][col] = "O"
        }
        cutImg.recycle()

    }

    //log('总共找到圆' + count)
    if (stepCount == 0 && count != 32) {
        log(arr.length + '数量不够' + count)
        initStart()
        printChessboard(tempchessboard)
        releaseSouce()
        return
    }

    if (stepCount < 999) {
        var pao1start = tempchessboard[7][1]
        var pao1Mid = tempchessboard[2][1]
        var pao1end = tempchessboard[0][1]

        var pao2start = tempchessboard[7][7]
        var pao2Mid = tempchessboard[2][7]
        var pao2end = tempchessboard[0][7]
        if (pao1start != "O" && pao1end != "O" && pao1Mid != "O") {
            speek("发现炮1")
            clickChess(7, 1)
            sleep(50)
            clickChess(0, 1)
            speek("你马没了")
            sleep(2000)
            stepCount++
            return
        }
        if (pao2start != "O" && pao2end != "O" && pao2Mid != "O") {
            speek("发现炮2")
            clickChess(7, 7)
            sleep(50)
            clickChess(0, 7)
            speek("你马没了")
            sleep(2000)
            stepCount++
            return
        }
        return
    }
}

function speek(str) {
    if (true) {
        TTS.speak(str, TextToSpeech.QUEUE_ADD, null);//自定义语音合成内容
    } else {
        log(str)
    }

}

//调用系统语音合成
importPackage(android.speech.tts);
importClass(java.util.Locale);
if (TTS != undefined) { TTS.stop(); TTS.shutdown(); }
var TTS = new TextToSpeech(context, function (status) {
    if (status != TextToSpeech.SUCCESS) {
        toast("初始化TTS失败");
    }
    var r = TTS.setLanguage(Locale.CHINA);
    if (r < 0) {
        toast("不支持该语言: " + r);
        exit();
    }
    log("TTS初始化成功");
});
sleep(500);
speek("开始辅助")
// 创建悬浮窗
var window = floaty.window(
    <vertical>
        <text text="在棋力评测或者积分场快速按钮界面点击开始运行,需要辅助功能模拟点击" textColor="red" w="auto" ></text>
        <button id="toggleButton" text="展开" w="auto" h="auto" />
        <vertical id="menu" visibility="gone">
            <button id="startButton" text="开始" w="auto" h="auto" />
            <button id="stopButton" text="结束" w="auto" h="auto" />
        </vertical>
    </vertical>
);
var isOpen = false
// 设置悬浮窗位置
window.setPosition(0, device.height / 20);

log("我的引擎" + engines.myEngine())
engines.all().forEach(item => {
    if (item.id != engines.myEngine().id) {
        log("停止引擎" + item)
        item.forceStop()
    }

})
function hideMenu() {
    isOpen = false
    window.menu.setVisibility(8);
    window.toggleButton.setText("展开");
}
function expandOrHideMenu() {
    isOpen = !isOpen
    if (isOpen) {
        window.menu.setVisibility(0);
        window.toggleButton.setText("收起");
    } else {
        window.menu.setVisibility(8);
        window.toggleButton.setText("展开");
    }
}
// 切换按钮点击事件
window.toggleButton.click(() => {
    expandOrHideMenu()

});

// 开始按钮点击事件
window.startButton.click(() => {
    hideMenu()
    threads.start(function () {
        isSart = false
        speek("开始")
        main()
    });

});

// 结束按钮点击事件
window.stopButton.click(() => {
    isSart = false
    threads.shutDownAll()
    toastLog("已停止");
    hideMenu()
});

//保持脚本运行
setInterval(() => { }, 1000);

主要函数利用autojs提供的 findCircles函数

images.findCircles(gray, options)
gray {Image} 灰度图片
options {Object} 选项包括:
region {Array} 找圆区域。是一个两个或四个元素的数组。(region[0], region[1])表示找圆区域的左上角;region[2]*region[3]表示找圆区域的宽高。如果只有region只有两个元素,则找圆区域为(region[0], region[1])到图片右下角。如果不指定region选项,则找圆区域为整张图片。
dp {number} dp是累加面与原始图像相比的分辨率的反比参数,dp=2时累计面分辨率是元素图像的一半,宽高都缩减为原来的一半,dp=1时,两者相同。默认为1。
minDst {number} minDist定义了两个圆心之间的最小距离。默认为图片高度的八分之一。
param1 {number} param1是Canny边缘检测的高阈值,低阈值被自动置为高阈值的一半。默认为100,范围为0-255。
param2 {number} param2是累加平面对是否是圆的判定阈值,默认为100。
minRadius {number} 定义了检测到的圆的半径的最小值,默认为0。
maxRadius {number} 定义了检测到的圆的半径的最大值,0为不限制最大值,默认为0。
return {Array}

在图片中寻找圆(做霍夫圆变换)。找到时返回找到的所有圆{x,y,radius}的数组,找不到时返回null。

一个寻找圆的例子:

// 请求截图
requestScreenCapture();
// 截图
let img = captureScreen();
// 灰度化图片
let gray = images.grayscale(img);
// 找圆
let arr = findCircles(gray, {
    dp: 1,
    minDst: 80,
    param1: 100,
    param2: 100,
    minRadius: 50,
    maxRadius: 80,
});
// 回收图片
gray.recycle();

具体看代码 可以在这个基础上实现手机版自动连线功能!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1132140.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

受欢迎的免费在线数据库设计工具Itbuilder

工欲善其事必先利其器&#xff0c;众所周知&#xff0c;良好的数据库设计能够大幅减少后期的运维工作&#xff0c;同时也能最大程度地减少软件项目出错的可能。因此一个合适的在线数据库设计工具&#xff0c;来实现事半功倍的效果。 什么是在线数据库设计&#xff1f; 在线数据…

容联七陌助力鱼跃医疗升级智能联络中心,让客户服务更“鱼跃”

在当今高度竞争的市场环境中&#xff0c;企业的客户服务质量对于维护品牌形象和保持竞争优势至关重要。而随着人工智能、大数据等技术快速发展&#xff0c;智能化客户服务正在成为各行各业发展的重要部分。 鱼跃医疗是一家致力于“用科技律动生命"的国内知名医疗制造企业…

GaussDB技术解读系列:如何迁移到GaussDB?

迁移是数据库选型过程中客户最为关心的话题之一&#xff0c;经过大量的沟通调研&#xff0c;我们总结了三个客户在数据库迁移方面的主要期望&#xff1a;迁移不影响业务运行&#xff08;安心&#xff09;&#xff0c;迁移不能丢数据&#xff08;放心&#xff09;&#xff0c;迁…

损失函数总结(四):NLLLoss、CTCLoss

损失函数总结&#xff08;四&#xff09;&#xff1a;NLLLoss、CTCLoss 1 引言2 损失函数2.1 NLLLoss2.2 CTCLoss 3 总结 1 引言 在前面的文章中已经介绍了介绍了一系列损失函数 (L1Loss、MSELoss、BCELoss、CrossEntropyLoss)。在这篇文章中&#xff0c;会接着上文提到的众多…

【Note】一般二叉树的顺序存储

一般二叉树的存储示意图 位置i012345678910结点ABC^D^E^^F

离子阱领域新突破!滑铁卢团队在量子比特控制方面取得进展

&#xff08;图片来源&#xff1a;网络&#xff09; 要想打造未来量子计算机&#xff0c;就需要对量子比特进行精准可靠地控制。研究人员利用激光开发出了一种新方法&#xff0c;可以控制由化学元素钡制成的单个量子比特&#xff0c;这是迄今为止最好的离子阱量子比特控制方法…

使用Redis部署 PHP 留言板应用

使用Redis部署 PHP 留言板应用 启动 Redis 领导者&#xff08;Leader&#xff09;启动两个 Redis 跟随者&#xff08;Follower&#xff09;公开并查看前端服务清理 启动 Redis 数据库 创建 Redis Deployment apiVersion: apps/v1 kind: Deployment metadata:name: redis-le…

【IDEA查看一个jar包的依赖】

首先install,打jar包 重新创建一个项目 选中刚才的jar包 在这个包下就能看到jar包的依赖了

每日一练 | 华为认证真题练习Day122

1、路由器所有的接口属于同一个广播域。 A. 对 B. 错 2、下列配置默认路由的命令中&#xff0c;正确的是&#xff08;&#xff09;。 A. [Huawei]ip route-static 0.0.0.0 0.0.0.0 192.168.1.1 B. [Huawei-Serial0]ip route-static 0.0.0.0 0.0.0.0 0.0.0.0 C. [Huawei]ip…

做测试5年,熬到阿里P6,月薪25k,我总结了这些技能点

你是不是经常在工作中遇到过这些问题&#xff1a; Linux下查看端口占用命令你还记得吗&#xff1f; python容器数据操作你清楚吗&#xff1f; Devops要用了&#xff0c;各种必备技能你还不熟&#xff1f; 接口调不同&#xff0c;排查思路不清楚&#xff1f; …… 以上这些…

JMeter + Ant + Jenkins持续集成-接口自动化测试

需要安装的工具&#xff1a; jdk1.8jmeter3.2ant1.9jenkins2.1 1、Jdkwin7系统如何安装jdk及环境变量的配置-百度经验 安装包安装设置环境变量验证是否安装正确 Java -version检查&#xff0c;如下就代表安装成功了&#xff0c;环境变量设置就去搜索了&#xff0c;网上很多…

基于springboot实现就业信息管理系统项目【项目源码+论文说明】

基于springboot实现就业信息管理系统演示 摘要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;就业信息管理系统也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人…

【网安大模型专题10.19】※论文5:Keep the Conversation Going: $0.42 each using ChatGPT

Keep the Conversation Going: Fixing 162 out of 337 bugs for $0.42 each using ChatGPT 写在最前面背景介绍自动程序修复流程Process of APR (automated program repair)1、漏洞程序2、漏洞定位模块3、补丁生成4、补丁验证 &#xff08;可以学习的PPT设计&#xff09;经典的…

微软成AI热潮大赢家,继续押注大模型和人工智能

KlipC报道&#xff1a;微软在官网发布了财报&#xff0c;据数据显示该公司营收同比增长13%达565亿美元&#xff0c;营业利润同比增长25%达269亿美元&#xff0c;净利润同比增长27%达223亿美元。 KlipC的合伙人Andi D表示&#xff1a;“微软的智能云部门收入同比增长19%&#xf…

echarts插件-liquidFill(水球图)

echarts插件-liquidFill&#xff08;水球图&#xff09; 1.下载2.引入&#xff1a;3.使用 1.下载 echarts.js下载&#xff1a;https://cdnjs.com/libraries/echarts echarts-liquidfill.js下载&#xff1a;https://github.com/ecomfe/echarts-liquidfill 2.引入&#xff1a; …

Ubuntu虚拟机部署OpenStack

1、部署环境 系统&#xff1a;ubuntu-22.04.3-desktop-amd64DevStack版本&#xff1a;2024.1VMware Workstation&#xff1a;8G内存、4核处理器、100G硬盘/1、网络NAT模式/1 2、Ubuntu环境设置 点击show applications&#xff0c;选择Software&Updates 跟换Ubuntu的镜像…

Selenum八种常用定位(案例解析)

Selenium是一个备受推崇的工具。它有着丰富的功能&#xff0c;让我们能够与网页互动&#xff0c;执行各种任务&#xff0c;能为测试工程师和开发人员提供了很大的便利。 要充分利用Selenium&#xff0c;就需要了解如何正确定位网页上的元素。 接下来我将带大家共同探讨Seleni…

什么是WMS系统条码化管理

WMS系统是一种用于仓库管理的信息化系统&#xff0c;旨在提高仓库操作的效率和准确性。而在WMS系统中&#xff0c;条码化管理是一项关键的技术和方法&#xff0c;它通过将商品和物料打上条码&#xff0c;并利用扫描设备进行数据采集和处理&#xff0c;实现了仓库管理的全面自动…

全网最全的阿里云ACP认证介绍,看这篇就够了!

IT行业的朋友们在找工作的时候&#xff0c;一定会经常看到“有阿里云ACP认证优先”。这也就是说&#xff0c;有一个ACP认证会是你的加分项。 获得阿里云ACP认证的好处&#xff1a; 1、增加职场竞争力&#xff0c;为企业招投标提供资质证书&#xff1b; 2、官方认证证书&#…

echarts-进度条

echarts-进度条 option {title: {text:"xxxx统计",left: 1%,top: 0%,textStyle: {color: "#2E3033",fontSize:18,},},tooltip: {axisPointer: {type: "shadow",},},grid: {top: 9%,left: "12%",right:"22%",bottom:"0…